/* =========================================================
   KosanKu - Modern Theme
   ========================================================= */
:root{
  --brand-50:#eef2ff;
  --brand-100:#e0e7ff;
  --brand-500:#6366f1;
  --brand-600:#4f46e5;
  --brand-700:#4338ca;
  --brand-gradient: linear-gradient(135deg,#4f46e5 0%,#7c3aed 60%,#a855f7 100%);
  --ink-900:#111827;
  --ink-700:#374151;
  --ink-500:#6b7280;
  --ink-300:#d1d5db;
  --surface:#f6f7fb;
  --card-radius:16px;
  --shadow-sm: 0 1px 2px rgba(17,24,39,.06), 0 1px 3px rgba(17,24,39,.04);
  --shadow-md: 0 8px 24px -8px rgba(79,70,229,.18), 0 2px 6px rgba(17,24,39,.05);
}

*{ box-sizing:border-box; }

body{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  background:var(--surface);
  color:var(--ink-900);
  -webkit-font-smoothing:antialiased;
}

a{ text-decoration:none; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#c7cbf5; border-radius:10px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Auth / Login Pages ---------- */
.auth-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--brand-gradient);
  position:relative;
  overflow:hidden;
  padding:24px;
}
.auth-wrapper::before,
.auth-wrapper::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}
.auth-wrapper::before{ width:420px; height:420px; top:-140px; left:-120px; }
.auth-wrapper::after{ width:320px; height:320px; bottom:-120px; right:-80px; }

