/* ============================================================
   SALES INSIGHT PIRA — dashboard styles
   Skala spasi 4px (8/12/16/20/24) · tipografi min 12.5px
   Kontras teks redup >= 4.5:1 di atas permukaan kartu
   ============================================================ */
/* TEMA GELAP (default) — abu-abu netral, bukan biru gelap: teks redup jadi
   abu terang yang kontras. Biru hanya utk aksen (tombol aktif, garis chart). */
:root{
  --bg:#0f1013; --bg2:#15161a; --card:#1a1b20; --card2:#212329;
  --line:#2a2c33; --line2:#41444d;
  --text:#eef0f3; --muted:#a9afb9; --muted2:#8e95a0;
  --accent:#5b9dff; --accent2:#3b82f6;
  --up:#22c55e; --up-soft:rgba(34,197,94,.14);
  --down:#f4544c; --down-soft:rgba(244,84,76,.14);
  --gold:#f5c451;
  --snap:#e879f9; --snap-soft:rgba(232,121,249,.10); /* mode snapshot bulan lalu STOCK ALERT */
  --grid:rgba(255,255,255,.05);
  --ch-tick:#a9afb9; --ch-grid:rgba(255,255,255,.06); /* dibaca JS chart (live) */
  --glow-a:rgba(140,150,170,.07); --glow-b:rgba(255,255,255,.03);
  --glass1:rgba(33,35,41,.92); --glass2:rgba(26,27,32,.92);
  --glass1s:rgba(33,35,41,.5); --glass2s:rgba(24,25,29,.38);
  --glass-line:rgba(65,68,77,.6);
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --shadow-pop:0 18px 50px rgba(0,0,0,.55);
  --shadow-hover:0 12px 34px rgba(0,0,0,.5);
  --r-card:16px; --r-inner:10px;
  --fs-sub:13px; --fs-small:12.5px; --fs-body:13.5px;
  /* kolom isian (Editor Data): kontras jelas vs permukaan sekitarnya */
  --field:#0a0b0e; --field-line:#454a55; --field-ring:rgba(91,157,255,.22);
  color-scheme:dark;
}
/* TEMA TERANG — dipasang ui.js sebagai <html data-theme="light">.
   Semua komponen memakai variabel, jadi cukup menimpa nilai di sini;
   warna status (hijau/merah/emas/aksen) digelapkan agar tetap kontras
   sebagai TEKS di atas permukaan terang. */
:root[data-theme="light"]{
  --bg:#eef0f4; --bg2:#f8f9fb; --card:#ffffff; --card2:#fcfdfe;
  --line:#e2e5ea; --line2:#c6ccd6;
  --text:#171a20; --muted:#4d5562; --muted2:#68717f;
  --accent:#2563eb; --accent2:#2563eb;
  --up:#15803d; --up-soft:rgba(21,128,61,.12);
  --down:#c62f28; --down-soft:rgba(198,47,40,.10);
  --gold:#a16207;
  --snap:#a21caf; --snap-soft:rgba(162,28,175,.07);
  --grid:rgba(15,18,24,.07);
  --ch-tick:#5b6472; --ch-grid:rgba(15,18,24,.08);
  --glow-a:rgba(37,99,235,.06); --glow-b:rgba(21,128,61,.04);
  --glass1:rgba(255,255,255,.93); --glass2:rgba(250,251,253,.93);
  --glass1s:rgba(255,255,255,.62); --glass2s:rgba(255,255,255,.45);
  --glass-line:rgba(160,168,182,.55);
  --shadow:0 6px 22px rgba(23,26,32,.08);
  --shadow-pop:0 18px 50px rgba(23,26,32,.2);
  --shadow-hover:0 12px 30px rgba(23,26,32,.14);
  --field:#ffffff; --field-line:#a8b0bd; --field-ring:rgba(37,99,235,.18);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 600px at 85% -10%,var(--glow-a),transparent 60%),
    radial-gradient(900px 500px at 0% 0%,var(--glow-b),transparent 55%),
    var(--bg);
  color:var(--text); line-height:1.5; font-size:16px;
  padding:28px 22px 60px; min-height:100vh;
  transition:background .25s ease,color .25s ease;
}
.app{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:20px}

/* interaksi dasar */
button{font-family:inherit;cursor:pointer}
:is(button,input,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

/* ---------- topbar STATIS (judul kiri · nav TENGAH · akun kanan) ----------
   Grid 3 kolom 1fr-auto-1fr: nav selalu persis di tengah & tidak bergeser
   antar tab. Halaman admin (tanpa nav) tetap cocok: topbar-right dipaksa
   ke kolom 3. Info data per-tab TIDAK di sini — ada di bar per halaman. */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px 22px}
.hdr-brand{display:flex;flex-direction:column;justify-content:center}
.topbar h1{font-size:22px;font-weight:800;letter-spacing:.6px;color:var(--text);white-space:nowrap}
.sub{color:var(--muted);font-size:var(--fs-sub);margin-top:2px}
.topbar .tabs{grid-column:2}
.topbar-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.pill{background:var(--card);border:1px solid var(--line);color:var(--muted);
  padding:7px 13px;border-radius:999px;font-size:var(--fs-small)}

/* ---------- SIDEBAR (desktop >=1101px, hanya body.has-sidebar) ----------
   Menggantikan topbar di desktop: kolom tetap kiri, konten utama bergeser
   lewat padding-left body = var(--sbw) (di-set ui.js dari localStorage;
   pegangan .sb-resize mengubahnya live). Konten TIDAK melipat saat sidebar
   menyempit: semua baris nowrap + overflow hidden = terpotong bersih.
   z-index 60: di atas filterbar sticky (40) & rail (50), di bawah modal (80). */
:root{--sbw:264px}
.sidebar{display:none}
@media(min-width:1101px){
  body.has-sidebar{padding-left:calc(var(--sbw) + 26px)}
  body.has-sidebar .topbar{display:none}
  body.has-sidebar .banner-stack{left:var(--sbw)}
  body.has-sidebar .sidebar{display:flex}
  body.sb-dragging{user-select:none;cursor:col-resize}
  body.sb-dragging *{cursor:col-resize !important}
}
.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;width:var(--sbw);
  flex-direction:column;background:linear-gradient(180deg,var(--card2),var(--card));
  border-right:1px solid var(--line);overflow:hidden}
.sidebar .sb-tx{white-space:nowrap;overflow:hidden;min-width:0}
/* Menu dan notifikasi bergulir bersama tanpa rel; kaki tetap mudah dijangkau.
   Baris tidak menyusut agar semua pratinjau terbaca pada layar pendek. */
.sb-scroll{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior-y:contain;scrollbar-width:none}
.sb-scroll::-webkit-scrollbar{display:none}
.sb-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sb-brand{display:flex;align-items:center;gap:10px;padding:16px 14px 12px 18px;flex:0 0 auto}
.sb-brand-mark{flex:0 0 auto;display:inline-flex}
.sb-brand-mark svg{display:block;border-radius:7px}
.sb-brand-tx{font-size:15px;font-weight:800;letter-spacing:.6px;color:var(--text);
  white-space:nowrap;overflow:hidden}
/* Satu garis rata kiri utk SEMUA baris sidebar: judul seksi, ikon nav, ikon
   notifikasi, lonceng "Semua notifikasi", gerigi Pengaturan & avatar semuanya
   mulai di 18px dari tepi (container 8px + padding baris 10px) dalam kotak
   ikon 26px — satu kolom ikon yang juga pas di tengah rel mode ciut. */
.sb-sec-title{display:block;color:var(--muted2);font-size:10.5px;font-weight:700;
  letter-spacing:.9px;text-transform:uppercase;padding:0 10px;margin-bottom:6px;
  white-space:nowrap;overflow:hidden}
.sb-nav{display:flex;flex-direction:column;gap:2px;padding:10px 8px;flex:0 0 auto;
  border-top:1px solid var(--line)}
.sb-item{display:flex;align-items:center;gap:4px;width:100%;min-height:36px;
  padding:8px 10px;border:0;border-radius:9px;background:none;color:var(--muted);
  font-family:inherit;font-size:12.5px;font-weight:650;letter-spacing:.3px;
  text-align:left;white-space:nowrap;overflow:hidden;cursor:pointer;
  transition:background .14s,color .14s;text-decoration:none}
.sb-item .tab-ic{flex:0 0 auto;width:26px}
.sb-beta{flex:0 0 auto;margin-left:4px;padding:2px 5px;border-radius:4px;
  font-size:9px;font-weight:800;line-height:1.2;letter-spacing:.5px;
  color:var(--gold);background:rgba(245,196,81,.12);border:1px solid rgba(245,196,81,.3)}
