/* Equal-size buttons for Margin Preference */
.app-type-toggle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px; /* mobile / narrow default */
}
@media (min-width: 640px) {
  /* Match widths and spacing with the three fields above (dealer-app-grid uses repeat(3, 1fr) and 22px column gap) */
  .app-type-toggle { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
.app-type-option { display: contents; }
.app-type-option input { display: none; }
.app-type-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: #e6f0ff;
  color: #0f172a;
  font-family: var(--df-font);
  font-size: 14px;
  line-height: 1.3;
  flex: 1 1 auto;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 160ms ease, background 160ms ease;
}

#termsStep .field.span-2 > .micro-label { grid-column: 1 / -1; }
#termsStep .field.span-2 .app-type-btn { align-self: stretch; justify-self: stretch; width: auto; }
/* Limit main application area width to align with logout button on large screens */
@media (min-width: 1200px) {
  .main-app-max {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}
@import url('https://fonts.googleapis.com/css?family=Inter:400,600&display=swap'); /* Moved to top for Firefox (@import must precede rules) */
/* Header logo exact match to sidebar tab group width (w-72 = 18rem) */
/* Enlarged slightly */
.site-logo-wrapper { width:200px; flex:0 0 200px; padding:10px 14px; box-sizing:border-box; display:flex; justify-content:center; }
.site-logo { display:block; width:100%; height:auto; max-height:76px; object-fit:contain; }
@media (max-width: 767px){
  /* On small screens reduce to a comfortable width */
  .site-logo-wrapper { width:170px; flex:0 0 170px; padding:8px 12px; }
}

/* Dynamic Finance UI Theme */
:root {
    /* Dynamic Finance brand blues (finalized) */
    --df-blue: #2995e0;           /* primary */
    --df-blue-hover: #005FA0;     /* hover/active */
    --df-blue-accent: #009FE3;    /* accent/gradient end */
    --df-blue-light: #ffffff;     /* light background tint */
    --df-blue-focus-rgb: 0,119,200; /* for focus/outline/shadow */
    --df-blue-shadow-rgb: 0,119,200;
    --df-blue-legacy: #00539B; /* previous primary (kept for reference) */
    --df-blue-legacy-hover: #003E73; /* previous hover */
    --df-bg: #ffffff;
    --df-card-bg: #fff;
    --df-text: #111111;
    --df-text-muted: rgba(17,17,17,0.65);
    --df-border: rgba(0,0,0,0.10);
    --df-radius-card: 14px;
    --df-radius-inner: 10px;
    --df-radius-btn: 10px;
    --df-spacing-xs: 4px;
    --df-spacing-s: 8px;
    --df-spacing-m: 16px;
    --df-spacing-l: 24px;
    --df-spacing-xl: 40px;
    --df-font: 'Inter', system-ui, Arial, sans-serif;
    --df-transition: 180ms cubic-bezier(.4,0,.2,1);
    /* Adjustable global logo height */
    --df-logo-max-height: 78px; /* increased from 65px */
    /* Global button sizing variables (used across action bars and pills) */
    --btn-height: 40px;
    --btn-padding-x: 18px;
    --btn-font-size: 14px;
}
/* Staff sidebar toggle buttons */
/* Unified radius + base styling */
.staff-toggle-group { display:flex; flex-direction:column; gap:6px; background:#ffffff; padding:10px; border:1px solid var(--df-border); border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,0.04) inset; width:100%; max-width:100%; box-sizing:border-box; overflow:hidden; }
/* Dealer dashboard: show two primary tabs side by side */
/* Dealer two-tab group: tighter spacing so both labels fit */
.staff-sidebar .staff-toggle-group[aria-label="Sections"] { flex-direction:row; gap:2px; padding:6px 8px 7px; overflow:visible; flex-wrap:nowrap; border-radius:10px; }
/* Two-tab dealer group: compress to fit container; inactive may be cropped */
.staff-sidebar .staff-toggle-group[aria-label="Sections"] .staff-toggle { flex:1 1 0; min-width:0; text-align:center; padding:6px 8px; white-space:nowrap; overflow:hidden; text-overflow:clip; font-size:12.5px; line-height:1.15; }
/* Slightly bolder inactive weight for readability; active gets an extra step */
.staff-sidebar .staff-toggle-group[aria-label="Sections"] .staff-toggle { font-weight:600; }
.staff-sidebar .staff-toggle-group[aria-label="Sections"] .staff-toggle.active { font-weight:500; }
/* Keep active tab fully visible */
/* Inactive can be cropped slightly if space tight */
.staff-sidebar .staff-toggle-group[aria-label="Sections"] .staff-toggle:not(.active) { overflow:hidden; }
.staff-sidebar .staff-toggle-group[aria-label="Sections"] .staff-toggle.active { position:relative; z-index:2; overflow:visible; }
.staff-sidebar { box-sizing:border-box; }
.staff-toggle-group .staff-toggle { width:100%; flex:none; white-space:nowrap; position:relative; z-index:0; overflow:hidden; text-overflow:ellipsis; }
.staff-toggle-group .staff-toggle.active { z-index:1; }

/* Vertical sidebar refinement for staff toggle group */
.staff-sidebar .staff-toggle-group { padding:12px 12px 14px; gap:8px; background:#ffffff; }
.staff-sidebar .staff-toggle-group .staff-toggle { text-align:left; padding:10px 14px; font-size:14px; flex:none; font-weight:500; background:transparent; box-shadow:none; color:#334155; width:100%; display:block; box-sizing:border-box; border-radius:10px; }
staff-sidebar .staff-toggle-group .staff-toggle.active { background:var(--df-blue); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,0.4) inset, 0 1px 2px rgba(0,0,0,0.08); }
staff-sidebar .staff-toggle-group .staff-toggle.active:hover { background:var(--df-blue-hover); }
.staff-sidebar .staff-toggle-group .staff-toggle:hover { background:#ffffff; color:var(--df-blue-hover); }
/* Active tab: contained styling (remove outward shadow that created overflow look) */
.staff-sidebar .staff-toggle-group .staff-toggle.active { background:var(--df-blue); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,0.4) inset, 0 1px 2px rgba(0,0,0,0.08); }
.staff-sidebar .staff-toggle-group .staff-toggle.active:hover { background:var(--df-blue-hover); }
.staff-toggle-group .staff-toggle { flex:1; text-align:center; font-size:13px; line-height:1.2; font-weight:500; padding:8px 10px; border-radius:10px; color:#334155; text-decoration:none; position:relative; transition:background .18s, color .18s, box-shadow .18s, transform .18s; }
.staff-toggle-group .staff-toggle:hover { background:#ffffff; color:var(--df-blue-hover); }
.staff-toggle-group .staff-toggle:active { transform:translateY(1px); }
.staff-toggle-group .staff-toggle.active { background:var(--df-blue); color:#fff; font-weight:500; box-shadow:0 2px 6px rgba(var(--df-blue-shadow-rgb),0.35), 0 0 0 1px rgba(255,255,255,0.4) inset; }
.staff-toggle-group .staff-toggle.active:hover { background:var(--df-blue-hover); }
.staff-toggle-group .staff-toggle:focus-visible { outline:2px solid #0ea5e9; outline-offset:2px; }
/* Sidebar layout tidy spacing */
/* Consistent vertical spacing between sidebar blocks */
.staff-sidebar { display:flex; flex-direction:column; gap:16px; padding-right:4px; }
/* Match filter group internal spacing to outer spacing */
.staff-sidebar .filter-group { display:flex; flex-direction:column; gap:16px; }
/* Remove default bottom margins so gap controls spacing */
.staff-sidebar .filter-group input,
.staff-sidebar .filter-group select { margin-bottom:0 !important; }
/* Sidebar search: match tab group visual height & font size */
.staff-sidebar .filter-group input[type=search] { height:40px; padding:0 12px; font-size:12.5px; line-height:1.15; font-weight:500; border-radius:10px; color:#334155; }
    .staff-sidebar .filter-group input[type=search]::placeholder {
      font-size: 12.5px;
      font-weight: 500;
      color: rgba(15, 23, 42, 0.36);
      opacity: 1;
    }
/* Inline search icon */
.staff-sidebar #dealer-app-search { background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%232995e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>'); background-repeat:no-repeat; background-position:12px center; padding-left:38px; }
.staff-sidebar #dealer-app-stage { height:40px; font-size:12.5px; font-weight:500; line-height:1.15; color:#334155; border-radius:10px; padding:0 12px 0 38px; background-position:12px center; background-size:14px 14px; }
.staff-sidebar .filter-group select,
.staff-sidebar .filter-group input[type=search] { margin:0 !important; }
.staff-sidebar .filter-group label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; color:#64748b; }

body {
  font-family: var(--df-font);
  background: var(--df-bg);
  color: var(--df-text);
  line-height: 1.6;
  margin: 0;
  /* Reserve a little breathing room below the last element on all pages */
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Sitewide: hide scrollbars but preserve scrolling */
html, body {
  /* Firefox */
  scrollbar-width: none;
  /* IE/Edge (legacy) */
  -ms-overflow-style: none;
}
/* WebKit/Blink */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}


.container, main {
  max-width: 68rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Dynamic left/right gutters derived from header layout */
:root { --content-left-gutter: 16px; --content-right-gutter: 16px; }
main.main-app-max { padding-left: max(var(--content-left-gutter), 16px); padding-right: max(var(--content-right-gutter), 16px); }
/* Ensure large screens still honor these gutters even when max-width expands */
.main-app-max { box-sizing: border-box; overflow-x: visible; }

/* Allow main app container to exceed the generic container cap */
.container.main-app-max { max-width: 1360px; }
.main-app-max { max-width: 1360px; }
/* Account page uses the same content width limits and dynamic gutters as the rest of the app */
/* (Removed previous full-width overrides) */
/* Guard rails: prevent any horizontal overflow on the dealer account page */
.page-account { overflow-x: hidden; }
.page-account .account-settings-wrap,
.page-account .account-settings-card,
.page-account .account-form { max-width: 100%; box-sizing: border-box; }
/* (Reverted extra spacing changes on account action bar) */
/* Allow the account action bar to wrap on smaller screens to avoid pushing past the viewport */
@media (max-width: 1024px){
  .page-account .app-action-bar { flex-wrap: wrap !important; gap: 10px 12px; }
  .page-account .app-action-bar .quick-actions { margin-left: 0 !important; width: 100%; justify-content: flex-start; flex-wrap: wrap; white-space: normal; row-gap: 10px; }
}

/* Buy Rate pill styling is standardized under .account-form .app-action-bar below */
/* Optional: constrain the account card to a comfortable readable width */
@media (min-width: 1024px){
  .page-account .account-settings-wrap { max-width: 1280px !important; width: 100% !important; margin-left:auto !important; margin-right:auto !important; }
}
/* Align with global dynamic gutters managed on main.main-app-max (no extra inner padding) */
.page-account .account-settings-wrap { padding-left: 0; padding-right: 0; box-sizing: border-box; }

h1, h2, h3, h4 {
  color: var(--df-text);
  font-weight: 700;
  margin-bottom: var(--df-spacing-m);
  line-height: 1.2;
}

h2, .accent-underline {
  /* headings kept plain (no underline) by default */
  border-bottom: none;
  display: inline-block;
  padding-bottom: 0;
}

/* Remove underlines from all links site-wide but keep an accessible focus style */
a, a:link, a:visited, a:hover, a:active {
  text-decoration: none !important;
  color: inherit; /* preserve color unless explicitly styled elsewhere */
}
a:focus {
  /* Use the same gentle ring used by buttons instead of dashed outline */
  box-shadow: 0 0 0 3px rgba(var(--df-blue-focus-rgb),0.18);
  outline: none;
  border-radius: 6px;
  outline-offset: 2px;
}

.brand {
  color: var(--df-blue);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Header / logo tuning: keep logo and brand text a sensible size */
header { overflow: hidden; }
/* New header bar layout: center dealer name */
.header-bar { display:flex; align-items:center; justify-content:flex-start; gap:32px; position:relative; }
.header-left { flex:0 0 auto; display:flex; align-items:center; }
/* Absolute centering so dealer title is truly centered regardless of side widths */
.header-center { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:flex; justify-content:center; }
.header-right { flex:0 0 auto; display:flex; align-items:center; gap:14px; margin-left:auto; }
.header-center .dealer-title-box { margin:0; }
@media (max-width: 720px){
  .header-center { position:static; transform:none; order:3; width:100%; margin-top:12px; }
  .header-bar { flex-wrap:wrap; }
  .header-right { order:2; }
  .header-left { order:1; }
  .header-center .dealer-title-box { width:100%; text-align:center; }
}
.logout-form { display:inline-block; }
header .container { padding-top: 12px; padding-bottom: 12px; }
/* Strong overrides to ensure any logo image or large text is capped */
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem !important; }
.brand img, .brand svg, header > img, header .logo { max-height: var(--df-logo-max-height) !important; width: auto !important; display: block !important; }
.brand.text-2xl { font-size: 1rem !important; }
/* Extra defensive rule: any image inside header should be constrained */
header img { max-height: var(--df-logo-max-height) !important; width: auto !important; }
/* Ensure the dedicated site-logo follows the variable (overrides earlier sizing if any) */
.site-logo { max-height: var(--df-logo-max-height) !important; }

.text-brand { color: var(--df-blue); }
.text-muted { color: var(--df-text-muted); }
/* Dealer / page title refinement */
/* Ensure dealer title box uses same radius */
.dealer-title-box { display:inline-block; background:transparent; border:1px solid var(--df-border); padding:6px 14px 10px; border-radius:10px; box-shadow:none; box-sizing:border-box; }
/* Stacked variant with logo above name */
.dealer-title-box.stacked { display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:10px; padding-bottom:12px; border:none; box-shadow:none; }
/* Header dealer logo variant: remove border/background */
.dealer-title-box.stacked .header-dealer-logo { height:72px; max-height:72px; min-width:72px; width:auto; overflow:hidden; border:none; box-shadow:none; background:transparent; display:flex; align-items:center; justify-content:center; padding:0; border-radius:12px; }
.dealer-title-box.stacked .header-dealer-logo .dealer-logo { display:block; height:100%; width:auto; max-height:72px; max-width:220px; object-fit:contain; }
/* Smaller dealer title when stacked */
.dealer-title { font-size:.95rem; font-weight:700; letter-spacing:.01em; color:#111111; line-height:1.1; margin:0; }
@media (min-width:1024px){ .dealer-title { font-size:1rem; } }

.card {
  background: var(--df-card-bg);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-card);
  padding: var(--df-spacing-l);
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
}

.inner-block {
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-inner);
  padding: var(--df-spacing-m);
  background: #ffffff;
}

.btn, .button-primary {
  background: var(--df-blue);
  color: #fff;
  border: none;
  border-radius: var(--df-radius-btn);
  padding: 8px 18px; /* match earlier reduced padding */
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--df-transition), color var(--df-transition), box-shadow var(--df-transition);
  outline: none;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03);
  display: inline-block;
  text-align: center;
  line-height:1.15;
  min-height:36px;
}
/* Duplicate compact helper near late override block for cascade clarity */
.btn-compact { padding:6px 14px !important; font-size:.95rem !important; line-height:1.1 !important; min-height:32px !important; }

/* Ensure all button-like controls show white text by default */
.btn, .button-primary, .button-secondary, button, input[type="submit"] {
  color: #fff;
}

.btn:hover, .btn:focus,
.button-primary:hover, .button-primary:focus {
  background: var(--df-blue-hover);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(var(--df-blue-focus-rgb),0.15);
}

.button-secondary {
  /* Secondary buttons: white background with brand outline for clarity in tables */
  background: #fff;
  color: var(--df-blue);
  border: 1px solid rgba(var(--df-blue-focus-rgb),0.28);
  border-radius: var(--df-radius-btn);
  padding: 8px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--df-transition), color var(--df-transition), box-shadow var(--df-transition), border-color var(--df-transition);
}

.button-secondary:hover,
.button-secondary:focus {
  background: rgba(var(--df-blue-focus-rgb), 0.08);
  color: var(--df-blue);
  border-color: rgba(var(--df-blue-focus-rgb), 0.42);
  box-shadow: 0 8px 18px -10px rgba(var(--df-blue-shadow-rgb), 0.45), 0 1px 2px rgba(0,0,0,0.04);
}

/* Ensure action buttons inside table cells are visible and don't collapse */
.table td .btn {
  display: inline-block;
  padding: 8px 12px;
  line-height: 1.2;
  min-width: 64px;
  text-align: center;
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-inner);
  padding: 12px;
  font-size: 1rem;
  background: #fff;
  color: var(--df-text);
  transition: border-color var(--df-transition), box-shadow var(--df-transition);
  margin-bottom: var(--df-spacing-s);
}

input:focus, select:focus, textarea:focus {
  border-color:var(--df-blue-accent);
  box-shadow:0 0 0 2px rgba(var(--df-blue-focus-rgb),0.20);
  outline:none;
  background:#ffffff; /* unified focus background */
}

/* Login error password field styling */
.login-error-input {
  background: #ffffff !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}
.login-error-input::placeholder { color:#dc2626; opacity:0.9; }

/* Enhanced select styling for the applications dealers menu and related selects */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid var(--df-border);
  padding: 10px 40px 10px 12px;
  border-radius: 8px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%232995e0"><path d="M5.23 7.21a.75.75 0 011.06-.02L10 10.77l3.71-3.58a.75.75 0 111.04 1.08l-4.24 4.1a.75.75 0 01-1.04 0L5.25 8.27a.75.75 0 01-.02-1.06z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  transition: border-color var(--df-transition), box-shadow var(--df-transition), background-color var(--df-transition);
}

/* Specific visual tweak for the sidebar dealer filter to make it feel like a compact control */
#staff-dealer, #staff-stage {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 12px;
  padding-right: 40px;
  font-size: 0.95rem;
}

/* Per-listing (inline) selects should be smaller */
.js-stage-form select {
  padding: 6px 28px 6px 8px !important;
  border-radius: 6px !important;
  font-size: 0.92rem !important;
}

select:focus {
  border-color:var(--df-blue-accent);
  box-shadow:0 0 0 3px rgba(var(--df-blue-focus-rgb),0.08);
  outline: none;
}

/* Make sure the custom arrow doesn't overlap action buttons on small screens */
@media (max-width: 640px) {
  select { background-position: right 10px center; }
  .js-stage-form select { padding-right: 28px; }
}

label {
  font-weight: 600;
  color: var(--df-text);
  margin-bottom: 4px;
  display: block;
}

.helper-text {
  color: var(--df-text-muted);
  font-size: 0.92rem;
  margin-top: -6px;
  margin-bottom: 10px;
}

.micro-label {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--df-text-muted);
  font-weight: 600;
  margin-bottom: 2px;
  display: block;
}

.emphasis {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--df-blue);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--df-radius-card);
  overflow: hidden;
}

.table th, .table td {
  padding: 16px;
  border-bottom: 1px solid var(--df-border);
  text-align: left;
}

.table th {
  background: #ffffff;
  color: var(--df-text-muted);
  font-size: 0.98rem;
  font-weight: 700;
}

.table tr:last-child td {
  border-bottom: none;
}

.stepper {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.stepper-step {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 8px;
  background: #e5e7eb;
  color: var(--df-blue);
  font-weight: 600;
  font-size: 1rem;
  transition: background var(--df-transition), color var(--df-transition);
}

.stepper-step.active {
  background: var(--df-blue);
  color: #fff;
}

/* Hide bullets/numbers in the application list column */
.app-list *, .app-list, .app-list li {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

@media (max-width: 767px) {
  .container, main {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .stepper {
    flex-direction: column;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    transition: none !important;
  }
}

/* === Listing / Staff apps styles === */
/* Default: sidebar + wide center column so cards can extend */
.staff-grid { display: grid; /* left | center */ grid-template-columns: 200px minmax(866px, 1fr); gap: 24px; align-items: start; }
/* Keep two columns even when a card is open; details expand inline */
.staff-grid:has(.listing-card.active) { grid-template-columns: 200px minmax(866px, 1fr); }
/* When only the empty-state is present, reclaim the detail column so the panel can expand */
.staff-grid:has(#dealer-app-list > .empty-state) { grid-template-columns: 200px minmax(866px, 1fr); }
@media (min-width:1400px){
  .staff-grid:has(#dealer-app-list > .empty-state) { grid-template-columns: 200px minmax(866px, 1fr); }
}
.staff-apps-section { min-width: 560px; }
.listing-card { display: flex; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--df-border); border-radius: 10px; padding: 12px 12px 8px; align-items: flex-start; position: relative; flex-wrap: wrap; }
.listing-card:not(.active) { min-height: 0; }
/* When a card is closed, force the detail container to not affect layout */
.listing-card:not(.active) .app-detail-container {
  display: none !important;
  height: 0 !important;
  opacity: 0 !important;
}
/* Keep visible while animating open, even if .active hasn't been applied yet */
.listing-card:not(.active) .app-detail-container.animating {
  display: block !important;
}
.listing-card.active { align-items: flex-start; }
.listing-card .app-detail-container { flex-basis: 100%; width: 100%; margin-top: 12px; border-top: none; border-radius: 0; }
.listing-card .app-detail-container > .p-4 { padding: 16px !important; }
/* Smooth expand/collapse driven by JS using height (single transition) */
.listing-card .app-detail-container {
  height: 0;           /* collapsed by default */
  opacity: 0;
  overflow: hidden;    /* kept hidden during animation by JS */
  transition: none;    /* transition applied only when .animating */
  will-change: height, opacity;
}
.listing-card.active .app-detail-container { opacity: 1; }
.listing-card .app-detail-container.animating {
  transition: height 360ms cubic-bezier(.4,0,.2,1), opacity 220ms ease;
}
@media (prefers-reduced-motion: reduce){
  .listing-card .app-detail-container, .listing-card .app-detail-container.animating { transition: none !important; }
}
.listing-left { display:flex; gap:12px; align-items:center; min-width:0; }
.listing-title-line { display:flex; align-items:baseline; gap:8px; min-width:0; }
.listing-title-line .listing-title { flex:1 1 auto; }
.listing-title { font-weight:700; color:var(--df-text); display:inline-block; }
.listing-title:empty { display:none; }
.listing-ref { flex:0 0 auto; background:rgba(var(--df-blue-focus-rgb),0.14); color:var(--df-blue); font-weight:600; font-size:0.8rem; line-height:1.1; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.type-badge { margin-left:6px; }
.listing-sub { color:var(--df-text-muted); font-size:0.95rem; margin-top: 2px; }
.listing-meta { color:var(--df-text-muted); font-size:0.85rem; }
/* Ensure loan amount text matches the vehicle placeholder size */
.loan-amt { font-size: 0.85rem; }
.listing-right { text-align:right; min-width:120px; display:flex; flex-direction:column; align-items:flex-end; position:relative; overflow:visible; z-index:0; padding-bottom: 8px; }
/* badge spacing uses default flow; no extra overrides to preserve original layout */
.listing-badge { display:inline-block; padding:4px 8px; border-radius: var(--df-radius-btn); background:var(--color-bg-soft); font-weight:600; font-size:0.8rem; position:relative; z-index:0; }
/* Subtle progress ring around stage badge (starts at top center) */
/* Progress ring removed */
/* Stage-specific colouring reverted to neutral; badges use default background */
.listing-actions { margin-top:8px; display:flex; gap:8px; }
.listing-actions { position: relative; z-index: 1; }
.listing-actions .btn,
.listing-actions .button-secondary {
  /* Make action buttons a consistent, slimmer height */
  height: 36px;
  padding: 0 12px;
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: auto;
}
.listing-actions .js-save-app,
.listing-actions .js-open-app,
.listing-actions .js-cancel-edit {
  width: 65px; /* keep widths identical */
}
.listing-actions .btn,
.listing-actions .button-secondary { position: relative; z-index: 2; }
.listing-actions .button-secondary { font-size: 1rem; padding: 0 18px; font-weight: 500; }
.listing-card.active { box-shadow: 0 4px 20px rgba(0,0,0,0.08); border-color:rgba(var(--df-blue-focus-rgb),0.25); }
/* Bottom progress bar on listing cards */
.listing-card .listing-progress { position:absolute; left:0; right:0; bottom:0; height:4px; background: rgba(var(--df-blue-focus-rgb),0.10); border-bottom-left-radius:10px; border-bottom-right-radius:10px; overflow:hidden; pointer-events:none; }
.listing-card .listing-progress .listing-progress-bar { display:block; height:100%; width: calc(var(--pct, 0) * 1%); background: var(--df-blue); box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset; transition: width 220ms ease; }
.app-detail-container { background:transparent; border:none; border-radius:0; padding:0; margin-top:8px; }
/* Spacing between application cards */
.staff-app-list { display:flex; flex-direction:column; gap:22px; padding-bottom: 84px; /* keep clear of footer when last card is expanded */ }
.staff-apps-section #dealer-app-list { width:100%; overflow: visible; }
/* Center the single empty state card horizontally at wider width */
#dealer-app-list:has(> .empty-state) { flex-direction:row; justify-content:center; }
#dealer-app-list:has(> .empty-state) .empty-state {
  margin-left: 0;
  width: 100%;
  max-width: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: auto;
}

/* === Dealer cards tidy styling === */
.dealer-card { align-items:stretch; padding:14px 16px; gap:16px; }
/* Account settings form: force white background for inputs */
.account-form input[type=text],
.account-form input[type=email],
.account-form input[type=password],
.account-form textarea,
.account-form select {
  background:#fff !important;
}
.account-form .field.readonly input[readonly]{
  background:var(--color-bg-soft) !important;
  font-weight:600;
  color:var(--df-blue);
  border:1px solid var(--df-border);
}
.account-form .field.inline-shrink { max-width:180px; }
.account-form .app-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  gap: 14px;
}
/* allow quick-actions to wrap naturally based on available width */
.account-form .app-action-bar .btn,
.account-form .app-action-bar .button-secondary {
  height: var(--btn-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--btn-padding-x);
  box-sizing: border-box;
}
.account-form .app-action-bar .buy-rate-pill {
  height: var(--btn-height);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--btn-padding-x);
  background: #fff;
  border: 1px solid rgba(var(--df-blue-focus-rgb), 0.28);
  border-radius: 10px;
  font-weight: 600;
  font-size: var(--btn-font-size);
  color: var(--color-text);
  line-height: 1;
  box-sizing: border-box;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset;
  margin: 0;
}
.account-form .app-action-bar .quick-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.account-settings-heading { font-size:1.75rem; font-weight:800; font-style:italic; letter-spacing:.55px; text-transform:uppercase; background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; position:relative; padding:2px 4px 10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.dealer-card .listing-left { gap:16px; }
.dealer-card .dealer-info { display:flex; flex-direction:column; gap:3px; }
.dealer-card .dealer-title { margin-bottom:2px; }

/* Generic metric/info pill (used for Buy Rate display) */
.metric-box { display:flex; flex-direction:column; justify-content:center; gap:4px; padding:10px 18px; background:var(--color-bg-soft); border:1px solid var(--df-border); border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,0.02) inset; min-width:140px; min-height:56px; box-sizing:border-box; }
.metric-box .metric-label { font-size:0.70rem; letter-spacing:0.5px; font-weight:600; text-transform:uppercase; color:var(--color-text-muted); line-height:1.1; }
.metric-box .metric-value { font-size:1.05rem; font-weight:600; color:var(--df-blue); line-height:1.1; }
.metric-box:hover { border-color:rgba(var(--df-blue-focus-rgb),0.35); }
.dealer-card .dealer-actions { gap:10px; }
.dealer-card .dealer-identity { display:flex; align-items:center; gap:16px; }
.dealer-inline-edit { flex-basis:100%; width:100%; margin-top:12px; border-top:1px solid var(--df-border); }
.dealer-inline-edit .card.partial { box-shadow:none; border:none; padding:0; background:transparent; }
.dealer-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px 20px; margin-top:4px; }
.dealer-form-grid .field { display:flex; flex-direction:column; gap:6px; }
.dealer-form-grid .field.span-2 { grid-column:1 / -1; }
.dealer-form-grid input[type=text], .dealer-form-grid input[type=email], .dealer-form-grid input[type=password], .dealer-form-grid input[type=number], .dealer-form-grid input[type=file] { margin:0; padding:10px 12px; font-size:14px; }
.dealer-form-grid .logo-preview { background:#fff; border:1px solid var(--df-border); padding:6px 10px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; max-height:72px; max-width:200px; }
.dealer-form-grid .logo-preview img { max-height:60px; max-width:180px; object-fit:contain; display:block; }
.dealer-form-grid .hint { font-size:11px; color:#64748b; margin-top:2px; }
.dealer-form-actions { display:flex; gap:10px; margin-top:18px; align-items:center; }
.dealer-form-actions--right { justify-content:flex-end; }
.dealer-form-grid--compact { gap:12px 16px; }
.dealer-form-grid--compact .field input { background:#fff; padding:7px 10px; font-size:13px; line-height:1.25; }
.dealer-form-grid input[type="text"],
.dealer-form-grid input[type="email"],
.dealer-form-grid input[type="password"],
.dealer-form-grid input[type="number"],
.dealer-form-grid input[type="file"] {
  max-width: 210px;
}
/* Compact sizing for selects & password/number/email types inside compact grid */
.dealer-form-grid--compact .field select,
.dealer-form-grid--compact .field textarea { padding:7px 10px; font-size:13px; line-height:1.25; }
/* Slightly smaller file input wrapper height visual by reducing line-height */
.dealer-form-grid--compact .field input[type=file] { padding:4px 6px; font-size:13px; }
.dealer-edit-form.partial { background:var(--color-bg-soft); border:1px solid var(--df-border); padding:14px 16px 18px; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.04); }
.dealer-edit-form.partial .dealer-form-grid { margin-top:4px; }
/* Tighten vertical rhythm inside partial form */
.dealer-edit-form.partial .dealer-form-grid .field { gap:4px; }
.dealer-edit-form.partial .dealer-form-actions { margin-top:14px; }
.dealer-avatar { width:48px; height:48px; background:var(--color-bg-soft); border:1px solid var(--df-border); border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:18px; color:var(--color-primary); box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.dealer-info .dealer-title { font-weight:600; font-size:15px; color:var(--color-text-accent); }
.dealer-info .dealer-contact { font-size:13px; color:var(--df-text-muted); line-height:1.2; }
.dealer-info .dealer-email { font-size:12px; color:var(--color-text-muted); line-height:1.2; }
.dealer-actions-wrapper { display:flex; flex-direction:column; justify-content:center; }
.dealer-actions { display:flex; gap:8px; }
.dealer-card.active .js-inline-edit { display:none !important; }
.btn-slim { padding:6px 12px !important; font-size:12px !important; line-height:1.1; border-radius:8px; }
.btn-danger { background:var(--color-danger) !important; }
.btn-danger:hover, .btn-danger:focus { background:var(--color-danger-dark) !important; }

/* Dealer logo display */
.dealer-logo-wrapper { width:48px; height:48px; border-radius:12px; background:#fff; border:1px solid var(--df-border); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.dealer-logo { max-width:100%; max-height:100%; object-fit:contain; display:block; }

/* Centering wider dealer application areas */
.app-form-wrapper, .staff-grid { width:100%; }
.max-w-5xl { max-width:72rem; }
.max-w-6xl { max-width:84rem; }
.dealer-list { display:flex; flex-direction:column; gap:22px; }

/* Force New Application button to align exactly with sidebar field widths */
.staff-sidebar .new-app-btn { display:flex; width:100%; box-sizing:border-box; padding:10px 14px !important; align-items:center; justify-content:center; text-align:center; margin-bottom:12px; }
/* Sidebar Quick Application link styled like a secondary button */
.staff-sidebar .quick-app-btn {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
  color: var(--df-blue);
  border: 1px solid rgba(var(--df-blue-focus-rgb),0.28);
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.15;
  min-height: 40px;
  text-decoration: none !important;
}
.staff-sidebar .quick-app-btn:hover,
.staff-sidebar .quick-app-btn:focus,
.staff-sidebar .quick-app-btn:focus-visible {
  background: #fff;
  color: var(--df-blue);
  border-color: var(--df-blue);
  box-shadow: 0 0 0 3px rgba(var(--df-blue-focus-rgb),0.12);
  outline: none;
}

/* Align the gear emoji inside the Account button with the label baseline */
.account-link .gear-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 16px;
  font-size: 14px; /* slightly smaller so it optically centers */
  transform: translateY(1px);
}
.account-form-columns {
  display:flex;
  flex-wrap:wrap;
  gap:28px;
}
.account-form-col {
  flex:1 1 320px;
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
}
.account-form-columns .field { margin:0; }

/* Match inner tab radius to the outer tab group so corners align */
.staff-sidebar .staff-toggle-group[aria-label="Sections"] .staff-toggle { border-radius: inherit; }

/* Make the outer tab container (Applications/Completed) background white */
.account-form .app-action-bar { gap:18px; padding-top:24px; }
.account-form .quick-actions { gap:16px; }
.account-form .quick-actions .btn { min-width:150px; justify-content:center; }

/* === Unified Button Styling (flattened: solid brand blue, no gradients)
  Exclude .button-secondary so secondary buttons keep white background === */
.btn:not(.button-secondary), .button-primary, button:not(.button-secondary), input[type=submit]:not(.button-secondary) {
  background:var(--df-blue) !important;
  color:#fff !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
  padding:10px 16px !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.15 !important;
  box-shadow:0 2px 6px rgba(var(--df-blue-shadow-rgb),0.35);
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:background var(--df-transition), box-shadow var(--df-transition), transform var(--df-transition);
  text-decoration:none !important;
}
/* Inline withdraw “×” control next to stage badge */
.withdraw-inline-form { display: inline-block; margin-left: 6px; }
.withdraw-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  border: 1px solid #d1d5db; /* gray-300 */
  background: transparent;
  color: #6b7280; /* gray-500 */
  line-height: 1;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.withdraw-x:hover {
  background: #fee2e2; /* red-100 */
  color: #b91c1c; /* red-700 */
  border-color: #fca5a5; /* red-300 */
}
.withdraw-x:focus {
  outline: 2px solid #93c5fd; /* brand-ish focus */
  outline-offset: 2px;
}
.listing-right .listing-meta-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.listing-right .listing-meta-line .stage-withdraw {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.listing-right .listing-meta-line .withdraw-inline-form { margin-left: 0; }
.listing-right .listing-meta-line .withdraw-x {
  all: unset;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  padding: 0px 3px 3px 3px !important;
  margin: 0px 3px 3px 0px !important;
  border-radius: 8px !important;
  border: 1px solid #d1d5db !important; /* gray-300 */
  background: transparent !important;
  color: #6b7280 !important; /* gray-500 */
  line-height: 1 !important;
  font-size: 14px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.listing-right .listing-meta-line .withdraw-x:hover {
  background: #fee2e2 !important; /* red-100 */
  color: #b91c1c !important; /* red-700 */
  border-color: #fca5a5 !important; /* red-300 */
}
.btn:not(.button-secondary):hover, .button-primary:hover, button:not(.button-secondary):hover, input[type=submit]:not(.button-secondary):hover,
.btn:not(.button-secondary):focus-visible, .button-primary:focus-visible, button:not(.button-secondary):focus-visible, input[type=submit]:not(.button-secondary):focus-visible {
  background:var(--df-blue-hover) !important;
  box-shadow:0 0 0 2px rgba(var(--df-blue-focus-rgb),0.35), 0 3px 10px rgba(var(--df-blue-shadow-rgb),0.55);
  outline:none;
}
.btn:active, .button-primary:active, .button-secondary:active, button:active, input[type=submit]:active { transform:translateY(1px); }
/* Brand / primary emphasis */
/* Danger variant preserved */
.btn-danger { background:var(--color-danger) !important; color:#fff !important; border:1px solid var(--color-danger) !important; box-shadow:0 1px 2px rgba(0,0,0,0.08); }
.btn-danger:hover, .btn-danger:focus-visible { background:var(--color-danger-dark) !important; }
/* Compact variant for inline actions */
.btn-slim { padding:6px 12px !important; font-size:12px !important; }


@media (max-width: 1200px) {
  /* At slightly narrower desktops hide the right detail pane and allow a slightly smaller left rail */
  .staff-grid { grid-template-columns: 180px 1fr; }
}

@media (max-width: 640px) {
  .staff-grid { grid-template-columns: 1fr; }
  .staff-apps-section { min-width: auto; }
}

/* Ensure the detail pane can be shown when requested on narrower screens */
@media (max-width: 1200px) {
}

/* === Dealer New Application (tidy) === */
.app-new-card { background:var(--color-bg-panel); border:1px solid var(--df-border); border-radius:18px; padding:22px 26px 28px; box-shadow:0 6px 22px -4px rgba(0,0,0,0.06),0 2px 6px -1px rgba(0,0,0,0.04); }
.app-new-stepper { display:flex; flex-wrap:nowrap; gap:6px; margin-bottom:18px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.app-new-stepper::-webkit-scrollbar { display:none; }
.app-new-stepper a { position:relative; flex:1 1 auto; white-space:nowrap; text-align:center; height:var(--btn-height); padding:0 18px; border-radius:12px; font-size:12px; font-weight:600; line-height:1.15; display:inline-flex; align-items:center; justify-content:center; background:var(--color-bg-soft); color:var(--color-text-secondary); border:0; box-shadow:0 0 0 1px rgba(0,0,0,0.05) inset; transition:background var(--df-transition), color var(--df-transition), box-shadow var(--df-transition), transform var(--df-transition); letter-spacing:0.015em; min-width:90px; }
/* Application Type Toggle */
.app-type-toggle { display:grid; grid-template-columns: 1fr; gap:16px; margin:12px 0 30px; padding:0; background:transparent; border:none; border-radius:0; justify-content:unset; }
@media (min-width: 640px) { .app-type-toggle { grid-template-columns: repeat(3, 1fr); gap:48px; } }
/* Make each option a true grid item without extra margins so spacing is controlled solely by gap */
.app-type-option { display:block; min-width:0; max-width:none; }
/* Remove legacy inter-item margins to ensure equal gaps */
.app-type-option + .app-type-option { margin-left:0; }
@media (max-width:640px){ .app-type-option { flex:1 1 auto; max-width:100%; min-width:0; } }
@media (max-width:640px){ .app-type-option + .app-type-option { margin-left:0; margin-top:0; } }
.app-type-option { flex:1; position:relative; }
.app-type-option input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.app-type-btn { display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; background:var(--color-bg-panel); border:1px solid var(--df-border); border-radius:14px; padding:12px 16px; min-height:72px; font-weight:600; color:var(--color-text-accent); font-size:.95rem; line-height:1.22; box-shadow:0 2px 5px rgba(0,0,0,0.04); transition:background .18s,border-color .18s, box-shadow .18s, transform .18s; }
.app-type-btn small { font-weight:600; font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--df-text-muted); }
.app-type-option input:focus + .app-type-btn { box-shadow:0 0 0 3px rgba(var(--df-blue-focus-rgb),0.25); outline:none; }
.app-type-option input:checked + .app-type-btn { background:var(--df-blue); color:#fff; border-color:var(--df-blue); box-shadow:0 2px 8px rgba(var(--df-blue-shadow-rgb),0.30); outline:4px solid transparent; }
.app-type-option input:checked + .app-type-btn small { color:#ffffff;}
.app-type-option input:not(:checked):hover + .app-type-btn { background:var(--color-bg-soft); border-color:var(--color-primary); }
.app-type-btn:active { transform:translateY(1px); }
.app-new-stepper a:hover { background:var(--color-bg-soft); color:var(--color-primary-dark); }
  .app-new-stepper a.active { background:var(--df-blue); color:#fff; box-shadow:0 4px 10px -2px rgba(var(--df-blue-shadow-rgb),0.38); cursor: default; }
/* Center first-step application type buttons */
.type-step-center { display:flex; justify-content:center; }
.type-step-center .field { width:100%; }
.type-step-center .app-type-toggle { justify-content:center; width:100%; max-width:760px; margin-left:auto; margin-right:auto; }
/* Center the two type buttons on desktop/tablet */
@media (min-width: 640px) {
  .type-step-center .app-type-toggle {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    justify-content: center;
  }
}
/* Do not change appearance when hovering the selected tab */
.app-new-stepper a.active:hover { background:var(--df-blue); color:#fff; box-shadow:0 4px 10px -2px rgba(var(--df-blue-shadow-rgb),0.38); }
.dealer-app-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px 22px; margin-top:12px; max-width:760px; padding:0; margin-left:auto; margin-right:auto; }
/* 4-column variant for quick application: keep same overall width as full application */
.dealer-app-grid.cols-4 { grid-template-columns: repeat(4, 1fr); max-width: 760px; column-gap: 18px; }
@media (max-width: 1024px){ .dealer-app-grid.cols-4 { grid-template-columns: repeat(3, 1fr); max-width: 860px; } }
@media (max-width: 768px){ .dealer-app-grid.cols-4 { grid-template-columns: repeat(2, 1fr); max-width: 640px; } }
@media (max-width: 480px){ .dealer-app-grid.cols-4 { grid-template-columns: 1fr; max-width: 100%; } }
/* Quick application: no extra padding needed when max-width matches full application */
.quick-app-form .quick-inner { max-width:none; margin-left:auto; margin-right:auto; padding-left:0; padding-right:0; }
/* Let quick application use full wrapper width (align with full app) */
.quick-app-form { width:100%; max-width:none; }
.quick-app-form .dealer-app-grid { max-width:none; }
.quick-app-form .dealer-app-grid.cols-4 { max-width:none; }
.quick-app-form .app-action-bar { width:100%; max-width:none; }
.dealer-app-grid .field { display:flex; flex-direction:column; gap:6px; margin:0; position:relative; }
/* Subtle separation background (only visible if fields butt visually) */
.dealer-app-grid .field:before { content:""; position:absolute; top:0; bottom:0; left:-11px; width:11px; pointer-events:none; background:var(--gradient-fade-white-right); opacity:0.9; }
.dealer-app-grid .field:first-child:before { display:none; }
/* Prevent left overflow from the separator in the quick form */
.quick-app-form .dealer-app-grid .field:before { display: none; }
/* In 4-col layout, hide the separator on first column cells of each row */
@media (min-width: 1024px){
  .dealer-app-grid.cols-4 > .field:nth-child(4n+1)::before { display: none; }
}
/* Inputs */
.dealer-app-grid .field input:not([type=checkbox]):not([type=radio]),
.dealer-app-grid .field select,
.dealer-app-grid .field textarea { margin:0; padding:8px 12px; font-size:14px; line-height:1.25; border:1px solid var(--df-border); border-radius:6px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.05); transition:border-color var(--df-transition), box-shadow var(--df-transition), background var(--df-transition); min-height:36px; height:auto; box-sizing:border-box; }
/* Enforce identical widths for all controls within grid columns */
.dealer-app-grid .field input:not([type=checkbox]):not([type=radio]),
.dealer-app-grid .field select,
.dealer-app-grid .field textarea,
.dealer-app-grid .field .df-select,
.dealer-app-grid .field .df-select .df-select-control { width:100%; max-width:100%; }
.dealer-app-grid .field .df-select { margin:0; }
.review-notes-grid { max-width:900px; margin-left:auto; margin-right:auto; }
.review-notes-grid .field { max-width:900px; margin-left:auto; margin-right:auto; width:100%; }
/* Match textarea font to other inputs */
.dealer-app-grid .field textarea { font-family: inherit; }
.dealer-app-grid .field input[type=date] { padding:6px 10px; min-height:36px; }
.dealer-app-grid .field input, .dealer-app-grid .field select { vertical-align:middle; }
.dealer-app-grid { row-gap:16px; }
/* Span utility: when present, make section headers span full grid */
.dealer-app-grid .field.span-2 { grid-column: 1 / -1; }
.dealer-app-grid section.fieldset-sep.span-2 { grid-column: 1 / -1; }
.dealer-app-grid .field textarea { height:auto; }
/* Inputs and textareas keep the soft focus ring */
.dealer-app-grid .field input:focus,
.dealer-app-grid .field textarea:focus { outline:none; border-color:var(--df-blue-accent); box-shadow:0 0 0 2px rgba(var(--df-blue-focus-rgb),0.18); background:#f8fcff; }
/* Selects: use same soft focus ring as inputs for consistency */
.dealer-app-grid .field select:focus,
.dealer-app-grid .field select:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(var(--df-blue-focus-rgb),0.18); border-color:var(--df-blue-accent); background:#f8fcff; }
/* Hover subtle */
.dealer-app-grid .field input:hover,
.dealer-app-grid .field select:hover,
.dealer-app-grid .field textarea:hover { border-color:var(--df-blue); }
/* Numeric alignment */
.dealer-app-grid .field input[type=number] { text-align:right; font-variant-numeric:tabular-nums; }
/* Equal visual width harmony */
.dealer-app-grid .field input[type=date] { min-width:160px; }
/* Compact micro-label spacing */
.dealer-app-grid .field .micro-label { margin-bottom:0; font-size:10px; letter-spacing:0.05em; }
.dealer-app-grid .field { padding:0; background:transparent; border:none; border-radius:0; box-shadow:none; }
.dealer-app-grid .field:hover { background:transparent; }
.dealer-app-grid .field:focus-within { background:transparent; box-shadow:none; }
.dealer-app-grid .field[data-currency],
.dealer-app-grid .field[data-suffix] {
  position: relative;
}
.dealer-app-grid .field[data-currency] label,
.dealer-app-grid .field[data-suffix] label,
.dealer-app-grid .field[data-currency] > small,
.dealer-app-grid .field[data-suffix] > small {
  display: block;
  width: 100%;
}
.dealer-app-grid .field .input-affix {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--df-border);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  padding: 0px 0px 0px 5px;
  min-height: 36px;
  transition: border-color var(--df-transition), box-shadow var(--df-transition), background var(--df-transition);
}
.dealer-app-grid .field .input-affix:hover {
  border-color: var(--df-blue);
}
.dealer-app-grid .field .input-affix:focus-within {
  border-color: var(--df-blue-accent);
  box-shadow: 0 0 0 2px rgba(var(--df-blue-focus-rgb),0.18), 0 1px 2px rgba(0,0,0,0.05);
  background: #f8fcff;
}
.dealer-app-grid .input-affix__prefix,
.dealer-app-grid .input-affix__suffix {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 1.5em;
  text-align: center;
  line-height: 1.4;
  height: 100%;
  padding-bottom: 2px;
}
.dealer-app-grid .field .input-affix input {
  flex: 1 1 auto;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 8px 0;
  font-size: 14px;
  min-width: 0;
  height: auto;
  border-radius: 0 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.dealer-app-grid .field .input-affix input:focus {
  outline: none;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.dealer-app-grid .field .input-affix:has(input:required:invalid) {
  border-color: var(--df-border);
  background: #fff;
}
.dealer-app-grid .field .input-affix:has(input.error) {
  border-color: var(--color-danger) !important;
  background: var(--color-danger-bg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
    .dealer-app-grid .field input:not(.login-error-input)::placeholder,
    .dealer-app-grid .field textarea:not(.login-error-input)::placeholder {
      color: rgba(15, 23, 42, 0.36);
      opacity: 1;
    }
.quick-app-form .dealer-app-grid .field input::placeholder,
.quick-app-form .dealer-app-grid .field textarea::placeholder {
  color: rgba(15, 23, 42, 0.36);
  opacity: 1;
}
/* Neutralize previous orange invalid highlight */
/* Keep neutral style for untouched invalid required inputs, but allow focus state to override background */
.dealer-app-grid .field input:required:invalid { border-color:var(--df-border); background:#fff; }
/* When focusing an empty required (invalid) field, still show focus background for consistency */
.dealer-app-grid .field input:required:invalid:focus { background:#ffffff; border-color:var(--df-blue-accent); }
.dealer-app-grid .field input.error { border-color:var(--color-danger) !important; background:var(--color-danger-bg); }
.dealer-app-grid .field input[type=number]::-webkit-outer-spin-button,
.dealer-app-grid .field input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.dealer-app-grid .field input[type=number] { -moz-appearance:textfield; appearance:textfield; }
.dealer-app-grid .field-group-inline { display:flex; gap:12px; }
.dealer-app-grid .field-group-inline .field { flex:1; }
.dealer-app-grid .field.compact input { padding:6px 10px; font-size:13px; }
.dealer-app-grid .field.readonly-highlight input[readonly] { background:var(--color-bg-soft); font-weight:600; color:var(--color-text-accent); }

/* Make the Terms "Total to finance ($)" display look non-interactive */
.dealer-app-grid .field .calc-total-finance {
  pointer-events: none; /* avoid click focus */
  user-select: none;    /* prevent selection highlight */
  background: #fff;     /* keep neutral background */
}
.dealer-app-grid .field .input-affix:has(.calc-total-finance) {
  pointer-events: none;
  border-color: var(--df-border);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.dealer-app-grid .field .input-affix:has(.calc-total-finance):hover {
  border-color: var(--df-border);
}
.dealer-app-grid .field small.inline-hint { font-size:10px; letter-spacing:.05em; color:var(--color-text-muted); margin-top:2px; display:block; }
.amount-calc-fade { position:relative; }
.amount-calc-fade:after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:10px; box-shadow:0 0 0 1px rgba(0,0,0,0.05) inset; }
/* Remove orange border from previously required marker */
.dealer-app-grid .field.required-prev input[required] { border-color:var(--df-border); }
.app-new-card { background:#fff; border:1px solid var(--df-border); border-radius:14px; padding:24px 26px 30px; box-shadow:0 4px 18px rgba(0,0,0,0.05); }
.app-new-stepper { display:flex; flex-wrap:wrap; gap:10px; background:var(--color-bg-panel); padding:14px 16px; border:1px solid var(--df-border); border-radius:14px; box-shadow:0 2px 6px rgba(0,0,0,0.04); }
.app-new-stepper a { flex:1; min-width:90px; text-align:center; background:var(--color-bg-soft); height:var(--btn-height); padding:0 18px; border-radius:10px; font-weight:600; font-size:13px; color:var(--color-primary-dark); position:relative; transition:background .18s, color .18s, box-shadow .18s; display:inline-flex; align-items:center; justify-content:center; }
/* consolidated above - removed duplicate .app-new-stepper a.active rule */
.app-new-stepper a:not(.active):hover { background:var(--color-bg-soft); }
.app-new-stepper a:focus-visible { outline:2px solid #0ea5e9; outline-offset:2px; }
.app-new-stepper a.disabled { cursor:not-allowed; background:var(--color-bg-soft); color:var(--color-text-faint); border:1px dashed var(--df-border); box-shadow:none; }
.app-new-stepper a.disabled:hover { background:var(--color-bg-soft); color:var(--color-text-faint); }
/* Completed steps: light blue background (only when not active) */
.app-new-stepper a.complete:not(.active) {
  background: rgba(var(--df-blue-rgb, 20,130,250), 0.12);
  color: var(--color-primary-dark);
  box-shadow: 0 0 0 1px rgba(var(--df-blue-rgb, 20,130,250), 0.20) inset;
}
.app-new-stepper a.incomplete-error {
  background: rgba(248, 113, 113, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.24);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.12) inset;
}
.app-new-stepper a.incomplete-error:hover {
  background: rgba(248, 113, 113, 0.18);
  color: #b91c1c;
}
.app-new-stepper a.incomplete-error.active {
  background: rgba(220, 38, 38, 0.18);
  color: #991b1b;
  box-shadow: 0 4px 12px -4px rgba(220, 38, 38, 0.28);
}
/* Single-tab variant (quick application) */
.app-new-stepper.single { gap:6px; padding:8px 12px; }
.app-new-stepper.single a { flex:0 0 auto; min-width:auto; }
.app-new-stepper.single.single-full { padding:10px 14px; }
.app-new-stepper.single.single-full a { flex:1 1 100%; width:100%; text-align:center; }
/* Quick application action bar normalization */
.quick-action-bar {
  margin-top:36px !important;
  /* Match full application .app-actions divider */
  border-top: 1px solid rgba(13, 51, 87, 0.08);
  padding-top: 16px;
}
.quick-action-bar .quick-actions [data-variant] { height:var(--btn-height); display:inline-flex; align-items:center; justify-content:center; padding:0 22px; font-weight:600; line-height:1.05; border-radius:10px; }
.quick-action-bar .quick-actions [data-variant=secondary] { background:#fff; border:1px solid rgba(var(--df-blue-focus-rgb,0,123,255),0.30); color:var(--color-text); transition:background .18s, color .18s, box-shadow .18s; }
.quick-action-bar .quick-actions [data-variant=secondary]:hover, .quick-action-bar .quick-actions [data-variant=secondary]:focus { color:var(--df-blue); }
.quick-action-bar .quick-actions [data-variant=primary] { box-shadow: none; }
.quick-action-bar .quick-actions [data-variant=primary]:hover,
.quick-action-bar .quick-actions [data-variant=primary]:focus,
.quick-action-bar .quick-actions [data-variant=primary]:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--df-blue-focus-rgb), 0.15);
}
.quick-action-bar .quick-actions .cancel-btn { height: 38px; }
.quick-action-bar .quick-actions a.convert-btn { height:var(--btn-height); display:inline-flex; align-items:center; padding:0 18px; }
.dealer-app-grid section.fieldset-sep { grid-column:1/-1; display:flex; align-items:center; gap:14px; margin:16px 0 4px; position:relative; }
.dealer-app-grid section.fieldset-sep h4 { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; margin:0; font-weight:700; color:var(--color-text-secondary); }
.dealer-app-grid section.fieldset-sep:before { content:""; flex:1; height:1px; background:var(--gradient-separator-fade); order:2; }
.dealer-app-grid .field.inline-checkbox { flex-direction:row; align-items:center; }
.dealer-app-grid .field.inline-checkbox label { margin:0; font-weight:500; font-size:12px; text-transform:none; letter-spacing:0; }
.review-summary { background:#fff; padding:22px 0px 40px; }
.review-summary { margin-bottom: 16px; }
.review-summary .review-grid { 
  display:grid; 
  grid-template-columns:140px minmax(0,1fr) 140px minmax(0,1fr); /* two columns of pairs */
  gap:6px 28px; 
  font-size:13px; 
}
/* Review notes block styling */
.review-notes-block { margin-top: 16px; }
.review-notes-block .micro-label { display:block; margin-bottom:6px; letter-spacing:.02em; }
.review-notes-block textarea { min-height:120px; resize:vertical; }
/* Ensure the two-column layout wins over page-local .app-detail .review-grid rule */
.staff-apps-section .listing-card .app-detail .review-summary .review-grid { 
  grid-template-columns:140px minmax(0,1fr) 140px minmax(0,1fr);
}
/* Inline edit mode: revert to a single pair per row for clarity */
.staff-apps-section .listing-card .app-detail.inline-editing .review-summary .review-grid { 
  grid-template-columns:140px minmax(0,1fr);
  align-items: center; /* vertically center labels with inputs in edit mode */
}
/* Ensure both cells in the row are centered to each other in edit mode */
.staff-apps-section .listing-card .app-detail.inline-editing .review-summary .r-label,
.staff-apps-section .listing-card .app-detail.inline-editing .review-summary .r-value {
  align-self: center;
}
/* Remove default margins on inline edit inputs to keep perfect vertical alignment */
.staff-apps-section .listing-card .app-detail.inline-editing .review-summary .r-edit-input {
  margin: 0;
}
/* Responsive fallback to single column of pairs on narrow screens */
@media (max-width: 900px){
  .review-summary .review-grid { grid-template-columns:140px minmax(0,1fr); }
}
.review-summary .r-label { font-weight:600; color:var(--color-text-secondary); text-align:right; }
.review-summary .r-value { color:#111; font-weight:500; min-width:0; }
.review-summary .review-heading { margin:0 0 14px; font-size:1.05rem; letter-spacing:.01em; }
/* Notes cell wrapping in review grids */
.review-summary .r-notes { white-space:pre-wrap; line-height:1.35; }
/* Auto-placeholder for empty values in review grid */
.review-summary .review-grid .r-value:empty::after { content:'—'; color:#111; }
.app-new-card .review-summary {
  background:#f9fbff;
  border:1px solid rgba(41,149,224,0.12);
  border-radius:12px;
  padding:20px 20px 24px;
  box-shadow:0 3px 12px rgba(15,23,42,0.06);
}
.app-new-card .review-summary .review-grid {
  gap:6px 20px;
  line-height:1.4;
}
.app-new-card .review-summary .r-label {
  text-align:left;
  color:#0f172a;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.01em;
}
.app-new-card .review-summary .r-value {
  color:#5b6b7c;
  font-size:14px;
  font-weight:400;
}
.app-new-card .review-summary .review-grid .r-value:empty::after { color:#5b6b7c; }
.staff-apps-section .listing-card .app-detail .review-summary {
  background:#f9fbff;
  border:1px solid rgba(41,149,224,0.12);
  border-radius:12px;
  padding:20px 20px 24px;
}
.staff-apps-section .listing-card .app-detail .review-summary .review-grid {
  gap:6px 20px;
  line-height:1.4;
  font-size:13px;
}
.staff-apps-section .listing-card .app-detail .review-summary .r-label {
  text-transform:none;
  letter-spacing:0.01em;
  font-size:13px;
  font-weight:600;
  color:#0f172a;
  text-align:left;
}
.staff-apps-section .listing-card .app-detail .review-summary .r-value {
  font-size:14px;
  font-weight:400;
  color:#5b6b7c;
}
.review-summary .review-grid .r-value:empty::after { content:'—'; color:#5b6b7c; }
.staff-apps-section .listing-card .app-detail .review-summary .review-grid > *:nth-child(4n+1) {
  border-right:none;
  padding-right:18px;
}
@media (max-width:900px){
  .staff-apps-section .listing-card .app-detail .review-summary { padding:18px 16px 20px; }
  .staff-apps-section .listing-card .app-detail .review-summary .review-grid { grid-template-columns:140px minmax(0,1fr); gap:6px 16px; }
  .staff-apps-section .listing-card .app-detail .review-summary .review-grid > *:nth-child(4n+1) { border-right:none; padding-right:0; }
  .staff-apps-section .listing-card .app-detail .review-summary .r-label { text-align:right; }
}
.uploaded-docs-list { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:13px; }
.uploaded-docs-list li { background:var(--color-bg-soft); padding:8px 10px 9px; border-radius:8px; display:flex; flex-direction:column; gap:2px; border:1px solid rgba(0,0,0,0.05); }
.uploaded-docs-list .doc-name { font-weight:600; color:var(--color-text-accent); font-size:12.5px; }
.uploaded-docs-list .doc-meta { font-size:11px; color:var(--color-text-muted); letter-spacing:.03em; }
.app-actions { display:flex; justify-content:space-between; align-items:center; margin-top:36px; gap:18px; flex-wrap:wrap; border-top:1px solid rgba(13, 51, 87, 0.08); padding-top:16px; }
.app-actions .right { display:flex; gap:12px; flex-wrap:wrap; }
/* Left-side actions (Back/Discard): use flex gap for consistent spacing */
.app-actions > div:first-child { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Remove legacy inline margin from Discard form so gap controls spacing */
.app-actions form[action$="/delete"] { margin-left: 0 !important; }
/* Dealer application action buttons: make secondary buttons white like Account/Quick actions */
.app-actions .button-secondary {
  background:#fff;
  color:var(--df-blue);
  border: 1px solid rgba(var(--df-blue-focus-rgb),0.28);
}
/* Keep secondary buttons white on hover/focus within app actions */
.app-actions .button-secondary:hover, .app-actions .button-secondary:focus-visible, .app-actions .button-secondary:focus {
  background:#fff;
  color:var(--df-blue);
  border-color: var(--df-blue);
  box-shadow: 0 0 0 3px rgba(var(--df-blue-focus-rgb),0.12);
}
/* Discard (delete) variant: default like secondary; hover flips to red to emphasize destructive action */
.app-actions form[action$="/delete"] .button-secondary:hover,
.app-actions form[action$="/delete"] .button-secondary:focus-visible,
.app-actions form[action$="/delete"] .button-secondary:focus,
.app-actions .button-secondary[data-no-spa]:hover,
.app-actions .button-secondary[data-no-spa]:focus-visible,
.app-actions .button-secondary[data-no-spa]:focus {
  color: var(--color-danger);
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}
/* Align heights and padding of primary/secondary for a consistent row */
.app-actions .btn,
.app-actions .button-secondary {
  height:40px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  box-sizing:border-box;
  font-weight:600;
}
.app-form-note { font-size:12px; color:var(--color-text-secondary); margin-top:4px; line-height:1.3; background:var(--color-bg-soft); padding:8px 10px; border-radius:8px; border:1px solid var(--df-border); }
.inline-reveal-btn { background:var(--color-primary-dark); color:#fff; border:none; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; font-weight:700; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,0.2); }
.inline-reveal-btn:hover { background:var(--color-primary); }
.docs-expand { margin-top:14px; font-size:13px; }
.docs-expand summary { cursor:pointer; font-weight:600; color:var(--df-blue-hover); }
.docs-expand[open] summary { margin-bottom:6px; }
.review-docs { list-style:disc; padding-left:20px; margin:0; display:flex; flex-direction:column; gap:3px; }
.review-docs li { font-size:12px; color:var(--color-text-secondary); }
.review-docs .doc-ext { color:var(--color-text-muted); font-size:11px; }
.consent-line { margin:50px 0px 0px 70px;  display:flex; align-items:center; }
.consent-line label { display:inline-flex; align-items:center; gap:10px; margin:0; font-size:14px; font-weight:600; color:var(--color-text); }
.consent-line input[type=checkbox] { width:18px; height:18px; min-height:0; margin:0; padding:0; border:none; box-shadow:none; background:transparent; accent-color: var(--df-blue, #2563eb); }
.consent-line a { color: var(--df-blue); text-decoration: underline; }
.consent-line a:hover, .consent-line a:focus { color: var(--df-blue-hover); }
/* Empty state */
.empty-state { border:1px solid rgba(0,0,0,0.08); background:var(--color-bg-panel); padding:46px 42px 50px; border-radius:24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; color:var(--color-text-secondary); box-shadow:0 4px 14px -2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04); }
.account-settings-card { margin:0 auto; padding:24px 30px 28px; border-radius:14px; background:var(--color-bg-panel); border:1px solid rgba(0,0,0,0.10); box-shadow:0 2px 6px rgba(0,0,0,0.05); overflow:hidden; width:100%; max-width: 960px; box-sizing:border-box; }
.account-settings-wrap { max-width: 100%; margin-left:auto; margin-right:auto; }
.account-settings-heading { margin:0 0 10px; font-size:1.25rem; font-weight:600; letter-spacing:.01em; color:var(--df-blue); }
.account-settings-card .field { display:flex; flex-direction:column; gap:6px; }
.account-settings-card .field + .field { margin-top:16px; }
.account-settings-card label { font-size:13px; font-weight:600; color:var(--color-text-secondary); letter-spacing:.03em; text-transform:uppercase; }
.account-settings-card input[type=text],
.account-settings-card input[type=email],
.account-settings-card input[type=password],
.account-settings-card input[type=tel] { margin:0; padding:10px 14px; font-size:14px; border-radius:10px; background:var(--color-bg-soft); border:1px solid var(--df-border); box-sizing:border-box; width:100%; }
.account-settings-card input:focus { background:var(--color-bg-soft); }
.account-settings-card .hint { font-size:11px; font-weight:500; color:var(--color-text-muted); letter-spacing:0; text-transform:none; }
.account-settings-card .actions { border-top:1px solid var(--df-border); margin-top:8px; padding-top:18px; }
.empty-state .empty-icon { font-size:54px; line-height:1; filter:grayscale(.15); opacity:.9; }
.empty-state .empty-main { font-size:1.25rem; font-weight:650; color:var(--df-blue); letter-spacing:.01em; }
.empty-state .empty-sub { font-size:14px; color:var(--color-text-muted); max-width:560px; line-height:1.5; }
.empty-state .empty-cta { margin-top:8px; }
.empty-state .empty-cta.btn { display:inline-flex; align-items:center; justify-content:center; height:auto; min-height:34px; padding:6px 16px !important; font-size:13px !important; font-weight:600; line-height:1.15; }
.inline-field-row input { flex:1 1 auto; }

/* Account form: ensure the paired field rows lay out two-wide on desktop and spacing is consistent */
.page-account .account-settings-card .grid { display: grid; grid-template-columns: 1fr; gap: 16px 22px; align-items: start; }
@media (min-width: 768px) {
  .page-account .account-settings-card .grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 22px; row-gap: 16px; }
}
/* Remove extra margins between fields inside grid; rely on grid gap for vertical rhythm */
.page-account .account-settings-card .grid .field { margin: 0 !important; }
.page-account .account-settings-card .grid .field + .field { margin-top: 0 !important; }

/* Make Quick Application the same width as Full */
.app-form-wrapper { max-width: 80rem; margin-left:auto; margin-right:auto; padding-bottom: clamp(96px, 12vh, 160px); } /* keep action buttons off the bottom edge */

/* When a dropdown opens inside the quick app, increase bottom clearance so the page can scroll
   and the dropdown menu never collides with the bottom edge. Uses :has (modern browsers).
   A JS fallback adds body.df-select-open to support older engines. */
.app-form-wrapper:has(.quick-app-form .df-select.open) {
  padding-bottom: clamp(180px, 28vh, 340px);
}
body.df-select-open .app-form-wrapper {
  padding-bottom: clamp(180px, 28vh, 340px);
}

/* Remove inner card cap only for Quick form */
.quick-app-form.app-new-card {
  width: 100% !important;
  max-width: 65rem !important;  /* Match this to your header width */
  margin-left: auto;
  margin-right: auto;
}

/* Ensure inner grid/action bar also fill the wrapper */
.quick-app-form .dealer-app-grid,
.quick-app-form .app-action-bar {
  width: 100%;
  max-width: none;
  overflow-x: hidden;
}

/* Quick form precise tweaks */
/* Ensure the Vehicle Type dropdown matches input height inside the quick form only */
.quick-app-form .dealer-app-grid .df-select-control { min-height: 36px; height: 36px; padding: 6px 10px; }

/* Reserve bottom clearance so dropdowns can fully open and the page can scroll (handled by wrapper padding) */
.app-form-wrapper .quick-app-form { margin-bottom: 0; }

/* Keep 4 equal columns on desktop */
@media (min-width: 1024px) {
  .dealer-app-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* === Global themed select component (.df-select) ===
   Used by enhanced selects across the app (e.g., dashboard stage filter) */
.df-select { position: relative; width: 100%; }
.df-select.open { z-index: 2000; }
/* Keep native select in DOM for form semantics but visually hidden */
.df-select .df-select-native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.df-select-control { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--df-border); border-radius: 10px; background: #fff; padding: 8px 12px; min-height: 36px; font-size: 13px; line-height: 1.2; color: #334155; box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer; user-select: none; box-sizing: border-box; }
.df-select-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-select-arrow { flex: 0 0 auto; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center; background-size: 14px 14px; opacity: 0.95; transition: transform var(--df-transition), opacity var(--df-transition);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%232995e0"><path d="M5.23 7.21a.75.75 0 011.06-.02L10 10.77l3.71-3.58a.75.75 0 111.04 1.08l-4.24 4.1a.75.75 0 01-1.04 0L5.25 8.27a.75.75 0 01-.02-1.06z"/></svg>');
}
.df-select.open .df-select-arrow { transform: rotate(180deg); opacity: 1; }
.df-select-control:focus-visible { outline: none; border-color: var(--df-blue-accent); box-shadow: 0 0 0 2px rgba(var(--df-blue-focus-rgb), 0.18); }
.df-select.open .df-select-control { border-color: var(--df-blue); box-shadow: 0 0 0 2px rgba(var(--df-blue-focus-rgb), 0.18); }

.df-select-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; display: none; background: #fff; border: 1px solid var(--df-border); border-radius: 10px; padding: 6px; box-shadow: 0 10px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05); max-height: 240px; overflow: auto; overflow-x: hidden; z-index: 1200; box-sizing: border-box; max-width: 100%; }
.df-select.open .df-select-menu { display: block; }
.df-option { padding: 8px 10px; border-radius: 8px; font-size: 13px; color: #334155; cursor: pointer; line-height: 1.2; white-space: normal; word-break: break-word; }
.df-option:hover { background: #ffffff; }
.df-option[aria-selected="true"] { background: #ffffff; color: var(--df-blue-hover); font-weight: 600; }
.df-option[aria-disabled="true"] { color: #94a3b8; cursor: default; }
.df-option[aria-disabled="true"]:hover { background: transparent; }

/* Sidebar compact sizing for enhanced selects */
.staff-sidebar .df-select-control { height: 40px; padding: 0 12px; font-size: 12.5px; }
.staff-apps-section .js-stage-form .df-select { width: auto; min-width: 148px; }
.staff-apps-section .js-stage-form .df-select-control { min-height: 32px; padding: 6px 12px; font-size: 12.5px; }
.staff-apps-section .js-stage-form .df-select-menu { min-width: 160px; z-index: 1400; }
.staff-sidebar .df-select-menu { font-size: 12.5px; }

/* Ensure enhanced control aligns with grid inputs when used inside grids */
.dealer-app-grid .field .df-select-control { padding: 8px 12px; min-height: 36px; font-size: 14px; border-radius: 6px; }
.dealer-app-grid .field .df-select-menu { margin-top: 6px; }
/* Quick Application: allow dropdowns to escape the card (no inner scroll/clipping) */
.app-form-wrapper { overflow: visible !important; }
.quick-app-form { overflow: visible !important; }
.quick-app-form .quick-inner { overflow: visible !important; max-height: none !important; }
.quick-app-form.app-new-card { overflow: visible !important; overflow-y: visible !important; max-height: none !important; }
/* Neutralize any utility classes that might add inner scroll/clipping within the quick form */
.quick-app-form .overflow-hidden { overflow: visible !important; }
.quick-app-form .overflow-auto { overflow: visible !important; }
.quick-app-form .overflow-y-auto { overflow-y: visible !important; }
.quick-app-form .overflow-x-auto { overflow-x: visible !important; }

/* --- App Chat --- */
.app-chat{margin:24px 0 10px;padding:20px;border:1px solid rgba(41,149,224,0.12);border-radius:16px;background:#f9fbff;box-shadow:0 10px 26px rgba(15,64,120,0.06);display:flex;flex-direction:column;align-items:center;overflow:visible}
.app-chat-thread{display:flex;flex-direction:column;gap:18px;width:100%;max-width:700px}
.app-chat-messages{max-height:320px;overflow-y:auto;overflow-x:visible;display:flex;flex-direction:column;gap:12px;padding:24px 24px 24px}
.app-chat-row{display:flex;flex-direction:column;align-self:flex-start;margin:0;padding:12px 16px;border-radius:18px 18px 18px 6px;background:#ffffff;box-shadow:0 6px 18px rgba(17,58,112,0.08);max-width:85%}
.app-chat-row.is-dealer{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--df-blue);color:#ffffff;box-shadow:0 8px 20px rgba(41,149,224,0.25)}
.app-chat-row.is-staff{background:#ffffff;color:#0f172a}
.app-chat-meta{font-size:10px;line-height:1.3;color:#64748b;margin-top:8px;opacity:.85}
.app-chat-row.is-dealer .app-chat-meta{text-align:right;color:rgba(255,255,255,0.8)}
.app-chat-row .app-chat-body{white-space:pre-wrap;word-break:break-word;font-size:14px;color:#0f172a}
.app-chat-row.is-dealer .app-chat-body{color:#ffffff}
.app-chat-form{margin:0;display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(41,149,224,0.16);border-radius:12px;background:#ffffff;box-shadow:0 6px 18px rgba(15,64,120,0.08)}
.app-chat-input{flex:1 1 auto;border:1px solid rgba(41,149,224,0.2);background:#ffffff;padding:8px 10px;margin:0;color:#0f172a;font-family:var(--df-font);font-size:14px;line-height:1.3;border-radius:10px;box-shadow:none;transition:box-shadow 160ms ease,border-color 160ms ease,background 160ms ease}
.app-chat-input::placeholder{color:#8091ad;font-weight:500;letter-spacing:.01em;font-size:14px;font-family:var(--df-font)}
.app-chat-input:focus{outline:none;background:#f6faff;border-color:rgba(var(--df-blue-focus-rgb),0.55);box-shadow:0 0 0 2px rgba(var(--df-blue-focus-rgb),0.18)}
.app-chat-form .btn{white-space:nowrap;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:12px;background:var(--df-blue) !important;color:#ffffff !important;border:none;box-shadow:0 3px 10px rgba(var(--df-blue-shadow-rgb),0.28);font-weight:600;font-size:14px;gap:8px;transition:transform 160ms ease,box-shadow 160ms ease,background 160ms ease}
.app-chat-form .btn:hover,.app-chat-form .btn:focus{background:var(--df-blue-hover) !important;color:#ffffff !important;box-shadow:0 5px 16px rgba(var(--df-blue-shadow-rgb),0.32);transform:translateY(-1px)}
.app-chat-form .btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(var(--df-blue-shadow-rgb),0.28)}
.app-chat-messages::-webkit-scrollbar{width:6px}
.app-chat-messages::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.35);border-radius:999px}
.app-chat-messages::-webkit-scrollbar-track{background:transparent}
@media (max-width:640px){.app-chat{margin:18px;border-radius:14px;padding:16px}.app-chat-thread{gap:14px}.app-chat-row{max-width:92%;padding:10px 14px}.app-chat-form{flex-direction:column;align-items:stretch;gap:8px;padding:10px}.app-chat-form .btn{width:100%}}