/* ══════════════════════════════════════════════════════════════════════
   SKIN "STOCKS" — gaya Apple Stocks / Stockbit. CAT ULANG SAJA.
   Hitam pekat, angka putih besar, hijau/merah untuk naik/turun, kartu
   abu gelap tanpa border, pemisah hairline. Tidak ada fungsi, tombol,
   atau elemen yang diubah — app.js & index.html tidak disentuh logikanya.
   Dimuat PALING AKHIR supaya menimpa style.css & premium.css.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:dark;

  /* permukaan — netral iOS, tanpa tint ungu */
  --bg:#000000;
  --surface:#141416;
  --card:#1c1c1e;
  --card2:#2c2c2e;
  --border:#242428;
  --border2:#35353a;

  /* teks: putih bertingkat — terang untuk nilai, redup netral untuk label */
  --text:#ffffff;
  --soft:rgba(255,255,255,.80);
  --muted:rgba(255,255,255,.55);
  --softer:rgba(255,255,255,.34);

  /* aksen — warna sistem iOS dark */
  --green:#30d158;   /* uang · closing · sukses */
  --red:#ff453a;     /* buruk · peringatan · turun */
  --gold:#30d158;    /* aksen brand = hijau (uang) */
  --gold2:#30d158;
  --chat:#ffd426;    /* CHAT  = kuning Hurricane */
  --call:#30d158;    /* CALL  = hijau */
  --fup:#ff453a;     /* FOLLOW UP = merah */
  --blue:#3b9dff;    /* kategori lain */
  --orange:#ff9f0a;
  --purple:#c07cf5;  /* test drive · kategori */
  --cyan:#5ac8fa;    /* order complete */

  --radius-sm:10px; --radius:16px; --radius-lg:20px;
  --shadow:none;
}

