/* hub-tema.css (2026-10-02) -- permintaan Direktur: tampilan hub PUTIH & rapi, dengan beberapa "gelembung" kaca ala iPhone
   (blur + tembus pandang + tepi tipis berkilau) -- bukan semuanya kaca. Dipasang SETELAH <style> utama index.html, jadi
   aturan di sini menimpa tema lama (wallpaper hijau tua) tanpa mengubah struktur/JS kartu.
   Kaca dipakai di: header atas, menu samping, kartu ringkasan paling atas, angka KPI, chip/tab, baris filter periode.
   Kartu biasa = putih solid, sudut bulat, bayangan halus. Supaya kaca tetap "terlihat kaca" di atas latar putih, latar
   diberi beberapa bulatan warna lembut (hijau & emas LEVE, sangat pucat) di belakang. */
:root{
  --sys-bg:#F7F8F7; --card-bg:#FFFFFF; --bg:#F7F8F7;
  --kaca-bg:rgba(255,255,255,.58); --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);
  --kartu-bayang:0 1px 2px rgba(16,24,20,.04), 0 6px 22px rgba(16,24,20,.06);
  --kartu-tepi:rgba(16,24,20,.07);
}
body{
  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;
}

/* ---- Lapisan kaca (gelembung) ---- */
header.top, #sidebarNav, nav.quick-nav{
  background:var(--kaca-bg-kuat) !important;
  backdrop-filter:var(--kaca-blur) !important; -webkit-backdrop-filter:var(--kaca-blur) !important;
  border-color:var(--kaca-tepi) !important;
  box-shadow:var(--kaca-bayang) !important;
}
.hero-card{
  background:linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.48)) !important;
  backdrop-filter:var(--kaca-blur) !important; -webkit-backdrop-filter:var(--kaca-blur) !important;
  border:1px solid var(--kaca-tepi) !important; box-shadow:var(--kaca-bayang) !important; border-radius:24px !important;
}
.kpi, .big-stat{
  background:linear-gradient(160deg, rgba(255,255,255,.80), rgba(244,248,245,.55)) !important;
  backdrop-filter:var(--kaca-blur); -webkit-backdrop-filter:var(--kaca-blur);
  border:1px solid var(--kaca-tepi) !important; border-radius:18px !important;
  box-shadow:0 4px 16px rgba(31,61,40,.07), inset 0 1px 0 rgba(255,255,255,.95) !important;
  padding:12px 14px !important;
}
.big-stat{ padding:16px 14px !important; margin-top:6px; }
.chip, .pf-row, .hd-search{
  background:var(--kaca-bg) !important;
  backdrop-filter:blur(16px) saturate(170%); -webkit-backdrop-filter:blur(16px) saturate(170%);
  border:1px solid var(--kaca-tepi) !important;
  box-shadow:0 2px 10px rgba(31,61,40,.06), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.chip.active{ background:rgba(47,82,51,.92) !important; color:#fff !important; border-color:rgba(47,82,51,.9) !important; }
.chip.active .n{ background:rgba(255,255,255,.22); color:#fff; }

/* ---- Kartu putih ---- */
.card{
  background:var(--card-bg) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border:1px solid var(--kartu-tepi) !important;
  border-radius:22px !important;
  box-shadow:var(--kartu-bayang) !important;
  padding:18px 18px 16px !important;
  margin:0 !important;
}
.card::before, .card::after{ display:none !important; }
.card .section-head{ margin-bottom:10px; }
.card .section-head h2{ font-size:15px; letter-spacing:-.01em; }
.card .section-head p{ font-size:12px; color:var(--label-2); margin-top:3px; }
.sh-ic{ border-radius:10px !important; }

/* ---- Layout: bagian-bagian rapi (gantinya masonry yang suka acak) ---- */
main.hub-main{ display:block; padding:0 16px 40px; max-width:1320px; margin:0 auto; }
.hub-sec{ margin:0 0 26px; scroll-margin-top:80px; }
.sec-judul{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 2px 12px;
  font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--label);
}
.sec-judul .ic{ color:var(--accent); }
.sec-judul .sd-sub{ font-size:11.5px; font-weight:600; color:var(--label-2); text-transform:none; letter-spacing:0; }
.sec-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:16px; align-items:start; }
/* Aturan lama per kartu (#cardSales{grid-column:...!important} dll., buat masonry) dinetralkan -- :is(#sec-...) dipakai
   supaya bobot selektornya mengalahkan selektor #id lama. */
:is(#sec-ringkasan,#sec-brand,#sec-keuangan,#sec-operasional,#sec-tim,#sec-peringkat) .sec-grid > .card{ min-width:0; grid-row:auto !important; grid-column:auto !important; }
@media (min-width:760px){
  :is(#sec-ringkasan,#sec-brand,#sec-keuangan,#sec-operasional,#sec-tim,#sec-peringkat) .sec-grid > .card.w2{ grid-column:span 2 !important; }
  :is(#sec-ringkasan,#sec-brand,#sec-keuangan,#sec-operasional,#sec-tim,#sec-peringkat) .sec-grid > .card.wfull{ grid-column:1 / -1 !important; }
}
@media (max-width:759.98px){ .sec-grid{ grid-template-columns:1fr; } }
@media (max-width:420px){ main.hub-main{ padding:0 10px 40px; } .card{ padding:15px 14px 14px !important; } }
.hub-tersembunyi{ display:none !important; }

/* ---- Filter periode (hub-periode.js) ---- */
.pf-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; border-radius:14px; padding:6px 8px; margin:0 0 12px; }
.pf-lbl{ font-size:11px; font-weight:700; color:var(--label-2); margin-right:2px; }
.pf-row .mini-select{ background:rgba(255,255,255,.9); }
.pf-sd{ font-size:11px; color:var(--label-2); }
.pf-btn{ border:1px solid var(--kartu-tepi); background:#fff; border-radius:10px; padding:6px 10px; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; }
.lb-filter-row .pf-row{ margin:0; }

/* ---- Kartu Peringkat (hub-kartu.js) ---- */
.pr-info{ font-size:11.5px; margin:2px 0 10px; }
.pr-row{ border:1px solid var(--kartu-tepi); border-radius:16px; margin-bottom:8px; background:#fff; overflow:hidden; }
.pr-head{ display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; }
.pr-row.open .pr-head{ background:linear-gradient(180deg, rgba(243,248,244,.9), rgba(255,255,255,0)); }
.pr-rank{ width:30px; text-align:center; font-weight:800; font-size:14px; color:var(--label-2); flex:0 0 auto; }
.pr-name{ flex:1; min-width:0; }
.pr-name b{ display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pr-name small{ color:var(--label-2); font-size:11px; }
.pr-score{ font-weight:800; font-size:18px; min-width:38px; text-align:right; }
.pr-delta{ font-size:11px; min-width:40px; text-align:right; }
.pr-chev{ color:var(--label-2); transition:transform .2s; }
.pr-row.open .pr-chev{ transform:rotate(180deg); }
.pr-body{ display:none; padding:0 14px 14px; }
.pr-row.open .pr-body{ display:block; }
.pr-h3{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); margin:14px 0 6px; }
.pr-k{ padding:6px 0; border-bottom:1px dashed var(--separator); font-size:12.5px; }
.pr-k .t{ display:flex; justify-content:space-between; gap:8px; }
.pr-k small{ display:block; color:var(--label-2); font-size:11px; margin-top:2px; }
.pr-k .t small{ display:inline; }
.pr-bar{ height:7px; background:#EEF2EF; border-radius:99px; overflow:hidden; margin-top:4px; }
.pr-bar i{ display:block; height:100%; border-radius:99px; background:currentColor; }
.pr-g{ color:#2F7A45; } .pr-y{ color:#B7791F; } .pr-r{ color:#C0392B; }
.pr-sebab{ background:#FDF2F0; border-radius:12px; padding:8px 10px; margin-bottom:6px; font-size:12.5px; }
.pr-sebab b{ color:#A93226; }
.pr-sebab small{ display:block; color:var(--label-2); font-size:11px; }
.pr-fix{ border:1px solid var(--kartu-tepi); border-radius:14px; padding:10px 12px; margin-bottom:8px; background:linear-gradient(160deg, #fff, #F7FAF8); }
.pr-fix .h{ display:flex; justify-content:space-between; gap:8px; font-weight:800; font-size:13px; }
.pr-fix .g{ flex:0 0 auto; background:#E7F1EA; color:#2F7A45; border-radius:99px; padding:2px 9px; font-size:11px; }
.pr-fix ul{ margin:6px 0 0; padding-left:18px; font-size:12px; line-height:1.55; }
.pr-ok{ font-size:12.5px; color:#2F7A45; }

/* ---- Kartu Jadwal Brand & Sisa Kontrak ---- */
.jb-row{ padding:10px 2px; border-bottom:1px solid var(--separator); }
.jb-row:last-child{ border-bottom:0; }
.jb-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.jb-top .t1{ font-weight:700; font-size:13.5px; }
.jb-top .t2{ font-size:11.5px; color:var(--label-2); margin-top:2px; }
.jb-bar{ height:6px; background:#EEF2EF; border-radius:99px; overflow:hidden; margin:8px 0 4px; }
.jb-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, #6FAE80, #2F5233); }
.jb-meta{ font-size:11.5px; color:var(--label-2); }
.jb-meta b{ color:var(--label); }
.jb-slot{ font-size:11.5px; color:var(--label-2); margin-top:3px; }
.badge.deal{ background:#E7F1EA; color:#2F7A45; }

/* Label status di kartu Jadwal Brand (gaya sama dengan badge di daftar lain). */
.jb-row .badge{ display:inline-block; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:rgba(46,111,163,.12); color:var(--info); white-space:nowrap; flex:0 0 auto; }
.jb-row .badge.gold{ background:rgba(185,134,46,.16); color:#8A6116; }
.jb-row .badge.danger{ background:rgba(192,57,43,.12); color:var(--danger); }
.jb-row .badge.deal{ background:rgba(47,82,51,.14); color:var(--ok); }
/* Kotak isian di baris filter gak melebar penuh (aturan global input{width:100%}). */
.pf-row input, .pf-row select{ width:auto !important; padding:6px 8px !important; font-size:12px !important; border-radius:10px !important; }
.pf-row .pf-rg{ display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; }
/* Kotak pilihan kecil di kartu (filter lama: cabang, periode skor, dll.) selebar isinya, bukan penuh. */
.card .mini-select{ width:auto !important; max-width:100%; }
.card .mini-row, .card .lb-filter-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }