/* CarRider forms.css — global resets + form primitives only.
 * Surface-scoped chrome: modals.css, school-settings.css, retention-purge.css,
 * change-request-queue.css, pickup-tags-admin.css, capability-override-editor.css,
 * record-picker.css, admin-layout.css, brand-eyebrow.css.
 * Tokens live in tokens.css (loaded first via _base.html). */

* { box-sizing: border-box; }

/* GLEAM-129: Skip-link (WCAG 2.4.1). z-index 1200 clears topbar + drawers. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-200%);
  padding: var(--fb-s-3) var(--fb-s-4);
  background: var(--fb-surface);
  color: var(--fb-blue-strong);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-r-md);
  z-index: 1200;
  transition: transform 120ms ease;
  text-decoration: none;
  font-size: 14px;
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--fb-focus);
  outline-offset: 2px;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "sofia-pro", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: var(--fb-text);
  background: var(--fb-canvas);
  min-height: 100vh;
  min-height: 100dvh;
}

/* GLEAM-126/006: --fb-blue-strong passes AA on white; hover lands on pressed. */
a { color: var(--fb-blue-strong); text-decoration: none; }
a:hover { color: var(--fb-blue-strong); text-decoration: underline; }

/* ── Form controls (build-spec §5.4–5.5) ───────────────────── */
.form-row { margin-bottom: var(--fb-s-4); }

label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fb-text-section);
  margin-bottom: var(--fb-s-2);
}

input[type=email],
input[type=password],
input[type=text],
input[type=date],
input[type=time],
input[type=search],
select:not([multiple]) {
  width: 100%;
  height: 44px;
  padding: 0 var(--fb-s-3);
  font: inherit;
  font-size: 14px;
  color: var(--fb-text-input);
  background: var(--fb-surface);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-r-md);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
/* GLEAM-031: a multi-select listbox (e.g. activity-log Action filter) sizes
   itself off its `size` attribute — don't force the single-select 44px
   height or paint the single-select chevron over it. */
select[multiple] {
  width: 100%;
  padding: var(--fb-s-2) var(--fb-s-3);
  font: inherit;
  font-size: 14px;
  color: var(--fb-text-input);
  background: var(--fb-surface);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-r-md);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
/* GLEAM-022: custom chevron so every single-select <select> shares one
   closed-state affordance instead of the OS-native arrow (was
   .ptd-select-only). GLEAM-029: chevron SVG lives once as --select-chevron
   (tokens.css). GLEAM-031: excluded from multi-selects (see select[multiple]
   above) — a listbox has no closed state to signal. */
select:not([multiple]) {
  padding-right: var(--fb-s-8);
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
}
input:focus-visible,
select:focus-visible {
  border-color: var(--fb-blue-strong);
  box-shadow: var(--fb-sh-focus-ring);
}
input[type=file] {
  width: 100%;
  height: 44px;
  padding: 0 var(--fb-s-3);
  font: inherit;
  font-size: 14px;
  color: var(--fb-text-input);
  background: var(--fb-surface);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-r-md);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  display: flex;
  align-items: center;
  cursor: pointer;
}
input[type=file]:focus-visible {
  border-color: var(--fb-blue-strong);
  box-shadow: var(--fb-sh-focus-ring);
}

/* GLEAM-035: code-input wins over input[type=text] by source order. */
input.code-input {
  letter-spacing: 6px;
  font-size: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  height: 48px;
}

.btn {
  display: inline-block; padding: 0 var(--fb-s-5);
  height: 44px; line-height: 44px;
  font-weight: 500; font-size: 14px;
  border-radius: var(--fb-r-md); border: 0;
  cursor: pointer; transition: background 120ms ease;
  white-space: nowrap; text-decoration: none;
  text-align: center; vertical-align: middle;
}
/* GLEAM-031: --fb-blue-strong on white text passes AA. */
.btn-primary {
  background: var(--fb-blue-strong);
  color: var(--fb-text-inverted);
}
.btn-primary:hover { background: var(--fb-blue-pressed); }
/* GLEAM-079: ghost buttons use --fb-text-input for AA contrast. */
.btn-ghost {
  background: transparent;
  color: var(--fb-text-input);
  border: 1px solid var(--fb-border);
}
.btn-ghost:hover { background: var(--fb-row-hover); }
.btn-block { width: 100%; }
.btn-danger { background: var(--fb-danger); color: var(--fb-text-inverted); }
.btn-danger:hover { background: var(--fb-danger-pressed); }
/* GLEAM-046: 44px floor at all viewports (WCAG 2.5.8). */
.btn-sm { height: 44px; line-height: 42px; padding: 0 var(--fb-s-3); font-size: 13px; }
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible {
  box-shadow: var(--fb-sh-focus-ring);
  outline: none;
}
/* GLEAM-091: disabled state — no blue fill, not-allowed cursor. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Mute toggle (.cd-mute) — shared dispatcher/greeter control.
 * Trace: spec §3.3.1; GLEAM-147 (deduplicated from dispatcher+greeter). */