/* ── tipografi ala SF Pro ── */
*{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue','Inter',Arial,sans-serif!important}
body{background:var(--bg);color:var(--text);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}

/* ── kartu: abu gelap polos, TANPA border (pemisahan lewat kontras) ── */
.card,.panel,.kpi,.sec,.box,.omset-section,.nr-panel,.spc,.warn-crit-card,
.mk,.mpr,.goal-card,.cal-box,.mo-box{
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  box-shadow:none!important;
  border-radius:14px;
}

/* ── header: hitam translusen ala iOS ── */
header{
  background:rgba(8,8,10,.82)!important;
  backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
  border-bottom:1px solid var(--border)!important;
}
.brand-name{color:var(--text)!important;letter-spacing:.4px}
.brand-sub{color:var(--muted)!important;font-weight:600}

/* ── navigasi atas: teks abu, aktif = pill emas (brand) ── */
.nav-wrapper,.nav-bar{background:rgba(8,8,10,.82)!important;border-color:var(--border)!important}
.nav-tab{color:#fff!important;border-radius:10px;font-weight:700}
.nav-tab:hover{color:var(--text)!important;background:var(--card)!important}
.nav-tab.active{background:var(--green)!important;color:#000!important;font-weight:800}

/* ── day switcher & kontrol segmen ala iOS ── */
.day-switcher{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:11px;padding:3px}
.day-btn{background:none;border:none;color:var(--soft);border-radius:8px}
.day-btn:hover{background:var(--card2);color:var(--text)}
.day-label{color:var(--text)!important;font-weight:700}
.live-badge{background:rgba(48,209,88,.14)!important;border:none!important;color:var(--green)!important;border-radius:9px}

.tab-row{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:11px;padding:3px;gap:2px;box-shadow:none!important}
.tab{background:transparent!important;border:none!important;color:#fff!important;border-radius:8px;font-weight:700}
.tab:hover{color:var(--text)!important}
.tab.active{background:var(--border2)!important;color:#fff!important;font-weight:800}

/* ── HERO OMSET: angka raksasa langsung di atas hitam, ala harga saham ── */
.omset-hero{
  background:
    radial-gradient(120% 90% at 85% 110%, rgba(48,209,88,.09), transparent 60%),
    linear-gradient(180deg,#17181a, #0e0f11)!important;
  border:1px solid var(--border2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  text-align:left!important;padding:24px 26px 30px!important;
  border-radius:18px!important;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.omset-hero-lbl{color:var(--soft)!important;font-size:11.5px;letter-spacing:2px;font-weight:700;justify-content:flex-start}
.omset-hero-val,#liveOmsetBig,#mOmsetBig{
  color:#fff!important;font-weight:800!important;
  font-size:clamp(24px,8.5vw,72px)!important;letter-spacing:-2.2px!important;line-height:1.05!important;
  overflow-wrap:anywhere;
}
.omset-hero-sub{color:#fff!important;opacity:.92;letter-spacing:1.2px;font-weight:600}

/* ── angka & label kartu ── */
.kpi-val,.mkv,.spc-rv{color:var(--text);font-weight:800!important}
.kpi-lbl,.sl{color:var(--muted)!important;letter-spacing:1.4px;font-weight:700}

/* ── badge persentase: pill solid hijau/merah/kuning ala Stocks ── */
.rb{border-radius:7px;font-weight:700!important;padding:3px 8px}
.rb.great{background:var(--green)!important;color:#000!important}
.rb.good{background:rgba(255,212,38,.16)!important;border:none!important;color:var(--chat)!important}
.rb.low{background:var(--red)!important;color:#fff!important}

/* ── tabel: hairline, bukan kotak ── */
table{border-color:transparent}
thead tr,th{background:transparent!important;color:var(--muted)!important;font-size:10px;letter-spacing:1.4px;font-weight:700;border-bottom:1px solid var(--border2)!important}
td{border-color:var(--border)!important}
tr:hover td{background:var(--surface)}

/* ── tombol ── */
.btn{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:12px;font-weight:600}
.btn:hover{background:var(--card2)}
.btn-gold,.btn-primary,.btn.primary,.premium-quick-add{
  background:var(--green)!important;background-image:none!important;
  color:#fff!important;border:none!important;box-shadow:none!important;border-radius:12px!important;font-weight:800!important;
}
.premium-head-ghost{background:var(--card)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:12px!important;box-shadow:none!important}
.premium-head-ghost:hover{background:var(--card2)!important}

/* ── input ala iOS: terisi abu gelap, tanpa border, fokus ring emas ── */
input,select,textarea{
  background:var(--card)!important;border:1px solid var(--border)!important;
  color:var(--text)!important;border-radius:11px;
}
input::placeholder,textarea::placeholder{color:var(--softer)!important}
input:focus,select:focus,textarea:focus{border-color:var(--green)!important;outline:none;box-shadow:0 0 0 3px rgba(48,209,88,.16)}

/* ── strip status & panel kecil premium ── */
.premium-status-strip{background:transparent!important;border:none!important;box-shadow:none!important;gap:14px}
.premium-status-strip>div{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px}
.premium-status-strip strong{color:var(--text)!important}
.premium-status-strip span{color:var(--muted)!important;font-weight:700}
.premium-status-strip small{color:#fff!important;opacity:.9}
.history-strip>div,.hday,.hist-day{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:12px}
.history-strip{background:transparent!important;border:none!important}

/* ── modal & kalender ── */
.mo,[class*="-overlay"]{background:rgba(0,0,0,.72)!important;backdrop-filter:blur(6px)}
.cal-box,.mo-box{background:#1c1c1e!important;border:1px solid var(--border)!important;border-radius:var(--radius-lg)}

/* ── scrollbar ── */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#3a3a3c;border-radius:99px;border:2px solid #000}
::-webkit-scrollbar-thumb:hover{background:#48484a}

/* ══ WARNA INLINE DARI app.js ══
   app.js menulis warna langsung ke elemen (style="..."). Kodenya TIDAK
   diubah — nilainya dipetakan ke palet baru, TETAP dengan makna aslinya:
   emas=chat · biru=call · oranye=follow up · hijau=uang · merah=buruk. */
[style*="background:#0e0e1a"],[style*="background: #0e0e1a"],
[style*="background:#12121e"],[style*="background: #12121e"]{background:var(--card)!important;border-color:var(--border)!important}
[style*="background:#161624"],[style*="background: #161624"],
[style*="background:#1e1e32"],[style*="background: #1e1e32"],
[style*="background:#252540"],[style*="background: #252540"]{background:var(--card2)!important;border-color:var(--border)!important}
[style*="1px solid #252540"],[style*="border:1px solid #252540"],
[style*="border-top:1px solid #252540"]{border-color:var(--border)!important}

[style*="color:#f5c518"],[style*="color: #f5c518"]{color:var(--chat)!important}     /* chat */
[style*="color:#448aff"],[style*="color: #448aff"]{color:var(--call)!important}     /* call */
[style*="color:#ff6b1a"],[style*="color: #ff6b1a"]{color:var(--fup)!important}      /* follow up */
[style*="color:#00e676"],[style*="color: #00e676"]{color:var(--green)!important}    /* closing/uang */
[style*="color:#ff3b5c"],[style*="color: #ff3b5c"]{color:var(--red)!important}      /* buruk */
[style*="color:#7c4dff"],[style*="color: #7c4dff"]{color:var(--purple)!important}
[style*="color:#a78bfa"],[style*="color: #a78bfa"]{color:var(--purple)!important}
[style*="color:#00e5ff"],[style*="color: #00e5ff"]{color:var(--cyan)!important}
[style*="color:#6060a0"],[style*="color: #6060a0"]{color:var(--soft)!important}
[style*="color:#333350"],[style*="color: #333350"],
[style*="color:#404065"],[style*="color: #404065"]{color:var(--muted)!important}
[style*="color:#e8e8f8"],[style*="color: #e8e8f8"]{color:var(--text)!important}
[style*="background:#404065"],[style*="background: #404065"]{background:#8b8b90!important}

[style*="background:#f5c518"],[style*="background: #f5c518"]{background:var(--chat)!important}
[style*="background:#00e676"],[style*="background: #00e676"]{background:var(--green)!important}
[style*="background:#ff3b5c"],[style*="background: #ff3b5c"]{background:var(--red)!important}
[style*="background:#448aff"],[style*="background: #448aff"]{background:var(--blue)!important}
[style*="background:#7c4dff"],[style*="background: #7c4dff"]{background:var(--purple)!important}
[style*="background:#ff6b1a"],[style*="background: #ff6b1a"]{background:var(--orange)!important}


/* ══ TAMPILAN HP (shell premium) ══ */
@media (max-width:768px){
  .nav-wrapper{
    background:rgba(12,12,14,.9)!important;
    backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
    border-top:1px solid var(--border)!important;box-shadow:none!important;
  }
  .nav-tab{background:transparent!important;color:#fff!important}
  .nav-tab.active{background:rgba(48,209,88,.16)!important;color:var(--green)!important}
  .nav-tab.active .premium-nav-label,.nav-tab.active .premium-nav-icon{color:var(--green)!important}
  .premium-add-fab{
    background:var(--green)!important;background-image:none!important;color:#fff!important;
    border-color:#000!important;box-shadow:0 10px 26px rgba(48,209,88,.35)!important;
  }
  .premium-more-tab{background:transparent!important}
}

[style*="color:#333350"],[style*="color: #333350"]{color:var(--muted)!important}
[style*="color:#404065"],[style*="color: #404065"]{color:var(--muted)!important}
/* segmen 'Untagged' di Insights: abu terang supaya label % hitamnya terbaca */
[style*="background:#404065"],[style*="background: #404065"]{background:#8e8e93!important}

/* background aksen inline dari app.js → palet iOS yang sama */
[style*="background:#f5c518"],[style*="background: #f5c518"]{background:var(--chat)!important}
[style*="background:#00e676"],[style*="background: #00e676"]{background:var(--green)!important}
[style*="background:#ff3b5c"],[style*="background: #ff3b5c"]{background:var(--red)!important}
[style*="background:#448aff"],[style*="background: #448aff"]{background:var(--blue)!important}
[style*="background:#7c4dff"],[style*="background: #7c4dff"]{background:var(--purple)!important}
[style*="background:#ff6b1a"],[style*="background: #ff6b1a"]{background:var(--orange)!important}

/* tab More (shell HP): jangan abu */
.premium-more-tab{background:var(--card)!important;color:#fff!important}

/* ══════════════════════════════════════════════════════════════════
   KODE WARNA SEMANTIK — hitam+hijau tetap jadi dasar, warna dipakai
   HANYA untuk membedakan makna. Satu bahasa warna di seluruh app:
   METRIK  kuning=CHAT · hijau=CALL · merah=FOLLOW UP
   HASIL   🟢 hijau=UANG/CLOSING · 🔴 merah=BURUK
   TIPE    🟠 upsell · 🟣 cross · 🟢 repeat · 🔵 test drive · 🔷 complete
           (sama persis dengan warna grafik yang digambar app.js)
   ══════════════════════════════════════════════════════════════════ */

/* ── Sale type: satu warna per jenis, konsisten di tombol, log, & Insights ── */
.sale-type-btn.active-upsell,.tag-upsell,.ins-tag.upsell{
  background:rgba(255,159,10,.16)!important;border-color:rgba(255,159,10,.4)!important;color:#ff9f0a!important}
.sale-type-btn.active-cross,.tag-cross,.ins-tag.cross{
  background:rgba(192,124,245,.16)!important;border-color:rgba(192,124,245,.4)!important;color:#c07cf5!important}
.sale-type-btn.active-repeat,.tag-repeat,.ins-tag.repeat{
  background:rgba(48,209,88,.16)!important;border-color:rgba(48,209,88,.4)!important;color:#30d158!important}
.sale-type-btn.active-testdrive,.tag-testdrive,.ins-tag.testdrive{
  background:rgba(59,157,255,.16)!important;border-color:rgba(59,157,255,.4)!important;color:#3b9dff!important}
.sale-type-btn.active-complete,.tag-complete,.ins-tag.complete{
  background:rgba(90,200,250,.16)!important;border-color:rgba(90,200,250,.4)!important;color:#5ac8fa!important}

/* batang tren Insights ikut bahasa warna yang sama */
.ins-trend-bar.up{background:#ff9f0a!important}
.ins-trend-bar.cr{background:#c07cf5!important}
.ins-trend-bar.rp{background:#30d158!important}

/* ── Kartu sales: Chat / Call / Follow Up masing-masing beda warna ──
   Urutan baris dari app.js: 1 chat · 2 call · 3 follow up. */
.spc-row:nth-child(5) .spc-rv{color:var(--chat)!important}
.spc-row:nth-child(6) .spc-rv{color:var(--call)!important}
.spc-row:nth-child(7) .spc-rv{color:var(--fup)!important}
.spc-row .spc-rl{color:var(--muted)!important}

/* ── BURUK = MERAH, tegas ── */
.nr-item.missing{background:rgba(255,69,58,.12)!important;border-color:rgba(255,69,58,.45)!important}
.nr-item.missing *{color:var(--red)!important}
.nr-item.done{background:rgba(48,209,88,.08)!important;border-color:rgba(48,209,88,.28)!important}
.rb.low,.warn-crit-issue,.warn-team-tot,.gap,.bg-red{
  background:rgba(255,69,58,.16)!important;color:var(--red)!important;border-color:rgba(255,69,58,.4)!important}
.rb.low{background:var(--red)!important;color:#fff!important}
.warn-summary-card{border-color:rgba(255,69,58,.45)!important}
.warn-crit-name{color:#fff!important}

/* ── Insights: kartu KPI netral, angka putih tebal, label redup ── */
.ins-kpi-card{background:var(--card)!important;border:1px solid var(--border)!important}
.ins-kpi-val{color:#fff!important}
.ins-kpi-lbl,.ins-kpi-sub{color:var(--muted)!important}

/* ══════════════════════════════════════════════════════════════════
   WATCHLIST — baris rapat bergaya daftar saham
   ══════════════════════════════════════════════════════════════════ */
.wl-note{font-size:10.5px;letter-spacing:.4px;color:var(--muted);margin:-6px 0 14px 2px}
.wl-panel{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.wl-head,.wl-row{
  display:grid;grid-template-columns:minmax(120px,1.5fr) 148px 96px 112px;
  align-items:center;gap:12px;padding:10px 16px;
}
.wl-head{
  font-size:9px;letter-spacing:1.4px;font-weight:700;color:var(--muted);
  border-bottom:1px solid var(--border2);background:rgba(255,255,255,.02);
}
.wl-head-v,.wl-head-r{text-align:right}
.wl-head-c{text-align:center}
.wl-row{border-bottom:1px solid rgba(255,255,255,.05);transition:background .12s}
.wl-row:last-child{border-bottom:none}
.wl-row:hover{background:rgba(255,255,255,.035)}
.wl-name{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.2px}
.wl-team{font-size:10px;color:var(--muted);margin-top:1px;letter-spacing:.3px}
.wl-chart{height:34px;display:flex;align-items:center;justify-content:center}
.wl-spark{width:132px;height:34px;display:block}
.wl-val{text-align:right}
.wl-total{font-size:13.5px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.wl-right{text-align:right}
.wl-chg{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.wl-chg.up{color:var(--green)}
.wl-chg.idle{font-size:9.5px;letter-spacing:1px;color:var(--muted);font-weight:700}
.wl-chg.bad{font-size:9.5px;letter-spacing:1px;color:var(--red);font-weight:700}
.wl-sub{font-size:9.5px;color:var(--muted);margin-top:2px;letter-spacing:.3px}
.wl-sub.bad{color:var(--red);opacity:.85}
.wl-foot{padding:11px 16px;border-top:1px solid var(--border2);font-size:10.5px;
  letter-spacing:.5px;color:var(--muted);background:rgba(255,255,255,.02)}
.wl-empty{padding:28px;text-align:center;color:var(--muted);font-size:12px}
@media(max-width:768px){
  .wl-head,.wl-row{grid-template-columns:minmax(90px,1.3fr) 96px 84px;gap:8px;padding:10px 12px}
  .wl-head-v,.wl-val{display:none}
  .wl-spark{width:96px}
}

/* nav: warna-warni per-tab (inline dari index.html) terlalu ramai untuk
   tampilan serius — semua putih, hanya Warning yang merah. */
.nav-tab[data-page]{color:#fff!important}
.nav-tab[data-page="warning"]{color:var(--red)!important}
.nav-tab.active,.nav-tab.active[data-page]{background:var(--green)!important;color:#000!important}

/* ══ LOGO ASLI ══
   Layer lain memberi filter hijau + latar gelap pada logo. Kembalikan ke
   logo asli: badge kuning brand + tornado hitam, tanpa filter.
   Selector sengaja lebih spesifik supaya menang tanpa bergantung urutan file. */
header .brand .brand-logo{
  background:linear-gradient(145deg,#ffd633,#ffc000)!important;
  border:none!important;
  border-radius:14px!important;
  box-shadow:0 4px 18px rgba(255,200,40,.22)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;
}
header .brand .brand-logo img{
  filter:none!important;
  -webkit-filter:none!important;
  width:76%!important;height:auto!important;display:block!important;
  mix-blend-mode:normal!important;opacity:1!important;
}

/* ══════════════════════════════════════════════════════════════════
   HALAMAN CALLS & FOLLOW UP — samakan dengan bahasa warna dashboard.
   Avatar tim sebelumnya warna-warni (dari database) sehingga halaman ini
   terlihat ramai. Di sini statusnya yang berbicara: HIJAU sudah lapor,
   MERAH belum lapor — sesuai kartu di sekitarnya.
   ══════════════════════════════════════════════════════════════════ */
#page-activity .nr-item{border-radius:11px!important;padding:11px 13px!important}
#page-activity .nr-item.done{
  background:rgba(48,209,88,.07)!important;border-color:rgba(48,209,88,.22)!important}
#page-activity .nr-item.missing{
  background:rgba(255,69,58,.09)!important;border-color:rgba(255,69,58,.38)!important}

/* avatar: ikut status, bukan warna tim */
#page-activity .nr-item .nr-av{
  background:rgba(255,255,255,.06)!important;color:#fff!important;
  border-radius:8px!important;font-weight:800!important}
#page-activity .nr-item.done .nr-av{
  background:rgba(48,209,88,.16)!important;color:var(--green)!important}
#page-activity .nr-item.missing .nr-av{
  background:rgba(255,69,58,.18)!important;color:var(--red)!important}

#page-activity .nr-item .nr-name{color:#fff!important;font-weight:700!important}
#page-activity .nr-item.missing .nr-name{color:var(--red)!important}
#page-activity .nr-item .nr-team{color:var(--muted)!important}

/* badge LATE: kuning peringatan, bukan oranye acak */
#page-activity .nr-item [class*="late"],#page-activity .nr-late,
#page-activity .nr-item .late{
  background:rgba(255,212,38,.16)!important;color:var(--chat)!important;
  border:none!important;border-radius:5px!important;font-weight:800!important}

/* ── form Add Activity: tiap metrik memakai warnanya sendiri ──
   dipilih lewat ID input (aChats/aCalls/aFups) agar tepat sasaran. */
#page-activity .ig:has(#aChats) .igl{color:var(--chat)!important;font-weight:800!important}
#page-activity .ig:has(#aCalls) .igl{color:var(--call)!important;font-weight:800!important}
#page-activity .ig:has(#aFups)  .igl{color:var(--fup)!important;font-weight:800!important}
#aChats{color:var(--chat)!important;font-weight:800!important}
#aCalls{color:var(--call)!important;font-weight:800!important}
#aFups {color:var(--fup)!important;font-weight:800!important}
#aChats:focus{border-color:var(--chat)!important;box-shadow:0 0 0 3px rgba(255,212,38,.15)!important}
#aCalls:focus{border-color:var(--call)!important;box-shadow:0 0 0 3px rgba(48,209,88,.15)!important}
#aFups:focus {border-color:var(--fup)!important;box-shadow:0 0 0 3px rgba(255,69,58,.15)!important}

/* Toggle Yesterday/Today: kontrol UI, jadi HIJAU — kuning kini berarti "chat". */
#page-activity button[style*="background:#f5c518"],
#page-activity button[style*="background: #f5c518"]{
  background:var(--green)!important;color:#000!important;font-weight:800!important}

/* Banner info: netral, jangan pakai kuning metrik */
#page-activity .readonly-banner{
  border-color:var(--border2)!important;color:#fff!important;
  background:rgba(255,255,255,.03)!important}
#page-activity .readonly-banner *{color:#fff!important}
#page-activity .readonly-banner div:last-child{color:var(--muted)!important}

/* Badge catatan sales (mis. ON LEAVE) — netral, tidak mencuri perhatian */
.sp-note-badge{
  display:inline-block;margin-left:7px;padding:2px 7px;border-radius:5px;
  background:rgba(255,212,38,.15);color:var(--chat);
  font-size:8.5px;font-weight:800;letter-spacing:1px;vertical-align:middle;
  font-family:-apple-system,'SF Pro Text',sans-serif;
}

/* ══ PERBAIKAN GESER TABEL DI HP ══
   Grid item default-nya min-width:auto, jadi .premium-performance-main
   melebar mengikuti lebar tabel (620px) dan menjebol kolom grid — akibatnya
   kotak .tw ikut selebar 667px di layar 375px, scrollWidth == clientWidth,
   sehingga TIDAK ADA yang bisa digeser (dan <body> sudah overflow-x:hidden).
   min-width:0 mengembalikan lebar kotak ke lebar layar, sehingga tabel
   bisa digeser di dalamnya dan kolom OMSET yang sticky tetap menempel. */
@media(max-width:768px){
  .premium-performance-main,.premium-performance-grid>*,
  #vTeam,#vSP,#vProd{
    min-width:0!important;max-width:100%!important;
  }
  #vTeam .tw,#vSP .tw,#vProd .tw{
    width:100%!important;max-width:100%!important;min-width:0!important;
    overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   PERBAIKAN FUNGSI (bukan sekadar tampilan)
   ══════════════════════════════════════════════════════════════════ */

/* 1. Kalender HARUS di atas laci form penjualan (z-index 950). Sebelumnya
      kalender z-index 500, jadi di DESKTOP kalender terbuka DI BALIK laci —
      tanggal tidak bisa dipilih sehingga input mundur ("Yesterday") mustahil.
      premium.css sudah memperbaiki ini, tapi hanya di dalam media query HP. */
.cal-overlay,#entryCalOverlay,#calOverlay,#omsetCalOverlay{z-index:1100!important}

@media(max-width:768px){
  /* 2. Empat kartu status: pastikan semuanya bisa dijangkau dengan digeser.
        Sebelumnya dua kartu terakhir terpotong tanpa cara menggulirnya. */
  .premium-status-strip{
    display:flex!important;flex-wrap:nowrap!important;
    overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x proximity!important;gap:10px!important;
    padding-bottom:2px!important;
  }
  .premium-status-strip>div{
    flex:0 0 58%!important;min-width:0!important;scroll-snap-align:start!important;
    border-right:1px solid var(--border)!important;
  }

  /* 3. Tab aktif di bar bawah harus jelas terlihat, bukan cuma garis 2px. */
  .nav-tab.active,.nav-tab.active[data-page]{
    background:rgba(48,209,88,.18)!important;color:var(--green)!important;
    border-radius:12px!important;
  }
  .nav-tab.active .premium-nav-label,.nav-tab.active .premium-mobile-label{
    color:var(--green)!important;font-weight:800!important;
  }
}

/* Beri jarak antara teks tab dan garis bawah.
   professional.css memakai padding:0 16px + rata tengah, sehingga teks
   nyaris menempel ke garis. Selector dibuat lebih spesifik (.nav-bar .nav-tab)
   supaya menang atas aturan !important yang dimuat setelah file ini. */
@media(min-width:769px){
  .nav-bar .nav-tab{
    min-height:64px!important;
    padding-top:6px!important;
    padding-bottom:12px!important;
  }
}

/* Sub-label kecil di kartu KPI modal sales — menyebut periode/rata-rata,
   supaya angka besar di atasnya tidak ambigu (bulan vs hari). */
.mk .mksub{
  margin-top:6px;
  font-family:'DM Mono','Space Mono',monospace;
  font-size:9px;
  letter-spacing:.4px;
  color:var(--muted);
  line-height:1.3;
}