/* hub-rapi.css (2026-10-02) -- perapian rangka SEMUA halaman hub (permintaan Direktur, "tampilan hub gak rapi"):
   1. Sidebar tanpa logo kotak (logo dihapus): baris atas cuma tombol buka/tutup di tengah; tulisan "LEVE Hub" muncul
      saat sidebar dibuka. Dulu tombolnya kepotong di samping logo (kelihatan garis abu).
   2. Bilah atas jadi panel melayang (sudut membulat) yang SEJAJAR dengan kartu-kartu di bawahnya -- dulu bilah
      menempel ke sidebar tapi isinya mulai jauh di kanan, jadi ada ruang kosong janggal.
   3. Isi bilah satu baris: "LEVE Hub | Judul" + keterangan di bawah judul (dulu 3 baris bertumpuk).
   4. Tombol menu (garis 3) di bilah atas cuma di HP -- di PC/tablet sidebar sudah punya tombol sendiri.
   Dimuat PALING AKHIR di semua halaman hub (index, invoices, sales, brand-renewal, log-lag, data, live). */

#sidebarNav .sb-logo{ display:none !important; }
#sidebarNav .sb-brand-row{ justify-content:center !important; padding:2px 0 14px !important; }
#sidebarNav .sb-brand-txt{ display:none !important; }
#sidebarNav .sb-toggle{ margin-left:0 !important; }
#sidebarNav.expanded .sb-brand-row{ justify-content:space-between !important; padding:2px 4px 14px 10px !important; }
#sidebarNav.expanded .sb-brand-txt{ display:block !important; opacity:1 !important; }

header.top .hd-title{ display:flex; align-items:center; gap:14px; min-width:0; }
header.top .hd-merek{ font-size:17px !important; margin:0 !important; padding-right:14px; border-right:1px solid rgba(0,0,0,.12); flex-shrink:0; line-height:1.2; }
header.top .hd-judul{ min-width:0; }
header.top .hd-judul h1{ font-size:16px !important; line-height:1.25; }

@media (max-width:599.98px){
  header.top .hd-title{ flex-direction:column; align-items:flex-start; gap:1px; }
  header.top .hd-merek{ font-size:13.5px !important; border-right:0; padding-right:0; }
}
@media (min-width:600px){
  header.top .hd-menu-btn{ display:none !important; }
  header.top{ top:10px !important; margin:10px 16px 0 !important; border-radius:18px !important;
    padding:12px 20px !important; border:1px solid rgba(255,255,255,.85) !important; }
}
@media (min-width:1024px){
  header.top{
    margin-left:max(var(--leve-tepi, 24px), calc((100% - var(--leve-lebar, 1680px)) / 2 + var(--leve-tepi, 24px))) !important;
    margin-right:max(var(--leve-tepi, 24px), calc((100% - var(--leve-lebar, 1680px)) / 2 + var(--leve-tepi, 24px))) !important;
  }
}

/* (2026-10-02, revisi 2) Beranda: kartu SALING MENGISI tanpa ruang kosong (permintaan Direktur). Kolom kosong di kanan
   dilipat (auto-fit), kartu disusun ala masonry & kartu terbawah tiap kolom dipanjangkan sampai rata bawah -- lihat
   hub-susun.js. Di HP (1 kolom) tidak berubah. */
.sec-grid{ grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)) !important; }
.sec-grid.susun{ grid-auto-rows:1px; row-gap:0 !important; align-items:start; }
.sec-grid.susun > *{ align-self:start; box-sizing:border-box; }

