/* =========================================================
   AZKADIENA COLLECTION — style.css
   Design system premium 2026: identitas warna & font brand
   asli dipertahankan (plum/aubergine + emas + Fraunces/Inter),
   diperhalus dengan glassmorphism, depth, micro-motion, dan
   dukungan penuh untuk MODE GELAP (dark mode).
   Font tetap dimuat lokal (offline, PHP Desktop) — TIDAK
   memakai Google Fonts/CDN untuk tipografi.
   ---------------------------------------------------------
   DAFTAR ISI
   1.  Font Face
   2.  Design Tokens (light) & Dark Mode Tokens
   3.  Reset & Base Typography
   4.  Motion Primitives (keyframes)
   5.  Theme Toggle (switch mode terang/gelap)
   6.  Login Screen
   7.  App Shell — Sidebar
   8.  App Shell — Topbar (breadcrumb, notifikasi, export)
   9.  Content — Page Head, Buttons
   10. Stat Cards & Cards
   11. Tabs, Toolbar, Filter Input
   12. Table, Badge, Pagination, Empty State
   13. Barcode Scan Search & Scan Assist
   14. Chart, Grid Layout, Action Cards
   15. Toast Notification
   16. Scrollbar
   17. Form Grid & Modal
   18. Utility Polish
   19. Responsive Breakpoints
   20. Scroll Progress Bar & Scroll-to-top
   21. Button Ripple Effect
   ========================================================= */

/* ===== 1. FONT FACE ===== */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ===== 2. DESIGN TOKENS (LIGHT — default) ===== */
:root{
  color-scheme: light;

  --bg:#F5F4FA;
  --bg-soft:#EFEDF6;
  --surface:#FFFFFF;
  --surface-2:#FCFBFE;
  --surface-solid:#FFFFFF;       /* pengganti #fff hardcoded, ikut berubah di dark mode */
  --surface-glass:rgba(255,255,255,.92);
  --surface-glass-2:rgba(255,255,255,.78);
  --surface-glass-3:rgba(255,255,255,.98);

  --sidebar:#1B1220;
  --sidebar-2:#33223D;
  --sidebar-hover:rgba(255,255,255,.06);
  --sidebar-active:rgba(255,255,255,.09);

  --primary:#6B2D5C;
  --primary-2:#8C3F76;
  --primary-dark:#4A1F40;
  --primary-glow:rgba(107,45,92,.28);

  --gold:#C9962B;
  --gold-2:#E7BC63;
  --gold-soft:#F3E3C4;

  --text:#1D1721;
  --text-muted:#6E6577;
  --border:#E7E4EF;
  --border-soft:#F0EEF6;

  --success:#189167;
  --success-soft:#E3F6EE;
  --danger:#D9435E;
  --danger-soft:#FCE9EC;
  --info:#3B7DD8;
  --info-soft:#E9F0FC;
  --warning:#E38A2E;
  --warning-soft:#FCEEDF;

  --radius-sm:9px;
  --radius:15px;
  --radius-lg:22px;

  --shadow-sm:0 1px 2px rgba(29,23,33,.04);
  --shadow:0 1px 2px rgba(29,23,33,.04), 0 4px 10px -4px rgba(29,23,33,.07);
  --shadow-lg:0 2px 6px rgba(29,23,33,.05), 0 10px 22px -10px rgba(29,23,33,.12);
  --shadow-gold:0 4px 12px -6px rgba(201,150,43,.35);

  --ease:cubic-bezier(.22,.9,.32,1);
  --theme-transition: background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);

  /* Token khusus panel Dashboard — dulu navy statis (#0B1424 dkk), sekarang
     ikut tema aktif supaya tetap enak dipandang baik di light maupun dark mode. */
  --dash-container-bg:#EEF1F9;
  --dash-panel-bg:#FFFFFF;
  --dash-border:#E4E7F2;
  --dash-text:var(--text);
  --dash-text-soft:var(--text-muted);
  --dash-grid:#E7E4EF;
  --dash-track:#ECEAF4;
  --dash-tab-bg:#F1F1F8;
  --dash-tab-text:var(--text-muted);
  --dash-shadow:0 1px 2px rgba(29,23,33,.04), 0 4px 12px -6px rgba(29,23,33,.06);
}

/* ===== 2b. DESIGN TOKENS (DARK MODE) =====
   Diaktifkan via [data-theme="dark"] pada <html>. Warna brand
   (plum + emas) dipertahankan, hanya permukaan & teks yang
   dibalik supaya kontras tetap nyaman di mata. */
[data-theme="dark"]{
  color-scheme: dark;

  --bg:#15101C;
  --bg-soft:#1C1624;
  --surface:#211A2B;
  --surface-2:#261F31;
  --surface-solid:#241D2E;
  --surface-glass:rgba(33,26,43,.92);
  --surface-glass-2:rgba(21,16,28,.80);
  --surface-glass-3:rgba(33,26,43,.98);

  --sidebar:#0F0A15;
  --sidebar-2:#241830;
  --sidebar-hover:rgba(255,255,255,.05);
  --sidebar-active:rgba(255,255,255,.07);

  --primary:#9C4E88;
  --primary-2:#B463A0;
  --primary-dark:#6B2D5C;
  --primary-glow:rgba(156,78,136,.35);

  --gold:#D9A83E;
  --gold-2:#EFCB7C;
  --gold-soft:#3A2E19;

  --text:#F1EDF5;
  --text-muted:#A79AB1;
  --border:#352A42;
  --border-soft:#2A2135;

  --success:#33C08B;
  --success-soft:#153429;
  --danger:#F0708A;
  --danger-soft:#3A1B23;
  --info:#6FA6F0;
  --info-soft:#182B41;
  --warning:#F0A857;
  --warning-soft:#3A2A16;

  --shadow-sm:0 1px 2px rgba(0,0,0,.22);
  --shadow:0 1px 3px rgba(0,0,0,.25), 0 5px 12px -6px rgba(0,0,0,.32);
  --shadow-lg:0 2px 8px rgba(0,0,0,.28), 0 12px 26px -12px rgba(0,0,0,.4);
  --shadow-gold:0 4px 14px -6px rgba(217,168,62,.3);

  /* Dashboard tokens — dark mode: selaras dengan permukaan plum-gelap
     aplikasi, bukan navy terpisah, jadi transisi terasa menyatu. */
  --dash-container-bg:#191320;
  --dash-panel-bg:#211A2B;
  --dash-border:#352A42;
  --dash-text:#F1EDF5;
  --dash-text-soft:#A79AB1;
  --dash-grid:#352A42;
  --dash-track:rgba(255,255,255,.08);
  --dash-tab-bg:rgba(255,255,255,.06);
  --dash-tab-text:#A79AB1;
  --dash-shadow:0 1px 3px rgba(0,0,0,.25), 0 5px 12px -6px rgba(0,0,0,.32);
}