.auth-card{
  width:100%;
  max-width:960px;
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(30,20,90,.45);
  display:grid;
  grid-template-columns:1.05fr 1fr;
  position:relative;
  z-index:2;
}
.auth-side{
  background:var(--brand-gradient);
  color:#fff;
  padding:56px 44px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.auth-side::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 120%, rgba(255,255,255,.18), transparent 55%);
}
.auth-side .logo-mark{
  width:52px;height:52px;border-radius:14px;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:22px; backdrop-filter:blur(4px);
}
.auth-form{ padding:56px 48px; }
.auth-form h2{ font-weight:800; letter-spacing:-.5px; }
.form-control-modern{
  border-radius:12px;
  padding:12px 16px 12px 44px;
  border:1.5px solid var(--ink-300);
  background:#fff;
  font-size:.95rem;
}
.form-control-modern:focus{
  border-color:var(--brand-500);
  box-shadow:0 0 0 4px var(--brand-100);
}
.input-icon-wrap{ position:relative; }
.input-icon-wrap i{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--ink-500);
}
.btn-brand{
  background:var(--brand-gradient);
  border:none; color:#fff; font-weight:700;
  border-radius:12px; padding:12px 20px;
  box-shadow:var(--shadow-md);
  transition:.2s transform ease, .2s box-shadow ease;
}
.btn-brand:hover{ transform:translateY(-1px); box-shadow:0 14px 26px -10px rgba(79,70,229,.5); color:#fff; }

/* ---------- App Shell ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:264px;
  background:#161327;
  background:linear-gradient(180deg,#1a1533 0%, #16122b 100%);
  color:#e5e3f5;
  position:fixed; top:0; bottom:0; left:0;
  display:flex; flex-direction:column;
  z-index:1030;
  transition:transform .25s ease;
}
.sidebar-brand{
  display:flex; align-items:center; gap:12px;
  padding:22px 22px 18px 22px;
}
.sidebar-brand .mark{
  width:40px;height:40px;border-radius:11px;
  background:var(--brand-gradient);
  display:flex;align-items:center;justify-content:center;
  font-size:18px; color:#fff; flex-shrink:0;
}
.sidebar-brand strong{ font-size:1.05rem; color:#fff; letter-spacing:-.3px; }
.sidebar-brand small{ color:#9791c4; display:block; font-size:.72rem; }

.sidebar-nav{ padding:8px 14px; flex:1; overflow-y:auto; }
.sidebar-nav .nav-section{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:#726c9c; margin:18px 12px 8px;
}
.sidebar-nav a{
  display:flex; align-items:center; gap:12px;
  color:#c9c5e6; padding:10px 14px; border-radius:11px;
  font-size:.89rem; font-weight:600; margin-bottom:3px;
  transition:.15s;
}
.sidebar-nav a i{ width:19px; text-align:center; font-size:.95rem; color:#9791c4; }
.sidebar-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-nav a.active{
  background:var(--brand-gradient); color:#fff;
  box-shadow:0 8px 18px -6px rgba(99,102,241,.55);
}
.sidebar-nav a.active i{ color:#fff; }
.sidebar-nav .badge-count{
  margin-left:auto; background:#ef4444; color:#fff; font-size:.68rem;
  border-radius:20px; padding:1px 7px;
}
.sidebar-foot{ padding:16px; border-top:1px solid rgba(255,255,255,.08); }

.main-area{ margin-left:264px; flex:1; display:flex; flex-direction:column; min-height:100vh; width:calc(100% - 264px); }

.topbar{
  height:72px; background:#fff; border-bottom:1px solid #eef0f6;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; position:sticky; top:0; z-index:1020;
}
.topbar .page-title{ font-weight:800; font-size:1.15rem; letter-spacing:-.3px; }
.topbar .page-title small{ display:block; font-weight:500; color:var(--ink-500); font-size:.78rem; }
.topbar-user{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.topbar-user .avatar{
  width:38px;height:38px;border-radius:11px;background:var(--brand-gradient);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;
}
.icon-btn{
  width:40px;height:40px; border-radius:11px; border:1px solid #eef0f6; background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--ink-700); position:relative;
}
.icon-btn .dot{
  position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%;
  background:#ef4444; border:2px solid #fff;
}
.menu-toggle{ display:none; }
.sidebar-overlay.show{ display:block !important; }

.content-area{ padding:26px 28px 40px; flex:1; }

/* ---------- Cards / Stats ---------- */
.stat-card{
  border-radius:var(--card-radius); background:#fff; border:1px solid #eef0f6;
  padding:20px 22px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  height:100%;
}
.stat-card .icon-badge{
  width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center;
  font-size:19px; color:#fff; margin-bottom:14px;
}
.stat-card .stat-value{ font-size:1.6rem; font-weight:800; letter-spacing:-.5px; }
.stat-card .stat-label{ color:var(--ink-500); font-size:.83rem; font-weight:600; }
.stat-card .stat-trend{ font-size:.78rem; font-weight:700; }

.card-modern{
  border-radius:var(--card-radius); background:#fff; border:1px solid #eef0f6;
  box-shadow:var(--shadow-sm);
}
.card-modern .card-header{
  background:transparent; border-bottom:1px solid #f1f2f8; padding:18px 22px; font-weight:800;
}
.card-modern .card-body{ padding:22px; }

/* ---------- Tables ---------- */
.table-modern{ margin-bottom:0; }
.table-modern thead th{
  background:#f8f8fc; color:var(--ink-500); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; font-weight:800; border:none; padding:13px 16px;
}
.table-modern tbody td{ padding:14px 16px; vertical-align:middle; border-color:#f1f2f8; font-size:.89rem; }
.table-modern tbody tr:hover{ background:#fafaff; }

/* ---------- Badges ---------- */
.badge-soft-success{ background:#dcfce7; color:#15803d; }
.badge-soft-warning{ background:#fef3c7; color:#b45309; }
.badge-soft-danger{ background:#fee2e2; color:#b91c1c; }
.badge-soft-info{ background:#dbeafe; color:#1d4ed8; }
.badge-soft-primary{ background:#e0e7ff; color:#4338ca; }
.badge-soft-secondary{ background:#f1f2f8; color:#4b5563; }
.badge{ font-weight:700; font-size:.72rem; padding:6px 11px; border-radius:20px; }

/* ---------- Buttons ---------- */
.btn-soft-primary{ background:var(--brand-100); color:var(--brand-700); border:none; font-weight:700; }
.btn-soft-primary:hover{ background:var(--brand-500); color:#fff; }
.btn-icon{ width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; padding:0; }

/* ---------- Login (root & portal) shared button ---------- */
.choice-card{
  border-radius:20px; padding:34px 26px; background:#fff; box-shadow:var(--shadow-md);
  border:1px solid #eef0f6; text-align:center; transition:.2s; height:100%;
}
.choice-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -14px rgba(79,70,229,.35); }
.choice-card .ic{
  width:74px;height:74px;border-radius:20px;background:var(--brand-gradient);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;margin:0 auto 18px;
}

/* ---------- Chat / Komplain ---------- */
.chat-window{ height:420px; overflow-y:auto; background:#f8f8fc; border-radius:14px; padding:18px; }
.chat-bubble{ max-width:72%; padding:10px 15px; border-radius:16px; margin-bottom:12px; font-size:.88rem; }
.chat-bubble.me{ background:var(--brand-gradient); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.chat-bubble.other{ background:#fff; border:1px solid #eef0f6; border-bottom-left-radius:4px; }
.chat-bubble .meta{ font-size:.68rem; opacity:.75; margin-top:4px; }

/* ---------- Login pages small ---------- */
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--brand-gradient); padding:20px; }
.login-box{ width:100%; max-width:420px; background:#fff; border-radius:22px; padding:42px 36px; box-shadow:0 30px 60px -20px rgba(30,20,90,.5); }

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.show{ transform:translateX(0); }
  .main-area{ margin-left:0; width:100%; }
  .menu-toggle{ display:flex; }
  .auth-card{ grid-template-columns:1fr; }
  .auth-side{ display:none; }
}

.fade-in{ animation:fadeIn .35s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.empty-state{ text-align:center; padding:60px 20px; color:var(--ink-500); }
.empty-state i{ font-size:46px; color:var(--ink-300); margin-bottom:14px; }