:root{
  --bg:#0b1020;
  --card:#101936;
  --muted:#9aa4b2;
  --text:#e6e9f0;
  --accent:#14b8a6;
  --primary:#4f46e5;
  --danger:#ef4444;
  --border: #1f2a4a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:linear-gradient(180deg, #0a0f1f 0%, #0d1326 100%);
}

.container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:24px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 22px;
}

nav {
  display: flex;
  gap: 20px;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}

nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}
.brand-logo {
  width: 72px;              /* Increase size */
  height: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.5)); /* Glow effect */
  transition: transform 0.25s ease, filter 0.25s ease;
}
.brand-logo:hover {
  transform: scale(1.08);   /* Slight zoom on hover */
  filter: drop-shadow(0 0 18px rgba(0, 255, 255, 0.7));
}

.brand-title{ font-weight:700; letter-spacing:.2px; }

nav a{
  color:var(--muted); text-decoration:none; margin-left:16px; padding:8px 10px; border-radius:10px;
}
nav a:hover{ color:var(--text); background:rgba(255,255,255,0.06)}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px;
  box-shadow:0 6px 30px rgba(0,0,0,.25);
}
.kpi{ display:flex; align-items:center; justify-content:space-between; padding:18px }
.kpi .label{ color:var(--muted); font-size:14px }
.kpi .value{ font-weight:700; font-size:28px }

.grid{ display:grid; gap:12px }
.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:800px){
  .cols-2, .cols-3 { grid-template-columns:1fr }
}

.input, select.input, textarea.input{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:#0b132b; color:var(--text); outline:none;
}
.input:focus{ border-color:var(--accent); box-shadow: 0 0 0 3px rgba(20,184,166,.15) }

.button{
  border:0; border-radius:12px; padding:10px 14px; cursor:pointer; color:white; background:#2b3456;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.button.primary{ background:var(--primary) }
.button.primary:hover{ filter:brightness(1.05) }
.button.danger{ background:var(--danger) }

.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:left }
.badge{ background:rgba(255,255,255,0.08); padding:4px 8px; border-radius:999px }

.footer{ margin-top:26px; padding-top:20px; border-top:1px solid var(--border); color:var(--muted) }
.muted{ color:var(--muted) }
.helper{ color:var(--muted); font-size:14px }
.soft{ border:0; height:1px; background:var(--border); margin:10px 0 }

