/* =========================================================================
   REGIONAL AUTOSELECTIONS LTD — ADMIN SHELL & COMPONENTS
   Loaded after base.css on every page that has the sidebar.
   Reads tokens from base.css; defines none of its own.
   -------------------------------------------------------------------------
   1  Loader
   2  Header
   3  Sidebar, drawer & overlay
   4  Main layout
   5  Page heading
   6  Buttons
   7  Stats
   8  Panels
   9  Toolbar, search & selects
   10 Filters (vehicle listings)
   11 Form fields
   12 Tables
   13 States: loading / messages / empty
   14 Chips, badges & the status palette
   15 Generic modal, tabs & segmented filters
   16 Toasts
   17 Vehicle grid & cards
   18 Listing extras: pagination, drag order, banner
   19 Responsive
   20 Hover-less devices & print
   ========================================================================= */


/* ---------- 1. LOADER ---------- */
#loader{
  position:fixed;inset:0;z-index:2000;
  display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;
  background:linear-gradient(160deg,#0a1f35,#12395c 55%,#0a1f35);
  transition:opacity .3s ease,visibility .3s ease;
}
#loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.loader-mark{display:flex;justify-content:center;gap:6px}
.loader-mark span{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:loaderBounce .7s infinite alternate}
.loader-mark span:nth-child(2){animation-delay:.14s}
.loader-mark span:nth-child(3){animation-delay:.28s}
#loader p{color:#c3d9e8;font-size:var(--fs-micro);letter-spacing:.24em;font-weight:700}
@keyframes loaderBounce{to{transform:translateY(-7px);opacity:.35}}


