/* hub-rangka.css (2026-10-02) -- rangka halaman utama hub (tema putih, sidebar kaca, bilah atas kaca, menu bawah HP)
   untuk halaman hub SEDERHANA yang tidak memuat CSS besar index.html: Follow-up Perpanjangan, Log Lag, Data.
   Nilai-nilai disalin dari index.html + hub-tema.css. Index/Sales/Invoice TIDAK memakai file ini (CSS-nya sudah ada di
   halaman masing-masing). Variabel warna dipasang langsung di elemen rangka supaya tidak bentrok dengan gaya halaman.
   Markup sidebar & menu bawah dari hub-rangka.js; bilah atas ditulis di halaman: <header class="top hub-bar">. */

body.hub-polos{
  background:
    radial-gradient(38vw 34vw at 92% -6%, rgba(201,168,92,.20), transparent 62%),
    radial-gradient(42vw 38vw at -6% 12%, rgba(84,140,100,.16), transparent 62%),
    radial-gradient(36vw 32vw at 70% 60%, rgba(120,170,140,.10), transparent 62%),
    radial-gradient(40vw 36vw at 8% 96%, rgba(201,168,92,.12), transparent 60%),
    #F7F8F7 !important;
  background-attachment:fixed !important;
  padding-bottom:92px;
}
#sidebarNav, nav.quick-nav, header.hub-bar, #sidebarOverlay{
  --label:#1D1D1F; --label-2:#6E6E73; --label-3:#8E8E93; --separator:rgba(0,0,0,.09);
  --tertiary-bg:#F4F5F3; --accent:#2F5233; --accent-tint:rgba(47,82,51,.11); --radius-lg:18px; --radius-pill:999px;
  --sidebar-w:250px; --sidebar-w-collapsed:74px;
  --kaca-bg-kuat:rgba(255,255,255,.72); --kaca-blur:blur(24px) saturate(180%); --kaca-tepi:rgba(255,255,255,.85);
  --kaca-bayang:0 8px 30px rgba(31,61,40,.10), inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.35);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
}
.ic{ display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; flex-shrink:0; }
.ic svg{ width:100%; height:100%; }

