/* Auto Gallery Sadra — Design System Stage 5
   Vehicles, inventory, opportunities and purchase requests.
   Presentation-only layer; no business logic changes. */

:root{
  --ds5-ink:#17324d;
  --ds5-muted:#66788a;
  --ds5-line:#dbe5ee;
  --ds5-soft:#f6f9fc;
  --ds5-soft-blue:#eef6ff;
  --ds5-primary:#1769aa;
  --ds5-primary-dark:#0e4f83;
  --ds5-success:#147a52;
  --ds5-warning:#a45b08;
  --ds5-danger:#b53b3b;
  --ds5-radius:16px;
  --ds5-shadow:0 12px 30px rgba(25,50,78,.08);
}

/* shared page shells */
.cars-page,
.car-modern,
.opps-page,
.opportunities-home,
.vehicle-catalog-page,
.inventory-wizard-shell,
.purchase-wizard-shell{
  color:var(--ds5-ink);
}

.cars-page a,
.opps-page a,
.opportunities-home a,
.vehicle-catalog-page a,
.inventory-wizard-shell a,
.purchase-wizard-shell a{ text-decoration:none; }

/* headings and hero bars */
.cars-hero,
.form-topbar,
.opps-page .page-head,
.opportunities-home .opps-hero,
.vehicle-catalog-page .catalog-hero,
.inventory-wizard-header,
.purchase-wizard-header{
  border:1px solid var(--ds5-line);
  border-radius:20px;
  background:linear-gradient(135deg,#fff 0%,#f5faff 100%);
  box-shadow:var(--ds5-shadow);
}

.cars-hero h2,
.form-topbar h2,
.opps-page h1,
.opps-page h2,
.opportunities-home h1,
.opportunities-home h2,
.vehicle-catalog-page h1,
.vehicle-catalog-page h2,
.inventory-wizard-header h1,
.purchase-wizard-header h1{
  color:var(--ds5-ink);
  letter-spacing:-.02em;
}

.cars-kicker,
.form-kicker,
.opps-page .eyebrow,
.opportunities-home .eyebrow{
  color:var(--ds5-primary);
  font-weight:800;
}

/* cards and panels */
.cars-filter-card,
.cars-table-card,
.car-modern .panel,
.opps-page .card,
.opportunities-home .card,
.opps-page .opps-card,
.opportunities-home .opps-card,
.vehicle-catalog-page .card,
.inventory-wizard-card,
.purchase-wizard-card,
.purchase-option-card,
.inventory-listing-card{
  border:1px solid var(--ds5-line);
  border-radius:var(--ds5-radius);
  background:#fff;
  box-shadow:0 8px 24px rgba(25,50,78,.065);
}

.car-modern .panel-title,
.purchase-stage-title,
.inventory-stage-title{
  color:var(--ds5-ink);
  font-weight:800;
}
.car-modern .panel-title>span,
.purchase-stage-title>span,
.inventory-stage-title>span{
  background:var(--ds5-soft-blue);
  color:var(--ds5-primary);
  border:1px solid #cfe5fb;
}

/* form controls */
.car-modern input,
.car-modern select,
.car-modern textarea,
.cars-page input,
.cars-page select,
.opps-page input,
.opps-page select,
.opps-page textarea,
.vehicle-catalog-page input,
.vehicle-catalog-page select,
.inventory-wizard-shell input,
.inventory-wizard-shell select,
.inventory-wizard-shell textarea,
.purchase-wizard-shell input,
.purchase-wizard-shell select,
.purchase-wizard-shell textarea{
  min-height:44px;
  border:1px solid #ccd9e5;
  border-radius:12px;
  background:#fff;
  color:var(--ds5-ink);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.car-modern textarea,
.opps-page textarea,
.inventory-wizard-shell textarea,
.purchase-wizard-shell textarea{ min-height:110px; resize:vertical; }

.car-modern input:focus,
.car-modern select:focus,
.car-modern textarea:focus,
.cars-page input:focus,
.cars-page select:focus,
.opps-page input:focus,
.opps-page select:focus,
.opps-page textarea:focus,
.vehicle-catalog-page input:focus,
.vehicle-catalog-page select:focus,
.inventory-wizard-shell input:focus,
.inventory-wizard-shell select:focus,
.inventory-wizard-shell textarea:focus,
.purchase-wizard-shell input:focus,
.purchase-wizard-shell select:focus,
.purchase-wizard-shell textarea:focus{
  outline:0;
  border-color:#76afe0;
  box-shadow:0 0 0 3px rgba(23,105,170,.12);
  background:#fbfdff;
}

.car-modern label,
.cars-page label,
.opps-page label,
.vehicle-catalog-page label,
.inventory-wizard-shell label,
.purchase-wizard-shell label{ color:#314b63; font-weight:700; }

.field-hint,
.plate-hint,
.muted,
.muted-text,
.opps-page small,
.purchase-stage-title p,
.inventory-stage-title p{ color:var(--ds5-muted); }

/* buttons */
.cars-page .btn,
.car-modern .btn,
.opps-page .btn,
.opportunities-home .btn,
.vehicle-catalog-page .btn,
.inventory-wizard-shell .btn,
.purchase-wizard-shell .btn{
  min-height:40px;
  border-radius:11px;
  font-weight:800;
  box-shadow:none;
}
.cars-page .btn.primary,
.car-modern .btn.primary,
.opps-page .btn.primary,
.opportunities-home .btn.primary,
.vehicle-catalog-page .btn.primary,
.inventory-wizard-shell .btn.primary,
.purchase-wizard-shell .btn.primary{
  background:linear-gradient(135deg,var(--ds5-primary),var(--ds5-primary-dark));
  border-color:var(--ds5-primary-dark);
  color:#fff;
}
.cars-page .btn.danger,
.car-modern .btn.danger,
.opps-page .btn.danger{ background:#fff2f2;color:var(--ds5-danger);border-color:#f0caca; }

/* vehicles list */
.cars-stat-grid{ gap:10px; }
.cars-stat-card{
  border:1px solid var(--ds5-line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 16px rgba(25,50,78,.05);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.cars-stat-card:hover{ transform:translateY(-2px);border-color:#b8d6ef;box-shadow:0 10px 22px rgba(25,50,78,.09); }
.cars-stat-card.active{ border-color:#79b4e3;box-shadow:0 0 0 3px rgba(23,105,170,.1); }
.cars-stat-card b{ font-size:clamp(20px,2vw,28px);color:var(--ds5-ink); }

.cars-summary-pill,.badge,.status-badge{
  border-radius:999px;
  font-weight:800;
}
.cars-summary-pill{ background:var(--ds5-soft-blue);color:var(--ds5-primary-dark);border:1px solid #d4e8f8; }

.cars-table-card table,
.opps-page table,
.vehicle-catalog-page table{ border-collapse:separate;border-spacing:0; }
.cars-table-card th,
.opps-page th,
.vehicle-catalog-page th{
  background:#f3f7fb;
  color:#36516a;
  border-bottom:1px solid var(--ds5-line);
  font-weight:800;
}
.cars-table-card td,
.opps-page td,
.vehicle-catalog-page td{ border-bottom:1px solid #edf2f6; }
.cars-table-card tbody tr:hover,
.opps-page tbody tr:hover,
.vehicle-catalog-page tbody tr:hover{ background:#f9fcff; }

.cars-mobile-card{
  border:1px solid var(--ds5-line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(25,50,78,.06);
}
.cars-mobile-title b{ color:var(--ds5-ink); }
.cars-mobile-info-grid>div{ background:#f7fafc;border:1px solid #e9f0f5;border-radius:10px; }
.cars-mobile-info-grid span{ color:var(--ds5-muted); }

.plate-chip,.modern-plate{
  border:2px solid #1d2c38;
  border-radius:10px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.modern-plate .blue{ background:#11519a;color:#fff; }

/* car form / details */
.car-layout{ gap:14px; }
.car-view-grid>div{
  border:1px solid #e4ebf1;
  border-radius:12px;
  background:#f8fafc;
}
.car-view-grid>div span{ color:var(--ds5-muted); }
.car-view-grid>div b{ color:var(--ds5-ink); }
.modern-checks label{ border:1px solid var(--ds5-line);border-radius:10px;background:#f8fafc; }
.modern-checks label.checked{ background:#edf9f4;border-color:#b8dfce;color:#126a49; }
.smart-vehicle,.smart-person,.smart-color-picker{ position:relative; }
.vehicle-dropdown,.person-dropdown,.color-dropdown,.bank-dropdown{
  border:1px solid #cbdbe8!important;
  border-radius:12px!important;
  box-shadow:0 18px 38px rgba(22,47,71,.16)!important;
  overflow:auto;
}
.vehicle-option,.person-option,.color-option,.bank-option{ border-bottom:1px solid #edf2f6; }
.vehicle-option:hover,.person-option:hover,.color-option:hover,.bank-option:hover{ background:#eef7ff; }

/* opportunity center */
.opps-page,
.opportunities-home{ max-width:1500px;margin-inline:auto; }
.opps-page .opps-toolbar,
.opportunities-home .opps-toolbar,
.opps-page .filters,
.opps-page .filter-bar{
  border:1px solid var(--ds5-line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(25,50,78,.05);
}
.opps-page .opps-card,
.opportunities-home .opps-card{ transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
.opps-page .opps-card:hover,
.opportunities-home .opps-card:hover{ transform:translateY(-2px);border-color:#bdd9ed;box-shadow:0 12px 26px rgba(25,50,78,.09); }
.opportunities-home .stat-card,
.opps-page .stat-card{ border:1px solid var(--ds5-line);border-radius:14px;background:linear-gradient(180deg,#fff,#f8fbfe); }

/* inventory cards/public catalogue */
.portal-shell .inventory-card,
.opps-inventory-page .inventory-card,
.inventory-listing-card{
  border:1px solid var(--ds5-line);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(25,50,78,.07);
}
.portal-shell .inventory-card img,
.opps-inventory-page .inventory-card img{ width:100%;object-fit:cover;background:#eef2f5; }
.portal-shell .inventory-card .price,
.opps-inventory-page .inventory-card .price{ color:var(--ds5-success);font-weight:900; }

.inventory-wizard-shell,
.purchase-wizard-shell{ width:min(1100px,calc(100% - 24px));margin:20px auto; }
.inventory-wizard-card,
.purchase-wizard-card{ overflow:visible; }
.inventory-wizard-header,
.purchase-wizard-header{ padding:18px 20px; }
.purchase-stepper,
.inventory-stepper{ border:1px solid var(--ds5-line);border-radius:14px;background:#f8fbfe;padding:10px; }
.purchase-step,
.inventory-step{ color:var(--ds5-muted); }
.purchase-step b,
.inventory-step b{ background:#e6eef5;color:#526a7f; }
.purchase-step.active,
.inventory-step.active{ color:var(--ds5-primary-dark); }
.purchase-step.active b,
.inventory-step.active b{ background:var(--ds5-primary);color:#fff;box-shadow:0 5px 12px rgba(23,105,170,.22); }
.purchase-stage,
.inventory-stage{ animation:ds5Fade .18s ease; }
@keyframes ds5Fade{ from{opacity:.4;transform:translateY(4px)} to{opacity:1;transform:none} }

.purchase-option-card{ padding:14px; }
.option-card-head{ border-bottom:1px solid #e8eef3;padding-bottom:10px;margin-bottom:12px; }
.remove-purchase-option{ width:34px;height:34px;border-radius:10px;background:#fff2f2;color:var(--ds5-danger);border:1px solid #f0cccc; }
.field-with-unit{ border-radius:12px;overflow:hidden; }
.field-with-unit input{padding-left:14px!important;}
.field-with-unit em{ background:#f0f5f9;color:#50677b;border-inline-start:1px solid #dce5ec; }
.purchase-final-note{ border:1px solid #cfe7da;background:#f1fbf6;color:#176344;border-radius:12px; }
.purchase-security-modern{ border:1px dashed #b8cede;background:#f7fbfe;border-radius:14px; }

/* vehicle catalogue */
.vehicle-catalog-page .catalog-tabs,
.vehicle-catalog-page .catalog-toolbar{ border:1px solid var(--ds5-line);border-radius:14px;background:#fff; }
.vehicle-catalog-page .catalog-item{ border:1px solid var(--ds5-line);border-radius:12px;background:#fff; }
.vehicle-catalog-page .catalog-item:hover{ border-color:#a9cce7;background:#f8fcff; }

/* status semantics */
.cars-page .badge,
.opps-page .badge,
.opportunities-home .badge,
.vehicle-catalog-page .badge{ border:1px solid #d8e4ed;background:#f2f7fb;color:#35536d; }
.cars-page .badge.success,.opps-page .badge.success{ background:#edf9f4;color:#116947;border-color:#bce2d2; }
.cars-page .badge.warning,.opps-page .badge.warning{ background:#fff7e8;color:#8e570c;border-color:#f0d4a6; }
.cars-page .badge.danger,.opps-page .badge.danger{ background:#fff1f1;color:#a83232;border-color:#f0c7c7; }

/* responsive */
@media (max-width:900px){
  .cars-hero,.form-topbar,.opps-page .page-head,.purchase-wizard-header,.inventory-wizard-header{ border-radius:15px; }
  .cars-stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .car-layout,.car-layout.second-row{ grid-template-columns:1fr!important; }
  .purchase-modern-grid,.purchase-option-fields{ grid-template-columns:1fr 1fr!important; }
  .purchase-stepper i,.inventory-stepper i{ min-width:14px; }
}

@media (max-width:640px){
  .inventory-wizard-shell,.purchase-wizard-shell{ width:calc(100% - 12px);margin:8px auto; }
  .inventory-wizard-card,.purchase-wizard-card{ border-radius:14px; }
  .cars-stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
  .cars-stat-card{ padding:10px;min-height:72px; }
  .cars-stat-card span{ font-size:12px; }
  .cars-stat-card b{ font-size:20px; }
  .cars-mobile-card{ padding:10px; }
  .cars-mobile-info-grid{ grid-template-columns:1fr 1fr;gap:6px; }
  .cars-mobile-info-grid>div{ padding:7px;min-width:0; }
  .cars-mobile-info-grid .wide{ grid-column:1/-1; }
  .purchase-modern-grid,.purchase-option-fields{ grid-template-columns:1fr!important; }
  .purchase-stage-actions.split,.inventory-stage-actions.split{ display:grid;grid-template-columns:1fr;gap:8px; }
  .purchase-stepper,.inventory-stepper{ overflow-x:auto;justify-content:flex-start; }
  .purchase-step,.inventory-step{ min-width:94px; }
  .purchase-step span,.inventory-step span{ font-size:11px; }
  /* Smart lists must stay attached to their own field. Keyboard-aware placement is handled in app.js. */
  .vehicle-dropdown,.person-dropdown,.color-dropdown,.bank-dropdown{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:calc(100% + 7px)!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    max-height:min(38dvh,280px)!important;
    z-index:10050!important;
  }
}

@media print{
  .cars-hero,.cars-filter-card,.cars-stat-grid,.quick-actions,.opps-toolbar,.filter-bar,.purchase-stage-actions,.inventory-stage-actions{ display:none!important; }
  .cars-table-card,.car-modern .panel,.opps-page .card,.vehicle-catalog-page .card{ box-shadow:none!important;border-color:#cbd5df!important; }
}