/* Elemen yang perlu ikut animasi halus saat mode di-toggle */
body, .sidebar, .topbar, .card, .stat-card, .action-card, .modal-box,
.tab-btn, .select-mini, .input-mini, .btn-outline, .scan-search,
.barcode-preview-box, table, thead th, tbody td, .field input,
.form-grid input, .form-grid select, .form-grid textarea{
  transition: var(--theme-transition), transform .18s var(--ease);
}

/* ===== 3. RESET & BASE TYPOGRAPHY ===== */
html, body{height:100%;}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
h1,h2,h3,.display{font-family:'Fraunces',serif; letter-spacing:-.01em;}
.mono{font-family:'JetBrains Mono',monospace;}
a{-webkit-tap-highlight-color:transparent;}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;}

/* ===== 4. MOTION PRIMITIVES ===== */
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes scaleIn{
  from{opacity:0; transform:scale(.96) translateY(6px);}
  to{opacity:1; transform:scale(1) translateY(0);}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

.page-head, .stat-grid, .card, .action-card, .two-col > *{
  animation:fadeInUp .5s var(--ease) both;
}
.stat-grid .stat-card:nth-child(1){animation-delay:.02s;}
.stat-grid .stat-card:nth-child(2){animation-delay:.07s;}
.stat-grid .stat-card:nth-child(3){animation-delay:.12s;}
.stat-grid .stat-card:nth-child(4){animation-delay:.17s;}
.action-grid .action-card:nth-child(1){animation-delay:.05s;}
.action-grid .action-card:nth-child(2){animation-delay:.11s;}
.action-grid .action-card:nth-child(3){animation-delay:.17s;}
.content > .card{animation-delay:.06s;}

/* ===== section divider — minimalist spacer (no ornament) ===== */
.stitch{
  height:0;
  margin:20px 0;
  border-bottom:1px solid var(--border-soft);
}

/* ===== 5. THEME TOGGLE ===== */
.theme-toggle{
  position:relative; width:52px; height:30px; border-radius:100px; flex-shrink:0;
  border:1.5px solid var(--border); background:var(--surface-2); cursor:pointer;
  display:inline-flex; align-items:center; padding:3px;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.theme-toggle:hover{border-color:var(--primary);}
.theme-toggle .knob{
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold-2), var(--gold));
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; font-size:11px;
  transform:translateX(0); transition:transform .28s var(--ease), background .28s var(--ease);
}
[data-theme="dark"] .theme-toggle{background:var(--sidebar-2); border-color:var(--border);}
[data-theme="dark"] .theme-toggle .knob{
  transform:translateX(22px);
  background:linear-gradient(135deg, var(--primary-2), var(--primary-dark));
}
#login-screen .theme-toggle{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28);}
#login-screen .theme-toggle:hover{border-color:var(--gold-2);}
.theme-toggle .knob .ic-sun{display:inline;}
.theme-toggle .knob .ic-moon{display:none;}
[data-theme="dark"] .theme-toggle .knob .ic-sun{display:none;}
[data-theme="dark"] .theme-toggle .knob .ic-moon{display:inline;}

/* ===== 6. LOGIN SCREEN ===== */
#login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background: linear-gradient(155deg, #1B1220 0%, #33223D 48%, #6B2D5C 100%);
  padding:20px;
}

.login-card{
  width:100%;
  max-width:410px;
  background:var(--surface-glass);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:42px 38px 34px;
  position:relative;
  overflow:hidden;
  z-index:1;
  animation:scaleIn .55s var(--ease) both;
}
.login-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--primary));
}
.login-logo-img{
  width:58px;height:58px;border-radius:16px;object-fit:cover;
  box-shadow:0 6px 18px rgba(27,18,32,.22);
  margin-bottom:20px;
}
.login-card h1{font-size:25px;font-weight:600;margin-bottom:4px;letter-spacing:-.015em;}
.login-sub{color:var(--text-muted);font-size:13.5px;margin-bottom:28px;line-height:1.5;}
.field{margin-bottom:17px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:7px;text-transform:uppercase;letter-spacing:.06em;}
.field .input-wrap{position:relative;}
.field input{
  width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-size:14.5px; font-family:'Inter',sans-serif; outline:none; transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  background:var(--surface-2);
}
.field input:focus{border-color:var(--primary); background:var(--surface-solid); box-shadow:0 0 0 4px var(--primary-glow);}
.toggle-eye{
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  font-size:11.5px; font-weight:600; color:var(--primary); cursor:pointer; user-select:none;
  padding:4px 6px; border-radius:6px; transition:background .15s;
}
.toggle-eye:hover{background:var(--gold-soft);}
.remember-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;font-size:13px;}
.remember-row label{display:flex;align-items:center;gap:7px;color:var(--text-muted);cursor:pointer;}
.remember-row a{color:var(--primary);text-decoration:none;font-weight:600;}
.remember-row a:hover{text-decoration:underline;}
.btn-login{
  width:100%; padding:13px; border:none; border-radius:11px;
  background:var(--primary);
  color:#fff; font-weight:600; font-size:14.5px;
  cursor:pointer; transition:background .18s var(--ease), transform .18s var(--ease); letter-spacing:.01em;
}
.btn-login:hover{background:var(--primary-dark); transform:translateY(-1px);}
.btn-login:active{transform:translateY(0);}
.login-footnote{text-align:center;font-size:12px;color:var(--text-muted);margin-top:24px;line-height:1.6;}
.error-banner{
  background:var(--danger-soft); color:var(--danger); border:1px solid #F5C4CE;
  padding:11px 13px; border-radius:9px; font-size:12.5px; margin-bottom:16px;
  animation:fadeInUp .3s var(--ease) both;
}

/* ===== 7. APP SHELL — SIDEBAR ===== */
.shell{display:flex;height:100vh;overflow:hidden;}

.sidebar{
  --sb-bg:#0F0B17;
  --sb-panel:#171222;
  --sb-hover:#221A35;
  --sb-active-1:#6C5CE7;
  --sb-active-2:#8B5CF6;
  --sb-text:#FFFFFF;
  --sb-text-2:#A8A8B3;
  --sb-border:rgba(255,255,255,.05);
  --sb-w:256px;
  --sb-w-collapsed:76px;

  width:var(--sb-w); flex-shrink:0; color:var(--sb-text);
  background:var(--sb-bg);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  height:100vh;
  box-shadow:1px 0 0 rgba(0,0,0,.12);
  transition:width .22s cubic-bezier(.4,0,.2,1);
}
.sidebar.collapsed{ width:var(--sb-w-collapsed); }

