/* ===== Monitoring Bundling MFlash — tema terang & gelap, mobile-first ===== */
:root{
  --ground:#F1F3F7; --ground-2:#E4E9F0;
  --surface:#FFFFFF; --surface-2:#F5F7FA; --surface-3:#E9EEF4;
  --ink:#132234; --ink-2:#42536A; --ink-3:#74849A;
  --line:#DCE3EC; --line-strong:#C2CCD9;
  --brand:#14355B;
  --crit:#A9590B; --crit-fill:#F58F22; --crit-soft:#FDF2E4; --crit-line:#F2CA96;
  --ok:#0E6E60; --ok-fill:#0E6E60; --ok-soft:#E3F1EE; --ok-line:#A6D3CA;
  --accent:#F58F22; --accent-2:#DB7927; --on-accent:#14355B;
  --shadow-1:0 1px 2px rgba(19,34,52,.06);
  --shadow-2:0 1px 2px rgba(19,34,52,.06), 0 10px 26px -20px rgba(19,34,52,.55);
  --shadow-3:0 20px 50px -30px rgba(19,34,52,.6), 0 2px 6px rgba(19,34,52,.07);
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C121A; --ground-2:#070B11;
    --surface:#141C27; --surface-2:#1A2431; --surface-3:#22303F;
    --ink:#E6ECF3; --ink-2:#A3B1C2; --ink-3:#74849A;
    --line:#25313F; --line-strong:#35455A;
    --brand:#8FB6E0;
    --crit:#F9A94B; --crit-fill:#F58F22; --crit-soft:#2B1C0C; --crit-line:#4E3517;
    --ok:#5CC0AC; --ok-fill:#3E9C8B; --ok-soft:#0F2620; --ok-line:#22463C;
    --accent:#F58F22; --accent-2:#FFA845; --on-accent:#14355B;
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -22px rgba(0,0,0,.9);
    --shadow-3:0 24px 60px -34px rgba(0,0,0,1), 0 2px 6px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#0C121A; --ground-2:#070B11;
  --surface:#141C27; --surface-2:#1A2431; --surface-3:#22303F;
  --ink:#E6ECF3; --ink-2:#A3B1C2; --ink-3:#74849A;
  --line:#25313F; --line-strong:#35455A;
  --brand:#8FB6E0;
  --crit:#F9A94B; --crit-fill:#F58F22; --crit-soft:#2B1C0C; --crit-line:#4E3517;
  --ok:#5CC0AC; --ok-fill:#3E9C8B; --ok-soft:#0F2620; --ok-line:#22463C;
  --accent:#F58F22; --accent-2:#FFA845; --on-accent:#14355B;
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -22px rgba(0,0,0,.9);
  --shadow-3:0 24px 60px -34px rgba(0,0,0,1), 0 2px 6px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{color-scheme:light dark; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3{font-family:"Familjen Grotesk","Public Sans",sans-serif; margin:0; text-wrap:balance; letter-spacing:-.02em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.hint{font-size:12px; color:var(--ink-3)}
.wrap{max-width:1180px; margin:0 auto; padding-inline:16px}
[hidden]{display:none !important}
@media (min-width:721px){ .only-mobile{display:none !important} }

/* ---------- kontrol dasar ---------- */
label{display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
input,select,textarea{
  font:inherit; font-size:16px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:9px; padding:11px 12px; width:100%; min-width:0;
  appearance:none; -webkit-appearance:none;
}
select{
  padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
input:focus-visible,select:focus-visible,button:focus-visible,textarea:focus-visible,a:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px
}
button{
  font:inherit; font-size:14px; font-weight:500; cursor:pointer; border-radius:9px;
  padding:10px 14px; min-height:42px; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--ink); transition:border-color .15s, background .15s;
}
button:hover:not(:disabled){border-color:var(--ink-3)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.45; cursor:not-allowed}
button.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
button.primary:hover:not(:disabled){background:var(--accent-2); border-color:var(--accent-2)}
button.ikon{padding:9px 11px; min-width:42px}
.big{width:100%; padding:13px 16px; font-size:15px; min-height:50px}
.msg{font-size:13.5px; padding:11px 13px; border-radius:9px; border:1px solid var(--crit-line);
  background:var(--crit-soft); color:var(--crit)}
.msg.ok{border-color:var(--ok-line); background:var(--ok-soft); color:var(--ok)}
.row-inline{display:flex; gap:9px; flex-wrap:wrap; align-items:center}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* ---------- login ---------- */
#login{
  min-height:100dvh; display:grid; place-items:center; padding:24px 16px;
  background:radial-gradient(120% 80% at 50% -10%, var(--surface-3) 0%, var(--ground) 55%, var(--ground-2) 100%);
}
.card-login{
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-3); overflow:hidden;
}
.card-login .head{padding:26px 24px 20px; border-bottom:1px solid var(--line); position:relative}
.card-login .head::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--crit-fill) 0%, var(--crit-fill) 62%, var(--ok-fill) 62%, var(--ok-fill) 100%);
}
.card-login h1{font-size:25px; font-weight:700; margin-top:10px; line-height:1.1}
.card-login .head p{margin:8px 0 0; color:var(--ink-2); font-size:13.5px}
.card-login form{padding:22px 24px 26px; display:flex; flex-direction:column; gap:16px}
.mark{display:flex; align-items:center; gap:9px; min-width:0}
.mark .logo{flex:none; width:30px; height:30px; display:block; border-radius:8px}
.card-login .mark .logo{width:34px; height:34px; border-radius:9px}

