/* FleetDue — a calm, modern operating desk for small UK fleets. */

:root {
  --paper: #f5f7f4;
  --surface: #ffffff;
  --ink: #13231f;
  --muted: #60706a;
  --line: #dce3dd;
  --blue: #126b55;
  --blue-dark: #0b4f3e;
  --plate: #f6c90e;
  --plate-edge: #18242d;
  --red: #b3261e;
  --red-bg: #fbe3e0;
  --amber: #8a4b00;
  --amber-bg: #fbe9cb;
  --green: #1c6a42;
  --green-bg: #dcefe3;
  --grey-bg: #e6e9e4;
  --radius: 10px;
  --shadow: 0 18px 50px rgba(23, 49, 40, .09);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-plate: "Arial Narrow", "Roboto Condensed", "Helvetica Neue Condensed", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.55 var(--font);
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }

.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.narrow { width: min(460px, 100% - 32px); margin-inline: auto; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); font-weight: 850; letter-spacing: -.055em; }
h2 { font-size: 1.5rem; font-weight: 750; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1em; max-width: 68ch; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* ---- header / footer */
.site-header { background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 72px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem;
  color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.brandmark { width: 34px; height: 34px; background: var(--ink); border-radius: 10px; position: relative; display: inline-block; transform: rotate(-2deg); }
.brandmark::before, .brandmark::after { content: ""; position: absolute; left: 7px; right: 7px; height: 3px; background: var(--plate); border-radius: 3px; }
.brandmark::before { top: 10px; } .brandmark::after { bottom: 10px; }
.brandmark span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: white; top: 15px; left: 14.5px; }
.nav { margin-left: auto; display: flex; gap: 6px 18px; align-items: center; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--ink); font-weight: 600; }
.nav a:hover { text-decoration: underline; }
.nav form { display: inline; }
.site-footer { margin-top: 96px; padding: 42px 0; background: #10231d; color: #c9d7d1; font-size: .875rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1fr auto; gap: 26px 50px; align-items: start; }
.site-footer p { margin: 0; }
.footer-brand { color: white; margin-bottom: 8px; }.footer-brand:hover { color: white; }
.footer-links { display: flex; gap: 22px; }.footer-links a { color: white; text-decoration: none; }
.footer-legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.13); padding-top: 20px; max-width: none; }

main { padding-top: 32px; }