.brand{
  display:flex; align-items:center; gap:12px; padding:20px 20px 19px;
  border-bottom:1px solid var(--sb-border); position:relative; z-index:1;
  background:var(--sb-panel);
}
.brand .logo-img{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;object-fit:cover;
  box-shadow:0 0 0 2px rgba(255,255,255,.1), 0 6px 16px rgba(0,0,0,.3);
}
.brand .name{font-family:'Fraunces',serif;font-weight:600;font-size:15px;line-height:1.25; color:var(--sb-text); white-space:nowrap; overflow:hidden;}
.brand .name span{display:block;font-family:'Inter',sans-serif;font-size:10px;color:var(--sb-text-2);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-top:1px;}
.sidebar-collapse-btn{
  margin-left:auto; flex-shrink:0; width:26px; height:26px; border-radius:7px; border:none; cursor:pointer;
  background:rgba(255,255,255,.06); color:var(--sb-text-2);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.sidebar-collapse-btn:hover{background:var(--sb-hover); color:#fff;}
.sidebar-collapse-btn svg.lucide{width:14px;height:14px;}
.sidebar.collapsed .sidebar-collapse-btn svg.lucide{ transform:rotate(180deg); }

nav.menu{flex:1; padding:16px 12px; overflow-y:auto; overflow-x:hidden; position:relative; z-index:1;}

.menu-label{
  font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--sb-text-2);
  padding:0 14px; margin:24px 0 10px; position:relative;
}
.menu-label span{
  display:block; padding-bottom:8px; border-bottom:1px solid var(--sb-border);
}
nav.menu > .menu-label:first-child{ margin-top:4px; }

.menu-item{
  display:flex; align-items:center; gap:12px; height:48px; padding:0 15px; border-radius:12px;
  color:var(--sb-text-2); font-size:14px; font-weight:500; cursor:pointer; margin-bottom:4px;
  position:relative; text-decoration:none; white-space:nowrap; overflow:hidden;
  transition:background .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1);
}
.menu-item:hover{background:var(--sb-hover); color:#fff; transform:translateX(4px);}
.menu-item.active{
  background:linear-gradient(90deg, var(--sb-active-1), var(--sb-active-2));
  color:#fff; font-weight:600;
  box-shadow:0 4px 14px -4px rgba(108,92,231,.55);
}
.menu-item.active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px;
  background:#fff;
}
.menu-item .ic{
  width:20px; height:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:inherit;
}
.menu-item.active .ic{ color:#fff; }
.menu-item-label{ overflow:hidden; text-overflow:ellipsis; flex:1; }
.menu-badge{
  flex-shrink:0; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:100px; line-height:1.5;
  background:rgba(255,255,255,.12); color:#fff;
}
.menu-badge.red{background:rgba(244,63,94,.85);}
.menu-badge.blue{background:rgba(59,130,246,.85);}
.menu-badge.green{background:rgba(45,212,191,.85);}
.menu-item.active .menu-badge{background:rgba(255,255,255,.28);}

/* Mode collapsed: hanya icon, label & badge disembunyikan, tooltip muncul saat hover */
.sidebar.collapsed .brand .name,
.sidebar.collapsed .menu-item-label,
.sidebar.collapsed .menu-badge,
.sidebar.collapsed .menu-label span,
.sidebar.collapsed .user-chip > div:last-child{
  display:none;
}
.sidebar.collapsed .brand{ justify-content:center; padding:20px 10px 19px; }
.sidebar.collapsed .sidebar-collapse-btn{ margin-left:0; }
.sidebar.collapsed .menu-item{ justify-content:center; padding:0; }
.sidebar.collapsed .menu-item.active::before{ left:4px; }
.sidebar.collapsed .menu-label{ height:1px; padding:0; margin:20px 10px; border-top:1px solid var(--sb-border); }
.sidebar.collapsed .user-chip{ justify-content:center; }
.sidebar.collapsed .logout-link .menu-item-label{ display:none; }
.sidebar.collapsed .logout-link{ justify-content:center; }
.sidebar.collapsed [data-tooltip]{ position:relative; }
.sidebar.collapsed [data-tooltip]:hover::after{
  content:attr(data-tooltip);
  position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:#1E1730; color:#fff; font-size:12px; font-weight:500; white-space:nowrap;
  padding:6px 11px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.35);
  z-index:50; pointer-events:none;
}

/* ===== Sidebar — kategori collapsible (accordion) ===== */
.menu-group{ margin-bottom:4px; position:relative; }