/* ---------- header aplikasi ---------- */
header.top{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-1)}
.top-in{display:flex; align-items:center; gap:10px; padding-block:11px; flex-wrap:wrap}
.top-in h1{font-size:17px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.spacer{flex:1 1 auto}
.aksi-top{display:flex; gap:8px; flex:none}
#sel-periode{width:auto; max-width:270px; font-size:13.5px; padding:8px 32px 8px 11px; min-height:38px}
.who{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); white-space:nowrap}
.badge{font-size:10.5px; font-weight:700; letter-spacing:.05em; padding:4px 9px; border-radius:99px;
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink-2)}
.badge.adm{border-color:var(--accent); color:var(--accent); background:var(--crit-soft)}
nav.tabs{display:flex; gap:2px; border-top:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{border:0; background:none; border-radius:0; padding:12px 16px; color:var(--ink-2);
  border-bottom:2px solid transparent; white-space:nowrap; font-weight:500; min-height:46px}
nav.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--crit-fill); font-weight:600}
main{padding-block:18px 64px}

@media (max-width:720px){
  .top-in{gap:8px 10px; padding-block:9px}
  .top-in h1{font-size:15.5px}
  .who .kode-teks{display:none}
  .spacer{display:none}
  .who{order:2; margin-left:auto}
  .aksi-top{order:3}
  #sel-periode{order:9; flex:1 1 100%; max-width:none; width:100%}
  nav.tabs button{flex:1 1 0; padding:12px 6px; font-size:13px; text-align:center}
}

/* ---------- KPI ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-2)}
.kpi{background:var(--surface); padding:14px 16px 15px; min-width:0}
.kpi.flag{background:var(--crit-soft)}
.kpi .v{font-family:"Familjen Grotesk",sans-serif; font-size:27px; font-weight:700; line-height:1.05;
  font-variant-numeric:tabular-nums; margin-top:7px; letter-spacing:-.025em; overflow-wrap:anywhere}
.kpi.flag .v{color:var(--crit)}
.kpi .cap{font-size:11.5px; color:var(--ink-3); margin-top:4px}
@media (max-width:720px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:12px 13px 13px}
  .kpi .v{font-size:23px}
}

/* ---------- panel ---------- */
.grid2{display:grid; grid-template-columns:1.15fr 1fr; gap:14px; margin-top:14px; align-items:start}
@media(max-width:880px){.grid2{grid-template-columns:1fr}}
.col{display:flex; flex-direction:column; gap:14px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-2)}
.panel-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:13px 16px 11px; border-bottom:1px solid var(--line)}
.panel-h h2{font-size:14px; font-weight:600}
.panel-h span{font-size:11.5px; color:var(--ink-3); white-space:nowrap; text-align:right}
@media (max-width:520px){ .panel-h{flex-wrap:wrap} .panel-h span{white-space:normal} }
.panel-b{padding:13px 16px 16px}