/* Tulisan yang dulu kepotong / keluar kartu */
.funnel{ display:grid !important; grid-template-columns:repeat(auto-fit, minmax(62px, 1fr)); overflow:visible !important; }
.funnel .f-item{ min-width:0 !important; padding:10px 4px !important; }
.funnel .f-item .l{ overflow-wrap:anywhere; }
.info-row .t1, .top1 .t1{ white-space:normal !important; overflow:visible !important; overflow-wrap:break-word; }
.kpi{ min-width:0; container-type:inline-size; }
.kpi .num{ font-size:min(22px, 10.5cqi); white-space:nowrap; }
.chip-row{ flex-wrap:wrap !important; overflow:visible !important; }
@media (max-width:599.98px){
  .hm-table{ min-width:0 !important; border-spacing:2px !important; }
  .hm-table th{ padding:4px 2px !important; font-size:9.5px !important; white-space:normal !important; }
  .hm-cell{ min-width:0 !important; padding:8px 2px !important; font-size:10px !important; }
  .hm-table td.hm-rowhead{ padding:8px 4px 8px 0 !important; font-size:11px !important; }
}

/* (2026-10-02) Navbar bawah PC/tablet (dipasang hub-rangka.js) -- persis nav.bottom-nav pengawas.leveagency.com:
   kaca mengambang di tengah bawah (blur+saturate), tombol bulat emas menonjol di tengah = Dinding Live.
   HP (< 600px) tetap memakai menu bawah .quick-nav yang lama. Mode TV Dinding Live menyembunyikannya. */