.cd-mute {
  background: transparent;
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-r-md);
  color: var(--fb-text-input);
  padding: 0 var(--fb-s-5);
  height: 44px;
  min-width: 48px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.cd-mute .cd-mute-on,
.cd-mute .cd-mute-off {
  display: flex;
  align-items: center;
  gap: var(--fb-s-2);
}
.cd-mute .cd-mute-off { display: none; }
.cd-mute[aria-pressed="true"] .cd-mute-on { display: none; }
.cd-mute[aria-pressed="true"] .cd-mute-off {
  display: flex;
  color: var(--fb-text-muted);
}
.cd-mute:focus-visible {
  box-shadow: var(--fb-sh-focus-ring);
  outline: none;
}
.cd-mute:active { background: var(--fb-row-hover); }

.flash {
  border-radius: var(--fb-r-md);
  padding: var(--fb-s-3);
  font-size: 13px;
  margin-bottom: var(--fb-s-4);
}
.flash-error   { background: var(--fb-flash-error-bg);   color: var(--fb-danger);            border: 1px solid var(--fb-flash-error-border); }
.flash-success { background: var(--fb-flash-success-bg); color: var(--fb-flash-success-fg);  border: 1px solid var(--fb-flash-success-border); }
.flash-warning { background: var(--fb-warn-bg);          color: var(--fb-warn-fg);           border: 1px solid var(--fb-warn-border); }
.flash-info    { background: var(--fb-flash-info-bg);    color: var(--fb-flash-info-fg);     border: 1px solid var(--fb-flash-info-border); }
/* GLEAM-043/051: edge-pinned banner; below modal stack. */
.flash-edge {
  margin: 0;
  border-radius: 0;
  position: relative;
  z-index: 100;
}

/* ── Textarea styled as a form input (class="form-input"). */
textarea.form-input {
  width: 100%;
  padding: var(--fb-s-3);
  font: inherit;
  font-size: 14px;
  color: var(--fb-text-input);
  background: var(--fb-surface);
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-r-md);
  outline: none;
  resize: vertical;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
textarea.form-input:focus-visible {
  border-color: var(--fb-blue-strong);
  box-shadow: var(--fb-sh-focus-ring);
}

/* Field hint / helper text. */
.form-hint {
  margin: 0 0 var(--fb-s-2);
  font-size: 12px;
  color: var(--fb-text-muted);
  line-height: 1.4;
}

/* GLEAM-007: Password reveal toggle. .password-field wraps the input;
 * JS flips type=password ↔ type=text and syncs aria-pressed. */
.password-field { position: relative; }
.password-field input[type=password],
.password-field input[type=text] { padding-right: 48px; }
.password-reveal {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--fb-text-muted);
  border-radius: 0 var(--fb-r-md) var(--fb-r-md) 0;
}
.password-reveal:hover { color: var(--fb-text-input); }
.password-reveal:focus-visible {
  box-shadow: var(--fb-sh-focus-ring);
  outline: none;
}
.password-reveal .pr-icon-hide { display: none; }
.password-reveal[aria-pressed="true"] .pr-icon-show { display: none; }
.password-reveal[aria-pressed="true"] .pr-icon-hide { display: block; }

/* Top margin after a preview card. */
.form-top { margin-top: var(--fb-s-4); }

/* GLEAM-021: Inline field validation error. */
.form-error {
  color: var(--fb-danger);
  font-size: 12px;
  margin: var(--fb-s-1) 0 0;
}

/* Inline per-field validation errors. */
.field-error {
  margin: var(--fb-s-2) 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--fb-danger);
  line-height: 1.35;
}
.form-row.has-error input[type=text],
.form-row.has-error input[type=email],
.form-row.has-error input[type=password],
.form-row.has-error select {
  border-color: var(--fb-danger);
  /* GLEAM-022: background-color (not the `background` shorthand) so this
     doesn't clear the select chevron's background-image. */
  background-color: var(--fb-flash-error-bg);
}
.form-row.has-error input:focus-visible,
.form-row.has-error select:focus-visible {
  border-color: var(--fb-danger);
  box-shadow: var(--fb-sh-focus-ring-error);
}
/* GLEAM-123: outline-color = --fb-danger on errored fields. */
.form-row.has-error input:focus-visible,
.form-row.has-error select:focus-visible,
.form-row.has-error textarea:focus-visible {
  outline-color: var(--fb-danger);
}

.toggle-form { margin: 0; display: inline; }
.toggle-form button {
  background: transparent;
  border: 1px solid var(--fb-border);
  border-radius: var(--fb-r-md);
  padding: var(--fb-s-1) var(--fb-s-3);
  min-height: 44px;
  font-size: 12px;
  cursor: pointer;
  color: var(--fb-text-muted);
}
.toggle-form button.on  { background: var(--fb-success-strong); color: var(--fb-text-inverted); border-color: var(--fb-success-strong); }
.toggle-form button.off { background: var(--fb-canvas); color: var(--fb-text-muted); }
.toggle-form button:focus-visible {
  box-shadow: var(--fb-sh-focus-ring);
  outline: none;
}

