:root{
  --nav:#073b66;--nav2:#052b4a;--nav3:#0e5aa2;--blue:#1f7af7;--blue2:#eaf3ff;
  --green:#12a66a;--green2:#eafff6;--yellow:#ffc531;--yellow2:#fff7df;
  --red:#ef4444;--red2:#fff0f0;--purple:#8b5cf6;--purple2:#f4efff;
  --cyan:#39d8ce;--ink:#0f172a;--text:#24364b;--muted:#718096;--line:#e6edf5;
  --bg:#f4f8fc;--card:#ffffff;--shadow:0 18px 46px rgba(15,23,42,.10);--radius:22px;
}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px}a{text-decoration:none;color:inherit}.muted{color:var(--muted)}.hide{display:none!important}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;font-size:14px;color:var(--ink);outline:none;transition:.18s}input:focus,select:focus,textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(31,122,247,.10)}textarea{min-height:92px;resize:vertical}label{font-weight:800;font-size:12px;margin:12px 0 7px;display:block;color:#344054}.req{color:#ef4444}.field-hint{font-size:12px;color:var(--muted);margin-top:5px}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.form-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.btn{border:0;border-radius:14px;padding:11px 16px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:.18s;white-space:nowrap}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.10)}.btn-primary{background:linear-gradient(135deg,#1f7af7,#145adf);color:#fff}.btn-green{background:linear-gradient(135deg,#12a66a,#079455);color:#fff}.btn-yellow{background:var(--yellow);color:#573b00}.btn-light{background:#f3f7fb;color:#31506f;border:1px solid var(--line)}.btn-red{background:var(--red2);color:#b42318;border:1px solid #ffd2d2}.btn-icon{width:38px;height:38px;padding:0;border-radius:12px}.btn-sm{padding:8px 11px;border-radius:12px;font-size:12px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.toolbar h1,.toolbar h2{margin:0}.toolbar p{margin:3px 0 0}.pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;color:#64748b}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,#dffdf8 0,#f8fbff 32%,#fff7d9 100%);padding:20px}.login-card{width:min(448px,94vw);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);border-radius:30px;box-shadow:var(--shadow);padding:32px}.brand{text-align:center}.brand img{max-width:160px;max-height:130px;object-fit:contain}.brand h1{font-size:24px;margin:14px 0 5px;color:var(--ink)}.login-card .btn{width:100%;margin-top:18px}
.app{min-height:100vh;display:grid;grid-template-columns:74px 1fr}.rail{position:fixed;left:0;top:0;width:74px;height:100vh;background:linear-gradient(180deg,var(--nav),var(--nav2));z-index:50;display:flex;flex-direction:column;align-items:center;padding:16px 10px;box-shadow:8px 0 24px rgba(5,43,74,.18)}.hamburger{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:24px;display:grid;place-items:center;cursor:pointer}.rail-nav{display:flex;flex-direction:column;gap:9px;margin-top:20px}.rail-nav a{width:44px;height:44px;border-radius:14px;color:#dbeafe;display:grid;place-items:center;font-size:19px;opacity:.9}.rail-nav a:hover,.rail-nav a.active{background:rgba(255,255,255,.16);color:#fff}.sidebar{position:fixed;left:74px;top:0;width:260px;height:100vh;background:linear-gradient(180deg,#083d68,#052b4a);z-index:40;padding:22px 16px;box-shadow:14px 0 42px rgba(5,43,74,.24);transform:translateX(-280px);transition:.22s ease;overflow:auto}.sidebar.open,.app.sidebar-open .sidebar{transform:translateX(0)}.sidebar-brand{text-align:center;padding:4px 8px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px}.sidebar-brand img{width:118px;height:92px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.18))}.sidebar-brand h2{font-size:17px;margin:6px 0 2px;color:#fff}.sidebar-brand small{color:#b8d7ee}.nav-title{font-size:11px;letter-spacing:.08em;color:#9cc9e7;margin:18px 10px 7px;text-transform:uppercase}.side-link{display:flex;align-items:center;gap:12px;color:#e7f4ff;padding:12px 12px;border-radius:14px;margin:4px 0;font-weight:800}.side-link:hover,.side-link.active{background:linear-gradient(90deg,rgba(31,122,247,.95),rgba(31,122,247,.35));box-shadow:0 10px 22px rgba(0,0,0,.12)}.side-link .ico{width:24px;text-align:center}.role-card{margin-top:24px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:18px;padding:14px;color:#fff}.role-card small{color:#b8d7ee}.main{grid-column:2;min-width:0}.topbar{height:70px;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 24px;position:sticky;top:0;z-index:20}.top-brand{display:flex;align-items:center;gap:10px}.top-brand img{width:44px;height:44px;object-fit:contain}.top-brand strong{font-size:18px;color:var(--ink)}.top-actions{display:flex;align-items:center;gap:12px}.avatar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px 12px;box-shadow:0 8px 20px rgba(15,23,42,.05)}.avatar .circle{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#20c997,#1f7af7);display:grid;place-items:center;color:#fff;font-weight:900}.content{padding:24px}.card{background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 12px 35px rgba(15,23,42,.06);margin-bottom:18px}.panel-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:16px}.panel-title h2,.panel-title h3{margin:0;color:var(--ink)}.grid{display:grid;gap:18px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-layout{display:grid;grid-template-columns:1fr 320px;gap:18px}.stat{position:relative;overflow:hidden;padding:20px;border-radius:22px;border:1px solid var(--line);background:#fff;box-shadow:0 12px 35px rgba(15,23,42,.05)}.stat:after{content:"";position:absolute;right:-38px;top:-42px;width:130px;height:130px;border-radius:50%;background:var(--blue2)}.stat.green:after{background:var(--green2)}.stat.yellow:after{background:var(--yellow2)}.stat.purple:after{background:var(--purple2)}.stat .stat-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:22px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 18px rgba(15,23,42,.05)}.stat b{display:block;font-size:28px;line-height:1;margin:12px 0 5px;color:var(--ink)}.stat small{font-weight:800;color:#099250}.table-wrap{overflow:auto}.table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}.table th{background:#f8fbff;text-align:left;color:#667085;font-size:12px;text-transform:uppercase;letter-spacing:.02em}.table th,.table td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:middle}.table tr:hover td{background:#fbfdff}.table th:first-child{border-radius:14px 0 0 14px}.table th:last-child{border-radius:0 14px 14px 0}.badge{border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900;display:inline-flex;align-items:center;gap:6px}.DRAFT{background:#f2f4f7;color:#344054}.SUBMITTED{background:#fff3cd;color:#9a6700}.APPROVED{background:#dcfce7;color:#166534}.PARTIAL{background:#e0f2fe;color:#075985}.FULFILLED{background:#ccfbf1;color:#115e59}.REJECTED,.CANCELLED{background:#fee4e2;color:#b42318}.actions{display:flex;gap:7px;flex-wrap:wrap}.alert{padding:13px 16px;border-radius:16px;margin-bottom:14px;font-weight:800;border:1px solid}.alert.success{background:#ecfdf3;color:#067647;border-color:#abefc6}.alert.error{background:#fef3f2;color:#b42318;border-color:#fecdca}.alert.info{background:#eff8ff;color:#175cd3;border-color:#b2ddff}.quick-list{display:grid;gap:10px}.quick-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px}.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px}.dot.gray{background:#98a2b3}.dot.yellow{background:#fdb022}.dot.green{background:#12b76a}.dot.red{background:#f04438}.upload-box{border:1px dashed #b9c8d8;border-radius:18px;padding:22px;text-align:center;background:#fbfdff;color:#64748b}.item-row{display:grid;grid-template-columns:2fr .6fr .6fr 1fr 42px;gap:9px;align-items:end;margin-bottom:9px}.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.46);z-index:80;display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(5px)}.modal-backdrop.show{display:flex}.modal{width:min(920px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:24px;box-shadow:0 28px 90px rgba(15,23,42,.28);border:1px solid rgba(255,255,255,.7);animation:pop .18s ease}.modal.sm{width:min(560px,95vw)}.modal.lg{width:min(1100px,96vw)}@keyframes pop{from{transform:translateY(16px) scale(.98);opacity:0}to{transform:none;opacity:1}}.modal-head{position:sticky;top:0;background:#fff;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 22px 14px;border-bottom:1px solid var(--line);border-radius:24px 24px 0 0}.modal-head h2{margin:0;color:var(--ink)}.modal-body{padding:18px 22px 22px}.close-modal{background:#f3f7fb;border:1px solid var(--line);border-radius:14px;width:40px;height:40px;display:grid;place-items:center;font-size:20px;cursor:pointer;color:#64748b}.drawer-panel{position:fixed;top:82px;left:96px;width:min(470px,calc(100vw - 120px));max-height:calc(100vh - 112px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;z-index:39;box-shadow:var(--shadow);display:none}.drawer-panel.show{display:block}.drawer-panel .menu-search{position:relative;margin:10px 0 14px}.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.menu-card{border:1px solid var(--line);border-radius:15px;padding:13px;background:#f8fbff;font-weight:800;display:flex;gap:10px;align-items:center}.print-only{display:none}.footer{text-align:center;color:#98a2b3;font-size:12px;padding:18px}
@media(max-width:1180px){.grid-5,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-layout{grid-template-columns:1fr}.sidebar{left:74px}.drawer-panel{left:90px}}
@media(max-width:760px){.app{grid-template-columns:1fr}.rail{width:64px}.main{grid-column:1;margin-left:64px}.topbar{height:auto;padding:12px 14px;align-items:flex-start;gap:10px;flex-direction:column}.top-actions{width:100%;justify-content:space-between}.content{padding:14px}.grid-5,.grid-4,.grid-3,.grid-2,.form-row,.form-row-3,.item-row{grid-template-columns:1fr}.sidebar{left:64px;width:250px}.drawer-panel{left:76px;width:calc(100vw - 88px);top:74px}.modal-backdrop{padding:8px}.modal{border-radius:18px}.modal-head{border-radius:18px 18px 0 0}.menu-grid{grid-template-columns:1fr}}
@media print{.rail,.sidebar,.topbar,.no-print,.actions,.modal-backdrop,.drawer-panel{display:none!important}.app{display:block}.main{margin:0}.content{padding:0}.card{border:0;box-shadow:none}.print-only{display:block}body{background:#fff}.table th,.table td{font-size:12px;padding:6px}}

/* Searchable dropdown / typed select */
.combo{position:relative;width:100%}.combo-input{padding-right:38px}.combo:after{content:'⌄';position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#667085;font-weight:900;pointer-events:none}.combo.open:after{content:'⌃'}.combo-list{position:absolute;left:0;right:0;top:calc(100% + 6px);max-height:245px;overflow:auto;background:#fff;border:1px solid #d7e2ee;border-radius:14px;box-shadow:0 18px 42px rgba(15,23,42,.16);z-index:120;padding:6px;display:none}.combo.open .combo-list{display:block}.combo-option{width:100%;border:0;background:#fff;text-align:left;padding:11px 12px;border-radius:10px;cursor:pointer;color:#102a43;font-weight:750;line-height:1.3}.combo-option:hover,.combo-option:focus{background:#eef6ff;color:#175cd3}.combo-empty{padding:12px;color:#98a2b3;text-align:center;font-weight:800}.combo.invalid .combo-input{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.10)}
.section-title{margin:20px 0 10px;color:var(--ink)}
.request-items-wrap{overflow:visible;border:1px solid var(--line);border-radius:18px;background:#fff;margin-bottom:12px}.request-items-table{width:100%;border-collapse:separate;border-spacing:0}.request-items-table th{background:#f8fbff;color:#475467;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:12px;border-bottom:1px solid var(--line)}.request-items-table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}.request-items-table tr:last-child td{border-bottom:0}.request-items-table th:first-child{border-radius:18px 0 0 0}.request-items-table th:last-child{border-radius:0 18px 0 0}.request-items-table .item-row{display:table-row}.request-items-table td:first-child,.request-items-table th:first-child{width:44%;padding-left:12px}.request-items-table td:nth-child(2),.request-items-table th:nth-child(2){width:14%}.request-items-table td:nth-child(3),.request-items-table th:nth-child(3){width:14%}.request-items-table td:nth-child(4),.request-items-table th:nth-child(4){width:24%}.request-items-table td.row-action,.request-items-table th:last-child{width:54px;text-align:center;padding-right:12px}.request-items-table input{border-radius:12px}.request-items-table .combo-list{min-width:320px}
@media(max-width:760px){.request-items-wrap{border:0;background:transparent}.request-items-table,.request-items-table thead,.request-items-table tbody,.request-items-table tr,.request-items-table th,.request-items-table td{display:block;width:100%!important}.request-items-table thead{display:none}.request-items-table .item-row{display:block;border:1px solid var(--line);border-radius:18px;background:#fff;margin-bottom:12px;padding:10px}.request-items-table td{border-bottom:0;padding:7px 0!important}.request-items-table td:before{content:attr(data-label);display:block;font-size:11px;font-weight:900;text-transform:uppercase;color:#667085;margin-bottom:5px}.request-items-table .combo-list{min-width:100%}.request-items-table td.row-action{text-align:right!important}}
.toolbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.io-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.notif-link{text-decoration:none;color:inherit}.alert.warning{background:#fff7e6;border:1px solid #ffd591;color:#8a5200}.btn-sm{white-space:nowrap}@media(max-width:760px){.toolbar{align-items:flex-start}.toolbar-actions{justify-content:flex-start;width:100%}.io-actions{width:100%}.io-actions .btn{flex:1;text-align:center}}