/* ---------- 2. HEADER ---------- */
.header{
  position:sticky;top:0;z-index:100;
  height:calc(var(--head-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:#ffffffb8;
  backdrop-filter:blur(var(--blur)) saturate(165%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(165%);
  border-bottom:1px solid var(--line);
}
.nav,.wrap{width:100%}
.nav{
  height:var(--head-h);
  display:flex;align-items:center;gap:10px;
  padding-inline:var(--gutter);
}

.brand{display:flex;align-items:center;min-width:0}
.brand img{display:none}
.brand span{
  display:flex;align-items:baseline;gap:6px;min-width:0;
  font-size:15px;font-weight:700;letter-spacing:-.03em;white-space:nowrap;
}
.brand b{color:var(--gold);min-width:0;overflow:hidden;text-overflow:ellipsis}
.brand em{
  flex-shrink:0;align-self:center;
  font-style:normal;font-weight:700;font-size:var(--fs-micro);letter-spacing:.16em;
  color:var(--muted);padding:2px 7px;border:1px solid var(--line);border-radius:var(--pill);
  background:var(--glass);
}

.admin-label{
  margin-left:auto;flex-shrink:0;
  display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 12px;border-radius:var(--pill);
  background:var(--green-soft);color:var(--green);border:1px solid #0f8a4326;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.1em;white-space:nowrap;
}

.menu{
  display:none;place-items:center;flex-shrink:0;
  width:var(--tap);height:var(--tap);border-radius:var(--pill);
  border:1px solid var(--line);background:var(--glass-2);color:var(--ink);font-size:15px;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.menu:hover{border-color:var(--gold-line);color:var(--gold);background:#fff}


/* ---------- 3. SIDEBAR, DRAWER & OVERLAY ---------- */
.admin-layout{display:flex;align-items:flex-start;min-height:calc(100dvh - var(--head-h))}
#adminNav{flex:0 0 auto}

.sidebar{
  position:fixed;left:0;top:calc(var(--head-h) + env(safe-area-inset-top));z-index:80;
  width:var(--side-w);height:calc(100dvh - var(--head-h) - env(safe-area-inset-top));
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:12px 10px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#0a1f35,#0e2b45 55%,#0a1f35);
  color:#fff;border-right:1px solid #ffffff14;
  scrollbar-color:#ffffff2e transparent;
}
.sidebar::-webkit-scrollbar-thumb{background:#ffffff2e}

.side-head{
  display:none;align-items:center;justify-content:space-between;gap:8px;
  padding:2px 8px 12px;margin-bottom:10px;border-bottom:1px solid #ffffff1f;
}
.side-head span,.side-title{display:block;font-size:var(--fs-micro);letter-spacing:.16em;color:#8fabbd;font-weight:700}
.side-head strong{display:block;margin-top:2px;font-size:15px;letter-spacing:-.02em}
.side-head button{
  width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;
  border-radius:var(--pill);color:#fff;font-size:16px;
  transition:background .15s ease;
}
.side-head button:hover{background:#ffffff1f}

.sidebar nav{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px}

.side-link{
  position:relative;width:100%;min-height:38px;
  display:flex;align-items:center;gap:10px;padding:0 34px 0 11px;
  color:#bcd0dc;background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:600;text-align:left;line-height:1.25;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.side-link i{width:16px;text-align:center;color:#8fabbd;font-size:13px;transition:color .15s ease}
.side-link:hover{background:#ffffff14;color:#fff}
.side-link:hover i{color:var(--gold)}
.side-link.active{
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  color:var(--gold-ink);font-weight:700;box-shadow:0 4px 14px #f7941d3d;
}
.side-link.active i{color:var(--gold-ink)}
.side-link:focus-visible{outline-offset:-2px}

.side-link.side-website{
  min-height:42px;margin-bottom:8px;color:#fff;font-weight:700;
  background:linear-gradient(180deg,#ffffff1f,#ffffff0d);border-color:#f7941d66;
}
.side-link.side-website i{color:var(--gold)}
.side-link.side-website:hover{background:#f7941d29;border-color:var(--gold)}
.side-link.side-website.active{border-color:transparent}
.side-link.side-website.active i{color:var(--gold-ink)}

.nav-badge{
  position:absolute;top:50%;right:9px;transform:translateY(-50%);
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--red);color:#fff;font-size:var(--fs-micro);font-weight:700;line-height:1;
  box-shadow:0 0 0 2px #0a1f35;
}
.side-link.active .nav-badge{box-shadow:none}

.side-bottom{margin-top:auto;padding-top:12px;border-top:1px solid #ffffff1f;display:flex;flex-direction:column;gap:2px}
.side-bottom .side-title{padding:0 11px 6px}
#logoutBtn:hover{background:#e11d4826;color:#ffd7df}
#logoutBtn:hover i{color:#ff8fa7}

.overlay{display:none}


/* ---------- 4. MAIN LAYOUT ---------- */
.main{
  width:calc(100% - var(--side-w));min-width:0;
  margin-left:var(--side-w);
  padding:var(--gutter);
  padding-bottom:calc(var(--gutter) + env(safe-area-inset-bottom));
}
body.locked{overflow:hidden}


/* ---------- 5. PAGE HEADING ---------- */
.page-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:14px;
}
.page-heading>div:first-child{min-width:0}
.page-heading h1{font-size:clamp(21px,2.4vw,27px);letter-spacing:-.04em;margin:6px 0 4px}
.page-heading h1 strong{color:var(--gold)}
.page-heading p{color:var(--muted);font-size:var(--fs-sm);max-width:66ch}
.heading-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--green);font-size:var(--fs-micro);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.eyebrow b{width:16px;height:2px;background:var(--gold);border-radius:var(--pill);flex-shrink:0}
.eyebrow.dark{color:var(--muted)}


/* ---------- 6. BUTTONS ----------
   One geometry: pill, 38px, 12px bold label, icon gap 7px.
   primary   gold gradient           main action
   outline   white glass + border    secondary
   ghost     no chrome               tertiary
   danger    soft red                destructive
   success   solid green             approve / save state */
.primary-btn,.outline-btn,.ghost-btn,.danger-btn,.delete-btn,.success-btn,
.cancel-btn,.save-btn,.primary-action,.secondary-action,.secondary-btn,.delete-action,
.download-btn,.mini-btn,.row-action{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;
  min-height:var(--btn-h);padding:0 16px;
  border:1px solid transparent;border-radius:var(--pill);
  font-size:var(--fs-sm);font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s var(--ease),filter .16s ease,opacity .16s ease;
}

.primary-btn,.save-btn,.primary-action{
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  border-color:#e0831288;color:var(--gold-ink);
  box-shadow:0 4px 14px #f7941d3d;
}
.primary-btn:hover,.save-btn:hover,.primary-action:hover{box-shadow:0 8px 20px #f7941d55;transform:translateY(-1px)}
.primary-btn:active,.save-btn:active,.primary-action:active{transform:none}

.outline-btn,.cancel-btn,.secondary-action,.secondary-btn,.download-btn,.mini-btn{
  background:var(--glass-2);border-color:var(--line);color:var(--ink);
}
.outline-btn{color:var(--muted)}
.outline-btn:hover,.cancel-btn:hover,.secondary-action:hover,.secondary-btn:hover,.download-btn:hover,.mini-btn:hover{
  border-color:var(--gold-line);color:var(--ink);background:#fff;box-shadow:var(--sh-sm);
}
.outline-btn.active{border-color:var(--gold-line);background:var(--gold-soft);color:var(--ink)}
.download-btn i,.secondary-action i{color:var(--gold)}

.ghost-btn{background:transparent;color:var(--muted)}
.ghost-btn:hover{background:var(--line-2);color:var(--ink)}

.danger-btn,.delete-btn,.delete-action{
  background:var(--red-soft);border-color:#e11d4838;color:var(--red);
}
.danger-btn:hover,.delete-btn:hover,.delete-action:hover{background:#fde3e9;border-color:#e11d4870}

.success-btn{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 4px 14px #0f8a4333}
.success-btn:hover{background:var(--green-2);border-color:var(--green-2)}

.mini-btn,.row-action{min-height:30px;padding:0 11px;font-size:var(--fs-xs)}
.row-action{background:var(--tint);border-color:var(--line);color:var(--ink)}
.row-action:hover{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}

.icon-btn{
  width:var(--btn-h);height:var(--btn-h);flex-shrink:0;
  display:inline-grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--tint);color:var(--ink);font-size:13px;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.icon-btn:hover:not(:disabled){border-color:var(--gold-line);background:#fff}
.icon-btn.danger:hover:not(:disabled){border-color:#e11d4855;background:var(--red-soft);color:var(--red)}
.icon-btn:disabled{opacity:.35;cursor:not-allowed}

.link-btn{color:var(--gold-text);font-weight:700;font-size:var(--fs-xs)}
.link-btn:hover{color:var(--ink);text-decoration:underline}

:is(.primary-btn,.outline-btn,.ghost-btn,.danger-btn,.delete-btn,.success-btn,.cancel-btn,.save-btn,
    .primary-action,.secondary-action,.secondary-btn,.delete-action,.download-btn,.mini-btn,.row-action):disabled,
:is(.primary-btn,.outline-btn):is([aria-disabled="true"],.disabled){
  opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;filter:none;
}

/* quick-filter counters on the listings toolbar */
#filterCount{color:var(--gold-text);font-weight:700}
.ship-count,.sold-count{
  min-width:20px;padding:2px 6px;border-radius:var(--pill);
  font-size:var(--fs-micro);font-weight:700;line-height:1.3;text-align:center;
}
.ship-count{background:var(--blue-soft);color:var(--blue)}
.sold-count{background:var(--red-soft);color:var(--red)}
#onShipToggle.active{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
#onShipToggle.active .ship-count{background:var(--blue);color:#fff}
#soldToggle.active{border-color:var(--red);background:var(--red-soft);color:var(--red)}
#soldToggle.active .sold-count{background:var(--red);color:#fff}


/* ---------- 7. STATS ---------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;margin-bottom:14px;
}
.stat-card{
  display:flex;align-items:center;gap:11px;min-width:0;
  padding:11px 13px;
  background:var(--glass-2);
  border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  box-shadow:var(--sh-xs);
  transition:transform .2s var(--ease),box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh);background:#fffffff2}
.stat-card>div:last-child{min-width:0}
.stat-icon{
  width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;
  border-radius:var(--r-sm);background:var(--gold-soft);color:var(--gold);font-size:14px;
}
.stat-icon.green{background:var(--green-soft);color:var(--green)}
.stat-icon.gold{background:var(--amber-soft);color:var(--amber)}
.stat-icon.red{background:var(--red-soft);color:var(--red)}
.stat-icon.purple{background:var(--purple-soft);color:var(--purple)}
.stat-icon.blue{background:var(--blue-soft);color:var(--blue)}
.stat-card span{display:block;color:var(--muted);font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-card strong{display:block;margin-top:1px;font-size:19px;line-height:1.15;letter-spacing:-.03em;white-space:nowrap}


/* ---------- 8. PANELS ---------- */
.listing-panel,.panel,.summary-panel,.insight-card,.form-panel,.table-panel{
  width:100%;min-width:0;
  background:var(--glass-2);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--sh-sm);
}
.listing-panel{scroll-margin-top:calc(var(--head-h) + 12px)}
.main>.listing-panel+.listing-panel{margin-top:14px}

.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-head>div:first-child{min-width:0}
.panel-head h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:17px}
.panel-head p{margin-top:4px;color:var(--muted);font-size:var(--fs-sm);max-width:68ch}
.panel-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}
.spread{display:flex;align-items:center;justify-content:space-between;gap:10px}
.spread>div{min-width:0}

.count-pill{
  display:inline-flex;align-items:center;flex-shrink:0;
  padding:3px 10px;border-radius:var(--pill);
  background:var(--tint);border:1px solid var(--line-2);
  color:var(--muted);font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
}


/* ---------- 9. TOOLBAR, SEARCH & SELECTS ---------- */
.toolbar{
  display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:minmax(150px,190px);
  gap:8px;margin-bottom:14px;
}
.search{
  min-height:var(--field-h);min-width:0;
  display:flex;align-items:center;gap:10px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--pill);background:var(--tint);
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.search:focus-within{border-color:var(--gold-line);background:#fff;box-shadow:var(--ring)}
.search i{color:var(--gold);font-size:13px}
.search input{flex:1;width:100%;min-width:0;height:calc(var(--field-h) - 2px);border:0;outline:0;background:transparent}
.search input::-webkit-search-cancel-button{cursor:pointer}

select{
  width:100%;min-width:0;min-height:var(--field-h);padding:0 36px 0 14px;
  border:1px solid var(--line);border-radius:var(--pill);
  color:var(--ink);background:var(--tint) var(--chevron) no-repeat right 14px center;
  appearance:none;-webkit-appearance:none;outline:0;cursor:pointer;text-overflow:ellipsis;
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
}
select:hover{border-color:var(--line-3)}
select:focus{border-color:var(--gold-line);background-color:#fff;box-shadow:var(--ring)}
select:disabled{opacity:.55;cursor:not-allowed}
select[multiple]{min-height:120px;padding:8px;background-image:none;border-radius:var(--r-sm)}


/* ---------- 10. FILTERS (vehicle listings) ---------- */
.admin-filters{
  display:none;
  margin:0 0 14px;padding:14px;
  background:#ffffffb3;border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
}
.admin-filters.open{display:block;animation:dropIn .18s var(--ease)}

.filter-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.filter-top strong{font-size:var(--fs-md)}
.filter-top button{
  min-height:30px;padding:0 12px;border-radius:var(--pill);
  color:var(--red);font-size:var(--fs-xs);font-weight:700;
  transition:background .15s ease;
}
.filter-top button:hover{background:var(--red-soft)}

.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.filter-group{min-width:0}
.filter-group>label:first-child,.range-group>label{
  display:block;margin-bottom:6px;
  font-size:var(--fs-micro);font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
}
.filter-group>div{max-height:156px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}

.check-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:32px;padding:4px 0;cursor:pointer;
  border-bottom:1px solid var(--line-2);font-size:var(--fs-sm);
}
.check-row:last-child{border-bottom:0}
.check-row span{display:flex;align-items:center;gap:8px;min-width:0}
.check-row span:not(:has(input)){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.check-row small{flex-shrink:0;color:var(--faint);font-size:var(--fs-micro);font-weight:700}
.filter-none{font-size:var(--fs-xs);color:var(--faint)}

.range-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.range-group>div{display:flex;justify-content:space-between;gap:8px;margin-bottom:2px;font-size:var(--fs-xs);font-weight:700;color:var(--green)}
.range-group input[type="range"]{
  display:block;width:100%;height:20px;margin:6px 0;
  appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;
}
.range-group input[type="range"]::-webkit-slider-runnable-track{height:4px;border-radius:var(--pill);background:#0f2a4524}
.range-group input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;margin-top:-7px;border-radius:50%;
  background:var(--gold);border:3px solid #fff;box-shadow:0 2px 6px #0f2a4540;
}
.range-group input[type="range"]::-moz-range-track{height:4px;border-radius:var(--pill);background:#0f2a4524}
.range-group input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--gold);border:3px solid #fff;box-shadow:0 2px 6px #0f2a4540;
}


/* ---------- 11. FORM FIELDS ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.form-grid .span-2,.form-grid .full,.field.full{grid-column:1/-1}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.form-label,.form-grid>label{
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.form-grid>label{display:flex;flex-direction:column;gap:6px}
.field .hint,.hint{font-size:var(--fs-xs);color:var(--muted)}
.field .err{font-size:var(--fs-xs);color:var(--red);font-weight:600}

input:is([type="text"],[type="email"],[type="password"],[type="number"],[type="tel"],[type="url"],
         [type="date"],[type="datetime-local"],[type="time"],[type="month"]),
input:not([type]),
input[type="search"],
textarea{
  width:100%;min-width:0;min-height:var(--field-h);padding:0 13px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--tint);color:var(--ink);outline:0;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
textarea{display:block;min-height:96px;padding:11px 13px;line-height:1.55;resize:vertical}
.search input{min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
input:focus,textarea:focus{border-color:var(--gold-line);background:#fff;box-shadow:var(--ring)}
.search input:focus{box-shadow:none;background:transparent}
input:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
input[readonly]{background:var(--tint-2)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#e11d4880;background:#fff6f8}

/* toggle switch (manage page and any future settings) */
.switch-field{position:relative;display:flex;align-items:center;gap:11px;min-height:var(--tap);cursor:pointer}
.switch-field input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.switch{position:relative;flex-shrink:0;width:42px;height:24px;border-radius:var(--pill);background:#c6d2dc;transition:background .16s ease}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px #0f2a4540;transition:transform .16s var(--ease);
}
.switch-field input:checked+.switch{background:var(--green)}
.switch-field input:checked+.switch::after{transform:translateX(18px)}
.switch-field input:focus-visible+.switch{outline:2px solid var(--gold);outline-offset:2px}
.switch-text strong{display:block;font-size:var(--fs-sm)}
.switch-text small{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--muted)}

/* money input: "KES | 1,000" */
.money-input{display:flex;min-height:var(--field-h);overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.money-input:focus-within{border-color:var(--gold-line);box-shadow:var(--ring)}
.money-input>span{
  display:flex;align-items:center;flex-shrink:0;padding:0 12px;
  background:var(--tint);border-right:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
}
.money-input input,.money-input input:focus{
  flex:1;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-weight:700;
}


/* ---------- 12. TABLES ---------- */
.table-wrap{
  width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
}
.table-wrap table,table.data{width:100%;font-size:var(--fs-sm)}
.table-wrap thead th{
  position:sticky;top:0;z-index:1;
  padding:10px 12px;text-align:left;white-space:nowrap;
  background:var(--tint);border-bottom:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.table-wrap tbody td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody tr{transition:background .12s ease}
.table-wrap tbody tr:hover{background:var(--tint)}
.table-wrap td strong{display:block;font-size:var(--fs)}
.table-wrap td small{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-xs)}
.amount{font-weight:700;color:var(--green);white-space:nowrap}


/* ---------- 13. STATES ---------- */
.loading{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:40px 14px;color:var(--muted);font-size:var(--fs);font-weight:600;text-align:center;
}
.loading i{color:var(--gold)}

/* messages: .error / .success / .notice / .message */
.error,.success,.message,.notice{
  border-radius:var(--r-sm);padding:11px 14px;margin-bottom:12px;
  font-size:var(--fs);font-weight:600;line-height:1.5;border:1px solid transparent;
}
.error,.success,.message{display:none}
.error.active,.success.active,.message.active{display:block;animation:dropIn .18s var(--ease)}
.error,.message.error{background:#fff1f3;color:var(--red-text);border-color:#fecdd3}
.success,.message.success{background:#ecfbf2;color:#0b6b34;border-color:#0f8a4333}
.notice{background:var(--blue-soft);color:#1d4ed8;border-color:#2563eb2e}
.error a,.success a,.notice a{font-weight:700;text-decoration:underline;text-underline-offset:2px}

.empty{display:none;text-align:center;padding:44px 14px;color:var(--muted)}
.empty>div{
  width:52px;height:52px;margin:0 auto 12px;display:grid;place-items:center;
  border-radius:var(--r);background:var(--gold-soft);color:var(--gold);font-size:19px;
}
.empty h3{font-size:15px;color:var(--ink)}
.empty p{margin:4px auto 14px;font-size:var(--fs-sm);max-width:52ch}

.empty-inline{
  display:none;align-items:center;justify-content:center;gap:10px;
  padding:34px 16px;color:var(--muted);font-size:var(--fs);text-align:center;
}
.empty-inline i{color:var(--gold)}

.empty-block{
  padding:34px 14px;text-align:center;color:var(--muted);
  border:1.5px dashed var(--line-3);border-radius:var(--r);background:var(--tint);
}
.empty-block.small{padding:24px 12px}
.empty-block i{display:block;margin-bottom:8px;font-size:20px;color:var(--gold)}
.empty-block h3{margin-bottom:3px;font-size:var(--fs-md);color:var(--ink)}
.empty-block p{font-size:var(--fs-sm)}


/* ---------- 14. CHIPS, BADGES & THE STATUS PALETTE ----------
   Every status chip on every page reads --c (tone) and derives its
   background and border from it, so a status has one colour everywhere. */
.badge,.chip{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;max-width:100%;
  padding:3px 10px;border-radius:var(--pill);
  background:var(--tint);border:1px solid var(--line-2);color:var(--muted);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;line-height:1.4;white-space:nowrap;
}
.badge.green,.chip.ok{background:var(--green-soft);border-color:#0f8a4326;color:var(--green)}
.badge.red,.chip.bad{background:var(--red-soft);border-color:#e11d4826;color:var(--red)}
.badge.gold,.chip.gold{background:var(--gold-soft);border-color:#f7941d33;color:var(--gold-text)}
.badge.blue,.chip.info{background:var(--blue-soft);border-color:#2563eb26;color:var(--blue)}
.chip.warn{background:var(--amber-soft);border-color:#c2740a2e;color:var(--amber)}
.chip.muted{background:var(--grey-soft);color:var(--grey)}

.request-status,.large-status,.big-status,.status-chip,.bc-status,.diaspora-status{
  --c:var(--sky);
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;max-width:100%;
  height:22px;padding:0 9px;border-radius:var(--pill);
  color:var(--c);
  background:color-mix(in srgb,var(--c) 11%,#fff);
  border:1px solid color-mix(in srgb,var(--c) 24%,transparent);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.large-status,.big-status{height:26px;padding:0 12px}

/* tone groups */
:is(.request-status,.large-status,.big-status,.status-chip,.bc-status,.diaspora-status):is(
  .contacted,.pending,.in-progress,.reviewing,.inspected,.partial,.draft,.returned,.reserved,.waiting,.unpaid){--c:var(--amber)}
:is(.request-status,.large-status,.big-status,.status-chip,.bc-status,.diaspora-status):is(
  .qualified,.processing,.valued){--c:var(--purple)}
:is(.request-status,.large-status,.big-status,.status-chip,.bc-status,.diaspora-status):is(
  .completed,.approved,.converted,.sold,.sent,.active,.paid,.answered,.available){--c:var(--green)}
:is(.request-status,.large-status,.big-status,.status-chip,.bc-status,.diaspora-status):is(
  .rejected,.cancelled,.spam,.failed,.unsubscribed,.lost){--c:var(--red)}
:is(.request-status,.large-status,.big-status,.status-chip,.bc-status,.diaspora-status):is(
  .closed,.inactive,.expired){--c:var(--grey)}
:is(.request-status,.large-status,.big-status,.status-chip,.bc-status,.diaspora-status):is(
  .sending,.on-ship){--c:var(--blue)}

/* RAL reference chip (ral-ref.js) */
.ral-ref{
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  padding:3px 8px;border-radius:6px;
  background:var(--deep);color:#fff;
  font:700 10.5px/1.2 var(--mono);letter-spacing:.04em;white-space:nowrap;vertical-align:middle;
}
.ral-ref.light{background:var(--tint-2);color:var(--deep);border:1px solid var(--line)}


/* ---------- 15. GENERIC MODAL, TABS & SEGMENTED FILTERS ----------
   .modal / .sale-modal  > .modal-bg + .modal-box
   .modal-box > .modal-close + .modal-head + .modal-body + .modal-actions */
.modal,.sale-modal{
  position:fixed;inset:0;z-index:300;
  display:none;align-items:center;justify-content:center;padding:16px;
}
.modal.open,.modal.show,.sale-modal.open,.sale-modal.show{display:flex;animation:fadeIn .16s ease}
body:has(.modal.open,.sale-modal.open){overflow:hidden}

.modal-bg{
  position:absolute;inset:0;background:#071d30b3;
  backdrop-filter:blur(6px) saturate(140%);-webkit-backdrop-filter:blur(6px) saturate(140%);
}
.modal-box{
  position:relative;z-index:1;
  display:flex;flex-direction:column;min-height:0;
  width:min(680px,100%);max-height:min(92dvh,900px);overflow:hidden;
  padding:18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
  animation:popIn .2s var(--ease);
}
.modal-box.narrow{width:min(500px,100%)}
.modal-box.wide{width:min(880px,100%)}

.modal-box>.modal-close{position:absolute;top:14px;right:14px;z-index:3}
.modal-close{
  width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--pill);
  background:var(--card);color:var(--muted);font-size:13px;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.modal-close:hover{border-color:#e11d4855;background:var(--red-soft);color:var(--red)}

.modal-head{flex-shrink:0;padding:0 44px 14px 0;border-bottom:1px solid var(--line)}
.modal-head>span{font-size:var(--fs-micro);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green)}
.modal-head h2{margin:5px 0 3px;font-size:clamp(17px,2.2vw,21px);letter-spacing:-.03em}
.modal-head h2 strong{color:var(--gold)}
.modal-head p{font-size:var(--fs-sm);color:var(--muted)}

.pane{display:flex;flex-direction:column;flex:1;min-height:0}
.modal-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 2px}
.modal-box .modal-actions{
  display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
}

/* tabs: full-width segmented buttons */
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;flex-shrink:0}
.tab{
  flex:1;min-width:110px;min-height:36px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);border-radius:var(--pill);
  background:var(--card);color:var(--muted);font-size:var(--fs-sm);font-weight:700;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.tab:hover{border-color:var(--gold-line);color:var(--ink)}
.tab.active{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.tab.active i{color:var(--gold)}
.tab>span{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:var(--pill);background:var(--line-2);font-size:var(--fs-micro);
}
.tab.active>span{background:#ffffff2e;color:#fff}

/* small filter pills: "All · Paid · Unpaid" */
.filter-row{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;flex-shrink:0}
.filter{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:32px;padding:0 13px;border-radius:var(--pill);
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  font-size:var(--fs-xs);font-weight:700;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.filter:hover{border-color:var(--gold-line);color:var(--ink)}
.filter.active{background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:#e0831288;color:var(--gold-ink)}


/* ---------- 16. TOASTS ---------- */
.toast,.enq-toast,.bc-toast{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));z-index:1300;
  display:flex;align-items:center;gap:10px;
  max-width:min(460px,calc(100% - 28px));padding:12px 18px;
  border-radius:var(--r);border-left:4px solid var(--gold);
  background:var(--ink-2);color:#fff;font-size:var(--fs);font-weight:600;
  box-shadow:var(--sh-lg);
  transform:translate(-50%,16px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,transform .22s var(--ease),visibility .22s;
}
:is(.toast,.enq-toast,.bc-toast).show{opacity:1;visibility:visible;transform:translate(-50%,0)}
:is(.toast,.enq-toast,.bc-toast).ok{border-left-color:#22c55e}
:is(.toast,.enq-toast,.bc-toast).bad{border-left-color:var(--red)}


/* ---------- 17. VEHICLE GRID & CARDS ---------- */
.cars-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.cars-grid.fixed-cols{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}

.car-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
  background:var(--glass-2);
  border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  box-shadow:var(--sh-xs);
  transition:transform .22s var(--ease),box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.car-card::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 32%,#ffffff5e 47%,transparent 63%);
  transform:translateX(-65%);
  transition:opacity .25s ease,transform .75s var(--ease);
}
.car-card:hover{transform:translateY(-4px);border-color:#ffffffe0;background:#fffffff5;box-shadow:var(--sh-lg),0 0 0 1px #f7941d1f}
.car-card:hover::after{opacity:1;transform:translateX(65%)}
.car-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.car-card{container-type:inline-size}
.car-image{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(140deg,#dbe8f1,#eef5fa)}
.car-image img{width:100%;height:100%;object-fit:contain;transition:filter .35s var(--ease)}
.car-card:hover .car-image img{filter:saturate(1.06) brightness(1.02)}
.car-card.sold .car-image img,.car-card.inactive .car-image img{filter:grayscale(.5) brightness(.8)}
.no-image{height:100%;display:grid;place-items:center;color:#9db3c1;font-size:24px}

.car-image .status{
  position:absolute;left:8px;top:8px;z-index:3;
  padding:4px 9px;border-radius:var(--pill);
  color:#fff;background:#0f2a45c4;border:1px solid #ffffff40;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  max-width:calc(100% - 110px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.car-image .status.available{background:#0f8a43d9}
.car-image .status.reserved{background:#c2740ad9}
.car-image .status.inactive{background:#5e7589d9}
.car-image .status.on-ship{background:#2563ebd9}
.car-image .status.under-port-clearance{background:#7c3aedd9}

.card-flags{position:absolute;top:8px;right:8px;z-index:5;display:flex;align-items:center;gap:5px}
.featured,.vis-toggle,.source-tag{
  height:24px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--pill);border:1px solid #ffffff59;color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.featured,.vis-toggle{width:24px;font-size:var(--fs-micro)}
.featured{background:#f7941de6;color:var(--gold-ink)}
.vis-toggle{background:#0f8a43e6;transition:background .15s ease,transform .15s var(--ease)}
.vis-toggle.off{background:#5e7589e6}
.vis-toggle:hover{transform:scale(1.08)}
.vis-toggle:active{transform:scale(.94)}
.vis-toggle:disabled,.vis-toggle.busy{opacity:.55;cursor:wait;transform:none}
.source-tag{gap:4px;padding:0 8px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;white-space:nowrap}
.source-tag.sell-in{background:#7c3aede6}
.source-tag.trade-in{background:#2563ebe6}
.source-tag.agent{background:#0f8a43e6}
/* narrow cards: the source tag shrinks to its icon so it never runs into
   the status pill on the left */
@container (max-width:300px){
  .source-tag{width:24px;padding:0;gap:0;font-size:0}
  .source-tag i{font-size:10px}
  .car-image .status{max-width:calc(100% - 104px)}
}
/* 2-up phone cards: the flag icons stack down the right edge so the
   status pill keeps its full label */
@container (max-width:230px){
  .card-flags{flex-direction:column}
  .car-image .status{max-width:calc(100% - 50px)}
}

.hidden-tag{
  position:absolute;left:8px;bottom:8px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:var(--pill);
  color:#fff;background:#0f2a45d0;border:1px solid #ffffff40;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

.sold-overlay{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  pointer-events:none;overflow:hidden;background:#e11d481a;
}
.sold-overlay::before{
  content:"";position:absolute;width:170%;height:2px;
  background:#e11d48b3;transform:rotate(-17deg);box-shadow:0 0 0 1px #ffffff4d;
}
.sold-overlay span{
  position:relative;padding:4px 16px;border:2px solid #e11d48;border-radius:var(--r-xs);
  background:#e11d48d9;color:#fff;
  font-size:clamp(14px,2.4vw,19px);font-weight:700;letter-spacing:.16em;
  transform:rotate(-17deg);text-shadow:0 2px 4px #00000059;box-shadow:0 6px 16px #00000038;
}

.car-card.not-public{border-style:dashed;border-color:var(--line-3)}
.car-card.not-public .car-image img,
.car-card.not-public:hover .car-image img{filter:grayscale(.6) brightness(.88)}

.car-info{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 11px 11px}
.car-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.car-info h3{min-width:0;font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.car-year{
  flex-shrink:0;padding:2px 8px;border-radius:var(--pill);
  background:var(--tint);border:1px solid var(--line-2);
  color:var(--muted);font-size:var(--fs-micro);font-weight:700;
}
.car-location{
  display:flex;align-items:center;gap:5px;min-width:0;
  color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.car-location i{color:var(--gold);font-size:10px}

.car-meta{display:flex;flex-wrap:wrap;gap:4px;max-height:24px;overflow:hidden}
.car-meta span{
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;max-width:100%;
  padding:3px 8px;border-radius:var(--pill);
  background:var(--tint);border:1px solid var(--line-2);
  color:var(--muted);font-size:var(--fs-micro);font-weight:600;text-transform:capitalize;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.car-meta i{color:var(--gold);font-size:9px}

.car-foot{
  margin-top:auto;padding-top:9px;border-top:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 8px;
}
.price{
  display:flex;align-items:baseline;gap:4px;flex:1 0 auto;min-width:max-content;
  font-size:16px;font-weight:700;letter-spacing:-.035em;white-space:nowrap;
}
.price small{font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;color:var(--muted)}

.car-actions{display:flex;gap:5px;flex-shrink:0;margin-left:auto}
.car-actions button{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:30px;border-radius:var(--pill);font-size:var(--fs-xs);font-weight:700;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s var(--ease);
}
.car-actions button:active{transform:scale(.96)}
.car-actions .edit{padding:0 12px;border:1px solid var(--ink);background:var(--ink);color:#fff}
.car-actions .edit:hover{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.car-actions .docs{padding:0 10px;border:1px solid var(--gold);background:#fff7ec;color:var(--gold-text)}
.car-actions .docs:hover{background:var(--gold);color:var(--gold-ink)}
.car-actions .delete{width:30px;border:1px solid var(--line);background:#fff;color:#a98d95}
.car-actions .delete:hover{border-color:#e11d4855;background:var(--red-soft);color:var(--red)}

.cars-grid.dense .car-meta span:nth-child(n+3){display:none}
.cars-grid.dense .car-actions .edit{padding:0 9px}
.cars-grid.dense .car-actions .edit span{display:none}


/* ---------- 18. LISTING EXTRAS ---------- */
.order-hint{margin:-4px 0 12px;font-size:var(--fs-xs);color:var(--muted)}
.order-hint:empty{display:none}

.cars-grid.orderable .car-card{cursor:grab;touch-action:none}
.cars-grid.orderable .car-card:active{cursor:grabbing}
.car-card.dragging{
  position:fixed;z-index:999;pointer-events:none;transition:none;cursor:grabbing;
  box-shadow:var(--sh-lg),0 0 0 2px var(--gold);transform:scale(1.03) rotate(-1deg);
}
.car-card.dragging::after{display:none}
.car-card-placeholder{border:2px dashed var(--gold-line);border-radius:var(--r);background:var(--gold-soft)}
body.card-dragging{user-select:none;-webkit-user-select:none}

.unpublished-banner{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:12px;
  background:var(--amber-soft);border:1px solid var(--gold-line);border-radius:var(--r);
  color:var(--amber);font-size:var(--fs);
  animation:dropIn .2s var(--ease);
}
.unpublished-banner>span{flex:1;min-width:0;font-weight:600}
.unpublished-banner>button{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  min-height:32px;padding:0 14px;border-radius:var(--pill);
  background:linear-gradient(180deg,var(--gold-2),var(--gold));border:1px solid #e0831288;
  color:var(--gold-ink);font-size:var(--fs-xs);font-weight:700;
  box-shadow:0 2px 8px #f7941d30;transition:box-shadow .15s ease,transform .15s var(--ease);
}
.unpublished-banner>button:hover{box-shadow:0 5px 14px #f7941d45;transform:translateY(-1px)}
.unpublished-banner>button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

.pagination{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2);
}
.page-info{font-size:var(--fs-sm);color:var(--muted)}
.page-info b{color:var(--ink)}
.page-btns{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.page-btn{
  min-width:34px;height:34px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);border-radius:var(--pill);
  background:var(--glass);color:var(--muted);font-size:var(--fs-sm);font-weight:700;
  transition:border-color .16s ease,color .16s ease,background .16s ease,box-shadow .16s ease;
}
.page-btn i{font-size:10px}
.page-btn:hover:not(:disabled):not(.current){border-color:var(--gold-line);color:var(--ink);background:#fff;box-shadow:var(--sh-sm)}
.page-btn.current{
  background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:#e0831288;
  color:var(--gold-ink);cursor:default;box-shadow:0 2px 8px #f7941d30;
}
.page-btn:disabled{opacity:.4;cursor:not-allowed}
.page-gap{min-width:16px;text-align:center;color:var(--faint);font-weight:700}

/* index toolbar: search · sort · per row · per page */
.listing-panel #sortFilter~select{min-width:0}


/* ---------- 19. RESPONSIVE ---------- */
@media (min-width:1600px){
  .cars-grid:not(.fixed-cols){grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
}

@media (max-width:1100px){
  :root{--side-w:216px;--gutter:14px}
  .toolbar{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto}
  .toolbar>.search{grid-column:1/-1}
}

/* tablets: the sidebar becomes a drawer */
@media (max-width:900px){
  :root{--head-h:56px;--gutter:12px}

  .menu{display:grid}
  .admin-layout{display:block}

  .sidebar{
    top:0;left:0;z-index:120;
    width:min(284px,86vw);height:100dvh;
    padding-top:calc(14px + env(safe-area-inset-top));
    border-radius:0 var(--r-lg) var(--r-lg) 0;
    box-shadow:14px 0 44px #08203238;
    transform:translateX(-105%);visibility:hidden;
    transition:transform .26s var(--ease),visibility .26s;
  }
  .sidebar.open{transform:none;visibility:visible}
  .side-head{display:flex}
  .side-link{min-height:44px;font-size:var(--fs)}
  body:has(.sidebar.open){overflow:hidden}

  .overlay.show{
    display:block;position:fixed;inset:0;z-index:110;
    background:#081f3280;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    animation:fadeIn .2s ease;
  }

  .main{width:100%;margin-left:0}

  .page-heading{flex-direction:column;align-items:stretch;gap:12px}
  .page-heading>.primary-btn,.page-heading>.outline-btn{width:100%}
  .heading-actions{width:100%}
  .heading-actions>*{flex:1 1 auto}

  .listing-panel,.panel,.summary-panel,.insight-card,.form-panel,.table-panel{padding:13px;border-radius:var(--r)}
  .panel-head{flex-wrap:wrap}
}

/* phones */
@media (max-width:600px){
  :root{--gutter:10px}

  .brand span{font-size:14px;gap:5px}
  .brand em{display:none}
  .admin-label{height:28px;padding:0 10px}

  .page-heading h1{font-size:22px}

  /* stats become a swipeable row */
  .stats{
    display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:2px;margin-bottom:12px;scrollbar-width:none;
  }
  .stats::-webkit-scrollbar{display:none}
  .stat-card{flex:0 0 auto;min-width:148px;scroll-snap-align:start;padding:10px 11px}
  .stat-icon{width:32px;height:32px;font-size:13px}
  .stat-card strong{font-size:17px}

  .panel-head h2{font-size:16px}
  .panel-actions{width:100%}
  .panel-actions>*{flex:1 1 auto}

  .toolbar{grid-template-columns:1fr}
  .toolbar select{padding:0 30px 0 12px;background-position:right 11px center}

  .admin-filters{padding:12px}
  .filter-grid,.range-grid{grid-template-columns:1fr}
  .check-row{min-height:36px}

  .cars-grid,.cars-grid.fixed-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .car-info{padding:9px;gap:5px}
  .car-info h3{font-size:var(--fs)}
  .car-meta span:nth-child(n+3){display:none}
  .price{font-size:14px}
  .car-actions .edit,.car-actions .docs{padding:0 9px}
  .car-actions .edit span,.car-actions .docs span{display:none}
  .source-tag{padding:0 6px;gap:0;font-size:0}
  .source-tag i{font-size:10px}

  .pagination{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .page-info{text-align:center}
  .page-btns{justify-content:center}
  .page-btn.step .lbl{display:none}

  .unpublished-banner>button{width:100%;justify-content:center;min-height:38px}

  /* every generic modal is a full-screen sheet */
  .modal,.sale-modal{padding:0}
  .modal-box,.modal-box.narrow,.modal-box.wide{
    width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;
    padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  }
  .modal-box>.modal-close{top:calc(12px + env(safe-area-inset-top));right:12px}
  .modal-box .modal-actions{display:grid;grid-template-columns:1fr}
  .modal-box .modal-actions>*{width:100%}
  .tab{min-width:0;padding:0 8px;font-size:var(--fs-xs)}
  .tab i{display:none}
  .form-grid{grid-template-columns:1fr}
}

@media (max-width:420px){
  .brand b{max-width:42vw}
}

@media (max-width:380px){
  .cars-grid,.cars-grid.fixed-cols{grid-template-columns:1fr}
  .car-image{aspect-ratio:16/9}
  .car-meta span:nth-child(n+3){display:inline-flex}
  .car-actions .edit span,.car-actions .docs span{display:inline}
  .source-tag{padding:0 8px;gap:4px;font-size:var(--fs-micro)}
}

@media (max-height:520px) and (orientation:landscape){
  .side-link{min-height:34px}
}


/* ---------- 20. HOVER-LESS DEVICES & PRINT ---------- */
@media (hover:none){
  .car-card:hover,.stat-card:hover{transform:none;box-shadow:var(--sh-xs)}
  .car-card:hover{border-color:var(--line);background:var(--glass-2)}
  .car-card:hover::after{opacity:0}
  .car-card:hover .car-image img{filter:none}
  .primary-btn:hover,.save-btn:hover,.primary-action:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .car-card::after{display:none}
  .sidebar{transition:none}
}

@media print{
  .header,.sidebar,.overlay,.panel-actions,.toolbar,.admin-filters,.car-actions,.pagination,
  #loader,.heading-actions,.primary-btn,.modal,.sale-modal,.toast,.enq-toast,.bc-toast{display:none!important}
  body{background:#fff;font-size:11px}
  .main{width:100%;margin:0;padding:0}
  .listing-panel,.panel,.summary-panel,.insight-card,.stat-card,.car-card{
    background:#fff;border-color:#ccc;box-shadow:none;backdrop-filter:none;break-inside:avoid;
  }
  .car-card::after{display:none}
  .cars-grid{grid-template-columns:repeat(3,1fr)}
  .stats{display:grid;grid-template-columns:repeat(5,1fr)}
}