/* ---- bilah atas (sama dengan header.top beranda) ---- */
header.hub-bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; margin:0;
  background:var(--kaca-bg-kuat); backdrop-filter:var(--kaca-blur); -webkit-backdrop-filter:var(--kaca-blur);
  border-bottom:1px solid var(--kaca-tepi); box-shadow:var(--kaca-bayang);
}
header.hub-bar .hd-left{ display:flex; align-items:center; gap:10px; min-width:0; }
header.hub-bar .hd-menu-btn{
  width:38px; height:38px; border-radius:12px; border:1px solid var(--separator); background:#FFFFFF;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; color:var(--label); font-size:16px;
}
header.hub-bar .hd-title{ min-width:0; }
header.hub-bar h1{ font-size:15.5px; font-weight:800; margin:0; letter-spacing:-.01em; color:var(--label); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
header.hub-bar .subtitle{ font-size:11px; color:var(--label-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
header.hub-bar .hub-ref{ position:static !important; margin-left:auto; }

/* ---- sidebar (sama dengan #sidebarNav beranda) ---- */
#sidebarNav{
  display:none; flex-direction:column; gap:2px;
  position:fixed; left:10px; top:10px; bottom:10px; width:var(--sidebar-w-collapsed); z-index:60;
  background:var(--kaca-bg-kuat); backdrop-filter:var(--kaca-blur); -webkit-backdrop-filter:var(--kaca-blur);
  border:1px solid var(--kaca-tepi); border-radius:var(--radius-lg); box-shadow:var(--kaca-bayang);
  padding:16px 10px; box-sizing:border-box; overflow-y:auto; transition:width .18s ease;
}
#sidebarNav.expanded{ width:var(--sidebar-w); }
#sidebarNav .sb-brand-row{ display:flex; align-items:center; gap:10px; padding:2px 4px 16px; }
#sidebarNav .sb-logo{ width:36px; height:36px; border-radius:11px; flex-shrink:0; }
#sidebarNav .sb-brand-txt{ white-space:nowrap; overflow:hidden; opacity:0; transition:opacity .15s; }
#sidebarNav.expanded .sb-brand-txt{ opacity:1; }
#sidebarNav .sb-toggle{
  margin-left:auto; width:28px; height:28px; border-radius:9px; border:1px solid var(--separator); background:var(--tertiary-bg);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--label); font-size:13px; flex-shrink:0; padding:0;
}
#sidebarNav.expanded .sb-toggle{ transform:rotate(180deg); }
#sidebarNav .sb-group-lbl{ font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--label-3); font-weight:800; padding:12px 10px 5px; white-space:nowrap; overflow:hidden; opacity:0; height:0; transition:opacity .12s; }
#sidebarNav.expanded .sb-group-lbl{ opacity:1; height:auto; }
#sidebarNav .sb-item{
  position:relative; display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--label-2);
  padding:10px 11px; border-radius:10px; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden;
  transition:background .12s, color .12s; cursor:pointer; border:1px solid transparent;
}
#sidebarNav .sb-item:hover{ background:rgba(0,0,0,.045); color:var(--label); }
#sidebarNav .sb-item.active{ background:var(--accent-tint); color:var(--accent); border-color:rgba(47,82,51,.16); }
#sidebarNav .sb-item .sb-ic{ width:20px; height:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
#sidebarNav .sb-item .sb-lbl{ opacity:0; transition:opacity .1s; flex:1; min-width:0; }
#sidebarNav.expanded .sb-item .sb-lbl{ opacity:1; }
#sidebarNav .sb-badge{ display:none; }
#sidebarNav .sb-chevron{ font-size:12px; color:var(--label-3); opacity:0; transition:opacity .1s, transform .15s; flex-shrink:0; }
#sidebarNav.expanded .sb-chevron{ opacity:1; }
#sidebarNav .sb-item.open .sb-chevron{ transform:rotate(90deg); }
#sidebarNav .sb-submenu{ display:none; flex-direction:column; gap:1px; padding-left:14px; margin:1px 0 4px; }
#sidebarNav.expanded .sb-item.open + .sb-submenu{ display:flex; }
#sidebarNav .sb-submenu a{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--label-2); font-size:12.5px; font-weight:600;
  padding:8px 10px 8px 20px; border-radius:9px; position:relative; white-space:nowrap;
}
#sidebarNav .sb-submenu a::before{ content:""; position:absolute; left:6px; top:50%; width:5px; height:5px; border-radius:50%; background:var(--label-3); transform:translateY(-50%); }
#sidebarNav .sb-submenu a:hover{ background:rgba(0,0,0,.045); color:var(--label); }
#sidebarNav .sb-foot{ margin-top:auto; padding:12px 8px 0; font-size:10px; color:var(--label-3); border-top:1px solid var(--separator); white-space:nowrap; overflow:hidden; opacity:0; }
#sidebarNav.expanded .sb-foot{ opacity:1; }
#sidebarOverlay{ display:none; position:fixed; inset:0; background:rgba(15,18,20,.25); z-index:55; }
#sidebarOverlay.show{ display:block; }

/* ---- menu bawah HP (sama dengan nav.quick-nav beranda) ---- */
nav.quick-nav{
  position:fixed; left:14px; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:50;
  display:flex; align-items:center; justify-content:space-around; gap:4px; padding:8px; border-radius:var(--radius-pill);
  background:var(--kaca-bg-kuat); backdrop-filter:var(--kaca-blur); -webkit-backdrop-filter:var(--kaca-blur);
  border:1px solid var(--kaca-tepi); box-shadow:var(--kaca-bayang);
}
.qn-item{
  display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--label-2);
  font-size:12px; font-weight:700; padding:9px 10px; border-radius:var(--radius-pill); flex-shrink:0; border:1px solid transparent;
}
.qn-item .ic{ font-size:16px; }
.qn-item .qn-lbl{ max-width:0; overflow:hidden; white-space:nowrap; opacity:0; }
.qn-item.active{ background:var(--accent-tint); color:var(--accent); border-color:rgba(47,82,51,.16); }
.qn-item.active .qn-lbl{ max-width:120px; opacity:1; margin-left:1px; }

/* ---- tata letak (sama dengan beranda): >= 600px sidebar kiri, isi bergeser; < 600px menu bawah ---- */
@media (min-width:600px){
  #sidebarNav{ display:flex; }
  nav.quick-nav{ display:none; }
  body.hub-polos{ padding-left:calc(74px + 20px); padding-bottom:0; }
}
@media (max-width:599.98px){
  #sidebarNav.expanded{ display:flex; width:min(82vw,300px); }
}