:root{
  --steel-fixed:#1d3b4a; --steel:#1d3b4a; --cane:#4f7d3a; --molasses:#b9771e; --paper:#f4f6f3; --ink:#1b2328; --line:#d9dfd8;
  --bs-body-font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bs-primary:#1d3b4a; --bs-primary-rgb:29,59,74;
}
[data-bs-theme="dark"] .btn-primary{--bs-btn-bg:#3f7fa0;--bs-btn-border-color:#3f7fa0;--bs-btn-hover-bg:#4d8fb2;--bs-btn-hover-border-color:#4d8fb2;--bs-btn-active-bg:#36708d;--bs-btn-active-border-color:#36708d}
[data-bs-theme="dark"] .ig-tile.mid{background:rgba(185,119,30,.28)} [data-bs-theme="dark"] .ig-tile.hi{background:rgba(185,119,30,.5)}
[data-bs-theme="dark"] .topbar{background:#12303d}
[data-bs-theme="dark"] .btn-outline-secondary{--bs-btn-color:#c3cdc8;--bs-btn-border-color:#74827c;--bs-btn-hover-bg:#39454a;--bs-btn-hover-color:#fff;--bs-btn-hover-border-color:#93a09a;--bs-btn-active-bg:#46535a;--bs-btn-active-color:#fff;--bs-btn-active-border-color:#93a09a}
[data-bs-theme="dark"]{ --paper:#141a1d; --ink:#e6ebe8; --line:#2c373c; --steel:#7fb2c7; --bs-primary:#5b98b0; --bs-primary-rgb:91,152,176; }
body{background:var(--paper);color:var(--ink);padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2,h3,h4,h5,.brand{font-family:'Barlow Semi Condensed','Barlow',sans-serif;font-weight:700;letter-spacing:.2px}
.topbar{background:#1d3b4a;color:#fff;padding-top:env(safe-area-inset-top,0px)}
.topbar .brand{font-size:1.25rem}
.topbar .brand small{font-family:'Barlow';font-weight:400;opacity:.7;font-size:.8rem}
.btn-primary{--bs-btn-bg:#1d3b4a;--bs-btn-border-color:#1d3b4a;--bs-btn-hover-bg:#142b37;--bs-btn-hover-border-color:#142b37}
#sb .nav-link{color:var(--ink);border-radius:6px;padding:.45rem .7rem;font-weight:500}
#sb .nav-link i{width:1.4rem;display:inline-block;opacity:.75}
#sb .nav-link.active{background:rgba(var(--bs-primary-rgb),.12);color:var(--steel);box-shadow:inset 3px 0 0 var(--molasses)}
#sb .grp{font-size:.8rem;color:var(--bs-secondary-color);margin:1rem .7rem .3rem}
@media(min-width:992px){
  .layout{display:flex}
  #sb{width:250px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow:auto;border-right:1px solid var(--line);background:var(--bs-body-bg)}
}
main{flex:1;min-width:0;padding:1.25rem}
.panel{background:var(--bs-body-bg);border:1px solid var(--line);border-radius:8px}
.kpi{padding:.9rem 1rem;border-left:4px solid var(--steel)}
.kpi .v{font-family:'Barlow Semi Condensed';font-size:1.9rem;font-weight:700;line-height:1}
.kpi .l{font-size:.85rem;color:var(--bs-secondary-color)}
.kpi.warn{border-left-color:var(--molasses)} .kpi.bad{border-left-color:#b23b3b} .kpi.ok{border-left-color:var(--cane)}
.bar{height:10px;border-radius:5px;background:var(--steel)}
.table{--bs-table-bg:transparent;margin:0}
.table thead th{font-size:.8rem;color:var(--bs-secondary-color);font-weight:600;white-space:nowrap;border-bottom-color:var(--line)}
.table td{vertical-align:middle}
.flow{display:flex;gap:0;overflow-x:auto;margin:.25rem 0 1rem}
.flow .st{flex:1;min-width:92px;text-align:center;font-size:.75rem;position:relative;padding-top:22px;color:var(--bs-secondary-color)}
.flow .st::before{content:"";position:absolute;top:6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--line);z-index:1}
.flow .st::after{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--line)}
.flow .st:first-child::after{display:none}
.flow .st.done{color:var(--ink)} .flow .st.done::before,.flow .st.done::after{background:var(--cane)}
.flow .st.cur{color:var(--ink);font-weight:600} .flow .st.cur::before{background:var(--molasses);box-shadow:0 0 0 4px rgba(185,119,30,.25)}
.tl{border-left:2px solid var(--line);margin-left:.4rem;padding-left:1rem}
.tl .it{position:relative;margin-bottom:.8rem}
.tl .it::before{content:"";position:absolute;left:-1.4rem;top:.35rem;width:10px;height:10px;border-radius:50%;background:var(--steel)}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1rem;margin:0}
dl.kv dt{font-weight:500;color:var(--bs-secondary-color)} dl.kv dd{margin:0}
.toastx{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:2000}
.sign{border-top:1px solid var(--ink);padding-top:.3rem;margin-top:3rem;font-size:.85rem}
.print-only{display:none}
.ig-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.ig-flow{display:flex;align-items:stretch;gap:.25rem;flex-wrap:wrap}
.ig-node{flex:1 1 130px;border:1px solid var(--line);border-top:4px solid var(--c);border-radius:8px;padding:.6rem .7rem;text-align:center}
.ig-node i{font-size:1.4rem;color:var(--c)}
.ig-node .v{font-family:'Barlow Semi Condensed';font-size:1.8rem;font-weight:700;line-height:1.1}
.ig-node .l{font-size:.8rem;color:var(--bs-secondary-color)}
.ig-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.7rem;color:var(--bs-secondary-color);min-width:64px;text-align:center}
.ig-arrow i{font-size:1.2rem}
@media(max-width:767px){.ig-arrow{flex:1 1 100%;flex-direction:row;gap:.4rem;min-width:0}.ig-arrow i{transform:rotate(90deg)}}
.ig-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.4rem}
.ig-tile{border:1px solid var(--line);border-radius:6px;padding:.4rem .55rem;background:var(--bs-body-bg)}
.ig-tile .n{font-size:.8rem;font-weight:600;line-height:1.15}
.ig-tile .o{font-family:'Barlow Semi Condensed';font-size:1.4rem;font-weight:700;line-height:1.2}
.ig-tile .o small{font-size:.7rem;font-weight:400}
.ig-tile .m{font-size:.75rem;color:var(--bs-secondary-color)}
.ig-tile.mid{background:rgba(185,119,30,.18)} .ig-tile.hi{background:rgba(185,119,30,.38)}
.ig-tile.br{box-shadow:inset 0 0 0 2px #b23b3b}

@media(min-width:992px){#md .modal-lg{--bs-modal-width:980px}}
#wdParts .form-select{min-width:118px}
/* ---------- mobile app mode ---------- */
html{-webkit-text-size-adjust:100%} body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:1030;display:flex;background:var(--bs-body-bg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.bnav a{flex:1;text-align:center;padding:.5rem 0 .4rem;color:var(--bs-secondary-color);text-decoration:none;font-size:.7rem;position:relative;min-height:56px}
.bnav a i{display:block;font-size:1.4rem;line-height:1.2}
.bnav a.on{color:var(--steel);font-weight:600}
.bnav a.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--molasses)}
.bnav .bd{position:absolute;top:3px;left:calc(50% + 8px);background:var(--molasses);color:#fff;border-radius:9px;font-size:.62rem;min-width:16px;padding:0 4px;line-height:16px;font-weight:600}
.fab{position:fixed;right:16px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:1031;width:56px;height:56px;border-radius:50%;border:0;background:var(--molasses);color:#fff;font-size:1.6rem;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.fab:active{transform:scale(.94)}
@media(max-width:991.98px){
  .topbar{position:sticky;top:0;z-index:1020}
  .topbar .brand{font-size:1.15rem;min-width:0;flex:1 1 auto}
  #roleSel{max-width:190px!important;font-size:.8rem}
  main{padding:.9rem .85rem calc(88px + env(safe-area-inset-bottom,0px))}
  .toastx{left:1rem;right:1rem;bottom:calc(138px + env(safe-area-inset-bottom,0px))}
  .form-control,.form-select{font-size:16px}
  main .btn-primary[onclick^="newRequest"],main .btn-primary[onclick^="newMovement"],main .btn-primary[onclick^="editUnit"],main .btn-primary[onclick^="editMaster"],main .btn-primary[onclick^="addPM"]{display:none}
}
@media(max-width:575.98px){
  #roleSel{max-width:128px!important}
}
@media(max-width:767.98px){
  h3{font-size:1.4rem}
  .btn{min-height:44px} .btn-sm{min-height:38px;padding-left:.7rem;padding-right:.7rem}
  main .d-flex.flex-wrap > .form-control{flex:1 1 100%;max-width:none!important}
  main .d-flex.flex-wrap > .form-select{flex:1 1 calc(50% - .5rem);max-width:none!important}
  section.panel:has(table.table){border:0;background:transparent}
  section.panel:has(table.table) > div{padding-left:0!important;padding-right:0!important}
  .flow .st{min-width:54px;font-size:.65rem}
  main .d-flex.flex-wrap > h3{flex:1 1 100%}
  .kpi{padding:.7rem .8rem} .kpi .v{font-size:1.6rem}
  /* tables become cards */
  .table-responsive{overflow:visible}
  table.table thead{display:none}
  table.table,table.table tbody{display:block;width:100%}
  table.table tbody tr{display:block;border:1px solid var(--line);border-radius:10px;padding:.55rem .75rem;margin-bottom:.6rem;background:var(--bs-body-bg)}
  table.table td{display:flex;justify-content:space-between;align-items:center;gap:.8rem;border:0;padding:.22rem 0;text-align:right;background:transparent;box-shadow:none;width:auto}
  table.table td::before{content:attr(data-label);color:var(--bs-secondary-color);font-size:.8rem;text-align:left;flex:0 0 36%;max-width:36%}
  table.table td:first-child{font-weight:600;font-size:1rem;text-align:left;justify-content:flex-start;padding-bottom:.4rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}
  table.table td:first-child::before,table.table td[data-label='']::before{display:none}
  table.table td[data-label='']{justify-content:flex-end;padding-top:.5rem;flex-wrap:wrap}
  table.table td > div{text-align:right}
  table.table td select,table.table td input.form-control{flex:1 1 auto;min-width:0}
  table.table td input[type=checkbox]{width:1.4rem;height:1.4rem}
  /* dialogs become bottom sheets */
  #md .modal-dialog{position:fixed;left:0;right:0;bottom:0;margin:0;max-width:none;width:100%;height:auto;max-height:92vh;transform:translateY(100%);transition:transform .28s ease}
  #md.show .modal-dialog{transform:none}
  #md .modal-content{border:0;border-radius:18px 18px 0 0;max-height:92vh}
  #md .modal-header{padding:1rem 1rem .6rem;position:relative}
  #md .modal-header::before{content:"";position:absolute;top:6px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line)}
  #md .modal-footer{position:sticky;bottom:0;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom,0px));gap:.4rem;background:var(--bs-body-bg)}
  #md .modal-footer .btn{flex:1 1 calc(50% - .4rem);margin:0}
  dl.kv{grid-template-columns:1fr;gap:0}
  dl.kv dt{margin-top:.5rem;font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){#md .modal-dialog{transition:none}.fab:active{transform:none}}
 #wdParts input[data-k=oldSerial],#wdParts input[data-k=newSerial]{min-width:104px}
:focus-visible{outline:2px solid var(--molasses);outline-offset:2px}
@media print{
  .no-print,#sb,.topbar{display:none!important}
  .print-only{display:block}
  body{background:#fff;color:#000} main{padding:0}
  .panel{border:1px solid #bbb;break-inside:avoid}
}

/* ---------- login page (homepage) ---------- */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 3000; }
.skip-link:focus { left: 0; }
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.login-hero { background: linear-gradient(160deg, #12303d, var(--steel-fixed) 55%, #2f6b52); color: #fff; padding: 2rem 0 3rem; flex: 1; }
.login-hero h1 { font-size: clamp(1.9rem, 6vw, 3rem); }
.login-split { display: grid; gap: 1.75rem; align-items: center; }
.login-card { max-width: 30rem; width: 100%; margin-inline: auto; }
.login-card .nav-link { color: var(--bs-secondary-color); font-weight: 600; }
.login-card .nav-link.active { color: var(--steel); }
.otp-row { display: flex; gap: .5rem; justify-content: space-between; }
.otp-row input { width: 100%; max-width: 3.4rem; text-align: center; font-size: 1.4rem; padding: .25rem; }
.feature-list { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .6rem; }
.feature-list li { display: flex; gap: .7rem; align-items: flex-start; opacity: .95; }
.feature-list i { margin-top: .25rem; color: #f0b44a; }
@media (min-width: 992px) { .login-split { grid-template-columns: 1.1fr 1fr; } }
.photo-tile { position: relative; width: 6rem; height: 6rem; border-radius: 8px; overflow: hidden; background: var(--line); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile .remove { position: absolute; top: 0; right: 0; }
.rating i { color: var(--molasses); }
#toasts { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 2100; display: flex; flex-direction: column; gap: .5rem; max-width: calc(100vw - 2rem); }
@media (max-width: 991.98px) { #toasts { left: 1rem; bottom: calc(138px + env(safe-area-inset-bottom, 0px)); } }
.spinner-border-sm { --bs-spinner-width: 1rem; --bs-spinner-height: 1rem; }
.stage-pill { font-size: .72rem; }
.table td .btn-group-actions { white-space: nowrap; }