/* SiDARO — app.css v4 */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap');

/* ── THEMES ─────────────────────────────────────────────────── */
:root {
  --bg:#0d0d12; --bg2:#13131a; --bg3:#1a1a24; --bg4:#22222f;
  --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.13);
  --text:#e2e0da; --muted:#6b6966;
  --accent:#e8a020; --accent2:#c8501a; --teal:#1ab8a0;
  --purple:#8b5cf6; --red:#e84040; --green:#22c55e;
  --blue:#3b82f6; --amber:#f59e0b;
  --font-d:'Bebas Neue',sans-serif;
  --font-b:'DM Sans',sans-serif;
  --font-m:'DM Mono',monospace;
  --r:6px; --r2:10px;
  --nav-h:56px;
  --sw:240px; /* sidebar width */
}
[data-theme="navy"]   { --bg:#0a0f1e;--bg2:#0f1629;--bg3:#151e38;--bg4:#1c2748;--border:rgba(100,149,255,.1);--border2:rgba(100,149,255,.2);--text:#d8e4ff;--muted:#5a7aa8; }
[data-theme="forest"] { --bg:#080f0a;--bg2:#0e1812;--bg3:#152019;--bg4:#1d2d22;--border:rgba(80,180,100,.1);--border2:rgba(80,180,100,.2);--text:#d0e8d4;--muted:#4a7858; }
[data-theme="slate"]  { --bg:#0c0c0e;--bg2:#141416;--bg3:#1c1c20;--bg4:#252529;--border:rgba(180,180,200,.08);--border2:rgba(180,180,200,.15);--text:#e0e0e6;--muted:#70707a; }
[data-theme="coffee"] { --bg:#100d09;--bg2:#1a1510;--bg3:#241d16;--bg4:#2e261c;--border:rgba(200,160,100,.08);--border2:rgba(200,160,100,.15);--text:#e8ddd0;--muted:#7a6a56; }
[data-theme="light"]  { --bg:#f0f2f5;--bg2:#fff;--bg3:#f0f1f4;--bg4:#e4e5ea;--border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.15);--text:#1a1a2e;--muted:#6b7280;--accent:#d97706; }

/* Role accent colors */
.theme-pusat   { --rc:var(--purple);--rca:139,92,246;  --rb:rgba(139,92,246,.1); }
.theme-cabang  { --rc:var(--teal);  --rca:26,184,160;  --rb:rgba(26,184,160,.1); }
.theme-outlet  { --rc:var(--accent);--rca:232,160,32;  --rb:rgba(232,160,32,.1); }
.theme-sales   { --rc:var(--accent2);--rca:200,80,26;  --rb:rgba(200,80,26,.1);  }
.theme-pengawas{ --rc:var(--blue);  --rca:59,130,246;  --rb:rgba(59,130,246,.1); }

/* Alias untuk kompatibilitas */
.theme-pusat,.theme-cabang,.theme-outlet,.theme-sales,.theme-pengawas {
  --role-color:var(--rc); --role-bg:var(--rb);
}

/* ── RESET & BASE ────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:15px;line-height:1.6;min-height:100vh}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}

/* ── LAYOUT SHELL ────────────────────────────────────────────── */
/* Sidebar selalu 240px, posisi fixed */
#app-sidebar {
  position:fixed; top:0; left:0; bottom:0; width:var(--sw);
  background:var(--bg2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow-y:auto; z-index:400;
  transition:transform .3s ease; -webkit-overflow-scrolling:touch;
  will-change:transform;
}
/* Main content mengikuti sidebar */
.main {
  margin-left:var(--sw); padding-top:var(--nav-h);
  transition:margin-left .3s ease;
}
/* Topnav mengikuti sidebar */
.topnav {
  position:fixed; top:0; left:var(--sw); right:0; height:var(--nav-h);
  background:rgba(13,13,18,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); z-index:300;
  display:flex; align-items:center; padding:0 20px; gap:14px;
  transition:left .3s ease;
}

/* ── SIDEBAR COLLAPSED STATE ─────────────────────────────────── */
/* Kelas ini ditambah ke body oleh JS */
body.sidebar-collapsed #app-sidebar { transform:translateX(calc(-1 * var(--sw))); }
body.sidebar-collapsed .main        { margin-left:0; }
body.sidebar-collapsed .topnav      { left:0; }

/* ── SIDEBAR OVERLAY (mobile) ────────────────────────────────── */
#sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.65); z-index:350; cursor:pointer;
}
#sidebar-overlay.on { display:block; }

/* ── HAMBURGER ───────────────────────────────────────────────── */
#menu-toggle {
  background:none; border:1px solid var(--border2); color:var(--text);
  padding:7px 12px; border-radius:var(--r); cursor:pointer;
  font-size:1.1rem; line-height:1; flex-shrink:0;
  -webkit-tap-highlight-color:transparent; transition:border-color .15s;
}
#menu-toggle:hover { border-color:var(--role-color,var(--accent)); }

/* ── SIDEBAR BRAND ───────────────────────────────────────────── */
.sb-brand {
  padding:18px 20px 14px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.sb-name { font-family:var(--font-d); font-size:1.5rem; letter-spacing:3px; color:var(--accent); }
.sb-role { font-family:var(--font-m); font-size:.58rem; color:var(--muted); letter-spacing:2px; }
#sidebar-close {
  background:none; border:1px solid var(--border); color:var(--muted);
  padding:5px 9px; border-radius:var(--r); cursor:pointer; font-size:.9rem;
  -webkit-tap-highlight-color:transparent;
}

/* ── SIDEBAR NAV ─────────────────────────────────────────────── */
.sb-section { padding:14px 16px 5px; font-family:var(--font-m); font-size:.58rem; color:var(--muted); letter-spacing:3px; text-transform:uppercase; }
.sb-nav { list-style:none; padding:0 8px; }
.sb-nav a {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:var(--r); color:var(--muted); text-decoration:none;
  font-size:.85rem; transition:background .15s,color .15s; margin-bottom:2px;
  min-height:44px; -webkit-tap-highlight-color:transparent;
}
.sb-nav a:hover { background:var(--bg3); color:var(--text); }
.sb-nav a.active { background:var(--role-bg,rgba(232,160,32,.1)); color:var(--role-color,var(--accent)); font-weight:500; }
.nav-icon { width:20px; text-align:center; font-size:1rem; flex-shrink:0; }

/* ── THEME SWITCHER (di sidebar) ─────────────────────────────── */
.theme-switcher { padding:8px 12px; }
.theme-switcher-label { display:block; font-family:var(--font-m); font-size:.58rem; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; padding:0 4px; }
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.t-opt {
  background:none; border:2px solid var(--border); border-radius:var(--r);
  padding:6px 3px; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:3px; width:100%; transition:border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.t-opt:hover { border-color:var(--role-color,var(--accent)); }
.t-opt.t-active { border-color:var(--role-color,var(--accent)) !important; }
.t-swatch { width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.2); flex-shrink:0; }
.t-label { font-size:.58rem; font-family:var(--font-m); color:var(--muted); white-space:nowrap; }
.t-opt.t-active .t-label { color:var(--role-color,var(--accent)); }

/* ── SIDEBAR BOTTOM ──────────────────────────────────────────── */
.sb-bottom { margin-top:auto; padding:12px; border-top:1px solid var(--border); flex-shrink:0; }
.sb-user { font-size:.72rem; color:var(--muted); margin-bottom:8px; font-family:var(--font-m); }
.logout-btn {
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:10px; background:none; border:1px solid var(--border);
  color:var(--muted); border-radius:var(--r); font-size:.82rem; cursor:pointer;
  text-decoration:none; transition:.2s; min-height:44px; font-family:var(--font-b);
}
.logout-btn:hover { border-color:var(--red); color:var(--red); }

/* ── TOPNAV ELEMENTS ─────────────────────────────────────────── */
.topnav-title { font-family:var(--font-d); font-size:1rem; letter-spacing:2px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.topnav-search { flex:1; max-width:280px; }
.topnav-right { margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.notif-btn { position:relative; background:none; border:1px solid var(--border); color:var(--muted); padding:6px 10px; border-radius:var(--r); cursor:pointer; font-size:.9rem; }
.notif-btn:hover { color:var(--text); }
.notif-badge { position:absolute; top:-5px; right:-5px; background:var(--red); color:#fff; font-size:.55rem; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.user-chip { background:var(--bg3); border:1px solid var(--border); padding:5px 12px; border-radius:var(--r); font-size:.8rem; color:var(--muted); white-space:nowrap; }
.user-chip strong { color:var(--text); }

/* ── PAGE CONTENT ────────────────────────────────────────────── */
.page-inner { padding:24px 28px; max-width:1400px; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:14px; flex-wrap:wrap; }
.page-header h1 { font-family:var(--font-d); font-size:1.9rem; letter-spacing:2px; color:var(--text); }
.page-header .sub { font-size:.8rem; color:var(--muted); margin-top:2px; }

/* ── STAT CARDS ──────────────────────────────────────────────── */
.stat-grid { display:grid; gap:12px; margin-bottom:24px; }
.stat-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.stat-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.stat-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.stat-card { background:var(--bg2); border:1px solid var(--border); padding:18px; border-radius:var(--r2); }
.sc-val { font-family:var(--font-d); font-size:2rem; letter-spacing:2px; line-height:1; margin-bottom:4px; }
.sc-lbl { font-family:var(--font-m); font-size:.65rem; color:var(--muted); letter-spacing:1px; }
.sc-sub { font-size:.75rem; color:var(--muted); margin-top:6px; }

/* ── HELPERS ─────────────────────────────────────────────────── */
.text-accent{color:var(--accent)}.text-teal{color:var(--teal)}.text-green{color:var(--green)}
.text-red{color:var(--red)}.text-muted{color:var(--muted)}.text-purple{color:var(--purple)}
.text-amber{color:var(--amber)}.fw-bold{font-weight:600}.mono{font-family:var(--font-m)}
.text-right{text-align:right}.text-center{text-align:center}
.w-full{width:100%}.mt-3{margin-top:12px}.mb-4{margin-bottom:16px}

/* ── CARD ────────────────────────────────────────────────────── */
.card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); overflow:hidden; margin-bottom:16px; }
.card-head { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-head h3 { font-family:var(--font-d); font-size:1.05rem; letter-spacing:2px; color:var(--text); }
.card-body { padding:18px; }

/* ── GRID ────────────────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.form-row { display:grid; gap:12px; }
.form-row.cols-2 { grid-template-columns:1fr 1fr; }
.form-row.cols-3 { grid-template-columns:1fr 1fr 1fr; }

/* ── TABLE ───────────────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tbl { width:100%; border-collapse:collapse; font-size:.84rem; }
table.tbl th { padding:9px 14px; text-align:left; font-family:var(--font-m); font-size:.62rem; color:var(--muted); letter-spacing:2px; border-bottom:1px solid var(--border2); font-weight:400; white-space:nowrap; }
table.tbl td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.tbl tr:last-child td { border-bottom:none; }
table.tbl tr:hover td { background:rgba(255,255,255,.02); }

/* ── BADGE ───────────────────────────────────────────────────── */
.badge { display:inline-block; font-family:var(--font-m); font-size:.62rem; padding:3px 8px; border-radius:3px; letter-spacing:.5px; white-space:nowrap; }
.badge-green  { background:rgba(34,197,94,.12);  color:var(--green);  }
.badge-amber  { background:rgba(232,160,32,.12); color:var(--accent); }
.badge-red    { background:rgba(232,64,64,.12);  color:var(--red);    }
.badge-blue   { background:rgba(59,130,246,.12); color:var(--blue);   }
.badge-purple { background:rgba(139,92,246,.12); color:var(--purple); }
.badge-teal   { background:rgba(26,184,160,.12); color:var(--teal);   }
.badge-muted  { background:rgba(255,255,255,.06);color:var(--muted);  }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 16px; border-radius:var(--r); font-family:var(--font-b); font-size:.84rem; font-weight:500; cursor:pointer; text-decoration:none; border:none; transition:.15s; white-space:nowrap; min-height:40px; -webkit-tap-highlight-color:transparent; }
.btn-primary { background:var(--role-color,var(--accent)); color:#000; }
.btn-primary:hover { filter:brightness(1.12); }
.btn-outline { background:none; border:1px solid var(--border2); color:var(--text); }
.btn-outline:hover { border-color:var(--role-color,var(--accent)); color:var(--role-color,var(--accent)); }
.btn-danger { background:rgba(232,64,64,.1); border:1px solid rgba(232,64,64,.2); color:var(--red); }
.btn-danger:hover { background:rgba(232,64,64,.2); }
.btn-sm { padding:5px 12px; font-size:.78rem; min-height:34px; }
.btn-xs { padding:3px 9px; font-size:.72rem; min-height:28px; }

/* ── FORMS ───────────────────────────────────────────────────── */
.form-group { margin-bottom:14px; }
.form-label { display:block; font-family:var(--font-m); font-size:.65rem; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px; }
.form-control { width:100%; background:var(--bg3); border:1px solid var(--border2); color:var(--text); padding:9px 12px; border-radius:var(--r); font-size:.88rem; font-family:var(--font-b); outline:none; transition:.15s; -webkit-appearance:none; }
.form-control:focus { border-color:var(--role-color,var(--accent)); }
.form-control::placeholder { color:var(--muted); }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:80px; }

/* ── ALERTS ──────────────────────────────────────────────────── */
.alert { padding:11px 16px; border-radius:var(--r); font-size:.85rem; margin-bottom:12px; border:1px solid; }
.alert-error,.alert-danger { background:rgba(232,64,64,.08); border-color:rgba(232,64,64,.25); color:#f87171; }
.alert-success { background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.25); color:var(--green); }
.alert-info    { background:rgba(59,130,246,.08); border-color:rgba(59,130,246,.2); color:#60a5fa; }
.alert-warning { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.2); color:var(--amber); }

/* ── GPS ─────────────────────────────────────────────────────── */
.gps-status { padding:10px 14px; border-radius:var(--r); font-size:.83rem; border:1px solid; }
.gps-wait { background:rgba(107,105,102,.08); border-color:var(--border2); color:var(--muted); }
.gps-ok   { background:rgba(34,197,94,.08);  border-color:rgba(34,197,94,.25); color:var(--green); }
.gps-err  { background:rgba(232,64,64,.08);  border-color:rgba(232,64,64,.25); color:var(--red); }

/* ── KASIR ───────────────────────────────────────────────────── */
.kasir-grid { display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.product-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); padding:14px; cursor:pointer; transition:border-color .15s,transform .1s; }
.product-card:hover { border-color:var(--role-color,var(--accent)); transform:translateY(-2px); }
.pc-merek { font-family:var(--font-m); font-size:.62rem; color:var(--muted); letter-spacing:1px; margin-bottom:4px; }
.pc-name  { font-size:.88rem; font-weight:500; color:var(--text); line-height:1.3; }
.pc-price { font-family:var(--font-d); font-size:1.1rem; color:var(--accent); }
.pc-stok  { font-size:.72rem; color:var(--muted); }
.cart-fixed { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r2); overflow:hidden; position:sticky; top:calc(var(--nav-h) + 16px); }
.cart-item  { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); }
.qty-btn { background:var(--bg3); border:1px solid var(--border2); color:var(--text); width:28px; height:28px; border-radius:4px; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cart-total { padding:10px 16px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:900px) {
  /* Di mobile: sidebar selalu tersembunyi secara default */
  #app-sidebar { transform:translateX(calc(-1 * var(--sw))); }
  #app-sidebar.sidebar-open { transform:translateX(0) !important; box-shadow:6px 0 40px rgba(0,0,0,.6); }
  /* sb-off tidak berlaku di mobile */
  body.sidebar-collapsed #app-sidebar { transform:translateX(calc(-1 * var(--sw))); }
  body.sidebar-collapsed .main        { margin-left:0; }
  body.sidebar-collapsed .topnav      { left:0; }
  .topnav { left:0 !important; }
  .main   { margin-left:0 !important; }
  .topnav-search { display:none; }
  .user-chip { display:none; }
  .page-inner { padding:14px 16px; }
  .stat-grid.cols-4 { grid-template-columns:repeat(2,1fr); }
  .stat-grid.cols-3 { grid-template-columns:repeat(2,1fr); }
  .grid-2,.grid-3   { grid-template-columns:1fr; }
  .form-row.cols-3  { grid-template-columns:1fr 1fr; }
  .kasir-grid       { grid-template-columns:1fr; }
  .cart-fixed       { position:static; }
}
@media (max-width:480px) {
  .stat-grid.cols-4,.stat-grid.cols-3,.stat-grid.cols-2 { grid-template-columns:1fr 1fr; }
  .form-row.cols-2,.form-row.cols-3 { grid-template-columns:1fr; }
  body { font-size:14px; }
}

/* ── PRINT ───────────────────────────────────────────────────── */
@media print {
  #app-sidebar,.topnav,#menu-toggle,.no-print { display:none !important; }
  .main { margin-left:0; padding-top:0; }
  .page-inner { padding:0; }
}