/* 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{background:#F8FAFC;border-radius:10px;padding:10px;text-align:center;border-top:3px solid var(--accent)}
.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 7px}
}

/* 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} }