body {
  background: radial-gradient(circle at 50% 20%, #0f172a 0%, #0b1120 100%);
}

.card {
  background: #111c3a;
  border-radius: 20px;
  border: 1px solid #1e293b;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.button.primary {
  background: linear-gradient(90deg, #4f46e5, #14b8a6);
  font-weight: 600;
}

h1, h2 {
  color: #e2e8f0;
}
.value { font-size: 28px; font-weight: 700; }
.badge { background: rgba(20,184,166,.15); color: #99f6e4; padding: 4px 10px; border-radius: 999px; }

/* Centered form actions spanning full grid */
.form-actions {
  grid-column: 1 / -1;         /* spans all columns in .cols-3 */
  display: flex;
  justify-content: center;     /* center horizontally */
  padding-top: 6px;
}

/* Wider page to fit one-line rows better */
.container {
  max-width: 1280px;           /* was 1100px */
}

/* Compact table: keep cells on one line and align nicely */
.table.compact th,
.table.compact td {
  white-space: nowrap;
  vertical-align: middle;
}

/* Nice cyan details button */
.button.info {
  background: var(--accent);
  color: #062b28;
  font-weight: 600;
}
.button.info:hover { filter: brightness(1.05); }

/* Optional: ensure actions in a row don’t wrap oddly */
.table.compact td:last-child {
  white-space: nowrap;
}

.field.centered {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 10px;
}
.field.centered .button {
  padding: 12px 24px;
  font-size: 16px;
}


/* Buttons */
.button.info{ background:var(--accent); color:#062b28; font-weight:600; }
.button.info:hover{ filter:brightness(1.05); }

/* Keep cells from exploding width, but allow truncation */
.table.vehicles{
  width:100%;
  table-layout:fixed;         /* critical: fixed layout lets widths work */
  border-collapse:collapse;
}

.nowrap{ white-space:nowrap; }
.truncate{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:bottom;
}

/* Desktop column widths sum to 100% */
.table.vehicles th.col-plate,  .table.vehicles td.col-plate{ width:10%; }
.table.vehicles th.col-mm,     .table.vehicles td.col-mm   { width:20%; }
.table.vehicles th.col-engine, .table.vehicles td.col-engine{ width:10%; }
.table.vehicles th.col-leasing,.table.vehicles td.col-leasing{ width:12%; }
.table.vehicles th.col-driver, .table.vehicles td.col-driver{ width:23%; }
.table.vehicles th.col-interval,.table.vehicles td.col-interval{ width:10%; }
.table.vehicles th.col-last,   .table.vehicles td.col-last { width:8%;  }
.table.vehicles th.col-actions,.table.vehicles td.col-actions{ width:7%; }

/* Make long text actually truncate inside fixed cells */
.table.vehicles td.col-mm .truncate,
.table.vehicles td.col-leasing .truncate,
.table.vehicles td.col-driver .truncate{
  max-width:100%;
}

/* Remove accidental horizontal scroll from the card */
.card{ overflow-x:hidden; }

/* --- Responsive: progressively hide low-priority columns --- */
@media (max-width: 1024px){
  .table.vehicles th.col-leasing, .table.vehicles td.col-leasing { display:none; }
  .table.vehicles th.col-interval,.table.vehicles td.col-interval{ display:none; }
}

@media (max-width: 820px){
  .table.vehicles th.col-engine,  .table.vehicles td.col-engine  { display:none; }
  .table.vehicles th.col-last,    .table.vehicles td.col-last    { display:none; }
  /* give a bit more space to driver and model on tablets */
  .table.vehicles th.col-mm, .table.vehicles td.col-mm { width:35%; }
  .table.vehicles th.col-driver, .table.vehicles td.col-driver { width:45%; }
}

@media (max-width: 560px){
  /* On phones: keep just Plate, Make/Model, Driver, Actions */
  .table.vehicles th.col-mm, .table.vehicles td.col-mm { width:45%; }
  .table.vehicles th.col-driver, .table.vehicles td.col-driver { width:40%; }
}

/* Center the single action button row nicely if it wraps */
.table.vehicles td.col-actions > div{ flex-wrap:wrap; justify-content:flex-end; }

.field.centered{ grid-column:1 / -1; text-align:center; margin-top:10px; }
.field.centered .button{ padding:12px 24px; font-size:16px; }

.full-row { grid-column: 1 / -1; }          /* span all columns inside .grid */
.actions-center { display:flex; justify-content:center; margin-top:10px; }

/* Accent Details button */
.button.info { background: var(--accent); color: #062b28; font-weight: 600; }
.button.info:hover { filter: brightness(1.05); }

/* Vehicles table: fixed layout + truncation + no horizontal scroll */
.table.vehicles { width: 100%; table-layout: fixed; border-collapse: collapse; }
.table.vehicles th, .table.vehicles td { vertical-align: middle; }
.nowrap { white-space: nowrap; }
.ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep action buttons on one line; allow wrap on very small screens */
.row-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: nowrap; }

/* Desktop column widths that sum ~100% */
.table.vehicles .col-plate   { width: 10%; }
.table.vehicles .col-mm      { width: 22%; }
.table.vehicles .col-engine  { width: 10%; }
.table.vehicles .col-leasing { width: 12%; }
.table.vehicles .col-driver  { width: 24%; }
.table.vehicles .col-interval{ width: 10%; }
.table.vehicles .col-last    { width: 7%;  }
.table.vehicles .col-actions { width: 5%;  }

/* Prevent the card from adding a horizontal scrollbar */
.card { overflow-x: hidden; }

/* --- Responsive pruning (no slider on phones) --- */
@media (max-width: 1100px){
  .table.vehicles .col-leasing { display:none; }
  .table.vehicles .col-interval{ display:none; }
  .table.vehicles .col-mm      { width: 28%; }
  .table.vehicles .col-driver  { width: 36%; }
}

@media (max-width: 850px){
  .table.vehicles .col-engine  { display:none; }
  .table.vehicles .col-last    { display:none; }
  .table.vehicles .col-mm      { width: 36%; }
  .table.vehicles .col-driver  { width: 44%; }
  .row-actions { flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 560px){
  .table.vehicles .col-plate   { width: 22%; }
  .table.vehicles .col-mm      { width: 48%; }
  .table.vehicles .col-driver  { width: 30%; }
}


/* Small buttons for table actions */
.button.sm { padding: 6px 10px; font-size: 13px; border-radius: 10px; }

/* Accent for Details button */
.button.info { background: var(--accent); color: #062b28; font-weight: 600; }
.button.info:hover { filter: brightness(1.05); }

/* Vehicles table: fixed layout + truncation */
.table.vehicles { width:100%; table-layout:fixed; border-collapse:collapse; }
.table.vehicles th, .table.vehicles td { vertical-align:middle; }
.nowrap { white-space:nowrap; }
.ellipsis { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Keep action buttons on one line */
.row-actions { display:inline-flex; gap:6px; align-items:center; flex-wrap:nowrap; justify-content:flex-end; }

/* Column widths (sum ~100%) */
.table.vehicles .col-plate    { width:10%; }
.table.vehicles .col-mm       { width:22%; }
.table.vehicles .col-engine   { width:10%; }
.table.vehicles .col-leasing  { width:12%; }
.table.vehicles .col-driver   { width:26%; } /* now username only, so narrower works */
.table.vehicles .col-interval { width:10%; }
.table.vehicles .col-last     { width:5%;  }
.table.vehicles .col-actions  { width:5%;  }

/* No horizontal scrollbar in the card */
.card { overflow-x:hidden; }

/* Responsive pruning to keep it tidy on phones */
@media (max-width: 1100px){
  .table.vehicles .col-leasing, .table.vehicles .col-interval { display:none; }
  .table.vehicles .col-driver { width:34%; }
}
@media (max-width: 850px){
  .table.vehicles .col-engine, .table.vehicles .col-last { display:none; }
  .table.vehicles .col-mm { width:36%; }
  .table.vehicles .col-driver { width:44%; }
}
@media (max-width: 560px){
  .table.vehicles .col-plate { width:22%; }
  .table.vehicles .col-mm { width:48%; }
  .table.vehicles .col-driver { width:30%; }
}

/* Vehicle plate link color */
.table.vehicles a {
  color: #22d3ee;           /* brighter cyan/turquoise */
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.table.vehicles a:hover {
  color: #f9ba67;           /* lighter on hover */
  text-decoration: underline;
}

/* Force visible, theme-matching color for vehicle plate links */
.table.vehicles td a,
.table.vehicles td a:link,
.table.vehicles td a:visited {
  color: #22d3ee !important;        /* bright cyan accent */
  font-weight: 600;
  text-decoration: none;
}

.table.vehicles td a:hover,
.table.vehicles td a:focus {
  color: #f9ba67 !important;        /* lighter cyan on hover */
  text-decoration: underline;
}