/* ==========================================================================
   Taha Auto admin: the form pieces (js/forms.js + the sheets in js/admin.js)
   • the vehicle picker: Year / Make / Model / Color selects, a swatch in the
     Color box, quick-fill chips (their cars on file, the common makes)
   • the sheets you type in: Cancel · title · Save across the top on a phone
   • the customer's page: read-only, the details folded, Edit for the form
   Uses the admin's tokens (navy by default), so every look gets it.
   ========================================================================== */

/* ---------- the vehicle picker ---------- */
.vp { display: grid; gap: 10px; min-width: 0; container-type: inline-size; }
.vp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@container (min-width: 560px) { .vp__grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); } }
.vp .vp__grid > .vp__f.field { grid-column: auto; min-width: 0; }   /* the drawer's and sheets' one-field-per-row rules are for their own fields */
.vp__ctl { position: relative; min-width: 0; }
.vp__ctl .og-input { width: 100%; min-width: 0; text-overflow: ellipsis; }
/* the colour's swatch sits in its box, left of the name; a ring keeps white and black visible on the navy */
.vp__sw, .vp__dot { display: block; border-radius: 50%; background: var(--sw, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 1px rgba(0, 0, 0, .45); }
.vp__sw { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; z-index: 1; }
.vp__sw.is-none, .vp__dot.is-none { background: none; box-shadow: inset 0 0 0 1.5px var(--line-3, #61788F); }
.vp .vp__f--color .og-input { padding-left: 38px; }
.vp__ctl select.og-input { padding-right: 36px; }   /* the arrow's room (site.css), which .drawer / .modal / .panel .og-input's padding takes away */
/* a label's aside ("never shown to the customer", the Length's "until 10:45 AM"): not below the 11px floor */
.field label small { font-size: 12px; }
.vp__dot { flex: none; width: 12px; height: 12px; }
/* quick fill: one row that scrolls sideways (the sheet's swipe-down leaves a sideways row alone) */
.vp__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.vp__chips::-webkit-scrollbar { display: none; }
.vp__cars, .vp__makes { display: contents; }
.vp__chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font: 600 13.5px/1 var(--font); white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; }
.vp__chip:hover { border-color: var(--accent-ui); }
.vp__chip:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; }
.vp__chip--car { background: var(--accent-soft); border-color: rgba(var(--accent-rgb), .5); }
.vp__chip small { font-size: 12px; font-weight: 500; color: var(--text-2); }
/* the car on a booking or a new appointment: its label, then the picker */
.vfield { display: grid; gap: 8px; min-width: 0; }
.vfield__label { font-size: 13px; font-weight: 600; color: var(--text-2); }
/* the job page: VIN and plate under the picker; a finalized job's car stays as it is */
.grid3.grid3--vin2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid3--vin2 > :first-child { grid-column: 1 / -1; }   /* all 17 characters of the VIN show, whatever the panel's width */
.ed.is-final [data-vehrow] .vp__chips { pointer-events: none; opacity: .6; }

/* ---------- Cancel · title · Save: only on a phone, only on the sheets you type in (the desktop keeps its buttons) ---------- */
.sheet__cancel, .sheet__save { display: none; }
@media (max-width: 720px) {
  .sheet__cancel, .sheet__save { align-items: center; justify-content: center; min-height: 44px; min-width: 64px; border-radius: 12px; font: 600 16px/1 var(--font); cursor: pointer; white-space: nowrap; -webkit-user-select: none; user-select: none; }
  .sheet__cancel { grid-area: cancel; justify-self: start; padding: 0 10px; margin-left: -6px; background: none; border: 0; color: var(--accent-text); }
  .sheet__cancel:active { opacity: .6; }
  .sheet__save { grid-area: save; justify-self: end; padding: 0 18px; background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); font-weight: 700; }
  .sheet__save:active { background: var(--accent-2); }
  .sheet__save[disabled] { opacity: .55; }
  .sheet__cancel:focus-visible, .sheet__save:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: 2px; }
  .sheet--ios .sheet__cancel, .sheet--ios .sheet__save { display: inline-flex; }
  .sheet--ios .sheet__head { grid-template-columns: minmax(72px, max-content) minmax(0, 1fr) minmax(72px, max-content); grid-template-areas: "grab grab grab" "cancel title save"; column-gap: 8px; padding: 6px 12px 10px; border-bottom: 1px solid var(--line); }
  .sheet--ios .sheet__head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet--ios .sheet__x { display: none; }
  /* Save and Cancel live up top: the bottom row keeps only a Delete */
  .sheet--ios .modal__actions > .btn { display: none; }
  .sheet--ios .modal__actions:not(:has(.danger:not(.hidden))) { display: none; }
  #cust-modal.sheet--ios .modal__actions .danger { flex: 1 1 100%; }

  /* the booking: Close (it autosaves) · who · Save */
  .drawer__head { display: grid; grid-template-columns: minmax(72px, max-content) minmax(0, 1fr) minmax(72px, max-content); grid-template-areas: "cancel title save"; align-items: center; column-gap: 8px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
  .drawer__head .sheet__cancel, .drawer__head .sheet__save { display: inline-flex; }
  .drawer__titles { grid-area: title; min-width: 0; text-align: center; }
  .drawer__head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .drawer__head .hint { font-size: 12.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #d-close { display: none; }
  .vp__chip { min-height: 44px; font-size: 14px; }
}

/* ---------- the customer's page (read) and form (edit) ---------- */
#cust-modal[data-mode="read"] #c-edit { display: none; }
/* the history's actions: book, estimate, invoice, ask for a review */
.cacts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; min-width: 0; }
.cacts .btn { justify-content: center; }
.cacts .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
/* the details, folded; Edit sits on the fold's header, always in reach */
.cdet:not([hidden]) { position: relative; display: block; }
.cdet__fold { background: var(--card); border: 1px solid var(--line); border-radius: 16px; min-width: 0; }
.cdet__head { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 3px; min-height: 64px; padding: 12px 124px 12px 14px; cursor: pointer; -webkit-user-select: none; user-select: none; position: relative; }
.cdet__head::-webkit-details-marker { display: none; }
.cdet__head::marker { content: ""; }
.cdet__head:focus-visible { outline: 2px solid var(--accent-ui); outline-offset: -2px; border-radius: 16px; }
.cdet__title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cdet__sum { min-width: 0; font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdet__chev { width: 18px; height: 18px; color: var(--text-3); position: absolute; right: 14px; top: 23px; transition: transform var(--dur-small, 160ms) var(--ease-out, ease); }
.cdet__fold[open] .cdet__chev { transform: rotate(90deg); }
.cdet__edit { position: absolute; top: 10px; right: 42px; min-height: 44px; padding: 0 16px; }
.cdet__body { display: grid; gap: 16px; padding: 2px 14px 16px; min-width: 0; }
.cdet__list { display: grid; gap: 12px; margin: 0; }
.cdet__list > div { display: grid; gap: 2px; min-width: 0; }
.cdet__list dt { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.cdet__list dd { margin: 0; font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.cdet__notes { white-space: pre-wrap; }
.cdet__none { color: var(--text-3); }
.cdet__cars { display: grid; gap: 8px; }
.cdet__sub { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.cdet__car { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.cdet__car b { display: block; font-weight: 650; }
.cdet__car small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
/* a car on the form: the picker, then VIN (and its camera), plate and Remove */
#cust-modal .custveh { gap: 10px; }
#cust-modal .custveh__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
#cust-modal #c-edit:not([hidden]) { display: grid; gap: 16px; }
#cust-modal .custveh__more { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
#cust-modal .custveh__row .custveh__rm { width: auto; height: auto; min-height: 44px; margin: 0; padding: 0 14px; justify-self: stretch; }
#cust-modal .custveh__row .vincam { min-height: 44px; }
@media (min-width: 721px) {
  /* the page reads the same on the desktop: who they are up top */
  #c-hero:not([hidden]) { display: grid; }
  #cust-modal .chero { justify-items: center; gap: 4px; padding: 4px 0 16px; text-align: center; border-bottom: 1px solid var(--line); }
  #cust-modal .chero__av { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-text); font-size: 17px; font-weight: 800; }
  #cust-modal .chero__name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
  #cust-modal .chero__sub { font-size: 14px; color: var(--text-2); }
  #cust-modal .chero__owe { font-size: 13px; font-weight: 700; color: var(--warn-text, #F5BD51); }
  #cust-modal .chero__acts { display: flex; gap: 8px; margin-top: 10px; }
  #cust-modal .chero__acts .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
}
@media (max-width: 720px) {
  .cacts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cacts .btn { flex-direction: column; gap: 6px; min-height: 68px; padding: 10px 8px; font-size: 14px; white-space: normal; line-height: 1.2; text-align: center; }
  .cacts .btn svg { width: 18px; height: 18px; color: var(--accent-ui); }
  #cust-modal[data-mode="read"] #c-history { padding-bottom: 12px; }
  #cust-modal[data-mode="read"] .modal__actions { display: none; }   /* the page closes with its X (or a swipe down) */
  #cust-modal .custveh__row { padding: 12px; border-bottom: 1px solid var(--line); }
  #cust-modal .custveh__more { grid-template-columns: minmax(0, 1fr) auto; }
  #cust-modal .custveh__more > .field:first-child { grid-column: 1 / -1; }   /* the VIN and its camera get the whole width */
  #cust-modal .custveh__row .field:nth-child(4) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .cdet__chev { transition: none; } }

/* ---------- navy (the default look): the Figma's surfaces ---------- */
body.theme-navy .cdet__fold, body.theme-navy #cust-modal .custveh__row { background: #111E2A; border-color: #213446; }
body.theme-navy .cdet__car { background: #0E1A25; border-color: #223445; }
body.theme-navy .vp__chip { background: #101C28; border-color: #2A3C4F; }
body.theme-navy .vp__chip--car { background: color-mix(in srgb, var(--accent) 20%, #101C28); border-color: rgba(var(--accent-rgb), .55); }
@media (max-width: 720px) {
  body.theme-navy .sheet--ios .sheet__head, body.theme-navy .drawer__head { border-bottom-color: #203140; }
}