:root{--nav:#111c33;--nav2:#182944;--primary:#2468f2;--blue:#eff5ff;--ink:#17253c;--muted:#6d7b91;--line:#e1e7f1;--bg:#f4f7fc;--good:#e5f8f0;--shadow:0 2px 18px rgba(28,48,85,.045)}*{box-sizing:border-box}body{margin:0;font:14px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink)}a{color:#2261d8;text-decoration:none}a:hover{text-decoration:underline}.sidebar{position:fixed;top:0;bottom:0;left:0;width:242px;background:var(--nav);padding:25px 15px;overflow:auto;color:#d6e0f5}.brand{display:flex;align-items:center;gap:13px;margin:0 6px 35px;font-size:17px;font-weight:700;letter-spacing:.3px}.brand-mark,.login-logo{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:linear-gradient(140deg,#4c85fb,#123bba);font-size:24px;font-weight:900;color:white}.brand small{display:block;font-size:11px;font-weight:400;color:#8da1bf}.side-title{font-size:10px;letter-spacing:1.8px;color:#7489aa;margin:26px 14px 9px;font-weight:700}.sidebar>a{display:block;padding:12px 14px;color:#bdcae0;border-radius:9px;margin:3px 0;font-weight:500}.sidebar>a:hover,.sidebar>a.selected{background:#273b5e;color:#fff;text-decoration:none}.shell{margin-left:242px;min-height:100vh}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);padding:0 35px;display:flex;justify-content:space-between;align-items:center;font-weight:650}.account{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:12px}.linkbtn{border:0;background:transparent;color:#3167cb;font-weight:700;cursor:pointer}.content{padding:35px;max-width:1630px;margin:0 auto;min-height:calc(100vh - 122px)}.heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.heading h1{font-size:29px;letter-spacing:-.8px;margin:5px 0}.heading p{margin:0;color:var(--muted)}.eyebrow{font-size:10px;font-weight:800;color:#4779df;letter-spacing:2px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin:20px 0 25px}.stat{border:1px solid var(--line);border-radius:13px;background:#fff;padding:22px;box-shadow:var(--shadow)}.stat span{display:block;color:var(--muted);font-size:12px;font-weight:600}.stat strong{display:block;font-size:27px;margin:9px 0;color:#192c4e;white-space:nowrap}.stat small{color:#8793a7}.panel{border:1px solid var(--line);background:white;border-radius:13px;box-shadow:var(--shadow);margin-bottom:22px;padding:20px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.panel-head h2{font-size:16px;margin:0}.muted{color:var(--muted)}.table-wrap{max-width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{background:#f7f9fd;color:#66758c;font-size:11px;text-transform:uppercase;letter-spacing:.5px}th,td{padding:13px 12px;border-bottom:1px solid #edf0f6}tbody tr:hover{background:#fbfcff}.pill{display:inline-block;padding:4px 10px;border-radius:20px;background:#f0f3f9;color:#526277;font-weight:800;font-size:10px;letter-spacing:.4px}.pill.submitted{background:#fff1d6;color:#9b6600}.pill.verified{background:#e7f1ff;color:#205bbb}.pill.approved{background:#ddf8e9;color:#117647}.pill.rejected{background:#ffebeb;color:#ae3535}.pill.draft{background:#e9edf4;color:#64738c}.two-col{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:22px;align-items:start}.two-col .panel{min-width:0}.stack{min-width:0}.fields{display:grid;gap:13px}.fields label,.filters label,.login-card label{display:grid;gap:6px;font-weight:600;color:#53647b;font-size:12px}.fields input:not([type=checkbox]),.fields select,.fields textarea,.filters input,.filters select,.login-card input{border:1px solid #dce4f0;border-radius:7px;padding:11px 12px;width:100%;font:inherit;color:var(--ink);background:white}.fields input:focus,.fields select:focus,.fields textarea:focus{outline:2px solid #afcafa;border-color:#5a92ff}.fields input:disabled,.fields select:disabled,.fields textarea:disabled{background:#f4f6fa;color:#758094}.fields .check{display:flex;align-items:center;gap:10px}.button,button:not(.linkbtn){border:1px solid #d7e0ed;border-radius:8px;padding:10px 14px;cursor:pointer;font:inherit;font-weight:700;color:#314667;background:#fff;display:inline-flex;align-items:center;justify-content:center;text-align:center}.button:hover,button:hover:not(.linkbtn){text-decoration:none;filter:brightness(.97)}.button.primary,button.primary{background:var(--primary);border-color:var(--primary);color:white}.filters{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:10px}.filters label{min-width:140px}.filters input,.filters select{padding:10px}.alert{padding:14px 18px;border-radius:9px;background:#e9f7ef;color:#19704a;margin-bottom:20px}.alert.error{background:#fff1ef;color:#a93e32}.ticket{padding:13px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}.ticket small,.history-row small{display:block;color:var(--muted);font-size:11px}.approved-total{margin-top:20px;padding:18px;background:var(--good);border-radius:10px}.approved-total span,.approved-total small{display:block;color:#296b4a}.approved-total strong{display:block;font-size:26px}.history-row{padding:12px 0;border-bottom:1px solid var(--line)}details{max-width:470px}summary{cursor:pointer;color:#3373d9}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f4f6fa;padding:12px;font-size:11px;border-radius:7px}.actions{display:flex;gap:8px;flex-wrap:wrap}.finalize-form{border-top:1px solid var(--line);margin-top:18px;padding-top:16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}.finalize-form p{flex:1;min-width:220px;color:var(--muted)}.total-row{font-weight:800;background:#f5f8ff}.footnote{font-size:11px;color:var(--muted)}.footer{padding:15px 35px;color:#9ba9bc;font-size:11px}.auth-layout{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:25px;background:radial-gradient(circle at 80% 20%,#e5eeff,transparent 40%),#f2f6fd}.login-card{background:white;border-radius:18px;box-shadow:0 20px 65px #253d6621;max-width:425px;width:100%;padding:37px}.login-logo{width:53px;height:53px}.login-card h1{font-size:25px;margin:22px 0 4px}.login-card p{color:var(--muted);margin:0 0 26px}.login-card form{display:grid;gap:19px}.login-card button.wide{width:100%;padding:13px}.login-card label{gap:8px}@media(max-width:1080px){.sidebar{width:196px}.shell{margin-left:196px}.stats{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}}@media(max-width:700px){.sidebar{position:static;width:100%;padding:12px;display:flex;gap:6px;flex-wrap:wrap}.brand,.side-title{display:none}.sidebar>a{padding:8px;margin:0;font-size:12px}.shell{margin:0}.topbar{padding:15px;height:auto}.content{padding:18px}.stats{grid-template-columns:1fr 1fr;gap:9px}.stat{padding:12px}.stat strong{font-size:20px}.heading h1{font-size:24px}.heading{align-items:start;flex-wrap:wrap}.account{gap:7px;flex-wrap:wrap}}

/* Version 1.1 — modern, top-navigation interface */
:root{--primary:#375bf5;--ink:#17243b;--muted:#68778e;--line:#e7ecf3;--bg:#f5f7fb;--shadow:0 7px 30px rgba(28,45,81,.035)}
body{font-size:14px;background:var(--bg)}
.app-shell{min-height:100vh}.shell{margin-left:0}
.topbar{height:78px;display:flex;position:sticky;top:0;z-index:100;background:rgba(255,255,255,.98);box-shadow:0 1px 14px rgba(30,50,82,.035);padding:0 clamp(18px,3vw,52px);gap:24px}
.brand{display:flex;align-items:center;gap:11px;margin:0;flex-shrink:0;color:#1e3150;font-size:16px;letter-spacing:.15px;line-height:1.15}.brand:hover{text-decoration:none}.brand-mark{width:38px;height:38px;border-radius:11px;font-size:21px;box-shadow:0 5px 12px #365cf02e}.brand-copy small{display:block;letter-spacing:1.5px;font-size:9px;font-weight:750;color:#94a0b2;margin-top:5px}
.top-nav{display:flex;align-items:center;gap:3px;flex:1;margin-left:20px;height:100%;min-width:0}.nav-link,.nav-drop-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 12px;white-space:nowrap;border-radius:10px;color:#66758b;background:transparent;font-size:13px;font-weight:650;text-decoration:none;border:0;cursor:pointer;font-family:inherit}.nav-link:hover,.nav-drop-trigger:hover,.nav-link.selected,.nav-drop-trigger.selected{background:#eff3ff;color:#365bf1;text-decoration:none}.ui-icon{flex-shrink:0}.nav-dropdown{position:relative}.nav-drop-trigger .ui-icon:last-child{width:13px;height:13px}.dropdown-panel{position:absolute;top:calc(100% + 4px);left:0;min-width:205px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 16px 45px #1e355028;padding:8px;display:none;z-index:200}.dropdown-panel .nav-link{display:flex;justify-content:flex-start;width:100%;padding:12px}.nav-dropdown:hover .dropdown-panel,.nav-dropdown:focus-within .dropdown-panel{display:block}
.account{flex-shrink:0;gap:10px}.account-avatar{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#e9efff;color:#3c60e8;font-size:13px;font-weight:850}.account-details{display:grid;line-height:1.25;max-width:145px}.account-details strong{color:#28364e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-details small{color:#9aa6b5;margin-top:3px}.logout-btn{border:0!important;background:transparent!important;color:#77849a!important;padding:8px!important}.logout-btn:hover{color:#e05353!important}.nav-toggle,.mobile-menu-toggle{display:none}
.content{max-width:1680px;padding:35px clamp(18px,3vw,52px);min-height:calc(100vh - 130px)}.heading{margin-bottom:24px}.heading h1{font-size:30px;font-weight:800}.heading p{font-size:13px}.eyebrow{font-size:10px;letter-spacing:1.8px}
.panel,.stat{border:1px solid #e9eef5;border-radius:15px;box-shadow:var(--shadow)}.panel{padding:23px}.panel-head h2{font-size:16px;font-weight:750}.stats{gap:16px}.stat{padding:22px 22px 19px;position:relative;min-height:144px;overflow:hidden}.stat strong{font-size:28px;letter-spacing:-.5px}.stat-icon{display:grid!important;place-items:center;position:absolute;top:17px;right:18px;width:37px;height:37px;border-radius:11px;background:#eef2ff;color:#4465ed!important}.stat-pending .stat-icon{background:#fff5df;color:#d59a27!important}.stat-tonnes .stat-icon{background:#e6f7f2;color:#28a486!important}.stat-salary .stat-icon{background:#f2eaff;color:#9063df!important}.stat>span:not(.stat-icon){padding-right:38px}
th{background:#f8fafd;font-weight:750}td{color:#35465f}tbody tr:last-child td{border-bottom:0}.button,button:not(.linkbtn):not(.nav-drop-trigger):not(.logout-btn){border-radius:9px}.button.primary,button.primary{box-shadow:0 4px 11px #375bf526;gap:7px}.fields input:not([type=checkbox]),.fields select,.fields textarea,.filters input,.filters select,.login-card input{border-radius:9px;background:#fff}.footer{padding:20px clamp(18px,3vw,52px);text-align:center}
@media(max-width:1280px){.topbar{gap:12px}.top-nav{margin-left:3px}.top-nav>.nav-link,.nav-drop-trigger{padding:9px 8px;font-size:12px}.account-details{display:none}}
@media(max-width:990px){.topbar{height:68px;flex-wrap:wrap;justify-content:space-between}.mobile-menu-toggle{display:inline-flex;align-items:center;gap:7px;margin-left:auto;color:#53647b;font-weight:700;cursor:pointer;padding:8px 12px;border:1px solid #e1e7f0;border-radius:9px}.top-nav{display:none;order:5;flex-basis:100%;height:auto;flex-direction:column;align-items:stretch;padding:12px 0 16px;background:white;margin:0;border-top:1px solid #eef1f6}.nav-toggle:checked~.top-nav{display:flex}.topbar:has(.nav-toggle:checked){height:auto}.top-nav .nav-link,.nav-drop-trigger{justify-content:flex-start;padding:12px}.nav-dropdown:hover .dropdown-panel,.nav-dropdown:focus-within .dropdown-panel{position:static;box-shadow:none;border:0;padding:4px 0 4px 24px}.account{margin-left:0}.dropdown-panel{position:static;display:block;box-shadow:none;border:0;padding:0 0 0 23px}.topbar .account-details{display:none}}
@media(max-width:700px){.topbar{padding:0 15px;gap:8px}.brand{font-size:14px}.brand-mark{width:35px;height:35px}.mobile-menu-toggle{font-size:12px;padding:7px}.account-avatar{display:none}.content{padding:19px 15px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat{min-height:128px;padding:15px}.stat-icon{top:10px;right:10px;width:27px;height:27px}.stat strong{font-size:21px;white-space:normal}.stat>span:not(.stat-icon){font-size:11px}.two-col{grid-template-columns:1fr}.panel{padding:15px}}

/* v1.2: actual horizontal top navigation in its own row. No sidebar or hamburger. */
.sidebar,.mobile-menu-toggle,.nav-toggle{display:none!important}
.app-shell{display:block!important;margin:0!important;padding:0!important}
.top-navigation-wrap{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #e2e8f2;box-shadow:0 3px 14px rgba(30,51,82,.035)}
.top-navigation-wrap .topbar{position:static!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;height:66px!important;min-height:66px!important;flex-wrap:nowrap!important;padding:0 clamp(16px,3vw,44px)!important;background:white!important;border:0!important;box-shadow:none!important}
.top-navigation-wrap .brand{margin:0!important;color:#1d2b43!important}
.top-navigation-wrap .account{display:flex!important;margin-left:auto!important}
.top-navigation-wrap .top-nav{display:flex!important;position:relative!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:nowrap!important;gap:5px!important;order:0!important;width:100%!important;max-width:none!important;min-width:0!important;flex-basis:auto!important;height:51px!important;min-height:51px!important;margin:0!important;padding:0 clamp(16px,3vw,44px)!important;background:#fff!important;border-top:1px solid #edf0f6!important;overflow:visible!important}
.top-navigation-wrap .top-nav > .nav-link,.top-navigation-wrap .nav-drop-trigger{display:inline-flex!important;align-items:center!important;gap:8px!important;white-space:nowrap!important;height:38px!important;padding:0 15px!important;border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;color:#586981!important;font-size:13px!important;font-weight:650!important;line-height:1!important;text-decoration:none!important;cursor:pointer!important}
.top-navigation-wrap .top-nav > .nav-link:hover,.top-navigation-wrap .top-nav > .nav-link.selected,.top-navigation-wrap .nav-drop-trigger:hover,.top-navigation-wrap .nav-drop-trigger.selected{background:#edf2ff!important;color:#315be7!important}
.top-navigation-wrap .nav-dropdown{position:relative!important;flex:none!important}
.top-navigation-wrap .dropdown-panel{position:absolute!important;left:0!important;top:calc(100% + 4px)!important;min-width:210px!important;padding:7px!important;display:none!important;background:#fff!important;border:1px solid #e3e9f3!important;border-radius:11px!important;box-shadow:0 14px 35px #26375026!important;z-index:1010!important}
.top-navigation-wrap .nav-dropdown:hover .dropdown-panel,.top-navigation-wrap .nav-dropdown:focus-within .dropdown-panel{display:block!important}
.top-navigation-wrap .dropdown-panel .nav-link{display:flex!important;justify-content:flex-start!important;align-items:center!important;gap:10px!important;padding:11px 13px!important;border-radius:7px!important;color:#53657e!important}
.top-navigation-wrap .dropdown-panel .nav-link:hover,.top-navigation-wrap .dropdown-panel .nav-link.selected{background:#eff3ff!important;color:#315be7!important}
.content{margin:0 auto!important;max-width:1580px!important;min-height:calc(100vh - 170px)!important}
@media(max-width:700px){.top-navigation-wrap .topbar{height:58px!important;min-height:58px!important}.top-navigation-wrap .top-nav{height:auto!important;min-height:52px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:5px 12px!important;scrollbar-width:thin}.top-navigation-wrap .top-nav > .nav-link,.top-navigation-wrap .nav-drop-trigger{padding:0 11px!important;font-size:12px!important}.top-navigation-wrap .dropdown-panel{position:fixed!important;top:110px!important;left:12px!important}.top-navigation-wrap .account-avatar{display:grid!important}}