nav.hub-bnav{ display:none; }
@media (min-width:600px){
  nav.hub-bnav{
    position:fixed; left:50%; transform:translateX(-50%); bottom:calc(22px + env(safe-area-inset-bottom)); z-index:50;
    display:flex; align-items:flex-end; justify-content:space-around; gap:2px;
    min-width:420px; max-width:min(680px, calc(100vw - 140px)); width:max-content; padding:10px 10px; box-sizing:border-box;
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(26px) saturate(190%); -webkit-backdrop-filter:blur(26px) saturate(190%);
    border:1px solid rgba(255,255,255,.6); border-radius:26px;
    box-shadow:0 16px 40px rgba(21,32,24,.18);
    font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    nav.hub-bnav{ background:rgba(255,255,255,.96); }
  }
  nav.hub-bnav .bn-item{
    display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; color:#6B7A6E;
    font-size:9.5px; font-weight:700; flex:1 1 0; min-width:64px; padding:4px 2px; white-space:nowrap;
  }
  nav.hub-bnav .bn-item .bn-ic{ line-height:1; display:flex; font-size:20px; }
  nav.hub-bnav .bn-item:hover{ color:#152018; }
  nav.hub-bnav .bn-item.active{ color:#24392A; }
  nav.hub-bnav .bn-fab{
    position:relative; width:50px; height:50px; border-radius:50%; background:#E9A13B; color:#24392A;
    display:flex; align-items:center; justify-content:center; border:4px solid #EDF4EA; box-sizing:content-box;
    text-decoration:none; box-shadow:0 8px 18px rgba(233,161,59,.45); margin:-22px 6px 0; flex-shrink:0; font-size:22px;
    transition:transform .15s;
  }
  nav.hub-bnav .bn-fab:active{ transform:scale(.92); }
  nav.hub-bnav .bn-fab.active{ box-shadow:0 8px 18px rgba(233,161,59,.45), 0 0 0 3px rgba(36,57,42,.25); }
  nav.hub-bnav .bn-item:focus-visible, nav.hub-bnav .bn-fab:focus-visible{ outline:2px solid #24392A; outline-offset:2px; border-radius:12px; }
  body{ padding-bottom:110px !important; }
  body.tv nav.hub-bnav{ display:none !important; }

  /* ---- animasi navbar bawah ---- */
  nav.hub-bnav{ animation:bnMasuk .6s cubic-bezier(.2,1.25,.35,1) both; }
  nav.hub-bnav .bn-ind{ position:absolute; left:0; top:8px; bottom:8px; z-index:0; border-radius:16px; opacity:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
    border:1px solid rgba(255,255,255,.9); box-shadow:0 4px 14px rgba(21,32,24,.12), inset 0 1px 0 #fff;
    transition:transform .5s cubic-bezier(.3,1.35,.4,1), width .5s cubic-bezier(.3,1.35,.4,1), opacity .25s; }
  nav.hub-bnav .bn-item, nav.hub-bnav .bn-fab{ position:relative; z-index:1; }
  nav.hub-bnav .bn-item .bn-ic{ transition:transform .25s cubic-bezier(.3,1.6,.5,1); }
  nav.hub-bnav .bn-item:hover .bn-ic{ transform:translateY(-3px) scale(1.08); }
  nav.hub-bnav .bn-item:active .bn-ic, nav.hub-bnav .bn-item.ditekan .bn-ic{ transform:scale(.86); }
  nav.hub-bnav .bn-item.active .bn-ic{ animation:bnPantul .7s .25s cubic-bezier(.3,1.6,.5,1) both; }
  nav.hub-bnav .bn-item{ transition:color .2s; }
  nav.hub-bnav .bn-fab{ transition:transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s; }
  nav.hub-bnav .bn-fab:hover{ transform:translateY(-3px) scale(1.07); box-shadow:0 12px 24px rgba(233,161,59,.55); }
  nav.hub-bnav .bn-fab:active, nav.hub-bnav .bn-fab.ditekan{ transform:scale(.9); }
  nav.hub-bnav .bn-fab::before, nav.hub-bnav .bn-fab::after{ content:""; position:absolute; inset:-4px; border-radius:50%;
    border:2px solid rgba(233,161,59,.55); animation:bnSinyal 2.6s ease-out infinite; pointer-events:none; }
  nav.hub-bnav .bn-fab::after{ animation-delay:1.3s; }
  @keyframes bnMasuk{ from{ opacity:0; transform:translate(-50%, 40px) scale(.94); } to{ opacity:1; transform:translate(-50%, 0) scale(1); } }
  @keyframes bnPantul{ 0%{ transform:translateY(0); } 35%{ transform:translateY(-6px) scale(1.12); } 65%{ transform:translateY(1px) scale(.97); } 100%{ transform:none; } }
  @keyframes bnSinyal{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(1.55); opacity:0; } }
  @media (prefers-reduced-motion: reduce){
    nav.hub-bnav, nav.hub-bnav .bn-item.active .bn-ic, nav.hub-bnav .bn-fab::before, nav.hub-bnav .bn-fab::after{ animation:none !important; }
    nav.hub-bnav .bn-ind{ transition:none !important; }
  }
}

/* (2026-10-02) Sidebar kiri auto-sembunyi di PC (hub-rangka.js menambah html.sb-auto hanya di perangkat ber-mouse
   >= 600px): sidebar di luar layar, muncul meluncur saat mouse menyentuh tepi kiri; isi halaman memakai lebar penuh.
   Garis kaca tipis di tepi kiri = petunjuk bahwa menu ada di sana. */
#sbTepi{ display:none; }
html.sb-auto .content-shell{ margin-left:0 !important; }
html.sb-auto body.hub-polos{ padding-left:0 !important; }
html.sb-auto #sidebarNav{ transform:translateX(calc(-100% - 24px)); box-shadow:none;
  transition:transform .38s cubic-bezier(.3,1.15,.4,1), width .2s ease, box-shadow .3s; }
html.sb-auto #sidebarNav.muncul{ transform:none; box-shadow:0 18px 50px rgba(21,32,24,.22), inset 0 1px 0 rgba(255,255,255,.95); }
html.sb-auto #sidebarOverlay{ display:none !important; }
html.sb-auto #sbTepi{ display:block; position:fixed; left:0; top:0; bottom:0; width:14px; z-index:58; }
html.sb-auto #sbTepi::after{ content:""; position:absolute; left:4px; top:50%; width:5px; height:56px; margin-top:-28px; border-radius:99px;
  background:rgba(255,255,255,.75); border:1px solid rgba(47,82,51,.18); box-shadow:0 2px 8px rgba(21,32,24,.12);
  transition:opacity .2s, height .2s; }
