/* ============================================================ 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; --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 . 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; --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)} .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: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: baris kontrol = header, mengisi lebar penuh dan boleh melipat ke baris kedua saat sempit (dropdown dgn nilai panjang). */ .trend-card .card-head{justify-content:flex-start} .trend-card .controls{width:100%} .trend-card .controls>.btn-reset{margin-left:auto} /* 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} .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} /* ============================================================ 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} .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)} /* ---------- rail navigasi kiri (pintasan saat topbar tergulir keluar) ---------- z-index 50: DI ATAS .filterbar sticky (40), DI BAWAH modal/overlay (80) & login (200) — jadi rail tidak pernah mengambang di atas pusat notifikasi. */ .navrail{position:fixed;left:12px;top:50%;z-index:50; transform:translateY(-50%) translateX(-10px); display:flex;flex-direction:column;gap:2px;padding:4px; background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow-pop); opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease} .navrail.show{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)} .navrail[hidden]{display:none} .nr-item{position:relative;display:flex;align-items:center;gap:8px; width:32px;height:32px;padding:0 5px;flex:0 0 auto; border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer; font-family:inherit;font-size:12px;font-weight:650;letter-spacing:.3px; white-space:nowrap;overflow:hidden;text-align:left; transition:width .2s ease,background .14s,color .14s} .nr-item .nr-ic{flex:0 0 auto;width:20px;font-size:14px;line-height:1;text-align:center} .nr-item .nr-tx{opacity:0;transition:opacity .16s ease} .nr-item:hover{background:var(--bg2);color:var(--text)} .nr-item.on{background:linear-gradient(180deg,#27406b,#1d2f50);color:#fff; box-shadow:0 1px 6px rgba(0,0,0,.3)} .nr-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* melebar saat hover ATAU saat salah satu tombolnya difokus lewat keyboard */ .navrail:hover .nr-item,.navrail:focus-within .nr-item{width:152px} .navrail:hover .nr-tx,.navrail:focus-within .nr-tx{opacity:1} .nr-sep{height:1px;background:var(--line);margin:2px 5px} /* titik merah = ada notifikasi belum dibaca (angka pastinya di badge topbar) */ .nr-dot{position:absolute;top:4px;left:21px;width:7px;height:7px;border-radius:50%; background:var(--down);border:1.5px solid var(--card)} .nr-dot[hidden]{display:none} @media(prefers-reduced-motion:reduce){ .navrail,.nr-item,.nr-tx{transition:none} } .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} #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)}} /* 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} /* toolbar — di dalam .filterbar sticky (efek kaca .stuck sama dgn tab 1) */ .os-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px} .os-toolbar .dd-btn{max-width:240px} #osSourceMount .dd-btn{width:210px;max-width:210px;justify-content:space-between} #osSourceMount .dd-btn .lbl{flex:0 0 auto;white-space:nowrap} #osSourceMount .dd-btn .val{max-width:120px} #osFilterBar{ --os-filter-cols:minmax(0,1fr) minmax(0,.95fr) minmax(0,.92fr) minmax(0,1.01fr) minmax(0,1.1fr) minmax(0,.95fr) minmax(0,1.12fr)} #osFilterBar .os-toolbar{display:grid;grid-template-columns:var(--os-filter-cols)} #osFilterBar .os-toolbar>div{min-width:0} #osFilterBar .os-toolbar .dd, #osFilterBar .os-toolbar .dd-btn, #osFilterBar #osSourceMount .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:16px 0} .os-alert-row .os-chips{ display:flex;gap:10px; flex:1;align-items:center;width:auto;min-width:0;margin-bottom:0} .os-alert-row .os-chip{ flex:1 1 auto;width:auto;min-width:max-content;min-height:38px; justify-content:center;padding:8px 12px; border-radius:11px;white-space:nowrap} .os-alert-row .btn-reset{flex:0 0 130px;min-height:38px} .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-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 */ /* 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} #osModal .modal-head{grid-column:1/-1;display:grid;column-gap:18px; grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t b" "s b"; padding-right:40px;margin-bottom:6px} #osModal .modal-head h3{grid-area:t} #osModal .modal-head .card-sub{grid-area:s} #osModal .os-badges{grid-area:b;align-self:start;justify-self:end;margin-top:2px} #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} #osModalBadges{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px} /* legenda chart modal SKU: jendela avg3 (emas) · bulan berjalan · garis rata */ /* editor rentang tren manual (modal SKU): Edit bulan tren → klik 4 bar → Terapkan */ .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)} .notif-clear{background:none;border:0;color:var(--muted);font-size:12px;font-weight:600; padding:2px 4px;border-radius:6px} .notif-clear:hover{color:var(--down)} /* kontrol pusat notifikasi: tiga grup terbaca sebagai segmented controls dalam satu toolbar ringkas; membungkus hanya saat viewport memang menyempit */ .notif-filters{display:flex;align-items:flex-end;gap:12px 18px;flex:1; flex-wrap:wrap;min-width:0} .nf-groups{display:flex;align-items:flex-end;gap:12px 18px;flex-wrap:wrap;min-width:0} .nf-group{display:flex;flex-direction:column;gap:6px;min-width:0} .nf-lbl{color:var(--muted2);font-size:10.5px;font-weight:700;letter-spacing:.5px; text-transform:uppercase} .nf-row{display:flex;gap:2px;flex-wrap:nowrap;padding:3px;background:var(--bg2); border:1px solid var(--line);border-radius:10px} .nf-row button{background:transparent;border:0;border-radius:7px;color:var(--muted); min-height:28px;font-size:11.5px;font-weight:620;padding:6px 9px;line-height:1; font-family:inherit;transition:background .12s,color .12s,box-shadow .12s;white-space:nowrap} .nf-row button:hover{background:var(--card);color:var(--text)} .nf-row button.on{background:var(--accent2);color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.22)} .nf-row button:focus-visible,.nf-reset:focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* dropdown kategori: komponen .dd yang sama dgn filter STOCK ALERT (jumlah notif per kategori di kanan tiap opsi). Panel rata-kanan: katbox menempel tepi kanan kartu (overflow:hidden) — rata-kiri akan terpotong. */ .nf-katdd{width:100%} .nf-katdd .dd-btn{width:100%;max-width:none;height:36px;justify-content:space-between; font-size:11.5px;font-weight:600;padding:6px 11px} .nf-katdd .dd-btn .val{max-width:none;flex:1;text-align:left} .nf-katdd .dd-panel{left:auto;right:0} .nf-reset{align-self:flex-end;height:36px;padding:0 11px;border-radius:9px; border:1px solid rgba(244,84,76,.38);background:transparent;color:var(--down); font-family:inherit;font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap; transition:background .12s,color .12s,border-color .12s} .nf-reset:not(:disabled):hover{background:var(--down);border-color:var(--down);color:#fff} .nf-reset:disabled{border-color:rgba(244,84,76,.38);color:var(--down);opacity:1;cursor:default} .notif-list{list-style:none;max-height:min(64vh,560px);overflow:auto; scrollbar-width:thin;scrollbar-color:var(--line2) transparent} .notif-item{display:flex;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line); align-items:flex-start} .notif-item:last-child{border-bottom:0} /* emoji polos tanpa kotak, besar & sejajar tengah dengan isi pesan */ .notif-item .nic{flex:0 0 auto;width:34px;display:inline-flex;align-items:center; justify-content:center;align-self:center;font-size:22px;line-height:1} .notif-item .nbody{flex:1;min-width:0} .notif-item .nt{font-size:13px;font-weight:650;color:var(--text)} .notif-item .nm2{color:var(--muted);font-size:12.5px;margin-top:1px} /* timestamp di sisi kanan (dekat panah ›): tanggal & jam bertumpuk, ukuran+bobot mengikuti judul pesan agar jelas terbaca */ .notif-item .nwhen{flex:none;align-self:center;display:flex;flex-direction:column; align-items:flex-end;gap:1px;text-align:right;color:var(--muted); font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap} .notif-item.unread{background:rgba(91,157,255,.07)} .notif-item.unread .nt::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--accent);margin-left:7px;vertical-align:2px} .notif-empty{padding:28px 16px;text-align:center;color:var(--muted2);font-size:var(--fs-small); display:flex;flex-direction:column;gap:6px;align-items:center} .notif-empty .big{font-size:22px;opacity:.55} /* item bisa diklik utk buka detail */ .notif-item{cursor:pointer;transition:background .12s} .notif-item:hover{background:var(--bg2)} .notif-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .notif-item .nchev{align-self:center;color:var(--muted2);font-size:17px;flex:none;transition:transform .12s} .notif-item:hover .nchev{transform:translateX(2px);color:var(--muted)} /* popup detail notifikasi (overlay) */ .nd-card{width:min(460px,94vw)} .nd-head{display:flex;gap:13px;align-items:flex-start;padding-right:34px} .nd-head .nd-ic{width:40px;height:40px;border-radius:11px;flex:none;display:inline-flex; align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--line);font-size:20px} .nd-head h3{font-size:16px;font-weight:680;line-height:1.3} .nd-when{color:var(--muted2);font-size:11.5px;margin-top:3px;font-variant-numeric:tabular-nums} .nd-rows{margin:16px 0 4px;display:flex;flex-direction:column;gap:1px; border:1px solid var(--line);border-radius:11px;overflow:hidden} .nd-rows:empty{display:none} .nd-row{display:flex;justify-content:space-between;gap:12px;padding:9px 13px;background:var(--bg2)} .nd-row .nd-l{color:var(--muted);font-size:12.5px} .nd-row .nd-v{font-weight:650;font-size:13px;font-variant-numeric:tabular-nums;text-align:right} .nd-row .nd-v.up{color:var(--up)} .nd-row .nd-v.down{color:var(--down)} /* baris ber-perbandingan: nilai lama (redup) -> panah -> nilai baru (tegas). Baris tanpa .has-prev = tidak berubah / tanpa riwayat -> tetap satu nilai. */ .nd-row.has-prev{background:linear-gradient(90deg,var(--bg2),var(--card2))} .nd-row .nd-cmp{display:flex;align-items:baseline;justify-content:flex-end; gap:7px;flex-wrap:wrap;min-width:0} .nd-row .nd-prev{color:var(--muted2);font-size:12px;font-weight:600; font-variant-numeric:tabular-nums;text-align:right} .nd-row .nd-arw{color:var(--muted2);font-size:12px;flex:none} .nd-hint{color:var(--muted2);font-size:11.5px;line-height:1.5;margin-top:14px; padding:7px 10px;background:var(--bg2);border-radius:8px;border:1px dashed var(--line2)} .nd-hint[hidden]{display:none} .nd-hint+.nd-rows{margin-top:8px} /* ---- pusat notifikasi (dibuka langsung oleh lonceng) ---- */ /* kartu = kolom flex yang TIDAK ikut menggulung (overflow:hidden menimpa .modal-card): kepala + filter + kaki tetap, hanya daftarnya yang scroll */ /* Filter memakai seluruh lebar toolbar; label pusat notifikasi berada di footer agar kepala tetap ringkas pada viewport 16:10. */ .nfull-card{width:min(1080px,94vw);display:flex;flex-direction:column; height:min(88vh,900px);max-height:min(88vh,900px);padding-bottom:0;overflow:hidden} .nfull-top{display:flex;align-items:center;margin:-22px -22px 0; padding:13px 58px 13px 18px;background:var(--card2);border-bottom:1px solid var(--line)} .nfull-top .notif-filters{justify-content:space-between;width:100%} .nfull-top .nf-groups{flex:1 1 570px} .nfull-top .nf-katbox{flex:0 1 190px} .nfull-list{flex:1;max-height:none;min-height:120px;margin:0 -22px; border-bottom:1px solid var(--line)} .nfull-list .notif-empty{height:100%;justify-content:center} .nfull-list .notif-item{padding:13px 22px} .nfull-list .notif-item .nt{font-size:13.5px} .nfull-list .notif-item .nm2{font-size:13px} .nfull-list .notif-item .nwhen{font-size:13.5px} .notif-item .ncmp-row{margin-top:4px} .notif-item .ncmp{display:inline-block;padding:1px 6px;border-radius:999px; background:var(--bg2);border:1px solid var(--line2);color:var(--muted);font-size:10.5px; font-weight:600;font-variant-numeric:normal} .nfull-foot{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;gap:12px;padding:11px 0;color:var(--muted2);font-size:11.5px} .nfull-count{font-variant-numeric:tabular-nums} .nfull-foot-title{justify-self:center;color:var(--muted);font-weight:700;letter-spacing:.15px} .nfull-foot .notif-clear{justify-self:end} .nd-note{color:var(--muted);font-size:13px;line-height:1.55;margin-top:14px} .nd-note[hidden]{display:none} /* aksi di detail notifikasi (mis. "Lihat produk" utk alert Order) */ .nd-actions{margin-top:16px;display:flex;gap:10px} .nd-actions[hidden]{display:none} .nd-actions .btn-primary{width:100%;justify-content:center} /* 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-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-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)} .kdivgroups{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px 20px} .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 input: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"] .tabs button.active{ background:linear-gradient(180deg,#3b82f6,#2563eb);box-shadow:0 1px 6px rgba(37,99,235,.35)} /* 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-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;justify-content:center;flex-wrap:nowrap;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%;justify-content:flex-start;flex-wrap:wrap} .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 ---------- */ /* Desktop pendek: padatkan rail sekali lagi agar bidang yang menutupi kartu dashboard makin kecil; tata letak dashboard sendiri tetap tidak berubah. */ @media(min-width:1101px) and (max-height:700px){ .navrail{gap:1px;padding:3px} .nr-item{width:30px;height:26px;padding-inline:4px} .navrail:hover .nr-item,.navrail:focus-within .nr-item{width:140px} .nr-sep{margin:1px 5px} } /* 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(4,minmax(0,1fr))} .os-alert-row .os-chips{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .os-alert-row .os-chip{width:100%;min-width:0} .os-alert-row .btn-reset{align-self:flex-end} } /* 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} /* tak ada lagi margin kiri utk rail — melebar saat hover pasti menimpa kartu */ .navrail{display:none} } /* 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} } @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} /* pusat notifikasi: pakai layar seluruhnya; toolbar membungkus secara terstruktur */ .nfull-card{width:100%;height:calc(100dvh - 48px);max-height:calc(100dvh - 48px)} .nfull-top{align-items:flex-start;padding:12px 14px 12px 14px} .notif-filters{flex-basis:100%;gap:10px} .nf-groups{gap:10px;width:100%} .nf-group{width:100%} .nf-row{flex-wrap:wrap} .nf-row button{padding-left:7px;padding-right:7px} .nf-katbox{width:calc(100% - 102px)} .nf-katdd .dd-panel{max-width:88vw} .nf-reset{margin-left:auto} .nfull-list{margin-left:-22px;margin-right:-22px} .nfull-foot{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px} .nfull-foot-title{grid-column:1/-1;grid-row:2;justify-self:center} /* baris sebelum→sesudah: label di atas, perbandingan di bawah (layar sempit) */ .nd-row.has-prev{flex-direction:column;align-items:flex-start;gap:4px} .nd-row.has-prev .nd-cmp{justify-content:flex-start} .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))} #osFilterBar .os-alert-row{flex-direction:column;align-items:stretch} .os-alert-row .os-chips{grid-template-columns:repeat(2,minmax(0,1fr))} .os-alert-row .btn-reset{align-self:stretch;flex-basis:auto;width:100%} .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) ---------- */ .acct-overlay{position:fixed;inset:0;z-index:210;display:flex;align-items:center; justify-content:center;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)} .acct-card h2{margin:0 0 8px;font-size:16px;color:var(--text)} .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-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}