/* Palet mengikuti logo Agincourt Resources: navy #0A4565 + emas #D2A957 */
:root{
  --primary:#0A4565;        /* navy logo */
  --primary-ink:#07344C;    /* navy lebih gelap untuk teks */
  --primary-soft:#E7F0F6;   /* tint navy */
  --accent:#D2A957;         /* emas logo */
  --accent-soft:#FAF1DC;    /* tint emas */
  --accent-ink:#8A6A1F;     /* emas gelap agar terbaca */
  --surface:#fff; --bg:#F4F6F9; --text:#111827;
  --muted:#6B7280; --border:#E3E8EF; --high:#EF4444; --med:#D2A957; --low:#94A3B8;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.shell{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg)}
@media(min-width:481px){.shell{box-shadow:0 0 40px rgba(10,69,101,.12)}}

/* login */
.login{padding:0 26px;display:flex;flex-direction:column;justify-content:center;min-height:100vh;background:#fff}
.brandhead{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:26px}
.brand{width:132px;height:auto;display:block;margin:0 0 18px 0}
.brandhead h1{font-size:21px;line-height:1.28;max-width:320px}
.brand-bar{width:64px;height:3px;background:var(--accent);border-radius:2px;margin:0 0 22px 0}
.logo{width:60px;height:60px;border-radius:16px;background:var(--primary);color:#fff;font-size:28px;font-weight:700;
      display:flex;align-items:center;justify-content:center;margin-bottom:20px}
h1{font-size:25px;letter-spacing:-.4px;color:var(--primary-ink)}
.sub{font-size:13px;color:var(--muted);margin:4px 0 26px}
.lbl{display:block;font-size:13px;color:var(--muted);margin:0 0 6px 2px}
.field{width:100%;background:#fff;border:1px solid var(--border);border-radius:10px;padding:13px 14px;
       font-size:15px;color:var(--text);margin-bottom:15px;font-family:inherit}
.field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(10,69,101,.14)}
.btn{width:100%;border:none;border-radius:10px;height:50px;font-size:15px;font-weight:700;font-family:inherit}
.btn.primary{background:var(--primary);color:#fff;margin-top:8px;border-bottom:3px solid var(--accent)}
.btn.primary:active{background:var(--primary-ink)}
.error{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA;border-radius:10px;padding:10px 12px;
       font-size:13px;margin-bottom:12px}
.ver{font-size:11px;color:#9CA3AF;text-align:center;margin-top:26px}

/* menu */
.topbar{display:flex;justify-content:space-between;align-items:flex-start;padding:24px 20px 18px}
.hello{font-size:13px;color:var(--muted)}
.name{font-size:21px;font-weight:700;color:var(--primary-ink)}
.branch{font-size:12px;color:#9CA3AF;margin-top:2px;font-family:ui-monospace,Menlo,Consolas,monospace}
.avatar{width:44px;height:44px;border-radius:22px;background:var(--primary);color:#fff;font-weight:700;
        display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 44px;
        box-shadow:0 0 0 3px var(--accent)}
.body{padding:0 20px 28px}
.card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:14px}
.card.primary{background:var(--primary);border:none;color:#fff;position:relative;overflow:hidden}
.card.primary:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--accent)}
.card.primary .t{font-size:18px;font-weight:700}
.card.primary .s{font-size:13px;color:#CFE0EA;margin-top:3px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.grid .card{margin:0;border-top:3px solid var(--accent)}
.t2{font-size:14px;font-weight:700;color:var(--primary-ink)}
.s2{font-size:12px;color:var(--muted);margin-top:4px}
.list{list-style:none;margin-top:8px;font-size:13px;color:var(--muted)}
.list li{margin-bottom:4px;padding-left:14px;position:relative}
.list li:before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:3px;background:var(--accent)}
.hint{font-size:12px;color:#9CA3AF;text-align:center;margin-top:10px}
.card.off{opacity:.55}

/* daftar */
.whead{display:flex;align-items:center;gap:4px;padding:22px 16px 12px}
.back{font-size:26px;line-height:1;width:32px;color:var(--primary)}
.wtitle{flex:1}
.h2{font-size:19px;font-weight:700;color:var(--primary-ink)}
.cnt{font-size:12px;color:#9CA3AF}
.reload{color:var(--accent);font-size:20px;width:32px;text-align:right}
.listpad{padding:0 16px}
.search{width:100%;background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 14px;
        font-size:14px;font-family:inherit;margin-bottom:11px;color:var(--text)}
.search:focus{outline:none;border-color:var(--primary)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px}
.chip{background:#fff;border:1px solid var(--border);border-radius:16px;padding:6px 13px;font-size:12px;
      white-space:nowrap;color:var(--text)}
.chip.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.wo{display:flex;gap:12px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:13px;margin-bottom:10px}
.bar{width:4px;border-radius:2px;flex:0 0 4px}
.bar.high{background:var(--high)} .bar.med{background:var(--accent)} .bar.low{background:#CBD5E1}
.wobody{flex:1;min-width:0}
.code{font-size:14.5px;font-weight:700;color:var(--primary-ink)}
.desc{font-size:13px;color:#374151;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{font-size:11.5px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.woright{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto;max-width:38%}
.pill{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:8px;white-space:nowrap}
.pill.open{background:var(--primary-soft);color:var(--primary)}
.pill.plan{background:var(--primary-soft);color:var(--primary)}
.pill.forecast{background:#EEF2F7;color:#475569}
.pill.progress{background:var(--accent-soft);color:var(--accent-ink)}
.pill.hold{background:var(--accent-soft);color:var(--accent-ink)}
.pill.done{background:#DCEEE4;color:#0F6B45}
.pill.cancel{background:#F3F4F6;color:#9AA3AF;text-decoration:line-through}
.pill.neutral{background:#EEF2F7;color:#475569}
.pill.over{background:#FEE2E2;color:#B91C1C}
.due{font-size:10.5px;color:var(--muted);white-space:nowrap;text-align:right}
.due.od{color:var(--high);font-weight:700}
.empty{text-align:center;color:var(--muted);font-size:13px;padding:40px 0}

/* debug */
.debug{background:var(--primary-ink);color:#CBD5E1;border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:11px}
.debug summary{color:var(--accent);cursor:pointer;font-size:12px}
.debug pre{white-space:pre-wrap;word-break:break-all;margin-top:8px;font-family:ui-monospace,Menlo,Consolas,monospace;line-height:1.4}

/* catatan sumber data */
.datanote{background:var(--accent-soft);color:var(--accent-ink);border:1px solid #EAD9B0;border-radius:10px;
          padding:8px 12px;font-size:11.5px;margin-bottom:10px}

/* logo kecil di topbar */
.tlogo{width:34px;height:auto;margin-right:8px;vertical-align:middle}

/* detail work order */
.kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;border-bottom:1px solid #F1F5F9}
.kv:last-child{border-bottom:none}
.kv span{color:var(--muted)}
.kv b{text-align:right;font-weight:600;color:var(--primary-ink);max-width:64%;word-break:break-word}
.trx{background:#F8FAFC;border-radius:8px;padding:8px 10px;margin-top:8px;font-size:12px}
.trx-top{color:var(--primary-ink);font-weight:600}
.trx-sub{color:var(--muted);margin-top:2px}
.trx-num{color:var(--accent-ink);font-weight:700;margin-top:3px}

/* tombol & daftar transaksi */
.trxbox{margin:0 0 14px}
.trxbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none;cursor:pointer;
        background:var(--primary);color:#fff;border-radius:12px;padding:14px 16px;font-size:14px;font-weight:700;
        border-bottom:3px solid var(--accent)}
.trxbtn::-webkit-details-marker{display:none}
.trxcount{background:var(--accent);color:#3A2C08;border-radius:10px;padding:1px 9px;font-size:12px}
.trxrow{background:#fff;border:1px solid var(--border);border-radius:12px;padding:11px 12px;margin-top:9px}
.trxrow-top{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--primary-ink)}
.trxrow-top span{font-weight:700;color:var(--accent-ink);white-space:nowrap}
.trxrow-sub{font-size:12.5px;color:#374151;margin-top:2px}
.trxrow-meta{font-size:11.5px;color:var(--muted);margin-top:3px}
.trxrow-cat{font-size:11px;color:var(--accent-ink);margin-top:4px}

/* tombol PDF */
.hdraction{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pdfbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);color:#3A2C08;
        font-size:12px;font-weight:800;letter-spacing:.04em;border-radius:9px;padding:7px 14px;
        border-bottom:2px solid #B8923F}
.pdfbtn:active{background:#C39B47}

/* baris material */
.matrow{padding:8px 0;border-bottom:1px solid #F1F5F9}
.matrow:last-child{border-bottom:none}
.matcode{font-size:12.5px;font-weight:700;color:var(--primary-ink)}
.matdesc{font-size:12px;color:#374151;margin-top:1px}
.matmeta{font-size:11px;color:var(--muted);margin-top:2px}

/* status besar di header detail */
.whead{gap:10px}
.status-big{font-size:12.5px;padding:6px 13px;border-radius:10px;letter-spacing:.02em}

/* captcha */
.capwrap{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.capimg{border:1px solid var(--border);border-radius:8px;background:#fff}
.capnew{font-size:12px;color:var(--primary);text-decoration:underline}

/* form tetap rata kiri walau header di tengah */
.login form{text-align:left}

/* struktur plant */
.tree{margin-top:6px}
.tnode{margin-bottom:4px}
.tgroup>summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;
                background:#fff;border:1px solid var(--border);border-left:3px solid var(--accent);
                border-radius:10px;padding:10px 12px;font-size:13px}
.tgroup>summary::-webkit-details-marker{display:none}
.tgroup[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.tkids{border-left:2px solid #E3E8EF;margin-left:14px;padding-left:10px}
.tleaf{display:flex;gap:8px;align-items:baseline;background:#fff;border:1px solid var(--border);
       border-radius:10px;padding:9px 12px;font-size:13px}
.tcode{font-weight:700;color:var(--primary-ink);white-space:nowrap}
.tdesc{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcount{margin-left:auto;background:var(--accent-soft);color:var(--accent-ink);
        border-radius:9px;padding:1px 8px;font-size:11px;font-weight:700}

/* grup tombol PDF */
.pdfgroup{display:flex;align-items:center;gap:6px}
.dlbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
       border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--primary);
       font-size:15px;font-weight:700;text-decoration:none}
.dlbtn:active{background:var(--primary-soft)}

/* kode company: monospace agar l/1/I tidak tertukar */
#company{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em}

/* layout menu samping */
.layout{display:grid;grid-template-columns:1fr;gap:14px;padding:0 16px 26px}
@media(min-width:700px){
  .layout{grid-template-columns:232px 1fr;align-items:start}
  .sidenav{position:sticky;top:12px}
}
.sidenav{display:flex;flex-direction:column;gap:8px}
.navgroup{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.navgroup>summary{list-style:none;cursor:pointer;padding:11px 13px;font-size:11px;font-weight:800;
                  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
                  border-bottom:1px solid #F1F5F9;display:flex;align-items:center;justify-content:space-between}
.navgroup>summary::-webkit-details-marker{display:none}
.navgroup>summary:after{content:"▾";font-size:11px;color:var(--accent)}
.navgroup:not([open])>summary{border-bottom:none}
.navrow{display:flex;align-items:center;gap:8px;padding:12px 13px;font-size:14px;font-weight:600;
        color:var(--primary-ink);text-decoration:none;border-left:3px solid transparent}
.navrow:active{background:var(--primary-soft)}
.navrow.sub{padding-left:26px;font-weight:500;font-size:13px;color:#374151}
.navrow.sub:before{content:"–";color:var(--accent);margin-right:2px}
.navlbl{flex:1}
.navbadge{background:var(--accent-soft);color:var(--accent-ink);border-radius:9px;padding:1px 8px;
          font-size:11px;font-weight:700}
.navrow.off{opacity:.5}
.navnote{font-size:10px;color:var(--muted);font-weight:600}
.navcontent{padding:0 0 10px}
@media(min-width:700px){ .navcontent{padding:0 0 10px} }

/* layar lebar: beri ruang untuk menu samping */
@media(min-width:700px){ .shell{max-width:980px} }

/* quick insights */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--border);border-left:3px solid var(--accent);
     border-radius:12px;padding:12px}
.kpi-n{font-size:20px;font-weight:800;color:var(--primary-ink);line-height:1.1}
.kpi-l{font-size:11px;color:var(--muted);margin-top:3px}
.kpi.warn{border-left-color:var(--high)}
.kpi.warn .kpi-n{color:var(--high)}
.insrow{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;
        padding:10px 0;border-bottom:1px solid #F1F5F9}
.insrow:last-of-type{border-bottom:none}
.insrow-t{font-size:13.5px;font-weight:700;color:var(--primary-ink)}
.insrow-plant{font-weight:500;color:var(--muted);font-size:11.5px}
.insrow-s{font-size:12px;color:#374151;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insrow-m{font-size:11px;color:var(--muted);margin-top:2px}
.insrow-num{font-size:13px;font-weight:800;color:var(--accent-ink);white-space:nowrap}
@media(min-width:700px){ .kpis{grid-template-columns:repeat(4,1fr)} }

/* cegah melebar di layar sempit */
html,body{overflow-x:hidden}
.layout>*{min-width:0}
.navcontent,.card,.insrow,.insrow-main{min-width:0}
.insrow-num{flex:0 0 auto}
.kpis{min-width:0}
.kpi{min-width:0}
.kpi-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* chart bar tanpa JS */
.chart{margin-top:10px}
.crow{display:grid;grid-template-columns:64px 1fr 62px;gap:8px;align-items:center;
      padding:5px 0;text-decoration:none}
.clabel{font-size:11.5px;font-weight:700;color:var(--primary-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctrack{background:#EEF2F7;height:10px;border-radius:5px;overflow:hidden}
.cfill{background:var(--primary);height:100%;border-radius:5px}
.cfill.gold{background:var(--accent)}
.cfill.soft{background:#9DB6C6}
.cval{font-size:11.5px;font-weight:700;color:var(--accent-ink);text-align:right;white-space:nowrap}
.csub{font-size:10.5px;color:var(--muted);margin:-2px 0 6px 72px;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* vertical bar charts */
.vbars{display:flex;align-items:flex-end;gap:8px;height:auto;min-height:150px;margin-top:14px}
.vcol{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
      height:100%;text-align:center;text-decoration:none}
.vval{font-size:10px;font-weight:800;color:var(--accent-ink);margin-bottom:3px;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vbar{background:linear-gradient(180deg,#0F5C84,var(--primary));border-radius:6px 6px 2px 2px;min-height:4px}
.vbar.gold{background:linear-gradient(180deg,#E0BE74,var(--accent))}
.vbar.soft{background:linear-gradient(180deg,#B7CBD8,#8FA9BA)}
.vlbl{font-size:10px;color:var(--muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.axis{font-size:9.5px;color:#9CA3AF;margin-top:8px;text-align:center;letter-spacing:.03em}

/* overdue ageing */
.ageing{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.agcell{display:block;background:#F8FAFC;border-radius:10px;padding:10px;text-align:center;border-top:3px solid var(--accent);text-decoration:none;color:inherit}
a.agcell:hover{background:#EEF2F7}
a.agcell:active{transform:scale(.99)}
.agcell.mid{border-top-color:var(--med)}
.agcell.bad{border-top-color:var(--high)}
.agn{font-size:17px;font-weight:800;color:var(--primary-ink)}
.agl{font-size:10.5px;color:var(--muted);margin-top:2px}
@media(min-width:700px){ .kpis{grid-template-columns:repeat(3,1fr)} }

/* user management */
.field{width:100%;background:#fff;border:1px solid var(--border);border-radius:10px;
       padding:11px 13px;font-size:14px;font-family:inherit;margin-bottom:8px}
.field:focus{outline:none;border-color:var(--primary)}
.field.sm{padding:8px 10px;font-size:12.5px;margin:0;flex:1;min-width:90px}
select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#64748B 50%),
             linear-gradient(135deg,#64748B 50%,transparent 50%);
             background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
             background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.okbox{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46;border-radius:10px;
       padding:10px 12px;font-size:12.5px;margin-bottom:10px}
.errbox{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B;border-radius:10px;
        padding:10px 12px;font-size:12.5px;margin-bottom:10px}
.ucard{padding:12px 14px}
.uhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.uname{font-size:14px;font-weight:800;color:var(--primary-ink)}
.usub{font-size:11.5px;color:var(--muted);margin-top:1px}
.ubadge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px}
.ubadge.on{background:#DCFCE7;color:#166534}
.ubadge.off{background:#F1F5F9;color:#64748B}
.umeta{font-size:11px;color:var(--muted);margin-top:6px;display:flex;gap:5px;flex-wrap:wrap}
.uacts{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.uinline{display:flex;gap:6px;align-items:center}
.ubtn{background:#F1F5F9;border:1px solid var(--border);border-radius:8px;padding:8px 11px;
      font-size:12px;font-weight:600;color:var(--primary-ink);font-family:inherit;cursor:pointer;white-space:nowrap}
.ubtn:hover{background:#E2E8F0}
.ubtn.danger{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}
.udetails{margin-top:8px;font-size:12px;color:var(--muted)}
.udetails summary{cursor:pointer;padding:4px 0}
.uform{margin-top:8px}

/* tabel user + panel modify */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
.utable{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px}
.utable th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;
           color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.utable td{padding:10px;border-bottom:1px solid #F1F5F9;vertical-align:middle}
.utable tr:last-child td{border-bottom:none}
.utable tbody tr:hover{background:#F8FAFC}
.ucell-user{font-weight:700;color:var(--primary-ink)}
.ucell-date{color:var(--muted);font-size:11.5px;white-space:nowrap}
.ucell-act{text-align:right;white-space:nowrap}
.editcard .erow{margin-top:12px;padding-top:12px;border-top:1px solid #F1F5F9}
.editcard .erow:first-of-type{border-top:none;padding-top:0}
.elabel{display:block;font-size:10.5px;font-weight:700;color:var(--muted);margin-bottom:6px;
        text-transform:uppercase;letter-spacing:.05em}
.einput{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.einput .field{flex:1;min-width:150px;margin:0}
.einput form{display:flex;gap:8px;flex-wrap:wrap}
.einput .btn.primary{height:42px;width:auto;padding:0 18px;margin:0;font-size:13.5px}
.ehead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:4px}
@media(max-width:699px){
  .utable th:nth-child(2), .utable td:nth-child(2),
  .utable th:nth-child(6), .utable td:nth-child(6){display:none}
  .utable{min-width:0}
  .utable td, .utable th{padding:9px 6px}
  .ucell-act{padding-right:2px}
  .uact .ubtn{padding:6px 6px;font-size:10.5px;border-radius:7px}
  .ubadge{padding:3px 6px}
}

/* tombol Home di semua halaman */
.homebar{position:sticky;top:0;z-index:40;padding:10px 16px 2px;background:var(--bg,#F4F7FA)}
.homebtn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--border);
         border-radius:22px;padding:8px 15px;font-size:12.5px;font-weight:700;color:var(--primary-ink);
         text-decoration:none;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.homebtn:hover{background:#F1F5F9}
.homebtn:active{transform:translateY(1px)}
.homeico{font-size:15px;line-height:1;position:relative;top:-1px}
@media(min-width:700px){ .homebar{padding:12px 24px 0} }

/* halaman akun */
.acchead{display:flex;align-items:center;gap:12px}
.accavatar{width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fff;
           display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
           border:3px solid var(--accent);flex:0 0 auto}
.accname{font-size:16px;font-weight:800;color:var(--primary-ink)}
.accuser{font-size:12px;color:var(--muted)}
.accrows{margin-top:14px;border-top:1px solid #F1F5F9}
.accrow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #F1F5F9;font-size:13px}
.accrow:last-child{border-bottom:none}
.accl{color:var(--muted);font-size:12px}
.accv{font-weight:600;color:var(--primary-ink);text-align:right}
.logoutbtn{display:block;text-align:center;line-height:50px;text-decoration:none;
           background:#fff;border:1px solid #FECACA;color:#B91C1C;border-radius:10px;
           height:50px;font-weight:700;font-size:14px;margin-bottom:18px}
.logoutbtn:hover{background:#FEF2F2}

/* password dengan tombol mata */
.pwwrap{position:relative}
.pwwrap .field{padding-right:46px}
.pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;
       border:none;background:transparent;font-size:16px;line-height:1;cursor:pointer;
       color:var(--muted);border-radius:8px;display:flex;align-items:center;justify-content:center}
.pweye:hover{background:#F1F5F9}
.pweye .eye-off{display:none}
.pweye.on .eye-open{display:none}
.pweye.on .eye-off{display:inline}
.wdesc{font-size:13.5px;color:#111827;line-height:1.55;margin-top:6px;white-space:pre-wrap;text-align:left}

/* identitas perusahaan di halaman login */
.companyline{font-size:12.5px;font-weight:700;color:var(--primary-ink);letter-spacing:.04em;
             text-transform:uppercase;margin-top:8px}

/* filter tambahan + ekspor */
.chipsel{margin-top:10px}
.chipsel-lbl{display:block;font-size:10px;font-weight:700;color:var(--muted);
             text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
.chips.scroll .chip{flex:0 0 auto}
.exportrow{display:flex;align-items:center;gap:10px;margin-top:12px}
.exportbtn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);
           border-radius:9px;padding:9px 14px;font-size:12.5px;font-weight:700;
           color:var(--primary-ink);text-decoration:none}
.exportbtn:hover{background:#F1F5F9}
.exportbtn:before{content:"\2193";font-size:14px;line-height:1}
.exportnote{font-size:11.5px;color:var(--muted)}

/* filter berbentuk dropdown */
.filterform .filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.filterform .fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.filterform .fld span{font-size:10px;font-weight:700;color:var(--muted);
                      text-transform:uppercase;letter-spacing:.05em}
.filterform select{width:100%;appearance:none;background:#fff;border:1px solid var(--border);
                   border-radius:9px;padding:10px 26px 10px 12px;font-size:13px;font-family:inherit;
                   color:var(--primary-ink);font-weight:600;
                   background-image:linear-gradient(45deg,transparent 50%,#64748B 50%),
                                    linear-gradient(135deg,#64748B 50%,transparent 50%);
                   background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
                   background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.filterform select:focus{outline:none;border-color:var(--primary)}
@media(min-width:700px){ .filterform .filters{grid-template-columns:repeat(4,1fr)}
                         .filterform .fld:last-child{grid-column:auto} }
.resetlink{font-size:12px;color:var(--muted);text-decoration:none;padding:8px 4px}
.resetlink:hover{color:var(--primary-ink);text-decoration:underline}

/* navigasi halaman daftar */
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;
       margin:6px 0 14px;flex-wrap:wrap}
.pagerinfo{font-size:11.5px;color:var(--muted)}
.pagerbtns{display:flex;align-items:center;gap:8px}
.pbtn{background:#fff;border:1px solid var(--border);border-radius:8px;padding:7px 12px;
      font-size:12px;font-weight:600;color:var(--primary-ink);text-decoration:none}
.pbtn:hover{background:#F1F5F9}
.pageno{font-size:11.5px;color:var(--muted);white-space:nowrap}

/* KPI dapat diklik (drill-through) */
a.kpi{text-decoration:none;display:block;transition:transform .08s ease,box-shadow .08s ease}
a.kpi:hover{box-shadow:0 2px 10px rgba(10,69,101,.12);transform:translateY(-1px)}
a.kpi:after{content:"›";float:right;color:#9CA3AF;font-size:16px;line-height:1;margin-top:-18px}

/* budget vs actual */
.bva-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:8px}
.bva-num{font-size:20px;font-weight:800;color:var(--primary-ink);line-height:1.1}
.bva-lbl{font-size:11px;color:var(--muted);margin-top:2px}
.bva-pct{font-size:15px;font-weight:800;color:#15803D}
.bva-pct.over{color:#B91C1C}
.bva-track{background:#EEF2F7;height:9px;border-radius:5px;overflow:hidden;margin:10px 0 8px}
.bva-fill{background:#16A34A;height:100%;border-radius:5px}
.bva-fill.over{background:#DC2626}
.bva-var{font-size:12px;font-weight:700;color:#15803D;margin-bottom:6px}
.bva-var.neg{color:#B91C1C}
.bva-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:11.5px}
.bva-table th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;
              color:var(--muted);padding:6px 4px;border-bottom:1px solid var(--border);font-weight:700}
.bva-table td{padding:7px 4px;border-bottom:1px solid #F1F5F9;vertical-align:top}
.bva-table tr:last-child td{border-bottom:none}
.bva-table .num{text-align:right;white-space:nowrap}
.bva-table .num.neg{color:#B91C1C;font-weight:700}
.bva-cat{font-weight:700;color:var(--primary-ink)}
.bva-name{font-size:10.5px;color:var(--muted);margin-top:1px}

/* budget usage */
.cfill.over{background:#DC2626}
.cval.over{color:#B91C1C}

/* kartu budget per plant */
.bhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bnote{font-size:10.5px;font-weight:700;color:#B91C1C;background:#FEF2F2;
       border-radius:20px;padding:3px 9px;white-space:nowrap}
.brow{display:block;text-decoration:none;padding:9px 0;border-bottom:1px solid #F1F5F9}
.brow:last-of-type{border-bottom:none}
.brow-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.brow-plant{font-size:13px;font-weight:800;color:var(--primary-ink)}
.brow-var{font-size:13px;font-weight:800;white-space:nowrap}
.brow-var.neg{color:#B91C1C}
.brow-var.pos{color:#15803D}
.brow-sub{font-size:11px;color:var(--muted);margin-top:2px}
.brow-track{background:#EEF2F7;height:6px;border-radius:4px;overflow:hidden;margin-top:6px}
.brow-fill{height:100%;border-radius:4px}
.brow-fill.neg{background:#DC2626}
.brow-fill.pos{background:#16A34A}


/* Baris aset pada detail PM task */
.plantrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  text-decoration:none;color:inherit;padding:10px 0;border-bottom:1px solid #F1F5F9}
.plantrow:last-child{border-bottom:0}
.plantrow .desc{font-weight:650;font-size:13.5px}
.plantrow .meta{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---- Penugasan teknisi pada detail work order ---- */
.assignedbox{background:var(--primary-soft);border:1px solid #CFE0EC;border-radius:12px;
  padding:12px 14px;margin:6px 0 10px;text-align:center}
.ab-lbl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ab-tech{font-size:22px;font-weight:800;color:var(--primary-ink);line-height:1.15;margin-top:2px}
.ab-user{font-size:12px;color:var(--muted);margin-top:2px}

.assignform{display:flex;flex-direction:column;gap:10px;margin-top:12px;
  border-top:1px solid var(--border);padding-top:12px}
.afld{display:flex;flex-direction:column;gap:5px}
.afld>span{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.afld>span em{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0}
.afld select,.afld input{width:100%;height:44px;border:1px solid var(--border);border-radius:10px;
  padding:0 12px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
.afld select:focus,.afld input:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(10,69,101,.14)}

.btn-assign{width:100%;height:48px;border:none;border-radius:12px;background:var(--primary);color:#fff;
  font-family:inherit;font-size:15px;font-weight:750;letter-spacing:.01em;
  border-bottom:3px solid var(--accent);display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer}
.btn-assign:active{background:var(--primary-ink);transform:translateY(1px)}
.btn-assign .ba-plus{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.18);font-size:14px;line-height:1}

.btn-remove{background:#fff;border:1px solid #FCA5A5;color:#B91C1C;border-radius:10px;
  padding:9px 14px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.btn-remove:hover{background:#FEF2F2}
.assignhint{font-size:11px;color:var(--muted);text-align:center;margin-top:-2px}

/* ---- Tabel report (Reports) ---- */
.rwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);
  border-radius:12px;background:#fff;margin-top:10px}
.rtable{width:100%;border-collapse:collapse;font-size:12px;min-width:640px}
.rtable thead th{position:sticky;top:0;background:#F8FAFC;text-align:left;
  font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:9px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.rtable tbody td{padding:8px 10px;border-bottom:1px solid #F1F5F9;color:var(--ink);
  white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.rtable tbody tr:nth-child(even){background:#FCFDFE}
.rtable tbody tr:last-child td{border-bottom:0}
.rtable td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- Work Request: approve / reject (lokal, belum tulis ke Pronto) ---- */
.wrwrap{margin-bottom:10px}
.wrwrap .wo{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}
.wractions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fff;
  border:1px solid var(--border);border-top:1px dashed var(--border);
  border-radius:0 0 14px 14px;padding:9px 12px}
.wractions form{display:flex;gap:8px;align-items:center;margin:0}
.rejform{flex:1;min-width:0}
.rejreason{flex:1;min-width:0;height:34px;border:1px solid var(--border);border-radius:8px;
  padding:0 10px;font-size:12px;font-family:inherit;background:#FCFDFE}
.rejreason:focus{outline:none;border-color:var(--primary);background:#fff}
.btn-approve{height:34px;padding:0 15px;border:none;border-radius:8px;background:#0F766E;color:#fff;
  font-weight:700;font-size:12.5px;font-family:inherit;cursor:pointer;white-space:nowrap}
.btn-approve:hover{background:#0B5F58}
.btn-approve.wide,.btn-reject.wide{height:46px;width:100%;border-radius:12px;font-size:14px}
.btn-reject{height:34px;padding:0 15px;border:1px solid #FCA5A5;border-radius:8px;background:#fff;
  color:#B91C1C;font-weight:700;font-size:12.5px;font-family:inherit;cursor:pointer;white-space:nowrap}
.btn-reject:hover{background:#FEF2F2}
.btn-neutral{height:34px;padding:0 15px;border:1px solid #CBD5E1;border-radius:8px;background:#fff;color:#334155;font-size:12.5px;font-weight:600;cursor:pointer}
.btn-neutral:hover{background:#F1F5F9}
.btn-neutral.wide{height:42px;width:100%;border-radius:10px;font-size:13px}
.wrdecided{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fff;
  border:1px solid var(--border);border-top:none;border-radius:0 0 14px 14px;
  padding:9px 12px;font-size:11.5px;color:var(--muted)}
.wrdecided b{color:#0F766E}
.wrsync{margin-left:auto;font-size:10.5px;color:#92400E;background:#FEF3C7;border-radius:6px;padding:2px 7px}
.dmsg{border-radius:10px;padding:10px 12px;font-size:12.5px;margin-bottom:12px;border:1px solid}
.dmsg.ok{background:#ECFDF5;border-color:#A7F3D0;color:#065F46}
.dmsg.warn{background:#FEF3C7;border-color:#FCD34D;color:#92400E}
.decided{border-radius:12px;padding:12px 14px;border:1px solid}
.decided.ok{background:#ECFDF5;border-color:#A7F3D0}
.decided.no{background:#FEF2F2;border-color:#FECACA}
.decided-lbl{font-size:14px;font-weight:700;color:var(--primary-ink)}
.decided.no .decided-lbl{color:#991B1B}
.decided-who{font-size:11.5px;color:var(--muted);margin-top:3px}
.decided-why{font-size:12px;color:#374151;margin-top:6px}
.decform{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.wrhist{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}
.wrhist summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--primary)}
@media(max-width:520px){
  .wractions{flex-wrap:wrap;gap:10px}
  .wractions form{flex:1 1 100%}
  .rejform{flex-wrap:wrap;gap:8px}
  .rejreason{flex:1 1 100%;height:40px;font-size:13px}
  .btn-approve,.btn-reject{width:100%;height:42px;font-size:13.5px}
}
.pill.tech{background:#E0F2FE;color:#075985}

/* validasi plant item di form New request */
.plantcheck{display:block;margin-top:4px;font-size:12px;font-weight:600;min-height:16px}
.plantcheck.ok{color:#0f7b3f}
.plantcheck.bad{color:#b42318}

.wrsync.ok{color:#0f7b3f}

/* pemilih plant item (New request) */
.picker{position:relative}
.pickermenu{position:absolute;z-index:30;left:0;right:0;margin-top:4px;background:#fff;
  border:1px solid #d6dbe1;border-radius:12px;box-shadow:0 10px 24px rgba(10,69,101,.14);
  max-height:260px;overflow:auto}
.pickrow{display:flex;gap:10px;align-items:baseline;width:100%;padding:10px 12px;background:none;
  border:0;border-bottom:1px solid #f0f2f5;text-align:left;font:inherit;cursor:pointer}
.pickrow:last-child{border-bottom:0}
.pickrow b{font-size:13px;color:#0A4565;min-width:74px}
.pickrow span{font-size:12px;color:#4b5563;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickrow:hover,.pickrow.sel{background:#eef5fa}

/* lonceng notifikasi in-app */
.homebar{display:flex;align-items:center;justify-content:space-between}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:20px;background:#fff;border:1px solid #d6dbe1;
  text-decoration:none;font-size:18px;line-height:1}
.bellico{filter:saturate(.6)}
.bellbadge{position:absolute;top:-4px;right:-6px;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:#b42318;color:#fff;font-size:11px;font-weight:700;
  line-height:18px;text-align:center}
.topright{display:flex;align-items:center;gap:10px}

/* daftar notifikasi */
.note{background:#fff;border:1px solid #e3e8ee;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.note.unread{border-left:4px solid #D2A957;background:#fffdf8}
.notehead{display:flex;align-items:center;gap:8px;font-size:14px;color:#0A4565}
.notebell{font-size:13px}
.notewhen{margin-left:auto;font-size:11px;color:#9CA3AF;font-family:ui-monospace,Menlo,Consolas,monospace}
.notebody{font-size:13px;color:#374151;margin:6px 0 10px;line-height:1.45}
.noteactions{display:flex;align-items:center;gap:12px}
.notelink{font-size:13px;font-weight:700;color:#0A4565;text-decoration:none}
.noteread{background:none;border:0;color:#6b7280;font-size:12px;text-decoration:underline;padding:0;cursor:pointer}

/* tabel readings di halaman detail monitor point */
.rdtable{margin-top:6px}
.rdhead,.rdrow{display:grid;grid-template-columns:1.5fr .8fr .8fr 1fr;gap:6px;
  padding:8px 2px;border-bottom:1px solid #eef1f4;font-size:12px}
.rdhead{font-weight:700;color:#6b7280;border-bottom:2px solid #e3e8ee}
.rdrow b{color:#0A4565}
.rdrow span,.rdhead span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Materials: satu baris per item, seperti layar Quick Pick Slip di Pronto */
.matmeta-so{font-size:11px;color:#6b7280;margin:10px 0 4px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.matwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e3e8ee;
  border-radius:10px;background:#fff;margin:8px 0 4px}
.mattable{width:100%;border-collapse:collapse;font-size:11.5px}
.mattable th{background:#f4f7fa;color:#52606d;font-weight:700;text-align:left;
  padding:6px 6px;border-bottom:1px solid #e3e8ee;white-space:nowrap;font-size:10px;
  text-transform:uppercase;letter-spacing:.02em}
.mattable td{padding:7px 6px;border-bottom:1px solid #f0f2f5;white-space:nowrap;color:#1f2933}
.mattable td.mdesc{white-space:normal;line-height:1.25;word-break:break-word}
.mattable tr:last-child td{border-bottom:0}
.mattable tbody tr:nth-child(even) td{background:#fbfcfd}
.mattable .mic{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:600;color:#0A4565}
.mattable .mdesc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;white-space:normal;word-break:break-word;line-height:1.3;max-height:2.7em}
.mattable{table-layout:fixed}
.mattable .micol{width:98px}
.mattable .num{width:46px}
.mattable th.uomcol{width:42px}
.mattable .doccol{width:84px}
.mattable .mic{word-break:break-word;font-size:10.5px}
.mattable td.doccol{white-space:normal;line-height:1.2}
.inttag{display:block;margin:2px 0 0 0;width:fit-content;padding:1px 4px;border-radius:4px;
  background:#EEF3F7;color:#52606D;font-size:8.5px;font-weight:700;vertical-align:middle}
.mattable .mso{color:#6b7280}
.mattable .num{text-align:right;font-variant-numeric:tabular-nums}

/* tombol aktif/nonaktif langsung dari daftar user */
.uact{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.uact .ubtn{text-align:center;padding:7px 9px;font-size:11px}
.uact-form{display:inline;margin:0}
.ubtn.ok{background:#ECFDF5;border-color:#BBF7D0;color:#15803D}

/* tabel material: rapat di layar HP supaya semua kolom muat */
@media (max-width: 480px){
  .mattable{font-size:10.5px}
  .mattable th{font-size:9px;padding:5px 5px}
  .mattable td{padding:6px 5px}
  .mattable .mic{font-size:10.5px}
}