/* ---- buttons & forms */
.btn { display: inline-block; font: inherit; font-weight: 750; padding: 11px 19px; border-radius: var(--radius);
  border: 2px solid var(--blue); background: var(--blue); color: #fff; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn.secondary { background: transparent; color: var(--blue); }
.btn.secondary:hover { background: var(--blue); color: #fff; }
.btn.danger { background: transparent; border-color: var(--red); color: var(--red); }
.btn.danger:hover { background: var(--red); color: #fff; }
.btn.small { padding: 5px 12px; font-size: .875rem; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }

label { display: block; font-weight: 650; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
  width: 100%; font: inherit; padding: 10px 12px; border: 1.5px solid #9aa5ad; border-radius: var(--radius);
  background: #fff; color: var(--ink); }
input:focus, textarea:focus, select:focus { border-color: var(--blue); }
textarea { min-height: 120px; resize: vertical; }
.field { margin-bottom: 16px; }
.hint { font-size: .875rem; color: var(--muted); margin-top: 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.check input { margin-top: 5px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: 0 8px 30px rgba(23,49,40,.04); }
.card + .card { margin-top: 18px; }

.flash { padding: 10px 14px; border-radius: var(--radius); margin: 0 0 14px; border-left: 5px solid var(--blue);
  background: #e4edf6; }
.flash.ok { border-color: var(--green); background: var(--green-bg); }
.flash.error { border-color: var(--red); background: var(--red-bg); }
.banner { background: var(--amber-bg); border-left: 5px solid var(--amber); padding: 12px 16px;
  border-radius: var(--radius); margin-bottom: 18px; }
.banner a { font-weight: 700; }

/* ---- the number plate */
.plate { display: inline-flex; align-items: stretch; background: var(--plate); color: #111;
  border: 2px solid var(--plate-edge); border-radius: 5px; font-family: var(--font-plate);
  font-weight: 800; font-stretch: condensed; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1; white-space: nowrap; overflow: hidden; }
.plate::before { content: "UK"; display: flex; align-items: flex-end; justify-content: center;
  background: var(--blue); color: #fff; font-size: .42em; font-weight: 700; letter-spacing: 0;
  padding: 0 .35em .4em; min-width: 1.5em; }
.plate span { padding: .3em .55em .28em; font-size: 1.05rem; }
.plate.big span { font-size: 2rem; padding: .28em .7em .25em; }

/* ---- status chips */
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .8125rem; font-weight: 700;
  white-space: nowrap; }
.chip.overdue { background: var(--red-bg); color: var(--red); }
.chip.urgent { background: var(--red-bg); color: var(--red); }
.chip.soon { background: var(--amber-bg); color: var(--amber); }
.chip.ok { background: var(--green-bg); color: var(--green); }
.chip.unknown { background: var(--grey-bg); color: var(--muted); }

/* ---- landing */
.hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(40px,7vw,86px); align-items: center; padding: 76px 0 56px; min-height: 660px; }
.hero h1 em { color: var(--blue); font-style: normal; }
.hero p.lead, .feature-band p.lead { font-size: 1.18rem; color: #43564f; max-width: 58ch; }
.eyebrow { color: var(--blue); font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 800; margin-bottom: 14px; }
.eyebrow span { display: inline-block; width: 26px; height: 2px; background: var(--plate); vertical-align: middle; margin-right: 8px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
.trust-row { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: .84rem; margin-top: 16px; }
.dashboard-preview { background: var(--surface); border: 1px solid #dbe3dc; border-radius: 18px; padding: 0 20px; box-shadow: var(--shadow); transform: rotate(1deg); overflow: hidden; }
.preview-top { margin: 0 -20px; padding: 13px 18px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; font-size: .75rem; font-weight: 750; color: var(--muted); }
.preview-top > span:nth-child(2) { text-align:center; }.live-pill { justify-self: end; background: #dcefe3; color: var(--green); border-radius: 99px; padding: 2px 8px; }
.preview-dot { width: 7px; height: 7px; border-radius: 50%; display:inline-block; margin-right: 4px; }.preview-dot.red{background:#ee766e}.preview-dot.amber{background:#eebd53}.preview-dot.green{background:#68bd8a}
.preview-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 20px 0 13px; }.preview-summary div { border-right: 1px solid var(--line); }.preview-summary div:last-child{border:0}.preview-summary strong { display:block;font-size:1.35rem; }.preview-summary span { color:var(--muted);font-size:.72rem; }.danger-text{color:var(--red)}
.preview-table { width: 100%; border-collapse: collapse; }.preview-table td { padding: 12px 5px 12px 0; border-top: 1px solid var(--line); vertical-align: middle; }.preview-table td:last-child{text-align:right;padding-right:0}
.preview-foot { margin: 0 -20px; background: #f8faf8; border-top: 1px solid var(--line); padding: 11px 18px; display:flex; justify-content:space-between; gap:12px; font-size:.7rem;color:var(--muted)}.preview-foot strong{color:var(--blue)}
.proof-strip { display: grid; grid-template-columns: repeat(3,1fr); background: var(--ink); color:white; border-radius: 16px; padding: 24px 30px; gap:25px; }.proof-strip div { border-right:1px solid rgba(255,255,255,.15); }.proof-strip div:last-child{border:0}.proof-strip strong,.proof-strip span{display:block}.proof-strip strong{font-size:1.1rem}.proof-strip span{font-size:.82rem;color:#bdcbc6}
.section { padding-top: 56px; }
.section > h2 { font-size: clamp(1.8rem,3.3vw,2.8rem); letter-spacing:-.035em; max-width: 720px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 0; list-style: none; margin: 26px 0 0; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: 0 7px 24px rgba(23,49,40,.04); }
.step-icon { display:inline-block;color:var(--blue);font-weight:850;font-size:.8rem;border-bottom:3px solid var(--plate);margin-bottom:28px; }
.feature-band { display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:start;background:#e8eee9;border-radius:20px;padding:46px;margin-top:70px; }
.feature-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;list-style:none;padding:0;margin:0; }.feature-grid li{display:flex;gap:14px;background:white;border:1px solid var(--line);padding:18px;border-radius:12px}.feature-grid li>span{width:30px;height:30px;border-radius:9px;background:#e5f1eb;color:var(--blue);display:grid;place-items:center;font-weight:800;flex:0 0 auto}.feature-grid p{font-size:.85rem;color:var(--muted);margin:3px 0 0}
.checks { padding-left: 1.2em; }
.checks li { margin-bottom: .45em; max-width: 70ch; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; position:relative; }
.plan.featured { border:2px solid var(--blue); box-shadow:var(--shadow); transform:translateY(-7px) }.popular{position:absolute;top:-13px;right:18px;background:var(--blue);color:white;border-radius:99px;padding:4px 10px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.plan ul{list-style:none;padding:0;margin:18px 0}.plan li{font-size:.86rem;margin:7px 0;color:var(--muted)}.plan li::before{content:'✓';color:var(--green);font-weight:800;margin-right:8px}
.plan .price { font-size: 2rem; font-weight: 800; margin: 4px 0 2px; }
.plan .price small { font-size: 1rem; font-weight: 600; color: var(--muted); }
details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; margin-bottom: 10px; }
details.faq summary { cursor: pointer; font-weight: 700; }
details.faq p { margin: 10px 0 0; }

/* ---- dashboard */
.page-head { display: flex; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 1.8rem; margin: 0; }
.page-head .actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs a { text-decoration: none; padding: 6px 14px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); font-weight: 650; font-size: .9375rem; }
.tabs a .n { font-weight: 800; margin-left: 4px; }
.tabs a[aria-current=page] { background: var(--ink); color: #fff; border-color: var(--ink); }
.tabs a.alert:not([aria-current=page]) .n { color: var(--red); }

.fleet { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; }
.fleet th { text-align: left; font-size: .8125rem; color: var(--muted); font-weight: 700; padding: 10px 14px;
  background: #f7f8f5; border-bottom: 1px solid var(--line); }
.fleet td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.fleet tbody tr:first-child td { border-top: 0; }
.fleet .veh { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fleet .veh a { text-decoration: none; }
.fleet .veh a:hover .plate { box-shadow: 0 0 0 3px rgba(15,76,129,.35); }
.cell-date { display: block; font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.pending-note { color: var(--muted); font-style: italic; }
.err-note { color: var(--red); font-size: .875rem; }

.add-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-bottom: 26px; }
.add-grid h2 { font-size: 1.1rem; }
.empty { text-align: left; }

/* ---- vehicle detail */
.detail-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.detail-head h1 { font-size: 1.3rem; margin: 0; }
.status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.status-grid .card { padding: 16px; }
.status-grid h3 { margin-bottom: 6px; font-size: .9375rem; color: var(--muted); }
.status-grid .when { font-size: 1.2rem; font-weight: 800; }
.history { width: 100%; border-collapse: collapse; }
.history th, .history td { text-align: left; padding: 8px 10px 8px 0; border-top: 1px solid var(--line); vertical-align: top; }
.history th { font-size: .8125rem; color: var(--muted); border-top: 0; }
.history details summary { cursor: pointer; color: var(--blue); }
.history ul { margin: 6px 0 0; padding-left: 1.1em; }
.repeat { border-left: 5px solid var(--amber); background: var(--amber-bg); padding: 14px 18px; border-radius: var(--radius); margin-bottom: 18px; }
.repeat h2 { font-size: 1.05rem; margin-bottom: 6px; }
.repeat ul { margin: 0; padding-left: 1.2em; }
.inline-form { display: inline; }
.form-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
.result-pass { color: var(--green); font-weight: 700; }
.result-fail { color: var(--red); font-weight: 700; }

.admin-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.admin-table th, .admin-table td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.admin-table select, .admin-table input { padding: 5px 8px; width: auto; max-width: 110px; }

.prose h2 { margin-top: 1.6em; font-size: 1.2rem; }
.prose li { margin-bottom: .4em; max-width: 68ch; }

/* ---- small screens */
@media (max-width: 760px) {
  .hero, .add-grid, .plans, .steps, .status-grid, .form-row, .feature-band, .feature-grid, .proof-strip { grid-template-columns: 1fr; }
  .hero { gap: 24px; }
  .hero { padding-top:46px; min-height:auto; }.dashboard-preview{transform:none}.proof-strip div{border-right:0;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:14px}.feature-band{padding:28px;margin-top:55px}.plan.featured{transform:none}.site-footer .wrap{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}
  .fleet thead { position: absolute; left: -9999px; }
  .fleet, .fleet tbody, .fleet tr, .fleet td { display: block; width: 100%; }
  .fleet tr { padding: 10px 14px; border-top: 1px solid var(--line); }
  .fleet tbody tr:first-child { border-top: 0; }
  .fleet td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; gap: 12px; }
  .fleet td[data-label]::before { content: attr(data-label); color: var(--muted); font-weight: 600; font-size: .875rem; }
  .fleet td.vehicle-cell { display: block; }
  .fleet td > div { text-align: right; }
  .admin-table { display: block; overflow-x: auto; }
  .history { display: block; overflow-x: auto; }
}

/* Static Web App additions */
.notice-wrap { position: fixed; inset: 82px 0 auto; z-index: 30; pointer-events: none; }
.notice-wrap .flash { box-shadow: var(--shadow); pointer-events: auto; }
.loading { min-height: 50vh; display: grid; place-items: center; color: var(--muted); }
.wide { width: 100%; }
.auth-shell { min-height: 66vh; display: grid; place-items: center; padding: 56px 0; }
.auth-card { width: min(460px,100%); padding: 36px; }
.auth-card h1, .pricing-head h1 { font-size: clamp(2rem,5vw,3.4rem); }
.auth-switch { margin: 22px 0 0; text-align: center; }
.pricing-head { max-width: 780px; padding-bottom: 18px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px 0; }
.metric { background:white; border:1px solid var(--line); border-radius:14px; padding:18px; }
.metric span,.metric strong { display:block; }.metric span{color:var(--muted);font-size:.82rem}.metric strong{font-size:2rem}.metric.danger strong{color:var(--red)}.metric.warning strong{color:var(--amber)}.metric.safe strong{color:var(--green)}
.add-card { margin-bottom:18px; }.add-card form{display:grid;grid-template-columns:.8fr 1.5fr auto;gap:16px;align-items:end}.add-card textarea{min-height:74px}.add-card p{margin:0}
.fleet-wrap{overflow-x:auto;border-radius:14px;box-shadow:0 8px 30px rgba(23,49,40,.04)}
.veh-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.veh-link span span,.veh-link small{display:block}.veh-link small{color:var(--muted);font-size:.75rem;margin-top:2px}
.fleet td .chip{display:block;width:max-content;margin:3px 0}.fleet td>a:last-child{font-size:1.4rem;text-decoration:none}
.back{display:inline-block;margin:10px 0 22px;text-decoration:none;font-weight:700}.detail-head .btn{margin-left:auto}.detail-head>.plate span{font-size:1.65rem}
.detail-columns,.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.detail-columns .card+.card,.settings-grid .card+.card{margin-top:0}.timeline article{display:grid;grid-template-columns:1fr auto;gap:4px;border-top:1px solid var(--line);padding:12px 0}.timeline article p{grid-column:1/-1;margin:0;color:var(--muted)}
.settings-grid hr{border:0;border-top:1px solid var(--line);margin:30px 0}.legal{max-width:850px;margin:24px auto;padding:clamp(24px,5vw,54px)}.legal h1{font-size:clamp(2rem,5vw,3.6rem)}
@media(max-width:760px){.metrics{grid-template-columns:1fr 1fr}.add-card form,.detail-columns,.settings-grid{grid-template-columns:1fr}.auth-card{padding:24px}.detail-head .btn{margin-left:0}.fleet td{min-width:145px}.fleet td:first-child{position:sticky;left:0;background:white;z-index:1}}
@media (prefers-reduced-motion: no-preference) {
  .fleet .veh a .plate { transition: box-shadow .15s ease; }
}

/* ---- utilities (CSP forbids inline style attributes) */
.title-sm { font-size: 1.8rem; }
.mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.scroll-x { overflow-x: auto; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }