/* =========================================================
   THEME: Azure Steel — Blue + White/Silver Admin Template
   ========================================================= */
:root{
  --navy-900:#0a1f44;
  --navy-800:#0e2a5c;
  --blue-700:#15397a;
  --blue-600:#1d4ed8;
  --blue-500:#2563eb;
  --blue-400:#3b82f6;
  --blue-100:#dbe7fb;
  --silver-50:#f5f7fa;
  --silver-100:#eef1f6;
  --silver-200:#e3e7ee;
  --silver-300:#cdd5e1;
  --silver-400:#aab4c4;
  --ink-900:#1b2433;
  --ink-600:#5b6578;
  --ink-400:#8a93a6;
  --white:#ffffff;
  --success:#1aa179;
  --warning:#d98c0e;
  --danger:#d8425a;
  --radius-lg:14px;
  --radius-md:10px;
  --radius-sm:7px;
  --shadow-sm:0 1px 2px rgba(10,31,68,.06);
  --shadow-md:0 4px 14px rgba(10,31,68,.08);
  --shadow-lg:0 12px 32px rgba(10,31,68,.12);
}

/* ===================== DARK MODE TOKENS ===================== */
[data-theme="dark"]{
  --navy-900:#0a1f44;
  --navy-800:#0e2a5c;
  --blue-700:#2a5cd6;
  --blue-600:#3b6cf0;
  --blue-500:#4f7dff;
  --blue-400:#6e93ff;
  --blue-100:#1c2c4d;

  --silver-50:#0f1726;
  --silver-100:#16203a;
  --silver-200:#212d4a;
  --silver-300:#33405e;
  --silver-400:#566080;

  --ink-900:#e7ecf7;
  --ink-600:#aab4cc;
  --ink-400:#7c87a3;
  --white:#161f36;

  --success:#28c294;
  --warning:#e6a23c;
  --danger:#ef5a76;

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 4px 14px rgba(0,0,0,.35);
  --shadow-lg:0 12px 32px rgba(0,0,0,.45);
}

