/* Home-Connect Fleet — carried over from the original Fleet Log design. System fonts only (no third-party requests). */
:root{
  --paper:#F4F3EF; --surface:#FFFFFF; --surface-2:#FAF9F6;
  --ink:#1A2230; --ink-2:#4E5766; --ink-3:#6B7383;
  --line:#DEDBD3; --line-2:#EAE7E0;
  --accent:#A84A18; --accent-ink:#fff; --accent-soft:#F3E4D9;
  --good:#1E6B4A; --good-soft:#DFEDE5;
  --warn:#96660A; --warn-soft:#F6EBD2;
  --bad:#A22B21; --bad-soft:#F6DEDB;
  --shadow:0 1px 2px rgba(26,34,48,.06), 0 8px 24px rgba(26,34,48,.05);
  --r:10px;
  --brand:#0b3a78;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#11151C; --surface:#181D26; --surface-2:#1E242E;
    --ink:#E7E5DF; --ink-2:#A8AEBA; --ink-3:#8A909C;
    --line:#2C333F; --line-2:#232A34;
    --accent:#E08A4F; --accent-ink:#1A1109; --accent-soft:#38271C;
    --good:#66C295; --good-soft:#17301F;
    --warn:#DFB25A; --warn-soft:#33270F;
    --bad:#E58279; --bad-soft:#36191A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 var(--sans)}
a{color:var(--accent)}
h1,h2,h3{margin:0; letter-spacing:-.01em; text-wrap:balance}
.num,td.n{font-family:var(--mono); font-variant-numeric:tabular-nums}
.wrap{max-width:1180px; margin:0 auto; padding:0 16px 64px}

/* header */
/* Header always uses Home-Connect blue, so the white logo reads in light and dark mode */
header.top{background:var(--brand); border-bottom:1px solid rgba(255,255,255,.12); position:sticky; top:0; z-index:20; color:#fff}
.top-in{max-width:1180px; margin:0 auto; padding:10px 16px; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto; text-decoration:none; color:#fff}
.brand img{height:34px; width:auto; display:block}
.brand span{font-weight:700; font-size:16px; letter-spacing:.06em; text-transform:uppercase; padding-left:12px; border-left:1px solid rgba(255,255,255,.35)}
nav.main{display:flex; flex-wrap:wrap; gap:4px}
nav.main a{padding:8px 11px; border-radius:8px; text-decoration:none; color:rgba(255,255,255,.85); font-weight:600; font-size:14px}
nav.main a:hover{color:#fff; background:rgba(255,255,255,.08)}
nav.main a[aria-current="page"]{background:rgba(255,255,255,.16); color:#fff}
.who{font-size:13px; color:rgba(255,255,255,.8); display:flex; gap:10px; align-items:center}
header.top button{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.kicker{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600}

/* Sign-in page: the 10-year banner fills the screen, sign-in card on the right (as on the customer portal) */
body.welcome{min-height:100vh; background:#0b3a78 url("../images/welcome.jpg") center / cover no-repeat}
body.welcome .wrap{min-height:100vh; display:flex; flex-direction:column; padding-bottom:16px}
body.welcome .foot{color:rgba(255,255,255,.75); border-top-color:rgba(255,255,255,.25); margin-top:auto}
body.welcome .login{margin:auto 4vw auto auto; max-width:400px; width:100%; padding:0}
body.welcome .login .panel{background:var(--surface); box-shadow:0 12px 40px rgba(0,0,0,.35)}
.center{text-align:center}
body.welcome .login > p a{color:#fff}
.login .card-title{text-align:center; font-size:22px; margin:0 0 6px; color:var(--ink)}
@media (max-width:760px){
  body.welcome{background-image:url("../images/welcome-small.jpg"); background-position:22% center}
  body.welcome .login{margin:auto; padding:0 4px}
}

/* forms */
label.lbl{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:5px}
input,select,textarea{font:inherit; font-size:16px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%; min-width:0}
input[type=checkbox]{width:20px; height:20px; accent-color:var(--accent); flex:none}
textarea{min-height:76px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
button,.btn{font:inherit; font-weight:600; cursor:pointer; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); padding:10px 16px; min-height:44px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px}
button.primary,.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
button.danger{color:var(--bad); border-color:var(--bad)}
button.small{min-height:34px; padding:5px 11px; font-size:13px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px}
.err{color:var(--bad); font-size:13px; margin-top:4px}

/* layout blocks */
.notice{margin-top:16px; border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--surface); border-radius:var(--r); padding:12px 16px; font-size:14px; color:var(--ink-2)}
.notice.bad{border-left-color:var(--bad)}
.notice.good{border-left-color:var(--good)}
.sec{display:flex; align-items:baseline; gap:12px; margin:32px 0 12px; flex-wrap:wrap}
.sec h2{font-size:17px; font-weight:650}
.sec .hint{font-size:13px; color:var(--ink-3); margin-right:auto}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; padding:18px}
.grid .wide{grid-column:1/-1}
.foot-bar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:14px 18px; border-top:1px solid var(--line-2); background:var(--surface-2); border-radius:0 0 var(--r) var(--r)}
.foot-bar .msg{font-size:13px; color:var(--ink-3); margin-right:auto}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:20px}
.stat{background:var(--surface); padding:16px 18px}
.stat .k{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.stat .v{font-family:var(--mono); font-size:28px; margin-top:4px}
.stat .s{font-size:12.5px; color:var(--ink-3)}
.stat.alert .v{color:var(--warn)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* vehicles */
.vehicles{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.veh{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:start}
.veh .name{font-weight:650}
.veh .reg{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.veh .with{grid-column:1/-1; font-size:13px; color:var(--ink-2); border-top:1px solid var(--line-2); padding-top:8px; margin-top:6px}

/* pills */
.pill{display:inline-flex; align-items:center; font-size:11.5px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap}
.pill.out{background:var(--warn-soft); color:var(--warn)}
.pill.in{background:var(--good-soft); color:var(--good)}
.pill.late{background:var(--bad-soft); color:var(--bad)}
.pill.void{background:var(--line-2); color:var(--ink-3)}

/* tables: scroll inside their box on small screens, never the page */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:14px}
th{text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface-2)}
td{padding:10px 12px; border-bottom:1px solid var(--line-2); vertical-align:top}
tbody tr:last-child td{border-bottom:none}
td .sub{color:var(--ink-3); font-size:12.5px}
.empty{padding:30px 20px; text-align:center; color:var(--ink-3)}
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-bottom:12px}
.filters > div{min-width:150px; flex:1}
.pager{margin-top:12px; font-size:14px}
.pager nav svg{width:18px; height:18px}

details.box{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin-top:12px}
details.box > summary{cursor:pointer; padding:12px 16px; font-weight:600}
dl.kv{display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; padding:16px 18px; margin:0}
dl.kv dt{color:var(--ink-3); font-size:13px}
dl.kv dd{margin:0}
.foot{margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3); display:flex; gap:16px; flex-wrap:wrap}
.login{max-width:420px; margin:12vh auto; padding:0 16px}
.title{font-size:24px; margin:4px 0 16px}
.pad{padding:20px}
.pad > p:first-child{margin-top:0}
.pad > p:last-child{margin-bottom:0}
.full{width:100%}
.muted{font-size:13px; color:var(--ink-3)}
.devlist{padding:0 16px 16px; display:grid; gap:8px}
.devlist button{width:100%; justify-content:space-between}
.devlist .muted{font-weight:400}
.actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.mt{margin-top:16px}
.inline{display:inline; width:auto}
.pager ul{list-style:none; padding:0; display:flex; gap:10px}