.menu-group-header{
  display:flex; align-items:center; gap:12px; width:100%; height:48px; padding:0 15px; border-radius:12px;
  color:var(--sb-text-2); font-size:14px; font-weight:500; cursor:pointer;
  background:none; border:none; font-family:inherit; text-align:left;
  position:relative; white-space:nowrap; overflow:hidden;
  transition:background .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1);
}
.menu-group-header:hover{ background:var(--sb-hover); color:#fff; }
.menu-group.open > .menu-group-header{ color:#fff; }
.menu-group-header .ic{ width:20px; height:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:inherit; }
.menu-group-header .menu-item-label{ overflow:hidden; text-overflow:ellipsis; flex:1; }
.menu-group-header .chevron{
  flex-shrink:0; width:16px; height:16px; display:flex; align-items:center; justify-content:center;
  color:var(--sb-text-2); transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.menu-group-header .chevron svg.lucide{ width:15px; height:15px; }
.menu-group.open > .menu-group-header .chevron{ transform:rotate(90deg); color:#fff; }

/* Titik penanda kecil di ikon kategori kalau ada halaman aktif di dalamnya
   (tetap terlihat walau kategori sedang tertutup / sidebar dalam mode icon-only) */
.menu-group.has-active > .menu-group-header .ic{ position:relative; }
.menu-group.has-active > .menu-group-header .ic::after{
  content:""; position:absolute; top:-2px; right:-2px; width:7px; height:7px; border-radius:50%;
  background:linear-gradient(135deg, var(--sb-active-1), var(--sb-active-2));
  box-shadow:0 0 0 2px var(--sb-bg);
}
.menu-group.open.has-active > .menu-group-header .ic::after{ display:none; }

/* Submenu: slideDown/slideUp halus lewat max-height, dihitung oleh JS (app.js) */
.submenu{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .22s cubic-bezier(.4,0,.2,1), opacity .18s ease;
  display:flex; flex-direction:column; padding-left:14px; margin-top:2px;
}
.menu-group.open > .submenu{ opacity:1; }
.submenu-item{
  height:42px; font-size:13.3px; padding-left:13px; margin-bottom:2px;
  border-left:1px solid var(--sb-border);
  border-radius:0 10px 10px 0;
}
.submenu-item:hover{ transform:translateX(2px); }
.submenu-item.active{ border-left-color:transparent; }
.submenu-item .ic{ width:17px; height:17px; }
.submenu-item .ic svg.lucide{ width:17px; height:17px; }

/* Flyout — dipakai hanya saat sidebar icon-only (collapsed manual / breakpoint mobile).
   position:fixed + posisi dihitung oleh JS (app.js) berdasar getBoundingClientRect(),
   supaya tidak ikut terpotong oleh overflow scroll milik nav.menu / .sidebar. */
.group-flyout{
  position:fixed; min-width:220px;
  background:#1E1730; border:1px solid rgba(255,255,255,.08); border-radius:14px;
  padding:10px; box-shadow:0 16px 40px rgba(0,0,0,.45); z-index:200;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.group-flyout.show{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0);
}
.group-flyout-title{
  font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--sb-text-2); padding:4px 10px 8px;
}
.group-flyout-item{
  display:flex; align-items:center; gap:10px; height:38px; padding:0 10px; border-radius:9px;
  color:var(--sb-text-2); font-size:13.3px; font-weight:500; text-decoration:none; white-space:nowrap;
  transition:background .16s ease, color .16s ease;
}
.group-flyout-item:hover{ background:var(--sb-hover); color:#fff; }
.group-flyout-item.active{ background:linear-gradient(90deg, var(--sb-active-1), var(--sb-active-2)); color:#fff; font-weight:600; }
.group-flyout-item .ic{ width:17px; height:17px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.group-flyout-item .ic svg.lucide{ width:17px; height:17px; }

.sidebar.collapsed .menu-group-header{ justify-content:center; padding:0; }
.sidebar.collapsed .menu-group-header .chevron{ display:none; }
.sidebar.collapsed .submenu{ display:none; }
.sidebar.collapsed .menu-group-header .ic{ margin:0; }

.sidebar-foot{padding:14px 20px 20px; border-top:1px solid var(--sb-border); position:relative; z-index:1; background:var(--sb-panel);}
.user-chip{display:flex;align-items:center;gap:11px;}
.user-chip .av{
  width:34px;height:34px;border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--sb-active-1), var(--sb-active-2));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  overflow:hidden;
}
.user-chip .av.av-photo{ background:var(--sb-hover); }
.user-chip .av img{ width:100%; height:100%; object-fit:cover; display:block; }
.user-chip .u-name{font-size:13.2px;font-weight:600;color:var(--sb-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-chip .u-role{font-size:11px;color:var(--sb-text-2);}
.logout-link{
  margin-top:14px;font-size:13px;color:var(--sb-text-2);cursor:pointer;display:flex;align-items:center;gap:12px;
  text-decoration:none; height:40px; padding:0 4px; border-radius:10px;
  transition:color .2s cubic-bezier(.4,0,.2,1), background .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1);
}
.logout-link:hover{color:#fff; background:var(--sb-hover); transform:translateX(4px);}
.logout-link svg.lucide{width:20px;height:20px;}

/* Scrollbar sidebar — tipis, tema ungu */
nav.menu::-webkit-scrollbar{width:6px;}
nav.menu::-webkit-scrollbar-thumb{background:rgba(139,92,246,.45);border-radius:100px;}
nav.menu::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,.7);}
nav.menu::-webkit-scrollbar-track{background:transparent;}

@media (max-width: 900px){
  .sidebar{ --sb-w:76px; }
  .sidebar:not(.collapsed) .menu-item-label,
  .sidebar:not(.collapsed) .menu-badge,
  .sidebar:not(.collapsed) .menu-label span,
  .sidebar:not(.collapsed) .brand .name{ display:none; }
  .sidebar:not(.collapsed) .brand{ justify-content:center; padding:20px 10px 19px; }
  .sidebar:not(.collapsed) .menu-item{ justify-content:center; padding:0; }
  .sidebar:not(.collapsed) [data-tooltip]:hover::after{
    content:attr(data-tooltip);
    position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%);
    background:#1E1730; color:#fff; font-size:12px; font-weight:500; white-space:nowrap;
    padding:6px 11px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.35); z-index:50; pointer-events:none;
  }

  /* Kategori juga ikut menciut jadi icon-only di mobile; submenu hanya lewat flyout */
  .sidebar:not(.collapsed) .menu-group-header{ justify-content:center; padding:0; }
  .sidebar:not(.collapsed) .menu-group-header .chevron{ display:none; }
  .sidebar:not(.collapsed) .submenu{ display:none; }
}

/* ===== 8. APP SHELL — TOPBAR ===== */
.main{flex:1; min-width:0; height:100vh; display:flex; flex-direction:column; overflow:hidden; background:var(--bg);}
.topbar{
  height:66px; flex-shrink:0;
  background:var(--surface-glass-2);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 28px;
  position:relative; z-index:50;
}
.breadcrumb{font-size:13px;color:var(--text-muted);}
.breadcrumb b{color:var(--text);font-weight:600;}
.topbar-right{display:flex;align-items:center;gap:14px;}
.icon-btn{
  width:36px;height:36px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--text-muted);
  text-decoration:none;position:relative; transition:transform .16s var(--ease), border-color .16s, color .16s, box-shadow .16s;
}
.icon-btn:hover{transform:translateY(-2px); border-color:var(--primary); color:var(--primary); box-shadow:var(--shadow-sm);}

/* ===== Notifikasi (lonceng) ===== */
.notif-menu{position:relative;}
.notif-trigger{position:relative;}
.notif-dot{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px;
  background:var(--danger); color:#fff; border-radius:100px; font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
  box-shadow:0 0 0 2px var(--surface-solid);
}
.notif-dropdown{
  display:none; position:absolute; top:46px; right:0; width:326px;
  background:var(--surface-glass-3); backdrop-filter:blur(10px);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); border:1px solid var(--border);
  z-index:600; overflow:hidden;
}
.notif-menu.open .notif-dropdown{display:block; animation:scaleIn .18s var(--ease) both; transform-origin:top right;}
.notif-dropdown-head{padding:13px 17px;font-size:12.3px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);}
.notif-empty{padding:28px 16px;text-align:center;font-size:12.8px;color:var(--text-muted);}
.notif-item{display:flex;gap:11px;padding:13px 17px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border-soft); transition:background .14s;}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:var(--bg-soft);}
.notif-item .notif-ic{font-size:16px;flex-shrink:0;}
.notif-item .notif-title{display:block;font-size:13px;font-weight:600;}
.notif-item .notif-desc{display:block;font-size:11.8px;color:var(--text-muted);margin-top:2px;line-height:1.4;}
.notif-item.danger .notif-title{color:var(--danger);}
.notif-item.warning .notif-title{color:var(--warning);}
.notif-item.info .notif-title{color:var(--info);}

/* ===== Export dropdown ===== */
.export-menu{position:relative;display:inline-block;}
.export-dropdown{
  display:none; position:absolute; top:40px; right:0; min-width:174px;
  background:var(--surface-glass-3); backdrop-filter:blur(10px);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); border:1px solid var(--border);
  z-index:600; overflow:hidden;
}
.export-menu.open .export-dropdown{display:block; animation:scaleIn .18s var(--ease) both; transform-origin:top right;}
.export-dropdown a{display:block;padding:10.5px 15px;font-size:13px;color:var(--text);text-decoration:none; transition:background .14s;}
.export-dropdown a:hover{background:var(--bg-soft); color:var(--primary);}