[data-theme="dark"] body{ background:var(--silver-50); }
[data-theme="dark"] .card,
[data-theme="dark"] .topbar,
[data-theme="dark"] .auth-form-side,
[data-theme="dark"] .dropdown-menu{ background:var(--white); border-color:var(--silver-200); }
[data-theme="dark"] .table-modern thead th{ background:var(--silver-100); }
[data-theme="dark"] .table-modern tbody tr:hover{ background:var(--silver-100); }
[data-theme="dark"] .burger-btn,
[data-theme="dark"] .btn-light{ background:var(--silver-100); color:var(--ink-900); border-color:var(--silver-200); }
[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .burger-btn:hover{ background:var(--silver-200); }
[data-theme="dark"] .topbar-search .form-control,
[data-theme="dark"] .input-group-text{ background:var(--silver-100); border-color:var(--silver-300); color:var(--ink-600); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select{ background:var(--white); border-color:var(--silver-300); color:var(--ink-900); }
[data-theme="dark"] .form-control::placeholder{ color:var(--ink-400); }
[data-theme="dark"] .topbar-icon-btn:hover{ background:var(--silver-100); }
[data-theme="dark"] .user-chip:hover{ background:var(--silver-100); }
[data-theme="dark"] .kpi-card{ background:var(--white); border-color:var(--silver-200); }
[data-theme="dark"] .sidebar-foot{ border-color:var(--silver-200); }
[data-theme="dark"] hr,
[data-theme="dark"] .dropdown-divider{ border-color:var(--silver-200); }
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button{ background:var(--white); color:var(--ink-900); border-color:var(--silver-200); }
[data-theme="dark"] .accordion-button:not(.collapsed){ background:var(--silver-100); color:var(--ink-900); }
[data-theme="dark"] .list-group-item{ background:var(--white); color:var(--ink-900); border-color:var(--silver-200); }
[data-theme="dark"] .nav-tabs{ border-color:var(--silver-200); }
[data-theme="dark"] .nav-tabs .nav-link{ color:var(--ink-600); }
[data-theme="dark"] .nav-tabs .nav-link.active{ background:var(--white); color:var(--ink-900); border-color:var(--silver-200) var(--silver-200) var(--white); }
[data-theme="dark"] .modal-content{ background:var(--white); color:var(--ink-900); }
[data-theme="dark"] .toast{ background:var(--white); color:var(--ink-900); }
[data-theme="dark"] .toast-header{ background:var(--silver-100); color:var(--ink-900); }
[data-theme="dark"] .page-link{ background:var(--white); border-color:var(--silver-300); color:var(--ink-900); }
[data-theme="dark"] .page-item.disabled .page-link{ background:var(--silver-100); color:var(--ink-400); }
[data-theme="dark"] .breadcrumb-bar{ color:var(--ink-400); }
[data-theme="dark"] .kpi-value{ color:var(--ink-900); }
[data-theme="dark"] .card-header{ color:var(--ink-900); }
[data-theme="dark"] .kpi-icon.navy{ background:#24345e; color:#9fb6e8; }
[data-theme="dark"] .kpi-icon.blue{ background:var(--blue-100); color:#8fb0ff; }
[data-theme="dark"] .kpi-icon.success{ background:#16332c; color:var(--success); }
[data-theme="dark"] .kpi-icon.warning{ background:#3a2e14; color:var(--warning); }
[data-theme="dark"] .status-pill.active{ background:#16332c; color:var(--success); }
[data-theme="dark"] .status-pill.pending{ background:#3a2e14; color:var(--warning); }
[data-theme="dark"] .status-pill.blocked{ background:#3a1a22; color:var(--danger); }
[data-theme="dark"] .badge-soft-blue{ background:var(--blue-100); color:#9fb6ff; }
[data-theme="dark"] .badge-soft-navy{ background:#24345e; color:#9fb6e8; }
[data-theme="dark"] .alert-primary{ background:#1c2c4d; color:#9fb6ff; border-color:#2a3c63; }
[data-theme="dark"] .alert-success{ background:#16332c; color:#5fd9ae; border-color:#1f4438; }
[data-theme="dark"] .alert-warning{ background:#3a2e14; color:#f0bb5e; border-color:#4a3a1c; }
[data-theme="dark"] .alert-danger{ background:#3a1a22; color:#f48a9c; border-color:#4a232d; }
[data-theme="dark"] .form-text,
[data-theme="dark"] .text-secondary{ color:var(--ink-600) !important; }
[data-theme="dark"] .border{ border-color:var(--silver-200) !important; }

body{
  background:var(--silver-50);
  color:var(--ink-900);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:.92rem;
  transition:background .2s ease, color .2s ease;
}

h1,h2,h3,h4,h5,h6{ color:var(--navy-900); font-weight:650; letter-spacing:-.01em; }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6{ color:var(--ink-900); }

a{ color:var(--blue-600); text-decoration:none; }
a:hover{ color:var(--blue-700); }

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--silver-300); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--silver-400); }

/* ===================== LAYOUT SHELL ===================== */
.app-shell{ display:flex; min-height:100vh; }

/* ===================== SIDEBAR ===================== */
.sidebar{
  width:268px;
  flex-shrink:0;
  background:linear-gradient(190deg,var(--navy-900) 0%,var(--blue-700) 100%);
  color:#cfe0fb;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:1030;
  transition:width .22s ease, transform .22s ease;
  box-shadow:2px 0 18px rgba(10,31,68,.18);
}
.sidebar.collapsed{ width:78px; }

.sidebar-brand{
  display:flex; align-items:center; gap:.7rem;
  height:64px; padding:0 1.15rem;
  border-bottom:1px solid rgba(255,255,255,.10);
  flex-shrink:0;
  white-space:nowrap;
  overflow:hidden;
}
.sidebar-brand .brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  color:var(--blue-700); font-weight:800; font-size:1.05rem;
  flex-shrink:0;
}
.sidebar-brand .brand-text{ font-weight:700; font-size:1.05rem; color:#fff; letter-spacing:.01em; }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .menu-label,
.sidebar.collapsed .menu-caret,
.sidebar.collapsed .menu-badge{ display:none; }
.sidebar.collapsed .sidebar-brand{ justify-content:center; padding:0; }

.sidebar-scroll{ flex:1 1 auto; overflow-y:auto; padding:1rem .75rem 1.25rem; }

.sidebar-section-label{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.09em;
  color:#7d9bd6; margin:1.1rem .55rem .4rem; font-weight:700;
}

.menu{ list-style:none; margin:0; padding:0; }
.menu-item{ position:relative; }

.menu-link{
  display:flex; align-items:center; gap:.7rem;
  padding:.62rem .65rem;
  border-radius:var(--radius-sm);
  color:#cfe0fb;
  font-size:.875rem; font-weight:500;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
  margin-bottom:.15rem;
}
.menu-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.menu-item.active > .menu-link{
  background:rgba(255,255,255,.13);
  color:#fff;
  box-shadow:inset 3px 0 0 #ffffff;
}
.menu-icon{
  width:20px; flex-shrink:0; text-align:center; font-size:1.02rem;
  color:#9db8e8;
}
.menu-item.active > .menu-link .menu-icon{ color:#fff; }
.menu-label{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-caret{ font-size:.7rem; transition:transform .2s ease; color:#9db8e8; }
.menu-item.open > .menu-link .menu-caret{ transform:rotate(90deg); }
.menu-badge{
  font-size:.65rem; font-weight:700; padding:.15rem .45rem;
  border-radius:20px; background:var(--blue-400); color:#fff;
}

.submenuxx{
  list-style:none; margin:0; padding:.15rem 0 .35rem .8rem;
  border-left:1px solid rgba(255,255,255,.12);
  margin-left:1.05rem;
  display:none;
}

.submenu{
  list-style:none; margin:0; padding:.15rem 0 .35rem .8rem;
  border-left:1px solid rgba(255,255,255,.12);
  margin-left:1.05rem;
  display:none;
}

/* Tambahkan ini: tampilkan submenu kalau parent <li> punya class "open" */
.menu-item.open > .submenu {
  display: block;
}

/* Opsional: putar ikon caret saat terbuka, biar terlihat lebih natural */
.menu-item.open > .menu-link > .menu-caret i {
  transform: rotate(90deg);
  transition: transform .2s ease;
}


/*.menu-item.open > .submenu{ display:block; }*/
.submenu .menu-link{ padding:.5rem .65rem; font-size:.83rem; }
.submenu .submenu{ margin-left:.85rem; }

.sidebar.collapsed .sidebar-scroll{ padding:1rem .5rem; }
.sidebar.collapsed .menu-link{ justify-content:center; padding:.62rem; }
.sidebar.collapsed .submenu{ display:none !important; }

.sidebar-foot{
  padding:.9rem 1rem; border-top:1px solid rgba(255,255,255,.10);
  font-size:.78rem; color:#8aa6da; flex-shrink:0;
}
.sidebar.collapsed .sidebar-foot{ text-align:center; padding:.9rem .4rem; }
.sidebar.collapsed .sidebar-foot span{ display:none; }

/* tooltip-like flyout label for collapsed state on hover (simple) */
.sidebar.collapsed .menu-item:hover > .menu-link .menu-label{
  display:block; position:absolute; left:70px; top:0;
  background:var(--navy-800); color:#fff; padding:.6rem .9rem;
  border-radius:var(--radius-sm); white-space:nowrap; box-shadow:var(--shadow-lg);
  z-index:50;
}

/* ===================== MAIN ===================== */
.main-wrap{
  margin-left:268px;
  flex:1 1 auto;
  min-width:0;
  transition:margin-left .22s ease;
  display:flex; flex-direction:column;
  min-height:100vh;
}
.main-wrap.collapsed{ margin-left:78px; }

/* ===================== TOPBAR ===================== */
.topbar{
  height:64px; flex-shrink:0;
  background:var(--white);
  border-bottom:1px solid var(--silver-200);
  display:flex; align-items:center; gap:.75rem;
  padding:0 1.25rem;
  position:sticky; top:0; z-index:1020;
}
.burger-btn{
  border:none; background:var(--silver-100); color:var(--navy-900);
  width:38px; height:38px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.burger-btn:hover{ background:var(--silver-200); }

.topbar-search{ max-width:340px; width:100%; }
.topbar-search .form-control{
  background:var(--silver-50); border:1px solid var(--silver-200);
}

.topbar-icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--ink-600);
  font-size:1.05rem; position:relative;
}
.topbar-icon-btn:hover{ background:var(--silver-100); color:var(--blue-600); }
.topbar-icon-btn .dot{
  position:absolute; top:6px; right:7px; width:8px; height:8px;
  border-radius:50%; background:var(--danger); border:2px solid var(--white);
}

.user-chip{ display:flex; align-items:center; gap:.55rem; padding:.3rem .5rem .3rem .3rem; border-radius:50px; }
.user-chip:hover{ background:var(--silver-100); }
.avatar-circle{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue-500),var(--navy-800));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; flex-shrink:0;
}

/* ===================== CONTENT ===================== */
.content{ padding:1.5rem; flex:1 1 auto; }

.page-header{ margin-bottom:1.4rem; }
.breadcrumb-bar{ font-size:.8rem; color:var(--ink-400); }

/* ===================== CARDS / KPI ===================== */
.card{ border:1px solid var(--silver-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.card-header{ background:transparent; border-bottom:1px solid var(--silver-200); font-weight:650; color:var(--navy-900); }

.kpi-card{ border-radius:var(--radius-lg); border:1px solid var(--silver-200); background:var(--white); box-shadow:var(--shadow-sm); padding:1.15rem 1.25rem; }
.kpi-icon{
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0;
}
.kpi-icon.blue{ background:var(--blue-100); color:var(--blue-600); }
.kpi-icon.navy{ background:#e3e9f7; color:var(--navy-800); }
.kpi-icon.success{ background:#dcf3ec; color:var(--success); }
.kpi-icon.warning{ background:#fbeed7; color:var(--warning); }
.kpi-value{ font-size:1.55rem; font-weight:750; color:var(--navy-900); line-height:1.1; }
.kpi-label{ color:var(--ink-400); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; font-weight:650; }
.kpi-delta{ font-size:.78rem; font-weight:650; }
.kpi-delta.up{ color:var(--success); }
.kpi-delta.down{ color:var(--danger); }

/* ===================== TABLE ===================== */
.table-modern thead th{
  background:var(--silver-50); color:var(--ink-600);
  font-size:.74rem; text-transform:uppercase; letter-spacing:.05em;
  font-weight:700; border-bottom:1px solid var(--silver-200);
  padding:.85rem 1rem;
}
.table-modern tbody td{ padding:.85rem 1rem; vertical-align:middle; border-bottom:1px solid var(--silver-100); font-size:.86rem; }
.table-modern tbody tr:hover{ background:var(--silver-50); }

.status-pill{ font-size:.72rem; font-weight:650; padding:.32rem .7rem; border-radius:30px; display:inline-flex; align-items:center; gap:.35rem; }
.status-pill.active{ background:#dcf3ec; color:var(--success); }
.status-pill.pending{ background:#fbeed7; color:var(--warning); }
.status-pill.blocked{ background:#fbe2e6; color:var(--danger); }
.status-pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ===================== FORMS ===================== */
.form-control,.form-select{
  border:1px solid var(--silver-300); border-radius:var(--radius-sm);
  padding:.55rem .85rem; font-size:.875rem;
}
.form-control:focus,.form-select:focus{
  border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-100);
}
.form-label{ font-weight:600; font-size:.83rem; color:var(--navy-900); margin-bottom:.35rem; }
.input-group-text{ background:var(--silver-50); border:1px solid var(--silver-300); color:var(--ink-600); }

.form-section-title{
  font-size:.85rem; font-weight:700; color:var(--navy-900); text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:1rem; padding-bottom:.6rem; border-bottom:1px solid var(--silver-200);
}

/* ===================== BUTTONS ===================== */
.btn{ border-radius:var(--radius-sm); font-size:.86rem; font-weight:600; padding:.55rem 1.1rem; }
.btn-primary{ background:var(--blue-600); border-color:var(--blue-600); }
.btn-primary:hover{ background:var(--blue-700); border-color:var(--blue-700); }
.btn-outline-primary{ color:var(--blue-600); border-color:var(--blue-300,var(--blue-400)); }
.btn-outline-primary:hover{ background:var(--blue-600); border-color:var(--blue-600); }
.btn-light{ background:var(--silver-100); border-color:var(--silver-200); color:var(--navy-900); }
.btn-light:hover{ background:var(--silver-200); }
.btn-navy{ background:var(--navy-900); border-color:var(--navy-900); color:#fff; }
.btn-navy:hover{ background:var(--navy-800); border-color:var(--navy-800); color:#fff; }

/* ===================== BADGES / ALERTS / PROGRESS ===================== */
.badge-soft-blue{ background:var(--blue-100); color:var(--blue-700); }
.badge-soft-navy{ background:#e3e9f7; color:var(--navy-800); }
.progress{ height:8px; border-radius:10px; background:var(--silver-100); }
.progress-bar{ background-color:var(--blue-600); }

/* ===================== LOGIN PAGE ===================== */
.auth-shell{
  min-height:100vh; display:flex;
  background:var(--silver-50);
}
.auth-visual{
  flex:1 1 55%;
  background:linear-gradient(160deg,var(--navy-900) 0%, var(--blue-700) 60%, var(--blue-500) 100%);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:3rem;
  color:#e6edfb;
}
.auth-visual::before{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  border:1px solid rgba(255,255,255,.12); top:-180px; right:-180px;
}
.auth-visual::after{
  content:''; position:absolute; width:340px; height:340px; border-radius:50%;
  border:1px solid rgba(255,255,255,.10); bottom:-140px; right:60px;
}
.auth-form-side{
  flex:1 1 45%; display:flex; align-items:center; justify-content:center; padding:2.5rem;
  background:var(--white);
}
.auth-card{ width:100%; max-width:400px; }
.auth-brand-mark{
  width:48px; height:48px; border-radius:12px; background:var(--white);
  color:var(--blue-700); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.3rem; margin-bottom:1.5rem;
}

@media (max-width: 991.98px){
  .auth-visual{ display:none; }
  .sidebar{ transform:translateX(-100%); }
  .sidebar.show-mobile{ transform:translateX(0); width:268px; }
  .main-wrap{ margin-left:0 !important; }
}

.overlay-backdrop{
  display:none; position:fixed; inset:0; background:rgba(10,20,40,.45);
  z-index:1025;
}
.overlay-backdrop.show{ display:block; }