.sb-item.active .sb-beta{color:#ffe099;background:rgba(245,196,81,.14)}
.sb-item:hover{background:var(--bg2);color:var(--text)}
.sb-item.active{background:linear-gradient(180deg,#27406b,#1d2f50);color:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.3)}
.sb-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* -- notifikasi: daftar KANAL + tombol ke pusat notifikasi (baris kanal: notif.css) -- */
.sb-notif{display:flex;flex-direction:column;
  padding:12px 8px 8px;border-top:1px solid var(--line);overflow:hidden}
.sb-sec-head{display:flex;align-items:center;gap:8px;padding-right:12px}
.sb-sec-head .sb-sec-title{margin-bottom:0;flex:1;min-width:0}
.sb-ncount{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--down);color:#fff;font-size:10.5px;font-weight:700;
  font-variant-numeric:tabular-nums}
.sb-nlist{list-style:none;margin-top:6px;display:flex;flex-direction:column;gap:1px;
  flex:0 0 auto}
/* Baris notif: ikon di kolom yang sama dgn ikon nav (lebar 26px, mulai 18px);
   spasi ikon→teks juga sama (10px) supaya judul rata dgn label nav. */
/* titik belum-dibaca di KANAN baris — kolom kiri tetap satu garis rata */
.sb-nempty{color:var(--muted2);font-size:12px;padding:8px 12px;white-space:nowrap;overflow:hidden}
.sb-nall{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;margin-top:6px;flex:0 0 auto;
  padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--bg2);
  color:var(--muted);font-family:inherit;font-size:12px;font-weight:650;cursor:pointer;
  white-space:nowrap;overflow:hidden;transition:background .14s,color .14s,border-color .14s}
.sb-nall svg{flex:0 0 auto;width:16px;height:16px;margin:0 5px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sb-nall .sb-tx{flex:1;text-align:left}
.sb-nall .sb-chev{flex:0 0 auto;color:var(--muted2)}
.sb-nall:hover{background:var(--card);color:var(--text);border-color:var(--line2)}
/* -- kaki: tombol Pengaturan (popover berisi akun/admin/tema) di atas baris
      user (avatar + nama + keluar) — pola user-section sidebar pada umumnya -- */
.sb-foot{flex:0 0 auto;margin-top:auto;display:flex;flex-direction:column;gap:2px;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.sb-act{display:flex;align-items:center;gap:4px;width:100%;min-height:34px;
  padding:7px 10px;border:0;border-radius:9px;background:none;color:var(--muted);
  font-family:inherit;font-size:12.5px;font-weight:620;text-align:left;
  white-space:nowrap;overflow:hidden;cursor:pointer;text-decoration:none;
  transition:background .14s,color .14s}
.sb-act .tab-ic{flex:0 0 auto}
.sb-act:hover{background:var(--bg2);color:var(--text)}
.sb-act:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sb-theme-ic svg{width:15px;height:15px}
.sb-set{position:relative}
/* gerigi Pengaturan: kotak ikon 26px = ukuran avatar di baris user bawahnya,
   jadi ikon segaris & senada dan teksnya ("Pengaturan" / nama) ikut rata */
#sbSetBtn .tab-ic{width:26px;height:26px}
#sbSetBtn .tab-ic svg{width:20px;height:20px}
.sb-set .sb-chev{margin-left:auto;color:var(--muted2);transform:rotate(-90deg)}
#sbSetBtn[aria-expanded="true"]{background:var(--bg2);color:var(--text)}
#sbSetBtn[aria-expanded="true"] .sb-chev{transform:rotate(90deg)}
/* popover ke ATAS dari tombol Pengaturan; tetap di dalam lebar sidebar
   (sidebar overflow hidden) — baris panjang terpotong bersih spt lainnya */
.sb-setmenu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:3;
  display:flex;flex-direction:column;gap:2px;padding:5px;
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);border-radius:11px;box-shadow:var(--shadow-pop);
  animation:pop .14s ease}
.sb-setmenu[hidden]{display:none}
.sb-user{display:flex;align-items:center;gap:10px;min-height:40px;padding:5px 6px 5px 10px;
  border-radius:9px;overflow:hidden}
.sb-uname{flex:1;min-width:0;color:var(--text);font-size:13px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* pill peran akun di samping nama (auth.js renderRole) */
.sb-urole{flex:0 0 auto;padding:2px 8px;border-radius:99px;font-size:10.5px;font-weight:700;
  letter-spacing:.02em;border:1px solid var(--line2);color:var(--muted);background:var(--bg2);white-space:nowrap}
.sb-urole[hidden]{display:none}
.sb-urole.r-pic{color:var(--gold);border-color:rgba(245,196,81,.45);background:rgba(245,196,81,.1)}
.sb-urole.r-manager,.sb-urole.r-developer{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.sb-logout-ic{flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;
  justify-content:center;border:0;border-radius:8px;background:none;color:var(--muted);
  cursor:pointer;transition:background .14s,color .14s}
.sb-logout-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sb-logout-ic:hover{color:var(--down);background:var(--down-soft)}
.sb-logout-ic:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* pegangan resize: garis tipis di tepi kanan, menebal saat hover/drag */
.sb-resize{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;z-index:2}
.sb-resize::after{content:"";position:absolute;top:0;right:0;width:2px;height:100%;
  background:transparent;transition:background .14s}
.sb-resize:hover::after,body.sb-dragging .sb-resize::after{background:var(--accent)}
.sb-pin{flex:0 0 auto;margin-left:auto;width:28px;height:28px;display:inline-flex;align-items:center;
  justify-content:center;padding:0;border:0;border-radius:8px;background:none;color:var(--muted2);
  cursor:pointer;transition:background .14s,color .14s,opacity .14s}
.sb-pin svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.sb-pin:hover{background:var(--bg2);color:var(--text)}
.sb-pin:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
:root.sb-mini .sb-pin-chev{transform:scaleX(-1);transform-origin:15px 12px}
/* ---------- MODE CIUT (:root.sb-mini, tombol #sbPin, ui.js) ----------
   Sidebar menjadi rel ikon selebar --sbw-mini; konten hanya bergeser selebar
   rel dan .app boleh melebar sampai --app-max-mini (satu batas utk semua
   halaman). Hover / fokus keyboard (.sb-open) membuka sidebar penuh selebar
   --sbw sebagai lapisan DI ATAS konten — padding body tidak berubah, jadi
   halaman tidak bergeser. Teks hanya dipudarkan (bukan display:none) agar
   posisi ikon tetap sama saat membuka. Pegangan resize hanya utk mode penuh. */
:root{--sbw-mini:64px;--app-max-mini:1600px}
@media(min-width:1101px){
  :root.sb-mini body.has-sidebar{padding-left:calc(var(--sbw-mini) + 26px)}
  :root.sb-mini body.has-sidebar .banner-stack{left:var(--sbw-mini)}
  :root.sb-mini body.has-sidebar .app{max-width:var(--app-max-mini)}
  :root.sb-mini .sidebar{width:var(--sbw-mini);transition:width .16s ease,box-shadow .16s ease}
  :root.sb-mini .sidebar.sb-open{width:var(--sbw);box-shadow:var(--shadow-pop)}
  :root.sb-mini .sidebar :is(.sb-brand-tx,.sb-pin,.sb-sec-title,.sb-tx,.sb-beta,.sb-chev,
    .sb-nbody,.sb-nempty,.sb-uname,.sb-urole,.sb-logout-ic){transition:opacity .14s ease}
  :root.sb-mini .sidebar:not(.sb-open) :is(.sb-brand-tx,.sb-pin,.sb-sec-title,.sb-tx,.sb-beta,
    .sb-chev,.sb-nbody,.sb-nempty,.sb-uname,.sb-urole,.sb-logout-ic){opacity:0;pointer-events:none}
  /* lencana jumlah notifikasi di tengah rel (judul seksi tak memakan tempat) */
  :root.sb-mini .sidebar:not(.sb-open) .sb-sec-head{gap:0;padding-right:0;justify-content:center}
  :root.sb-mini .sidebar:not(.sb-open) .sb-sec-head .sb-sec-title{flex:0 0 0;padding:0}
  :root.sb-mini .sb-resize{display:none}
}
@media(min-width:1101px) and (prefers-reduced-motion:reduce){
  :root.sb-mini .sidebar,:root.sb-mini .sidebar *{transition:none}
}
.seg-lg button{padding:9px 18px;font-size:14px}
.seg-lg button.active{background:linear-gradient(180deg,#2c6b46,#1d4f33);color:#fff}

/* ---------- KPI ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);
  border-radius:var(--r-card);padding:16px 18px;position:relative;overflow:hidden;box-shadow:var(--shadow);
  animation:rise .5s ease both;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.kpi .k-label{color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.7px}
.kpi .k-val{font-size:24px;font-weight:700;margin-top:8px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.kpi .k-foot{font-size:var(--fs-small);color:var(--muted2);margin-top:6px}
.kpi-revenue{container-type:inline-size}
.kpi-revenue-pair{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;gap:12px}
.kpi-revenue-main{min-width:0}
.kpi-revenue-main .k-val{white-space:nowrap}
.kpi-revenue-main .k-foot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-month{min-width:0;padding-left:12px;border-left:1px solid var(--line2)}
.k-month-label{color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.7px}
.k-month-val{font-size:20px;font-weight:700;margin-top:8px;letter-spacing:-.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.k-month-foot{font-size:var(--fs-small);color:var(--muted2);margin-top:6px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Lebar kartu mengikuti sidebar dan zoom browser, bukan hanya lebar layar. */
@container(max-width:270px){
  .kpi-revenue-pair{gap:6px}
  .kpi-month{padding-left:6px}
  .kpi-revenue-main .k-label{font-size:10px;letter-spacing:.1px;white-space:nowrap}
  .kpi-revenue-main .k-val{font-size:18px}
  .kpi-revenue-main .k-foot{font-size:10.5px}
  .kpi-month .k-month-label{font-size:10.5px;letter-spacing:.1px;white-space:nowrap}
  .kpi-month .k-month-val{font-size:16px}
  .kpi-month .k-month-foot{font-size:10.5px}
}
@media(max-width:720px){
  .kpi-revenue{grid-column:1/-1}
  .kpi-month .k-month-label{font-size:11px;letter-spacing:.45px;line-height:1.25}
  .kpi-month .k-month-val{font-size:18px;line-height:1.2;margin-top:7px}
  .kpi-month .k-month-foot{font-size:12px;line-height:1.35;margin-top:5px}
}
.kpi:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--shadow-hover)}
.kpi::before{content:"⤢";position:absolute;top:12px;right:14px;color:var(--muted2);font-size:12px;opacity:0;transition:.15s}
.kpi:hover::before{opacity:.85}
.delta{font-weight:700}
.delta.up{color:var(--up)} .delta.down{color:var(--down)}

/* ---------- kartu & layout ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px 20px 16px;box-shadow:var(--shadow);animation:rise .55s ease both}
.card-fill{display:flex;flex-direction:column} /* konten dalam (mis. brand-body) mengisi sisa tinggi kartu */
.span-full{grid-column:1/-1}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-2>*{min-width:0} /* cegah grid blowout: konten nowrap panjang tidak boleh melebarkan kartu */
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.card h2{font-size:17px;font-weight:650;letter-spacing:-.2px}
.card-sub{color:var(--muted);font-size:var(--fs-sub);margin-top:4px;max-width:62ch}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Kartu tren tak berjudul: kontrol = header, dua baris tetap —
   baris 1: mode Tren/Bandingkan (kiri) + tampilan & Reset (kanan);
   baris 2: filter data. [data-mode] disembunyikan app.js per mode; !important
   perlu karena .seg/.dd memasang display sendiri yang menimpa [hidden]. */
.trend-card .card-head{justify-content:flex-start;margin-bottom:12px}
.trend-card .controls{width:100%}
.trend-card [hidden]{display:none!important}
.trend-controls{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px}
.tc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tc-top{justify-content:space-between}
.tc-view{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.tc-filters{padding-top:10px;border-top:1px solid var(--line)}
.tc-mode button{padding:7px 18px;font-size:13.5px}
.trend-card .seg button:disabled,:root[data-theme="light"] .trend-card .seg button:disabled{background:transparent;color:var(--muted2);box-shadow:none;opacity:.45;cursor:not-allowed}
.comparison-scroll{min-width:0;max-width:100%;overflow-x:auto}
.comparison-scroll.is-bar{overscroll-behavior-x:contain}
.cmp-bar-prompt{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;margin-bottom:12px;border:1px solid var(--line2);border-radius:10px;background:var(--card2)}
.cmp-bar-prompt p{margin:0;color:var(--text);font-size:13px;line-height:1.5;flex:1 1 220px}
.cmp-bar-prompt button{min-height:44px;flex:none;cursor:pointer}
.cmp-product-row:has(input:disabled){opacity:.45;cursor:not-allowed}
.cmp-product-row input:disabled{cursor:not-allowed}

/* ringkasan di atas grafik — strip RINGKAS dua baris (label kecil, lalu nilai).
   Mode Tren: total (nilai utama) + stat pendukung, dipisah garis tipis; tinggi
   tetap (nowrap) supaya ganti filter tidak menggeser grafik; chip produk di
   baris kedua. */
.trend-sum{margin:0 0 12px;padding:8px 16px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,var(--card2),var(--bg2))}
.ts-row{display:flex;align-items:stretch;min-width:0}
.ts-hero{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:none;padding-right:22px}
.ts-k{display:flex;align-items:center;gap:7px;color:var(--muted2);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.55px;white-space:nowrap}
.ts-range{color:var(--muted);font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ts-range::before{content:"·";margin-right:7px;color:var(--muted2)}
.ts-val{color:var(--text);font-size:21px;font-weight:750;line-height:1.15;letter-spacing:-.3px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ts-stat{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1 1 0;max-width:230px;min-width:0;
  padding:0 20px;border-left:1px solid var(--line)}
.ts-stat b{color:var(--text);font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ts-tag,.cc-tag{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;font-size:10px;
  font-weight:700;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.ts-tag{background:rgba(91,157,255,.14);color:var(--accent)}
.ts-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.ts-chip{display:inline-flex;align-items:center;gap:8px;max-width:280px;padding:4px 11px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);
  font-size:12.5px;font-weight:600;transition:.15s}
.ts-chip:hover{border-color:var(--line2)}
.ts-chip i{flex:none;width:9px;height:9px;border-radius:50%}
.ts-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-chip b{flex:none;color:var(--muted);font-weight:650;font-variant-numeric:tabular-nums}
.ts-chip.off{opacity:.5}
.ts-chip.off i{background:transparent!important;border:1.5px solid var(--muted2)}
.ts-chip.off .nm{text-decoration:line-through}
/* mode Bandingkan: SATU strip, tiga sel A | B | Selisih dgn pola dua baris yang
   sama. Garis kecil di judul = legenda garis grafik (biru = utama, abu =
   pembanding); sel Selisih diberi rona hijau/merah + panah. */
.trend-sum.is-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;overflow:hidden}
.cmp-card{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;padding:8px 16px;
  border-left:1px solid var(--line)}
.cmp-card:first-child{border-left:0}
.cc-h{display:flex;align-items:center;gap:7px;min-width:0;color:var(--muted2);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.cc-n{color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.cc-h .sw{flex:none;width:14px;height:3px;border-radius:2px;background:var(--accent)}
.cmp-card.b .sw{background:var(--muted2)}
.cc-tag{background:var(--up-soft);color:var(--up)}
.cc-win{flex:none;margin-left:auto;color:var(--muted2);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none}
.cc-win:empty{display:none}
.cc-run{display:none} /* ponsel: lencana BERJALAN dilipat ke baris tanggal */
.cc-row{display:flex;align-items:baseline;gap:10px;min-width:0}
.cc-v{flex:none;color:var(--text);font-size:21px;font-weight:750;line-height:1.15;letter-spacing:-.3px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cc-sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12.5px;
  font-variant-numeric:tabular-nums}
.cc-sub b{font-weight:700} .cc-sub b.up{color:var(--up)} .cc-sub b.down{color:var(--down)}
.cc-foot b{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
#cmpPeriodMount .dd-btn .val{max-width:290px}
.cmp-card.d.up{background:var(--up-soft)} .cmp-card.d.down{background:var(--down-soft)}
.cmp-card.d.up .cc-v{color:var(--up)} .cmp-card.d.down .cc-v{color:var(--down)}
/* panel periode Bandingkan: tab Bulan | Rentang tanggal */
.dd-panel.cmp-pp{width:350px}
.cmp-pp-tabs{display:flex;width:100%;margin-bottom:10px}
.cmp-pp-tabs button{flex:1}
.cmp-pp-prev{margin:8px 2px 0;padding:8px 10px;border-radius:9px;background:rgba(91,157,255,.08);
  color:var(--muted);font-size:12.5px;line-height:1.45}
.cmp-pp-prev b{color:var(--text);font-variant-numeric:tabular-nums}
.cmp-pp-prev small{display:block;color:var(--muted2);font-size:11.5px}
.cmp-date{font-family:inherit;padding:6px 9px;min-height:34px;background-image:none;cursor:text}
.cmp-pp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px}
.cmp-pp-row .lab{color:var(--muted);font-size:12.5px;font-weight:600}
.cmp-pp-row .cal-select{width:170px;flex:none}

/* segmented buttons */
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:3px}
.seg button{background:transparent;border:0;color:var(--muted);font-size:13px;font-weight:600;
  padding:7px 14px;border-radius:8px;transition:.18s;min-height:32px}
.seg button:hover{color:var(--text)}
.seg button.active{background:linear-gradient(180deg,#27406b,#1d2f50);color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.3)}

/* ---------- charts ---------- */
.chart-wrap{position:relative;height:300px}
.chart-wrap.tall{height:420px}
/* Baris Musim Penjualan: subtitle memakai seluruh lebar kartu agar tidak
   terbungkus terlalu cepat; ruang vertikal dialihkan ke kedua grafik. */
.season-card .card-sub{max-width:none;text-wrap:pretty}
.season-grid .chart-wrap{height:330px}
.zoom-range-tip{position:absolute;z-index:4;transform:translateX(-50%);pointer-events:none;
  max-width:min(280px,calc(100% - 24px));padding:7px 10px;border:1px solid color-mix(in srgb,var(--accent) 65%,transparent);
  border-radius:8px;background:color-mix(in srgb,var(--card) 94%,var(--accent) 6%);box-shadow:0 8px 22px rgba(0,0,0,.28);
  color:var(--text);font-size:12px;font-weight:650;line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums}
.zoom-range-tip[hidden]{display:none}
:is(.chart-wrap,.brand-chart)[data-empty] canvas{opacity:.12}
:is(.chart-wrap,.brand-chart)[data-empty]::after{content:attr(data-empty);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
  color:var(--muted);font-size:var(--fs-body)}

/* brand card: doughnut BERDAMPINGAN dgn daftar (tinggi kartu jadi sebanding
   kartu Warna; doughnut meregang mengisi tinggi daftar) */
.brand-body{flex:1;display:grid;grid-template-columns:minmax(170px,230px) 1fr;
  gap:10px 22px;align-items:stretch;min-height:0}
.brand-chart{position:relative;min-height:210px}
.brand-list{gap:6px;align-self:center;min-width:0}
.brand-list li{padding:6px 12px}
.brand-list .dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.brand-list .nm{flex:1}
/* nilai dua baris: Rp tebal di atas, share + qty kecil di bawah — tidak lagi
   satu string panjang yang meluber keluar kartu di layar sempit */
.brand-list .bv{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  white-space:nowrap;font-variant-numeric:tabular-nums;flex:0 0 auto}
.brand-list .bv b{font-size:13px;font-weight:700;color:var(--text)}
.brand-list .bv small{font-size:11px;color:var(--muted2)}

/* rank lists */
.trend-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.trend-cols>div{min-width:0} /* kolom boleh menyempit; nama panjang di-ellipsis, bukan meluber */
.trend-label{font-size:var(--fs-sub);font-weight:700;margin-bottom:10px;letter-spacing:.3px}
.trend-label.up{color:var(--up)} .trend-label.down{color:var(--down)}
.rank-list{list-style:none;display:flex;flex-direction:column;gap:7px}
.rank-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-inner);padding:8px 12px;
  font-size:var(--fs-body);animation:fade .4s ease both}
.rank-list .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.rank-list .vy{color:var(--muted);font-size:var(--fs-small);white-space:nowrap;font-variant-numeric:tabular-nums}
.rank-list .badge{font-weight:700;font-size:var(--fs-small);white-space:nowrap;font-variant-numeric:tabular-nums}
.badge.up{color:var(--up)} .badge.down{color:var(--down)}
.rank-list .rk{color:var(--muted2);font-weight:700;width:20px;text-align:right;font-variant-numeric:tabular-nums}

/* ghost button + hint */
.btn-ghost{background:var(--bg2);border:1px solid var(--line);color:var(--muted);
  font-size:13px;font-weight:600;padding:8px 13px;border-radius:11px;transition:.18s;min-height:36px}
.btn-ghost:hover{color:var(--text);border-color:var(--line2)}
.btn-ghost.on{color:var(--accent);border-color:var(--accent2)}
.btn-ghost:disabled{opacity:.4;cursor:default;color:var(--muted2)}
.btn-ghost:disabled:hover{color:var(--muted2);border-color:var(--line)}
/* tombol reset SELALU bernuansa merah penuh agar gampang ditemukan;
   disabled hanya mencegah aksi, tidak lagi mengurangi visibilitas */
.btn-reset,.btn-ghost.btn-reset.on{color:var(--down);border-color:rgba(244,84,76,.38)}
.btn-reset:disabled,.btn-reset:disabled:hover{color:var(--down);border-color:rgba(244,84,76,.38);opacity:1}
.btn-reset:not(:disabled):hover{color:#fff;background:var(--down);border-color:var(--down)}
.btn-primary{background:linear-gradient(180deg,#2f5aa8,#264a8c);border:1px solid #3868b8;color:#fff;
  font-size:13px;font-weight:600;padding:8px 16px;border-radius:10px;transition:.18s;min-height:36px}
.btn-primary:hover{filter:brightness(1.12)}
.hint{color:var(--muted2);font-size:var(--fs-small);margin:-6px 0 12px}

/* ============================================================
   FILTER BAR (global, scopes kartu di bawahnya)
   ============================================================ */
.filterbar{position:sticky;top:10px;z-index:40;
  background:linear-gradient(180deg,var(--glass1),var(--glass2));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line2);border-radius:var(--r-card);
  padding:14px 18px;box-shadow:var(--shadow);animation:rise .55s ease both;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
/* saat menempel (scroll) bar jadi transparan supaya konten di baliknya terlihat */
.filterbar.stuck{
  background:linear-gradient(180deg,var(--glass1s),var(--glass2s));
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-color:var(--glass-line);box-shadow:var(--shadow-hover)}
/* selektor Periode & Kategori tetap solid walau bar transparan */
.filterbar.stuck .dd-btn{background:var(--bg2)}
.filterbar.stuck .dd-btn.filtered{background:rgba(91,157,255,.12)}
.fb-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.fb-title{display:flex;align-items:center;gap:11px;color:var(--accent)}
.fb-title h2{font-size:15.5px;font-weight:650;color:var(--text);letter-spacing:-.2px}
.fb-sub{color:var(--muted);font-size:var(--fs-small);margin-top:1px}
.fb-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fb-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-body)}
.fb-summary b{color:var(--text);font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:7px;background:rgba(91,157,255,.12);
  border:1px solid rgba(91,157,255,.4);color:var(--text);border-radius:999px;
  padding:4px 12px;font-size:var(--fs-small);font-weight:600}
.chip .x{background:none;border:0;color:var(--muted);font-size:13px;line-height:1;padding:2px;border-radius:50%}
.chip .x:hover{color:var(--text)}

/* ---------- dropdown / combobox / date-range ---------- */
.dd{position:relative;display:inline-block}
.dd-btn{display:inline-flex;align-items:center;gap:9px;max-width:300px;
  background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  color:var(--text);font-size:13px;font-weight:600;padding:8px 12px;min-height:36px;transition:.18s}
.dd-btn:hover{border-color:var(--line2)}
.dd-btn .lbl{color:var(--muted2);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px}
.dd-btn .val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.dd-btn .car{color:var(--muted2);font-size:10px;transition:transform .18s}
.dd.open .dd-btn{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(91,157,255,.15)}
.dd.open .dd-btn .car{transform:rotate(180deg)}
.dd-btn.filtered{border-color:rgba(91,157,255,.55);background:rgba(91,157,255,.10)}

.dd-panel{position:absolute;top:calc(100% + 7px);left:0;z-index:60;width:320px;max-width:min(92vw,340px);
  max-height:min(84vh,660px);overflow:auto;
  background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);
  border-radius:13px;box-shadow:var(--shadow-pop);padding:10px;animation:pop .18s cubic-bezier(.2,.9,.3,1.1)}
.dd.right .dd-panel{left:auto;right:0}

/* Batch Bandingkan: daftar luas, pencarian dan konfirmasi tetap terlihat. */
.dd-panel.cmp-products{width:840px;max-width:calc(100vw - 24px);max-height:min(82dvh,740px);
  display:flex;flex-direction:column;gap:10px;padding:18px;overflow:hidden;animation:none}
.cmp-products>strong{font-size:17px}
.cmp-products-context{color:var(--muted);font-size:12.5px;margin:0;line-height:1.4}
.cmp-products .dd-search{margin:0}
.cmp-products .dd-search input{padding-left:12px;min-height:42px}
.cmp-products-actions{display:flex;gap:8px;flex-wrap:wrap}
.cmp-products-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cmp-products-segments{flex:none}
.cmp-products-sort{color:var(--muted2);font-size:12px;margin:0}
.cmp-products .btn{min-height:38px;padding:8px 14px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg2);color:var(--text);font-family:inherit;font-size:13px;font-weight:600}
.cmp-products .btn:not(:disabled):hover{border-color:var(--accent)}
.cmp-products .dd-list{flex:1 1 auto;min-height:80px;max-height:360px;overscroll-behavior:contain}
.cmp-product-row{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid transparent;
  border-radius:8px;cursor:pointer;min-height:54px;flex-shrink:0}
.cmp-product-row:hover{background:rgba(91,157,255,.08)}
.cmp-product-row:has(input:checked){background:rgba(91,157,255,.13);border-color:var(--accent)}
.cmp-product-row input{width:17px;height:17px;flex:none;accent-color:var(--accent);cursor:pointer}
.cmp-product-row:focus-within{outline:2px solid var(--accent);outline-offset:-2px}
.cmp-product-copy{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.cmp-product-avg{flex:none;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-product-copy .nm{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.cmp-product-copy .mt{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cmp-products-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:12px}
.cmp-products-info{font-size:12px;color:var(--muted);flex:1;min-width:130px}
.cmp-products .cmp-products-apply{background:var(--accent2);color:#fff;border-color:var(--accent2)}
.cmp-products button:disabled{opacity:.45;cursor:default}
.cmp-products button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-height:650px){
  .dd-panel.cmp-products{overflow:auto}
  .cmp-products>*{flex-shrink:0}
  .cmp-products .dd-list{flex:none;max-height:180px}
  .cmp-products-footer{position:sticky;bottom:0;background:var(--card);padding:10px 0}
}
@media(max-width:720px){
  .trend-card:has(.mobile-sheet-open){animation:none}
  .mobile-sheet-panel .dd-panel.cmp-products{max-height:65dvh;padding:12px;gap:8px}
  .cmp-products .dd-search input{font-size:16px}
  .cmp-products .btn{min-height:44px}
  .cmp-products-footer{gap:8px}
  .cmp-products-info{flex-basis:100%}
  .cmp-products-toolbar{align-items:stretch}
  .cmp-products-segments{display:flex;width:100%}
  .cmp-products-segments button{flex:1}
  .cmp-product-row{gap:8px}
  .cmp-product-avg{font-size:11px}
  .cmp-products-footer>.cmp-products-actions{width:100%}
  .cmp-products-footer .btn{flex:1}
}

.dd-search{position:relative;margin-bottom:8px}
.dd-search input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  color:var(--text);font-size:13.5px;font-family:inherit;padding:9px 12px 9px 34px;min-height:38px}
.dd-search input::placeholder{color:var(--muted2)}
.dd-search input:focus{outline:none;border-color:var(--accent2)}
.dd-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted2)}

.dd-list{list-style:none;max-height:284px;overflow:auto;display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.dd-list::-webkit-scrollbar{width:8px}
.dd-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
.dd-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  font-size:var(--fs-body);color:var(--text);cursor:pointer;border:0;background:none;text-align:left;width:100%}
.dd-opt .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-opt .mt{color:var(--muted2);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dd-opt:hover,.dd-opt.hl{background:rgba(91,157,255,.10)}
.dd-opt[aria-selected="true"]{background:rgba(91,157,255,.16)}
.dd-opt .ck{width:16px;color:var(--accent);font-weight:700;flex:0 0 auto;text-align:center}
.dd-empty{color:var(--muted2);font-size:var(--fs-small);text-align:center;padding:16px 8px}
/* pemilih produk Tren Pendapatan (multi-pilih): titik = warna garis produk itu
   di chart, jadi pilihan & grafik terbaca sebagai satu hal */
.dd-opt .dd-dot{display:inline-block;width:9px;height:9px;border-radius:50%;
  border:1px solid rgba(0,0,0,.25)}
.dd-opt.off{opacity:.42;cursor:not-allowed}
.dd-opt.off:hover{background:none}
.dd-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  color:var(--muted2);font-size:11.5px}
.dd-foot-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dd-foot-b{background:none;border:0;color:var(--muted);font-size:11.5px;font-weight:600;
  padding:3px 6px;border-radius:6px;flex:0 0 auto;font-family:inherit}
.dd-foot-b:hover{color:var(--down);background:var(--bg2)}

.dd-divider{height:1px;background:var(--line);margin:9px 2px}
.dd-title{color:var(--muted2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  padding:2px 10px 7px}
.dd-apply{display:flex;justify-content:flex-end;gap:8px;margin-top:9px}
.dd-err{color:var(--down);font-size:12px;display:none;margin-top:6px;padding:0 2px}
.dd-err.show{display:block}

/* ---------- dropdown isian (mode field) dan pemilih tanggal-jam (pira_isian.js) ----------
   Mode field = makeDropdown({field:true}) / PIRAIsian.pilih: tombol selebar isian formulir,
   tanpa label di dalam tombol. Panel .dd-fixed = position:fixed dari rect tombol
   (order.js posisiFixed) supaya tidak terpotong modal yang bergulir. Tipografi direset
   karena label formulir (.kt-new-f) memakai huruf kapital kecil. */
.dd-field{display:block;width:100%;font-size:var(--fs-body);font-weight:500;color:var(--text);
  text-transform:none;letter-spacing:0}
.dd-field .dd-btn{width:100%;max-width:none;justify-content:space-between;min-height:36px;padding:7px 10px;
  background:var(--field);border-color:var(--field-line);border-radius:7px;font-size:var(--fs-body);
  font-weight:500;text-transform:none;letter-spacing:0;box-shadow:inset 0 1px 3px rgba(0,0,0,.18);text-align:left}
.dd-field .dd-btn .val{flex:1;min-width:0;max-width:none;text-align:left}
.dd-field .dd-btn .val>span:first-child{margin-right:7px;vertical-align:1px}   /* ikon opsi terpilih (titik warna) */
.dd-field .dd-btn .val.ph{color:var(--muted2)}
.dd-field .dd-btn:disabled{opacity:.55;cursor:not-allowed}
.dd-field .dd-btn:focus-visible{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px var(--field-ring)}
.dd-field.open .dd-btn{border-color:var(--accent2);box-shadow:0 0 0 3px var(--field-ring)}
:root[data-theme="light"] .dd-field .dd-btn{box-shadow:inset 0 1px 2px rgba(23,26,32,.06)}
:root[data-theme="light"] .dd-field.open .dd-btn,
:root[data-theme="light"] .dd-field .dd-btn:focus-visible{box-shadow:0 0 0 3px var(--field-ring)}
.dd-field .dd-panel,.dd-field .dd-panel *{text-transform:none;letter-spacing:0}
.dd-panel.dd-fixed{position:fixed;right:auto;bottom:auto;z-index:1300;max-width:calc(100vw - 16px);transition:none}
.dd-opt.kosong .nm{color:var(--muted2)}

.pdt{position:relative}
.pdt .pdt-btn .val{padding-right:26px}             /* ruang untuk tombol ✕ */
.pdt-ic{flex:none;font-size:13px;line-height:1}
.pdt .pdt-x{position:absolute;right:30px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  min-height:0 !important;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;
  background:none;color:var(--muted2);font-size:12px;line-height:1;padding:0}
.pdt .pdt-x:hover{color:var(--down);background:var(--bg2)}
.pdt .pdt-x[hidden]{display:none}
.dd-panel.pdt-panel{width:auto;max-width:calc(100vw - 16px);padding:12px;font-size:13px;font-weight:500;color:var(--text)}
.pdt-body{display:flex;gap:14px;align-items:stretch}
.pdt-cal{width:266px;flex:none;display:flex;flex-direction:column;gap:8px}
.pdt-bln{flex:1;text-align:center;font-size:13px;font-weight:650}
.pdt-cal .cal-day{cursor:pointer}
.pdt-cal .cal-day.disabled{cursor:not-allowed}
.pdt-cal .cal-day.today:not(.sel){box-shadow:inset 0 0 0 1px var(--accent2);color:var(--accent);font-weight:700}
.pdt-cal .cal-day:focus-visible,.pdt-col button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pdt-time{width:150px;flex:none;display:flex;flex-direction:column;gap:6px}
.pdt-th{color:var(--muted2);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.pdt-time .pdt-in{min-height:34px;padding:6px 9px;font-size:13px;text-align:center;font-variant-numeric:tabular-nums}
.pdt-cols{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:6px;flex:1 1 0;min-height:150px}
.pdt-col{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:8px;
  padding:3px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;overscroll-behavior:contain}
.pdt-col button{flex:none;min-height:28px;border:0;border-radius:6px;background:none;color:var(--text);
  font-size:12.5px;font-family:inherit;font-variant-numeric:tabular-nums;cursor:pointer}
.pdt-col button:hover:not(:disabled):not(.sel){background:rgba(91,157,255,.12)}
.pdt-col button.sel{background:var(--accent2);color:#fff;font-weight:700}
.pdt-col button:disabled{opacity:.3;cursor:not-allowed}
.pdt-foot{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pdt-foot .btn-ghost,.pdt-foot .btn-primary{min-height:32px;padding:5px 11px;font-size:12.5px}
.pdt-sum{flex:1;min-width:0;font-size:12px;color:var(--muted);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.pdt-tgl .pdt-cal{width:266px}
/* layar sempit: kalender di atas, jam (ketik + kolom) berdampingan di bawahnya; tinggi
   sentuh sedikit di bawah 44px global supaya panel muat tanpa banyak menggulir */
@media(max-width:560px){
  .pdt-body{flex-direction:column;gap:10px}
  .pdt-cal{width:auto}
  .pdt-panel .cal-day{height:38px;min-height:38px !important}
  .pdt-time{width:auto;display:grid;grid-template-columns:104px 1fr;grid-template-rows:auto 1fr;gap:4px 8px}
  .pdt-time .pdt-in{grid-column:1;grid-row:2;align-self:start}
  .pdt-cols{grid-column:2;grid-row:1 / span 2;flex:none;height:132px}
  .pdt-col button{min-height:36px !important}
  .pdt-foot{flex-wrap:wrap}
  .pdt-sum{flex-basis:100%;order:-1;text-align:left}
}

/* ============================================================
   PANEL RENTANG TANGGAL — kalender saja (kompak, solid, ringan)
   ============================================================ */
.dd-panel.dr{width:auto;max-width:min(94vw,344px);padding:12px}
.dr-cal{display:flex;flex-direction:column;gap:10px}

.cal-top{display:flex;align-items:center;gap:8px}
.cal-nav{width:32px;height:34px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;color:var(--muted);
  font-size:18px;line-height:1;transition:.15s}
.cal-nav:hover:not(:disabled){color:var(--text);border-color:var(--line2)}
.cal-nav:disabled{opacity:.28;cursor:not-allowed}
.cal-select{background:var(--bg2);border:1px solid var(--line);border-radius:9px;color:var(--text);
  font-family:inherit;font-size:13px;font-weight:600;padding:7px 9px;min-height:34px;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='%238da1ba' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;padding-right:26px}
.cal-select.mo{flex:1 1 auto}
.cal-select.yr{flex:0 0 auto}
.cal-select:focus{outline:none;border-color:var(--accent2)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow span{text-align:center;color:var(--muted2);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-day{height:34px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:8px;color:var(--text);font-size:12.5px;
  font-variant-numeric:tabular-nums;transition:background .12s,color .12s}
.cal-day.empty{visibility:hidden}
.cal-day.disabled{color:var(--muted2);opacity:.32;cursor:not-allowed}
.cal-day:not(.disabled):not(.sel):hover{background:rgba(91,157,255,.16);color:#fff}
.cal-day.in-range{background:rgba(91,157,255,.15);border-radius:0}
.cal-day.sel{background:linear-gradient(180deg,#3b82f6,#2c6bd6);color:#fff;font-weight:700;
  box-shadow:0 2px 9px rgba(59,130,246,.45)}
.cal-day.sel.sel-a{border-top-right-radius:0;border-bottom-right-radius:0}
.cal-day.sel.sel-b{border-top-left-radius:0;border-bottom-left-radius:0}
.cal-day.sel.sel-a.sel-b{border-radius:8px}

/* input manual hari/bulan/tahun */
.dr-manual{display:flex;gap:16px;flex-wrap:wrap;padding-top:2px;border-top:1px solid var(--line);
  margin-top:2px;padding-top:10px}
.dr-mrow{display:flex;flex-direction:column;gap:5px}
.dr-mrow .lab{color:var(--muted2);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.dr-mfields{display:flex;align-items:center;gap:5px}
.dr-mfields input{width:38px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;
  color:var(--text);font-size:13px;font-family:inherit;text-align:center;padding:7px 3px;min-height:34px;
  font-variant-numeric:tabular-nums}
.dr-mfields input.yr{width:56px}
.dr-mfields input:focus{outline:none;border-color:var(--accent2)}
.dr-mfields input::placeholder{color:var(--muted2);font-size:11px}
.dr-mfields .sep{color:var(--muted2);font-size:13px}

.dr-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto}
.dr-foot-l{min-width:0}
.dr-foot .btn-primary{flex:0 0 auto}
.cal-range{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}

@media(max-width:640px){
  .dd-panel.dr{max-width:96vw}
}

/* ---------- modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(5,8,13,.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:80;padding:24px;animation:fade .2s ease}
.modal-overlay[hidden]{display:none}
/* konfirmasi/peringatan (ui.js PIRAConfirm) selalu di atas modal yang memanggilnya */
#confirmModal{z-index:1400}
.modal-card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);
  border-radius:var(--r-card);padding:22px 22px 18px;width:min(620px,94vw);max-height:90vh;overflow:auto;
  box-shadow:var(--shadow-pop);position:relative;animation:pop .24s cubic-bezier(.2,.9,.3,1.2)}
.confirm-card{width:min(440px,94vw)} /* dialog "Yakin?" (PIRAConfirm) lebih ramping */
.modal-close{position:absolute;top:14px;right:14px;background:var(--bg2);border:1px solid var(--line);
  color:var(--muted);width:32px;height:32px;border-radius:9px;font-size:13px;transition:.15s}
.modal-close:hover{color:var(--text);border-color:var(--down)}
.modal-head h3{font-size:18px;font-weight:650}
.modal-head .card-sub{margin-bottom:2px}
.modal-stats{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}
.modal-stats .st{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:10px 13px;flex:1;min-width:130px}
.modal-stats .st .l{color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.modal-stats .st .v{font-size:16.5px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.modal-stats .st .v.up{color:var(--up)} .modal-stats .st .v.down{color:var(--down)}
.modal-stats .st .v.drf{color:var(--gold)}  /* draft SPK: diajukan, belum di-approve */
.modal-chart{position:relative;height:300px;margin-top:10px}

/* ---------- footer ---------- */
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  color:var(--muted2);font-size:var(--fs-small);padding-top:8px;border-top:1px solid var(--line)}
.foot code{color:var(--muted);background:var(--bg2);padding:2px 6px;border-radius:6px}

/* ============================================================
   TAB NAV + STOCK ALERT (halaman 2)
   ============================================================ */
.tabs{display:inline-flex;gap:4px;background:var(--bg2);border:1px solid var(--line);
  border-radius:13px;padding:4px;align-self:center}
.tabs button{background:transparent;border:0;color:var(--muted);font-size:14px;font-weight:650;
  padding:9px 18px;border-radius:10px;transition:.18s;min-height:38px}
.tabs button:hover{color:var(--text)}
.tabs button.active{background:linear-gradient(180deg,#27406b,#1d2f50);color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.3)}
.page{display:flex;flex-direction:column;gap:20px}
.page[hidden]{display:none} /* display:flex mengalahkan UA style [hidden] — wajib eksplisit */

/* header ringkas: judul + pill status + tombol refresh */
.os-head{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:13px 18px}
.os-head h2{font-size:17px;font-weight:650;letter-spacing:-.2px;white-space:nowrap}
.os-stats{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex:1;min-width:0}
.header-inline-meta{display:none}
#pageDash > .os-head > .os-stats{justify-content:center}
#osStats{justify-content:center}
/* info data tanpa kotak — teks polos, jarak dipertahankan lewat padding lama;
   varian .err/.warn tetap berkotak (warna = makna status, bukan hiasan) */
.os-pill{display:inline-flex;align-items:center;gap:5px;background:transparent;border:0;
  color:var(--muted);border-radius:999px;padding:4px 11px;font-size:13px;font-weight:600;white-space:nowrap}
.os-pill b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;max-width:300px}
.os-pill.err{color:#ff9d97;border:1px solid rgba(244,84,76,.4);background:rgba(244,84,76,.10);white-space:normal}
.os-pill.warn{color:var(--gold);border:1px solid rgba(245,196,81,.45);background:rgba(245,196,81,.10)}
.os-pill:empty{display:none} /* pill kosong (mis. genPill sebelum data.js termuat) tidak digambar */
.os-head-r{margin-left:auto;display:flex;align-items:center;gap:10px}
/* bar info tab 1: kumpulan pill di dalam #periodSub ikut flex os-stats */
.dash-pills{display:contents}
#segToggle button.active{background:linear-gradient(180deg,#2c6b46,#1d4f33);color:#fff}
.os-refresh-msg{color:var(--muted2);font-size:var(--fs-small);max-width:360px;text-align:right}
.os-refresh-msg.ok{color:var(--up)}
.os-refresh-msg.warn{color:var(--gold)}
.os-refresh-msg.err{color:var(--down)}
/* spinner layar tunggu di popup konfirmasi (mode PIRAProgress, ui.js) —
   menggantikan spinner lama di tombol ↻ ketiga tab */
.cfm-spin{width:36px;height:36px;margin:16px auto 6px;border-radius:50%;
  border:3px solid var(--line2);border-top-color:var(--accent);
  animation:rot .8s linear infinite}
.cfm-spin[hidden]{display:none}
@keyframes rot{to{transform:rotate(360deg)}}

/* dialog Upload LIST ECOMMERCE (list_upload.js) */
.lu-card{width:min(780px,95vw)}
.lu-step[hidden]{display:none}
.lu-active{color:var(--muted);font-size:var(--fs-small);margin:14px 0 10px}
.lu-active b{color:var(--text);font-weight:650}
.lu-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 16px;
  border:1.5px dashed var(--line2);border-radius:var(--r-inner);background:var(--bg2);
  cursor:pointer;text-align:center;transition:.15s}
.lu-drop:hover,.lu-drop.over,.lu-drop:focus-within{border-color:var(--accent);background:var(--field-ring)}
.lu-drop input{position:absolute;width:1px;height:1px;opacity:0}
.lu-drop-ic{font-size:24px;color:var(--accent);line-height:1}
.lu-drop-t{font-weight:650;color:var(--text)}
.lu-drop-s{color:var(--muted2);font-size:var(--fs-small)}
.lu-rules{margin-top:14px;font-size:var(--fs-small);color:var(--muted)}
.lu-rules summary{cursor:pointer;font-weight:650;color:var(--text);margin-bottom:6px}
.lu-rules ul{margin:0;padding-left:18px;display:grid;gap:5px;line-height:1.45}
.lu-rules b{color:var(--text);font-weight:650}
.lu-busy-t{text-align:center;font-weight:650;margin-top:6px}
.lu-busy-s{text-align:center;color:var(--muted2);font-size:var(--fs-small);min-height:1.2em}
.lu-bar{height:6px;border-radius:3px;background:var(--bg2);border:1px solid var(--line);
  overflow:hidden;margin:12px auto 8px;max-width:420px}
.lu-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.lu-verdict{display:flex;flex-direction:column;gap:2px;margin:14px 0 12px;padding:11px 14px;
  border-radius:var(--r-inner);border:1px solid var(--line)}
.lu-verdict span{color:var(--muted);font-size:var(--fs-small);word-break:break-word}
.lu-verdict.ok{border-color:var(--up);background:var(--up-soft)}
.lu-verdict.ok b{color:var(--up)}
.lu-verdict.warn{border-color:var(--gold);background:rgba(245,196,81,.10)}
.lu-verdict.warn b{color:var(--gold)}
.lu-verdict.fail{border-color:var(--down);background:var(--down-soft)}
.lu-verdict.fail b{color:var(--down)}
.lu-checks{display:grid;gap:6px}
.lu-check{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:9px;
  background:var(--bg2);border:1px solid var(--line);font-size:var(--fs-small)}
.lu-check>i{flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-weight:800;font-size:11px;margin-top:1px}
.lu-check.ok>i{background:var(--up-soft);color:var(--up)}
.lu-check.warn>i{background:rgba(245,196,81,.16);color:var(--gold)}
.lu-check.fail>i{background:var(--down-soft);color:var(--down)}
.lu-check.fail{border-color:var(--down)}
.lu-check>div{min-width:0;flex:1}
.lu-check b{font-weight:650;color:var(--text)}
.lu-check p{color:var(--muted);margin-top:2px;line-height:1.45}
.lu-check details,.lu-chg{margin-top:4px}
.lu-check summary,.lu-chg summary{cursor:pointer;color:var(--accent);font-weight:600}
.lu-check ul,.lu-chg ul{margin:6px 0 0;padding-left:18px;max-height:200px;overflow:auto;
  color:var(--muted);line-height:1.5;word-break:break-word}
.lu-chg.danger summary,.lu-chg.danger summary b{color:var(--down)}
.lu-chg.danger{border-color:var(--down)}
.lu-chg.danger ul{border-left:3px solid var(--down);padding-left:15px}
.lu-kosong{color:var(--down);font-weight:600}
/* Anggap kosong per kolom (laporan impor penuh) */
.lu-kos{display:inline-flex;gap:7px;align-items:center;margin-top:6px;padding:4px 10px;border:1px solid var(--line);
  border-radius:7px;background:var(--bg);color:var(--text);font-weight:600;cursor:pointer}
.lu-kos input{width:15px;height:15px;margin:0;accent-color:var(--up)}
.lu-kos-all{display:flex;justify-content:flex-end}
.lu-yakin{display:flex;gap:10px;align-items:flex-start;margin:10px 0 2px;padding:10px 12px;border:1px solid var(--down);
  border-radius:9px;background:var(--down-soft);font-size:var(--fs-small);line-height:1.45;cursor:pointer}
.lu-yakin[hidden]{display:none}
.lu-yakin input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--down)}
.lu-yakin b{color:var(--down)}
.kt-num-hint{display:block;flex-basis:100%;margin-top:3px;color:var(--muted2);font-size:11px}
.lu-more{color:var(--muted2);list-style:none;margin-left:-18px}
.lu-h{font-size:14px;font-weight:650;margin:18px 0 8px}
.lu-table-wrap{overflow-x:auto}
.lu-table{width:100%;border-collapse:collapse;font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.lu-table th,.lu-table td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.lu-table th:first-child,.lu-table td:first-child{text-align:left;white-space:normal}
.lu-table th{color:var(--muted2);font-weight:650;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
.lu-table td.up{color:var(--up)}
.lu-table td.down{color:var(--down)}
.lu-chg{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg2);
  font-size:var(--fs-small);margin-bottom:6px}
.lu-chg summary{color:var(--text)}
.lu-chg summary b{color:var(--accent)}
.lu-chg p{color:var(--muted);margin-top:4px}
.lu-actions{position:sticky;bottom:-18px;background:var(--card);padding:12px 0 2px;margin-top:14px;
  border-top:1px solid var(--line)}
.lu-actions [hidden]{display:none}
.lu-actions .btn-primary:disabled{opacity:.45;cursor:not-allowed;filter:none}

/* kartu ringkasan alert */
.os-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.os-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;
  align-items:baseline;column-gap:8px;row-gap:0;text-align:left;
  background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);
  border-radius:var(--r-card);padding:10px 14px;box-shadow:var(--shadow);cursor:pointer;
  transition:transform .15s,border-color .15s;animation:rise .5s ease both;position:relative;overflow:hidden}
.os-card .ic{grid-column:2;grid-row:2;justify-self:end;align-self:baseline;font-size:15px;line-height:1}
.os-card .n{grid-column:1/-1;grid-row:1;font-size:22px;line-height:1.3;font-weight:700;
  letter-spacing:-.5px;color:var(--text);font-variant-numeric:tabular-nums}
.os-card .l{grid-column:1;grid-row:2;font-size:11.5px;line-height:1.35;font-weight:600;
  color:var(--muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.os-card:hover{transform:translateY(-2px);border-color:var(--line2)}
.os-card.on{border-color:var(--bar,var(--accent));box-shadow:0 0 0 3px rgba(91,157,255,.13),var(--shadow)}
.os-card.a-oos{--bar:#f4544c}.os-card.a-risk{--bar:#fb923c}.os-card.a-due{--bar:#f5c451}
.os-card.a-spike{--bar:#22c55e}.os-card.a-drop{--bar:#38bdf8}.os-card.a-watch{--bar:#a78bfa}
.os-card.a-new{--bar:#2dd4bf}

/* SNAPSHOT BULAN LALU (order.js): warna --snap menandai angka beku bulan
   lalu supaya tidak tertukar dgn data live — tombol aktif, banner, tepi
   kiri baris, dan nilai Rata 3 bln. SPK disembunyikan; Panel/Import
   melebar 2 kolom agar grid 6/3/2 kolom tetap penuh. */
.os-snap-dd{flex:0 0 auto}
.os-snap-btn .ric{font-size:13px}
.os-snap-btn .val{max-width:130px}
.os-snap-dd .dd-panel{width:300px}
.os-snap-btn.on{color:var(--snap);border-color:var(--snap);background:var(--snap-soft)}
.os-snap-c{color:var(--snap)}
.os-pill.os-snap-c b{color:var(--snap)}
.os-snap-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;
  border:1px solid var(--snap);border-radius:var(--r-card);background:var(--snap-soft);
  font-size:var(--fs-small);line-height:1.5;color:var(--muted)}
.os-snap-banner[hidden]{display:none}
.os-snap-banner .tx{flex:1 1 420px;min-width:0}
.os-snap-banner .tx b{color:var(--text)}
.os-snap-banner .tx>b:first-child{color:var(--snap)}
.os-snap-banner .btn-ghost{flex:0 0 auto;color:var(--text)}
.os-snapmode .os-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.os-snapmode #osSpkMount{display:none}
.os-snapmode #osFilterBar .os-toolbar>#osSourceMount{grid-column:span 2}
.os-row.os-snap-row{border-left:3px solid var(--snap)}
.os-snap-avg .l,.os-snap-avg .v,.os-snap-avg .v small{color:var(--snap)}

/* toolbar generik (dipakai CHECKLIST TIM) */
.os-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.os-toolbar .dd-btn{max-width:240px}
/* STOCK ALERT — pencarian, Sort, dan Reset di baris pertama; seluruh filter
   selalu terlihat di bawahnya. Menu Sort memakai .dd-panel absolut supaya
   membuka pilihan tidak mendorong filter maupun daftar hasil. */
.os-bar-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.os-bar-row .os-search{flex:1 1 240px;min-width:200px}
.os-bar-row .btn-reset{flex:0 0 auto;min-height:38px}
.os-filter-panel{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.os-sort-dd{flex:0 0 auto}
.os-sort-dd .dd-btn{min-height:38px;white-space:nowrap}
.os-sort-dd .dd-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;color:var(--muted2);flex:0 0 auto}
.os-sort-dd .dd-btn .lbl{color:#fff;font-weight:700}
:root[data-theme="light"] .os-sort-dd .dd-btn .lbl{color:var(--text)}
.os-sort-dd .dd-btn .val{color:var(--muted);max-width:150px}
.os-sort-dd .dd-btn.filtered .val{color:var(--text)}
.os-sort-dd .dd-panel{left:auto;right:0;width:250px}
.os-sort-dd .dd-opt{min-height:38px}
.os-sort-dd .dd-list{max-height:min(364px,60vh)}
.os-sort-dd .os-sort-icon{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.os-sort-dd .dd-opt[aria-selected="true"] .os-sort-icon{color:var(--accent)}
#osFilterBar .os-toolbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0}
#osFilterBar .os-toolbar>div{min-width:0}
#osFilterBar .os-toolbar .dd,
#osFilterBar .os-toolbar .dd-btn{width:100%;max-width:none}
#osFilterBar .os-toolbar .dd-btn{justify-content:space-between}
#osFilterBar .os-toolbar .dd-btn .lbl,
#osFilterBar .os-toolbar .dd-btn .car{flex:0 0 auto}
#osFilterBar .os-toolbar .dd-btn .lbl{color:#fff;font-weight:700}
:root[data-theme="light"] #osFilterBar .os-toolbar .dd-btn .lbl{color:var(--text)}
#osFilterBar .os-toolbar .dd-btn .val{
  flex:1 1 auto;min-width:0;max-width:none;text-align:right;color:var(--muted)}
.os-alert-row{display:flex;align-items:flex-start;gap:10px;margin-top:10px}
.os-alert-row .os-chips{
  display:flex;gap:10px;
  flex:1;align-items:center;width:100%;min-width:0;margin-bottom:0}
.os-alert-row .os-chip{
  flex:1 1 0;width:auto;min-width:0;min-height:36px;
  justify-content:center;padding:6px 8px;
  border-radius:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-filterbar .os-chips{margin-bottom:0}
/* kontrol tetap solid walau bar transparan saat menempel */
.filterbar.stuck :is(.os-search input,.seg,.os-chip:not(.on),.btn-ghost){background:var(--bg2)}
.os-search{position:relative;flex:1;min-width:230px}
.os-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted2)}
.os-search input{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  color:var(--text);font-size:13.5px;font-family:inherit;padding:9px 13px 9px 36px;min-height:38px}
.os-search input::placeholder{color:var(--muted2)}
.os-search input:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(91,157,255,.13)}

/* chips filter alert */
.os-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.os-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--line);
  color:var(--muted);border-radius:999px;padding:5px 12px;font-size:var(--fs-small);font-weight:600;transition:.15s}
.os-chip b{color:var(--text);font-variant-numeric:tabular-nums}
.os-chip:hover{color:var(--text);border-color:var(--line2)}
.os-chip.on{background:rgba(91,157,255,.13);border-color:rgba(91,157,255,.55);color:var(--text)}
.os-count{color:var(--muted2);font-size:var(--fs-small);margin-bottom:10px}
.os-count b{color:var(--muted);font-variant-numeric:tabular-nums}

/* daftar SKU — jarak vertikal sengaja lega (antar-kartu + di dalam kartu)
   agar daftar panjang tetap enak dipindai */
.os-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.os-row{display:flex;align-items:center;gap:16px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r-inner);padding:16px;cursor:pointer;transition:border-color .15s,transform .15s}
.os-row:hover{border-color:var(--line2);transform:translateX(2px)}
.os-row.disc{opacity:.55}
.os-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.os-name{font-size:var(--fs-body);font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-warna{color:var(--muted);font-weight:500}
.os-meta{color:var(--muted2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-meta code{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--muted)}
.os-badges{display:flex;gap:6px;flex-wrap:wrap}
.os-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;border-radius:6px;
  padding:3.5px 8px;border:1px solid transparent;letter-spacing:.2px;white-space:nowrap}
.os-badge.s-run{background:rgba(34,197,94,.10);color:#7fdba0;border-color:rgba(34,197,94,.3)}
.os-badge.s-new{background:rgba(91,157,255,.12);color:#aecbff;border-color:rgba(91,157,255,.35)}
.os-badge.s-disc{background:rgba(141,161,186,.10);color:var(--muted2);border-color:var(--line)}
/* NO STATUS = kolom STATUS LIST ECOMMERCE kosong (nonaktif dari alert) */
.os-badge.s-none{background:transparent;color:var(--muted2);border-color:var(--line);border-style:dashed}
/* KATEGORI 1 = IMPORT di REKAP — penanda produk import (katalog REKAP 2026-07-28) */
.os-badge.s-imp{background:rgba(232,121,249,.12);color:#eeaaf5;border-color:rgba(232,121,249,.35)}
.os-badge.s-3pl{background:rgba(45,212,191,.12);color:#5eead4;border-color:rgba(45,212,191,.4)}
:root[data-theme="light"] .os-badge.s-3pl{background:#ccfbf1;color:#115e59;border-color:#0f766e}
.os-3pl-note{display:block;margin-top:7px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.os-badge.s-rmk{background:var(--bg);color:var(--muted);border-color:var(--line)}
/* NO REMARK = kolom P belum diisi tim; sengaja lebih redup dari kelas moving asli */
.os-badge.s-rmk.s-norm{opacity:.6;border-style:dashed}
.os-badge.a-oos{background:rgba(244,84,76,.13);color:#ff9d97;border-color:rgba(244,84,76,.4)}
.os-badge.a-risk{background:rgba(251,146,60,.13);color:#ffc39a;border-color:rgba(251,146,60,.4)}
.os-badge.a-due{background:rgba(245,196,81,.12);color:#f7d98d;border-color:rgba(245,196,81,.4)}
.os-badge.a-spike{background:rgba(34,197,94,.12);color:#7fdba0;border-color:rgba(34,197,94,.35)}
.os-badge.a-drop{background:rgba(56,189,248,.12);color:#8fd6f9;border-color:rgba(56,189,248,.35)}
.os-badge.a-watch{background:rgba(167,139,250,.13);color:#c8b8fc;border-color:rgba(167,139,250,.4)}
.os-badge.a-new{background:rgba(45,212,191,.12);color:#8fe6d9;border-color:rgba(45,212,191,.4)}

.os-stat{display:flex;flex-direction:column;gap:2px;min-width:82px;text-align:right;flex:0 0 auto}
/* Baris STOCK ALERT tanpa bar buffer (2026-07-29-2): kolom angka dilonggarkan
   dan mengisi ruang bekas bar; .os-main memakan sisa lebar sehingga blok angka
   tetap rata kanan. Sengaja DIBATASI ke .os-row — tab STATUS PRODUK (.sp-row)
   memakai .os-stat yang sama dan tidak boleh ikut melebar.
   Kolom di baris list berhenti di JADWAL (week); tanggal finish hanya di modal
   insight + notifikasi/email (keputusan user 2026-07-29-3). */
.os-row .os-stat{min-width:96px}
/* kolom JADWAL memuat "WEEK 35 - 100" / "DRAFT SEP - 100" -> perlu lebih lebar */
.os-row .os-stat.os-jadwal{min-width:132px}
.os-stat .l{color:var(--muted2);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.os-stat .v{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums}
.os-stat .v small{color:var(--muted2);font-weight:500;font-size:11px}
.os-stat .v.down{color:var(--down)}
.os-stat .v.up{color:var(--up)}
.os-stat .v.acc{color:var(--text)}
.os-stat .v.drf{color:var(--gold)}          /* draft SPK: diajukan, belum disetujui */
/* badge "lewat": week jadwal sudah terlewati tetapi SPK masih Open di ERP */
.os-late{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;font-size:10px;font-weight:700;
  line-height:16px;vertical-align:middle;letter-spacing:.02em;color:var(--down);
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.45)}
.oc-pill.late{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.45);color:var(--down)}

/* bar "menuju titik order" (.os-bar*) dilepas seluruhnya 2026-07-29-4 —
   digantikan 3 kartu tindakan di modal; buffer tetap tampil sbg kartu angka */
.os-chev{color:var(--muted2);font-size:18px;flex:0 0 auto}
.os-empty{color:var(--muted);text-align:center;padding:30px 10px;font-size:var(--fs-body)}
.os-morewrap{display:flex;justify-content:center;margin-top:14px}

/* modal order */
.modal-card.modal-wide{width:min(720px,94vw)}

/* ---- modal insight SKU (STOCK ALERT): kartu ekstra lebar, dua kolom ----
   kepala membentang penuh (judul+sub kiri, badge status besar di kanan-atas);
   kolom kiri = 6 kartu insight bertumpuk; kolom kanan = 3 kartu tindakan
   (order rekomendasi · jadwal terdekat · finish) + baris editor tren + grafik
   + legenda; struk hitung membentang penuh di bawah. */
#osModal .modal-card{width:min(1140px,96vw);display:grid;
  grid-template-columns:280px minmax(0,1fr);column-gap:24px;align-content:start}
/* kepala: kiri = judul, baris identitas, badge status/alert; kanan = kontrol
   push (tombol + status) di tengah vertikal; garis pemisah di bawah. Tombol
   tutup di luar kartu pada layar lebar (.side-out, placeRail di order.js) —
   selain itu kepala menyisakan ruang utk tombol di pojok. */
#osModal .modal-head{grid-column:1/-1;display:grid;column-gap:24px;
  grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t p" "s p" "b p";
  padding:0 40px 16px 0;margin-bottom:6px;border-bottom:1px solid var(--line)}
#osModal .os-modal-wrap.side-out .modal-head{padding-right:0}
#osModal .modal-head h3{grid-area:t;font-size:19px;line-height:1.3}
#osModal .modal-head .card-sub{grid-area:s;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:8px 0 0;max-width:none}
#osModal .os-badges{grid-area:b;align-self:start;justify-self:start;margin-top:12px}
#osModalSub .os-art{font-size:11.5px;padding:2px 8px;margin-right:10px;border:1px solid var(--line2);
  border-radius:6px;background:var(--bg2);color:var(--text)}
#osModalSub .os-meta-i{color:var(--muted);font-size:12.5px;white-space:nowrap}
#osModalSub .os-meta-i+.os-meta-i::before{content:"·";margin:0 8px;color:var(--muted2)}
#osModalSub .os-meta-i .lbl{color:var(--muted2);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
#osModalSub .os-3pl-note{flex-basis:100%}
#osModal .os-badge{font-size:12.5px;padding:5px 11px;border-radius:8px;gap:6px}
#osModalStats{grid-column:1;grid-row:2/span 4;display:flex;flex-direction:column;
  flex-wrap:nowrap;gap:10px;margin:10px 0 0;align-self:start}
#osModalStats .st{flex:0 0 auto;min-width:0}
/* 3 kartu tindakan sejajar, ukuran & gaya sama dgn kartu kolom kiri (.st) */
#osModalTop{grid-column:2;grid-row:2;margin:10px 0 0;gap:10px}
#osModalTop .st{flex:1 1 0;min-width:0}
#osModal .os-tools-row{grid-column:2;grid-row:3;display:flex;align-items:center;
  justify-content:space-between;gap:8px 18px;flex-wrap:wrap}
#osModal .modal-chart{grid-column:2;grid-row:4}
#osModalLegend{grid-column:2;grid-row:5}
#osModalSop{grid-column:1/-1;grid-row:6}
@media (max-width:900px){ /* layar sempit: kembali satu kolom seperti semula */
  #osModal .modal-card{display:block;width:min(720px,94vw)}
  #osModal .modal-head{display:block;padding-right:34px}
  #osModal .os-badges{margin-top:8px}
  #osModalStats{flex-direction:row;flex-wrap:wrap;margin:16px 0 6px}
  #osModalStats .st{flex:1;min-width:130px}
  #osModalTop .st{flex:1 1 130px;min-width:130px}
}
.os-sop{color:var(--muted2);font-size:var(--fs-small);margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
/* rincian "struk" cara hitung rekomendasi order di modal SKU */
.os-calc{margin:8px 0 4px;border:1px solid var(--line);border-radius:var(--r-inner);
  background:var(--bg2);padding:12px 14px 11px}
.os-calc-title{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  color:var(--text);font-weight:650;font-size:var(--fs-small);margin-bottom:7px}
.oc-formula{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:2px 8px;
  color:var(--muted);font-size:11px;font-weight:500;white-space:nowrap;cursor:help}
.oc-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:5px 0;border-bottom:1px dashed var(--line);font-size:var(--fs-small);color:var(--muted)}
.oc-row .oc-l b{color:var(--text);font-weight:600}
.oc-row .oc-val{color:var(--text);font-weight:650;font-variant-numeric:tabular-nums;
  white-space:nowrap;flex:0 0 auto}
.oc-row .oc-val small,.oc-total b small{color:var(--muted2);font-weight:500}
.oc-pill{display:inline-block;background:rgba(245,196,81,.12);border:1px solid rgba(245,196,81,.45);
  border-radius:99px;padding:0 7px;font-size:10.5px;font-weight:600;color:var(--gold);cursor:help}
.oc-pill.ok{background:var(--up-soft);border-color:rgba(34,197,94,.45);color:var(--up)}
.oc-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:9px;
  padding:8px 11px;border-radius:7px;background:rgba(91,157,255,.1);border:1px solid rgba(91,157,255,.3)}
.oc-total span{color:var(--text);font-weight:650;font-size:var(--fs-small)}
.oc-total b{color:var(--accent);font-size:15px;font-variant-numeric:tabular-nums}
.oc-total.zero{background:transparent;border-style:dashed;border-color:var(--line2)}
.oc-total.zero b{color:var(--muted);font-size:var(--fs-small)}
/* blok JADWAL PRODUKSI di dalam struk dilepas 2026-07-29-4 — angkanya kini
   jadi 2 dari 3 kartu tindakan di atas grafik (tidak ditampilkan dua kali) */
.oc-after{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-top:9px}
.oca{display:flex;flex-direction:column;gap:1px;background:var(--bg);border:1px solid var(--line);
  border-radius:7px;padding:6px 11px;font-size:11.5px;color:var(--muted)}
.oca b{font-size:14px;color:var(--text);font-variant-numeric:tabular-nums}
.oca small{color:var(--muted2)}
.oca.up b{color:var(--up)} .oca.down b{color:var(--down)}
.oca-arrow{align-self:center;color:var(--muted2);font-size:11px;max-width:150px;text-align:center}
.os-calc .up{color:var(--up)} .os-calc .down{color:var(--down)}
.os-calc-warn{background:var(--down-soft);border:1px solid rgba(244,84,76,.35);border-radius:7px;
  padding:7px 11px;margin-bottom:8px;color:var(--text);font-size:var(--fs-small)}
.os-calc-note{color:var(--muted2);font-size:11.5px;margin:9px 2px 0;line-height:1.55}
/* Seluruh SPK OPEN dan draft tetap terbaca dalam modal, termasuk week lewat. */
.os-spk-section{margin:16px 0 6px;border:1px solid var(--line);border-radius:var(--r-inner);
  background:var(--bg2);padding:12px 14px}
.os-spk-section h4{font-size:var(--fs-small);color:var(--text);margin:0 0 9px;font-weight:650}
.os-spk-scroll{overflow-x:auto;max-width:100%}
.os-spk-table{width:100%;border-collapse:collapse;font-size:var(--fs-small);text-align:left}
.os-spk-table th{color:var(--muted);font-weight:600;border-bottom:1px solid var(--line2);
  padding:7px 10px 8px 0;white-space:nowrap}
.os-spk-table td{color:var(--text);border-bottom:1px solid var(--line);padding:9px 10px 9px 0;
  vertical-align:top;line-height:1.4}
.os-spk-table tr:last-child td{border-bottom:0}
.os-spk-table th:last-child,.os-spk-table td:last-child{padding-right:0}
.os-spk-table strong{font-weight:650;white-space:nowrap}
.os-spk-qty{font-variant-numeric:tabular-nums;white-space:nowrap}
.os-spk-state{display:inline-block;border-radius:5px;padding:2px 6px;font-size:11px;
  font-weight:650;white-space:nowrap}
.os-spk-state.open{background:var(--up-soft);color:var(--up)}
.os-spk-state.late{background:var(--down-soft);color:var(--down)}
.os-spk-state.draft{background:rgba(245,196,81,.12);color:var(--gold)}
/* BTP masuk: satu tbody per SPK; SPK yang masuk gudang berkali-kali (cicilan)
   bergaris kiri teal = warna penanda hijau grafik modal (C.rst). */
.os-btp-table{--btp:#14b8a6}
:root[data-theme="light"] .os-btp-table{--btp:#0d9488}
.os-btp-table tbody.os-btp-grp + tbody.os-btp-grp tr:first-child td{border-top:1px solid var(--line2)}
.os-btp-table tbody.multi td:first-child{box-shadow:inset 3px 0 0 var(--btp);padding-left:10px}
.os-btp-sub{color:var(--muted2);font-size:11px;font-weight:500;white-space:nowrap}
.os-btp-ke{display:inline-block;border-radius:5px;padding:2px 6px;font-size:11px;font-weight:650;
  white-space:nowrap;color:var(--btp);background:color-mix(in srgb,var(--btp) 14%,transparent)}
@media (max-width:600px){
  .os-spk-section{padding:11px}
  .os-spk-table,.os-spk-table tbody{display:block;width:100%}
  .os-spk-table thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .os-spk-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .os-spk-table tr:last-child{border-bottom:0}
  .os-spk-table td{border:0;padding:0;min-width:0;overflow-wrap:anywhere}
  .os-spk-table td:nth-child(2),.os-spk-table td:nth-child(4){text-align:right}
  .os-spk-table td:nth-child(5){grid-column:1/-1;color:var(--muted2)}
  .os-spk-table td:nth-child(3)::before,.os-spk-table td:nth-child(4)::before{
    display:block;color:var(--muted);font-size:11px}
  .os-spk-table td:nth-child(3)::before{content:"Finish"}
  .os-spk-table td:nth-child(4)::before{content:"Qty"}
  .os-spk-table td:nth-child(5)::before{content:"No SPK / alokasi: ";color:var(--muted)}
  /* BTP masuk (4 kolom): tanggal | set, lalu SPK | cicilan tanpa label Finish/Qty */
  .os-btp-table td:nth-child(3)::before,.os-btp-table td:nth-child(4)::before{content:none}
  .os-btp-table tbody.multi tr{box-shadow:inset 3px 0 0 var(--btp);padding-left:10px}
  .os-btp-table tbody.multi td:first-child{box-shadow:none;padding-left:0}
  .os-btp-table tbody.os-btp-grp + tbody.os-btp-grp tr:first-child td{border-top:0}
  .os-btp-table tbody.os-btp-grp + tbody.os-btp-grp tr:first-child{border-top:1px solid var(--line2)}
}
#osModalBadges{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
/* legenda chart modal SKU: jendela avg3 (emas) · bulan berjalan · garis rata */
/* tampilan rata kustom (modal SKU): rail mode Asli / Kustom 1 / Kustom 2 +
   baris alat Edit/Simpan/Hapus. --vc = warna tampilan, dipakai rail, tag,
   titik penanda kartu & pill struk — senada bar grafik (C.vw di order.js). */
#osModal .v0{--vc:var(--gold)}
#osModal .v1{--vc:#a78bfa}
#osModal .v2{--vc:#f472b6}
:root[data-theme="light"] #osModal .v1{--vc:#7c3aed}
:root[data-theme="light"] #osModal .v2{--vc:#db2777}
#osModal .os-modal-wrap{position:relative;display:flex;max-width:100%}
/* kolom samping di luar kartu (layar lebar): tombol tutup di atas, rail di bawah */
.os-side{position:absolute;left:calc(100% + 12px);top:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.os-side[hidden]{display:none}
.os-side .modal-close{position:static;width:40px;height:40px;border-radius:50%;font-size:14px;
  background:linear-gradient(180deg,var(--card2),var(--card));border-color:var(--line2);box-shadow:var(--shadow-pop);
  animation:pop .24s cubic-bezier(.2,.9,.3,1.2)}
.os-side .os-vrail{position:static}
.os-vrail{position:absolute;left:calc(100% + 12px);top:0;display:flex;flex-direction:column;align-items:center;
  gap:9px;padding:10px 8px 12px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,var(--card2),var(--card));box-shadow:var(--shadow-pop);
  animation:pop .24s cubic-bezier(.2,.9,.3,1.2)}
.os-vrail[hidden]{display:none}
.os-vrail-h{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.os-vrail-sep{width:26px;height:1px;background:var(--line)}
.os-vbtn{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:0;
  color:var(--muted);cursor:pointer;font:inherit}
.os-vbtn .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line2);
  background:var(--bg2);font-size:15px;font-weight:700;color:var(--muted);transition:.15s}
.os-vbtn .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.os-vbtn .lb{font-size:10px;font-weight:600;white-space:nowrap}
.os-vbtn:hover .ic{border-color:var(--vc);color:var(--vc)}
.os-vbtn.on .ic{border-color:var(--vc);background:var(--vc);color:#15161a}
:root[data-theme="light"] .os-vbtn.on .ic{color:#fff}
.os-vbtn.on .lb{color:var(--text)}
.os-vbtn.empty .ic{border-style:dashed;background:transparent;font-size:18px;font-weight:500}
.os-vbtn.empty .lb{color:var(--muted2)}
.os-vbtn.editing .ic{outline:2px dashed var(--vc);outline-offset:3px}
.os-vbtn:focus-visible{outline:none}
.os-vbtn:focus-visible .ic{outline:2px solid var(--accent);outline-offset:3px}
/* layar sempit: rail mendatar di baris alat atas grafik */
.os-vrail.inline{position:static;flex-direction:row;gap:8px;padding:5px 10px 5px 12px;margin:10px 2px 2px;
  border-radius:99px;box-shadow:none;animation:none;background:var(--bg2)}
.os-vrail.inline .os-vbtn{flex-direction:row;gap:5px}
.os-vrail.inline .ic{width:28px;height:28px;font-size:12px;border-width:1.5px}
.os-vrail.inline .ic svg{width:14px;height:14px}
.os-vrail.inline .os-vrail-sep{width:1px;height:20px}
.os-vw-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;
  border:1px solid var(--vc);color:var(--vc);background:color-mix(in srgb,var(--vc) 12%,transparent)}
.os-vw-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--vc);margin-left:6px;vertical-align:1px}
#osModal .os-calc.custom{border-color:color-mix(in srgb,var(--vc) 55%,var(--line))}
.oc-pill.vw{color:var(--vc);border-color:var(--vc);background:color-mix(in srgb,var(--vc) 12%,transparent);margin-left:6px;cursor:default}
.os-trend-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 2px 2px}
.os-trend-tools .btn-ghost{min-height:30px;padding:5px 13px;font-size:12px}
.os-tred-hint{font-size:12px;color:var(--muted)}
.os-tred-hint.on{color:var(--accent)}
.os-tred-hint em{font-style:normal;color:var(--down)}
.os-chart-legend{display:flex;flex-wrap:wrap;gap:5px 16px;margin:8px 2px 0;font-size:11.5px;color:var(--muted)}
.os-chart-legend span{display:inline-flex;align-items:center;gap:6px}
.os-chart-legend i{width:12px;height:12px;border-radius:3px;flex:none}
.os-chart-legend i.dash{width:16px;height:0;border-radius:0;border-top:2px dashed;background:none}

/* ============================================================
   HEADER: akun / admin (kanan) + LOGIN + TOAST
   (backend & auth CHECKLIST TIM; tampilan mengikuti dashboard)
   ============================================================ */
.ubox{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:4px 6px 4px 5px}
.uavatar{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#27406b,#1d2f50);color:#fff;font-size:12.5px;font-weight:700;flex:0 0 auto}
.uname{color:var(--text);font-size:13px;font-weight:650;max-width:130px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.btn-logout{min-height:28px;padding:4px 10px;border-radius:999px;font-size:12px}
.btn-logout:hover{color:var(--down);border-color:var(--down)}
.hidden{display:none !important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important}

/* ---------- tombol ikon topbar (lonceng notifikasi + tema) ---------- */
.btn-icon{position:relative;width:38px;height:38px;padding:0;display:inline-flex;
  align-items:center;justify-content:center;border-radius:11px;flex:0 0 auto}
.btn-icon svg{display:block}
.nbox{position:relative}
.nbadge[hidden]{display:none}
/* titik merah polos (tanpa angka) — cukup penanda ADA yang belum dibaca */
.nbadge{position:absolute;top:-3px;right:-3px;width:11px;height:11px;display:inline-block;
  background:var(--down);border-radius:50%;border:2px solid var(--bg)}

/* banner reload lintas-tab: data SALES INSIGHT diperbarui (ui.js) */
/* tumpukan banner: keduanya (Order info + reload penjualan) bisa tampil
   bersamaan, ditumpuk ke atas dari dasar layar. Stack sendiri tembus klik —
   hanya banner isinya yang menangkap pointer. */
.banner-stack{position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:flex;flex-direction:column;pointer-events:none}
.reload-banner{position:relative;pointer-events:auto;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 20px;background:linear-gradient(180deg,#2f5aa8,#264a8c);
  color:#fff;border-top:1px solid #3868b8;box-shadow:0 -6px 24px rgba(0,0,0,.28);
  animation:rbUp .28s ease}
.reload-banner[hidden]{display:none}
@keyframes rbUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.reload-banner .rb-ic{font-size:19px;flex:none}
.reload-banner .rb-msg{font-weight:640;font-size:14.5px}
.reload-banner .rb-count{color:#dbe6ff;font-size:13px;margin-right:auto;
  font-variant-numeric:tabular-nums}
.reload-banner .rb-count[hidden]{display:none}
.reload-banner .rb-btn{flex:none;cursor:pointer;border-radius:9px;font-size:13.5px;
  font-weight:640;padding:9px 16px;min-height:40px;border:1px solid rgba(255,255,255,.5);
  background:transparent;color:#fff;transition:background .15s}
.reload-banner .rb-btn:hover{background:rgba(255,255,255,.14)}
.reload-banner .rb-primary{background:#fff;color:#1c3f7a;border-color:#fff}
.reload-banner .rb-primary:hover{background:#eaf1ff}
.reload-banner .rb-defer[hidden]{display:none}
/* varian Order: hijau, informatif — angkanya sudah dimuat ulang sendiri, jadi
   tak ada hitung mundur (pesan mengambil sisa ruang, tombol di kanan) */
.reload-banner.order-banner{background:linear-gradient(180deg,#1f7a5a,#186349);
  border-top:1px solid #2a9a72}
.reload-banner.order-banner .rb-msg{margin-right:auto;font-weight:600}
.reload-banner.order-banner .rb-primary{color:#12523c}
.reload-banner.order-banner .rb-primary:hover{background:#e6fff5}
/* mode persisten (ditunda / editor belum disimpan): bar tipis tenang */
.reload-banner.persistent{background:var(--card2);color:var(--text);
  border-top:1px solid var(--line2);box-shadow:0 -4px 18px rgba(0,0,0,.2)}
.reload-banner.persistent .rb-msg{margin-right:auto}
.reload-banner.persistent .rb-primary{background:var(--accent2);color:#fff;border-color:var(--accent2)}

/* layar login: menutupi seluruh aplikasi sampai sesi valid */
.login-screen{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:
    radial-gradient(1100px 600px at 85% -10%,var(--glow-a),transparent 60%),
    radial-gradient(900px 500px at 0% 0%,var(--glow-b),transparent 55%),
    var(--bg)}
.login-screen[hidden]{display:none}
.login-screen{overflow-y:auto}
.login-card[hidden]{display:none}
.login-card{flex-shrink:0;max-width:100%;margin:auto}
.login-card .login-switch{min-height:44px;white-space:normal;color:var(--text);background:var(--bg2)}
#registerForm input{min-height:44px;font-size:16px}
#registerForm button:disabled{opacity:.6;cursor:wait}
.adm-request-info{display:block;color:var(--muted);font-size:var(--fs-small);margin-top:4px;overflow-wrap:anywhere}
#requestsBody .adm-rowactions button{min-height:44px;white-space:nowrap}
#requestsBody td{overflow-wrap:anywhere}
@media(max-width:600px){
  .admin-page .topbar{flex-direction:column;align-items:stretch;gap:14px}
  .admin-page .hdr-brand h1{display:block;font-size:18px}
  .admin-page .topbar-right{flex-wrap:wrap;justify-content:flex-start}
  .admin-page .topbar-right>*{white-space:nowrap}
  #requestsTable,#requestsTable tbody,#requestsTable tr,#requestsTable td{display:block;width:100%}
  #requestsTable thead{display:none}
  #requestsTable tr{padding:12px 0;border-top:1px solid var(--line)}
  #requestsTable td{padding:7px 0;border:0}
  #requestsTable td[data-label]::before{content:attr(data-label);display:block;color:var(--muted);font-size:11px;margin-bottom:4px}
  #requestsTable .adm-rowactions{display:flex;gap:8px;justify-content:flex-start}
  #requestsTable .adm-rowactions button{flex:1}
}
.login-card{display:flex;flex-direction:column;gap:11px;width:min(360px,92vw);
  background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);
  border-radius:var(--r-card);padding:30px 28px 24px;box-shadow:var(--shadow-pop);
  animation:pop .3s cubic-bezier(.2,.9,.3,1.15);text-align:center}
.login-mark{display:flex;justify-content:center;margin-bottom:2px}
.login-brand{font-size:19px;font-weight:800;letter-spacing:.6px;color:var(--text)}
.login-sub{color:var(--muted);font-size:var(--fs-sub);margin-bottom:8px}
.login-field{width:100%;margin:2px 0 -6px;text-align:left;color:var(--muted);font-size:12px;font-weight:650}
.login-card input{background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  color:var(--text);font-size:14px;font-family:inherit;padding:11px 13px;min-height:42px}
.login-card input::placeholder{color:var(--muted2)}
.login-card input:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(91,157,255,.13)}
.login-go{margin-top:4px;min-height:42px;font-size:14px}
.login-err{color:var(--down);font-size:var(--fs-small);min-height:18px}
.login-adminlink{color:var(--muted2);font-size:var(--fs-small);text-decoration:none;margin-top:2px}
.login-adminlink:hover{color:var(--accent)}

/* toast (kanan-bawah) */
.toast{position:fixed;right:22px;bottom:22px;z-index:220;max-width:min(430px,90vw);
  background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);
  border-radius:13px;padding:12px 16px;box-shadow:var(--shadow-pop);
  color:var(--text);font-size:var(--fs-body);opacity:0;transform:translateY(12px);
  pointer-events:none;transition:opacity .22s,transform .22s}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast.ok{border-color:rgba(34,197,94,.5)}
.toast.err{border-color:rgba(244,84,76,.55)}
.toast a{color:var(--accent)}
/* toast khusus perubahan CHECKLIST TIM: kanan-atas, 5 detik, bisa ditutup */
.kpi-notif-stack{position:fixed;top:20px;right:20px;z-index:230;width:min(390px,calc(100vw - 32px));
  display:flex;flex-direction:column;gap:10px;pointer-events:none}
.kpi-notif-toast{display:grid;grid-template-columns:36px minmax(0,1fr) 44px;align-items:center;gap:10px;
  min-height:68px;padding:10px 8px 10px 12px;background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid rgba(91,157,255,.5);border-radius:14px;box-shadow:var(--shadow-pop);
  color:var(--text);opacity:0;transform:translateY(-10px);pointer-events:auto;
  transition:opacity .2s ease,transform .2s ease}
.kpi-notif-toast.show{opacity:1;transform:none}
.kpi-notif-toast.leaving{opacity:0;transform:translateY(-8px)}
.knt-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  color:var(--accent);background:rgba(91,157,255,.13)}
.knt-copy{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.35}
.knt-copy strong{font-size:13.5px;font-weight:700}
.knt-copy span{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.knt-close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;
  background:transparent;color:var(--muted);font-size:22px;line-height:1}
.knt-close:hover{background:var(--bg2);color:var(--text)}
/* overlay simpan centang: blokir layar sampai tulisan Excel dikonfirmasi;
   state via data-state = pending | ok | queued | fail */
.ksave-ov{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);animation:fade .15s ease}
/* display:flex mengalahkan UA [hidden] — paksa sembunyi saat atribut hidden dipasang
   (Tutup/auto-hide set .hidden; tanpa ini overlay tetap tampil di layar) */
.ksave-ov[hidden],.ksave-btns[hidden]{display:none !important}
.ksave-card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-inner);
  box-shadow:var(--shadow-pop);padding:22px 26px;width:min(430px,92vw);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:9px}
.ksave-ic{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;flex:0 0 auto}
.ksave-ov[data-state="pending"] .ksave-ic{border:3.5px solid var(--line2);border-top-color:var(--accent);
  animation:ksave-spin .8s linear infinite}
.ksave-ov[data-state="ok"] .ksave-ic{background:var(--up-soft);color:var(--up)}
.ksave-ov[data-state="fail"] .ksave-ic{background:var(--down-soft);color:var(--down)}
.ksave-ov[data-state="queued"] .ksave-ic{background:rgba(245,196,81,.14);font-size:20px}
.ksave-msg{font-size:15px;font-weight:650;color:var(--text)}
.ksave-ov[data-state="fail"] .ksave-msg{color:var(--down)}
.ksave-sub{color:var(--muted);font-size:var(--fs-small);line-height:1.55;max-width:360px}
.ksave-btns{display:flex;gap:10px;margin-top:6px}
.ksave-btns .btn-primary,.ksave-btns .btn-ghost{min-height:38px;padding:8px 18px}
@keyframes ksave-spin{to{transform:rotate(360deg)}}
.ksavedflash{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:210;
  background:rgba(29,79,51,.95);border:1px solid rgba(34,197,94,.5);color:#c7f2d6;
  border-radius:999px;padding:7px 16px;font-size:13px;font-weight:650;opacity:0;
  pointer-events:none;transition:opacity .18s,transform .18s}
.ksavedflash.show{opacity:1;transform:translate(-50%,0)}
.klivenote{position:fixed;left:22px;bottom:22px;z-index:205;background:var(--card);
  border:1px solid var(--line2);border-radius:999px;padding:7px 14px;color:var(--muted);
  font-size:12.5px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}
.klivenote.show{opacity:1;transform:none}

/* ============================================================
   TAB 3: CHECKLIST TIM (checklist e-commerce; logika = webapp KPI)
   ============================================================ */
/* [hidden] harus menang atas display grid/flex kelas-kelas ini */
:is(.kpi-grid,.filterbar,.card,.os-list)[hidden]{display:none !important}
#btnReload.busy .ric{display:inline-block;animation:rot 1s linear infinite}

.kpi-head{min-height:76px;padding:15px 18px;flex-wrap:nowrap;gap:10px}
.kpi-head h2{flex:none}
.kpi-meta-help{position:relative;flex:none}
.kpi-meta-btn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line2);background:var(--bg2);color:var(--muted);font-size:13px;
  font-weight:800;line-height:1;transition:color .18s,border-color .18s,background .18s}
.kpi-meta-btn:hover,.kpi-meta-btn:focus-visible{color:var(--text);border-color:var(--accent2);background:var(--card2)}
.kpi-meta-help.pending .kpi-meta-btn{color:var(--gold);border-color:rgba(245,196,81,.55)}
.kpi-meta-help.err .kpi-meta-btn{color:var(--down);border-color:rgba(244,84,76,.55)}
.kpi-meta-tip{position:absolute;z-index:80;top:calc(100% + 10px);left:0;width:min(380px,calc(100vw - 44px));
  display:flex;flex-direction:column;gap:9px;padding:12px 14px;border:1px solid var(--line2);
  border-radius:12px;background:var(--card2);box-shadow:var(--shadow-pop);color:var(--muted);
  font-size:12.5px;line-height:1.45;opacity:0;visibility:hidden;transform:translateY(-4px);
  pointer-events:none;transition:opacity .16s,transform .16s,visibility .16s}
.kpi-meta-help:hover .kpi-meta-tip,.kpi-meta-help:focus-within .kpi-meta-tip{
  opacity:1;visibility:visible;transform:none}
.kpi-meta-help.open .kpi-meta-tip{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.kpi-meta-tip>div{display:grid;grid-template-columns:58px minmax(0,1fr);gap:9px;align-items:start}
.kpi-meta-tip span{text-transform:uppercase;letter-spacing:.45px;color:var(--muted2);font-size:10.5px;font-weight:700}
.kpi-meta-tip b{color:var(--text);font-weight:650;overflow-wrap:anywhere}
.kpi-meta-pending{color:var(--gold);grid-template-columns:1fr !important;padding-top:7px;border-top:1px solid var(--line)}
.kpi-head-switches{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;min-width:0}
.kpi-head-switches .seg{flex:none}
.kpi-head .os-head-r{flex:none}
.kpi-lock-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px}
.kpi-lock-btn.active{color:var(--gold);border-color:rgba(245,196,81,.55);background:rgba(245,196,81,.10)}
.kpi-lock-btn:disabled{opacity:.55;cursor:wait}
.kpi-lock-overlay{position:fixed;z-index:190;top:var(--kpi-lock-top,0);right:0;bottom:0;left:0;
  display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(5,8,13,.48);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.kpi-lock-overlay[hidden]{display:none}
.kpi-lock-dialog{width:min(470px,92vw);padding:26px 28px;text-align:center;
  background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);
  border-radius:var(--r-card);box-shadow:var(--shadow-pop)}
.kpi-lock-mark{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;
  border-radius:16px;background:rgba(245,196,81,.13);color:var(--gold)}
.kpi-lock-dialog h3{font-size:18px;font-weight:700;margin-bottom:7px}
.kpi-lock-dialog p{color:var(--text);font-size:14px}
.kpi-lock-dialog strong{color:var(--gold)}
.kpi-lock-dialog small{display:block;margin-top:7px;color:var(--muted);font-size:12.5px;line-height:1.5}
#kpiCatalog button .kcat-count{margin-left:7px;font-size:11px;font-weight:700;color:var(--muted2);
  background:var(--bg);border-radius:999px;padding:2px 8px;font-variant-numeric:tabular-nums}
#kpiCatalog button.active .kcat-count{color:rgba(255,255,255,.92);background:rgba(255,255,255,.14)}

.kpi-grid-3{grid-template-columns:repeat(3,1fr)}
.kpi.kpi-flat{cursor:default}
.kpi.kpi-flat:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line)}
.kpi.kpi-flat::before{content:none}
.kpi-searchbtn{margin-top:10px;font-size:12.5px;min-height:32px;padding:6px 11px}
.kbarwrap{margin-top:10px;height:7px;background:var(--bg);border:1px solid var(--line);
  border-radius:99px;overflow:hidden}
.kbarwrap i{display:block;height:100%;border-radius:99px;transition:width .3s ease}
.kpi-divcard{display:flex;flex-direction:column;gap:7px}
.kdivrow{display:flex;align-items:center;gap:9px;font-size:12px}
.kdivrow:first-of-type{margin-top:6px}
.kdlabel{flex:0 0 128px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kdbar{flex:1;height:6px;background:var(--bg);border-radius:99px;overflow:hidden}
.kdbar i{display:block;height:100%;border-radius:99px;transition:width .3s ease}
.kdpct{flex:0 0 34px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.kdfrac{flex:0 0 86px;text-align:right;color:var(--muted2);font-variant-numeric:tabular-nums;font-size:11px}

.kpi-legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:var(--fs-small)}
.kpi-legend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.kpi-legend .d-done{background:var(--up)}
.kpi-legend .d-issue{background:var(--down)}
.kpi-legend .d-todo{background:var(--muted2)}
.kpi-legend .d-ro{background:transparent;border:2px solid var(--muted2)}

/* baris produk */
.kpi-row{flex-direction:column;align-items:stretch;gap:0;cursor:default;padding:0}
.kpi-row:hover{transform:none}
.kpi-rowtop{display:flex;align-items:center;gap:16px;padding:16px;cursor:pointer}
.kpi-row .os-main{gap:8px}
.kart{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 6px;
  color:var(--muted);font-size:12px;font-weight:600}
.kmuted{color:var(--muted2)}
.kpi-prog{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.kfrac{color:var(--muted2);font-size:12px;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.kminibars{display:flex;align-items:flex-end;gap:3px;height:30px}
.kmb{width:7px;height:100%;background:var(--bg);border-radius:3px;position:relative;overflow:hidden}
.kmb i{position:absolute;left:0;right:0;bottom:0;border-radius:3px}
.kring{position:relative;width:46px;height:46px;flex:0 0 auto}
.kring svg{transform:rotate(-90deg)}
.krtext{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi-row.open{border-color:var(--line2)}
.kpi-row.open .os-chev{transform:rotate(90deg)}
.kpi-row .os-chev{transition:transform .18s}
.kpi-row.flash{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(91,157,255,.18)}

/* detail checklist per divisi */
.kpi-detail{border-top:1px solid var(--line);padding:14px 16px 16px;animation:fade .25s ease}
.kdetail-meta{display:flex;gap:8px 20px;flex-wrap:wrap;color:var(--muted2);font-size:12px;margin-bottom:12px}
.kdetail-meta b{color:var(--muted)}
/* tiga kolom tetap: kolom tugas cukup lega untuk nama, status, dan "+ Tugaskan" */
.kdivgroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 28px}
@media(min-width:1101px) and (max-width:1310px){:root:not(.sb-mini) body.has-sidebar .kdivgroups{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kdivgroup h4{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  color:var(--text);letter-spacing:.2px;margin-bottom:8px}
.kdh-dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.kdh-frac{margin-left:auto;color:var(--muted2);font-weight:600;font-size:11.5px;font-variant-numeric:tabular-nums}
.ktask{display:flex;align-items:center;gap:8px;padding:5.5px 8px;border-radius:8px;font-size:13px}
.ktask:hover{background:rgba(91,157,255,.06)}
.ktask label{display:flex;align-items:center;gap:9px;cursor:pointer;flex:1;min-width:0}
.ktask input[type=checkbox]{position:absolute;opacity:0;width:16px;height:16px}
.kdot{width:15px;height:15px;border-radius:50%;border:2px solid var(--muted2);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:#fff;transition:.15s}
.ktask.done .kdot{background:var(--up);border-color:var(--up)}
.ktask.done .kdot::after{content:"✓";font-weight:800}
.ktask.is-issue .kdot{border-color:var(--down);background:var(--down-soft)}
.ktask input[type=checkbox]:focus-visible + .kdot{outline:2px solid var(--accent);outline-offset:2px}
.ktname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ktask.done .ktname{color:var(--muted)}
.ktnote{color:var(--gold);font-size:11px;margin-left:5px}
.ktby{color:var(--muted2);font-size:11px;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;white-space:nowrap}
.ktval{color:var(--muted2);font-size:11px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ktask.ro .kdot{border-style:dashed;background:none}
.ktask.ro .ktname{color:var(--muted)}
.ktroval{margin-left:auto;font-size:12px;color:var(--muted2);max-width:130px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ktroval.done{color:var(--up)}
.ktroval.issue{color:var(--down)}
.ktro-pill{color:var(--muted2);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.ktask.task-hl{background:rgba(245,196,81,.14);box-shadow:0 0 0 2px rgba(245,196,81,.4)}

/* pager */
.kpi-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.kpinfo{color:var(--muted);font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.kpsize{color:var(--muted2);font-size:var(--fs-small);display:inline-flex;align-items:center;gap:7px}

/* aktivitas tim */
.kpi-actbar{margin-bottom:14px}
.kpi-actbar .os-search{flex:1;min-width:180px}
.kpi-date{background:var(--bg2);border:1px solid var(--line);border-radius:11px;color:var(--text);
  font-family:inherit;font-size:13px;padding:8px 11px;min-height:38px}
.kpi-date:focus{outline:none;border-color:var(--accent2)}
.kpi-actlist{display:flex;flex-direction:column;gap:6px}
.kact-item{display:flex;align-items:baseline;gap:10px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r-inner);padding:8px 12px;font-size:var(--fs-body);animation:fade .3s ease both}
.kact-item.login{border-color:rgba(91,157,255,.3)}
.kact-item.uncheck{opacity:.75}
.kact-ico{flex:0 0 auto;font-size:13px}
.kact-text{flex:1;min-width:0}
.kact-user{font-weight:700;color:var(--text)}
.kact-link{color:var(--text);text-decoration:underline dotted var(--muted2);text-underline-offset:3px}
.kact-link:hover{color:var(--accent)}
.kact-cat{color:var(--muted2);font-size:11px;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;margin-left:6px;white-space:nowrap}
.kact-when{color:var(--muted2);font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* modal detail produk */
.kpi-prodsearch{margin:14px 0 12px}
.kpi-prodresults{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
/* display:flex mengalahkan UA [hidden] — saat detail tampil, daftar hasil &
   kotak cari harus benar-benar hilang */
:is(.kpi-prodresults,.kpi-prodsearch)[hidden]{display:none !important}
.kprod-hit{display:flex;align-items:center;gap:11px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r-inner);padding:9px 12px;color:var(--text);font-size:var(--fs-body);
  text-align:left;transition:.15s;font-family:inherit}
.kprod-hit:hover{border-color:var(--accent2);background:rgba(91,157,255,.08)}
.kph-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kprod-more{color:var(--muted2);font-size:var(--fs-small);text-align:center;padding:8px}
.kpd-head{margin:14px 0 4px;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.kpd-name{font-size:16px;font-weight:650}
.kpd-grid .st{min-width:150px}
.kpd-actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap}

/* ---- Editor Data (tab CHECKLIST TIM): panel produk kiri + editor sel kanan ---- */
.kpi-edlayout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start}
/* panel kiri: tambah + cari + daftar produk (selalu tampil).
   Baris produk = kartu dua lapis: NAMA menonjol di atas (boleh 2 baris),
   ART + badge status di bawah — bukan lagi baris kecil padat. */
.kpi-edside{display:flex;flex-direction:column;gap:10px;position:sticky;top:10px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-inner);padding:12px}
.kpi-edside .kpi-ednew-btn{width:100%;white-space:nowrap;min-height:38px}
.kpi-edside .kpi-ednew-btn.active{box-shadow:0 0 0 3px var(--field-ring)}
.kpi-edside .os-search{min-width:0}
.kpi-edside-results{max-height:calc(100vh - 190px);min-height:120px;gap:8px;padding:2px}
.kpi-edside .kprod-hit{display:flex;flex-direction:column;align-items:stretch;gap:6px;
  background:var(--card);padding:11px 13px;border-color:var(--line);cursor:pointer}
.kpi-edside .kprod-hit .kph-name{white-space:normal;overflow:hidden;line-height:1.35;
  font-size:var(--fs-body);font-weight:600;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kpi-edside .kprod-hit .kph-sub{display:flex;align-items:center;gap:8px;min-width:0}
.kpi-edside .kprod-hit .kart{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.kpi-edside .kprod-hit .os-badge{margin-left:auto;flex:0 0 auto}
.kpi-edside .kprod-hit:hover{border-color:var(--accent2);background:var(--card2);
  box-shadow:var(--shadow);transform:translateY(-1px)}
.kpi-edside .kprod-hit.active{border-color:var(--accent2);background:rgba(91,157,255,.1);
  box-shadow:inset 3px 0 0 var(--accent2)}
.kpi-edside .kprod-hit.active .kart{color:var(--accent);border-color:var(--accent2)}
/* panel utama: placeholder / editor / form produk baru */
.kpi-edmain{min-width:0}
.kpi-edempty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:260px;text-align:center;color:var(--muted);border:1.5px dashed var(--line2);
  border-radius:var(--r-inner);padding:30px 20px;line-height:1.75}
.kpi-edempty[hidden]{display:none}
.kee-ic{font-size:34px;opacity:.5}
.kpi-edhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.kpi-edprod{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;font-weight:650}
.kpi-edactions{display:flex;gap:8px;flex-wrap:wrap}
.kpi-edfilter{margin:10px 0 12px;max-width:460px}
.kpi-edrows{display:flex;flex-direction:column;gap:5px}
.kpi-edrow{display:grid;grid-template-columns:minmax(180px,280px) 1fr auto;gap:10px;align-items:center;
  padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--bg2)}
/* baris read-only (rumus/identitas): rata & redup — kolom isian jadi menonjol */
.kpi-edrow.ro{opacity:.72;background:transparent;border-style:dashed}
.kpi-edrow[hidden]{display:none}
.ked-col{display:flex;align-items:center;gap:8px;min-width:0}
.ked-letter{font-family:Consolas,monospace;font-size:11.5px;color:var(--muted2);
  background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:2px 6px;flex:none}
.ked-header{font-size:var(--fs-small);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ked-header i{color:var(--muted2);font-weight:400}
/* kolom isian: latar + garis khusus (--field/--field-line) supaya KONTRAS
   jelas terhadap baris & panel di sekitarnya; fokus = ring aksen */
.ked-input{width:100%;min-width:0;background:var(--field);border:1px solid var(--field-line);
  border-radius:7px;color:var(--text);padding:7px 10px;font-size:var(--fs-body);font-family:inherit;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.18);transition:border-color .12s,box-shadow .12s}
.ked-input:hover{border-color:var(--line2)}
.ked-input:focus{outline:none;border-color:var(--accent2);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.18),0 0 0 3px var(--field-ring)}
:root[data-theme="light"] .ked-input{box-shadow:inset 0 1px 2px rgba(23,26,32,.06)}
:root[data-theme="light"] .ked-input:focus{box-shadow:inset 0 1px 2px rgba(23,26,32,.06),0 0 0 3px var(--field-ring)}
.ked-roval{font-size:var(--fs-body);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ked-save{min-height:30px;padding:5px 13px;font-size:12.5px}
.ked-save:disabled{opacity:.4;cursor:default}
.ked-input.input-bad{border-color:var(--down);background:rgba(239,68,68,.07)}
.ktro-pill.req{color:#fff;background:var(--accent);border-radius:5px;padding:2px 7px}
/* form Tambah Produk: footer tombol simpan */
.kpi-ednew-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.kpi-ednew-foot .btn-primary{min-height:38px;padding:8px 18px}
@media (max-width:900px){
  .kpi-edlayout{grid-template-columns:1fr}
  .kpi-edside{position:static}
  .kpi-edside-results{max-height:38vh}
}
/* konfirmasi perubahan sel */
.kce-body{display:flex;flex-direction:column;gap:12px;margin:14px 0 4px}
.kce-prod{font-size:15px;font-weight:650}
.kce-field{color:var(--muted)}
.kce-diff{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
.kce-lbl{display:block;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted2);margin-bottom:4px}
.kce-val{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-inner);
  padding:9px 11px;font-size:var(--fs-body);min-height:38px;word-break:break-word}
.kce-new .kce-val{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.08)}
.kce-arrow{align-self:center;color:var(--muted2);font-size:18px}
.kact-item.edit .kact-ico{filter:saturate(.9)}
@media (max-width:720px){
  .kpi-edrow{grid-template-columns:1fr;gap:6px}
  .kce-diff{grid-template-columns:1fr}
  .kce-arrow{display:none}
}

/* ============================================================
   HALAMAN ADMIN (desain dashboard; logika = admin CHECKLIST TIM)
   ============================================================ */
.adm-pill{color:var(--gold);border-color:rgba(245,196,81,.4)}
.adm-kpis{margin-top:0}
.adm-form{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.adm-form label{display:flex;flex-direction:column;gap:6px;color:var(--muted);
  font-size:var(--fs-small);font-weight:600;flex:1;min-width:170px}
.adm-form input{background:var(--bg2);border:1px solid var(--line);border-radius:11px;
  color:var(--text);font-size:13.5px;font-family:inherit;padding:9px 12px;min-height:40px}
.adm-form select{background:var(--bg2);border:1px solid var(--line);border-radius:11px;color:var(--text);padding:10px 12px;font:inherit;font-size:14px}
.adm-form input:focus,.adm-form select:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(91,157,255,.13)}
.adm-form-col{flex-direction:column;align-items:stretch;gap:12px;margin-top:12px}
.adm-form-col label{min-width:0}
.adm-hint{color:var(--muted2);font-weight:500;text-transform:none;font-size:11.5px}
.adm-err{color:var(--down);font-size:var(--fs-small);min-height:16px;margin-top:8px}
.adm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.adm-tablewrap{overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.adm-table th{color:var(--muted2);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
.adm-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.adm-table tr:last-child td{border-bottom:0}
.adm-table tr:hover td{background:rgba(91,157,255,.04)}
.adm-user{display:flex;align-items:center;gap:9px;font-weight:650}
.adm-mono{font-family:Consolas,monospace;font-size:12.5px}
.adm-pw{cursor:pointer;user-select:none;border-bottom:1px dashed var(--line)}
.adm-pw:hover{color:var(--accent)}
.adm-muted{color:var(--muted2)}
.adm-num{font-variant-numeric:tabular-nums}
.adm-rowactions{display:flex;gap:7px;justify-content:flex-end}
.adm-rowactions .btn-ghost{min-height:30px;padding:5px 11px;font-size:12px}
.btn-danger:hover{color:var(--down);border-color:var(--down)}

@media(max-width:1000px){
  .kpi-grid-3{grid-template-columns:1fr}
  .kdivgroups{grid-template-columns:1fr}
}
@media(max-width:640px){
  .kpi-rowtop{flex-wrap:wrap;gap:10px}
  .kpi-prog{width:100%;justify-content:flex-end}
  .kdlabel{flex-basis:96px}
  .kdfrac{display:none}
  .topbar-right{width:100%;justify-content:space-between}
}

/* ============================================================
   PENYESUAIAN MODE TERANG — hanya yang tidak cukup lewat variabel:
   teks badge translusen digelapkan agar terbaca di permukaan terang;
   tombol aktif & bar progres pakai aksen cerah (bukan navy/gradien gelap)
   ============================================================ */
/* tombol aktif: biru aksen cerah (navy gelap terlihat aneh di terang) */
:root[data-theme="light"] .seg button.active,
:root[data-theme="light"] .sb-item.active,
:root[data-theme="light"] .tabs button.active{
  background:linear-gradient(180deg,#3b82f6,#2563eb);box-shadow:0 1px 6px rgba(37,99,235,.35)}
:root[data-theme="light"] .sb-item.active{color:#fff}
/* segmen hijau (Semua/Lokal/Impor + katalog KPI): hijau cerah */
:root[data-theme="light"] .seg-lg button.active,
:root[data-theme="light"] #segToggle button.active{
  background:linear-gradient(180deg,#22c55e,#16a34a)}
:root[data-theme="light"] .btn-primary{
  background:linear-gradient(180deg,#3b82f6,#2563eb);border-color:#2563eb}
:root[data-theme="light"] .uavatar{background:linear-gradient(180deg,#3b82f6,#2563eb)}
:root[data-theme="light"] .os-badge.s-run{color:#166534}
:root[data-theme="light"] .os-badge.s-new{color:#1d4ed8}
:root[data-theme="light"] .os-badge.s-imp{color:#a21caf}
:root[data-theme="light"] .os-badge.a-oos{color:#b91c1c}
:root[data-theme="light"] .os-badge.a-risk{color:#c2410c}
:root[data-theme="light"] .os-badge.a-due{color:#a16207}
:root[data-theme="light"] .os-badge.a-spike{color:#166534}
:root[data-theme="light"] .os-badge.a-drop{color:#075985}
:root[data-theme="light"] .os-badge.a-watch{color:#6d28d9}
:root[data-theme="light"] .os-badge.a-new{color:#0f766e}
:root[data-theme="light"] .os-pill.err{color:#b91c1c}
:root[data-theme="light"] .cal-day:not(.disabled):not(.sel):hover{color:var(--text)}
:root[data-theme="light"] .nbadge{border-color:var(--card)}

/* ---------- STATUS PRODUK (tab 4): sidebar kategori + peringkat pendapatan ---------- */
/* Pola layout = Editor Data (.kpi-edlayout): sidebar penuh kiri + konten kanan.
   Baris memakai kembali .os-stat/.os-badge/.os-chev tab STOCK ALERT. */
.sp-head{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px 12px}
.sp-head>h2{grid-column:1}
.sp-head>.kpi-meta-help{grid-column:2}
.sp-head>#spStats{grid-column:3;justify-self:end}
.sp-mobile-controls{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.sp-mobile-controls>.os-head-r{flex:0 0 auto}
.sp-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
.sp-side{align-self:stretch;display:flex;flex-direction:column;gap:10px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-inner);padding:12px}
.sp-side-title{color:var(--muted2);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:0 2px}
.sp-cats{display:flex;flex-direction:column;gap:6px;min-height:120px;padding:2px}
.sp-cat{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-inner);
  padding:9px 11px;cursor:pointer;color:var(--text);font:inherit;text-align:left}
.sp-cat:hover{border-color:var(--accent2);background:var(--card2);box-shadow:var(--shadow)}
.sp-cat.active{border-color:var(--accent2);background:rgba(91,157,255,.1);box-shadow:inset 3px 0 0 var(--accent2)}
.sp-cat-n{font-weight:600;font-size:var(--fs-small);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-cat-meta{color:var(--muted2);font-size:11px;display:flex;gap:6px;align-items:center;flex:0 0 auto;font-variant-numeric:tabular-nums}
.sp-need{background:var(--down-soft);color:var(--down);border-radius:999px;padding:1px 7px;font-size:10.5px;font-weight:700}
.sp-need-t{color:var(--gold);font-weight:700}
.sp-head .sp-filters{flex:1 1 620px;justify-content:flex-start;flex-wrap:wrap;min-width:0;margin:0}
.sp-head .sp-filters .os-chip{min-height:36px;padding:8px 12px;border-radius:11px;font-size:13px;white-space:nowrap}
.sp-head .sp-filters .os-chip.on{background:linear-gradient(180deg,#27406b,#1d2f50);
  border-color:var(--accent2);color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.3)}
.sp-head .sp-filters .os-chip.on b{color:#fff}
.sp-head #spStats:empty{display:none}
.sp-main{min-width:0;display:flex;flex-direction:column;gap:10px}
.sp-sec-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sp-sec-head h3{margin:0;font-size:15px}
.sp-sec-head .sp-sub{color:var(--muted);font-size:var(--fs-small)}
.sp-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.sp-row{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r-inner);padding:10px 14px;cursor:pointer;transition:border-color .15s,transform .15s}
.sp-row:hover{border-color:var(--line2);transform:translateX(2px)}
.sp-row.sp-top{box-shadow:inset 3px 0 0 var(--up)}
.sp-rk{flex:0 0 auto;min-width:26px;text-align:center;font-size:16px;font-weight:800;
  color:var(--muted);font-variant-numeric:tabular-nums}
.sp-top .sp-rk{color:var(--up)}
.sp-mvbox{flex:0 0 auto;width:34px;text-align:left}
.sp-mv{font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
.sp-mv.up{color:var(--up)}
.sp-mv.down{color:var(--down)}
.sp-main-c{flex:1;min-width:0}
.sp-name{font-weight:600;font-size:var(--fs-body);overflow:hidden;text-overflow:ellipsis}
.sp-warna{color:var(--muted);font-weight:500}
.sp-meta{color:var(--muted2);font-size:11.5px;margin-top:2px}
.sp-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.sp-recbox{flex:0 0 180px;width:180px;min-width:180px;text-align:right}
.sp-rec{display:inline-block;border:1px solid;border-radius:999px;padding:3px 10px;
  font-size:11.5px;font-weight:600;white-space:nowrap}
.sp-rec b{font-weight:800}
.sp-rec.rec-fast{color:var(--up);border-color:var(--up);background:var(--up-soft)}
.sp-rec.rec-mov{color:var(--accent);border-color:var(--accent2);background:rgba(91,157,255,.12)}
.sp-rec.rec-slow{color:var(--down);border-color:var(--down);background:var(--down-soft)}
.sp-sep{display:flex;align-items:center;gap:10px;color:var(--muted2);font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin:2px 0;padding:0 4px}
.sp-sep::before,.sp-sep::after{content:"";flex:1;border-top:1.5px dashed var(--line2)}
.sp-noprice{color:var(--muted2);font-size:11px;font-style:italic;font-weight:500}
.sp-empty{color:var(--muted);text-align:center;padding:26px 10px;font-size:var(--fs-body);list-style:none}
@media(max-width:1000px){
  .sp-head .sp-filters{order:3;flex:1 1 100%}
  .sp-layout{grid-template-columns:1fr}
  .sp-row{flex-wrap:wrap;gap:10px}
  .sp-recbox{flex:1 1 100%;width:auto;text-align:left;min-width:0}
}

/* ---------- animasi ---------- */
/* Animasi masuk kartu hanya utk render awal. Setelah muat (ui.js menambah
   body.anim-off), kartu/daftar yang di-render ulang (ganti segmen, filter,
   pindah tab, refresh) TIDAK memutar ulang animasi — konten cukup berganti.
   Animasi interaksi (modal/dropdown pop, detail fade) tetap jalan. */
body.anim-off :is(.card,.filterbar,.kpi,.os-card,.rank-list li,.kact-item){animation:none}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- responsif ---------- */
/* Enam kelompok kontrol KPI muat satu baris di desktop lebar. Di bawah 1200px
   pemilih turun sebagai satu kelompok utuh agar tidak menimbulkan overflow. */
@media(max-width:1200px){
  .kpi-head{flex-wrap:wrap;align-items:center}
  .kpi-head-switches{order:3;flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap}
  .kpi-head .os-head-r{width:auto;margin-left:auto}
  #osFilterBar .os-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* topbar sempit: grid 3 kolom tidak muat → jatuh ke flex wrap (nav & akun
   pindah baris, judul tetap kiri) */
@media(max-width:1100px){
  .topbar{display:flex;flex-wrap:wrap}
  .topbar-right{margin-left:auto}
}
/* kartu grid-2 sempit (laptop kecil): tetap berdampingan, kolom doughnut menyempit
   (stack membuat kartu Brand jauh lebih tinggi dari Warna — tinggi jadi timpang) */
@media(min-width:1001px) and (max-width:1200px){
  .brand-body{grid-template-columns:minmax(140px,170px) 1fr;gap:10px 14px}
}
/* Terjemahan breakpoint utk desktop ber-sidebar: lebar KONTEN = viewport −
   sidebar (±312px pada lebar bawaan). Filter STOCK ALERT muat enam kolom
   mulai 1350px dengan tombol lebih rapat; di bawah itu tetap tiga kolom.
   Mode ciut (:root.sb-mini) memakai aturan yang sama digeser 200px (rel
   --sbw-mini, bukan --sbw bawaan); rentang yang sudah tertutup aturan
   viewport <=1200px tidak diulang. */
@media(min-width:1101px) and (max-width:1510px){
  :root:not(.sb-mini) body.has-sidebar .kpi-head{flex-wrap:wrap;align-items:center}
  :root:not(.sb-mini) body.has-sidebar .kpi-head-switches{order:3;flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap}
  :root:not(.sb-mini) body.has-sidebar .kpi-head .os-head-r{width:auto;margin-left:auto}
}
@media(min-width:1101px) and (max-width:1349px){
  :root:not(.sb-mini) body.has-sidebar #osFilterBar .os-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1350px) and (max-width:1510px){
  :root:not(.sb-mini) body.has-sidebar #osFilterBar .os-toolbar .dd-btn{padding-inline:6px;gap:5px}
}
@media(min-width:1101px) and (max-width:1310px){
  :root:not(.sb-mini) body.has-sidebar .kpi-grid{grid-template-columns:repeat(2,1fr)}
  :root:not(.sb-mini) body.has-sidebar .grid-2{grid-template-columns:1fr}
  :root:not(.sb-mini) body.has-sidebar .os-cards{grid-template-columns:repeat(3,1fr)}
  :root:not(.sb-mini) body.has-sidebar .os-row .os-stat{min-width:86px}
  :root:not(.sb-mini) body.has-sidebar .os-row .os-stat.os-jadwal{min-width:118px}
  :root:not(.sb-mini) body.has-sidebar .sp-head .sp-filters{order:3;flex:1 1 100%}
  :root:not(.sb-mini) body.has-sidebar .sp-layout{grid-template-columns:1fr}
  :root:not(.sb-mini) body.has-sidebar .sp-row{flex-wrap:wrap;gap:10px}
  :root:not(.sb-mini) body.has-sidebar .sp-recbox{flex:1 1 100%;width:auto;text-align:left;min-width:0}
}
@media(min-width:1311px) and (max-width:1510px){
  :root:not(.sb-mini) body.has-sidebar .brand-body{grid-template-columns:minmax(140px,170px) 1fr;gap:10px 14px}
}
@media(min-width:1101px) and (max-width:1310px){
  :root.sb-mini body.has-sidebar .kpi-head{flex-wrap:wrap;align-items:center}
  :root.sb-mini body.has-sidebar .kpi-head-switches{order:3;flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap}
  :root.sb-mini body.has-sidebar .kpi-head .os-head-r{width:auto;margin-left:auto}
  :root.sb-mini body.has-sidebar .brand-body{grid-template-columns:minmax(140px,170px) 1fr;gap:10px 14px}
}
@media(min-width:1201px) and (max-width:1310px){
  :root.sb-mini body.has-sidebar #osFilterBar .os-toolbar .dd-btn{padding-inline:6px;gap:5px}
}
@media(max-width:1000px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .filterbar{position:static}
  .os-cards{grid-template-columns:repeat(3,1fr)}
  .os-row .os-stat{min-width:86px}            /* layar sedang: rapatkan lagi kolom angka */
  .os-row .os-stat.os-jadwal{min-width:118px}
}
@media(max-width:820px){
  button,a.btn-primary,input:not([type="checkbox"]),select,textarea,.dd-btn{min-height:44px !important}
  input:not([type="checkbox"]),select,textarea{font-size:16px}
  .btn-icon{min-width:44px}
  /* 641-820px: baris masih SATU baris (wrap baru di 640px) — rapatkan kolom
     angka agar nama produk tetap kebagian ruang. */
  .os-row{gap:12px}
  .os-row .os-stat{min-width:78px}
  .os-row .os-stat.os-jadwal{min-width:110px}
}
@media(max-width:640px){
  body{padding:18px 12px 48px}
  .app,.page,.card,.topbar,.filterbar,.os-head,.os-list,.os-row,.os-main,
  .kpi-row,.kpi-rowtop,.kpi-detail,.kdivgroup,.ktask{min-width:0;max-width:100%}
  .topbar{gap:10px 8px;padding:12px}
  .hdr-brand{min-width:0;flex:1 1 100%}
  .topbar-right{width:100%;margin-left:0;justify-content:flex-start;flex-wrap:wrap}
  .tabs{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .tabs button{width:100%;justify-content:center;padding:8px 4px;font-size:11px;line-height:1.25;text-align:center;white-space:normal}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:12px}
  .kpi .k-val{font-size:20px}
  .trend-cols{grid-template-columns:1fr}
  .topbar h1{font-size:22px}
  .fb-controls{width:100%}
  .fb-controls .dd{flex:1}
  .fb-controls .dd-btn{width:100%;max-width:none;justify-content:space-between}
  .chart-wrap{height:260px}
  .chart-wrap.tall{height:330px}
  .brand-body{grid-template-columns:1fr}
  .brand-chart{min-height:210px}
  .brand-list{align-self:stretch}
  .os-cards{grid-template-columns:repeat(2,1fr)}
  .os-card{padding-inline:12px;column-gap:6px}
  .os-toolbar>div{flex:1 1 calc(50% - 5px)}
  .os-toolbar .dd,.os-toolbar .dd-btn{width:100%;max-width:none}
  #osSourceMount .dd-btn{width:100%;max-width:none}
  .os-toolbar .dd-btn{justify-content:space-between}
  #osFilterBar .os-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .os-alert-row .os-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .os-alert-row .os-chip{width:100%}
  .os-bar-row .os-search{flex-basis:100%}
  .os-bar-row .os-sort-dd{flex:1 1 auto}
  .os-bar-row .os-sort-dd .dd-btn{width:100%;max-width:none;justify-content:center}
  .os-head-r{margin-left:0;width:100%;justify-content:space-between}
  .os-head{align-items:flex-start;padding:13px 14px}
  .os-head h2{white-space:normal;flex:1 1 100%}
  .os-stats{flex:1 1 100%;width:100%;max-width:100%}
  #pageDash > .os-head > .os-stats{justify-content:flex-start}
  #osStats{justify-content:flex-start}
  .os-pill{max-width:100%;min-width:0;white-space:normal;overflow-wrap:normal;line-height:1.35}
  .os-pill b{min-width:0;white-space:normal;overflow-wrap:anywhere}
  .os-source-pill{flex:1 1 100%;align-items:flex-start;border-radius:12px}
  .os-refresh-msg{text-align:left}
  .os-row{flex-wrap:wrap;gap:10px}
  .os-main{flex:1 1 100%}
  .os-meta{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.5}
  .os-meta code{overflow-wrap:anywhere;white-space:normal}
  .os-stat{text-align:left;min-width:70px}
  .os-row .os-stat{min-width:70px}              /* mobile: kembali rapat, baris membungkus */
  .os-chev{display:none}
  .kpi-row,.kpi-row *{overflow-wrap:anywhere}
  .kpi-rowtop{width:100%}
  button,a.btn-primary,input:not([type="checkbox"]),select,textarea,.dd-btn{min-height:44px !important}
  input:not([type="checkbox"]),select,textarea{font-size:16px}
  .btn-icon{min-width:44px}
  .kpi-head h2{flex:0 1 auto}
}

/* ---------- overlay muat data (auth.js loadActiveFeature) ---------- */
.load-overlay{position:fixed;inset:0;z-index:220;display:flex;align-items:center;
  justify-content:center;background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(2px)}
.load-box{background:var(--card);border:1px solid var(--line,rgba(128,134,147,.25));
  border-radius:14px;padding:26px 34px;text-align:center;max-width:320px;
  box-shadow:0 12px 40px rgba(0,0,0,.25)}
.load-box p{margin:0;color:var(--text);font-weight:600}
.load-box .load-sub{margin-top:6px;color:var(--muted);font-weight:400;font-size:.85rem}
.load-spin{width:34px;height:34px;margin:0 auto 14px;border-radius:50%;
  border:3px solid var(--muted2);border-top-color:var(--accent);
  animation:loadspin .8s linear infinite}
@keyframes loadspin{to{transform:rotate(360deg)}}
#loadRetry{margin-top:14px;padding:8px 18px;border:0;border-radius:9px;
  background:var(--accent);color:#fff;font-weight:600;cursor:pointer}
#loadRetry:hover{filter:brightness(1.08)}
.os-retry{margin-left:8px;padding:3px 12px;border:0;border-radius:7px;
  background:var(--accent);color:#fff;font-weight:600;cursor:pointer;font-size:.8rem}
.load-overlay[hidden]{display:none}
body.pre-auth .app{visibility:hidden}

/* ---------- modal pengaturan akun (auth.js) ----------
   di atas .load-overlay: dibuka sengaja oleh user, tetap bisa dipakai saat
   data tab sedang dimuat / gagal dimuat */
.acct-overlay{position:fixed;inset:0;z-index:225;display:flex;overflow-y:auto;
  background:rgba(0,0,0,.45);padding:24px;backdrop-filter:blur(2px)}
.acct-overlay[hidden]{display:none}
.acct-card{background:var(--card);border:1px solid var(--line,rgba(128,134,147,.25));
  border-radius:14px;padding:22px 24px;width:100%;max-width:370px;display:flex;
  flex-direction:column;gap:5px;box-shadow:0 12px 40px rgba(0,0,0,.3);
  margin:auto}                         /* tengah bila muat; layar pendek: overlay yang bergulir */
.acct-card h2{margin:0 0 4px;font-size:16px;color:var(--text)}
.acct-sec{display:flex;flex-direction:column;gap:5px;padding:12px 0 2px;
  border-top:1px solid var(--line,rgba(128,134,147,.25))}
.acct-sec h3{margin:0 0 2px;font-size:13px;font-weight:700;color:var(--text);letter-spacing:.02em}
.acct-confirm{display:flex;flex-direction:column;gap:5px}
.acct-confirm[hidden]{display:none}
.acct-hint{font-weight:400;opacity:.8}
.acct-card label{font-size:12px;color:var(--muted);margin-top:7px}
.acct-card input{background:var(--card2);border:1px solid rgba(128,134,147,.35);
  border-radius:9px;padding:9px 11px;color:var(--text);font-size:14px}
.acct-card input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.acct-err{color:#ef4444;font-size:12.5px;min-height:17px;margin-top:6px}
.acct-err.ok{color:#22c55e}
.acct-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.acct-foot{border-top:1px solid var(--line,rgba(128,134,147,.25));padding-top:12px;margin-top:6px}

/* ============================================================
   MOBILE APP EXPERIENCE
   Phone layout uses the same DOM/state as desktop, but changes navigation,
   filters and dense rows into touch-first app patterns. Desktop remains the
   source layout; these controls are intentionally invisible above 720px.
   ============================================================ */
.mobile-only,.mobile-brand,.mobile-tabbar,.mobile-sheet-head{display:none}
.tab-ic{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;margin-right:6px;vertical-align:-3px}
.tab-ic svg,.mobile-tabbar svg,.mobile-sheet-trigger svg{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mobile-sheet-backdrop{display:none}

@media(max-width:720px){
  :root{--mobile-gutter:12px;--mobile-nav-h:68px}
  html{scrollbar-gutter:auto;scroll-padding-top:68px}
  body{padding:0 var(--mobile-gutter) calc(var(--mobile-nav-h) + 28px + env(safe-area-inset-bottom));min-height:100dvh}
  body.mobile-sheet-active{overflow:hidden}
  .mobile-only{display:flex}
  .app{gap:12px;max-width:none}
  .page{gap:12px}
  .card{padding:14px 12px 12px;border-radius:14px;box-shadow:0 5px 18px rgba(0,0,0,.22)}

  /* Compact app bar: page name replaces the large brand + desktop tabs. */
  .topbar{position:sticky;top:0;z-index:65;display:flex;flex-wrap:nowrap;align-items:center;
    min-height:58px;margin:0 calc(var(--mobile-gutter) * -1);padding:max(7px,env(safe-area-inset-top)) 12px 7px;
    gap:8px;background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom:1px solid var(--line);
    backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}
  .hdr-brand{flex:1 1 auto;min-width:0}
  .hdr-brand h1,.topbar .tabs{display:none}
  .mobile-brand{display:flex;flex-direction:column;min-width:0;line-height:1.1}
  .mobile-brand span{font-size:10px;font-weight:800;letter-spacing:1.15px;color:var(--accent);text-transform:uppercase}
  .mobile-brand strong{margin-top:3px;font-size:16px;font-weight:720;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-right{width:auto;margin-left:auto;justify-content:flex-end;flex-wrap:nowrap;gap:4px}
  .topbar-right>.btn-icon,.topbar-right .btn-icon{width:44px;height:44px;min-width:44px;border-color:transparent;background:transparent}
  .topbar-right>.btn-icon:hover,.topbar-right .btn-icon:hover{background:var(--card)}
  .ubox{gap:2px;padding:0;background:transparent;border:0}
  .ubox .uname,.ubox .btn-logout,.uavatar{display:none}

  /* Persistent top-level navigation, clear of the device home indicator. */
  .mobile-tabbar:not([hidden]){position:fixed;left:8px;right:8px;bottom:8px;z-index:64;
    display:grid;grid-template-columns:repeat(var(--mobile-tab-count,3),minmax(0,1fr));
    min-height:var(--mobile-nav-h);padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--line2);border-radius:18px;
    box-shadow:0 14px 42px rgba(0,0,0,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .mobile-tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-width:0;min-height:52px;padding:4px;border:0;border-radius:12px;background:transparent;color:var(--muted);
    font:600 11px/1.15 inherit;transition:background .16s ease,color .16s ease}
  .mobile-tabbar button svg{width:21px;height:21px}
  .mobile-tabbar button.active{background:rgba(91,157,255,.14);color:var(--accent)}
  .mobile-tabbar button[hidden]{display:none}
  .mobile-tabbar button.active::before{content:"";position:absolute;top:3px;width:22px;height:2px;border-radius:2px;background:var(--accent)}
  .mobile-tabbar button:active{background:rgba(91,157,255,.2)}

  /* Page summaries stay useful but stop behaving like large desktop cards. */
  .os-head{align-items:flex-start;padding:12px;gap:8px 10px}
  .os-head>h2{display:none}
  .os-stats{width:100%;flex:1 1 100%;justify-content:flex-start!important;gap:3px 8px}
  .os-pill{padding:1px 0;font-size:11.5px;gap:4px}
  .os-pill b{max-width:100%;overflow:visible;white-space:normal}
  .os-source-pill{padding:8px 10px;margin-bottom:2px;background:var(--bg2);border:1px solid var(--line);border-radius:10px}
  .os-head-r{width:100%;margin:0;justify-content:space-between;gap:8px}
  .os-head-r>.btn-ghost{flex:0 0 auto}
  .os-head-r .seg{flex:1}
  .os-head-r .seg button{flex:1;padding-inline:8px}
  .os-refresh-msg{max-width:none;text-align:left}

  /* Page headers are compact action rows; metadata remains one tap away. */
  #pageDash>.os-head,#pageOrder>.os-head,.sp-head{min-height:44px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
  #pageDash>.os-head{align-items:center;flex-wrap:nowrap}
  #pageDash>.os-head>.os-stats{display:none}
  #pageDash>.os-head>.os-head-r{flex:1 1 auto;width:auto;min-width:0;margin:0;justify-content:flex-end;gap:6px}
  #pageDash>.os-head #dashRefresh{min-height:44px;padding-inline:10px;white-space:nowrap}
  #pageDash>.os-head #segToggle{display:none}
  .dash-mobile-meta{flex:none}
  .dash-segment-mobile{position:relative;flex:1 1 96px;min-width:82px;max-width:128px;height:44px}
  .dash-segment-mobile::after{content:"";position:absolute;right:11px;top:50%;width:7px;height:7px;
    border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
  .dash-segment-mobile select{width:100%;height:44px;padding:0 30px 0 12px;appearance:none;-webkit-appearance:none;
    border:1px solid var(--line2);border-radius:11px;background:var(--bg2);color:var(--text);
    font:700 16px/1 inherit;outline:none}
  .dash-segment-mobile select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,157,255,.18)}
  #pageOrder>.os-head{align-items:center;flex-wrap:nowrap}
  #pageOrder>.os-head>.os-stats{display:none}
  #pageOrder>.os-head>.os-head-r{flex:1 1 auto;width:auto;margin:0;justify-content:flex-end}
  #pageOrder>.os-head .os-refresh-msg:empty{display:none}
  #pageOrder>.os-head #osRefresh{min-height:44px}
  .os-mobile-meta{flex:none}
  .kpi-meta-btn{display:grid!important;width:44px!important;min-width:44px;height:44px!important;min-height:44px!important;padding:0;border-radius:50%!important;aspect-ratio:1}
  :is(.dash-mobile-meta,.os-mobile-meta) .kpi-meta-tip{left:0;width:min(360px,calc(100vw - (var(--mobile-gutter) * 2)))}
  :is(#dashMetaHelp,#osMetaHelp,#spMetaHelp):not(.open) .kpi-meta-tip{
    opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;transition:none}

  /* KPI density: four essentials first, remaining metrics on demand. */
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi{min-height:94px;padding:11px 12px;border-radius:13px}
  .kpi .k-label{font-size:9.5px;line-height:1.25;letter-spacing:.45px}
  .kpi .k-val{font-size:18px;line-height:1.2;margin-top:7px;overflow-wrap:anywhere}
  .kpi .k-foot{font-size:10.5px;line-height:1.35;margin-top:5px}
  #kpiGrid:not(.mobile-expanded)>.kpi:nth-child(n+5){display:none}
  .mobile-more{position:relative;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:-4px;padding:0 42px;
    border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--muted);font-size:12px;font-weight:650}
  .mobile-more-icon{position:absolute;right:14px;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
  .mobile-more[aria-expanded="true"] .mobile-more-icon{transform:rotate(180deg)}

  /* One compact launcher replaces each wall of inline phone filters. */
  .mobile-sheet-trigger{width:100%;min-height:48px;align-items:center;gap:10px;padding:8px 12px;
    background:var(--card);border:1px solid var(--line);border-radius:13px;color:var(--text);font-size:13px;font-weight:680;text-align:left;box-shadow:var(--shadow)}
  .mobile-sheet-trigger>svg{color:var(--accent);flex:none}
  .mobile-sheet-trigger>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-sheet-trigger>b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;
    border-radius:999px;background:var(--accent2);color:#fff;font-size:11px;font-style:normal;font-variant-numeric:tabular-nums}
  .mobile-sheet-trigger>b[hidden]{display:none}
  .mobile-sheet-trigger>i{color:var(--muted2);font-size:20px;font-style:normal}
  .mobile-sheet-trigger:active{background:var(--card2)}

  .mobile-sheet-backdrop{position:fixed;inset:0;z-index:170;background:rgba(0,0,0,.58);border:0;padding:0}
  .mobile-sheet-backdrop.show{display:block;animation:fade .18s ease}
  .mobile-sheet-panel{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;z-index:180!important;
    display:flex!important;flex-direction:column;gap:12px;width:100%!important;max-width:none!important;max-height:min(84dvh,760px)!important;
    margin:0!important;padding:0 16px calc(18px + env(safe-area-inset-bottom))!important;overflow:auto!important;
    border:1px solid var(--line2)!important;border-bottom:0!important;border-radius:22px 22px 0 0!important;
    background:var(--card)!important;box-shadow:0 -16px 52px rgba(0,0,0,.5)!important;
    transform:translateY(104%);visibility:hidden;pointer-events:none;transition:transform .22s ease,visibility 0s linear .22s}
  .mobile-sheet-panel.mobile-sheet-open{transform:translateY(0);visibility:visible;pointer-events:auto;transition:transform .24s ease-out}
  .mobile-sheet-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:56px;margin:0 -16px 2px;padding:10px 14px;background:color-mix(in srgb,var(--card) 94%,transparent);
    border-bottom:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .mobile-sheet-head::before{content:"";position:absolute;top:6px;left:50%;width:34px;height:4px;transform:translateX(-50%);border-radius:4px;background:var(--line2)}
  .mobile-sheet-head strong{font-size:15px;letter-spacing:-.1px}
  .mobile-sheet-head button{min-height:44px;padding:0 11px;border:0;border-radius:10px;background:rgba(91,157,255,.13);color:var(--accent);font-weight:700}
  .mobile-sheet-panel .dd,.mobile-sheet-panel .dd-btn{width:100%;max-width:none}
  .mobile-sheet-panel .dd-btn{justify-content:space-between}
  .mobile-sheet-panel .dd-panel{position:static;width:100%;max-width:100%;margin-top:6px;max-height:42dvh;box-shadow:none;animation:none}
  .mobile-sheet-panel .seg{display:flex;width:100%}
  .mobile-sheet-panel .seg button{flex:1;min-height:44px}

  .trend-card .card-head{margin-bottom:8px}
  .trend-card .card-head,.trend-card .controls{width:100%}
  .trend-card .controls{align-items:stretch}
  .trend-card .controls>*{width:100%}
  /* nowrap + flex:none: sheet ber-max-height menyusutkan baris; kolom yang boleh
     wrap lalu melempar kontrol ke kolom kedua di luar layar */
  .trend-card .tc-row,.trend-card .tc-view{flex-direction:column;flex-wrap:nowrap;flex:none;align-items:stretch;margin:0;width:100%}
  .trend-card .tc-row>*,.trend-card .tc-view>*{width:100%}
  .trend-sum{padding:8px 12px}
  .ts-row{flex-wrap:wrap}
  .ts-hero{flex:1 1 100%;padding:0 0 6px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .ts-val{font-size:20px}
  .ts-stat{padding:0 10px}
  .ts-hero+.ts-stat{padding-left:0;border-left:0}
  .ts-stat b{font-size:14px}
  .trend-sum.is-compare{grid-template-columns:1fr 1fr;padding:0}
  .cmp-card{padding:8px 12px}
  .cmp-card.d{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .cc-h{flex-wrap:wrap;gap:2px 7px}
  .cc-n{flex:none}
  .cc-win{flex:1 1 100%;margin-left:0;white-space:normal}
  .cmp-card.d .cc-win{flex:0 1 auto;margin-left:auto}
  .cc-tag{display:none}
  .cc-run{display:inline}
  .cc-row{flex-wrap:wrap;gap:0 8px}
  .cc-v{font-size:18px}
  .cc-sub{white-space:normal;font-size:12px}
  .desktop-chart-hint{display:none}
  .mobile-chart-hint{display:block;margin:0 2px 8px;line-height:1.45} /* bukan flex (.mobile-only): <b> di dalamnya jangan jadi kolom */
  .chart-wrap{height:245px}
  .chart-wrap.tall{height:285px}
  .season-grid .chart-wrap{height:260px}
  .brand-body,.brand-chart,.brand-list{min-width:0}
  .brand-chart{width:100%;overflow:hidden}
  .brand-chart canvas{max-width:100%!important}

  #filterBar .fb-row{display:block}
  #filterBar .fb-title{display:none}
  #filterBar .fb-controls{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:10px}
  #filterBar .fb-controls>*{width:100%}
  #filterBar .btn-reset{width:100%}
  #filterBar .fb-summary{margin:0;padding-top:10px}

  .os-search-mobile{display:block;min-width:0;position:sticky;top:66px;z-index:38;box-shadow:0 8px 20px var(--bg)}
  .os-search-mobile input{min-height:48px;padding-left:42px;background:var(--card);font-size:16px;border-color:var(--line2)}
  /* sheet: filter selalu terlihat; pencarian tetap di atas sheet, sedangkan
     Sort dan Reset berada di bagian bawah. */
  #osFilterBar .os-search{display:none}
  #osFilterBar .os-bar-row{order:9;width:100%}
  #osFilterBar .os-bar-row .btn-reset{width:100%;min-height:44px}
  #osFilterBar .os-filter-panel{margin:0;padding:0;border:0}
  #osFilterBar .os-toolbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
  #osFilterBar .os-alert-row{margin-top:10px;gap:10px}
  #osFilterBar .os-alert-row .os-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #osFilterBar .os-alert-row .os-chip{min-width:0;min-height:44px;padding:7px 8px;white-space:normal;text-align:center}
  #osFilterBar .os-sort-dd{width:100%}
  #osFilterBar .os-sort-dd .dd-btn{width:100%;max-width:none;justify-content:space-between}
  #osFilterBar .os-sort-dd .dd-panel{width:100%}

  .os-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .os-card{min-height:68px;padding:8px 11px;border-radius:13px}
  .os-card .n{font-size:19px}
  .os-card .l{font-size:10px}
  .os-list{gap:9px}
  .os-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px 8px;padding:12px;border-radius:12px}
  .os-main{grid-column:1/-1;width:100%;gap:6px}
  .os-name{font-size:13.5px;line-height:1.4;white-space:normal;overflow:visible}
  .os-meta{font-size:11px;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
  .os-row>.os-stat{min-width:0!important;padding-top:8px;border-top:1px solid var(--line);text-align:left}
  .os-row>.os-stat .l{font-size:9.5px}
  .os-row>.os-stat .v{font-size:13.5px;white-space:normal}
  .os-chev{display:none}
  #pageOrder>.card.span-full:last-child{padding:12px}
  .os-count{line-height:1.5}

  /* STATUS PRODUK: category and filters become sheets; rows become stable data cards. */
  .sp-head{display:flex;align-items:center;flex-wrap:nowrap;gap:8px}
  .sp-head>.kpi-meta-help{order:1;flex:none}
  .sp-head>.mobile-sheet-trigger{order:2;flex:1 1 auto;width:auto;min-width:0}
  .sp-head>#spStats{display:none}
  .sp-head .kpi-meta-tip{left:0;width:min(360px,calc(100vw - (var(--mobile-gutter) * 2)))}
  .sp-mobile-controls{gap:12px}
  .sp-mobile-controls .sp-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px;margin:0}
  .sp-mobile-controls .sp-filters .os-chip{width:100%;min-height:44px;justify-content:center;white-space:normal;text-align:center}
  .sp-mobile-controls .os-head-r{display:flex;flex-direction:column;align-items:stretch;width:100%}
  .sp-mobile-controls .os-head-r>div{width:100%}
  .sp-layout{display:flex;flex-direction:column;padding:12px;gap:12px}
  .sp-layout>.mobile-sheet-trigger{box-shadow:none;background:var(--bg2)}
  .sp-side{gap:8px}
  .sp-side-title{display:none}
  .sp-cats{gap:7px}
  .sp-cat{min-height:46px;padding:10px 12px}
  .sp-main{width:100%;gap:10px}
  .sp-sec-head{gap:4px}
  .sp-sec-head h3{font-size:14px;line-height:1.35}
  .sp-sec-head .sp-sub{font-size:11px;line-height:1.45}
  .sp-row{display:grid;grid-template-columns:32px repeat(3,minmax(0,1fr));align-items:start;gap:8px 7px;padding:12px;border-radius:12px}
  .sp-rk{grid-column:1;grid-row:1;min-width:0;text-align:left}
  .sp-mvbox{grid-column:1;grid-row:2;width:auto}
  .sp-main-c{grid-column:2/5;grid-row:1/3;min-width:0}
  .sp-name{font-size:13.5px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
  .sp-meta{font-size:11px;overflow-wrap:anywhere}
  .sp-row>.os-stat{grid-row:3;min-width:0!important;padding-top:8px;border-top:1px solid var(--line);text-align:left}
  .sp-row>.os-stat:nth-of-type(2){grid-column:2}
  .sp-row>.os-stat:nth-of-type(3){grid-column:3}
  .sp-row>.os-stat:nth-of-type(4){grid-column:4}
  .sp-row>.os-stat .l{font-size:9px;white-space:normal}
  .sp-row>.os-stat .v{font-size:12.5px;white-space:normal;overflow-wrap:anywhere}
  .sp-recbox{grid-column:2/5;grid-row:4;width:auto;min-width:0;text-align:left;padding-top:2px}
  .sp-rec{white-space:normal;line-height:1.35}

  /* All ordinary dialogs behave like phone sheets. */
  .modal-overlay{align-items:flex-end;padding:0}
  .modal-card{width:100%;max-width:none;max-height:92dvh;margin:0;padding:22px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius:22px 22px 0 0}
  .modal-close{top:12px;right:12px;width:44px;height:44px}
  #osModal .os-modal-wrap{width:100%}
  #osModal .modal-card{width:100%;display:flex;flex-direction:column;padding:22px 16px calc(18px + env(safe-area-inset-bottom))}
  #osModal .modal-head,#osModalStats,#osModalTop,#osModal .os-tools-row,#osModal .modal-chart,#osModalLegend,#osModalSop{width:100%}
  #osModalStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #osModal .modal-chart{height:250px}

  .foot{display:none}
}

@media(max-width:360px){
  :root{--mobile-gutter:9px}
  .kpi .k-val{font-size:16.5px}
  #osFilterBar .os-toolbar{grid-template-columns:1fr}
  .os-snapmode #osFilterBar .os-toolbar>#osSourceMount{grid-column:auto}
  .sp-row>.os-stat .v{font-size:11.5px}
}

@media(max-width:720px) and (orientation:landscape){
  :root{--mobile-nav-h:58px}
  .mobile-tabbar:not([hidden]){left:50%;right:auto;width:min(520px,calc(100% - 16px));transform:translateX(-50%);min-height:58px}
  .mobile-tabbar button{min-height:44px;flex-direction:row;gap:7px}
  .mobile-sheet-panel{max-height:92dvh!important}
}

@media(prefers-reduced-motion:reduce){
  .mobile-sheet-panel,.mobile-tabbar button,.mobile-more-icon{transition:none!important}
}

/* ============================================================
   TAB 3: LIST ECOMMERCE (katalog DB — katalog.js) + polesan CHECKLIST TIM
   ============================================================ */
.kt-head .os-head-r{gap:8px}
/* Filter bar LIST ECOMMERCE & CHECKLIST TIM (pola STOCK ALERT): baris 1 = cari ·
   Urutkan (ber-ikon) · aksi · Reset; baris 2 = grid filter berlebar sama. Lebar
   tiap tombol ditentukan grid/flex-basis, bukan isinya, sehingga memilih nilai
   tidak menggeser tata letak; nilai panjang terpotong (judul = teks lengkap). */
.fx-filterbar .os-bar-row>.btn-ghost,.fx-filterbar .os-bar-row>.kt-toggle{flex:0 0 auto;min-height:38px}
.fx-filterbar .os-sort-dd{flex:0 0 260px;min-width:0}
.fx-filterbar .os-sort-dd .dd,.fx-filterbar .os-sort-dd .dd-btn{width:100%;max-width:none}
.fx-filterbar .os-sort-dd .dd-btn .val{flex:1 1 auto;min-width:0;max-width:none;text-align:right}
.fx-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin:0}
.fx-grid-4{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}
.fx-grid>div{min-width:0}
.fx-grid>div[hidden]{display:none}
.fx-grid .dd,.fx-grid .dd-btn{width:100%;max-width:none}
.fx-grid .dd-btn{justify-content:space-between}
.fx-grid .dd-btn .lbl,.fx-grid .dd-btn .car{flex:0 0 auto;white-space:nowrap}
.fx-grid .dd-btn .lbl{color:#fff;font-weight:700}
:root[data-theme="light"] .fx-grid .dd-btn .lbl{color:var(--text)}
.fx-grid .dd-btn .val{flex:1 1 auto;min-width:0;max-width:none;text-align:right;color:var(--muted)}
.fx-grid .dd-btn.filtered .val{color:var(--text)}
@media(max-width:1000px){
  .fx-grid{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1101px) and (max-width:1349px){
  :root:not(.sb-mini) body.has-sidebar .fx-grid{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1101px) and (max-width:1149px){
  :root.sb-mini body.has-sidebar .fx-grid{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* HP: dua kolom, label di atas nilai supaya nilai tetap terbaca */
@media(max-width:640px){
  .fx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fx-grid .dd-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;row-gap:2px;text-align:left}
  .fx-grid .dd-btn .lbl{font-size:10.5px}
  .fx-grid .dd-btn .val{grid-row:2;text-align:left}
  .fx-grid .dd-btn .car{grid-column:2;grid-row:1/3}
  .fx-filterbar .os-bar-row .os-sort-dd{flex:1 1 0;min-width:0}
  .fx-filterbar .os-sort-dd .dd-btn .lbl{display:none} /* ikon urut sudah menandai */
  .fx-filterbar .os-sort-dd .dd-btn .val{text-align:left}
}
#ktFilterBar .dd-btn:disabled{opacity:.6;cursor:not-allowed}
.kt-category-hint{margin:8px 0 0;color:var(--muted);font-size:12px}
.kt-cards{grid-template-columns:repeat(8,1fr)}
.kt-cards .os-card{cursor:pointer;text-align:left}
.kt-cards .os-card .ic{font-size:13px;color:var(--muted2)}
.kt-toggle{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;font-weight:600;
  background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:0 12px;min-height:40px;cursor:pointer;white-space:nowrap}
.kt-toggle input{accent-color:var(--accent)}
.kt-toggle:has(input:checked){border-color:rgba(244,84,76,.5);color:var(--down)}
/* baris produk: nama+warna menonjol · kode · badge · statistik penting di kanan */
.kt-row{cursor:pointer}
.kt-row .os-name{display:flex;align-items:baseline;gap:9px;white-space:normal}
.kt-nm{font-size:14.5px;font-weight:700}
.kt-warna{color:var(--muted);font-weight:500;font-size:13px}
.kt-codes{display:flex;gap:6px;flex-wrap:wrap}
.kt-alias{color:var(--gold);border-color:rgba(245,196,81,.4)}
.kt-stats{display:grid;grid-template-columns:repeat(4,minmax(86px,auto));gap:6px 18px;flex:0 0 auto}
.kt-stat{display:flex;flex-direction:column;align-items:flex-end;min-width:0}
.kt-stat .l{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted2)}
.kt-stat b{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kt-stat-cl b{color:var(--muted)}
/* ---- drawer detail produk (kanan) ---- */
.kt-drawer-ov{position:fixed;inset:0;z-index:85;background:rgba(5,8,13,.55);backdrop-filter:blur(3px);animation:fade .15s ease}
.kt-drawer-ov[hidden]{display:none}
.kt-info-card{width:min(800px,94vw);max-height:90dvh;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.kt-info-tools,.kt-info-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kt-info-tools{justify-content:space-between}
.kt-info-fields{min-height:0;overflow:auto;padding:2px 4px 2px 0}
.kt-info-fields fieldset{border:1px solid var(--line);border-radius:var(--r-inner);padding:10px 12px;margin:0 0 14px;min-width:0}
.kt-info-fields legend{padding:0 6px;font-weight:700;font-size:13px;color:var(--text)}
.kt-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.kt-info-grid label{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px;border-radius:6px;cursor:pointer;font-size:13px;overflow-wrap:anywhere}
.kt-info-grid label:hover{background:var(--card2)}
.kt-info-grid input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--accent2)}
.kt-info-row{min-width:0;padding:8px;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;align-items:stretch;gap:6px}
.kt-info-grid .kt-info-name{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:0;cursor:default;font-size:12px;color:var(--muted)}
.kt-info-name input{width:100%;min-width:0;min-height:40px;border:1px solid var(--line2);border-radius:7px;padding:8px;background:var(--bg2);color:var(--text);font:inherit}
.kt-info-override{align-self:flex-start;min-height:36px;font-size:12px}
.kt-info-override[aria-pressed=true]{color:var(--down);border-color:var(--down)}
.kt-info-warning{font-size:12px;color:var(--down)}
.kt-info-grid label:focus-within{outline:2px solid var(--accent2);outline-offset:-2px}
.kt-info-footer{border-top:1px solid var(--line);padding-top:14px;flex-shrink:0;justify-content:flex-end}
.kt-info-footer .card-sub{flex:1;min-width:170px;margin:0}
.kt-pe-fields fieldset{display:flex;flex-direction:column;gap:10px}
.kt-pe-mode{align-self:flex-start}
.kt-pe-pick{display:flex;flex-direction:column;gap:8px}
.kt-pe-sub{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kt-pe-chips{display:flex;flex-wrap:wrap;gap:6px}
.kt-pe-chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 10px;border:1px solid var(--line2);border-radius:999px;font-size:13px;cursor:pointer;background:var(--bg2)}
.kt-pe-chip:hover{background:var(--card2)}
.kt-pe-chip:focus-within{outline:2px solid var(--accent2);outline-offset:1px}
.kt-pe-chip:has(input:checked){border-color:var(--accent2)}
.kt-pe-chip input{width:16px;height:16px;margin:0;accent-color:var(--accent2)}
.kt-pe-chip small{font-size:11px;color:var(--muted2)}
.kt-pe-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.kt-pe-note{margin:0;font-size:12px;color:var(--down)}
@media(max-width:540px){.kt-info-grid{grid-template-columns:1fr}.kt-info-footer .card-sub{flex-basis:100%}.kt-info-card{gap:12px}}
.kt-drawer{position:absolute;top:0;right:0;bottom:0;width:min(760px,96vw);background:var(--card);border-left:1px solid var(--line2);
  box-shadow:var(--shadow-pop);display:flex;flex-direction:column;animation:kt-slide .2s ease}
#ktDrawer .kt-drawer{width:min(100vw,max(720px,50vw))}
@keyframes kt-slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.kt-dr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px 10px;border-bottom:1px solid var(--line)}
.kt-dr-title{min-width:0;display:flex;flex-direction:column;gap:7px}
.kt-dr-codes{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.kt-dr-title h3{font-size:18px;font-weight:700;line-height:1.3}
.kt-dr-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}
.kt-dr-actions .btn-ghost{min-height:34px;padding:6px 11px;font-size:12.5px}
.kt-dr-close{position:static;width:34px;height:34px}
.kt-dr-sub{display:flex;gap:6px 18px;flex-wrap:wrap;padding:10px 20px;color:var(--muted);font-size:12.5px;border-bottom:1px solid var(--line)}
.kt-dr-sub b{color:var(--text);font-variant-numeric:tabular-nums}
.kt-dr-tabs{margin:10px 20px 0;flex-wrap:wrap;gap:2px}
.kt-dr-tabs button{padding:6px 11px;font-size:12.5px}
.kt-dr-body{flex:1;overflow:auto;padding:14px 20px 26px;scrollbar-width:thin}
.kt-hint{color:var(--muted);font-size:var(--fs-small);line-height:1.5;margin-bottom:12px;padding:9px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-inner)}
.kt-hint b{color:var(--text)} .kt-hint a{color:var(--accent)}
.kt-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.kt-price-layout{display:flex;flex-direction:column;gap:12px;min-width:0}
.kt-price-live .kt-field.ro{padding:16px;background:var(--bg2);border-style:solid;opacity:1}
.kt-price-live .kt-fv{font-size:24px;font-weight:700}
.kt-price-main{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kt-price-main .kt-field{min-width:0;padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 4px;align-content:start}
.kt-price-main .kt-fl{grid-column:1;grid-row:1;min-height:0;line-height:15px;overflow-wrap:anywhere}
.kt-price-main .kt-field-line{display:contents}
.kt-price-main .kt-fv{grid-column:1/-1;grid-row:2;font-size:20px;font-weight:700;line-height:1.3}
.kt-price-main .kt-field-actions{grid-column:2;grid-row:1;align-self:start;flex-direction:row;gap:0}
.kt-price-main .kt-icon-btn{width:28px;height:26px}
.kt-price-main .kt-field.editing .kt-field-actions{flex-wrap:wrap;max-width:112px;gap:4px}
.kt-price-main .kt-edit-msg{grid-column:1/-1}
.kt-price-layout>.kt-hint{margin:0}
/* Stok & penjualan: seksi berjudul, semua kartu satu gaya (solid, tanpa dashed/opacity .ro) */
.kt-stock-layout{display:flex;flex-direction:column;gap:18px}
.kt-stock-sec{display:flex;flex-direction:column;gap:10px;min-width:0}
.kt-stock-h{margin:0;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:10px}
.kt-stock-h::after{content:"";flex:1;height:1px;background:var(--line)}
.kt-stock-grp{display:grid;gap:10px}
.kt-stock-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.kt-stock-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.kt-stock-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.kt-stock-rest{grid-template-columns:repeat(2,minmax(0,1fr))}
.kt-stock-layout .kt-field,.kt-stock-layout .kt-field.ro{min-width:0;padding:11px 13px;gap:6px;background:var(--card);
  border:1px solid var(--line);opacity:1}
.kt-stock-layout .kt-fl{flex-wrap:wrap;gap:6px;overflow-wrap:anywhere;letter-spacing:.3px}
.kt-stock-layout .kt-fv{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25}
.kt-stock-wide .kt-field,.kt-stock-wide .kt-field.ro{padding:14px 16px}
.kt-stock-wide .kt-fv{font-size:26px}
.kt-stock-sec:first-child .kt-stock-wide .kt-field{border-color:var(--line2)}
.kt-stock-layout .kt-period{font-size:12px;color:var(--muted);font-weight:600;margin-top:-2px}
.kt-stock-layout .kt-field-line{margin-top:auto}   /* angka sejajar walau label membungkus */
.kt-stock-sales .kt-field[data-key=jual_bulan_ini],.kt-stock-sales .kt-field.ro[data-key=jual_bulan_ini]{border:2px solid var(--up);padding:10px 12px}
.kt-stock-layout>.kt-hint{margin:0}.kt-stock-layout summary{cursor:pointer;color:var(--text)}
@media(max-width:650px){.kt-stock-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.kt-stock-three,.kt-stock-rest{grid-template-columns:1fr}}
/* LIVE PRICE + kartu diskon dari pricelist berdampingan */
.kt-price-live{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:10px}
.kt-price-live .kt-price-disc.ro{padding:16px;background:var(--bg2);border-style:solid;opacity:1;min-width:200px}
.kt-price-disc .kt-fv{font-size:24px;font-weight:700;color:var(--up);font-variant-numeric:tabular-nums}
@media(max-width:540px){.kt-price-live{grid-template-columns:1fr}}
@media(max-width:540px){.kt-price-main{grid-template-columns:1fr}.kt-price-main .kt-fl{min-height:0}}
@media(pointer:coarse){.kt-price-main .kt-icon-btn{width:44px;height:44px}}
.kt-display-layout{display:flex;flex-direction:column;gap:10px;min-width:0}
.kt-display-identity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kt-display-layout .kt-field{min-width:0}
@media(max-width:540px){.kt-display-identity{grid-template-columns:1fr}}
/* tabel Display toko (katalog.js dispErpCells / dispManualCells) */
.kt-dt-sum{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.kt-dt-sync{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px}
.kt-dt-ref{padding:4px 10px;font-size:12px}
.kt-dt-sum b{color:var(--text)}
.kt-dt-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--bg2)}
.kt-dt{width:100%;border-collapse:collapse;font-size:13px}
.kt-dt th,.kt-dt td{padding:10px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.kt-dt thead th{border-top:0;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted2);white-space:nowrap}
.kt-dt .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.kt-dt tbody th{font-weight:400;white-space:nowrap}
.kt-dt tbody th b{display:block}
.kt-dt small{display:block;margin-top:2px;font-size:11px;color:var(--muted2);font-weight:400}
.kt-dt td small{max-width:260px;white-space:normal}
.kt-dt .kt-req-chip{margin:4px 0 0}
.kt-dt-row.is-tarik th b{text-decoration:line-through;color:var(--muted)}
.kt-ds{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;
  border:1px solid var(--line2);color:var(--text);background:var(--bg)}
.kt-ds.ok{color:var(--up);background:var(--up-soft);border-color:color-mix(in srgb,var(--up) 45%,transparent)}
.kt-ds.info{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.kt-ds.warn{color:#f59e0b;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.45)}
.kt-ds.bongkar{color:#fb923c;background:rgba(251,146,60,.12);border-color:rgba(251,146,60,.45)}
.kt-ds.jual{color:#c084fc;background:rgba(192,132,252,.12);border-color:rgba(192,132,252,.45)}
.kt-ds.tarik{color:var(--muted2);background:none}
:root[data-theme="light"] .kt-ds.warn{color:#b45309}
:root[data-theme="light"] .kt-ds.bongkar{color:#c2410c}
:root[data-theme="light"] .kt-ds.jual{color:#7e22ce}
.kt-dt-h{margin:6px 0 0;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted2)}
.kt-dt-manual{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:540px){.kt-dt-manual{grid-template-columns:1fr}}
/* tab Checklist panel LIST ECOMMERCE = checklist NEW per tugas utama (katalog.js checklistHTML) */
.kt-ck-top{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
  margin-bottom:12px;color:var(--muted);font-size:var(--fs-small)}
.kt-ck-top b{color:var(--text);font-size:14px}
.kt-ck-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.kt-ck-grp{border:1px solid var(--line);border-radius:var(--r-inner);background:var(--bg2);padding:10px 12px 6px;min-width:0}
.kt-ck-head{display:flex;align-items:center;gap:8px;min-width:0}
.kt-ck-head b{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kt-ck-frac{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.kt-ck-frac.is-full{color:var(--up)}
.kt-ck-bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin:8px 0 4px}
.kt-ck-bar i{display:block;height:100%;border-radius:2px}
.kt-ck-list{list-style:none;margin:0;padding:0}
.kt-ck-row{display:flex;align-items:flex-start;gap:9px;padding:7px 0;border-top:1px solid var(--line)}
.kt-ck-row:first-child{border-top:0}
.kt-ck-row .kt-cl-mark{margin-top:2px}
.kt-ck-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.kt-ck-nm{font-size:13px;color:var(--text);overflow-wrap:anywhere}
.kt-ck-row.is-done .kt-ck-nm{color:var(--muted)}
.kt-ck-note{font-size:11.5px;color:var(--down);overflow-wrap:anywhere}
.kt-ck-row.is-issue .kt-cl-mark{border-color:var(--down);background:var(--down-soft)}
.kt-ck-st{font-size:11.5px;color:var(--muted2);overflow-wrap:anywhere}
.kt-ck-side{display:flex;align-items:center;gap:6px;flex:0 0 auto;max-width:45%}
.kt-ck-side .kt-req-chip{margin-left:0}
.kt-ck-row.is-locked,.kt-field.is-locked{opacity:.55}
.kt-hint-foot{margin:12px 0 0}
@media(max-width:760px){.kt-ck-grid{grid-template-columns:1fr}}
.kt-field-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.kt-field{display:flex;flex-direction:column;gap:4px;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--bg2);
  transition:border-color .12s,box-shadow .12s}
.kt-field:focus-within{border-color:var(--accent2);box-shadow:0 0 0 3px var(--field-ring)}
.kt-field.ro{cursor:default;background:transparent;border-style:dashed;opacity:.85}
.kt-field.editing{border-color:var(--accent2)}
.kt-field.saved{border-color:var(--up);box-shadow:0 0 0 3px var(--up-soft)}
.kt-fl{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted2)}
.kt-fv{font-size:var(--fs-body);color:var(--text);overflow-wrap:anywhere;min-height:20px}
.kt-field-line{display:flex;align-items:center;gap:8px;min-width:0}
.kt-field-line .kt-fv{flex:1;min-width:0}
.kt-field-actions{display:flex;gap:4px;flex:0 0 auto}
.kt-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid transparent;
  border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.kt-icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kt-icon-btn:hover:not(:disabled){color:var(--text);background:var(--card2);border-color:var(--line2)}
.kt-icon-btn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.kt-icon-btn:disabled{opacity:.5;cursor:wait}
.kt-icon-btn.copied{color:var(--up)}
.kt-field .kt-in{width:100%;min-width:0;padding:5px 7px;font:inherit;line-height:inherit}
.kt-field textarea.kt-in{resize:vertical;min-height:60px}
.kt-field-actions .kt-save,.kt-field-actions .kt-cancel{min-height:32px;padding:5px 7px;font-size:12px}
.kt-field-cl .kt-fl{text-transform:none;letter-spacing:0;font-size:13px;color:var(--text);cursor:pointer}
.kt-field-cl .kt-fv{display:flex;align-items:center;gap:8px}
.kt-cl-box{accent-color:var(--up);width:16px;height:16px}
.kt-field-cl .kt-fl{cursor:default}
.kt-cl-mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;border:1.5px solid var(--line2);border-radius:4px;font-size:11px;font-weight:800;line-height:1;color:#fff}
.kt-cl-mark.on{background:var(--up);border-color:var(--up)}
.kt-edit-msg{color:var(--down);font-size:12px;overflow-wrap:anywhere}
.kt-edit-msg:empty{display:none}
select.ked-input{appearance:auto}
body.kt-drawer-open{overflow:hidden}
/* ---- tambah produk ---- */
.kt-new-card{width:min(860px,94vw)}
.kt-new-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 14px;margin-top:14px;max-height:60vh;overflow:auto;padding:2px}
.kt-new-sheet{grid-column:1/-1;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12.5px;font-weight:600}
.kt-new-f{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted2)}
.kt-new-f.req span::after{content:"";}
.kt-new-f.req{color:var(--accent)}
/* ---- ekspor ---- */
.kt-ex-opts{display:grid;gap:10px;margin:16px 0 6px}
.kt-ex-opts[hidden]{display:none}
.kt-ex-opt{display:flex;flex-direction:column;gap:3px;text-align:left;padding:13px 15px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-inner);color:var(--text);font-family:inherit}
.kt-ex-opt span{color:var(--muted);font-size:var(--fs-small)}
.kt-ex-opt:hover{border-color:var(--accent2);background:rgba(91,157,255,.08)}
.kt-ex-opt:disabled{opacity:.5;cursor:wait}
#ktExportModal.custom .modal-card{width:min(760px,94vw)}
.kt-ex-search{display:flex;flex-direction:column;gap:6px;margin:14px 0 10px;font-size:var(--fs-small);color:var(--muted)}
.kt-ex-search input{height:44px}
.kt-ex-tools,.kt-ex-footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kt-ex-tools>span{margin-left:auto;color:var(--muted);font-size:var(--fs-small)}
.kt-ex-required{margin:10px 0}
.kt-ex-columns{height:42vh;overflow:auto;scrollbar-gutter:stable;border:1px solid var(--line);border-radius:var(--r-inner);padding:10px}
.kt-ex-group h4{font-size:12px;color:var(--muted);margin:12px 0 6px}
.kt-ex-group:first-child h4{margin-top:0}
.kt-ex-group>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}
.kt-ex-column{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:6px;font-size:12px;cursor:pointer;overflow-wrap:anywhere;min-width:0}
.kt-ex-column:hover{background:var(--bg2)}
.kt-ex-column input{flex-shrink:0;margin-top:2px;accent-color:var(--accent2)}
.kt-ex-column small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.kt-ex-footer{justify-content:space-between;margin-top:14px}
@media(max-width:540px){.kt-ex-group>div{grid-template-columns:1fr}.kt-ex-columns{height:36dvh}.kt-ex-tools>span{flex-basis:100%;margin-left:0}}
@media(pointer:coarse){.kt-ex-column{min-height:44px}.kt-ex-tools button,.kt-ex-footer button{min-height:44px}}
/* ---- impor ---- */
.kt-im-mode{margin:12px 0 4px;flex-wrap:wrap}
.kt-im-mode button{padding:7px 13px}
/* ---- checklist: tombol divisi & catatan ---- */
.kdivrow-btn{background:none;border:0;color:inherit;width:100%;text-align:left;padding:3px 4px;border-radius:7px;font-family:inherit;cursor:pointer}
.kdivrow-btn:hover{background:rgba(91,157,255,.08)}
.kdivrow-btn.on{background:rgba(91,157,255,.14);box-shadow:inset 0 0 0 1px rgba(91,157,255,.4)}
.kdh-all{margin-left:8px;min-height:24px;padding:2px 9px;font-size:11px;border-radius:999px}
.ktask-note{margin-left:auto;background:none;border:1px solid transparent;color:var(--muted2);border-radius:6px;padding:1px 6px;font-size:12px;opacity:.55;flex:0 0 auto}
.ktask:hover .ktask-note,.ktask-note:focus-visible{opacity:1}
.ktask-note:hover{color:var(--accent);border-color:var(--line2);background:var(--bg)}
.ktask .ktval{margin-left:0}
.fx-filterbar .kpi-legend{margin-top:12px;align-items:center}
.kpi-legend-help{margin-left:auto}
.kpi-legend-help .kpi-meta-btn{width:24px;height:24px;font-size:12px}
.kpi-legend-help .kpi-meta-tip{left:auto;right:0;width:min(420px,calc(100vw - 44px))}
.kpi-legend-list{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:6px}
.kpi-goedit{margin-left:auto}
@media(max-width:1100px){.kt-cards{grid-template-columns:repeat(4,1fr)}.kt-stats{grid-template-columns:repeat(2,minmax(86px,auto))}}
@media(max-width:640px){.kt-cards{grid-template-columns:repeat(2,1fr)}.kt-row{flex-wrap:wrap}.kt-stats{width:100%;grid-template-columns:repeat(4,1fr)}.kt-stat{align-items:flex-start}
  .kt-drawer{width:100vw}.kt-fields{grid-template-columns:1fr}}
@media(max-width:980px){#ktDrawer .kt-drawer{width:100vw}}
@media(max-width:640px){#ktDrawer .kt-dr-head{flex-direction:column}#ktDrawer .kt-dr-title{width:100%}
  #ktDrawer .kt-dr-actions{width:100%;justify-content:flex-start}}
@media(pointer:coarse){.kt-icon-btn{width:44px;height:44px}.kt-field-actions .kt-save,.kt-field-actions .kt-cancel{min-height:44px}}

/* ---------- CHECKLIST TIM: penanggung jawab tugas & tampilan Tim ----------
   Chip nama: abu-abu = ditugaskan, hijau = selesai (kpi.js pjChip). */
.ktpj{flex:0 0 auto;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;font-weight:600;line-height:1.5;color:var(--muted2);background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-family:inherit}
.ktpj.is-done{color:var(--up);background:var(--up-soft);border-color:rgba(34,197,94,.35)}
.ktpj.is-empty{color:var(--muted2);border-style:dashed;background:none;font-weight:500;opacity:.7}
.ktpj.is-btn{cursor:pointer;transition:.15s}
.ktpj.is-btn:hover,.ktpj.is-btn:focus-visible{border-color:var(--accent2);color:var(--text);opacity:1}
.ktpj.is-done.is-btn:hover{color:var(--up)}
.ktask .ktpj{margin-left:auto}
.ktask .ktpj + .ktask-note{margin-left:0}
/* lokasi display ERP (kpi.js erpTaskHTML): chip ERP + request + tombol Proses */
.ktpj.is-erp{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ktask .ktpj + .ktpj,.ktask .ktpj + .ktreq-btn{margin-left:4px}
.ktreq-btn{flex:0 0 auto;padding:1px 9px;min-height:0;font-size:11px;font-weight:650;border-radius:999px}
.ktask.is-erp label{cursor:default}
.ktask.locked label{cursor:not-allowed}
.ktask.locked .kdot{opacity:.55}
.kpi-legend .ktpj{vertical-align:1px;margin-right:3px}
.kdh-pj{margin-left:8px;min-height:24px;padding:2px 7px;font-size:11px;border-radius:999px}
.kdh-pj + .kdh-all{margin-left:4px}
.kpj-menu{position:fixed;top:0;left:0;width:260px;z-index:90}
.kpj-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:2px 6px 8px}
.kpj-menu .dd-opt .kmuted{font-size:11px}
.kpj-lepas .nm{color:var(--down)}
.kact-item.assign{border-color:rgba(124,58,237,.3)}

.kbulk-card{width:min(520px,94vw);display:flex;flex-direction:column;gap:12px}
.kbulk-l{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted)}
.kbulk-l select{width:100%}
.kbulk-tasks{display:flex;flex-wrap:wrap;gap:6px 14px;font-weight:500;color:var(--text);font-size:13px}
.kbulk-tasks label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.kbulk-chk{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--text);cursor:pointer}
.kbulk-warn{color:var(--gold);font-size:12px}
.kbulk-err{color:var(--down);font-size:12.5px;min-height:1em}
.kbulk-actions{display:flex;justify-content:flex-end;gap:8px}
/* Upload checklist NEW (kpi.js upOpen/upReport) */
.kup-card:focus{outline:none}
.kup-drop{margin-top:14px}
.kup-busy{margin-top:22px}
.kup-chg{margin-top:12px;font-size:var(--fs-small)}
.kup-chg ul{max-height:340px}
.kup-actions{margin-top:16px;flex-wrap:wrap}

.ktim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px}
.ktim-div{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-inner);padding:12px 14px}
.ktim-div h4{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-bottom:8px}
.ktim-nopic{color:var(--gold)}
.ktim-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.ktim-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 4px;border-top:1px solid var(--line)}
.ktim-row:first-child{border-top:0}
.ktim-nm{display:flex;flex-direction:column;min-width:0;flex:1 1 120px}
.ktim-nm small{color:var(--muted2);font-size:11px}
.ktim-load{color:var(--muted2);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ktim-load b{color:var(--text)}
.ktim-edit{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ktim-edit select{min-height:30px;font-size:12px}
.ktim-save{min-height:30px;padding:4px 12px;font-size:12px}
.ktim-save:disabled{opacity:.35;cursor:default}
#kpiTimCard .card-sub{max-width:none}
.ktim-nm b .kmuted{font-weight:500;font-size:12px}
@media(max-width:640px){
  .ktim-grid{grid-template-columns:1fr}
  .ktpj{max-width:90px}
}
.ktim-div h4 .ktim-divbtn{min-height:24px;padding:1px 7px;font-size:12px;border-radius:8px}
.ktim-div h4 .kdh-frac + .ktim-divbtn{margin-left:8px}
.ktim-divform{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.ktim-divform input[type=text]{flex:1 1 160px;min-height:32px;background:var(--bg);border:1px solid var(--line2);
  border-radius:9px;color:var(--text);padding:5px 10px;font:inherit;font-size:13px}
.ktim-divform input[type=color]{width:38px;height:32px;padding:2px;background:var(--bg);border:1px solid var(--line2);border-radius:9px;cursor:pointer}
.ktim-divform button{min-height:32px;padding:4px 12px;font-size:12px}
.ktim-new{border-style:dashed}
.ktim-tasks{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 10px;font-size:12px}
.ktim-task{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--muted)}
.ktim-empty{padding:6px 4px;font-size:12px}

/* ---- CHECKLIST TIM: switch NEW / OLD, status pendamping, Atur tugas (kpi.js) ---- */
.ck-mode-seg button{min-width:58px;font-weight:700;letter-spacing:.4px}
.ck-mode-seg button[data-m="old"].active{background:rgba(245,196,81,.16);color:var(--gold);border-color:rgba(245,196,81,.45)}
.ck-old-note{flex-basis:100%;margin:8px 0 0;padding:7px 11px;border-radius:9px;font-size:12.5px;color:var(--gold);
  background:rgba(245,196,81,.08);border:1px solid rgba(245,196,81,.35)}
:root[data-theme="light"] .ck-old-note,:root[data-theme="light"] .ck-mode-seg button[data-m="old"].active{color:#92400e;background:#fffbeb;border-color:#f59e0b}
.ck-old .ktask label{cursor:default}
.ck-old .ktask:hover{background:none}
.ktstatus{flex:none;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:0}
.ktstatus.is-btn{background:none;border:1px dashed rgba(245,196,81,.45);border-radius:999px;padding:0 7px;line-height:18px;cursor:pointer;font:inherit;font-size:11px;color:var(--gold)}
.ktstatus.is-btn:hover{border-style:solid}
.kt-req-list{margin-bottom:14px}
#kpiAturCard .card-sub{max-width:none}
.kat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:16px;margin-top:4px}
.kat-grup{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-inner);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.kat-grup.kat-new{border-style:dashed;margin-bottom:16px}
.kat-grup h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;font-weight:700}
.kat-tags{display:flex;gap:5px;flex-wrap:wrap;font-weight:500}
.kat-tools{display:inline-flex;gap:4px;margin-left:auto;flex:none}
.kat-btn{min-height:26px;min-width:28px;padding:1px 7px;font-size:12px;border-radius:8px}
.kat-btn:disabled{opacity:.3;cursor:default}
.kat-tlist{list-style:none;display:flex;flex-direction:column;gap:2px}
.kat-trow{display:flex;align-items:center;gap:8px;padding:5px 4px;border-top:1px solid var(--line);font-size:13px}
.kat-trow:first-child{border-top:0}
.kat-tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kat-empty{padding:6px 4px;font-size:12px}
.kat-add{align-self:flex-start;min-height:28px;padding:3px 11px;font-size:12px}
.kat-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px 12px;width:100%;font-size:12px;font-weight:600;color:var(--muted)}
.kat-form label{display:flex;flex-direction:column;gap:4px}
.kat-form .kat-chk{flex-direction:row;align-items:center;gap:7px;grid-column:1/-1;font-weight:500;color:var(--text)}
.kat-form input[type=text]{min-height:32px;background:var(--bg);border:1px solid var(--line2);border-radius:9px;color:var(--text);padding:5px 10px;font:inherit;font-size:13px;font-weight:500}
.kat-form input[type=color]{width:44px;height:32px;padding:2px;background:var(--bg);border:1px solid var(--line2);border-radius:9px;cursor:pointer}
.kat-form select{min-height:32px;font-size:12px}
.kat-help{grid-column:1/-1;color:var(--muted2);font-size:11.5px;font-weight:400;line-height:1.45}
.kat-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}
.kat-actions button{min-height:32px;padding:4px 14px;font-size:12px}
/* sembunyikan (arsip server): ikon mata; yang tersembunyi tetap di tempat, abu-abu, dgn tombol Tampilkan */
.kat-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.kat-show{display:inline-flex;align-items:center;gap:5px;color:var(--accent);border-color:rgba(91,157,255,.4)}
.kat-show:hover{color:var(--text);border-color:var(--accent2)}
.kat-handle-space{flex:none;width:26px}
.kat-hidden-tag{font-size:10.5px;color:var(--muted2);background:none;border:1px dashed var(--line2)}
.kat-trow.is-hidden .kat-tname{color:var(--muted2);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.18)}
.kat-grup.is-hidden{border-style:dashed;background:transparent}
.kat-grup.is-hidden h4 .kat-gname,.kat-grup.is-hidden .kdh-dot{opacity:.5}
.kat-grup.is-hidden .kat-gname{color:var(--muted2)}
/* kunci (hide but stay): tetap di tempat & bisa diseret, isi abu-abu */
.kat-lock-tag{font-size:10.5px;color:var(--gold);background:none;border:1px solid rgba(245,196,81,.4)}
.kat-trow.is-kunci .kat-tname,.kat-grup.is-kunci .kat-gname{color:var(--muted2)}
.kat-grup.is-kunci{background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.015) 10px 20px),var(--bg2)}
.kat-grup.is-kunci .kat-mode,.kat-grup.is-kunci .kat-tags,.kat-grup.is-kunci .kdh-dot{opacity:.5}
.kat-lock-help{margin:0;color:var(--gold)}
/* checklist produk: tugas / tugas utama dikunci = abu-abu, tidak bisa dipakai */
.ktask.is-kunci{opacity:.5;cursor:not-allowed}
.ktask.is-kunci label{cursor:not-allowed}
.ktask.is-kunci .ktname{color:var(--muted)}
.ktkunci{margin-left:auto;font-size:11px;opacity:.8}
.ktask.is-kunci .ktpj + .ktkunci,.ktask.is-kunci .ktval + .ktkunci{margin-left:4px}
.kdivgroup.is-kunci h4{color:var(--muted)}
.kdivgroup.is-kunci h4 .kdh-dot{opacity:.5}
.kdh-kunci{margin-left:auto;font-size:11px;font-weight:600;color:var(--gold)}
/* header CHECKLIST TIM dua baris: judul + ? + aksi di atas, pemilih di bawah
   (satu baris tidak muat di layar ber-sidebar — switch NEW/OLD tertutup) */
#pageKpi .ck-head{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:12px;min-height:0}
#pageKpi .ck-head-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
#pageKpi .ck-head-top .os-head-r{margin-left:auto;width:auto;flex-wrap:wrap;justify-content:flex-end}
#pageKpi .ck-head .kpi-head-switches{order:0;flex:none;width:100%;justify-content:flex-start;flex-wrap:wrap;gap:10px}
#pageKpi .ck-head .ck-mode-seg{margin-left:auto}
@media(max-width:640px){
  #pageKpi .ck-head-top .os-head-r{width:100%;justify-content:flex-start}
  #pageKpi .ck-head .ck-mode-seg{margin-left:0}
}
/* Atur tugas: pegangan seret, pilihan penugasan per tugas utama */
.kat-handle{flex:none;display:inline-grid;place-items:center;width:26px;height:28px;padding:0;border:1px solid transparent;
  border-radius:7px;background:none;color:var(--muted2);cursor:grab;touch-action:none}
.kat-handle svg{width:16px;height:16px;fill:currentColor}
.kat-handle:hover,.kat-handle:focus-visible{color:var(--text);border-color:var(--line2);background:var(--card2)}
.kat-handle:active{cursor:grabbing}
.kat-gname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kat-grup.is-dragging,.kat-trow.is-dragging{opacity:.45;outline:2px dashed var(--accent);outline-offset:2px}
.kat-dragging-t .kat-tlist[data-grup]{min-height:38px;border-radius:9px;outline:1px dashed var(--line2);outline-offset:3px}
.kat-mode{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.kat-mode-l{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted2)}
.kat-mode-seg button{font-size:12px;padding:5px 10px;min-height:30px}
.kat-mode .kat-help{flex-basis:100%;margin:0}
/* Tim: daftar anggota selebar penuh, kartu divisi di bawah */
.ktim-sec-head{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:18px 0 10px}
.ktim-sec-head h3{font-size:15px;font-weight:650;display:flex;align-items:baseline;gap:8px}
.ktim-sec-head h3 .kmuted{font-size:12px;font-weight:500}
.ktim-sec-head .btn-primary{margin-left:auto}
.ktim-search{margin-left:auto;min-width:220px;max-width:320px;flex:1}
.ktim-cols,.ktim-members .ktim-row{display:grid;align-items:center;gap:10px 14px;
  grid-template-columns:28px minmax(150px,1.3fr) 100px minmax(140px,1fr) 150px minmax(320px,auto)}
.ktim-cols{padding:0 10px 6px;font-size:10.5px;font-weight:700;letter-spacing:.45px;text-transform:uppercase;color:var(--muted2)}
.ktim-members{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-inner);padding:4px 10px;gap:0}
.ktim-members .ktim-row{padding:8px 0}
.ktim-divchip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;min-width:0}
.ktim-role .kmuted{font-size:12px}
.ktim-members .ktim-edit{justify-content:flex-end;flex-wrap:nowrap}
.ktim-sub{font-size:10.5px;font-weight:700;letter-spacing:.45px;text-transform:uppercase;color:var(--muted2);margin:6px 0 4px}
.ktim-task b{color:var(--text);font-weight:600}
.ktim-task.is-pic{border-color:rgba(91,157,255,.5);color:var(--text)}
@media(max-width:1250px){
  .ktim-cols{display:none}
  .ktim-members .ktim-row{grid-template-columns:28px minmax(0,1fr) auto;grid-auto-flow:row}
  .ktim-members .ktim-row>.ktim-divchip,.ktim-members .ktim-row>.ktim-load{grid-column:2/-1}
  .ktim-members .ktim-row>.ktim-edit{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
}

/* ---- MODE PUSH produk (push.js): badge, kontrol satu produk, pemilih massal ----
   Satu status per ART, dipakai STOCK ALERT (baris + modal) & LIST ECOMMERCE
   (baris + rel kiri panel detail). Warna oranye = prioritas dorong penjualan,
   terpisah dari warna alert stok. */
.os-badge.s-push{background:rgba(251,146,60,.16);color:#ffb37a;border-color:rgba(251,146,60,.5)}
:root[data-theme="light"] .os-badge.s-push{background:#ffedd5;color:#9a3412;border-color:#ea580c}
.push-ctl{display:flex;flex-direction:column;gap:10px}
.push-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 14px;white-space:nowrap;line-height:1.2;
  border-radius:10px;border:1px solid rgba(251,146,60,.55);background:rgba(251,146,60,.12);color:#ffb37a;
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s}
.push-btn:hover:not(:disabled){background:rgba(251,146,60,.22);border-color:#fb923c}
.push-btn:disabled{opacity:.55;cursor:not-allowed}
.push-ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pbulk-act .pbulk-push{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.push-ctl.is-on .push-btn{background:var(--bg2);border-color:var(--line2);color:var(--muted)}
.push-ctl.is-on .push-btn:hover:not(:disabled){color:var(--text);border-color:var(--muted2);background:var(--card2)}
:root[data-theme="light"] .push-btn{color:#9a3412;background:#fff7ed;border-color:#fb923c}
:root[data-theme="light"] .push-btn:hover:not(:disabled){background:#ffedd5}
.push-status{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;border:1px dashed var(--line2);background:var(--bg2)}
.push-status .l{color:var(--muted2);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.push-status b{font-size:14px;font-weight:750;color:var(--muted)}
.push-status small{color:var(--muted2);font-size:11px;overflow-wrap:anywhere}
.push-ctl.is-on .push-status{border-style:solid;border-color:rgba(251,146,60,.5);background:rgba(251,146,60,.1)}
.push-ctl.is-on .push-status b{color:#fb923c}
:root[data-theme="light"] .push-ctl.is-on .push-status{background:#fff7ed;border-color:#fb923c}
:root[data-theme="light"] .push-ctl.is-on .push-status b{color:#c2410c}
.push-ctl[hidden]{display:none}
/* LIST ECOMMERCE: rel di luar tepi kiri panel detail (lebar layar cukup):
   kontrol push (push.js) lalu Request display (katalog.js) */
.kt-push-rail{position:absolute;top:18px;right:calc(100% + 12px);width:max-content;min-width:176px;max-width:230px;padding:12px;border-radius:14px;
  display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow-pop)}
.kt-push-rail[hidden],.kt-req-ctl[hidden]{display:none}
.kt-push-rail .push-btn,.kt-push-rail .req-btn{width:100%}
#ktDrPush:not([hidden])+.kt-req-ctl{border-top:1px solid var(--line);padding-top:12px}
@media(max-width:980px){
  .kt-push-rail{position:static;order:1;width:auto;max-width:none;margin:10px 20px 0;padding:0;border:0;box-shadow:none;background:none;gap:8px}
  .kt-push-rail .push-ctl,.kt-push-rail .kt-req-ctl{flex-direction:row;align-items:stretch}
  #ktDrPush:not([hidden])+.kt-req-ctl{border-top:0;padding-top:0}
  .kt-push-rail .push-btn,.kt-push-rail .req-btn{width:auto;flex:0 0 auto}
  .kt-push-rail .push-status{flex:1;flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}
  .kt-drawer>.kt-dr-sub,.kt-drawer>.kt-dr-tabs,.kt-drawer>.kt-dr-body{order:2}
}
/* STOCK ALERT modal: kontrol mendatar di bawah badge status */
#osModalPush{grid-area:p;align-self:center;justify-self:end;flex-direction:row;align-items:stretch;gap:8px}
#osModalPush .push-status{flex-direction:row;align-items:baseline;gap:8px}
@media (max-width:900px){#osModalPush{margin-top:10px;justify-content:flex-start}}
/* ---- REQUEST DISPLAY (katalog.js rel kiri + seksi Display toko; kpi.js chip
   "Requested"). Warna sian = permintaan display, terpisah dari oranye push
   dan warna divisi. */
.kt-req-ctl{display:flex;flex-direction:column;gap:10px}
.req-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 14px;white-space:nowrap;line-height:1.2;
  border-radius:10px;border:1px solid rgba(34,211,238,.5);background:rgba(34,211,238,.1);color:#7ee3f5;
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s}
.req-btn:hover:not(:disabled){background:rgba(34,211,238,.2);border-color:#22d3ee}
.req-btn:disabled{opacity:.55;cursor:not-allowed}
.req-btn.active{background:var(--bg2);border-color:var(--line2);color:var(--muted)}
.req-btn.active:hover:not(:disabled){color:var(--text);border-color:var(--muted2);background:var(--card2)}
:root[data-theme="light"] .req-btn{color:#0e7490;background:#ecfeff;border-color:#06b6d4}
:root[data-theme="light"] .req-btn:hover:not(:disabled){background:#cffafe}
:root[data-theme="light"] .req-btn.active{color:var(--muted);background:var(--bg2);border-color:var(--line2)}
.kt-req-ctl.is-on .kt-req-status{border-style:solid;border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.08)}
.kt-req-ctl.is-on .kt-req-status b{color:#67e8f9}
:root[data-theme="light"] .kt-req-ctl.is-on .kt-req-status{background:#ecfeff;border-color:#06b6d4}
:root[data-theme="light"] .kt-req-ctl.is-on .kt-req-status b{color:#0e7490}
/* ---- REQUEST KONTEN / STORY (katalog.js rel kiri -> SOSMED PLANNER). Ungu =
   konten, merah muda = story (sama dengan halaman Request Konten, sosmed.css). */
.kt-kreq-ctl{display:flex;flex-direction:column;gap:12px}
.kt-kreq-ctl[hidden]{display:none}
.kt-push-rail>:not([hidden])~.kt-kreq-ctl{border-top:1px solid var(--line);padding-top:12px}
.kt-kreq{display:flex;flex-direction:column;gap:8px;--kr:167,139,250;--kr-tx:#c4b5fd}
.kt-kreq[data-j="story"]{--kr:244,114,182;--kr-tx:#f9a8d4}
.kreq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 14px;white-space:nowrap;line-height:1.2;width:100%;
  border-radius:10px;border:1px solid rgba(var(--kr),.5);background:rgba(var(--kr),.1);color:var(--kr-tx);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s}
.kreq-btn:hover:not(:disabled){background:rgba(var(--kr),.2);border-color:rgb(var(--kr))}
.kreq-btn:disabled{opacity:.55;cursor:not-allowed}
.kreq-btn.active{background:var(--bg2);border-color:var(--line2);color:var(--muted)}
.kreq-btn.active:hover:not(:disabled){color:var(--text);border-color:var(--muted2);background:var(--card2)}
.kreq-btn.active:disabled{opacity:.8}
.kt-kreq.is-on .kt-kreq-status{border-style:solid;border-color:rgba(var(--kr),.45);background:rgba(var(--kr),.08)}
.kt-kreq.is-on .kt-kreq-status b{color:var(--kr-tx)}
.kreq-c{font-style:italic}
.kreq-form label{display:flex;flex-direction:column;gap:6px}
.kreq-form .l{color:var(--kr-tx);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.kreq-form textarea{resize:vertical;min-height:64px;font-size:12.5px;width:100%;box-sizing:border-box}
.kreq-fa{display:flex;gap:6px;justify-content:flex-end}
.kreq-fa .btn-ghost,.kreq-fa .btn-primary{min-height:30px;padding:4px 12px;font-size:12px}
:root[data-theme="light"] .kt-kreq{--kr-tx:#6d28d9}
:root[data-theme="light"] .kt-kreq[data-j="story"]{--kr-tx:#be185d}
:root[data-theme="light"] .kreq-btn:not(.active){background:rgba(var(--kr),.08)}
@media(max-width:980px){
  .kt-push-rail .kt-kreq-ctl{gap:8px}
  .kt-push-rail>:not([hidden])~.kt-kreq-ctl{border-top:0;padding-top:0}
  .kt-push-rail .kt-kreq:not(.kreq-form){flex-direction:row;align-items:stretch}
  .kt-push-rail .kreq-btn{width:auto;flex:0 0 auto}
}
.os-badge.s-req{background:rgba(34,211,238,.12);color:#7ee3f5;border-color:rgba(34,211,238,.45)}
:root[data-theme="light"] .os-badge.s-req{background:#ecfeff;color:#0e7490;border-color:#06b6d4}
.kt-req-chip,.ktpj.ktreq{color:#7ee3f5;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.45);font-weight:650}
.kt-req-chip{display:inline-flex;align-items:center;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;white-space:nowrap}
:root[data-theme="light"] .kt-req-chip,:root[data-theme="light"] .ktpj.ktreq{color:#0e7490;background:#ecfeff;border-color:#06b6d4}
/* seksi Display toko dalam mode pilih: bar aksi menempel di atas, baris lokasi jadi pilihan */
.kt-req-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
  margin:0 0 12px;padding:10px 12px;border-radius:var(--r-inner);border:1px solid rgba(34,211,238,.45);background:var(--card);box-shadow:0 6px 16px -10px rgba(0,0,0,.5)}
.kt-req-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.kt-req-info b{font-size:13px}
.kt-req-info span{color:var(--muted2);font-size:12px}
.kt-req-act{display:flex;gap:8px;flex-wrap:wrap}
:root[data-theme="light"] .kt-req-bar{border-color:#06b6d4}
.kt-req-on .kt-req-pick{cursor:pointer;transition:background .15s}
.kt-req-on .kt-req-pick:hover{background:color-mix(in srgb,var(--bg2) 85%,var(--muted2) 15%)}
.kt-req-on .kt-req-pick.is-sel{background:rgba(34,211,238,.09);box-shadow:inset 3px 0 0 #22d3ee}
.kt-req-on .kt-req-pick.is-done{cursor:default;opacity:.7}
.kt-req-on .kt-field-actions{display:none}   /* mode pilih: hanya kotak centang request */
.kt-dt .kt-dt-pick{width:1%;padding-right:0}
.kt-req-check{display:flex;align-items:center;justify-content:center;padding:0 4px;cursor:pointer}
.kt-req-pick.is-done .kt-req-check{cursor:not-allowed}
.kt-req-box{width:18px;height:18px;accent-color:#06b6d4;cursor:inherit}
:root[data-theme="light"] .kt-req-on .kt-req-pick.is-sel{background:#ecfeff;box-shadow:inset 3px 0 0 #06b6d4}
/* request lokasi ERP sudah diproses: menunggu display tercatat di ERP */
.kt-req-chip.is-proses,.ktpj.ktreq.is-proses{color:#fbbf24;background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.45)}
:root[data-theme="light"] .kt-req-chip.is-proses,:root[data-theme="light"] .ktpj.ktreq.is-proses{color:#a16207;background:#fefce8;border-color:#eab308}
/* tombol header "Push massal" aktif */
#osPushBulk.on,#ktPushBulk.on{color:#fb923c;border-color:rgba(251,146,60,.6);background:rgba(251,146,60,.1)}
:root[data-theme="light"] #osPushBulk.on,:root[data-theme="light"] #ktPushBulk.on{color:#c2410c}
/* pemilih massal: baris jadi kotak pilih, bar aksi menempel di bawah layar */
.os-row.pbulk-row{cursor:pointer}
.os-row.pbulk-row:hover{transform:none;border-color:var(--muted2)}
.pbulk-ck{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:2px solid var(--line2);background:var(--field);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800}
.os-row.sel{border-color:#fb923c;background:color-mix(in srgb,var(--bg2) 88%,#fb923c 12%)}
.os-row.sel .pbulk-ck{background:#ea580c;border-color:#ea580c}
.os-row.sel .pbulk-ck::after{content:"✓"}
.pbulk-bar{position:sticky;bottom:14px;z-index:30;margin-top:14px;display:flex;align-items:center;justify-content:space-between;
  gap:10px 16px;flex-wrap:wrap;padding:10px 12px 10px 16px;border-radius:14px;border:1px solid rgba(251,146,60,.55);
  background:color-mix(in srgb,var(--card) 93%,#fb923c 7%);box-shadow:var(--shadow-pop)}
.pbulk-bar[hidden]{display:none}
.pbulk-info{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13.5px}
.pbulk-info b{font-size:17px;font-variant-numeric:tabular-nums}
.pbulk-sub{color:var(--muted2);font-size:12px}
.pbulk-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pbulk-act .btn-ghost,.pbulk-act .btn-primary{min-height:36px;padding:6px 12px;font-size:12.5px}
.pbulk-act .pbulk-push{background:#ea580c;border-color:#ea580c;color:#fff}
.pbulk-act .pbulk-push:hover:not(:disabled){background:#c2410c;border-color:#c2410c}
.pbulk-act button:disabled{opacity:.45;cursor:not-allowed}
.pbulk-act .pbulk-tool.on{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.os-badge.s-rec{background:rgba(245,196,81,.14);color:#f7d98d;border-color:rgba(245,196,81,.45)}
:root[data-theme="light"] .os-badge.s-rec{background:#fef9c3;color:#854d0e;border-color:#ca8a04}
body.pbulk-open .toast{bottom:calc(var(--pbulk-h,64px) + 32px)}
@media(max-width:720px){
  .pbulk-bar{bottom:calc(var(--mobile-nav-h) + 10px + env(safe-area-inset-bottom));padding:10px}
  .pbulk-act{justify-content:flex-start}
  body.pbulk-open .toast{bottom:calc(var(--mobile-nav-h) + var(--pbulk-h,120px) + 24px + env(safe-area-inset-bottom))}
}

/* ---------- DASAR HITUNG (popup penjelasan rumus STOCK ALERT, dasar_hitung.js) ----------
   Sidebar topik kiri + isi kanan; diagram murni HTML/CSS. Layar sempit:
   sidebar jadi baris topik bergulir horizontal di atas isi. */
.os-dh-btn{letter-spacing:.3px}
.os-dh-btn .ric{font-size:13px}
body.dh-lock{overflow:hidden}
.dh-modal{width:min(1120px,96vw);height:min(880px,92vh);max-height:none;padding:0;overflow:hidden;
  display:grid;grid-template-columns:262px minmax(0,1fr)}
.dh-modal .modal-close{z-index:3}
.dh-side{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.dh-side-head{padding:20px 16px 12px;border-bottom:1px solid var(--line)}
.dh-side-ttl{font-size:17px;font-weight:800;letter-spacing:.3px}
.dh-side-sub{color:var(--muted);font-size:12.5px;margin:2px 0 12px}
.dh-search{width:100%;background:var(--field);border:1px solid var(--field-line);color:var(--text);
  border-radius:9px;padding:8px 11px;font:inherit;font-size:13px}
.dh-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--field-ring)}
.dh-nav{overflow:auto;padding:8px 8px 16px;flex:1;min-height:0}
.dh-nav-grp{margin-top:8px}
.dh-nav-gl{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted2);padding:6px 10px 4px}
.dh-nav-i{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:1px solid transparent;
  color:var(--muted);font-size:13.5px;font-weight:550;padding:7px 10px;border-radius:9px;transition:.15s}
.dh-nav-i .ic{width:20px;text-align:center;flex:0 0 auto}
.dh-nav-i:hover{background:var(--card);color:var(--text)}
.dh-nav-i.on{background:var(--card);color:var(--text);border-color:var(--line2);box-shadow:inset 3px 0 0 var(--accent)}
.dh-nav-empty{color:var(--muted2);font-size:13px;padding:14px 10px}
.dh-main{overflow:auto;padding:22px 40px 26px;min-width:0;outline:none}
.dh-main>*{max-width:780px}
.dh-now{display:flex;flex-wrap:wrap;gap:6px;margin:0 44px 18px 0}
.dh-now span{background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--muted)}
.dh-now b{color:var(--text);font-weight:650}
.dh-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.dh-head-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:26px;flex:0 0 auto;
  background:linear-gradient(135deg,rgba(91,157,255,.18),rgba(91,157,255,.04));border:1px solid var(--line)}
.dh-head-grp{font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--accent)}
.dh-head h3{font-size:23px;font-weight:750;line-height:1.2}
.dh-inti{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(90deg,rgba(91,157,255,.12),rgba(91,157,255,.03));
  border:1px solid rgba(91,157,255,.3);border-radius:12px;padding:12px 16px;font-size:14.5px;line-height:1.6;margin-bottom:6px}
.dh-inti-l{flex:0 0 auto;background:var(--accent2);color:#fff;font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  border-radius:6px;padding:2px 8px;margin-top:3px}
.dh-body{font-size:14px;line-height:1.65;color:var(--text)}
.dh-body a{color:var(--accent);text-decoration:none;border-bottom:1px dashed currentColor}
.dh-body code,.dh-inti code{background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:0 5px;font-size:12.5px}
.dh-body small{color:var(--muted)}
.dh-h{font-size:15.5px;font-weight:700;margin:24px 0 8px;display:flex;align-items:center;gap:8px}
.dh-h::before{content:"";width:4px;height:16px;border-radius:3px;background:var(--accent);flex:0 0 auto}
.dh-p{margin:6px 0}
.dh-p.dh-small{font-size:13px;color:var(--muted)}
.dh-ul{margin:6px 0 6px 2px;list-style:none;display:flex;flex-direction:column;gap:6px}
.dh-ul li{position:relative;padding-left:20px}
.dh-ul li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.75}
.dh-ok{color:var(--up)}
.dh-bad{color:var(--down)}
.dh-yes{color:var(--up);font-weight:800}
.dh-no{color:var(--muted2)}
/* rumus: variabel = chip, pembagian = pecahan bertumpuk */
.dh-formula{margin:14px 0;border:1px solid var(--line2);border-radius:12px;background:var(--bg2);overflow:hidden}
.dh-f-lbl{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted2);padding:8px 14px 0}
.dh-f-body{padding:10px 14px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px}
.dh-f-note{border-top:1px dashed var(--line2);padding:8px 14px;font-size:12.5px;color:var(--muted)}
.dh-var{display:inline-block;background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:3px 9px;font-weight:650;font-size:13.5px;line-height:1.35}
.dh-var.acc{border-color:var(--accent2);color:var(--accent)}
.dh-var.ok{border-color:var(--up);color:var(--up)}
.dh-var.bad{border-color:var(--down);color:var(--down)}
.dh-op{color:var(--muted);font-weight:700;font-size:16px}
.dh-frac{display:inline-flex;flex-direction:column;align-items:center;text-align:center;vertical-align:middle;font-size:13px;font-weight:600}
.dh-frac>span{padding:2px 8px}
.dh-frac>span:first-child{border-bottom:2px solid var(--muted)}
.dh-frac .dh-op{font-size:13px}
/* callout */
.dh-call{margin:14px 0;border-radius:12px;padding:11px 14px;border:1px solid var(--line);border-left-width:4px;background:var(--bg2)}
.dh-call-t{font-weight:700;font-size:13.5px;margin-bottom:3px}
.dh-call-b{font-size:13.5px}
.dh-call.info{border-left-color:var(--accent)}
.dh-call.info .dh-call-t{color:var(--accent)}
.dh-call.warn{border-left-color:var(--gold)}
.dh-call.warn .dh-call-t{color:var(--gold)}
.dh-call .dh-ul{margin-top:4px}
/* chip */
.dh-chip{display:inline-block;border:1px solid var(--line2);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:650;white-space:nowrap;color:var(--muted)}
.dh-chip.ok{color:var(--up);border-color:var(--up);background:var(--up-soft)}
.dh-chip.bad{color:var(--down);border-color:var(--down);background:var(--down-soft)}
.dh-chip.warn{color:var(--gold);border-color:var(--gold);background:rgba(245,196,81,.1)}
.dh-chip.acc{color:var(--accent);border-color:var(--accent2);background:rgba(91,157,255,.1)}
/* tabel */
.dh-tbl-wrap{overflow-x:auto;margin:12px 0;border:1px solid var(--line);border-radius:12px}
.dh-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.dh-tbl th{background:var(--bg2);text-align:left;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:9px 12px;font-weight:700}
.dh-tbl td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
.dh-tbl tbody tr:hover td{background:var(--grid)}
.dh-tbl.center td:not(:first-child),.dh-tbl.center th:not(:first-child){text-align:center}
/* kotak contoh */
.dh-ex{margin:18px 0;border:1px solid var(--line);border-radius:14px;padding:32px 16px 14px;position:relative;
  background:linear-gradient(180deg,var(--card2),var(--card))}
.dh-ex-t{position:absolute;top:-1px;left:14px;background:var(--gold);color:#1a1405;font-size:11px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;padding:3px 10px;border-radius:0 0 8px 8px}
:root[data-theme="light"] .dh-ex-t{color:#fff}
.dh-ex .dh-tbl-wrap{margin:0}
/* struk hitung (senada .os-calc modal produk) */
.dh-struk{border:1px dashed var(--line2);border-radius:10px;padding:10px 14px;margin-top:12px;background:var(--bg2);font-size:13.5px}
.dh-struk-t{font-weight:700;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.dh-sr{display:flex;justify-content:space-between;gap:14px;padding:4px 0}
.dh-sr b{font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
.dh-sr.total{border-top:1px solid var(--line2);margin-top:6px;padding-top:8px;font-size:14.5px}
.dh-sr.total b{color:var(--accent)}
.dh-after{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;font-size:13px}
.dh-after>span:not(.arr){border:1px solid var(--line2);border-radius:10px;padding:6px 10px;background:var(--bg2)}
.dh-after .bad b{color:var(--down)}
.dh-after .ok b{color:var(--up)}
.dh-after .arr{color:var(--muted);font-weight:650}
/* grafik batang mini; .dh-bars-plot = lapisan setinggi area batang utk garis rata */
.dh-bars{position:relative;display:flex;align-items:flex-start;gap:14px;padding:22px 6px 0}
.dh-bar{flex:1 1 0;max-width:110px;display:flex;flex-direction:column;text-align:center}
.dh-bar-area{height:130px;display:flex;align-items:flex-end;border-bottom:2px solid var(--line2)}
.dh-bar-fill{position:relative;width:100%;border-radius:7px 7px 2px 2px;background:rgba(91,157,255,.55);
  animation:dhGrow .5s cubic-bezier(.2,.9,.3,1) both;transform-origin:bottom}
.dh-bar-fill b{position:absolute;bottom:100%;left:0;right:0;font-size:13px;font-weight:750;padding-bottom:3px}
.dh-bar-lb{font-size:12px;font-weight:650;margin-top:6px}
.dh-bar-tag{font-size:11px;color:var(--muted);line-height:1.3;margin-top:1px}
.dh-bar.use .dh-bar-fill{background:rgba(245,196,81,.55);box-shadow:inset 0 2px 0 var(--gold)}
.dh-bar.skip .dh-bar-fill b{color:var(--muted)}
.dh-bar.skip .dh-bar-area{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--grid) 6px 8px)}
.dh-bar.part .dh-bar-fill{background:repeating-linear-gradient(135deg,rgba(141,161,186,.45) 0 6px,rgba(141,161,186,.2) 6px 12px)}
.dh-bar.pace .dh-bar-fill{background:repeating-linear-gradient(135deg,rgba(34,197,94,.55) 0 6px,rgba(34,197,94,.28) 6px 12px);box-shadow:inset 0 2px 0 var(--up)}
.dh-bar.anom .dh-bar-fill{background:var(--down-soft);outline:2px dashed var(--down);outline-offset:-2px}
.dh-bar.anom .dh-bar-tag{color:var(--down);font-weight:650}
.dh-bars-plot{position:absolute;left:0;right:0;top:22px;height:130px;pointer-events:none;z-index:1}
.dh-bars-line{position:absolute;left:0;right:0;border-top:2px dashed var(--gold)}
.dh-bars-line span{position:absolute;right:0;bottom:2px;font-size:11.5px;font-weight:700;color:var(--gold);background:var(--card);padding:0 5px;border-radius:5px}
.dh-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);margin-top:14px}
.dh-legend span{display:inline-flex;align-items:center;gap:6px}
.dh-lg{display:inline-block;width:12px;height:12px;border-radius:3px;background:rgba(91,157,255,.55)}
.dh-lg.use{background:rgba(245,196,81,.6)}
.dh-lg.skip{background:repeating-linear-gradient(135deg,transparent 0 3px,var(--line2) 3px 5px);border:1px solid var(--line2)}
.dh-lg.part{background:rgba(141,161,186,.45)}
.dh-lg.pace{background:rgba(34,197,94,.55)}
.dh-lg.anom{background:var(--down-soft);border:1.5px dashed var(--down)}
@keyframes dhGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* meter horizontal (spike / drop): isi vs tanda ambang */
.dh-meter{padding:30px 4px 28px}
.dh-meter-track{position:relative;height:30px;border-radius:9px;background:var(--bg2);border:1px solid var(--line2)}
.dh-meter-fill{height:100%;border-radius:8px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;
  font-size:12px;font-weight:700;color:#fff;animation:dhWide .6s cubic-bezier(.2,.9,.3,1) both;transform-origin:left;white-space:nowrap}
.dh-meter-fill.ok{background:linear-gradient(90deg,rgba(34,197,94,.45),var(--up))}
.dh-meter-fill.bad{background:linear-gradient(90deg,rgba(244,84,76,.45),var(--down))}
.dh-meter-mark{position:absolute;top:-6px;bottom:-6px;border-left:2px dashed var(--muted)}
.dh-meter-mark span{position:absolute;top:-22px;left:0;transform:translateX(-50%);font-size:11.5px;font-weight:650;color:var(--muted);white-space:nowrap}
.dh-meter-mark.hot{border-left:2px solid var(--gold)}
.dh-meter-mark.hot span{top:auto;bottom:-22px;color:var(--gold)}
@keyframes dhWide{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* gauge buffer */
.dh-gauge{margin:18px 0 8px;padding:24px 4px 0}
.dh-gauge-track{position:relative;height:38px}
.dh-zone{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  border-right:2px solid var(--card);overflow:hidden;white-space:nowrap}
.dh-zone:first-child{border-radius:10px 0 0 10px}
.dh-zone:nth-child(4){border-radius:0 10px 10px 0;border-right:0}
.dh-zone.bad{background:var(--down-soft);color:var(--down)}
.dh-zone.warn{background:rgba(245,196,81,.16);color:var(--gold)}
.dh-zone.mid{background:rgba(91,157,255,.13);color:var(--accent)}
.dh-zone.ok{background:var(--up-soft);color:var(--up)}
.dh-gauge-pin{position:absolute;top:-8px;bottom:-8px;border-left:3px solid var(--text);z-index:2}
.dh-gauge-pin span{position:absolute;top:-22px;left:0;transform:translateX(-50%);background:var(--text);color:var(--card);
  font-size:11px;font-weight:700;padding:1px 7px;border-radius:6px;white-space:nowrap}
.dh-gauge-ticks{position:relative;height:22px;margin-top:6px}
.dh-gtick{position:absolute;top:0;transform:translateX(-50%);font-size:11.5px;color:var(--muted);font-weight:650;white-space:nowrap}
.dh-gtick:first-child{transform:none}
/* alur langkah */
.dh-flow{display:flex;align-items:stretch;gap:6px;margin:12px 0;flex-wrap:wrap}
.dh-flow-step{flex:1 1 120px;min-width:110px;border:1px solid var(--line);border-top:3px solid var(--line2);border-radius:12px;
  padding:10px 11px;background:var(--bg2)}
.dh-flow-step.acc{border-top-color:var(--accent)}
.dh-flow-step.ok{border-top-color:var(--up)}
.dh-flow-step.warn{border-top-color:var(--gold)}
.dh-flow-step.v1{border-top-color:#a78bfa}
.dh-flow-step.v2{border-top-color:#f472b6}
.dh-flow-ic{font-size:20px;line-height:1}
.dh-flow-t{font-weight:700;font-size:13.5px;margin-top:6px}
.dh-flow-d{font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
.dh-flow-arrow{align-self:center;color:var(--muted2);font-weight:800;font-size:16px}
/* kartu kecil */
.dh-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:12px 0}
.dh-cards.sm{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.dh-card-i{border:1px solid var(--line);border-left:4px solid var(--line2);border-radius:11px;padding:10px 12px;background:var(--bg2)}
.dh-card-i.ok{border-left-color:var(--up)}
.dh-card-i.bad{border-left-color:var(--down)}
.dh-card-i.warn{border-left-color:var(--gold)}
.dh-card-i.acc{border-left-color:var(--accent)}
.dh-card-i.mute{border-left-color:var(--muted2)}
.dh-card-h{font-weight:700;font-size:13.5px;display:flex;gap:7px;align-items:center}
.dh-card-d{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.dh-card-d b{color:var(--text)}
/* ritme harian */
.dh-clock{display:flex;flex-direction:column;margin:10px 0 10px 6px;border-left:2px solid var(--line2);padding-left:16px}
.dh-clock>div{position:relative;display:flex;gap:14px;align-items:baseline;padding:6px 0}
.dh-clock>div::before{content:"";position:absolute;left:-23px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--card)}
.dh-clock b{min-width:76px;font-variant-numeric:tabular-nums;color:var(--accent)}
.dh-clock span{font-size:13.5px}
/* kalender checkpoint Sales Drop */
.dh-tl{padding:36px 4px 34px}
.dh-tl-track{position:relative;height:12px;border-radius:6px;background:var(--bg2);border:1px solid var(--line2)}
.dh-tl-quiet{position:absolute;left:0;top:0;bottom:0;border-radius:6px 0 0 6px;background:repeating-linear-gradient(135deg,transparent 0 5px,var(--line2) 5px 7px)}
.dh-tl-quiet span{position:absolute;top:18px;left:0;font-size:11px;color:var(--muted2);white-space:nowrap}
.dh-tl-cp{position:absolute;top:-6px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--card);border:2px solid var(--down)}
.dh-tl-cp span{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:700;color:var(--down);white-space:nowrap}
.dh-tl-cp.on{background:var(--down);box-shadow:0 0 0 4px var(--down-soft)}
.dh-tl-now{position:absolute;top:-10px;bottom:-10px;border-left:2px solid var(--accent);z-index:1}
.dh-tl-now span{position:absolute;top:26px;left:0;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--accent);white-space:nowrap;
  background:var(--card);padding:0 4px;border-radius:4px}
/* kamus */
.dh-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin-top:6px}
.dh-dl>div{border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--bg2)}
.dh-dl dt{font-weight:750;font-size:13.5px;color:var(--accent)}
.dh-dl dd{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:2px}
/* navigasi bawah */
.dh-foot{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:16px;border-top:1px solid var(--line)}
.dh-pn{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--bg2);border:1px solid var(--line);color:var(--text);
  border-radius:11px;padding:9px 14px;max-width:48%;transition:.15s}
.dh-pn.nx{text-align:right;margin-left:auto}
.dh-pn small{color:var(--muted);font-size:11.5px}
.dh-pn span{font-weight:650;font-size:13.5px}
.dh-pn:hover{border-color:var(--accent2)}
:root[data-theme="light"] .dh-inti{background:linear-gradient(90deg,rgba(37,99,235,.08),rgba(37,99,235,.02));border-color:rgba(37,99,235,.25)}
:root[data-theme="light"] .dh-head-ic{background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(37,99,235,.03))}
:root[data-theme="light"] .dh-bar.use .dh-bar-fill{background:rgba(217,119,6,.35)}
:root[data-theme="light"] .dh-lg.use{background:rgba(217,119,6,.45)}
:root[data-theme="light"] .dh-bar.pace .dh-bar-fill{background:repeating-linear-gradient(135deg,rgba(21,128,61,.4) 0 6px,rgba(21,128,61,.18) 6px 12px)}
:root[data-theme="light"] .dh-chip.warn{background:rgba(161,98,7,.08)}
@media(max-width:820px){
  .dh-modal{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:92dvh;width:100%}
  .dh-side{border-right:0;border-bottom:1px solid var(--line)}
  .dh-side-head{padding:14px 56px 8px 14px;border-bottom:0}
  .dh-side-sub{display:none}
  .dh-search{margin-top:8px}
  .dh-nav{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:4px 12px 10px;flex:0 0 auto}
  .dh-nav-grp{display:contents}
  .dh-nav-gl{display:none}
  .dh-nav-i{width:auto;white-space:nowrap;border-color:var(--line);flex:0 0 auto}
  .dh-nav-i.on{box-shadow:inset 0 -3px 0 var(--accent)}
  .dh-main{padding:16px 16px 20px}
  .dh-now{margin-right:0}
  .dh-head h3{font-size:19px}
  .dh-bars{gap:8px}
  .dh-pn{max-width:none;flex:1}
  .dh-flow-arrow{display:none}
}
/* header mobile STOCK ALERT = satu baris aksi yang sudah penuh: tombol
   DASAR HITUNG pindah ke dalam popup info "?" (#osDasarLink) */
.os-dh-link{display:none}
@media(max-width:720px){
  #pageOrder .os-dh-btn{display:none}
  /* baris itu juga tidak muat label "Bulan lalu": ikon saja; label kembali
     di mode snapshot (Push massal disembunyikan, ruangnya cukup) */
  #pageOrder .os-snap-btn:not(.on) .val{display:none}
  #pageOrder .os-snap-btn:not(.on){min-height:44px}
  .os-dh-link{display:block;width:100%;min-height:44px;margin-top:2px;padding:10px 12px;border-radius:10px;
    border:1px solid var(--accent2);background:rgba(91,157,255,.1);color:var(--accent);font-size:13.5px;font-weight:700;text-align:left}
}
@media(prefers-reduced-motion:reduce){.dh-bar-fill,.dh-meter-fill{animation:none}}

/* ===== ATURAN STOCK ALERT (aturan_stok.js) — dialog "⚙ Atur": kerangka sama
   dgn DASAR HITUNG (.dh-modal: sidebar bagian kiri, isi kanan) + bilah aksi
   bawah (pratinjau / terapkan, hanya manager/admin). */
#osAturBtn[hidden],.os-dh-link[hidden]{display:none!important}
.as-modal{grid-template-rows:minmax(0,1fr) auto}
.as-modal .dh-side{grid-row:1 / span 2}
.as-badge{margin-left:auto;background:var(--accent2);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:0 7px;line-height:18px}
.as-now .as-warn{color:var(--gold);border-color:var(--gold)}
.as-now .as-run{color:var(--accent);border-color:var(--accent2)}
.as-head{margin:0 44px 14px 0}
.as-head h3{font-size:20px;margin:0 0 4px}
.as-head p{color:var(--muted);font-size:13.5px;margin:0;line-height:1.5}
.as-f{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--bg2)}
.as-f.ubah{border-left:4px solid var(--accent2)}
.as-f.edit{box-shadow:0 0 0 2px var(--field-ring)}
.as-f-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.as-f-l{font-weight:700;font-size:14px;margin-right:4px}
.as-f-c{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.as-in{background:var(--field);border:1px solid var(--field-line);color:var(--text);border-radius:9px;padding:7px 10px;font:inherit;font-size:13.5px;min-height:36px;max-width:100%}
.as-in.num{width:120px}
.as-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--field-ring)}
.as-in:disabled{opacity:.55}
.as-unit{color:var(--muted);font-size:12.5px}
.as-null{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);margin-left:6px}
.as-sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}
.as-sw input{position:absolute;opacity:0;width:1px;height:1px}
.as-sw span{width:38px;height:22px;border-radius:999px;background:var(--line2);position:relative;transition:.15s}
.as-sw span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.as-sw input:checked+span{background:var(--accent2)}
.as-sw input:checked+span::after{left:19px}
.as-sw input:focus-visible+span{box-shadow:0 0 0 3px var(--field-ring)}
.as-sw input:disabled+span{opacity:.5}
.as-f-k{color:var(--muted);font-size:12.5px;margin-top:8px;line-height:1.45}
.as-f-d{color:var(--muted2);font-size:12px;margin-top:6px}
.as-f-d b{color:var(--text);font-weight:600}
.as-edit{color:var(--accent);font-weight:650}
.as-lnk{background:none;border:0;color:var(--accent);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer;padding:0 2px}
.as-muted{color:var(--muted)}
.as-bar[hidden]{display:none}
.as-bar{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 18px;border-top:1px solid var(--line);background:var(--card)}
.as-bar-i{color:var(--muted);font-size:12.5px}
.as-bar-sp{flex:1}
.as-bar .as-pri{border-color:var(--accent2);color:var(--accent)}
.as-bar .as-go{background:var(--accent2);border-color:var(--accent2);color:#fff}
.as-bar button:disabled{opacity:.45;cursor:not-allowed}
.as-wait{display:flex;gap:12px;align-items:center;border:1px solid var(--accent2);border-radius:12px;padding:14px;margin:14px 0;background:rgba(91,157,255,.08)}
.as-wait small{display:block;color:var(--muted);margin-top:2px}
.as-spin{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--accent);animation:as-spin .8s linear infinite;vertical-align:-3px}
@keyframes as-spin{to{transform:rotate(360deg)}}
.as-tbl tr.chg td{background:rgba(91,157,255,.06)}
.as-bell{font-size:12px;color:var(--gold);white-space:nowrap}
.as-sku summary{cursor:pointer;color:var(--accent);font-size:12.5px;margin-top:4px}
.as-sku ul{margin:6px 0 0;padding-left:16px;font-size:12.5px;max-height:220px;overflow:auto}
.as-rm{color:var(--muted2);font-size:11px}
.as-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:14px 0}
.as-kpi>div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg2)}
.as-kpi span{display:block;color:var(--muted);font-size:12px}
.as-kpi b{display:block;font-size:15px;margin-top:2px}
.as-kpi small{color:var(--muted2);font-size:11.5px}
.as-riw{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:10px 0;background:var(--bg2)}
.as-riw-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;margin-bottom:4px}
@media(max-width:820px){
  .as-modal{grid-template-rows:auto minmax(0,1fr) auto}
  .as-modal .dh-side{grid-row:auto}
  .as-bar{grid-column:1;padding:10px 12px}
  .as-bar-sp{display:none}
  .as-head{margin-right:0}
}
@media(prefers-reduced-motion:reduce){.as-spin{animation:none}}