/* ===== Varian search (combobox "Cari & pilih varian") ===== */
.varian-search{position:relative;}
.varian-search-list{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:280px; overflow-y:auto;
  background:var(--surface-glass-3); backdrop-filter:blur(10px);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); border:1px solid var(--border);
  z-index:600;
}
.varian-search-list.open{display:block; animation:scaleIn .16s var(--ease) both; transform-origin:top center;}
.varian-search-item{padding:9px 14px;font-size:12.8px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border-soft);}
.varian-search-item:last-child{border-bottom:none;}
.varian-search-item:hover,.varian-search-item.active{background:var(--bg-soft);}
.varian-search-item .vn{font-weight:600;color:var(--text);}
.varian-search-item .vn mark{background:var(--primary-glow);color:var(--primary-dark);border-radius:3px;padding:0 1px;}
.varian-search-item .vs{font-size:11px;color:var(--text-muted);margin-top:2px;}
.varian-search-empty{padding:14px;font-size:12.5px;color:var(--text-muted);text-align:center;}

/* ===== 9. CONTENT — PAGE HEAD & BUTTONS ===== */
.content{padding:34px 36px 56px; flex:1; min-height:0; overflow-y:auto;}
.page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:4px;}
.page-head h1{font-size:26px;font-weight:600;letter-spacing:-.02em;}
.page-head .sub{color:var(--text-muted);font-size:13.5px;margin-top:5px;}

