/**
 * Customer-facing QuickQuote theme tokens (wizard / consent / confirmation).
 *
 * Light is the authored default and every token's light value is the exact
 * colour those templates already shipped, so switching the stylesheet in
 * changes nothing until data-theme="dark" is set.
 *
 * Polarity is the opposite of the admin pages (app_settings.html and friends
 * declare dark on :root and override html[data-theme="light"]). Customer pages
 * have always been light, so light stays the base here; do not "align" the two
 * by flipping this file -- the admin key is fq-admin-theme-v1 and the customer
 * key is qq-theme-v1, and they are deliberately independent.
 */

:root {
  color-scheme: light;

  /* Structure */
  --qq-bg: #f5f7fa;
  --qq-surface: #ffffff;
  --qq-surface-2: #fafbfc;
  --qq-surface-3: #f1f5f9;
  --qq-border: #cbd2dc;
  --qq-border-soft: #e4e8ee;
  --qq-shadow: rgba(0, 0, 0, .08);

  /* Text */
  --qq-text: #222222;
  --qq-text-strong: #1f2937;
  --qq-text-sub: #6a7280;
  --qq-text-faint: #94a3b8;

  /* Brand */
  --qq-brand: #2a5db0;
  --qq-brand-ink: #1e3a6b;
  --qq-brand-soft: #eef6ff;
  --qq-brand-soft-2: #dbeafe;
  --qq-brand-border: #93b7ea;
  --qq-brand-chip: #e9eef6;
  --qq-on-brand: #ffffff;

  /* Success */
  --qq-ok: #16a34a;
  --qq-ok-bg: #dcfce7;
  --qq-ok-ink: #166534;
  --qq-ok-step-bg: #b5d4a3;
  --qq-ok-step-ink: #1d4d0f;
  --qq-on-ok: #ffffff;

  /* Warning */
  --qq-warn: #f59e0b;
  --qq-warn-bg: #fef3c7;
  --qq-warn-ink: #92400e;
  --qq-warn-border: #fcd34d;

  /* Error */
  --qq-err: #e3352b;
  --qq-err-bg: #fee2e2;
  --qq-err-ink: #991b1b;
  --qq-err-border: #fca5a5;

  /* LINE brand green -- fixed by LINE's brand guide, never themed. */
  --qq-line: #06c755;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --qq-bg: #0d0f14;
  --qq-surface: #14161c;
  --qq-surface-2: #191c23;
  --qq-surface-3: #1e222b;
  --qq-border: #333846;
  --qq-border-soft: #262a34;
  --qq-shadow: rgba(0, 0, 0, .5);

  --qq-text: #e6e8ec;
  --qq-text-strong: #f2f4f8;
  --qq-text-sub: #9aa1b1;
  --qq-text-faint: #6d7484;

  --qq-brand: #5b8def;
  --qq-brand-ink: #bcd2ff;
  --qq-brand-soft: #1b2740;
  --qq-brand-soft-2: #24334f;
  --qq-brand-border: #3c5c96;
  --qq-brand-chip: #222736;
  /* Brand fills are light in dark mode, so text on them has to go dark. */
  --qq-on-brand: #0d0f14;

  --qq-ok: #22c55e;
  --qq-ok-bg: #12301f;
  --qq-ok-ink: #86efac;
  --qq-ok-step-bg: #1d4d0f;
  --qq-ok-step-ink: #b5d4a3;
  --qq-on-ok: #0d0f14;

  --qq-warn: #f59e0b;
  --qq-warn-bg: #3a2a08;
  --qq-warn-ink: #fcd34d;
  --qq-warn-border: #7a5a12;

  --qq-err: #f27a7a;
  --qq-err-bg: #3a1414;
  --qq-err-ink: #fca5a5;
  --qq-err-border: #7a2a2a;
}

/* ── Shared header controls (theme + language) ───────────────────────────
   Rendered by the templates as:
     <div class="qq-prefs">
       <button id="theme-toggle" type="button" ...>🌙</button>
       <button id="lang-toggle" type="button" onclick="I18n.toggle()">EN</button>
     </div>
   i18n.js owns #lang-toggle's label; theme.js owns #theme-toggle's. */
.qq-prefs {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.qq-prefs button {
  padding: 5px 12px;
  min-width: 44px;
  font-size: .82em;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .3px;
  color: var(--qq-brand);
  background: var(--qq-surface);
  border: 1px solid var(--qq-border);
  border-radius: 6px;
  cursor: pointer;
}

.qq-prefs button:hover {
  background: var(--qq-brand-soft);
  border-color: var(--qq-brand-border);
}

/* The order-tracking entry point. An <a>, not a button, so it is a real
   navigation the browser can open in a new tab; `margin-right: auto` pushes
   it to the far left of the same row, leaving the theme/language controls
   where they already were. Rendered only when CUSTOMER_TRACK_ENABLED is on
   (see freight_track_bp._expose_track_flag), so a dark deployment never
   advertises a 404. */
.qq-prefs .qq-track-link,
.qq-prefs .qq-fedex-link {
  padding: 5px 12px;
  font-size: .82em;
  font-weight: 600;
  line-height: 1.4;
  color: var(--qq-brand);
  background: var(--qq-surface);
  border: 1px solid var(--qq-border);
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}

/* Whichever chip renders first pushes the theme/language toggles right --
   either one can be dark, so the spacer follows the position, not the link. */
.qq-prefs > a:first-child {
  margin-right: auto;
}

.qq-prefs .qq-track-link:hover,
.qq-prefs .qq-fedex-link:hover {
  background: var(--qq-brand-soft);
  border-color: var(--qq-brand-border);
}

/* Slim login-status bar at the very top of the wizard form (quote/wizard.html
   form_page()): anonymous -> a plain login link; logged-in monthly-billing
   member -> a brand-soft badge flagging 記帳送單 up front instead of only at
   confirmation; logged-in, not monthly -> small unobtrusive "已登入：name"
   text. General customers must never see 月結 wording, so only the middle
   state renders it. */
.qq-login-status {
  margin: -4px 0 10px;
  font-size: .85em;
}

.qq-login-status__link {
  color: var(--qq-brand);
  text-decoration: none;
  font-weight: 600;
}

.qq-login-status__link:hover {
  text-decoration: underline;
}

.qq-login-status__badge {
  display: inline-block;
  padding: 5px 10px;
  background: var(--qq-brand-soft);
  border: 1px solid var(--qq-brand-border);
  border-radius: 6px;
  color: var(--qq-brand);
}

.qq-login-status__member {
  color: var(--qq-text-sub);
}

.qq-login-status__name {
  font-weight: 600;
}

/* Logout sits right after the logged-in text/badge; muted so it doesn't
   compete with the primary wizard actions, underlined on hover only. */
.qq-login-status__logout {
  margin-left: 10px;
  color: var(--qq-text-sub);
  text-decoration: none;
}

.qq-login-status__logout:hover {
  color: var(--qq-brand);
  text-decoration: underline;
}

/* The wizard's own `button { ... }` rule is a bare element selector, so these
   class-scoped rules already win on specificity regardless of source order. */