*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0b0d10;
  --panel:#12151a;
  --panel-2:#181c22;
  --raised:#1e232a;
  --border:#232830;
  --border-hi:#323944;
  --accent:#3ecfb2;
  --accent-soft:rgba(62,207,178,.12);
  --accent-text:#0b0d10;
  --text:#e6e9ed;
  --muted:#8b95a1;
  --faint:#5c6470;
  --danger:#f2685c;
  --danger-bg:rgba(242,104,92,.1);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --radius:10px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}

html{background:var(--bg)}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  min-height:100vh;
  padding-bottom:64px;
  font-size:15px;
}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:760px;margin:0 auto;
  padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{
  color:var(--accent);
  display:flex;
}
.brand-name{font-weight:700;font-size:1.02rem;letter-spacing:-0.01em}
.brand-tag{font-size:0.78rem;color:var(--faint)}

.container{max-width:760px;margin:0 auto;padding:28px 20px 0}

/* ---------- Panels ---------- */
.panel, .card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:16px;
}

.panel-title{
  font-size:1.05rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:5px;
}
.panel-title.small{font-size:0.95rem;margin-bottom:14px}
.panel-hint{color:var(--muted);font-size:0.86rem;margin-bottom:16px}

label{
  display:block;font-weight:600;margin-bottom:6px;
  font-size:0.8rem;color:var(--muted);
}

/* ---------- Search ---------- */
.search-wrap{position:relative}
.search-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--faint);pointer-events:none;
}
.search-wrap input#type-search{padding-left:40px}

.search-wrap input,
.filters-row input,
.filters-row select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border-hi);
  border-radius:8px;
  font-size:0.94rem;
  font-family:var(--sans);
  outline:0;
  background:var(--panel-2);
  color:var(--text);
  transition:border-color .12s, box-shadow .12s;
}
.search-wrap input::placeholder,
.filters-row input::placeholder{color:var(--faint)}
.search-wrap input:focus,
.filters-row input:focus,
.filters-row select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

.dropdown{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  max-height:300px;overflow-y:auto;
  border:1px solid var(--border-hi);
  border-radius:10px;
  background:var(--raised);
  z-index:10;display:none;
  box-shadow:0 20px 44px rgba(0,0,0,.5);
  padding:6px;
}
.dropdown.open{display:block}
.dropdown-item{
  padding:10px 12px;cursor:pointer;font-size:0.9rem;
  border-radius:6px;
  color:var(--text);
}
.dropdown-item + .dropdown-item{margin-top:1px}
.dropdown-item{display:flex;align-items:flex-start;gap:9px}
.dropdown-item .check{
  width:16px;flex-shrink:0;color:var(--accent);font-size:0.85rem;
  line-height:1.5;
}
.dropdown-item.selected{background:var(--accent-soft)}
.dropdown-item.selected .dropdown-item-text{color:var(--accent)}
.dropdown-item:hover,.dropdown-item.highlighted{background:var(--accent-soft)}
.dropdown-item:hover .dropdown-item-text,.dropdown-item.highlighted .dropdown-item-text{color:var(--accent)}
.dropdown-item .meta{font-size:0.74rem;color:var(--faint);margin-left:8px}
.dropdown-item:hover .meta,.dropdown-item.highlighted .meta{color:var(--muted)}

.selected-value{
  padding-top:14px;margin-top:2px;
  display:flex;flex-wrap:wrap;gap:8px;
}
.selected-value:empty{display:none;padding-top:0}

.type-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid rgba(62,207,178,.35);
  border-radius:999px;
  padding:5px 6px 5px 12px;
  font-size:0.83rem;font-weight:600;
}
.chip-remove{
  appearance:none;border:0;background:transparent;color:var(--accent);
  width:18px;height:18px;border-radius:50%;
  font-size:0.95rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s;
}
.chip-remove:hover{background:rgba(62,207,178,.25)}