.btn{
  padding:10px 17px;border-radius:10px;font-size:13.3px;font-weight:600;cursor:pointer;border:none;
  display:inline-flex;align-items:center;gap:7px;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s, background .15s;
  text-decoration:none;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-dark{background:var(--sidebar); color:#fff;}
.btn-dark:hover{background:var(--sidebar-2);}
.btn-outline{background:var(--surface-solid);border:1.5px solid var(--border);color:var(--text);}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);}
.btn-success{background:var(--success); color:#fff;}
.btn-success:hover{filter:brightness(1.08);}
.btn-danger{background:var(--danger); color:#fff;}
.btn-danger:hover{filter:brightness(1.08);}
.btn-sm{padding:7px 12px;font-size:12px;border-radius:8px;}

/* ===== 10. STAT CARDS & CARDS ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:26px 0;}
.stat-card{
  background:var(--surface); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow);
  border-left:3px solid var(--primary); position:relative;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.stat-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.stat-card.gold{border-left-color:var(--gold);}
.stat-card.green{border-left-color:var(--success);}
.stat-card.blue{border-left-color:var(--info);}
.stat-card.red{border-left-color:var(--danger);}
.stat-card .val{font-family:'Fraunces',serif;font-size:28px;font-weight:600;line-height:1;margin:8px 0 4px; letter-spacing:-.01em;}
.stat-card .lbl{font-size:11.8px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.stat-card .ic{
  position:absolute;right:18px;top:18px;width:38px;height:38px;border-radius:11px;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-glow); color:var(--primary);
}
.stat-card.gold .ic{background:var(--gold-soft); color:#8A661C;}
.stat-card.green .ic{background:var(--success-soft); color:var(--success);}
.stat-card.blue .ic{background:var(--info-soft); color:var(--info);}
.stat-card.red .ic{background:var(--danger-soft); color:var(--danger);}

.card{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 26px;margin-bottom:24px;
}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.card-head h3{font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:8px;}

/* ===== 11. TABS, TOOLBAR & FILTER INPUT ===== */
.tabs{display:flex;gap:8px;margin-bottom:22px;}
.tab-btn{
  padding:9px 19px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface-solid);font-size:13px;font-weight:600;
  color:var(--text-muted);cursor:pointer;text-decoration:none;display:inline-block;
  transition:all .16s var(--ease);
}
.tab-btn:hover{border-color:var(--primary); color:var(--primary);}
.tab-btn.active{background:var(--primary); border-color:var(--primary); color:#fff;}

.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.toolbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.select-mini, .input-mini{padding:8px 11px;border:1.5px solid var(--border);border-radius:8px;font-size:12.8px;background:var(--surface-solid);color:var(--text); transition:border-color .15s;}
.select-mini:focus, .input-mini:focus{outline:none; border-color:var(--primary);}

/* Filter bar — kotak filter pencarian yang jelas & mudah dipindai mata (varian/barcode dll) */
.filter-bar{
  background:var(--bg-soft); border:1.5px solid var(--border); border-radius:12px;
  padding:14px 16px; margin-bottom:18px;
}
.filter-bar-label{
  display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:12px;
}
.filter-bar-label i{width:14px;height:14px;}
.filter-bar-row{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;}
.filter-field{display:flex; flex-direction:column; gap:5px;}
.filter-field label{font-size:11px; font-weight:600; color:var(--text-muted);}
.filter-field .scan-search .input-mini{min-width:170px;}
.filter-bar-actions{display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap;}
.filter-active-badge{
  font-size:11.5px; color:var(--primary); background:var(--primary-glow);
  padding:5px 11px; border-radius:100px; font-weight:600;
}

/* ===== 12. TABLE, BADGE, PAGINATION, EMPTY STATE ===== */
table{width:100%;border-collapse:collapse;font-size:13.3px;}
thead th{
  text-align:left;padding:12px 15px;background:var(--surface-2);color:var(--text-muted);
  font-size:10.8px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;border-bottom:1px solid var(--border);
}
thead th:first-child{border-top-left-radius:10px;}
thead th:last-child{border-top-right-radius:10px;}
tbody td{padding:13px 15px;border-bottom:1px solid var(--border-soft);}
tbody tr{transition:background .14s;}
tbody tr:hover{background:var(--bg-soft);}
.row-actions{display:flex;gap:6px;}

.badge{padding:4px 11px;border-radius:100px;font-size:11.3px;font-weight:700;display:inline-block;letter-spacing:.01em;}
.badge.green{background:var(--success-soft);color:var(--success);}
.badge.red{background:var(--danger-soft);color:var(--danger);}
.badge.blue{background:var(--info-soft);color:var(--info);}
.badge.gold{background:var(--gold-soft);color:#8A661C;}
.badge.gray{background:var(--bg-soft);color:var(--text-muted);}

.pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:16px;font-size:12.6px;color:var(--text-muted);}
.page-nums{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.page-nums a{
  width:29px;height:29px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;
  color:var(--text-muted);text-decoration:none; transition:all .15s; flex-shrink:0;
}
.page-nums a:hover{background:var(--bg-soft); color:var(--primary);}
.page-nums a.active{background:var(--primary); color:#fff;font-weight:700;}
/* Tombol "Sebelumnya"/"Berikutnya": teks lebih panjang dari lingkaran nomor,
   jadi butuh lebar otomatis + padding sendiri (bukan kotak 29x29 kotak yang bikin teksnya wrap & numpuk). */
.page-nums a.page-nav{
  width:auto; height:32px; padding:0 13px; gap:5px; white-space:nowrap;
  font-weight:600; border:1.5px solid var(--border); background:var(--surface-solid);
}
.page-nums a.page-nav:hover{ border-color:var(--primary); background:var(--bg-soft); }

.page-jump{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12.6px; color:var(--text-muted); }
.page-jump-input{ width:60px; text-align:center; flex-shrink:0; }

@media (max-width: 640px){
  .page-nums a.page-nav span{ display:none; } /* di layar sempit cukup tampilkan panah ‹ › saja */
}

.empty-state{text-align:center;padding:54px 20px;color:var(--text-muted);}
.empty-state .ic{font-size:36px;margin-bottom:12px; opacity:.7;}
.empty-state b{color:var(--text);display:block;font-size:14.5px;margin-bottom:4px;}

/* ===== 12b. LOG AKTIVITAS — TIMELINE MINIMALIS ===== */
.log-timeline{display:flex;flex-direction:column;}
.log-item{display:flex;gap:13px;padding:13px 4px;border-bottom:1px solid var(--border-soft);}
.log-item:last-child{border-bottom:none;}
.log-item-ic{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;padding:0;
}
.log-item-body{flex:1;min-width:0;}
.log-item-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.log-item-desc{font-size:13.6px;color:var(--text);font-weight:500;}
.log-item-time{font-size:11.8px;color:var(--text-muted);white-space:nowrap;}
.log-item-meta{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:12px;color:var(--text-muted);}

/* ===== 13. BARCODE SCAN SEARCH & SCAN-ASSIST ===== */
.scan-search{display:flex;align-items:center;gap:6px;background:var(--surface-solid);border:1.5px solid var(--border);border-radius:9px;padding:2px 4px 2px 11px; transition:border-color .15s, box-shadow .15s;}
.scan-search:focus-within{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow);}
.scan-search .scan-ic{opacity:.55;font-size:13px;}
.scan-search .input-mini{border:none;min-width:230px;}
.scan-search .input-mini:focus{outline:none;}
.scan-result-banner{
  display:flex;align-items:center;gap:14px;background:var(--success-soft);border:1.5px solid var(--success);
  border-radius:var(--radius);padding:15px 17px;margin-bottom:18px;animation:scanPop .28s var(--ease);
}
.scan-result-banner .ic{font-size:26px;}
.scan-result-banner .info{flex:1;}
.scan-result-banner .title{font-weight:700;font-size:15px;color:var(--text);}
.scan-result-banner .meta{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.scan-result-banner .actions{display:flex;gap:8px;}
@keyframes scanPop{from{transform:scale(.96);opacity:0;}to{transform:scale(1);opacity:1;}}

.barcode-preview-box{display:flex;align-items:center;gap:14px;background:var(--surface-solid);border:1.5px dashed var(--border);border-radius:9px;padding:11px 15px;flex-wrap:wrap;}

.scan-assist{background:var(--info-soft);border:1.5px solid var(--info);border-radius:9px;padding:11px 15px;margin-bottom:15px;}
.scan-assist label{display:flex;align-items:center;gap:6px;font-size:12.8px;font-weight:600;color:var(--text);margin-bottom:6px;}
.scan-assist input{width:100%;padding:9px 10px;border:1.5px solid var(--info);border-radius:8px;font-size:13.5px;background:var(--surface-solid);color:var(--text);}
.scan-assist .scan-preview{margin-top:8px;font-size:12.8px;color:var(--text);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.scan-assist .scan-preview b{color:var(--primary);}
.scan-assist .scan-preview.not-found{color:var(--danger);}

/* ===== 14. CHART, GRID LAYOUT & ACTION CARDS ===== */
.period-preset{display:flex;align-items:center;gap:8px;}

.chart-box{height:260px;}

.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;}
.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.action-card{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 22px;text-align:center;
  border-top:3px solid transparent; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  display:block;
}
.action-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-top-color:var(--gold);}
.action-card .ic{
  width:48px;height:48px;border-radius:13px;font-size:20px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-glow); color:var(--primary);
}
.action-card h4{font-size:14.5px;font-weight:600;margin-bottom:5px;}
.action-card p{font-size:12.3px;color:var(--text-muted);margin-bottom:17px;line-height:1.5;}

/* ===== 15. TOAST NOTIFICATION ===== */
.toast{
  position: fixed;
  bottom: 26px;
  right: 26px;
  background: var(--sidebar-2);
  color: #fff;
  padding: 14px 19px;
  border-radius: 11px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 999;

  transform: translateY(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .32s var(--ease), opacity .32s var(--ease);
}
.toast.show{transform:translateY(0); opacity:1; visibility:visible;}
.toast .dot{width:8px;height:8px;border-radius:50%;background:var(--success); box-shadow:0 0 0 3px rgba(24,145,103,.25);}
.toast.error .dot{background:var(--danger); box-shadow:0 0 0 3px rgba(217,67,94,.25);}

/* ===== 16. SCROLLBAR ===== */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#D6D2DE;border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:#C3BDCE;}
::-webkit-scrollbar-track{background:transparent;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3D3149;}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#4C3C5A;}

/* ===== 17. FORM GRID & MODAL ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;}
.form-grid .full{grid-column:1/-1;}
.form-grid label{display:block;font-size:12.3px;font-weight:600;color:var(--text-muted);margin-bottom:7px;}
.form-grid input, .form-grid select, .form-grid textarea{
  width:100%; padding:10.5px 13px; border:1.5px solid var(--border); border-radius:9px;
  font-size:13.5px; font-family:'Inter',sans-serif; outline:none; background:var(--surface-2);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{
  border-color:var(--primary); background:var(--surface-solid); box-shadow:0 0 0 3px var(--primary-glow);
}
.modal-overlay{
  position:fixed;inset:0;background:rgba(27,18,32,.5); backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:500;
}
.modal-overlay.show{display:flex; animation:fadeIn .2s var(--ease);}
.modal-box{
  background:var(--surface-solid);border-radius:var(--radius-lg);padding:28px;width:100%;max-width:460px;
  box-shadow:var(--shadow-lg); animation:scaleIn .24s var(--ease) both;
}
.modal-box h3{font-size:16.5px;margin-bottom:9px;font-family:'Fraunces',serif;font-weight:600;}
.modal-box p{font-size:13.5px;color:var(--text-muted);margin-bottom:22px;line-height:1.55;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;}

/* ===== 18. UTILITY POLISH ===== */
.estimasi-box{ box-shadow:var(--shadow-sm); border:1px solid var(--border-soft); }
.stok-warning{ font-weight:600; }

/* ===== 18b. PENGATURAN — kartu tautan cepat (Kelola Akun/Marketplace/Cabang/Backup) ===== */
.quicklink-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:22px; }
.quicklink-card{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
  border-top:3px solid transparent; text-decoration:none; color:inherit; display:block;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.quicklink-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-top-color:var(--gold); }
.quicklink-ic{
  width:42px;height:42px;border-radius:12px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-glow); color:var(--primary);
}
.quicklink-ic svg.lucide{ width:19px; height:19px; }
.quicklink-card h4{ font-size:14px; font-weight:600; margin-bottom:6px; }
.quicklink-card p{ font-size:12.3px; color:var(--text-muted); margin-bottom:16px; line-height:1.5; min-height:36px; }
.quicklink-card .btn{ pointer-events:none; }
@media (max-width: 1080px){ .quicklink-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .quicklink-grid{ grid-template-columns:1fr; } }

/* ===== 18c. PENGATURAN — uploader foto profil ===== */
.avatar-uploader{
  display:flex; align-items:center; gap:20px; padding:18px; margin-bottom:22px;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:var(--radius);
}
.avatar-uploader-pic{
  width:84px;height:84px;border-radius:50%; flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg, var(--primary), var(--primary-2));
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-size:30px; font-weight:700; font-family:'Fraunces',serif;
  border:3px solid var(--surface-solid); box-shadow:var(--shadow);
}
.avatar-uploader-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-uploader-info{ min-width:0; flex:1; }
.avatar-uploader-name{ font-size:15px; font-weight:600; color:var(--text); margin-bottom:3px; }
.avatar-uploader-hint{ font-size:11.8px; color:var(--text-muted); margin-bottom:12px; line-height:1.5; }
.avatar-uploader-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.avatar-uploader-actions form{ margin:0; display:inline-flex; }
.avatar-pick-btn{ cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.avatar-remove-btn{ color:var(--danger); border-color:var(--danger-soft); }
.avatar-remove-btn:hover{ background:var(--danger-soft); }
@media (max-width: 560px){
  .avatar-uploader{ flex-direction:column; text-align:center; }
  .avatar-uploader-actions{ justify-content:center; }
}

/* ===== 18d. Sekat vertikal ringan antar section form di Pengaturan ===== */
.settings-form{ padding-top:2px; }

/* ===== 19. RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 1080px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .action-grid{grid-template-columns:1fr 1fr;}
  .two-col{grid-template-columns:1fr;}
}
@media (max-width: 900px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .action-grid{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .sidebar{width:214px;}
  .content{padding:22px 18px 40px;}
}

/* ===== 20. SCROLL PROGRESS BAR & SCROLL-TO-TOP ===== */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--primary-2));
  z-index:1200; transition:width .1s linear;
  pointer-events:none;
}

