/* Follow the device preference directly, including changes while the page is open. */
:root{color-scheme:light}
.sidebar .brand{background:transparent;border-radius:0;padding:0 4px}
.sidebar .brand .official-logo{filter:brightness(0) invert(1)}
.sidebar .company-name{color:#dce9ef}
.branding-preview img{background:transparent}
@media(max-width:800px){.sidebar .brand{padding:0;width:100px}.sidebar .brand .official-logo{width:100px}}

@media(prefers-color-scheme:dark){
 :root{
  color-scheme:dark;
  --ink:#e5edf3;--muted:#a2b2bf;--green:#65d2b8;--green-light:#173d35;
  --line:#2a3d4b;--bg:#0c151e;--nav:#102632;
  --amber:#e5bb73;--amber-light:#3e311d;--red:#f19b9b;
  --surface:#14222e;--surface-raised:#1b2d3a;--surface-soft:#101e29;
 }
 body,.login-body{background:var(--bg)}
 a,.tiny-link,.eyebrow{color:var(--green)}
 input,select,textarea{background:var(--surface-soft);border-color:#3a5262;color:var(--ink)}
 input::placeholder,textarea::placeholder{color:#93a5b2;opacity:1}
 input:focus,select:focus,textarea:focus{border-color:var(--green)}
 input[type=checkbox]{accent-color:#238e77}
 input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--surface-soft) inset}
 .topbar,.period-bar,.stat-card,.panel,dialog{background:var(--surface);border-color:var(--line)}
 .primary{background:#187e68;color:#fff;box-shadow:0 2px 5px #0003}
 .primary:hover{background:#21947b}
 .secondary,.edit-button{background:var(--surface-raised);border-color:#3a5262;color:#d9e8ef}
 .secondary:hover,.edit-button:hover{background:#253e4b;border-color:#547584}
 .breadcrumb,.topbar-date,.period-bar label,.stat-label,.stat-card small,
 .driver-meta p,.settlement-money small,.panel-header p,.empty-state p,
 .document-meta small,.driver-card p,.history-row time,.history-row p,
 .page-footer,.login-footer,.form-grid small,.admin-username,.admin-company small{color:var(--muted)}
 .breadcrumb strong{color:#d4e2eb}.breadcrumb span{color:#718b9a}
 .stat-card strong span{color:#b1c0ca}
 .panel-header,.settlement-row,.table-toolbar,.table-footer,.admin-company,.dialog-footer,
 .document-row,.history-row{border-color:var(--line)}
 .test-pill{background:#352e20;border-color:#665336;color:#e6c789}
 .avatar{background:#214a40;color:#b2f2db}
 .calendar-icon,.step-number{background:#233d3c;color:#b1ddcf}
 .stat-icon{background:#263948;color:#bbd0df}
 .stat-icon.teal{background:#1b3d35;color:#86dec4}
 .stat-icon.amber{background:#3c3120;color:#efc67e}
 .workflow-strip>div{color:var(--muted)}.step-line{background:#304956}
 .driver-avatar{background:#253e4e;color:#b7d7e9}
 .pill.amber{color:#f0cd8b}.pill.green{color:#9ae4ca}
 .pill.gray{background:#293c49;color:#c0d2df}.pill.red{background:#44292f;color:#ffb7b7}
 .empty-symbol{background:#18342e;border-color:#42695d;color:#a1d8c1}
 .count-badge{background:#243845;border-color:#3a5260;color:#c0d1dd}
 .search-box{color:#a3bac7}.search-box input{background:transparent}
 .table-toolbar select{color:#c9dbe5}
 .loads-table th{background:var(--surface-soft);color:#afc2cf}
 .loads-table td{border-color:var(--line);color:#c5d5df}
 .loads-table td strong,.loads-table .amount{color:#e5edf3}
 .loads-table td small,.table-footer{color:var(--muted)}
 .table-empty{color:#a1b4c3!important}
 #trips-body td:first-child,#pending-body td:first-child{background:var(--surface)}
 .driver-tabs{background:var(--surface-soft);border-color:var(--line)}
 .driver-tab{color:#b0c2cf}.driver-tab:hover{background:#213c36;color:#a8ebd7}
 .driver-tab.active{background:#1a3d34;color:#a3edd5;border-bottom-color:#65d2b8}
 .driver-tab-count{background:#2b404e;color:#c8dbe5}
 .driver-tab.active .driver-tab-count{background:#2c594b;color:#c1f5df}
 .info-note{background:#142e2b;border-color:#2f5048;color:#afc7bf}
 .info-note strong,.info-note>span{color:#a0ddc7}
 .dropzone{background:#132c27;border-color:#487b69;color:#b3d7c9}
 .dropzone:hover,.dropzone.dragging{background:#1b3b31}
 .dropzone strong{color:#d1ede1}.dropzone small{color:#a9c6b8}
 .upload-icon{background:#234637;border-color:#426b56;color:#b7e4c9}
 .document-icon{background:#263a47;border-color:#425a69;color:#d0dfe8}
 .document-error,.error-text,.form-error{color:#ffb1a7}
 .form-grid label,form>label,.checkbox-label{color:#becfd9}
 .source-preview{background:var(--surface-soft);border-color:var(--line)}
 .source-preview-label{border-color:var(--line);color:var(--muted)}
 .source-preview iframe,.source-preview img{background:#fff;color-scheme:light}
 .pdf-dialog iframe{background:var(--surface-soft);border-color:var(--line);color-scheme:light}
 dialog{box-shadow:0 24px 120px #0008}dialog::backdrop{background:#030a13b3}
 .toast{background:#205344;border:1px solid #447f6a;color:#effbf6}
 .toast.error{background:#6b3836;border-color:#a6645d}
 .update-notice{background:#18362d;border-color:#467b65;color:#e0f7e9;box-shadow:0 8px 35px #0006}
 .login-decoration{background:#102632}
 .login-decoration .eyebrow{color:#88c9b6}
 .login-decoration p:not(.eyebrow){color:#adc2cc}
 .login-brand .official-logo,.branding-preview img{filter:brightness(0) invert(1)}
}

/* The same labeled dropdown navigation on desktop and mobile. */
.sidebar{position:sticky;inset:auto;top:0;width:100%;height:auto;padding:13px 38px;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;z-index:10}
.sidebar .brand{width:185px;gap:4px}
.sidebar .brand>.company-name{display:block;color:#dce9ef;font-size:10px;letter-spacing:.2px;margin-top:3px;max-width:185px}
.sidebar .brand .official-logo{width:160px}
.workspace,.nav-label,.sidebar-note{display:none}
.main-shell{margin-left:0}
.mobile-menu-toggle{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;border:1px solid #ffffff30;border-radius:8px;background:#ffffff08;color:#edf6f8;padding:9px 14px;font-size:13px;font-weight:600}
.mobile-menu-toggle [data-menu-symbol]{font-size:23px;line-height:1;width:22px;text-align:center}
.sidebar nav{display:none;position:absolute;right:38px;left:auto;top:calc(100% - 1px);width:330px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 105px);overflow-y:auto;overflow-x:hidden;background:var(--nav);border:1px solid #ffffff26;border-radius:0 0 12px 12px;box-shadow:0 15px 35px #0005;padding:10px;z-index:11}
.sidebar.menu-open nav{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.mobile-menu-heading{display:block;color:#b1cbd4;font-size:11px;padding:5px 12px 11px;border-bottom:1px solid #ffffff14;margin-bottom:4px}
.sidebar .nav-item{width:100%;font-size:13px;gap:13px;padding:12px;margin:0;min-height:46px}
.sidebar .nav-item>span:first-child{font-size:20px;width:24px;text-align:center;flex-shrink:0}
.sidebar .nav-count{display:inline-flex;font-size:11px}
.menu-account{display:flex;align-items:center;gap:10px;border-top:1px solid #ffffff20;padding:14px 12px 4px;margin-top:6px;font-size:12px}
.menu-account>div:nth-child(2){min-width:0;flex:1;overflow-wrap:anywhere}
.menu-account small{display:block;font-size:10px;color:#a0b8c4}
.menu-account .icon-button{color:#c1d9df}
.update-notice{left:24px}
@media(max-width:800px){
 .sidebar{padding:12px 18px;gap:12px}
 .sidebar .brand{width:125px;gap:0}
 .sidebar .brand .official-logo{width:112px}
 .sidebar .brand>.company-name{font-size:9px;max-width:125px}
 .sidebar nav{left:12px;right:12px;width:auto}
 .mobile-menu-toggle{padding:9px 12px}
 .update-notice{left:12px}
}

.menu-account{flex-wrap:wrap}
.menu-logout{display:flex;align-items:center;justify-content:center;gap:9px;flex-basis:100%;margin-top:5px;border:1px solid #ffffff30;border-radius:7px;padding:9px 12px;background:transparent;color:#dce9ef;font-size:12px}
.menu-logout>span{font-size:19px;line-height:1}
.menu-logout:hover{background:#ffffff0d}
.company-settings-panel>form{padding:0 22px 22px}
.company-settings-panel fieldset{border:0;padding:0;margin:0;min-width:0}
.company-settings-panel fieldset:disabled{opacity:.75}
.settings-preview{padding:12px 14px;border-radius:7px;background:var(--green-light);color:var(--green);font-size:12px;margin-bottom:14px}
.settings-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:800px){.company-settings-panel>form{padding:0 16px 16px}.company-settings-panel .form-grid{grid-template-columns:1fr}.company-settings-panel .span-2{grid-column:auto}.settings-actions .button{white-space:normal}}