/* ============================================================ POLISH LAYER v2 — Phase A (typography, tables, skeleton, empty states, micro-interactions). Fully additive; nothing above is removed. Layers on top of polish-v1. ============================================================ */ /* ---- Typography hierarchy ---- */ .sc>.cd .cd-t,.cd-t{font-size:15.5px;font-weight:650} .wc h1{font-size:23px} .cd-sub,.kl,.la{letter-spacing:.2px} .kl{font-size:10.5px} /* ---- Tables: numeric alignment + readable rows ---- */ .tbl td,.tbl th{font-variant-numeric:tabular-nums} .tbl td{padding:11px 12px} .tbl tbody tr:nth-child(even){background:rgba(255,255,255,.018)} .tbl tbody tr{transition:background .12s} .tbl tbody tr:hover{background:rgba(0,212,255,.06)} /* keep hover above stripes */ .tbl th{font-size:10.5px;letter-spacing:.4px;background:#0b1322; box-shadow:inset 0 -1px 0 #1c2748} /* ---- Sticky header (only long, single-header tables, marked by JS) ---- */ .tw--sticky{max-height:74vh;overflow:auto} .tbl--sticky thead th{position:sticky;top:0;z-index:5;background:#0c1426; box-shadow:inset 0 -1px 0 #243456,0 6px 14px -10px rgba(0,0,0,.8)} /* ---- Skeleton loader ---- */ .skel-row td{padding:0!important;border-bottom:1px solid rgba(26,34,64,.5)} .skbar{height:11px;margin:11px 12px;border-radius:6px; background:linear-gradient(90deg,#13203b 25%,#20335a 37%,#13203b 63%); background-size:400% 100%;animation:shimmer 1.25s ease infinite} @keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}} /* ---- Professional empty state (JS-rendered via _empty) ---- */ .es-pro{padding:42px 20px;text-align:center} .es-ic{font-size:34px;opacity:.7;margin-bottom:10px} .es-tt{color:#c8d0e8;font-weight:600;font-size:14px;margin-bottom:4px} .es-sb{color:#6b7a9e;font-size:12px} /* ---- Inputs / selects: chevron + clearer focus ---- */ .sel,.fg select{appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 10px center;padding-right:30px} .sel:focus,.fg input:focus,.fg select:focus,.fg textarea:focus{ border-color:#00d4ff;box-shadow:0 0 0 3px rgba(0,212,255,.12)} /* ---- Micro-interactions: press feedback ---- */ .go:active,.btp:active,.btn:active,.bt-sm:active,.sbt:active,.nt:active,.sel:active{transform:translateY(1px)} .go,.btp,.btn,.bt-sm,.nt,.sbt{transition:transform .08s ease,background .18s ease,opacity .18s ease,filter .18s ease,color .18s ease,border-color .18s ease} /* ============================================================ LIGHT THEME — additive overlay. Dark mode rules above are left 100% untouched; these only apply when . ============================================================ */ html[data-theme="light"]{color-scheme:light;--bd:#dbe2f0;--bd-hi:#c2cde2;--acc:#0883a8; --panel-grad:linear-gradient(180deg,#ffffff,#f6f8fc)} html[data-theme="light"] body{color:#1c2640; background:radial-gradient(1200px 600px at 78% -12%,rgba(0,150,200,.07),transparent 60%), radial-gradient(900px 500px at -5% -5%,rgba(99,130,255,.06),transparent 55%),#eef1f7} html[data-theme="light"] .tb{background:rgba(255,255,255,.88);border-bottom:1px solid #e2e8f4; box-shadow:0 1px 0 rgba(0,0,0,.02),0 8px 22px -16px rgba(0,0,0,.15)} html[data-theme="light"] .mn{background:rgba(255,255,255,.72);border-bottom:1px solid #e2e8f4} html[data-theme="light"] .ng-bar{background:rgba(255,255,255,.72)} html[data-theme="light"] .ng{color:#4a5878} html[data-theme="light"] .ng:hover{background:#eef1f7;color:#1c2640} html[data-theme="light"] .ng.active{background:#eaf6fb;color:#0883a8;border-color:#bfe3f0;border-bottom-color:#eaf6fb} html[data-theme="light"] .opa-kanban-col{background:#f4f7fc;border-color:#dbe2f0} html[data-theme="light"] .opa-kanban-card{background:#fff;border-color:#dbe2f0;color:#3a4868} html[data-theme="light"] #dki-drop{background:#f4f7fc !important;border-color:#9fb3d8 !important} html[data-theme="light"] #dki-drop>div{color:#3a4868 !important} html[data-theme="light"] #sec-dokumen .fb>strong,html[data-theme="light"] #sec-dokumen .fb>span{color:#3a4868 !important} html[data-theme="light"] .lg-t{color:#1c2640} html[data-theme="light"] .lg-s,html[data-theme="light"] .cd-sub,html[data-theme="light"] .kl, html[data-theme="light"] .ku,html[data-theme="light"] .kp{color:#6b7a9e} html[data-theme="light"] .bd{background:#f0f3fa;border-color:#dbe2f0;color:#3a4868} html[data-theme="light"] .bt-sm{background:#eef1f7;border-color:#d4dcec;color:#1c2640} html[data-theme="light"] .bt-sm:hover{background:#e2e8f4} html[data-theme="light"] .nt{color:#4a5878} html[data-theme="light"] .nt:hover{background:#eef1f7;color:#1c2640} html[data-theme="light"] .nt.active{background:#eaf6fb;color:#0883a8;border-color:#bfe3f0} html[data-theme="light"] .cd,html[data-theme="light"] .kc{background:#ffffff;border-color:#e2e8f4; box-shadow:0 1px 2px rgba(20,40,80,.04),0 10px 28px -20px rgba(20,40,80,.18)} html[data-theme="light"] .cd:hover,html[data-theme="light"] .kc:hover{border-color:#c2cde2} html[data-theme="light"] .cd-t{color:#1c2640} html[data-theme="light"] .kv{color:#0883a8} html[data-theme="light"] table{color:#1c2640} html[data-theme="light"] th{color:#4a5878} html[data-theme="light"] td,html[data-theme="light"] th{border-color:#e6ebf5} html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{ background:#ffffff;color:#1c2640;border-color:#d4dcec} html[data-theme="light"] #theme-tgl{background:#eef1f7} /* ---- Light theme: full coverage pass (additive). Every remaining dark block across all tabs gets a light surface + readable text. ---- */ /* table headers (every tab has tables) */ html[data-theme="light"] .tbl th, html[data-theme="light"] th{background:#eef2f9;color:#4a5878;box-shadow:inset 0 -1px 0 #e2e8f4} html[data-theme="light"] .tbl--sticky thead th, html[data-theme="light"] .tw--sticky thead th{background:#f1f4fb;box-shadow:inset 0 -1px 0 #dbe2f0,0 6px 14px -10px rgba(20,40,80,.12)} html[data-theme="light"] .tbl tbody tr:nth-child(even){background:rgba(20,40,80,.022)} html[data-theme="light"] .tbl tbody tr:hover{background:rgba(8,131,168,.06)} /* welcome hero */ html[data-theme="light"] .wc{background:linear-gradient(120deg,#eaf4fb,#ffffff 55%),radial-gradient(620px 220px at 92% 8%,rgba(8,131,168,.10),transparent);border-color:#d8e3f2;box-shadow:0 1px 2px rgba(20,40,80,.04),0 10px 28px -20px rgba(20,40,80,.18)} html[data-theme="light"] .wc h1{color:#1c2640} html[data-theme="light"] .wc p{color:#5a6788} /* card/section titles, headings, muted text */ html[data-theme="light"] .es h3,html[data-theme="light"] .es-tt, html[data-theme="light"] .mdl-h h3,html[data-theme="light"] .up-tx{color:#1c2640} html[data-theme="light"] .es,html[data-theme="light"] .es-sb, html[data-theme="light"] .gr,html[data-theme="light"] .la, html[data-theme="light"] .pgn .inf,html[data-theme="light"] .up-ic{color:#6b7a9e} /* chart placeholder + list rows + quick links */ html[data-theme="light"] .ch{background:#f3f6fc;border-color:#dbe2f0;color:#7686a8} html[data-theme="light"] .ln{background:#f3f6fc;border-color:transparent} html[data-theme="light"] .ln:hover{background:#eaf0fa;border-color:#dbe2f0} html[data-theme="light"] .ln .ar{color:#8a9bc4} html[data-theme="light"] .ql a{background:#f3f6fc;border-color:#dbe2f0;color:#3a4868} html[data-theme="light"] .ql a:hover{background:#eaf0fa;color:#1c2640;border-color:#c2cde2} /* modal */ html[data-theme="light"] .mdl-bx{background:#ffffff;border-color:#e2e8f4;box-shadow:0 24px 60px -20px rgba(20,40,80,.28)} html[data-theme="light"] .mdl-x{color:#6b7a9e} /* upload zone */ html[data-theme="light"] .up-zn{background:#f3f6fc;border-color:#cdd8ec} html[data-theme="light"] .up-zn:hover{background:#eaf4fb;border-color:#0883a8} /* buttons: default / secondary */ html[data-theme="light"] .btd{background:#eef1f7;border-color:#d4dcec;color:#1c2640} html[data-theme="light"] .btd:hover{background:#e2e8f4} /* sub-tabs */ html[data-theme="light"] .sbt{color:#5a6788} html[data-theme="light"] .sbt:hover{color:#1c2640} html[data-theme="light"] .sbt.active{color:#0883a8;border-bottom-color:#0883a8} /* pagination */ html[data-theme="light"] .pgn button{background:#ffffff;border-color:#d4dcec;color:#3a4868} html[data-theme="light"] .pgn button:hover{background:#eef1f7;color:#1c2640} /* progress track + filter-bar selects */ html[data-theme="light"] .pb{background:#e2e8f4} html[data-theme="light"] .sel{background:#ffffff;color:#1c2640;border-color:#d4dcec} /* footer */ html[data-theme="light"] .ft{background:rgba(255,255,255,.85);border-top:1px solid #e2e8f4} html[data-theme="light"] .ftl a,html[data-theme="light"] .ftl button{color:#5a6788;border-color:#dbe2f0;background:transparent} html[data-theme="light"] .ftl a:hover,html[data-theme="light"] .ftl button:hover{color:#1c2640;background:#eef1f7} html[data-theme="light"] .ftr{color:#8a9bc4} /* skeleton shimmer */ html[data-theme="light"] .skbar{background:linear-gradient(90deg,#e8edf6 25%,#f4f7fc 37%,#e8edf6 63%);background-size:400% 100%} /* scrollbars */ html[data-theme="light"] *::-webkit-scrollbar-thumb{background:#cdd6e6} html[data-theme="light"] *::-webkit-scrollbar-thumb:hover{background:#b4c0d8} /* ---- Inline-styled dark blocks inside tab content (attribute-targeted, needs !important to beat inline styles). ---- */ html[data-theme="light"] [style*="#1c2440"]{background:#eef3fc !important;border-color:#d3ddf0 !important;color:#33415f !important} html[data-theme="light"] [style*="#0f1830"]{background:#f3f6fc !important;border-color:#d4dcec !important;color:#1c2640 !important} html[data-theme="light"] [style*="#10182e"]{background:#eaf0fb !important;color:#1c2640 !important} html[data-theme="light"] [style*="#0e1530"]{background:#ffffff !important;border-color:#dbe2f0 !important} html[data-theme="light"] [style*="background:#0a1124"]{background:#f3f6fc !important;border-color:#d4dcec !important;color:#1c2640 !important} html[data-theme="light"] [style*="background:#1a2240"]{background:#e2e8f4 !important} /* Panel yang ditoggle via JS (.style.display) menulis-ulang atribut style & meng-convert hex→rgb, jadi [style*="#0f1830"] lepas. Target by ID supaya stabil. */ html[data-theme="light"] #exec-panel{background:#f3f6fc !important;border-color:#d4dcec !important} html[data-theme="light"] #exec-panel .kv.kv-tap{border-bottom-color:#9aa7c8} html[data-theme="light"] #analitik-panel{background:#f3f6fc !important;border-color:#d4dcec !important} /* ---- Light-mode coverage pass v2 (additive) — sisa panel inline gelap yang masih nyangkut di mode terang: Lapor WA (panel/modal/kartu), box output AI Jarvis, form Target Produksi, header grup orang di payroll, track progress-bar, & placeholder foto. Container ber-ID stabil ditarget by ID (kebal hex→rgb saat .style.display di-toggle), kartu hasil innerHTML JS ditarget by hex. Nothing removed. ---- */ html[data-theme="light"] #lapor-paste, html[data-theme="light"] #lapor-modal-box{background:#ffffff !important;border-color:#dbe2f0 !important;color:#1c2640 !important} html[data-theme="light"] #tgt-form-wrap{background:#f3f6fc !important;border-color:#d4dcec !important} html[data-theme="light"] #dra-ai-body{background:#eef2f9 !important;border-color:#d4dcec !important;color:#1c2640 !important} html[data-theme="light"] #pr-ai-body{background:#eef2f9 !important;border-color:#d4dcec !important;color:#1c2640 !important} /* kartu/box yang dirender via innerHTML (hex literal, tak ke-toggle) */ html[data-theme="light"] [style*="#141a2e"]{background:#ffffff !important;border-color:#dbe2f0 !important;color:#1c2640 !important} html[data-theme="light"] [style*="#0d1322"]{background:#f3f6fc !important;border-color:#d4dcec !important;color:#1c2640 !important} html[data-theme="light"] [style*="#0a0f1c"]{background:#eef2f9 !important;border-color:#d4dcec !important;color:#1c2640 !important} html[data-theme="light"] [style*="#0e1730"]{background:#f3f6fc !important;border-color:#d4dcec !important} html[data-theme="light"] [style*="#0f1626"]{background:#f3f6fc !important;border-color:#d4dcec !important} /* baris header grup orang (payroll) + garis pemisah gelapnya */ html[data-theme="light"] [style*="#1b2542"]{background:#eef2f9 !important} html[data-theme="light"] [style*="#2a3a63"]{border-color:#cdd8ec !important} /* anak ber-warna-sendiri di dalam panel yg diterangin (inherit !important tak menembus) */ html[data-theme="light"] #baku-template{color:#16233f !important} /* ---- Cockpit / Produksi Harian fixes (additive) ---- */ /* KPI value clipped by .kc overflow:hidden → shrink-to-fit, single line */ #kg-harian .kv{font-size:clamp(18px,2.1vw,27px);white-space:nowrap;letter-spacing:-.5px;text-shadow:none} #kg-harian .kc{padding:16px 12px} /* Table number cells were faint in light theme → darker + medium weight */ html[data-theme="light"] .tbl td{color:#16233f;font-weight:500} html[data-theme="light"] .tbl td strong{color:#0d1730;font-weight:700} /* CAPAIAN pills: a touch more solid so % reads clearly on white */ html[data-theme="light"] .pok{background:rgba(16,185,129,.18);color:#0a8f63} html[data-theme="light"] .pd{background:rgba(239,68,68,.16);color:#cc2f2f} html[data-theme="light"] .pw{background:rgba(245,158,11,.20);color:#b9750a} html[data-theme="light"] .pi{background:rgba(6,182,212,.16);color:#0a7d96} /* ---- Light-mode coverage pass v3 (additive) — dark BORDERS & near-white TEXT left inline across the dashboard/home & other tabs. Earlier passes flipped the dark panel FILLS but the inline border-color + light text stayed, so boxes still read as dark-outlined and stat values went faint. Border-hex selectors set ONLY border-color (never a fill) so transparent- bordered boxes don't gain an unwanted surface. The LOGIN GATE (#0d1117/#161b22/#30363d/#e6edf3) is intentionally dark & pre-login, so it is deliberately left untouched. Nothing removed. ---- */ html[data-theme="light"] [style*="#25304f"], html[data-theme="light"] [style*="#2a3550"], html[data-theme="light"] [style*="#2b3a66"], html[data-theme="light"] [style*="#2f3c66"], html[data-theme="light"] [style*="#1e2842"], html[data-theme="light"] [style*="#243056"]{border-color:#d4dcec !important} /* small group/status pills that used a dark slate fill */ html[data-theme="light"] [style*="background:#2f3c66"]{background:#eef2f9 !important} /* near-white inline text → readable dark on the now-light surfaces */ html[data-theme="light"] [style*="color:#c8d0e8"]{color:#33415f !important} html[data-theme="light"] [style*="color:#e8edff"]{color:#1c2640 !important} /* ============================================================ UI/UX DESKTOP-FIT v2 — additive horizontal-overflow guards. Cause found via overflow audit: Chart.js canvases initialised while their tab is display:none mis-measure the container and keep a fixed inline px width, spilling past the panel on narrower laptops (e.g. Lab "Tren Grade" chart = 1387px hard). These rules cap any chart/media to its panel and let scroll wrappers shrink inside flex/grid parents. Nothing removed. ============================================================ */ .sc canvas{max-width:100%!important} .sc img,.sc svg,.sc video{max-width:100%} .tw{min-width:0;max-width:100%} /* defensive: no descendant may force a horizontal scrollbar on the page */ .sc,.ss{min-width:0}