/* ===== Scroll-to-top button ===== */
#scrollTopBtn{
  position:fixed; right:26px; bottom:26px; width:44px; height:44px; border-radius:50%;
  background:var(--primary); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer;
  box-shadow:var(--shadow-lg); z-index:900;
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.9);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
#scrollTopBtn.show{opacity:1; visibility:visible; transform:translateY(0) scale(1);}
#scrollTopBtn:hover{filter:brightness(1.1); transform:translateY(-2px) scale(1.04);}

/* ===== 21. BUTTON RIPPLE EFFECT ===== */
.btn, .tab-btn, .icon-btn, .menu-item{position:relative; overflow:hidden;}
.ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.55); pointer-events:none;
  animation:rippleAnim .55s var(--ease);
}
@keyframes rippleAnim{ to{ transform:scale(2.6); opacity:0; } }

/* ===== 22. STOCK CARD GRID (Stok Gudang — tampilan kartu ala WMS) ===== */
.stock-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(228px, 1fr)); gap:16px;
}
.stock-card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:16px 17px; box-shadow:var(--shadow-sm); position:relative;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s;
}
.stock-card:hover{box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--border);}
.stock-card .sc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px;}
.stock-card .sc-barcode{font-family:'JetBrains Mono',monospace; font-size:10.6px; color:var(--text-muted); letter-spacing:.02em;}
.stock-card .sc-status{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 9px; border-radius:100px; flex-shrink:0; white-space:nowrap;
}
.stock-card .sc-status.ok{background:var(--success-soft); color:var(--success);}
.stock-card .sc-status.low{background:var(--warning-soft); color:var(--warning);}
.stock-card .sc-status.out{background:var(--danger-soft); color:var(--danger);}
.stock-card .sc-name{font-size:14px; font-weight:600; color:var(--text); line-height:1.35; margin-bottom:2px;}
.stock-card .sc-variant{font-size:12px; color:var(--text-muted); margin-bottom:14px;}
.stock-card .sc-stok-row{display:flex; align-items:baseline; gap:6px; margin-bottom:12px;}
.stock-card .sc-stok-val{font-family:'Fraunces',serif; font-size:26px; font-weight:600; letter-spacing:-.01em; line-height:1;}
.stock-card .sc-stok-unit{font-size:11.5px; color:var(--text-muted); font-weight:600;}
.stock-card .sc-meta{
  display:flex; flex-direction:column; gap:4px; padding-top:12px; border-top:1px solid var(--border-soft);
  font-size:11.5px; color:var(--text-muted);
}
.stock-card .sc-meta b{color:var(--text); font-weight:600;}
.stock-card .sc-price{
  margin-top:12px; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:var(--primary);
}
@media (max-width: 700px){
  .stock-grid{grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px;}
}

/* ===== 23. LUCIDE ICON SIZING =====
   Ikon Lucide dirender sebagai SVG oleh lucide.createIcons(). Supaya
   otomatis menyesuaikan ukuran & warna teks di sekitarnya (menu, tombol,
   stat card, dsb) tanpa perlu diatur satu-satu per tempat. */
svg.lucide{
  width:1em; height:1em; stroke-width:2.1;
  vertical-align:-0.15em; flex-shrink:0;
}
.menu-item .ic svg.lucide{ width:20px; height:20px; stroke-width:2; }
.stat-card .ic svg.lucide, .action-card .ic svg.lucide{ width:18px; height:18px; }
.icon-btn svg.lucide, .theme-toggle svg.lucide{ width:16px; height:16px; }
.card-head h3 svg.lucide, .page-head h1 svg.lucide{ width:.85em; height:.85em; }
.notif-ic svg.lucide{ width:16px; height:16px; }
.btn svg.lucide, .btn-sm svg.lucide{ width:14px; height:14px; }
#scrollTopBtn svg.lucide{ width:18px; height:18px; }

/* ===== 24. DASHBOARD DARK CONTROL PANEL =====
   Khusus halaman Dashboard/Beranda. Terinspirasi dari referensi
   dashboard BI bertema navy/cyan. Ter-scope di bawah .dash-dark
   supaya TIDAK mempengaruhi halaman lain (yang tetap tema plum/gold). */