/* ---------- Loading / error ---------- */
.spinner{
  display:inline-block;width:15px;height:15px;
  border:2px solid var(--border-hi);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
  vertical-align:middle;margin-right:9px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{
  display:flex;align-items:center;
  color:var(--muted);font-size:0.88rem;
  padding:8px 4px 16px;
}

.error{
  padding:14px 16px;background:var(--danger-bg);color:var(--danger);
  border:1px solid rgba(242,104,92,.3);
  border-radius:var(--radius);font-size:0.88rem;
  margin-bottom:16px;
}

/* ---------- Empty state ---------- */
.empty-state{
  text-align:center;
  padding:48px 20px;
  color:var(--faint);
}
.empty-glyph{display:inline-flex;margin-bottom:12px;color:var(--border-hi)}
.empty-state p{font-size:0.9rem;max-width:36ch;margin:0 auto}

/* ---------- Results ---------- */
.results-header{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.results-header h2{
  font-size:1.1rem;font-weight:700;letter-spacing:-0.01em;
}
.status-bar{
  font-size:0.8rem;color:var(--muted);
}

.operator-group{margin-bottom:8px}
.operator-group:last-child{margin-bottom:0}

.operator-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 14px;background:var(--panel-2);
  border-radius:8px;cursor:pointer;user-select:none;
  border:1px solid var(--border);
  transition:background .12s, border-color .12s;
}
.operator-header:hover{background:var(--raised);border-color:var(--border-hi)}
.operator-name{font-weight:600;font-size:0.92rem;color:var(--text)}
.operator-count{
  background:var(--accent-soft);
  color:var(--accent);
  border-radius:999px;
  padding:3px 10px;font-size:0.78rem;font-weight:700;
  min-width:2.2em;text-align:center;
}

.vehicle-list{
  display:none;
  padding:6px 4px 4px;
}
.vehicle-list.open{display:block}

/* Grid layout keeps every row aligned regardless of which optional
   fields (garage, notes, livery) are present for a given vehicle. */
.vehicle-item{
  display:grid;
  grid-template-columns: 108px 56px 1fr 34px 56px;
  align-items:center;
  column-gap:12px;
  padding:9px 10px;
  font-size:0.85rem;
  color:var(--text);
  border-bottom:1px solid var(--border);
}
.vehicle-item:last-child{border-bottom:0}

.vehicle-item .reg{
  font-family:var(--mono);
  font-weight:700;
  font-size:0.78rem;
  letter-spacing:0.03em;
  color:var(--bg);
  background:#ffbf00;
  border-radius:4px;
  padding:4px 7px;
  text-align:center;
  justify-self:start;
}

.vehicle-item .fleet{color:var(--muted);font-size:0.82rem}

.vehicle-item .garage{
  color:var(--muted);
  font-size:0.82rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  grid-column:3;
}
.vehicle-item .garage::before{content:none}

.vehicle-item .notes{
  color:var(--faint);font-size:0.78rem;
  grid-column:3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vehicle-item .garage ~ .notes{ grid-column:3; margin-top:2px; }

.livery-swatch{
  display:block;width:45px;
  aspect-ratio: 24/16;
  border:1px solid var(--border-hi);border-radius:3px;
  grid-column:4;justify-self:center;
}

.view-link{
  color:var(--muted);text-decoration:none;font-size:0.78rem;
  border:1px solid var(--border-hi);
  border-radius:6px;padding:5px 10px;
  text-align:center;
  grid-column:5;
  transition:color .12s, border-color .12s, background .12s;
}
.view-link:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}

.toggle-icon{
  font-size:0.6rem;margin-right:10px;color:var(--faint);
  display:inline-block;transition:transform .15s;
}

/* ---------- Filters row ---------- */
.filters-row{display:flex;gap:14px;flex-wrap:wrap}
.filters-row > .field{flex:1;min-width:180px}

/* scrollbars */
.dropdown::-webkit-scrollbar{width:8px}
.dropdown::-webkit-scrollbar-track{background:transparent}
.dropdown::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:4px}

/* focus visibility for keyboard nav */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [onclick]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* ---------- Responsive ---------- */
@media (max-width:560px){
  .vehicle-item{
    grid-template-columns: 92px 1fr 30px;
    row-gap:4px;
  }
  .vehicle-item .fleet{grid-column:2;justify-self:start}
  .vehicle-item .garage{grid-column:1 / span 3;order:5;font-size:0.78rem}
  .vehicle-item .notes{grid-column:1 / span 3;order:6}
  .vehicle-item .livery-swatch{grid-column:3;grid-row:1}
  .view-link{grid-column:1/span 3;order:7;justify-self:start;margin-top:2px}
}