:root{
--navy:#082b3b;
--navy2:#0d4d66;
--cyan:#2ca8d2;
--bg:#eef5f8;
--panel:#ffffff;
--line:#d7e4ea;
--text:#102d3b;
--muted:#6d7f88;
--green:#17a96b;
--yellow:#f2b705;
--red:#ea4c4c;
--orange:#ec8a1a;
--grey:#8d9aa2;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{
font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;
color:var(--text);
background:
radial-gradient(circle at 15% 8%,rgba(44,168,210,.11),transparent 28%),
linear-gradient(180deg,#f8fbfc 0%,#eaf2f6 100%);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

.main-header{
height:132px;
display:grid;
grid-template-columns:170px 1fr 250px;
align-items:center;
padding:12px 24px;
background:rgba(255,255,255,.97);
border-bottom:1px solid rgba(10,58,77,.12);
box-shadow:0 10px 28px rgba(9,44,60,.09);
position:relative;
z-index:10;
}
.header-left img{width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 9px 14px rgba(44,168,210,.18))}
.header-center{display:flex;flex-direction:column;align-items:center;justify-content:center}
.header-logo{width:min(430px,34vw);height:58px;object-fit:contain}
.header-center h1{margin:4px 0 0;font-size:28px;letter-spacing:4px;font-weight:900;color:#082b3b}
.legend{display:flex;gap:24px;margin-top:8px;font-size:13px;font-weight:700;color:#3f5965}
.legend span{display:flex;align-items:center;gap:7px}
.dot,.status-button{display:inline-block;width:13px;height:13px;border-radius:50%;border:0}
.ready{background:var(--green)}
.packing{background:var(--yellow)}
.dispatched{background:var(--red)}
.hold{background:var(--orange)}
.cancelled{background:var(--grey)}

.header-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.header-right strong{font-size:14px;color:#435c67}
.header-right span{font-size:31px;font-weight:900;line-height:1.05;color:#082b3b}
.header-right small{margin-top:6px;color:#6f8088}
.header-right a{color:#1a7fa5;text-decoration:none;font-weight:700}

.dashboard-shell{
height:calc(100vh - 168px);
display:grid;
grid-template-columns:minmax(0,82fr) minmax(340px,18fr);
}
.board-area{height:100%;padding:16px 15px 14px;overflow:hidden}
.side-panel{
height:100%;
overflow:hidden;
padding:14px;
background:rgba(255,255,255,.97);
border-left:1px solid rgba(10,58,77,.12);
box-shadow:-10px 0 26px rgba(9,44,60,.07);
}
.board-toolbar{height:46px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.date-buttons{display:flex;gap:7px}
.board-toolbar button,.side-tabs button,.form-actions button{
border:1px solid #c9d9e0;
background:#fff;
border-radius:10px;
padding:10px 14px;
font-weight:800;
color:#173747;
}
.board-toolbar button.active,.primary,.side-tabs .active{
background:linear-gradient(135deg,var(--navy),var(--navy2))!important;
color:#fff!important;
border-color:transparent!important;
box-shadow:0 6px 14px rgba(8,43,59,.18);
}
.board-date{font-size:22px;font-weight:900;color:#082b3b}

.dispatch-grid{height:calc(100% - 58px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dispatch-column{
height:100%;
min-height:0;
background:rgba(255,255,255,.98);
border:1px solid rgba(17,75,97,.15);
border-radius:17px;
overflow:hidden;
box-shadow:0 12px 28px rgba(9,44,60,.07);
}
.dispatch-column>header{
height:60px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
padding:0 18px;
background:linear-gradient(135deg,#082b3b,#0d526d);
color:#fff;
font-size:22px;
font-weight:900;
letter-spacing:1.2px;
}
.dispatch-column>header .count{
position:absolute;
right:14px;
min-width:31px;
height:31px;
display:grid;
place-items:center;
border-radius:50%;
background:rgba(255,255,255,.16);
font-size:15px;
}
.rows{height:calc(100% - 60px);overflow:auto;scrollbar-width:thin}
.dispatch-row{
min-height:92px;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:14px 13px;
border-bottom:1px solid var(--line);
border-left:6px solid transparent;
background:linear-gradient(90deg,#fff,#f9fcfd);
transition:.18s ease;
}
.dispatch-row:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(9,44,60,.07)}
.status-ready{border-left-color:var(--green)}
.status-packing{border-left-color:var(--yellow)}
.status-dispatched{border-left-color:var(--red)}
.status-hold{border-left-color:var(--orange)}
.status-cancelled{border-left-color:var(--grey)}
.row-content{min-width:0;display:flex;flex-direction:column}
.row-content strong{font-size:20px;line-height:1.15;color:#0b2e3e}
.row-content span{font-size:16px;line-height:1.25;margin-top:4px}
.row-content small{font-size:12px;color:#6a7b84;margin-top:6px}
.row-tools{display:flex;gap:6px;align-items:center}
.row-tools button{width:32px;height:32px;border-radius:9px;border:1px solid #cddbe1;background:#fff;font-weight:900}
.row-tools .status-button{width:24px;height:24px;border:0;border-radius:50%;box-shadow:0 0 0 5px rgba(0,0,0,.035)}
.empty-state{height:100%;display:grid;place-items:center;padding:24px;color:#87959d;font-size:15px}

.side-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.side-tabs button{padding:11px}
.tab-panel{display:none}
.tab-panel.active{display:block}
.side-panel label{
display:flex;
flex-direction:column;
gap:5px;
margin-bottom:8px;
font-size:12px;
font-weight:800;
color:#1b3e4d;
}
.side-panel input,.side-panel select,.side-panel textarea{
width:100%;
padding:10px 11px;
border:1px solid #c8d8df;
border-radius:10px;
background:#fff;
color:#112f3d;
outline:none;
}
.side-panel input:focus,.side-panel select:focus,.side-panel textarea:focus{
border-color:#2ca8d2;
box-shadow:0 0 0 3px rgba(44,168,210,.12);
}
.side-panel textarea{resize:none}
.form-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.form-actions{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.form-actions button{padding:11px}
.summary-card{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.summary-card h3{margin:0 0 8px;font-size:19px}
#stats>div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed #d9e4e9;font-size:14px}
#stats span{display:flex;align-items:center;gap:8px}
.summary-total{font-size:17px!important;font-weight:900}
.search-result{display:flex;flex-direction:column;padding:11px;margin-bottom:8px;border:1px solid var(--line);border-radius:11px;background:#fbfdfe}
.search-result span{margin-top:3px}
.search-result small{margin-top:5px;color:#72838c}

footer{
position:fixed;
left:0;right:0;bottom:0;
height:36px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(90deg,#061f2b,#0b4157);
color:#fff;
font-size:12px;
z-index:20;
}

#toast{
position:fixed;
right:22px;
bottom:54px;
padding:13px 18px;
border-radius:11px;
background:#103d50;
color:#fff;
box-shadow:0 12px 30px rgba(0,0,0,.2);
opacity:0;
transform:translateY(12px);
transition:.2s ease;
pointer-events:none;
z-index:100;
}
#toast.show{opacity:1;transform:none}
#toast.error{background:#a92929}

.auth-page{
min-height:100vh;
display:grid;
place-items:center;
overflow:auto;
padding:30px;
background:
radial-gradient(circle at 20% 10%,rgba(44,168,210,.18),transparent 30%),
linear-gradient(135deg,#eff8fb,#dcecf2);
}
.auth-card{
width:min(430px,94vw);
padding:34px;
background:rgba(255,255,255,.97);
border:1px solid rgba(14,77,102,.12);
border-radius:22px;
box-shadow:0 22px 70px rgba(10,53,71,.18);
text-align:center;
}
.install-card{width:min(720px,95vw)}
.auth-logo{width:min(340px,80%);height:76px;object-fit:contain}
.auth-card h1{margin:10px 0 4px;color:#082b3b}
.auth-card p{margin:0 0 18px;color:#6b7d86}
.auth-card form{text-align:left}
.auth-card label{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:13px;font-weight:800}
.auth-card input{
padding:11px 12px;
border:1px solid #c9d8df;
border-radius:10px;
}
.auth-card button{width:100%;padding:12px;border:0;border-radius:11px;font-weight:900}
.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.install-grid h3{grid-column:1/-1;text-align:left;margin:12px 0 0}
.install-grid .full{grid-column:1/-1}
.alert{padding:11px 13px;border-radius:10px;margin:12px 0;text-align:left}
.alert.success{background:#dcf7e8;color:#17653f}
.alert.error{background:#ffe2e2;color:#922626}

.tv-shell{height:calc(100vh - 168px);padding:16px}
.tv-shell .dispatch-grid{height:100%}
.tv-page .dispatch-row{min-height:100px}
.tv-page .row-content strong{font-size:23px}
.tv-page .row-content span{font-size:18px}
.tv-page .row-content small{font-size:14px}

@media(max-width:1100px){
html,body{overflow:auto;height:auto}
.main-header{height:auto;grid-template-columns:100px 1fr 190px}
.header-logo{width:320px}
.dashboard-shell{height:auto;grid-template-columns:1fr}
.board-area,.side-panel{height:auto;overflow:visible}
.dispatch-grid{height:auto;grid-template-columns:1fr}
.dispatch-column{height:auto;min-height:260px}
.rows{height:auto;max-height:420px}
footer{position:static}
}
@media(max-width:600px){
.main-header{grid-template-columns:1fr auto;padding:10px}
.header-left{display:none}
.header-center{grid-column:1/-1;grid-row:2}
.header-logo{width:260px}
.header-center h1{font-size:18px;letter-spacing:2px}
.legend{gap:9px;flex-wrap:wrap}
.header-right span{font-size:21px}
.board-toolbar{height:auto;flex-wrap:wrap;gap:9px}
.board-date{width:100%;order:-1;text-align:center}
.form-two{grid-template-columns:1fr}
.install-grid{grid-template-columns:1fr}
.install-grid h3,.install-grid .full{grid-column:auto}
}


/* =========================
   FINAL PRODUCTION UI POLISH
   ========================= */
:root{
--brand-deep:#062635;
--brand-mid:#0a4b63;
--brand-cyan:#2ca8d2;
--surface:#ffffff;
--surface-soft:#f7fbfd;
--border-soft:#d9e7ed;
--shadow-soft:0 14px 34px rgba(8,43,59,.09);
}

.final-header{
height:142px;
grid-template-columns:220px 1fr 260px;
padding:12px 24px 10px;
background:
linear-gradient(180deg,rgba(255,255,255,.99),rgba(248,252,253,.98));
}
.header-spacer{width:100%;height:100%}
.final-header .header-center{
min-width:0;
gap:0;
}
.final-header .header-logo{
width:min(360px,28vw);
height:54px;
margin:0 0 2px;
object-fit:contain;
object-position:center;
}
.final-header .header-center h1{
margin:0;
font-size:29px;
line-height:1.05;
letter-spacing:5px;
font-weight:950;
color:var(--brand-deep);
white-space:nowrap;
}
.final-header .legend{
margin-top:10px;
display:flex;
align-items:center;
justify-content:center;
gap:24px;
font-size:13px;
line-height:1;
font-weight:800;
color:#38525f;
white-space:nowrap;
}
.final-header .legend span{
display:flex;
align-items:center;
gap:7px;
}
.final-header .header-right{
justify-self:end;
align-self:center;
min-width:220px;
}
.final-header .header-right strong{
font-size:14px;
font-weight:800;
}
.final-header .header-right span{
font-size:31px;
font-weight:950;
letter-spacing:.3px;
}
.final-header .header-right small{
font-size:12px;
}

.dashboard-shell{
height:calc(100vh - 178px);
grid-template-columns:minmax(0,84fr) minmax(330px,16fr);
}
.board-area{padding:14px 14px 12px}
.side-panel{
padding:12px;
min-width:0;
}
.board-toolbar{
height:44px;
margin-bottom:10px;
}
.board-toolbar button{
padding:9px 13px;
font-size:13px;
border-radius:10px;
}
.board-date{
font-size:22px;
font-weight:950;
}
.dispatch-grid{
height:calc(100% - 54px);
gap:13px;
}
.dispatch-column{
border-radius:18px;
box-shadow:var(--shadow-soft);
background:linear-gradient(180deg,#ffffff 0%,#fbfdfe 100%);
}
.dispatch-column>header{
height:58px;
font-size:22px;
letter-spacing:1.3px;
background:linear-gradient(135deg,#072d3d 0%,#0a5069 100%);
}
.rows{height:calc(100% - 58px)}
.dispatch-row{
min-height:96px;
padding:15px 14px;
background:linear-gradient(90deg,#ffffff 0%,#f9fcfd 100%);
}
.row-content strong{
font-size:21px;
font-weight:900;
letter-spacing:.1px;
}
.row-content span{
font-size:16px;
font-weight:650;
}
.row-content small{
font-size:12.5px;
font-weight:600;
}
.row-tools .status-button{
width:25px;
height:25px;
box-shadow:0 0 0 5px rgba(0,0,0,.04);
}
.row-tools button{
width:34px;
height:34px;
}
.side-tabs{margin-bottom:10px}
.side-tabs button{
padding:11px 8px;
font-size:14px;
}
.side-panel label{
margin-bottom:7px;
font-size:11.5px;
}
.side-panel input,
.side-panel select,
.side-panel textarea{
padding:9px 10px;
font-size:13px;
border-radius:9px;
}
.form-actions button{padding:10px 8px}
.summary-card{
margin-top:10px;
padding-top:9px;
}
.summary-card h3{font-size:18px}
#stats>div{
padding:6px 0;
font-size:13px;
}
footer{
height:36px;
font-size:11.5px;
letter-spacing:.2px;
}

.tv-shell{
height:calc(100vh - 178px);
padding:14px;
}
.tv-page .dispatch-row{min-height:102px}
.tv-page .row-content strong{font-size:24px}
.tv-page .row-content span{font-size:19px}
.tv-page .row-content small{font-size:14px}

/* Prevent header overlap on common desktop widths */
@media(max-width:1450px){
.final-header{
grid-template-columns:170px 1fr 230px;
}
.final-header .header-logo{width:320px;height:48px}
.final-header .header-center h1{font-size:25px;letter-spacing:4px}
.final-header .legend{gap:18px;font-size:12px}
.dashboard-shell{grid-template-columns:minmax(0,82fr) minmax(330px,18fr)}
}

@media(max-width:1180px){
.final-header{
grid-template-columns:120px 1fr 210px;
}
.final-header .header-logo{width:280px}
.final-header .header-center h1{font-size:22px;letter-spacing:3px}
.final-header .legend{gap:12px;font-size:11px}
}

@media(max-width:900px){
html,body{overflow:auto;height:auto}
.final-header{
height:auto;
grid-template-columns:1fr auto;
padding:10px 12px;
}
.header-spacer{display:none}
.final-header .header-center{
grid-column:1/-1;
grid-row:2;
}
.final-header .header-logo{width:260px}
.final-header .header-center h1{font-size:19px;letter-spacing:2px;white-space:normal;text-align:center}
.final-header .legend{flex-wrap:wrap;white-space:normal}
.dashboard-shell{height:auto;grid-template-columns:1fr}
.board-area,.side-panel{height:auto;overflow:visible}
.dispatch-grid{height:auto;grid-template-columns:1fr}
.dispatch-column{height:auto;min-height:280px}
.rows{height:auto;max-height:440px}
footer{position:static}
}

.admin-page{min-height:100vh;overflow:auto;background:linear-gradient(180deg,#f5fafc,#eaf3f7)}
.admin-header{height:108px;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 10px 28px rgba(9,44,60,.08)}
.admin-brand{display:flex;align-items:center;gap:22px}.admin-brand img{width:260px;height:58px;object-fit:contain}.admin-brand h1{margin:0;font-size:28px}.admin-brand p{margin:4px 0 0;color:var(--muted)}
.admin-actions{display:flex;gap:10px}.ghost-link{padding:10px 14px;border:1px solid #c9d8df;border-radius:10px;text-decoration:none;color:var(--navy);font-weight:800;background:#fff}
.admin-shell{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;padding:20px;min-height:calc(100vh - 108px)}
.admin-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-soft);padding:18px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-heading h2,.user-form-card h2{margin:0}.section-heading p{margin:4px 0 0;color:var(--muted)}
.table-wrap{overflow:auto}.users-table{width:100%;border-collapse:collapse}.users-table th,.users-table td{padding:13px 12px;text-align:left;border-bottom:1px solid #e3edf1;white-space:nowrap}.users-table th{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:#58707c}.table-actions{display:flex;gap:6px}.table-actions button{padding:7px 10px;border:1px solid #cad9df;background:#fff;border-radius:8px;font-weight:750}.table-actions .danger{color:#a62d2d}.role-badge,.status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800}.role-admin{background:#e6eefc;color:#264c91}.role-manager{background:#e8f5ff;color:#17618a}.role-staff{background:#e6f8ef;color:#176a44}.role-viewer{background:#f2edf9;color:#68418a}.status-pill.active{background:#ddf6e8;color:#176842}.status-pill.inactive{background:#f3e4e4;color:#8a2e2e}
.user-form-card label{display:flex;flex-direction:column;gap:6px;margin-bottom:11px;font-size:12px;font-weight:800}.user-form-card input,.user-form-card select{padding:10px;border:1px solid #cad9df;border-radius:9px}.switch-label{flex-direction:row!important;align-items:center}.switch-label input{width:auto}.help-text{font-size:12px;color:var(--muted);line-height:1.4}
@media(max-width:950px){.admin-header{height:auto;align-items:flex-start;gap:14px;flex-direction:column}.admin-shell{grid-template-columns:1fr}.admin-brand img{width:200px}.admin-actions{flex-wrap:wrap}}