.dash-dark{
  background:var(--dash-container-bg); border:1px solid var(--dash-border);
  border-radius:20px; padding:24px; margin-top:24px;
  color:var(--dash-text); transition:var(--theme-transition);
}
.dash-dark .stat-grid{ margin:0 0 20px; }
.dash-dark .stat-card{
  background:var(--dash-panel-bg); border-left:3px solid #22D3EE; box-shadow:var(--dash-shadow);
  border:1px solid var(--dash-border); border-left-width:3px;
}
.dash-dark .stat-card.green{border-left-color:#2DD4BF;}
.dash-dark .stat-card.gold{border-left-color:#F59E0B;}
.dash-dark .stat-card.blue{border-left-color:#3B82F6;}
.dash-dark .stat-card.red{border-left-color:#F43F5E;}
.dash-dark .stat-card .lbl{color:var(--dash-text-soft);}
.dash-dark .stat-card .val{color:var(--dash-text);}
.dash-dark .stat-card .ic{background:rgba(34,211,238,.14); color:#1AA6BE;}
.dash-dark .stat-card.green .ic{background:rgba(45,212,191,.14); color:#149E85;}
.dash-dark .stat-card.gold .ic{background:rgba(245,158,11,.14); color:#B9720C;}
.dash-dark .stat-card.blue .ic{background:rgba(59,130,246,.14); color:#2563EB;}
.dash-dark .stat-card.red .ic{background:rgba(244,63,94,.14); color:#D6274A;}
[data-theme="dark"] .dash-dark .stat-card .ic{color:#22D3EE;}
[data-theme="dark"] .dash-dark .stat-card.green .ic{color:#2DD4BF;}
[data-theme="dark"] .dash-dark .stat-card.gold .ic{color:#F59E0B;}
[data-theme="dark"] .dash-dark .stat-card.blue .ic{color:#3B82F6;}
[data-theme="dark"] .dash-dark .stat-card.red .ic{color:#F43F5E;}

/* Ringkasan Untung Rugi (dashboard) - rincian pendapatan/beban ala dp-rank-row */
.lr-subhead{
  font-size:11.5px; font-weight:700; color:var(--dash-text-soft); text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:10px;
}
.lr-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--dash-border); font-size:12.5px;
}
.lr-row span{ display:flex; align-items:center; gap:7px; color:var(--dash-text-soft); }
.lr-row span i{ width:14px; height:14px; }
.lr-row b{ color:var(--dash-text); font-family:'JetBrains Mono',monospace; font-weight:600; font-size:12px; }
.lr-row.lr-total{ border-bottom:none; margin-top:2px; padding-top:12px; border-top:1px solid var(--dash-border); }
.lr-row.lr-total span{ color:var(--dash-text); font-weight:700; }
.lr-row.lr-total b{ font-size:13.5px; }

.dash-grid{
  display:grid; grid-template-columns:260px 1fr 300px; gap:18px; align-items:stretch;
}
.dash-panel{
  background:var(--dash-panel-bg); border:1px solid var(--dash-border); box-shadow:var(--dash-shadow);
  border-radius:16px; padding:20px; transition:var(--theme-transition);
}
.dp-head{
  font-size:13px; font-weight:600; color:var(--dash-text-soft); margin-bottom:16px;
  display:flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.03em;
}
.dp-empty{color:var(--dash-text-soft); font-size:12.5px; text-align:center; padding:30px 10px; opacity:.75;}

/* Donut kiri */
.dp-donut-box{ position:relative; height:180px; margin-bottom:14px; }
.dp-legend{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.dp-legend li{ font-size:11.5px; color:var(--dash-text-soft); display:flex; align-items:center; gap:8px; line-height:1.4; }
.dp-legend .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Tengah - trend */
.dp-trend .card-head h3{ color:var(--dash-text); }
.dp-trend .tab-btn{ background:var(--dash-tab-bg); color:var(--dash-tab-text); border:1px solid var(--dash-border); }
.dp-trend .tab-btn.active{ background:#22D3EE; color:#0B1424; border-color:#22D3EE; }
.dp-trend .select-mini{ background:var(--dash-tab-bg); color:var(--dash-text); border:1px solid var(--dash-border); }
.dp-trend-headline{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.dp-big-num{ font-family:'Fraunces',serif; font-size:32px; font-weight:600; color:var(--dash-text); }
.dp-trend-pill{
  font-size:12px; font-weight:700; padding:3px 10px; border-radius:100px;
  background:var(--dash-tab-bg); color:var(--dash-text-soft);
}
.dp-trend-pill.up{ background:rgba(45,212,191,.16); color:#149E85; }
.dp-trend-pill.down{ background:rgba(244,63,94,.16); color:#D6274A; }
[data-theme="dark"] .dp-trend-pill.up{ color:#2DD4BF; }
[data-theme="dark"] .dp-trend-pill.down{ color:#F43F5E; }
.dp-trend-sub{ width:100%; font-size:11px; color:var(--dash-text-soft); opacity:.85; }
.dp-trend .empty-state{ color:var(--dash-text-soft); }

/* Kanan - ranking */
.dp-rank-list{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.dp-rank-row{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.dp-rank-no{ font-size:11px; font-weight:700; color:#2563EB; width:22px; flex-shrink:0; }
[data-theme="dark"] .dp-rank-no{ color:#22D3EE; }
.dp-rank-name{ font-size:11.5px; color:var(--dash-text-soft); flex:1; line-height:1.3; }
.dp-rank-val{ font-size:11.5px; font-weight:700; color:var(--dash-text); font-family:'JetBrains Mono',monospace; }
.dp-rank-bar{ height:5px; border-radius:100px; background:var(--dash-track); overflow:hidden; }
.dp-rank-fill{ height:100%; border-radius:100px; background:linear-gradient(90deg,#22D3EE,#3B82F6); }

/* Bawah - gauge kesehatan stok */
.dp-gauges{ margin-top:18px; }
.dp-gauge-row{ display:flex; justify-content:space-around; flex-wrap:wrap; gap:20px; }
.dp-gauge{ text-align:center; }
.dp-gauge-caption{ font-size:11.5px; color:var(--dash-text-soft); margin-top:6px; }

@media (max-width: 980px){
  .dash-grid{ grid-template-columns:1fr; }
}

/* ===== 24. PRINT UTILITIES =====
   Dipakai halaman yang punya tombol "Cetak" (mis. Stok Gudang) supaya hasil
   cetaknya cuma berisi datanya saja — bukan sidebar/topbar/toolbar/pagination. */
.no-print{}
@media print{
  .sidebar, .topbar, .no-print, #scrollTopBtn, .toast-container{ display:none !important; }
  body, .main{ background:#fff !important; }
  .card{ box-shadow:none !important; border:1px solid #ccc !important; }
  .stock-grid{ grid-template-columns:repeat(3, 1fr) !important; gap:10px !important; }
  .stock-card{ break-inside:avoid; box-shadow:none !important; }
}