:root{
  --green:#0b6b3a;--green-dark:#07512c;--green-soft:#e9f5ef;--blue:#176b87;--gold:#c89b2c;
  --ink:#1f2937;--muted:#667085;--line:#d9e1dc;--bg:#f4f7f5;--white:#fff;--danger:#b42318;--warning:#9a6700;
  --radius:12px;--shadow:0 10px 30px rgba(18,57,39,.08)
}
*{box-sizing:border-box}html{font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg)}body{margin:0;min-height:100vh}a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}
.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1240px)/2));position:sticky;top:0;z-index:40;box-shadow:0 2px 10px rgba(0,0,0,.025)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);min-width:240px}.brand:hover{text-decoration:none}.brand img{width:52px;height:52px;object-fit:contain}.brand span{display:flex;flex-direction:column}.brand strong{font-size:17px;color:var(--green-dark)}.brand small{font-size:12px;color:var(--muted);margin-top:2px}
.main-nav{display:flex;align-items:center;gap:18px;font-size:14px}.main-nav a{font-weight:600;color:#344054}.main-nav a:hover{color:var(--green);text-decoration:none}.user-chip{background:var(--green-soft);color:var(--green-dark);padding:8px 11px;border-radius:999px;font-size:12px}.nav-toggle{display:none;background:none;border:0;font-size:24px}
.container{max-width:1240px;margin:0 auto;padding:28px 24px 50px}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.page-head h1{margin:0 0 6px;font-size:28px;color:#102a1d}.page-head p{margin:0;color:var(--muted)}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:20px}.card h2,.card h3{margin-top:0;color:#173c29}.card-title-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.card-title-row h2,.card-title-row h3{margin:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow)}.stat small{display:block;color:var(--muted);font-weight:600;margin-bottom:8px}.stat strong{font-size:30px;color:var(--green-dark)}.stat .hint{font-size:12px;color:var(--muted);margin-top:5px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stack-lg>*+*{margin-top:18px}.stack-sm>*+*{margin-top:8px}
label{display:block;font-size:13px;font-weight:700;color:#344054}input,textarea,select{width:100%;margin-top:7px;border:1px solid #cbd5d0;border-radius:8px;padding:11px 12px;font:inherit;color:var(--ink);background:#fff;transition:.2s}textarea{min-height:105px;resize:vertical}input:focus,textarea:focus,select:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(11,107,58,.12)}label small,.help{display:block;color:var(--muted);font-weight:400;margin-top:5px;font-size:12px}.required::after{content:' *';color:var(--danger)}fieldset{border:1px solid var(--line);border-radius:10px;padding:18px}legend{font-weight:800;color:var(--green-dark);padding:0 8px}
.btn{appearance:none;border:1px solid transparent;border-radius:8px;padding:10px 15px;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;line-height:1.2}.btn:hover{text-decoration:none}.btn-primary{background:var(--green);color:#fff}.btn-primary:hover{background:var(--green-dark)}.btn-secondary{background:#fff;color:#344054;border-color:#cbd5d0}.btn-secondary:hover{background:#f7f9f8}.btn-danger{background:#fff;color:var(--danger);border-color:#f1b4ae}.btn-warning{background:#fff7e6;color:#7a4d00;border-color:#f3d28b}.btn-info{background:#ecf7fb;color:#14566d;border-color:#b9dce8}.btn-lg{padding:13px 20px;font-size:15px}.btn-sm{padding:7px 10px;font-size:12px}.btn-block{width:100%}.btn:disabled{opacity:.55;cursor:not-allowed}
.alert{border-radius:9px;padding:12px 14px;margin-bottom:16px;border:1px solid}.alert-success{background:#ecfdf3;border-color:#abefc6;color:#067647}.alert-danger{background:#fef3f2;border-color:#fecdca;color:#b42318}.alert-warning{background:#fffaeb;border-color:#fedf89;color:#93370d}.alert-info{background:#eff8ff;border-color:#b2ddff;color:#175cd3}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px}.table{width:100%;border-collapse:collapse;background:#fff;min-width:760px}.table th{background:#f1f5f2;color:#344054;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:12px;border-bottom:1px solid var(--line)}.table td{padding:12px;border-bottom:1px solid #edf1ee;vertical-align:top;font-size:14px}.table tr:last-child td{border-bottom:0}.table .amount{text-align:right;white-space:nowrap}.table-actions{white-space:nowrap}.empty{padding:38px;text-align:center;color:var(--muted)}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;white-space:nowrap}.badge-success{background:#dcfae6;color:#067647}.badge-warning{background:#fef0c7;color:#93370d}.badge-danger{background:#fee4e2;color:#b42318}.badge-info{background:#dff3fb;color:#14566d}.badge-secondary{background:#eaecf0;color:#475467}
.workflow{display:flex;gap:0;align-items:stretch;overflow:auto;padding-bottom:4px}.workflow-step{min-width:180px;flex:1;position:relative;background:#fff;border:1px solid var(--line);padding:14px}.workflow-step:first-child{border-radius:10px 0 0 10px}.workflow-step:last-child{border-radius:0 10px 10px 0}.workflow-step+.workflow-step{border-left:0}.workflow-step strong{display:block;font-size:13px;margin-bottom:6px}.workflow-step small{display:block;color:var(--muted);font-size:11px;line-height:1.4}.workflow-step.approved{background:#effaf3;border-color:#9ed4b5}.workflow-step.pending{background:#fff8e8;border-color:#e8c46b}.workflow-step.rejected,.workflow-step.returned{background:#fff0ef;border-color:#e7aaa4}
.detail-grid{display:grid;grid-template-columns:220px 1fr;border:1px solid var(--line);border-bottom:0}.detail-grid>div{padding:11px 13px;border-bottom:1px solid var(--line)}.detail-grid .label{font-weight:700;background:#f7f9f8}.detail-grid .value{white-space:pre-wrap}.section-text{border:1px solid var(--line);border-radius:9px;padding:16px;margin-top:14px}.section-text h3{font-size:14px;margin:0 0 8px;color:#344054}.section-text p{margin:0;line-height:1.6;white-space:pre-wrap}
.signature-pad{border:2px dashed #a8b8af;border-radius:10px;background:#fff;position:relative}.signature-pad canvas{display:block;width:100%;height:180px;touch-action:none;border-radius:8px}.signature-tools{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.signature-tools small{color:var(--muted)}
.cost-table{width:100%;border-collapse:collapse}.cost-table th,.cost-table td{border:1px solid var(--line);padding:8px}.cost-table th{background:#f1f5f2;font-size:12px}.cost-table input{margin:0}.cost-total{text-align:right;font-size:18px;font-weight:800;color:var(--green-dark);padding-top:12px}.remove-row{width:34px;height:34px;padding:0;border-radius:50%}
.timeline{position:relative;margin-left:10px}.timeline::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:#d7e2dc}.timeline-item{position:relative;padding-left:30px;margin-bottom:18px}.timeline-dot{position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:#98a2b3;border:3px solid #fff;box-shadow:0 0 0 1px #d0d5dd}.timeline-item.approved .timeline-dot{background:#12b76a}.timeline-item.pending .timeline-dot{background:#f79009}.timeline-item.returned .timeline-dot,.timeline-item.rejected .timeline-dot{background:#f04438}.timeline-item strong{display:block;font-size:14px}.timeline-item p{margin:4px 0 0;color:var(--muted);font-size:13px}
.auth-page{background:linear-gradient(135deg,#e9f5ef 0%,#f8faf9 52%,#eaf4f8 100%)}.auth-shell,.install-shell{min-height:100vh;display:grid;place-items:center;padding:28px}.auth-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 80px rgba(10,55,35,.13);padding:30px}.install-card{width:min(900px,100%)}.auth-brand{display:flex;align-items:center;gap:15px;margin-bottom:24px}.auth-brand img{width:70px;height:70px;object-fit:contain}.auth-brand h1{margin:0;color:var(--green-dark);font-size:24px}.auth-brand p{margin:5px 0 0;color:var(--muted)}.auth-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;text-align:center}
.footer{max-width:1240px;margin:0 auto;padding:18px 24px 28px;color:var(--muted);display:flex;justify-content:space-between;font-size:12px}
.kpi-strip{display:flex;gap:14px;flex-wrap:wrap}.kpi{background:#f7f9f8;border:1px solid var(--line);border-radius:9px;padding:10px 13px}.kpi small{display:block;color:var(--muted);font-size:11px}.kpi strong{display:block;margin-top:3px}.attachment-list{list-style:none;margin:0;padding:0}.attachment-list li{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #edf1ee;padding:10px 0}.attachment-list li:last-child{border-bottom:0}.muted{color:var(--muted)}.text-right{text-align:right}.nowrap{white-space:nowrap}.notice{background:#f7fbf8;border-left:4px solid var(--green);padding:13px 15px;border-radius:5px;line-height:1.5}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3{grid-template-columns:1fr}.main-nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:18px 24px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow)}.main-nav.open{display:flex}.nav-toggle{display:block}.user-chip{text-align:center}.detail-grid{grid-template-columns:1fr}.detail-grid .label{border-bottom:0}.page-head{flex-direction:column}.workflow{flex-direction:column}.workflow-step{border:1px solid var(--line)!important;border-radius:8px!important;margin-bottom:8px}.topbar{padding:0 16px}.brand small{display:none}}
@media(max-width:560px){.container{padding:20px 14px 40px}.stats{grid-template-columns:1fr}.card{padding:16px}.auth-card{padding:22px}.brand strong{font-size:14px}.brand img{width:44px;height:44px}.page-head h1{font-size:24px}.footer{flex-direction:column;gap:8px}.actions{width:100%}.actions .btn{flex:1}.cost-table{min-width:720px}.cost-builder{overflow:auto}}
@media print{.topbar,.footer,.no-print,.actions{display:none!important}.container{max-width:none;padding:0}.card{box-shadow:none;border:0;padding:0}.print-break{page-break-before:always}body{background:#fff}.detail-grid,.section-text{break-inside:avoid}}

/* Detailed costing table — mirrors the current WOKIKE manual requisition form */
.costing-card{border-top:4px solid var(--green)}
.costing-card .card-title-row{align-items:flex-start}
.section-help{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.required-mark{color:#b42318}
.cost-table thead th{text-align:center;vertical-align:middle;letter-spacing:.02em}
.cost-table thead th:nth-child(2){text-align:left}
.cost-table tfoot td{background:#edf5ef;border-top:2px solid var(--green-dark);font-size:14px}
.cost-table .total-cell{font-size:16px;color:var(--green-dark);white-space:nowrap}
.compact-notice{margin-top:12px;padding:10px 12px;font-size:12px}

/* Staff administration */
.staff-notice{margin-bottom:20px}
.staff-management-grid{grid-template-columns:minmax(390px,.85fr) minmax(0,1.5fr)}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-weight:400}
.checkbox-row input{width:auto;margin:3px 0 0;flex:0 0 auto}
.checkbox-row span{display:block}
.checkbox-row strong{display:block;color:#344054;font-size:13px}
.checkbox-row small{margin-top:3px}
.approval-option{background:#f7fbf8;border:1px solid #cfe3d7;border-radius:9px;padding:12px}
.staff-table{min-width:900px}
@media(max-width:1000px){.staff-management-grid{grid-template-columns:1fr}}

.signature-choice-list{display:grid;gap:8px;margin-top:8px}.signature-choice-list label{display:flex;gap:8px;align-items:center;font-weight:500}.signature-method{margin-top:16px;padding:16px;border:1px solid #d8e2dc;border-radius:10px;background:#fbfdfb}.saved-signature-preview{display:block;max-width:340px;max-height:130px;background:#fff;border:1px solid #d8e2dc;border-radius:8px;padding:10px}.inline-check{display:flex!important;gap:8px;align-items:center;font-weight:500!important}.signature-method[hidden]{display:none!important}

.approval-route{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}.approval-route span{padding:10px 14px;border:1px solid #cbd9d0;border-radius:999px;background:#f5faf6;font-weight:700}.approval-route b{color:var(--muted)}