.role-pill {
  display: inline-block;
  background: var(--fb-canvas);
  border-radius: var(--fb-r-pill);
  padding: var(--fb-s-1) var(--fb-s-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fb-text-input);
}

.mfa-yes { color: var(--fb-success); font-weight: 600; }
.mfa-no  { color: var(--fb-danger); font-weight: 600; }

/* Inline-form wrapper for single-button forms. */
.inline-form { display: inline; margin: 0; }
.gap-r { margin-right: var(--fb-s-3); }

/* GLEAM-044: vertical checkbox stack + tight lede variant. */
.checkbox-stack { display: flex; flex-direction: column; gap: var(--fb-s-1); }
.lede-tight { margin: 0 0 var(--fb-s-2); }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--fb-s-2);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fb-text);
  cursor: pointer;
}
.checkbox-label input[type=checkbox] { margin: 0; }

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--fb-s-3);
  margin-top: var(--fb-s-5);
}

/* GLEAM-034: Fieldset styled as a bordered card. */
.fieldset-card {
  border: 1px solid var(--fb-border);
  padding: var(--fb-s-4);
  border-radius: var(--fb-r-lg);
  margin: 0;
}
.fieldset-card legend {
  padding: 0 var(--fb-s-2);
  font-weight: 600;
  font-size: 13px;
  color: var(--fb-text-input);
}

/* GLEAM-034: Radio / checkbox option row. */
.radio-row {
  display: flex;
  align-items: flex-start;
  gap: var(--fb-s-3);
  padding: var(--fb-s-2) 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fb-text);
  margin-bottom: 0;
}
.radio-row input[type=radio],
.radio-row input[type=checkbox] {
  margin-top: 4px;
  flex-shrink: 0;
}

.status-pill {
  display: inline-block;
  padding: var(--fb-s-1) var(--fb-s-3);
  border-radius: var(--fb-r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fb-text-inverted);
  background: var(--fb-text-section);
}
.status-pill-ok { background: var(--fb-success); }
.status-pill-update { background: var(--fb-blue-strong); }
.status-pill-error { background: var(--fb-danger); }

.badge {
  display: inline-block;
  padding: var(--fb-s-1) var(--fb-s-2);
  border-radius: var(--fb-r-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.badge-ok    { background: var(--fb-badge-ok-bg);    color: var(--fb-badge-ok-fg); }
.badge-warn  { background: var(--fb-badge-warn-bg);  color: var(--fb-badge-warn-fg); }
.badge-error { background: var(--fb-badge-error-bg); color: var(--fb-badge-error-fg); }
.badge-muted { background: var(--fb-badge-muted-bg); color: var(--fb-badge-muted-fg); }

/* Empty-state — dashed-border "no items yet" placeholder. */
.empty-state {
  padding: var(--fb-s-4); text-align: center;
  border: 1px dashed var(--fb-border); border-radius: var(--fb-r-md);
  background: var(--fb-surface);
}

/* Visually-hidden — keep in a11y tree, hide visually. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* GLEAM-027: iOS Safari auto-zoom prevention — 16px on phone (≤540px). */
@media (max-width: 540px) {
  input[type=email],
  input[type=password],
  input[type=text],
  input[type=date],
  input[type=time],
  input[type=file],
  input[type=search],
  select,
  textarea.form-input {
    font-size: 16px;
  }
  /* GLEAM-035: toggle-form 44px touch target on mobile (WCAG 2.5.8). */
  .toggle-form button {
    min-height: 44px;
    padding: 0 var(--fb-s-3);
    font-size: 13px;
  }
}

/* Tablet iPad-class tier (768-1024px) — bumps inputs/buttons one tier
 * and ups input font-size to 16px so iPadOS Safari doesn't pinch-zoom. */
@media (min-width: 768px) and (max-width: 1024px) {
  input[type=email],
  input[type=password],
  input[type=text],
  input[type=date],
  input[type=time],
  input[type=file],
  input[type=search],
  select:not([multiple]),
  textarea.form-input {
    font-size: 16px;
    height: 48px;
  }
  /* GLEAM-031: keep font-size bump, skip the forced 44/48px height. */
  select[multiple] { font-size: 16px; }
  textarea.form-input { height: auto; min-height: 96px; }
  .btn { height: 48px; line-height: 48px; }
  .cd-mute { height: 48px; }
  .password-reveal { height: 48px; }
  /* .btn-sm stays at 44px so dense action columns don't crowd data. */
  .btn-sm { height: 44px; line-height: 42px; }
  /* GLEAM-124: toggle-form 44px touch target on tablet. */
  .toggle-form button {
    min-height: 44px;
    padding: 0 var(--fb-s-3);
    font-size: 13px;
  }
}

/* ── Action bar (form footer strip) ──────────────────────────────── */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--fb-s-3);
  padding-top: var(--fb-s-5);
  margin-top: var(--fb-s-5);
  border-top: 1px solid var(--fb-border);
}
.form-actions > .btn-danger,
.form-actions > .form-actions-spacer { margin-left: auto; }
@media (max-width: 720px) {
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions > .btn,
  .form-actions > form { width: 100%; }
  .form-actions > .btn-danger { margin-left: 0; }
}