body{background:#f7f8fb;font-size:13px}.main{min-width:0}#content{padding:32px;max-width:1600px;margin:auto}.topbar{gap:16px}.topbar .pill{margin-left:auto}.eyebrow{display:block;font-size:10px;color:#982586;letter-spacing:1.8px;font-weight:600;margin-bottom:10px}.xo-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}.xo-heading p{margin-top:7px}.xo-card{background:#fff;border:1px solid #e8e9ef;border-radius:12px;padding:24px;margin-bottom:20px;box-shadow:0 3px 12px #20204003}.xo-card h2{font-size:16px;margin-bottom:18px}.xo-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.xo-stat{padding:21px}.xo-stat .metric{font-size:25px;font-weight:600;letter-spacing:-1px;margin-top:10px}.xo-stat i{float:right;color:#982586;background:#f7ebf5;padding:9px;border-radius:8px}.xo-charts{display:grid;grid-template-columns:1fr 1.7fr;gap:20px}.xo-form{display:grid;grid-template-columns:1fr 1fr;gap:24px}label{display:block;font-weight:500;color:#51515f}input:not([type=checkbox]),select,textarea{display:block;width:100%;padding:11px 12px;margin-top:7px;border:1px solid #dddfe8;background:#fff;border-radius:7px;color:#202128;min-width:0}input:focus,select:focus,textarea:focus{outline:2px solid #e6c3e0;border-color:#982586}.check{display:flex!important;align-items:center;gap:9px;margin:16px 0}.check input{width:auto!important}.dropbox{width:100%;min-height:230px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1.5px dashed #ab9f9d;background:#fff9f6;border-radius:12px;text-align:center;padding:20px;color:#5c5350}.dropbox i{font-size:52px;color:#cf8058;margin-bottom:10px}.dropbox strong{color:#a65436}.dropbox small{margin-top:8px}.dropbox.drag{background:#f5e5f1;border-color:#982586}.dropbox img{max-width:100%;max-height:160px;object-fit:contain}.info{display:flex;gap:10px;background:#eaf4ff;color:#174b80;border:1px solid #d3e8ff;border-radius:7px;padding:11px;margin-top:10px;font-size:12px}.error{color:#a9293e;margin:10px 0}.success{background:#e7f6ee;color:#176a44;padding:13px;border-radius:8px;margin-bottom:16px}.xo-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}.xo-total{margin-left:auto;font-weight:600;font-size:18px}.xo-table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th{text-align:left;background:#fafafd;color:#777586}td{border-top:1px solid #eee}.thumb{width:56px;height:56px;object-fit:cover;border-radius:7px}.receipt-link{display:inline-flex;align-items:center;gap:10px;color:#982586}.xo-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.report-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid #eee;padding-bottom:17px}.report-head .amount{margin-left:auto;font-size:22px;font-weight:600}.badge-paid{background:#e8f7ef;color:#217749;padding:5px 10px;border-radius:5px}.badge-pending{background:#fff4df;color:#956316;padding:5px 10px;border-radius:5px}.report-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:18px}.report-item{display:flex;gap:12px;border:1px solid #eee;border-radius:8px;padding:12px;align-items:center}.report-item small{display:block}.report-item b{font-size:14px}.xo-menu{position:relative}.xo-menu summary{cursor:pointer;list-style:none;padding:5px 12px;font-size:22px}.xo-menu>div{position:absolute;right:0;top:35px;background:white;border:1px solid #ddd;box-shadow:0 8px 30px #0002;padding:8px;min-width:160px;z-index:9;border-radius:8px}.xo-menu button{display:block;width:100%;padding:9px;text-align:left;background:none;border:0}.xo-menu button:hover{background:#f8edf6}.empty{text-align:center;padding:45px;color:#82808d}dialog{border:0;border-radius:14px;width:650px;max-width:calc(100vw - 24px);padding:24px;max-height:90vh;overflow:auto}dialog::backdrop{background:#15142188}dialog h2{font-size:20px;margin-bottom:20px}dialog .button{margin-top:14px}.user-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.user-form .wide{grid-column:1/-1}.preview-receipt{width:100%;max-height:70vh;object-fit:contain}.pagination{display:flex;gap:12px;align-items:center;justify-content:center;margin:18px}.chart-fallback{padding:10px;color:#6c6875}.sidebar-user small{display:block;word-break:break-all}#mobile-menu{display:none}.login-card label{margin-top:16px}.login-main{min-height:90vh}.xo-scrim{position:fixed;inset:0;border:0;background:#0006;z-index:39}[hidden]{display:none!important}.report-card{break-inside:avoid}.login-brand img{width:44px}button:disabled{cursor:wait}.xo-card .button{min-height:38px}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
@media(max-width:1100px){.xo-stats{grid-template-columns:1fr 1fr}.xo-charts{grid-template-columns:1fr}.report-items{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.sidebar{transform:translateX(-100%)}body.nav-open .sidebar{transform:translateX(0)}.main{margin-left:0!important}#mobile-menu{display:block}#content{padding:20px 14px}.xo-filters{grid-template-columns:1fr 1fr}.xo-form{grid-template-columns:1fr}.xo-heading{align-items:flex-start}h1{font-size:23px}.xo-card{padding:17px}.topbar{padding:12px 14px}.xo-heading input{max-width:145px}}
@media(max-width:480px){.xo-stats{gap:10px}.xo-stat .metric{font-size:19px}.xo-stat i{display:none}.report-items{grid-template-columns:1fr}.report-head .amount{font-size:18px}.user-form{grid-template-columns:1fr}.user-form .wide{grid-column:auto}.xo-total{width:100%;margin-left:0}.xo-heading{flex-wrap:wrap}.xo-filters{gap:10px}.topbar .pill{display:none}}
@media print{.sidebar,.topbar,footer,.xo-filters,.xo-actions,.xo-menu,.pagination,#notice,.xo-heading>label{display:none!important}.main{margin:0!important}#content{padding:0}.xo-card{box-shadow:none}.report-items{grid-template-columns:1fr 1fr}.thumb{width:110px;height:110px}body{background:white}}

/* Keep the workspace usable from a 320px phone through wide desktops. */
.xo-stat,.xo-charts>*,.report-head>div,.report-item>div{min-width:0}
.xo-stat .metric{font-size:clamp(17px,1.7vw,22px);letter-spacing:-.4px;overflow-wrap:anywhere}
.report-head .amount{font-size:18px;overflow-wrap:anywhere}.xo-total{font-size:16px}
.sidebar{overflow-y:auto}.sidebar-bottom{margin-top:auto}.sidebar-user{overflow-wrap:anywhere}
.bulk-bar{display:flex;align-items:center;flex-wrap:wrap;gap:16px}.bulk-bar .check{margin:0}
.bulk-bar .button{margin-left:auto}.report-select,.check input{width:19px;height:19px;accent-color:#982586;flex-shrink:0}
.selection-ids{margin-top:12px;overflow-wrap:anywhere}.user-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:160px}
.user-actions button{border:1px solid #e2dce4;border-radius:6px;background:#fff;padding:7px 9px;font-size:12px;color:#702364;min-height:36px}
.user-actions button:hover{background:#faf1f8}.users-table td{overflow-wrap:anywhere;white-space:normal;padding:13px 10px}
.users-table .report-item{border:0;padding:0}.users-table .avatar{flex-shrink:0}
#camera-preview{width:100%;max-height:55vh;background:#121212;border-radius:9px}#camera-error{margin-top:12px}
#fuel-litres-wrap{margin-top:14px}.draft-litres{margin-top:8px;font-size:11px}
.xo-table-wrap td input{min-width:100px}.xo-table-wrap td select{min-width:130px}
dialog{overscroll-behavior:contain}dialog h2{font-size:18px}.xo-filters .xo-actions{margin:0;align-self:end}
@media(max-width:900px){#mobile-menu{display:block}.main{margin-left:0!important}.xo-charts{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
 .users-table,.users-table tbody,.users-table tr,.users-table td{display:block;width:100%}
 .users-table thead{display:none}.users-table tr{border:1px solid #e8e9ef;border-radius:10px;margin-top:16px;padding:10px}
 .users-table td{border:0;padding:6px}.users-table td[data-label]::before{content:attr(data-label);display:block;color:#777;font-size:11px;margin-bottom:2px}
 .users-table .user-actions{margin-top:8px}.user-actions button{min-height:42px;flex:1 1 45%}
 .topbar{min-height:60px;height:auto}.xo-menu summary{min-width:40px;min-height:40px}
 input:not([type=checkbox]),select,textarea{font-size:16px}.button{min-height:42px}
 .xo-heading h1{font-size:22px}.report-head .amount{font-size:16px}
}
@media(max-width:380px){.xo-filters{grid-template-columns:1fr}.xo-stats{grid-template-columns:1fr}.xo-stat .metric{font-size:20px}.report-head .amount{margin-left:0}.bulk-bar .button{width:100%}}

.fuel-summary{display:flex;flex-wrap:wrap;gap:18px}.fuel-summary span{flex:1;min-width:150px}.fuel-summary b{display:block;font-size:17px;margin-top:5px}#fuel-balance .muted{margin-top:12px}

/* Workspace spacing fixes — 29 September 2026. */
.sidebar-user{justify-content:flex-start;gap:10px}
.sidebar-user>span:last-child{margin-left:0;min-width:0;flex:1}
.sidebar-bottom>form{margin-top:16px}
.xo-filters>*{min-width:0}
.xo-filters input,.xo-filters select{max-width:100%;width:100%}
.xo-filters{column-gap:16px;row-gap:18px}
.xo-filters .xo-actions{gap:10px}
body[data-page="users"] .xo-table-wrap{margin-top:20px}
.users-table th,.users-table td{padding:14px 12px;vertical-align:middle}
.users-table .report-item{margin:0;gap:10px}
.users-table .report-item b{min-width:0;overflow-wrap:anywhere}
.users-table .user-actions{gap:8px}
@media(max-width:800px){
 .xo-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
 .xo-filters .xo-actions{grid-column:1/-1;margin-top:2px}
}
@media(max-width:700px){
 .users-table td{padding:8px 6px}
 .users-table tr{margin-top:12px;padding:12px}
 .users-table tr:first-child{margin-top:0}
 .users-table .report-item{padding-bottom:8px}
 .users-table .user-actions{min-width:0}
}
@media(max-width:480px){
 .xo-filters{grid-template-columns:minmax(0,1fr);gap:16px}
 .xo-filters .xo-actions .button{flex:1}
 .xo-filters+.xo-actions{gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid #e8e9ef}
 .xo-filters+.xo-actions small{flex-basis:100%}
 .bulk-bar{gap:12px}
 .bulk-bar .button{width:100%;margin-left:0}
 .pagination{margin:20px 0;gap:10px;flex-wrap:wrap}
}

.xo-password-wrap{position:relative;display:block}.xo-password-wrap input{padding-right:70px!important}.xo-password-wrap button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#982586;padding:8px}.fuel-auto{display:block;margin-top:12px;color:#174b80}