html.sb-auto #sbTepi:hover::after{ height:80px; margin-top:-40px; }
html.sb-auto:has(#sidebarNav.muncul) #sbTepi::after{ opacity:0; }
html.sb-auto body.tv #sbTepi{ display:none; }
/* Petunjuk saat dibuka: sidebar mengintip 34px lalu kembali, garis tepi berdenyut, label "Menu" */
html.sb-auto #sidebarNav.intip{ transform:translateX(calc(-100% + 34px)); box-shadow:0 10px 30px rgba(21,32,24,.18);
  transition:transform .55s cubic-bezier(.3,1.4,.4,1); }
html.sb-auto #sbTepi.denyut::after{ animation:sbDenyut 1s ease-in-out 3; }
@keyframes sbDenyut{ 0%,100%{ height:56px; margin-top:-28px; background:rgba(255,255,255,.75); box-shadow:0 2px 8px rgba(21,32,24,.12); }
  50%{ height:92px; margin-top:-46px; background:#E9A13B; box-shadow:0 0 0 5px rgba(233,161,59,.25), 0 4px 14px rgba(233,161,59,.45); } }
#sbLabel{ position:fixed; left:46px; top:50%; z-index:61; transform:translate(-12px,-50%); opacity:0; pointer-events:none;
  padding:8px 14px; border-radius:99px; font:700 12.5px/1 'Poppins',-apple-system,"Segoe UI",Roboto,sans-serif; color:#24392A;
  background:rgba(255,255,255,.7); backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.85); box-shadow:0 8px 24px rgba(21,32,24,.16);
  transition:opacity .35s, transform .45s cubic-bezier(.3,1.4,.4,1); }
#sbLabel.tampil{ opacity:1; transform:translate(0,-50%); }
#sbLabel .pnh{ display:inline-block; color:#E9A13B; animation:sbPanah .8s ease-in-out infinite alternate; }
@keyframes sbPanah{ from{ transform:translateX(0); } to{ transform:translateX(-4px); } }
@media (prefers-reduced-motion: reduce){ html.sb-auto #sbTepi.denyut::after, #sbLabel .pnh{ animation:none; } }
@media (prefers-reduced-motion: reduce){ html.sb-auto #sidebarNav{ transition:none; } }

/* (2026-10-13) Tombol switch mode hub (Semua · Sales · Operasional) di bilah atas -- dipasang hub-rangka.js. Pil kaca
   meluncur ke pilihan aktif. Di HP jadi baris sendiri selebar bilah. */
header.top.ada-mode{ flex-wrap:wrap; }
.hub-mode{ position:relative; display:inline-flex; align-items:center; gap:2px; padding:4px; border-radius:14px; flex-shrink:0;
  background:rgba(36,57,42,.07); border:1px solid rgba(36,57,42,.08); box-shadow:inset 0 1px 2px rgba(21,32,24,.06);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.hub-mode .hm-pil{ position:absolute; left:0; top:4px; bottom:4px; border-radius:10px; pointer-events:none;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.85)); border:1px solid rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(21,32,24,.14), inset 0 1px 0 #fff; transition:transform .4s cubic-bezier(.3,1.3,.4,1), width .4s cubic-bezier(.3,1.3,.4,1); }
.hub-mode button{ position:relative; z-index:1; border:0; background:none; cursor:pointer; padding:7px 13px; border-radius:10px;
  font-family:inherit; font-size:12.5px; font-weight:700; line-height:1; color:#6B7A6E; white-space:nowrap; transition:color .2s; }
.hub-mode button:hover{ color:#152018; }
.hub-mode button[aria-checked="true"]{ color:#24392A; }
.hub-mode button:focus-visible{ outline:2px solid #24392A; outline-offset:1px; }
@media (min-width:600px){ header.top.ada-mode .hub-mode{ margin-left:auto; } header.top.ada-mode .hd-search{ margin-left:12px; } }
@media (max-width:599.98px){
  header.top.ada-mode .hub-mode{ order:99; flex:1 1 100%; display:flex; }
  header.top.ada-mode .hub-mode button{ flex:1; padding:8px 6px; }
  header.top.ada-mode > .hd-left{ flex:1 1 0; min-width:0; }
}
@media (prefers-reduced-motion: reduce){ .hub-mode .hm-pil{ transition:none; } }
body.tv .hub-mode{ display:none; }