:root {
      --bg: #fff5f5;
      --panel: #ffffff;
      --panel-soft: #fff1f2;
      --line: #e2e8f0;
      --text: #3f0b16;
      --muted: #9f1239;
      --primary: #b91c1c;
      --primary-2: #dc2626;
      --success: #059669;
      --danger: #dc2626;
      --warning: #ea580c;
      --radius: 16px;
      --shadow: 0 10px 28px rgba(185, 28, 28, 0.12);
    }
    body.dark {
      --bg: #0b1222;
      --panel: #101a31;
      --panel-soft: #0e1a34;
      --line: #334155;
      --text: #e2e8f0;
      --muted: #94a3b8;
      --primary: #ef4444;
      --primary-2: #dc2626;
      --shadow: 0 10px 28px rgba(5, 10, 22, 0.45);
    }
    * { box-sizing: border-box; }

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
    
    body { margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden; }
    .app{display:none;min-height:100vh}
    .app .sidebar,
    .app .content,
    .app #menuWrap{display:none}
    .login-page{display:none}
    .app.is-auth-checking{display:none}
    .app.is-logged-out{display:none}
    .app.is-logged-in{display:block}
    .app.is-logged-in .sidebar{display:flex}
    .app.is-logged-in .content{display:block}
    .app.is-logged-in #menuWrap{display:block}
    .sidebar-overlay{position:fixed;inset:0;background:rgba(2,6,23,.55);opacity:0;pointer-events:none;transition:.25s;z-index:65}
    .sidebar{position:fixed;top:0;left:0;height:100vh;width:260px;background:linear-gradient(165deg,#7f1d1d 0%,#991b1b 52%,#111827 100%);color:#ffe4e6;padding:18px 14px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid rgba(255,255,255,.14);z-index:70;transform:translateX(-100%);transition:transform .28s ease;overflow:hidden;padding-bottom:20px;gap: 3px;}
    .brand{display:flex;align-items:center;gap:10px}.brand-logo-placeholder{width:48px;height:48px;border-radius:16px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.42);display:grid;place-items:center;color:#fff;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;flex-shrink:0}.brand h2{margin:0;font-size:16px;color:#fff}.brand p{margin:2px 0 0;font-size:11px;color:rgba(255,228,230,.82)}
    .status-mini{margin-top:12px;padding:6px 10px;border:1px solid rgba(255,255,255,.2);border-radius:20px;background:rgba(255,255,255,.06);font-size:11px;display:inline-flex;gap:7px;align-items:center;max-width:max-content}.dot{width:7px;height:7px;border-radius:50%;background:#22c55e}
    .side-link{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#ffe4e6;text-align:left;border-radius:20px;transition:all .22s ease;backdrop-filter:blur(4px);font-size:14px}.side-link i{width:18px;height:18px;flex-shrink:0}.side-link:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)} .side-link.active{background:linear-gradient(135deg,#ef233c,#dc2626);border-color:rgba(255,255,255,.35);box-shadow:0 10px 20px rgba(220,38,38,.32)}
    .side-footer{display:grid;gap:10px}.profile-card{padding:10px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);display:grid}.profile-card strong{font-size:13px}.profile-card small{color:rgba(254,205,211,.8);font-size:11px}.api-mini{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:20px;background:rgba(17,24,39,.34);border:1px solid rgba(255,255,255,.16);font-size:11px}
    .icon-btn{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:12px}.close-side{margin-left:auto;background:transparent;color:#dc2626;border-color:transparent}
    .content{padding:0px 12px 30px;--header-height:62px}
    .mobile-only{display:none}

    body.compact .panel{padding:10px} body.compact .metric{padding:10px}
    .header{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line);padding:0;margin:0 -12px 12px}
    .header-card{display:flex;gap:12px;justify-content:space-between;align-items:center;min-height:var(--header-height);padding:16px 36px;background:var(--panel)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:16px;justify-content:flex-end;min-width:0}
    .header-left{display:flex;align-items:center;gap:10px;min-width:0}
    .header-title{margin:0;font-size:16px;line-height:1.2;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .header-icon{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--primary) 85%, #fff);color:#fff;display:grid;place-items:center;flex-shrink:0}
    .header-text{min-width:0}
    .title{font-size:18px;font-weight:800;color:var(--primary)}
    .subtitle{font-size:12px;color:var(--muted)}
    .pill{font-size:12px;border-radius:999px;padding:6px 10px;background:var(--panel-soft);border:1px solid var(--line)}
    .panel{margin-top:12px;background:var(--panel);border:1px solid var(--line);padding:14px;border-radius:var(--radius);box-shadow:var(--shadow)}
    .hidden{display:none!important}.page-title{margin:0 0 10px;font-size:18px}
    .grid{display:grid;gap:10px;grid-template-columns:1fr}
    .grid.dashboard{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .metric{background:var(--panel-soft);border:1px solid var(--line);border-radius:14px;padding:12px}
    .grid.dashboard .metric{padding:10px;border-radius:12px}
    .grid.dashboard .metric .k{font-size:11px;line-height:1.25}
    .grid.dashboard .metric .v{font-size:18px;margin-top:2px;line-height:1.2}
    .metric .k{font-size:12px;color:var(--muted)} .metric .v{font-size:22px;font-weight:800;margin-top:4px}
    .search-lg{width:100%;padding:14px;border-radius:14px;border:1px solid var(--line);font-size:16px;background:var(--panel)}
    .search-bar,.toolbar,.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    button,select{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel);color:var(--text);font-weight:700;cursor:pointer}
    button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      font-size:13px;
      line-height:1;
      border-radius:12px;
      transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .16s ease,opacity .18s ease;
    }
    button:hover{filter:saturate(1.02)}
    button:active{transform:scale(.985);box-shadow:0 2px 8px rgba(15,23,42,.08)}
    button:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-2) 20%,transparent),0 8px 16px rgba(225,29,72,.18);
      border-color:color-mix(in srgb,var(--primary-2) 68%, #f472b6);
    }
    button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
    .btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent}
    .btn-primary:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 90%, #fff),color-mix(in srgb,var(--primary-2) 92%, #fff))}
    .btn-ghost{background:color-mix(in srgb,var(--panel) 72%, #fde2e8);border-color:color-mix(in srgb,var(--line) 70%, #fbcfe8)}
    .btn-ghost:hover{background:color-mix(in srgb,var(--panel) 52%, #f9c7d9);border-color:color-mix(in srgb,var(--line) 42%, #f472b6)}
    .btn-outline{background:transparent;border-color:color-mix(in srgb,var(--line) 58%, #fda4af)}
.chip{border-radius:999px;font-size:12px;padding:7px 11px}.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.panel :where(input,select,textarea,.search-lg,[type="search"],.search-input,.dropdown-trigger),
:where(input,select,textarea,.search-lg,[type="search"],.search-input,.dropdown-trigger){
  border:1px solid color-mix(in srgb,var(--line) 78%, #fbcfe8);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
  -webkit-appearance:none;
  appearance:none;
}

.panel :where(input,select,textarea,.search-lg,[type="search"],.search-input,.dropdown-trigger):hover,
:where(input,select,textarea,.search-lg,[type="search"],.search-input,.dropdown-trigger):hover{
  border-color:color-mix(in srgb,var(--primary) 30%, #f9a8d4);
}

.panel :where(input,select,textarea,.search-lg,[type="search"],.search-input,.dropdown-trigger):focus,
.panel :where(input,select,textarea,.search-lg,[type="search"],.search-input,.dropdown-trigger):focus-visible,
:where(input,select,textarea,.search-lg,[type="search"],.search-input,.dropdown-trigger):focus,
:where(input,select,textarea,.search-lg,[type="search"],.search-input,.dropdown-trigger):focus-visible{
  outline:none;
  border-color:color-mix(in srgb,var(--primary-2) 74%, #f472b6);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-2) 22%, transparent),0 0 0 1px color-mix(in srgb,#fda4af 75%, transparent);
  background:var(--panel);
}

.panel :where(input,select,textarea,.search-lg,[type="search"],.search-input,.dropdown-trigger):disabled,
:where(input,select,textarea,.search-lg,[type="search"],.search-input,.dropdown-trigger):disabled{
  opacity:.65;
  cursor:not-allowed;
}

textarea{resize:vertical;min-height:96px}

@media (max-width: 899px){
  :where(input,select,textarea,.search-lg,[type="search"],.search-input,.dropdown-trigger){
    min-height:42px;
  }
}
    .state{border:1px dashed var(--line);border-radius:12px;padding:16px;text-align:center;color:var(--muted)}
    .state.error{border-color:#fecaca;background:#fff7f7;color:var(--danger)}
    .result-list{display:grid;gap:10px}.result-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel-soft)}
    .result-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
    .badge{border-radius:999px;padding:3px 8px;font-size:11px;color:#fff;display:inline-block}
    .b-kartu{background:#2563eb}.b-rpl{background:#16a34a}.b-bulky{background:#7c3aed}.b-in{background:#059669}.b-out{background:#ea580c}.b-high{background:#dc2626}.b-medium{background:#ea580c}.b-low{background:#eab308;color:#3f0b16}
    .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
    table{width:100%;min-width:700px;border-collapse:collapse} th,td{padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px;text-align:left;white-space:nowrap}
    th{background:var(--panel-soft);color:var(--primary)}
    .collapse>summary{cursor:pointer;font-weight:700;margin:8px 0}
    .bar-row{display:grid;grid-template-columns:120px 1fr auto;gap:8px;align-items:center;margin:6px 0}
    .bar-fill{height:12px;border-radius:999px;background:linear-gradient(90deg,#b91c1c,#ef4444)}
    .timeline{display:grid;gap:8px}.tl-item{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel-soft)}
    .dashboard-sections{display:grid;grid-template-columns:1fr;gap:16px;width:100%;max-width:100%}
    .dashboard-section{margin:16px 0}
    .dashboard-section .card{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px;display:grid;gap:12px;min-width:0}
    .section-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
    .section-header h4,.section-header .page-title{margin:0}
    .section-header h4{font-size:16px}
    .section-subtitle{font-size:12px;opacity:.8;display:block;margin-top:2px}
    .section-header--dashboard{margin-bottom:2px}
    .table-scroll{overflow-x:auto;overflow-y:auto;max-width:100%;max-height:380px;-webkit-overflow-scrolling:touch}
    .table-scroll table{min-width:760px}
    .table-scroll th{position:sticky;top:0;z-index:1}
    .table-scroll th,.table-scroll td{font-size:13px}
    .mv-card{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel)}
    .mv-row{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
    .mv-title{font-size:13px;font-weight:700}
    .mv-sub{font-size:12px;color:var(--muted);word-break:break-word}
    .theme-btn{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:10px}
    .skeleton{height:66px;border-radius:12px;background:linear-gradient(90deg,#e7eefb 25%,#f1f6ff 37%,#e7eefb 63%);background-size:400% 100%;animation:sh 1.4s ease infinite}
    @keyframes sh{0%{background-position:100% 0}100%{background-position:0 0}}
    .toast{position:fixed;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;z-index:130;pointer-events:none}
    .toast-item{display:flex;align-items:center;gap:8px;min-height:44px;max-width:320px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);box-shadow:0 8px 20px rgba(15,23,42,.10);font-size:13px;line-height:1.3;opacity:0;transform:translateX(12px);transition:opacity .2s ease,transform .2s ease;pointer-events:auto}
    .toast-item.show{opacity:1;transform:translateX(0)}
    .toast-icon{width:16px;height:16px;display:grid;place-items:center;flex:0 0 16px;font-size:12px}
    .toast-message{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .toast-close{border:0;background:transparent;color:inherit;opacity:.65;cursor:pointer;line-height:1;padding:0 2px;font-size:15px}
    .toast-close:hover{opacity:1}
    .toast-item.success .toast-icon{color:#059669}
    .toast-item.error .toast-icon{color:#dc2626}
    .toast-item.warning .toast-icon{color:#d97706}
    .toast-item.info .toast-icon{color:#2563eb}
    body.dark .toast-item{background:#0f172a;color:#e5e7eb;border-color:#334155;box-shadow:0 10px 24px rgba(0,0,0,.35)}
    body.sidebar-open .sidebar{transform:translateX(0)}
    body.sidebar-open .sidebar-overlay{opacity:1;pointer-events:auto}
    .bottom-nav{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:8px;background:var(--panel);border-top:1px solid var(--line);z-index:50}
    .nav-btn{font-size:11px;padding:8px 6px}.nav-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
    mark{background:#fde68a;border-radius:3px}

    .detail-profile{display:grid;gap:12px}
    .detail-hero{border:1px solid var(--line);background:linear-gradient(135deg,var(--panel-soft),var(--panel));border-radius:16px;padding:14px;display:grid;gap:10px}
    .detail-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
    .detail-name{font-size:clamp(22px,4vw,30px);font-weight:800;line-height:1.15}
    .detail-sku{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    .source-row{display:flex;gap:6px;flex-wrap:wrap}
    .summary-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
    .summary-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px}
    .summary-card .k{font-size:11px;color:var(--muted)}
    .summary-card .v{font-size:20px;font-weight:800;margin-top:3px}
    .detail-note{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
    .note-box{border:1px dashed var(--line);border-radius:12px;padding:10px;background:var(--panel)}
    .note-title{font-size:11px;color:var(--muted);margin-bottom:4px}
    .note-value{font-size:13px;font-weight:700;line-height:1.35;word-break:break-word}
    .source-card{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
    .source-card summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--panel-soft);cursor:pointer;font-weight:800}
    .source-card summary::-webkit-details-marker{display:none}
    .source-body{padding:10px}
    .table-wrap{border:1px solid var(--line);border-radius:10px;overflow:auto;max-height:310px}
    .table-wrap table{min-width:680px}
    .table-wrap th{position:sticky;top:0;z-index:1}
.table-wrap th,.table-wrap td{font-size:12px;line-height:1.35}
.copy-cell{display:inline-flex;align-items:center;max-width:100%;min-width:0;gap:4px;vertical-align:middle}
.copy-cell-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-mini-btn{
  min-height:30px;
  height:30px;
  padding:0 10px;
  flex:0 0 auto;
  border:1px solid color-mix(in srgb,var(--line) 76%, #fbcfe8);
  border-radius:9px;
  background:color-mix(in srgb,var(--panel) 70%, #ffe4e6);
  color:color-mix(in srgb,var(--text) 80%, #be123c);
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:none;
}
.copy-mini-btn:hover{background:color-mix(in srgb,var(--panel) 44%, #fecdd3);border-color:color-mix(in srgb,var(--line) 40%, #fb7185);color:var(--text)}
.copy-mini-btn:active{transform:scale(.97)}
.copy-mini-btn:focus-visible{outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--primary-2) 30%, transparent)}
.copy-mini-btn.is-copied{background:color-mix(in srgb,#ecfccb 60%, #fff);border-color:#86efac;color:#166534}
    .empty-card{border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--muted);background:var(--panel-soft)}
@media (min-width: 900px){.sidebar{transform:none}.content{margin-left:260px;padding: 0 18px 18px;--header-height:62px}.close-side,.sidebar-overlay{display:none}.header{left:auto;width:auto;margin:0 -18px 12px}.grid.dashboard{grid-template-columns:repeat(4,1fr);gap:10px}.grid.dashboard .metric{padding:12px;border-radius:14px}.grid.dashboard .metric .k{font-size:12px}.grid.dashboard .metric .v{font-size:22px;margin-top:4px}.grid.stats{grid-template-columns:repeat(3,1fr)}.dashboard-sections{gap:20px}.dashboard-section{margin:20px 0}.dashboard-section .card{padding:18px}}
    @media (max-width: 899px){.mobile-only{display:grid}.content{padding-top:calc(var(--header-height) + 12px)}.dashboard-sections{grid-template-columns:1fr}.dashboard-section{margin:12px 0}.dashboard-section .card{padding:12px}.section-header{flex-wrap:wrap}.header{position:fixed;top:0;left:0;right:0;z-index:120;margin:0;border-bottom:1px solid var(--line)}.header-card{padding:0 12px;gap:10px}.header-actions{gap:6px}.header-title{font-size:15px}.title{font-size:16px}.side-link{font-size:13px;padding:9px 10px}}

.brand-logo-placeholder {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;

  /* warna brand */
  background: #ffffff;

  /* biar svg tidak keluar */
  overflow: hidden;

  /* tanpa shadow agar lebih clean */
  box-shadow: none;
}

.brand-logo-placeholder .brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.search-layout{display:grid;gap:10px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--panel-soft)}
.search-toolbar{justify-content:space-between}
.chip-group{display:flex;flex-wrap:wrap;gap:8px}
#sortSearch{min-width:170px}

.movement-layout{display:grid;gap:12px}
.movement-toolbar{display:grid;grid-template-columns:1fr;gap:8px}
.movement-grid{display:grid;grid-template-columns:1fr;gap:10px}
.movement-card{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--panel-soft);display:grid;gap:8px}
.movement-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
@media (min-width:700px){.movement-toolbar{grid-template-columns:1fr auto auto}.movement-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1200px){.movement-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* Sidebar redesign: clean, modern, premium */
.sidebar{
  background: #ffffff;
  border-right: 0;
  color: #6b1b1b;
  padding: 18px 12px 12px;
  height: 100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.sidebar-brand{
  background: #ffffff;
  border: 0;
  border-radius: 14px;
  padding: 8px 10px;
}
.sidebar-brand h2{font-size:14px;letter-spacing:.2px;color:#dc2626}
.sidebar-brand p{font-size:11px;color:rgba(127,29,29,.62)}
.brand-logo-placeholder{
  background: rgba(255,255,255,.96);
  border: 0;
  box-shadow: none;
}
.sidebar-status{
  margin-top: 10px;
  background: rgba(239,68,68,.06);
  border: 0;
  border-radius: 12px;
  font-size: 11px;
  padding: 7px 12px;
  margin-bottom: 10px;
  margin-left: 6px;
}
.sidebar-status .dot{width:7px;height:7px}
.sidebar-main{display:flex;flex-direction:column;min-height:0;flex:1}
.sidebar-menu-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:2px;
  /* border-bottom: .6px solid #2e3340; */
}

#menuWrap,
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px !important;
  min-height:0;
  padding-right:4px;
  padding-bottom: 0;
}
.menu-group{display:grid;gap:4px;padding-bottom:10px;border-bottom:1px solid rgba(127,29,29,.08)}
.menu-group:last-of-type{border-bottom:0}
.menu-category{
  margin:4px 10px 2px;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:700;
  text-transform:uppercase;
  color:rgba(127,29,29,.55);
}
.side-link.nav-item,
.sidebar-item,
.sidebar-parent,
.submenu-item{
  width:100%;
  box-sizing:border-box;
  min-width:0;
  overflow:visible;
}
.side-link.nav-item{
  margin-top:0;min-height:42px;padding:10px 12px;border-radius:12px;border:1px solid transparent;background:transparent;
  color: rgba(127,29,29,.88);
  justify-content:flex-start;gap:10px;
  position:relative;
  transition: background-color .2s ease,border-color .2s ease,color .2s ease;
}
.side-link.nav-item i{width:18px;height:18px;flex-shrink:0;opacity:.9}
.side-link.nav-item span{font-size:14px;font-weight:500;line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-link.nav-item:hover{color:#991b1b;background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.12);box-shadow:none;transform:none !important}
.side-link.nav-item.active{color:#991b1b;background:rgba(239,68,68,.11);border-color:rgba(239,68,68,.2);font-weight:700;box-shadow:none}
.side-link.nav-item.active::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:3px;
  background:#dc2626;
  border-radius:4px;
}
.side-link.nav-item.active i{color:#dc2626;opacity:1}

.sidebar-item:hover,
.sidebar-parent:hover,
.submenu-item:hover{
  transform:none !important;
}

.sidebar-footer{gap:6px;flex-shrink:0;/* padding-top:10px; */background:transparent;backdrop-filter:none;border-top: .6px solid rgba(239,68,68,.2);}
.account-card{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:13px;border:1px solid rgba(239,68,68,.12);background:rgba(239,68,68,.04);margin-top: 20px;margin-bottom: 10px;}
.account-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:#334155}
.account-avatar i{width:16px;height:16px}
.account-meta{display:grid;line-height:1.2;flex:1;min-width:0}
.account-meta strong{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-meta small{font-size:10px;color:rgba(127,29,29,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-status{font-size:9px;color:rgba(127,29,29,.56)}
.account-more.icon-btn{width:26px;height:26px;border-radius:8px;background:transparent;border-color:transparent;color:rgba(127,29,29,.72)}
.account-card{position:relative}
.account-menu{
  position:absolute;right:8px;bottom:44px;z-index:50;
  min-width:130px;padding:6px;border-radius:10px;
  background:#fff;border:1px solid rgba(239,68,68,.16);box-shadow:0 10px 20px rgba(0,0,0,.12);
}
.account-menu-item{
  width:100%;display:flex;align-items:center;gap:8px;
  padding:8px 10px;border:0;border-radius:8px;background:transparent;
  color:#991b1b;font-weight:600;cursor:pointer;
}
.account-menu-item i{width:16px;height:16px}
.account-menu-item:hover{background:rgba(239,68,68,.08)}

body.dark .sidebar{
  background: linear-gradient(180deg, #0f172a 0%, #0b1a34 60%, #081224 100%);
  border-right: 0;
  color: rgba(226,232,240,.95);
}
body.dark .sidebar-brand{background:rgba(15,23,42,.9);/* border:1px solid rgba(148,163,184,.22); */}
body.dark .sidebar-brand h2{color:#f87171}
body.dark .sidebar-brand p{color:rgba(203,213,225,.85)}
body.dark .close-side{color:#f87171}
body.dark .brand-logo-placeholder .brand-logo{filter:none}
body.dark .sidebar-status{background:rgba(239,68,68,.12);color:rgba(248,113,113,.95);border:0}
body.dark .menu-group{border-bottom-color:rgba(148,163,184,.12)}
body.dark .menu-category{color:rgba(148,163,184,.8)}
body.dark .side-link.nav-item{color:rgba(226,232,240,.92)}
body.dark .side-link.nav-item:hover{color:#f8fafc;background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.2)}
body.dark .side-link.nav-item.active{color:#ffe4e6;background:rgba(239,68,68,.2);border-color:rgba(248,113,113,.3);box-shadow:none}
body.dark .side-link.nav-item.active::before{background:#f87171}
body.dark .side-link.nav-item.active i{color:#fda4af}
body.dark .sidebar-footer{background:transparent;backdrop-filter:none}
body.dark .account-card{border:1px solid rgba(148,163,184,.34);background:rgba(15,23,42,.42)}
body.dark .account-meta strong{color:#f87171}
body.dark .account-meta small{color:rgba(226,232,240,.82)}
body.dark .account-status{color:rgba(148,163,184,.82)}
body.dark .account-more.icon-btn{color:rgba(226,232,240,.86)}
body.dark .account-menu{background:#0f172a;border-color:rgba(148,163,184,.34)}
body.dark .account-menu-item{color:#fda4af}
body.dark .account-menu-item:hover{background:rgba(148,163,184,.14)}

@media (max-width: 899px){
  .sidebar{width:min(86vw,300px)}
  .side-link.nav-item{min-height:44px;padding:10px 12px}
  .side-link.nav-item span{font-size:13px}
}


@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(78vw, 320px);
    max-width: 320px;
    min-width: 0;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .sidebar.open,
  .sidebar.is-open,
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 999;
  }

  .main-content,
  .app-main,
  .content {
    margin-left: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  .sidebar-nav a,
  .nav-item,
  .side-link.nav-item {font-size:15px}
}

.sidebar-nav{
  overflow:visible;
  padding:6px 8px;
}

/* Global scrollbar styling with explicit light/dark theme separation */
:root{
  --scroll-track: transparent;
  --scroll-thumb: color-mix(in srgb, var(--primary) 48%, #ffffff 52%);
  --scroll-thumb-hover: color-mix(in srgb, var(--primary-2) 58%, #ffffff 42%);
}

body.light,
.light-mode,
[data-theme="light"]{
  --scroll-track: transparent;
  --scroll-thumb: color-mix(in srgb, var(--primary) 48%, #ffffff 52%);
  --scroll-thumb-hover: color-mix(in srgb, var(--primary-2) 58%, #ffffff 42%);
}

body.dark,
.dark-mode,
[data-theme="dark"]{
  --scroll-track: color-mix(in srgb, #0f172a 82%, transparent);
  --scroll-thumb: color-mix(in srgb, var(--primary) 64%, #111827 36%);
  --scroll-thumb-hover: color-mix(in srgb, var(--primary-2) 72%, #1f2937 28%);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--scroll-thumb), var(--scroll-thumb-hover));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--scroll-thumb-hover), color-mix(in srgb, var(--scroll-thumb-hover) 78%, #ffffff 22%));
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

.action-cell{text-align:center;white-space:nowrap;width:1%}
.detail-mini-btn{height:24px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--text);font-size:11px;line-height:1;cursor:pointer;white-space:nowrap}
.detail-mini-btn:hover{background:color-mix(in srgb,var(--text) 8%,var(--card))}
.detail-mini-btn:focus-visible{outline:1px solid var(--pri);outline-offset:1px}
.metric-delta{font-size:clamp(11px,1.8vw,12px);font-weight:700;line-height:1.2}
.metric-delta--in{color:#16a34a}
.metric-delta--out{color:#dc2626}
.metric-delta--neutral{color:var(--muted)}
body.dark .metric-delta--in{color:#4ade80}
body.dark .metric-delta--out{color:#f87171}