:root{--navy-1:#0b1930;--navy-2:#0d2340;--accent-1:#4c84d4;--accent-2:#6bb8ff;--bg:#f6f7f9;--card-border:#eef0f3;--text:#1f2937;--text-muted:#8792a2;--text-faint:#9aa2b1;--danger:#dc3545;--success:#16a34a;--success-bg:#e9f9ef;--amber:#b8860b;--amber-bg:#fff6e0;--danger-bg:#fdeaea;--info-bg:#eef2ff;--radius:14px}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}a{color:var(--accent-1);text-decoration:none}a:hover{color:#2f6bc4}button{cursor:pointer;font-family:inherit}.app-shell{width:100%;height:100vh;display:flex;overflow:hidden}.sidebar{background:linear-gradient(180deg, var(--navy-1) 0%, var(--navy-2) 100%);flex-direction:column;flex-shrink:0;width:268px;padding:22px 14px;display:flex;overflow-y:auto}.brand{align-items:center;gap:10px;padding:0 10px 20px;display:flex}.brand-mark{background:linear-gradient(135deg, var(--accent-1), var(--accent-2));border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.brand-name{color:#fff;letter-spacing:.2px;font-size:15px;font-weight:700;line-height:1.2}.brand-sub{color:#7d8db3;font-size:11px}.nav{flex-direction:column;gap:2px;margin-top:2px;display:flex}.navitem{color:#aab8d1;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:9px;align-items:center;gap:12px;width:100%;padding:9px 12px;font-size:13.5px;font-weight:500;display:flex}.navitem svg{flex-shrink:0;width:18px;height:18px}.navitem.active{color:#fff;background:#ffffff17}.navitem.active svg{color:#7fc0ff}.navitem:not(.active) svg{color:#7d8db3}.nav-group-head{color:#aab8d1;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:9px;align-items:center;gap:12px;width:100%;margin-top:4px;padding:9px 12px;font-size:13.5px;font-weight:600;display:flex}.nav-group-head svg.gicon{color:#7d8db3;flex-shrink:0;width:18px;height:18px}.nav-group-head .chev{color:#5d6d90;flex-shrink:0;width:13px;height:13px;margin-left:auto;transition:transform .15s}.nav-group.open .nav-group-head{color:#fff}.nav-group.open .nav-group-head svg.gicon{color:#7fc0ff}.nav-group.open .chev{transform:rotate(180deg)}.nav-sub{flex-direction:column;gap:1px;margin:2px 0 6px;display:flex}.nav-sub .navitem{gap:10px;padding-left:34px;font-size:12.5px}.nav-sub .navitem .bullet{opacity:.5;background:currentColor;border-radius:50%;flex-shrink:0;width:5px;height:5px}.nav-sub .navitem.active .bullet{opacity:1;background:#7fc0ff}.sidebar-foot{background:#ffffff0d;border-radius:12px;align-items:center;gap:10px;margin-top:auto;padding:11px;display:flex}.avatar{background:linear-gradient(135deg, var(--accent-1), var(--accent-2));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:11px;font-weight:700;display:flex}.foot-name{color:#fff;font-size:12.5px;font-weight:600}.foot-role{color:#7d8db3;text-transform:capitalize;font-size:10.5px}.foot-logout{color:#97a5c2;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;margin-left:auto;display:flex}.foot-logout svg{width:15px;height:15px}.main{flex-direction:column;flex:1;min-width:0;display:flex}.topbar{border-bottom:1px solid var(--card-border);background:#fff;flex-shrink:0;justify-content:space-between;align-items:center;height:76px;padding:0 32px;display:flex}.page-title{color:#111827;font-size:20px;font-weight:700}.page-sub{color:var(--text-muted);margin-top:3px;font-size:13px}.topbar-actions{align-items:center;gap:14px;display:flex}.divider-v{background:var(--card-border);width:1px;height:26px}.user-chip{align-items:center;gap:9px;display:flex}.user-chip .name{color:var(--text);font-size:13px;font-weight:600}.user-chip .role{color:var(--text-muted);text-transform:capitalize;font-size:11px}.icon-btn{color:#5b6472;cursor:pointer;background:#f3f4f6;border:none;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;display:flex;position:relative}.icon-btn svg{width:18px;height:18px}.badge-dot{background:var(--danger);border:1.5px solid #fff;border-radius:50%;width:7px;height:7px;position:absolute;top:7px;right:8px}.content{flex-direction:column;flex:1;gap:16px;padding:24px 32px 32px;display:flex;overflow:auto}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:10px;align-items:center;gap:7px;padding:10px 16px;font-size:13px;font-weight:700;display:inline-flex}.btn svg{width:15px;height:15px}.btn-primary{background:linear-gradient(135deg, var(--accent-1), var(--accent-2));color:#fff}.btn-ghost{color:#4b5563;background:#f3f4f6}.card{border-radius:var(--radius);border:1px solid var(--card-border);background:#fff;box-shadow:0 1px 2px #1018280a}.stat-strip,.stat-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.stat-card{flex-direction:column;gap:12px;padding:18px;display:flex}.stat-card.hero{background:linear-gradient(135deg, var(--accent-1), var(--accent-2));color:#fff;border:none}.stat-top{justify-content:space-between;align-items:flex-start;display:flex}.stat-label{color:var(--text-muted);font-size:12px;font-weight:600}.hero .stat-label{color:#ffffffd9}.stat-icon{background:var(--info-bg);width:34px;height:34px;color:var(--accent-1);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.stat-icon svg{width:17px;height:17px}.hero .stat-icon{color:#fff;background:#ffffff2e}.stat-icon.warn,.stat-icon.danger{background:var(--danger-bg);color:var(--danger)}.stat-icon.amber{background:var(--amber-bg);color:var(--amber)}.stat-icon.green{background:var(--success-bg);color:var(--success)}.stat-value{letter-spacing:-.3px;color:#111827;font-size:21px;font-weight:800}.hero .stat-value{color:#fff}.stat-trend{color:var(--success);align-items:center;gap:5px;font-size:12px;font-weight:600;display:flex}.stat-trend.muted-only{color:var(--text-faint);font-weight:500}.hero .stat-trend{color:#ffffffd9}.stat-trend svg{width:12px;height:12px}.stat-trend .muted{color:var(--text-faint);font-weight:500}.hero .stat-trend .muted{color:#ffffffbf}.mini-stat{align-items:center;gap:12px;padding:16px 18px;display:flex}.mini-ico{background:var(--info-bg);width:38px;height:38px;color:var(--accent-1);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.mini-ico svg{width:18px;height:18px}.mini-ico.green{background:var(--success-bg);color:var(--success)}.mini-ico.amber{background:var(--amber-bg);color:var(--amber)}.mini-ico.danger{background:var(--danger-bg);color:var(--danger)}.mini-label{color:var(--text-muted);font-size:12px;font-weight:600}.mini-value{color:#111827;margin-top:2px;font-size:19px;font-weight:800}.mini-sub{color:var(--text-faint);margin-top:1px;font-size:11px}.grid-2{flex:1;grid-template-columns:1.5fr 1fr;gap:16px;min-height:0;display:grid}.panel{flex-direction:column;padding:20px 22px;display:flex}.panel-head{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.panel-title{color:#111827;font-size:14.5px;font-weight:700}.panel-sub{color:var(--text-muted);margin-top:2px;font-size:12px}.pill-badge{background:var(--info-bg);color:var(--accent-1);border-radius:999px;padding:5px 10px;font-size:11px;font-weight:600}.filter-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.search-box{border:1px solid var(--card-border);width:260px;color:var(--text-faint);background:#fff;border-radius:10px;align-items:center;gap:8px;padding:10px 14px;font-size:13px;display:flex}.search-box svg{flex-shrink:0;width:16px;height:16px}.search-box input{color:var(--text);background:0 0;border:none;outline:none;width:100%;font-size:13px}.cat-pills{flex-wrap:wrap;flex:1;gap:8px;display:flex}.cat-pill{border:1px solid var(--card-border);color:#5b6472;cursor:pointer;background:#fff;border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:600}.cat-pill.active{background:linear-gradient(135deg, var(--accent-1), var(--accent-2));color:#fff;border-color:#0000}.date-chip{border:1px solid var(--card-border);color:#4b5563;background:#fff;border-radius:10px;align-items:center;gap:8px;padding:9px 14px;font-size:13px;font-weight:600;display:flex}.date-chip svg{width:15px;height:15px;color:var(--text-faint)}.table-card{flex-direction:column;flex:1;min-height:0;padding:8px 4px 4px;display:flex;overflow:auto}table{border-collapse:collapse;width:100%}th{text-align:left;color:var(--text-faint);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;background:#fafbfc;border-bottom:1px solid #f0f1f3;padding:14px 16px 12px;font-size:11.5px;font-weight:700}th:first-child{border-top-left-radius:12px}th:last-child{border-top-right-radius:12px}td{color:var(--text);vertical-align:middle;border-bottom:1px solid #f5f6f8;padding:13px 16px;font-size:13.5px}tbody tr:last-child td{border-bottom:none}.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}.num.muted{color:#c3c8d1;font-weight:600}.num.pos{color:var(--success)}.num.neg{color:var(--text)}.who-cell,.prod-cell,.cat-cell,.org-cell,.lvl-cell,.bank-cell,.sup-cell,.tag-cell,.acc-cell{align-items:center;gap:11px;display:flex}.who-ico{background:var(--info-bg);width:32px;height:32px;color:var(--accent-1);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex}.who-name{color:#111827;font-weight:700}.who-meta{color:var(--text-faint);margin-top:1px;font-size:11px}.row-thumb,.prod-thumb,.org-ico,.lvl-ico,.bank-ico,.sup-ico,.kelas-ico{background:var(--info-bg);width:36px;height:36px;color:var(--accent-1);border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.row-thumb svg,.prod-thumb svg,.org-ico svg,.lvl-ico svg,.bank-ico svg,.sup-ico svg{width:17px;height:17px}.kelas-ico{font-size:12px;font-weight:700}.row-name,.prod-name,.org-name,.lvl-name,.bank-name,.sup-name,.kelas-name,.cat-name,.txn-name{color:#111827;font-weight:700}.row-sub,.prod-sku,.org-addr,.lvl-desc,.bank-owner,.sup-phone,.cat-desc{color:var(--text-faint);margin-top:1px;font-size:11px}.tag{color:#6b7280;background:#f3f4f6;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600;display:inline-block}.tag.blue{background:var(--info-bg);color:var(--accent-1)}.tag.green{background:var(--success-bg);color:var(--success)}.tag.amber{background:var(--amber-bg);color:var(--amber)}.tag.red{background:var(--danger-bg);color:var(--danger)}.status-pill{white-space:nowrap;border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:700;display:inline-block}.status-pill.ok,.status-pill.on,.status-pill.done,.status-pill.posted{background:var(--success-bg);color:var(--success)}.status-pill.pending,.status-pill.wait,.status-pill.warn,.status-pill.draft{background:var(--amber-bg);color:var(--amber)}.status-pill.late,.status-pill.off,.status-pill.blocked{background:var(--danger-bg);color:var(--danger)}.status-pill.run{background:var(--info-bg);color:var(--accent-1)}.stock-badge{border-radius:999px;align-items:center;gap:6px;padding:5px 10px;font-size:12px;font-weight:700;display:inline-flex}.stock-badge .dot{border-radius:50%;width:6px;height:6px}.stock-badge.ok{background:var(--success-bg);color:var(--success)}.stock-badge.ok .dot{background:var(--success)}.stock-badge.warn{background:var(--amber-bg);color:var(--amber)}.stock-badge.warn .dot{background:#d3a017}.stock-badge.crit{background:var(--danger-bg);color:var(--danger)}.stock-badge.crit .dot{background:var(--danger)}.row-actions{justify-content:flex-end;align-items:center;gap:6px;display:flex}.act-btn{color:#5b6472;cursor:pointer;background:#f7f9fc;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.act-btn svg{width:14px;height:14px}.act-btn.danger{color:var(--danger)}.act-btn.pay{background:var(--info-bg);color:var(--accent-1)}.table-foot{color:var(--text-muted);justify-content:space-between;align-items:center;padding:14px 16px 4px;font-size:12.5px;display:flex}.pager{align-items:center;gap:6px;display:flex}.pg-btn{border:1px solid var(--card-border);color:#6b7280;cursor:pointer;background:#fff;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;font-size:12px;font-weight:600;display:flex}.pg-btn.active{background:linear-gradient(135deg, var(--accent-1), var(--accent-2));color:#fff;border-color:#0000}.p-track,.bar-track,.beban-bar-track{background:#f1f2f4;border-radius:999px;width:100%;height:6px;overflow:hidden}.p-fill,.bar-fill{background:linear-gradient(90deg, var(--accent-2), var(--accent-1));border-radius:999px;height:100%}.p-fill.done{background:var(--success)}.p-fill.late,.p-fill.high{background:var(--danger)}.p-fill.none{background:#e5e7eb}.beban-bar-fill{background:var(--danger);opacity:.75;border-radius:999px;height:100%}.beban-bar-fill.green{background:var(--success);opacity:.8}.beban-bar-cell{align-items:center;gap:10px;display:flex}.pct-val{color:#6b7280;text-align:right;flex-shrink:0;width:40px;font-size:12px;font-weight:600}.progress-cell{min-width:150px}.progress-top{justify-content:space-between;align-items:center;margin-bottom:5px;font-size:11.5px;display:flex}.progress-top .amt{color:#1f2937;font-weight:700}.progress-top .pct{color:var(--text-faint);font-weight:600}.chart-wrap{flex:1;align-items:flex-end;gap:20px;padding:20px 6px 0;display:flex}.bar-col{flex-direction:column;flex:1;align-items:center;gap:7px;display:flex}.bar-val{color:var(--text-faint);font-size:10.5px;font-weight:600}.bar-val.peak{color:#2f6bc4}.bar{background:#e7ecf5;border-radius:8px 8px 3px 3px;width:32px}.bar.peak{background:linear-gradient(180deg, var(--accent-2), var(--accent-1))}.bar-day,.bar-mo{color:var(--text-muted);margin-top:5px;font-size:11px}.bar-day.peak,.bar-mo.peak{color:#1f2937;font-weight:700}.form-card{padding:22px 24px}.sect-title{color:#111827;align-items:center;gap:9px;margin-bottom:16px;font-size:13.5px;font-weight:700;display:flex}.sect-num{background:var(--info-bg);width:22px;height:22px;color:var(--accent-1);border-radius:7px;flex-shrink:0;justify-content:center;align-items:center;font-size:11.5px;font-weight:800;display:flex}.field{flex-direction:column;gap:6px;margin-bottom:14px;display:flex}.field:last-child{margin-bottom:0}.field-row{grid-template-columns:1fr 1fr;gap:14px;display:grid}.field label{color:#4b5563;font-size:12px;font-weight:600}.field input,.field select,.field textarea{color:var(--text);background:#fff;border:1px solid #e5e7eb;border-radius:9px;width:100%;padding:10px 12px;font-family:inherit;font-size:13px}.field textarea{resize:none;min-height:56px}.pill-group{flex-wrap:wrap;gap:8px;display:flex}.pill-opt{color:#6b7280;cursor:pointer;background:#fff;border:1.5px solid #e5e7eb;border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:600}.pill-opt.active{background:var(--info-bg);border-color:var(--accent-1);color:#2f6bc4}.toggle-row{border-top:1px solid #f3f4f6;justify-content:space-between;align-items:center;padding:12px 0;display:flex}.toggle-row:first-of-type{border-top:none}.toggle-label{color:var(--text);font-size:13px;font-weight:600}.toggle-sub{color:var(--text-faint);margin-top:2px;font-size:11.5px}.switch{cursor:pointer;background:#e5e7eb;border:none;border-radius:999px;flex-shrink:0;width:40px;height:22px;position:relative}.switch.on{background:linear-gradient(135deg, var(--accent-1), var(--accent-2))}.switch .knob{background:#fff;border-radius:50%;width:16px;height:16px;transition:left .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #0003}.switch.on .knob{left:21px}.form-actions{justify-content:flex-end;gap:10px;display:flex}.tabs{border-bottom:1px solid var(--card-border);gap:26px;display:flex}.tabs-row{justify-content:space-between;align-items:center;display:flex}.tab{color:var(--text-faint);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:4px 2px 14px;font-size:14px;font-weight:700}.tab.active{color:#2f6bc4;border-bottom-color:var(--accent-1)}.state-msg{text-align:center;color:var(--text-muted);padding:40px;font-size:13.5px}.auth-wrap{background:linear-gradient(180deg, var(--navy-1) 0%, var(--navy-2) 100%);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{background:#fff;border-radius:18px;width:100%;max-width:380px;padding:32px 28px;box-shadow:0 20px 60px #00000059}.auth-brand{align-items:center;gap:12px;margin-bottom:28px;display:flex}.auth-title{color:#111827;font-size:19px;font-weight:800}.auth-sub{color:var(--text-muted);margin-top:2px;font-size:12.5px}.auth-error{background:var(--danger-bg);color:var(--danger);border-radius:9px;margin-bottom:14px;padding:10px 12px;font-size:12.5px;font-weight:600}.auth-card .btn-primary{justify-content:center;width:100%;margin-top:6px;padding:12px;font-size:14px}@media (width<=1024px){.stat-strip,.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2{grid-template-columns:1fr}}