@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@500;600&display=swap');

:root{
  --asphalt:#1B2430;
  --asphalt-light:#2A3648;
  --amber:#F2A93B;
  --amber-dim:#c98f2f;
  --paper:#F7F5F0;
  --paper-dim:#EDE9DE;
  --line:#D8D3C6;
  --ink:#242320;
  --ink-soft:#5B6472;
  --green:#3E7C59;
  --red:#B23A2E;
  --radius:3px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
}

h1,h2,h3,.headline{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--asphalt);
  margin:0;
}

.mono, .odometer{
  font-family:'Roboto Mono',monospace;
}

a{color:var(--asphalt);}

button, .btn{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:.88rem;
  border:1px solid var(--asphalt);
  background:var(--asphalt);
  color:var(--paper);
  padding:10px 16px;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .12s ease, transform .05s ease;
}
button:hover, .btn:hover{background:var(--asphalt-light);}
button:active, .btn:active{transform:translateY(1px);}
button.secondary{background:transparent;color:var(--asphalt);}
button.secondary:hover{background:var(--paper-dim);}
button.amber{background:var(--amber);color:var(--asphalt);border-color:var(--amber-dim);}
button.amber:hover{background:var(--amber-dim);}
button.danger{background:transparent;color:var(--red);border-color:var(--red);}
button.danger:hover{background:#fbeceb;}
button:disabled{opacity:.45;cursor:not-allowed;}
button.small{padding:6px 10px;font-size:.78rem;}
button.full{width:100%;}

input, select, textarea{
  font-family:'Inter',sans-serif;
  font-size:.92rem;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  color:var(--ink);
  width:100%;
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--amber);
  outline-offset:1px;
  border-color:var(--amber-dim);
}
label{
  display:block;
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:4px;
}
.field{margin-bottom:14px;}
.field-row{display:flex;gap:12px;flex-wrap:wrap;}
.field-row > .field{flex:1;min-width:150px;}

/* Road-line divider: the one recurring visual motif, used for section breaks */
.road-divider{
  height:0;
  border-top:3px dashed var(--amber);
  margin:22px 0;
  opacity:.55;
}

.hidden{display:none !important;}

/* ---------- App chrome ---------- */
#appHeader{
  background:var(--asphalt);
  color:var(--paper);
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  border-bottom:4px solid var(--amber);
}
#appHeader .company{
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.5rem;
  font-weight:700;
  color:var(--paper);
  line-height:1.1;
}
#appHeader .company small{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:.68rem;
  font-weight:500;
  color:var(--amber);
  letter-spacing:.04em;
}
#appHeader .who{
  font-size:.82rem;
  color:var(--paper-dim);
  display:flex;
  align-items:center;
  gap:12px;
}
#appHeader .who .role-pill{
  background:var(--amber);
  color:var(--asphalt);
  padding:2px 9px;
  border-radius:20px;
  font-weight:700;
  font-size:.72rem;
}

main{max-width:960px;margin:0 auto;padding:20px 16px 60px;}

.panel{
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--asphalt);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:18px;
}
.panel.accent-amber{border-left-color:var(--amber-dim);}
.panel.accent-green{border-left-color:var(--green);}
.panel.accent-red{border-left-color:var(--red);}

.panel-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:14px;
}
.panel-title h2{font-size:1.35rem;}
.panel-title .hint{font-size:.78rem;color:var(--ink-soft);}

/* ---------- Login / License screens ---------- */
.center-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:var(--asphalt);
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(242,169,59,.08) 38px, rgba(242,169,59,.08) 70px);
}
.auth-card{
  background:var(--paper);
  width:100%;
  max-width:400px;
  padding:32px 28px;
  border-radius:var(--radius);
  border-top:5px solid var(--amber);
}
.auth-card h1{font-size:2rem;margin-bottom:2px;}
.auth-card .tag{color:var(--ink-soft);font-size:.82rem;margin-bottom:24px;}
.error-msg{
  background:#fbeceb;color:var(--red);border:1px solid #e3b8b3;
  padding:9px 11px;border-radius:var(--radius);font-size:.82rem;margin-bottom:14px;
}
.info-msg{
  background:#fff6e6;color:#8a5a10;border:1px solid #eccf9a;
  padding:9px 11px;border-radius:var(--radius);font-size:.82rem;margin-bottom:14px;
}

/* ---------- Tables / lists ---------- */
table{width:100%;border-collapse:collapse;font-size:.88rem;}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);}
th{color:var(--ink-soft);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;}
tr:last-child td{border-bottom:none;}

.entry-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
  margin-bottom:10px;
  background:var(--paper-dim);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.entry-card .meta{font-size:.85rem;}
.entry-card .meta .odometer{color:var(--asphalt);font-weight:600;}
.entry-card .thumb{
  width:44px;height:44px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);
}
.entry-card .gps-link{font-size:.75rem;color:var(--green);}

/* ---------- Stat readouts (odometer style) ---------- */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
  margin:16px 0;
}
.stat{
  background:var(--asphalt);
  color:var(--paper);
  padding:14px 14px 12px;
  border-radius:var(--radius);
}
.stat .label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--amber);margin-bottom:4px;}
.stat .value{font-family:'Roboto Mono',monospace;font-size:1.35rem;font-weight:600;}
.stat .value.negative{color:#f19a8f;}
.stat .value.positive{color:#8fd6ac;}

/* ---------- Vehicle / customer cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.click-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  cursor:pointer;
  background:#fff;
  transition:border-color .12s;
}
.click-card:hover{border-color:var(--amber-dim);}
.click-card .plate{
  display:inline-block;
  font-family:'Roboto Mono',monospace;
  font-weight:600;
  background:var(--paper-dim);
  border:1.5px solid var(--asphalt);
  border-radius:4px;
  padding:3px 8px;
  font-size:.9rem;
  margin-bottom:6px;
}
.click-card .status{font-size:.76rem;color:var(--ink-soft);}
.status.open{color:var(--green);font-weight:600;}

footer.app-footer{
  text-align:center;
  color:var(--ink-soft);
  font-size:.75rem;
  padding:20px;
}

/* ---------- Print report ---------- */
.report{background:#fff;padding:26px;}
.report h1{font-size:1.6rem;}
.report .report-meta{font-size:.85rem;color:var(--ink-soft);margin-bottom:18px;}
.report table{margin-bottom:14px;}
.report .totals-box{
  border:1.5px solid var(--asphalt);
  padding:14px 16px;
  margin-top:10px;
  max-width:340px;
  margin-left:auto;
}
.report .totals-box div{display:flex;justify-content:space-between;font-size:.9rem;padding:3px 0;}
.report .totals-box .grand{font-weight:700;border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-size:1.05rem;}
@media print{
  #appHeader, .no-print{display:none !important;}
  main{max-width:100%;padding:0;}
  .panel{border:none;box-shadow:none;padding:0;}
}

@media (max-width:600px){
  #appHeader{padding:12px 14px;}
  main{padding:14px 10px 50px;}
  .panel{padding:14px;}
}