.brow{display:grid; grid-template-columns:minmax(78px,146px) 1fr 54px; align-items:center; gap:10px; padding:4px 0}
.brow .nm{font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.track{height:9px; background:var(--surface-2); border:1px solid var(--line); border-radius:3px; overflow:hidden; display:flex}
.track i{display:block; height:100%}
.track i.b{background:var(--ok-fill); opacity:.85}
.track i.n{background:var(--crit-fill)}
.brow .pc{font-size:12px; text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.legend{display:flex; gap:14px; font-size:11.5px; color:var(--ink-3); margin-bottom:9px; flex-wrap:wrap}
.legend b{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px}
.months{display:flex; align-items:flex-end; gap:7px; height:136px; padding-top:6px}
.mo{flex:1; max-width:76px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; min-width:0}
.mo .stack{width:100%; display:flex; flex-direction:column; justify-content:flex-end; height:106px}
.mo .seg-n{background:var(--crit-fill); border-radius:3px 3px 0 0}
.mo .seg-b{background:var(--ok-fill); opacity:.3; border-radius:0 0 3px 3px}
.mo .lb{font-size:10.5px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.mo .val{font-size:10.5px; color:var(--crit); font-family:"IBM Plex Mono",monospace; font-weight:600}

/* ---------- toolbar / filter ---------- */
.toolbar{margin-top:18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:11px 13px; box-shadow:var(--shadow-2);
  display:flex; flex-direction:column; gap:10px}
.tb-utama{display:flex; gap:9px; align-items:center}
.tb-utama input[type="search"]{flex:1 1 auto; font-family:"IBM Plex Mono",monospace; font-size:14px}
#btn-filter{flex:none; white-space:nowrap}
#filter-n{display:none; margin-left:6px; background:var(--crit-fill); color:#14355B;
  border-radius:99px; padding:1px 7px; font-size:11px; font-weight:700}
#filter-n.ada{display:inline-block}
.filters{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:9px}
.filters select{font-size:14px; padding:9px 34px 9px 11px; min-height:40px; text-overflow:ellipsis}
.tb-aksi{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.count{font-size:13px; color:var(--ink-2); margin-left:auto}
.count b{color:var(--crit); font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .filters{display:none; grid-template-columns:1fr 1fr}
  .filters.buka{display:grid}
  .tb-aksi button{flex:1 1 auto}
  .count{flex:1 1 100%; margin-left:0; text-align:right}
}

/* ---------- tabel ---------- */
.tablebox{margin-top:11px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-2); overflow:hidden}
.scroller{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:780px}
thead th{position:sticky; top:0; background:var(--surface-2); z-index:2; text-align:left; font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); font-weight:600;
  padding:10px 14px; border-bottom:1px solid var(--line-strong); white-space:nowrap}
tbody td{padding:10px 14px; border-bottom:1px solid var(--line); font-size:13px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.nota{font-family:"IBM Plex Mono",monospace; font-weight:600; white-space:nowrap; border-left:3px solid var(--crit-fill)}
td.nota.ok{border-left-color:var(--ok-fill)}
td.sales{font-weight:500}
td.num{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; color:var(--ink-2); white-space:nowrap}
td.dim{color:var(--ink-2); font-size:12.5px; white-space:nowrap}
.chip{display:inline-block; font-size:11px; padding:3px 9px; border-radius:99px; border:1px solid var(--crit-line);
  background:var(--crit-soft); color:var(--crit); white-space:nowrap; font-weight:600}
.chip.grey{border-color:var(--line-strong); background:var(--surface-2); color:var(--ink-2); font-weight:500}
.chip.good{border-color:var(--ok-line); background:var(--ok-soft); color:var(--ok)}
.pager{display:flex; flex-wrap:wrap; gap:9px; align-items:center; padding:11px 13px;
  border-top:1px solid var(--line); background:var(--surface-2)}
.pager select{width:auto; font-size:13px; padding:8px 30px 8px 10px; min-height:40px}
.pager .info{font-size:12.5px; color:var(--ink-2); margin-left:auto; font-variant-numeric:tabular-nums}
.empty{padding:40px 20px; text-align:center; color:var(--ink-3); font-size:13.5px}

/* tabel -> kartu di layar kecil */
@media (max-width:720px){
  table{min-width:0}
  thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  tbody tr{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:12px 13px;
    border-bottom:1px solid var(--line); border-left:3px solid var(--crit-fill)}
  tbody tr.ok{border-left-color:var(--ok-fill)}
  tbody td{border:0; padding:0; font-size:13px}
  td.nota{font-size:13.5px; grid-column:1; border-left:0; padding:0}
  td.num{grid-column:2; grid-row:1; font-size:13.5px; color:var(--ink); font-weight:600}
  td.sales{grid-column:1 / -1; font-size:13.5px}
  td.dim{grid-column:1 / -1; font-size:12px; white-space:normal}
  td.dim.cab{grid-column:1}
  td.dim.tgl{grid-column:2; text-align:right}
  td.dim.kat{grid-column:1 / -1}
  td.isi{grid-column:1 / -1; margin-top:5px; display:flex; gap:5px; flex-wrap:wrap}
  .pager .info{flex:1 1 100%; margin-left:0; text-align:center; order:-1; padding-bottom:2px}
  .pager button{flex:1 1 auto}
}

/* ---------- unggah ---------- */
.two{display:grid; grid-template-columns:1.3fr 1fr; gap:14px; align-items:start}
@media(max-width:880px){.two{grid-template-columns:1fr}}
.drop{border:2px dashed var(--line-strong); border-radius:12px; background:var(--surface-2);
  padding:32px 18px; text-align:center; transition:border-color .15s, background .15s}
.drop.over{border-color:var(--accent); background:var(--crit-soft)}
.drop h3{font-size:16px; font-weight:600}
.drop p{color:var(--ink-2); font-size:13px; margin:7px 0 16px}
.pilih-cabang{margin-top:13px; padding:12px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2)}
.pilih-cabang .hint{flex:1 1 150px}
.pilih-cabang.perlu{border-color:var(--crit); background:var(--crit-soft)}
.pilih-cabang.perlu .hint{color:var(--crit)}
#sel-cabang-unggah{width:auto; min-width:170px; font-size:14px; padding:9px 32px 9px 11px; min-height:40px}
.steps{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.steps li{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:13px; color:var(--ink-2)}
.steps li > b{display:grid; place-items:center; width:22px; height:22px; border-radius:7px;
  background:var(--surface-3); color:var(--ink); font-size:11px; font-family:"IBM Plex Mono",monospace}
.steps li span b{font-weight:600; color:var(--ink)}
.bar{height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin-top:11px}
.bar i{display:block; height:100%; background:var(--crit-fill); width:0; transition:width .2s}
.log{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:9px; padding:11px 12px; margin-top:12px; max-height:230px;
  overflow:auto; white-space:pre-wrap; word-break:break-word}
.kolom{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-2); line-height:1.95}
.kolom b{color:var(--ink); font-weight:600}
.stack-form{display:flex; flex-direction:column; gap:14px; max-width:360px}
footer.foot{margin-top:22px; font-size:12px; color:var(--ink-3); line-height:1.7}