:root{
  --navy:#10233f;--navy-2:#183b66;--orange:#f97316;--orange-2:#fb923c;--bg:#f4f7fb;--card:#fff;
  --text:#172033;--muted:#64748b;--line:#e3e9f1;--success:#059669;--danger:#dc2626;--warning:#d97706;--info:#0284c7;
  --radius:16px;--shadow:0 8px 30px rgba(16,35,63,.07);--sidebar:264px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:14px}a{color:inherit}button,input,select,textarea{font:inherit}.app{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:linear-gradient(180deg,var(--navy),#0a172a);color:#dce7f5;padding:18px 14px;z-index:40;overflow-y:auto}.brand{display:flex;align-items:center;gap:12px;padding:8px 10px 20px}.brand-mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,var(--orange),#ea580c);display:grid;place-items:center;color:#fff;font-weight:900;font-size:17px;box-shadow:0 8px 20px rgba(249,115,22,.3)}.brand strong{display:block;color:#fff;font-size:19px;letter-spacing:-.3px}.brand span{font-size:11px;color:#9fb5cf}.nav-group{margin:13px 0 5px;padding:0 12px;color:#6f8bab;text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:1.2px}.nav-link{display:flex;align-items:center;gap:11px;text-decoration:none;padding:10px 12px;margin:3px 0;border-radius:11px;color:#c5d4e7;transition:.18s}.nav-link:hover,.nav-link.active{background:rgba(255,255,255,.09);color:#fff}.nav-link.active{box-shadow:inset 3px 0 0 var(--orange)}.nav-icon{width:27px;height:27px;border-radius:8px;background:rgba(255,255,255,.07);display:grid;place-items:center;font-size:11px;font-weight:800;color:#ffb27d}.main{margin-left:var(--sidebar);min-height:100vh}.topbar{height:72px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:30}.top-left{display:flex;align-items:center;gap:14px}.menu-toggle{display:none;border:0;background:#eef2f7;width:40px;height:40px;border-radius:11px;cursor:pointer}.page-title{font-size:19px;font-weight:800}.page-subtitle{color:var(--muted);font-size:12px;margin-top:2px}.user-chip{display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;border-radius:50%;background:#e7edf6;color:var(--navy);display:grid;place-items:center;font-weight:900}.user-chip small{display:block;color:var(--muted)}.content{padding:26px 28px 50px;max-width:1600px;margin:auto}.grid{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.card-head h3{margin:0;font-size:16px}.card-body{padding:20px}.stat{padding:19px;display:flex;justify-content:space-between;gap:12px;position:relative;overflow:hidden}.stat:after{content:"";position:absolute;width:86px;height:86px;border-radius:50%;background:rgba(249,115,22,.06);right:-22px;bottom:-30px}.stat-label{color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.45px}.stat-value{font-size:26px;font-weight:900;margin:6px 0 4px;letter-spacing:-.7px}.stat-note{font-size:12px;color:var(--muted)}.stat-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#fff3e8;color:var(--orange);font-weight:900}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}.toolbar h2{margin:0;font-size:22px}.toolbar p{margin:4px 0 0;color:var(--muted)}.actions{display:flex;gap:9px;flex-wrap:wrap}.btn{border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.18s}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--orange);color:#fff;box-shadow:0 7px 16px rgba(249,115,22,.2)}.btn-dark{background:var(--navy);color:#fff}.btn-light{background:#eef2f7;color:#334155}.btn-danger{background:#fee2e2;color:#b91c1c}.btn-success{background:#dcfce7;color:#047857}.btn-sm{padding:7px 10px;font-size:12px;border-radius:8px}.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse;min-width:720px}.table th{text-align:left;padding:12px 14px;background:#f8fafc;color:#65748a;font-size:11px;text-transform:uppercase;letter-spacing:.55px;border-bottom:1px solid var(--line)}.table td{padding:13px 14px;border-bottom:1px solid #edf1f6;vertical-align:middle}.table tr:hover td{background:#fbfdff}.table tr:last-child td{border-bottom:0}.muted{color:var(--muted)}.text-right{text-align:right}.text-center{text-align:center}.fw-800{font-weight:800}.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.badge-success{background:#dcfce7;color:#047857}.badge-danger{background:#fee2e2;color:#b91c1c}.badge-warning{background:#fef3c7;color:#a16207}.badge-info{background:#e0f2fe;color:#0369a1}.badge-secondary{background:#e9eef5;color:#475569}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.form-group{min-width:0}.form-group.full{grid-column:1/-1}label{display:block;font-weight:750;font-size:12px;margin-bottom:6px;color:#364152}.input,.select,.textarea{width:100%;border:1px solid #cfd8e5;background:#fff;border-radius:10px;padding:10px 12px;outline:none;min-height:42px}.textarea{min-height:95px;resize:vertical}.input:focus,.select:focus,.textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.11)}.hint{font-size:11px;color:var(--muted);margin-top:5px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.alert{padding:13px 15px;border-radius:11px;margin-bottom:16px;border:1px solid transparent;font-weight:650}.alert-success{background:#ecfdf5;color:#047857;border-color:#a7f3d0}.alert-danger{background:#fff1f2;color:#be123c;border-color:#fecdd3}.alert-warning{background:#fffbeb;color:#a16207;border-color:#fde68a}.alert-info{background:#f0f9ff;color:#0369a1;border-color:#bae6fd}.empty{padding:38px 20px;text-align:center;color:var(--muted)}.empty strong{display:block;color:#334155;font-size:15px;margin-bottom:6px}.low-stock{color:#b91c1c;font-weight:800}.stock-ok{color:#047857;font-weight:800}.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);gap:18px}.metric-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--line)}.metric-row:last-child{border-bottom:0}.progress{height:8px;background:#edf2f7;border-radius:99px;overflow:hidden}.progress span{height:100%;display:block;background:linear-gradient(90deg,var(--orange),var(--orange-2));border-radius:99px}.kpi-positive{color:var(--success)}.kpi-negative{color:var(--danger)}.item-row{display:grid;grid-template-columns:minmax(200px,2fr) 1fr 1fr 42px;gap:10px;align-items:end;margin-bottom:10px}.item-row.recipe{grid-template-columns:minmax(200px,2fr) 1fr 1fr 42px}.remove-row{width:42px;height:42px;border:0;border-radius:10px;background:#fee2e2;color:#b91c1c;font-weight:900;cursor:pointer}.section-label{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;color:#758399;margin:20px 0 10px}.timeline{position:relative;padding-left:20px}.timeline:before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:#e2e8f0}.timeline-item{position:relative;padding:0 0 16px 13px}.timeline-item:before{content:"";position:absolute;left:-19px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px #ffedd5}.timeline-item strong{display:block}.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);padding:0 20px}.tab{padding:12px 13px;text-decoration:none;color:var(--muted);font-weight:750;border-bottom:2px solid transparent}.tab.active{color:var(--orange);border-bottom-color:var(--orange)}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#fff7ed,#eff5fb 42%,#e8eef7)}.login-card{width:min(920px,calc(100% - 28px));display:grid;grid-template-columns:1.05fr .95fr;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 25px 80px rgba(16,35,63,.16);border:1px solid #e4eaf2}.login-art{padding:52px;background:linear-gradient(145deg,var(--navy),#1c4777);color:#fff;position:relative;overflow:hidden}.login-art:after{content:"";position:absolute;width:290px;height:290px;border-radius:50%;background:rgba(249,115,22,.16);right:-120px;bottom:-100px}.login-art h1{font-size:38px;margin:25px 0 10px;letter-spacing:-1px}.login-art p{color:#c9d8ea;line-height:1.7;max-width:420px}.feature-list{margin-top:28px;display:grid;gap:12px}.feature{display:flex;align-items:center;gap:10px;color:#e3edf8}.feature i{width:25px;height:25px;border-radius:8px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-style:normal}.login-form{padding:52px;display:flex;flex-direction:column;justify-content:center}.login-form h2{font-size:26px;margin:0 0 6px}.login-form>p{color:var(--muted);margin:0 0 28px}.login-form .btn{width:100%;padding:13px;margin-top:10px}.bar-list{display:grid;gap:13px}.bar-row{display:grid;grid-template-columns:110px 1fr 80px;gap:10px;align-items:center}.bar-bg{height:10px;background:#edf2f7;border-radius:99px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,var(--navy-2),var(--orange));border-radius:99px}.print-only{display:none}.overlay{display:none}
@media(max-width:1180px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}
@media(max-width:860px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.menu-toggle{display:grid;place-items:center}.overlay.show{display:block;position:fixed;inset:0;background:rgba(2,10,23,.45);z-index:35}.topbar{padding:0 16px}.content{padding:20px 15px 40px}.login-card{grid-template-columns:1fr}.login-art{display:none}.login-form{padding:34px}.user-chip>div:nth-child(2){display:none}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4,.form-grid,.form-grid-3{grid-template-columns:1fr}.form-group.full{grid-column:auto}.item-row,.item-row.recipe{grid-template-columns:1fr 1fr}.item-row>div:first-child,.item-row.recipe>div:first-child{grid-column:1/-1}.remove-row{align-self:end}.stat-value{font-size:23px}.toolbar{align-items:flex-start}.toolbar .actions{width:100%}.toolbar .actions .btn{flex:1}.bar-row{grid-template-columns:85px 1fr 65px}.topbar{height:66px}.page-subtitle{display:none}}
@media print{.sidebar,.topbar,.toolbar .actions,.no-print,.form-actions{display:none!important}.main{margin:0}.content{padding:0}.card{box-shadow:none;border:0}.print-only{display:block}}
.process-step-row{display:grid;grid-template-columns:70px minmax(180px,1.4fr) 120px minmax(220px,1.8fr) 42px;gap:10px;align-items:end;margin-bottom:10px}.step-number{width:40px;height:40px;border-radius:12px;background:#fff3e8;color:var(--orange);font-weight:900;display:grid;place-items:center}.process-card{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}.process-card:last-child{border-bottom:0}.process-state{width:38px;height:38px;border-radius:12px;background:#edf2f7;display:grid;place-items:center;font-weight:900;color:#64748b;flex:0 0 auto}.process-state.completed{background:#dcfce7;color:#047857}.process-state.in_process{background:#e0f2fe;color:#0369a1}.process-state.skipped{background:#f1f5f9;color:#64748b}.process-main{flex:1;min-width:0}.process-main h4{margin:0 0 5px}.process-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}@media(max-width:760px){.process-step-row{grid-template-columns:50px 1fr}.process-step-row>div:nth-child(3),.process-step-row>div:nth-child(4){grid-column:2}.process-step-row .remove-row{grid-column:2;justify-self:end}}
.btn-info{background:#e0f2fe;color:#0369a1}
.hygiene-list{display:grid;gap:12px;max-height:820px;overflow:auto;padding-right:4px}.hygiene-item{display:grid;grid-template-columns:minmax(260px,1.7fr) 130px minmax(160px,1fr) minmax(180px,1.15fr) 150px;gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fbfdff}.hygiene-requirement{align-self:start}.hygiene-requirement strong{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.hygiene-requirement p{margin:7px 0 5px;line-height:1.45}.hygiene-requirement small{color:var(--muted);line-height:1.4}.doc-links{display:flex;gap:6px;flex-wrap:wrap}.alert a{color:inherit;font-weight:900}.card .actions{align-items:center}
@media(max-width:1280px){.hygiene-item{grid-template-columns:minmax(260px,1.5fr) 130px 1fr}.hygiene-item>.form-group:nth-child(4),.hygiene-item>.form-group:nth-child(5){grid-column:auto}}
@media(max-width:760px){.hygiene-item{grid-template-columns:1fr}.hygiene-list{max-height:none}.doc-links{min-width:180px}}

/* KilangOne V1.2.0 — transaksi pembelian berbilang bahan & lot expiry */
.purchase-columns{display:grid;grid-template-columns:minmax(220px,2fr) .75fr .85fr 1fr 1fr 1fr 42px;gap:10px;padding:0 0 7px;color:#758399;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.45px}
.purchase-item-row.item-row{grid-template-columns:minmax(220px,2fr) .75fr .85fr 1fr 1fr 1fr 42px;align-items:end;padding:12px;border:1px solid #e5eaf1;border-radius:12px;background:#fbfdff;margin-bottom:10px}
.purchase-item-row.item-row:hover{border-color:#f5c39f;background:#fffdfb}
.mobile-label{display:none}
.purchase-item-list{display:grid;gap:8px;min-width:250px}.purchase-line{padding:7px 9px;border-radius:8px;background:#f8fafc;border:1px solid #edf1f6}.purchase-history{min-width:1100px}
.lot-summary{display:grid;gap:5px}.lot-summary .muted{font-size:11px}.expiry-soon{color:#a16207;font-weight:800}.expiry-expired{color:#b91c1c;font-weight:900}
@media(max-width:1100px){.purchase-columns{display:none}.purchase-item-row.item-row{grid-template-columns:repeat(3,minmax(0,1fr))}.purchase-item-row.item-row>div:first-child{grid-column:1/-1}.purchase-item-row.item-row .remove-row{align-self:end}.mobile-label{display:block}}
@media(max-width:640px){.purchase-item-row.item-row{grid-template-columns:1fr 1fr}.purchase-item-row.item-row>div:first-child{grid-column:1/-1}.purchase-item-row.item-row>div:nth-child(4){grid-column:1/-1}}

/* KilangOne V1.3.0 — carian bahan, kamera resit & approval workflow */
.material-picker{display:grid;gap:6px;position:relative}.material-search{min-height:38px;padding:8px 10px;background:#fff}.material-picker select[size]:not([size="1"]){position:absolute;top:44px;left:0;right:0;z-index:25;min-height:160px;box-shadow:0 16px 35px rgba(16,35,63,.18);border-color:var(--orange)}.material-result-hint{font-size:10px;color:var(--muted);min-height:13px}.capture-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.capture-button{position:relative;display:flex;align-items:center;justify-content:center;min-height:43px;border-radius:10px;font-size:12px;font-weight:850;cursor:pointer;margin:0;border:1px solid #cfd8e5;overflow:hidden}.capture-button.camera{background:#fff3e8;color:#c2410c;border-color:#fed7aa}.capture-button.file{background:#eef4fb;color:#173b67;border-color:#cfddec}.capture-button input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.capture-button:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(16,35,63,.08)}.upload-file-name{font-size:11px;color:var(--muted);margin-top:7px;padding:7px 9px;background:#f8fafc;border-radius:8px;border:1px dashed #d6deea}.has-file .upload-file-name{background:#ecfdf5;color:#047857;border-color:#a7f3d0;font-weight:800}.purchase-form-actions{flex-wrap:wrap}.status-stack{display:flex;gap:6px;flex-wrap:wrap}.workflow-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;min-width:190px}.workflow-actions form{margin:0}.reject-box{position:relative}.reject-box>summary{list-style:none}.reject-box>summary::-webkit-details-marker{display:none}.reject-box[open] form{position:absolute;z-index:20;right:0;top:42px;width:260px;padding:12px;background:#fff;border:1px solid #fecdd3;border-radius:12px;box-shadow:0 18px 45px rgba(16,35,63,.18)}.reject-box textarea{min-height:76px;margin-bottom:8px}.rejection-note{margin-top:7px;padding:7px 8px;border-radius:8px;background:#fff1f2;color:#be123c;font-size:11px;font-weight:750;max-width:240px}.purchase-history td:last-child{vertical-align:top}.badge.badge-success{white-space:nowrap}
@media(max-width:640px){.capture-actions{grid-template-columns:1fr}.purchase-form-actions .btn{flex:1;min-width:140px}.workflow-actions{min-width:150px}.reject-box[open] form{position:fixed;left:15px;right:15px;top:auto;bottom:15px;width:auto;z-index:60}.material-picker select[size]:not([size="1"]){position:relative;top:auto;min-height:155px}}