/* ========================================================================== 
   Workshop Diary Customer Portal Theme Layer
   Version: 1.1.0 - 2026-08-11

   The portal remains dark by default. Signed-in customer portal accounts can
   switch to Light; the selected key is stored on customer_portal_accounts.
   Future named themes can extend these tokens without changing persistence.
   ========================================================================== */

:root,
html[data-wdcp-theme="dark"] {
  color-scheme: dark;
  --wdcp-theme-sentinel: dark;

  --bg: var(--diary-bg);
  --bg2: var(--diary-bg-soft);
  --panel: var(--diary-panel);
  --panel2: var(--diary-panel-alt);
  --panel3: var(--diary-panel-raised);
  --card: var(--diary-panel);
  --card-bg: var(--diary-panel);
  --surface: var(--diary-panel);
  --line: rgba(255,255,255,.12);
  --text: var(--diary-text);
  --text-soft: var(--diary-text-body);
  --muted: var(--diary-muted);
  --soft: var(--diary-text-body);
  --border: var(--diary-border);
  --border-strong: var(--diary-border-strong);
  --shadow: 0 22px 70px rgba(0,0,0,.34);

  --wdcp-surface: var(--diary-panel-glass);
  --wdcp-surface-soft: var(--diary-panel-soft);
  --wdcp-surface-faint: var(--diary-panel-faint);
  --wdcp-control: var(--diary-input);
  --wdcp-topbar: var(--diary-topbar);
  --wdcp-topbar-scrolled: var(--diary-topbar-scrolled);
  --wdcp-modal: var(--diary-panel);
  --wdcp-shadow: 0 22px 70px rgba(0,0,0,.34);
}

html[data-wdcp-theme="light"] {
  color-scheme: light;
  --wdcp-theme-sentinel: light;

  --bg: var(--diary-bg);
  --bg2: var(--diary-bg-soft);
  --panel: var(--diary-panel);
  --panel2: var(--diary-panel-alt);
  --panel3: var(--diary-panel-raised);
  --card: var(--diary-panel);
  --card-bg: var(--diary-panel);
  --surface: var(--diary-panel);
  --line: rgba(15,23,42,.12);
  --text: var(--diary-text);
  --text-soft: var(--diary-text-body);
  --muted: var(--diary-muted);
  --soft: var(--diary-text-body);
  --border: var(--diary-border);
  --border-strong: var(--diary-border-strong);
  --shadow: 0 16px 44px rgba(15,23,42,.10);

  --wdcp-surface: var(--diary-panel-glass);
  --wdcp-surface-soft: var(--diary-panel-soft);
  --wdcp-surface-faint: var(--diary-panel-faint);
  --wdcp-control: var(--diary-input);
  --wdcp-topbar: var(--diary-topbar);
  --wdcp-topbar-scrolled: var(--diary-topbar-scrolled);
  --wdcp-modal: var(--diary-panel);
  --wdcp-shadow: 0 18px 54px rgba(15,23,42,.14);
}

html[data-wdcp-theme="light"] body {
  background:
    radial-gradient(circle at 8% -8%,rgb(var(--diary-primary-rgb) / .12),transparent 34%),
    radial-gradient(circle at 88% 8%,rgb(var(--diary-accent-rgb) / .10),transparent 30%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}

html[data-wdcp-theme="light"] body::before { opacity: .16; }
html[data-wdcp-theme="light"] body::after { opacity: .13; }

/* Shell and common surfaces ------------------------------------------------ */
html[data-wdcp-theme="light"] .topbar {
  background: var(--wdcp-topbar);
  border-bottom-color: var(--border);
  box-shadow: 0 12px 34px rgba(15,23,42,.08);
}

html[data-wdcp-theme="light"] .topbar.is-scrolled {
  background: var(--wdcp-topbar-scrolled);
  border-bottom-color: var(--border-strong);
  box-shadow: 0 16px 42px rgba(15,23,42,.12);
}

html[data-wdcp-theme="light"] .card {
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow: var(--shadow);
}

html[data-wdcp-theme="light"] .card.subtle,
html[data-wdcp-theme="light"] .stat-grid > div,
html[data-wdcp-theme="light"] .bank-box > div,
html[data-wdcp-theme="light"] .invoice-row,
html[data-wdcp-theme="light"] .step-list li,
html[data-wdcp-theme="light"] .mini-row,
html[data-wdcp-theme="light"] .job-card-row,
html[data-wdcp-theme="light"] .note-panel,
html[data-wdcp-theme="light"] .task-collapse,
html[data-wdcp-theme="light"] .customer-note,
html[data-wdcp-theme="light"] .portal-collapse,
html[data-wdcp-theme="light"] .provider-choice-card,
html[data-wdcp-theme="light"] .vehicle-summary-grid > div,
html[data-wdcp-theme="light"] .mini-history-row,
html[data-wdcp-theme="light"] .history-stat-stack span,
html[data-wdcp-theme="light"] .booking-row,
html[data-wdcp-theme="light"] .portal-media-card,
html[data-wdcp-theme="light"] .portal-inline-alert,
html[data-wdcp-theme="light"] .guest-approval-card,
html[data-wdcp-theme="light"] .public-request-login-cta,
html[data-wdcp-theme="light"] .company-choice-option,
html[data-wdcp-theme="light"] .service-sheet-row,
html[data-wdcp-theme="light"] .portal-before-after-card,
html[data-wdcp-theme="light"] .portal-media-standalone-card,
html[data-wdcp-theme="light"] .vin-dd-summary > div,
html[data-wdcp-theme="light"] .vin-setup-grid .choice-card,
html[data-wdcp-theme="light"] .vin-price-breakdown > div,
html[data-wdcp-theme="light"] .vin-tariff-mini-list > div,
html[data-wdcp-theme="light"] .portal-fieldset,
html[data-wdcp-theme="light"] .portal-task-media-card,
html[data-wdcp-theme="light"] .booking-detail-grid div,
html[data-wdcp-theme="light"] .portal-list-toolbar,
html[data-wdcp-theme="light"] .portal-action-item {
  background: var(--wdcp-surface-soft);
}

html[data-wdcp-theme="light"] .trust-tile,
html[data-wdcp-theme="light"] .guest-approval-item,
html[data-wdcp-theme="light"] .vin-credit-autotop-card {
  background: #f8fafc;
}

html[data-wdcp-theme="light"] table { background: rgba(255,255,255,.84); }
html[data-wdcp-theme="light"] .table-wrap { box-shadow: inset 0 1px 0 rgba(15,23,42,.04); }

html[data-wdcp-theme="light"] .card:hover,
html[data-wdcp-theme="light"] .stat-grid > div:hover,
html[data-wdcp-theme="light"] .trust-tile:hover,
html[data-wdcp-theme="light"] .bank-box > div:hover,
html[data-wdcp-theme="light"] .portal-before-after-card:hover {
  border-color: var(--border-strong);
}

html[data-wdcp-theme="light"] .invoice-row:hover,
html[data-wdcp-theme="light"] .job-card-row:hover,
html[data-wdcp-theme="light"] .mini-row-link:hover,
html[data-wdcp-theme="light"] .vehicle-card:hover,
html[data-wdcp-theme="light"] .portal-media-card:hover,
html[data-wdcp-theme="light"] .booking-row:hover,
html[data-wdcp-theme="light"] .guest-approval-card:hover {
  box-shadow: 0 14px 32px rgba(15,23,42,.10);
}

/* Controls ----------------------------------------------------------------- */
html[data-wdcp-theme="light"] input,
html[data-wdcp-theme="light"] select,
html[data-wdcp-theme="light"] textarea {
  background: var(--wdcp-control);
  color: var(--text);
}

html[data-wdcp-theme="light"] input::placeholder,
html[data-wdcp-theme="light"] textarea::placeholder { color: var(--diary-disabled); }

html[data-wdcp-theme="light"] .btn:not(.btn-primary),
html[data-wdcp-theme="light"] .portal-global-search-launcher,
html[data-wdcp-theme="light"] .portal-global-search-close,
html[data-wdcp-theme="light"] .portal-global-search-clear,
html[data-wdcp-theme="light"] .portal-company-switch select {
  background: rgba(255,255,255,.90);
  color: var(--text);
}

html[data-wdcp-theme="light"] .btn:not(.btn-primary):hover,
html[data-wdcp-theme="light"] .portal-nav a:hover,
html[data-wdcp-theme="light"] .portal-global-search-close:hover,
html[data-wdcp-theme="light"] .portal-global-search-clear:hover {
  background: #f1f5f9;
  border-color: var(--border-strong);
}

html[data-wdcp-theme="light"] input[type="date"],
html[data-wdcp-theme="light"] input[type="datetime-local"],
html[data-wdcp-theme="light"] input[type="month"] { color-scheme: light; }

html[data-wdcp-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-wdcp-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-wdcp-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator { filter: none; }

html[data-wdcp-theme="light"] .form-footnote a { color: #0068b4; }
html[data-wdcp-theme="light"] .form-footnote a:hover { color: #004f8a; }
html[data-wdcp-theme="light"] .row-subline { color: var(--muted); }

/* Statuses: replace dark-theme pastel text with accessible light-theme text. */
html[data-wdcp-theme="light"] .status-pill { color: #475569; }
html[data-wdcp-theme="light"] .status-pill.paid,
html[data-wdcp-theme="light"] .status-pill.settled,
html[data-wdcp-theme="light"] .status-pill.accepted,
html[data-wdcp-theme="light"] .status-pill.converted,
html[data-wdcp-theme="light"] .status-pill.done,
html[data-wdcp-theme="light"] .status-pill.complete,
html[data-wdcp-theme="light"] .status-pill.completed { color: var(--diary-info-fg); }
html[data-wdcp-theme="light"] .status-pill.unpaid,
html[data-wdcp-theme="light"] .status-pill.part_paid,
html[data-wdcp-theme="light"] .status-pill.part-paid,
html[data-wdcp-theme="light"] .status-pill.partial,
html[data-wdcp-theme="light"] .status-pill.partially_paid,
html[data-wdcp-theme="light"] .status-pill.in_progress,
html[data-wdcp-theme="light"] .status-pill.open,
html[data-wdcp-theme="light"] .status-pill.outstanding { color: var(--diary-warning-fg); }
html[data-wdcp-theme="light"] .status-pill.travelling { color: #6b21a8; }
html[data-wdcp-theme="light"] .status-pill.submitted,
html[data-wdcp-theme="light"] .status-pill.reviewing { color: var(--diary-info-fg); }
html[data-wdcp-theme="light"] .status-pill.rejected,
html[data-wdcp-theme="light"] .status-pill.cancelled { color: var(--diary-danger-fg); }
html[data-wdcp-theme="light"] .vehicle-reg { color: var(--diary-info-fg); }
html[data-wdcp-theme="light"] .portal-inline-alert.error,
html[data-wdcp-theme="light"] .vin-topup-card [data-vin-quote-status].is-error,
html[data-wdcp-theme="light"] .field-help.is-error { color: var(--diary-danger-fg); }
html[data-wdcp-theme="light"] .field-help.is-loading { color: var(--diary-info-fg); }
html[data-wdcp-theme="light"] .field-help.is-success { color: var(--diary-success-fg); }
html[data-wdcp-theme="light"] .wdcp-chip.warn { color: var(--diary-accent-fg); }
html[data-wdcp-theme="light"] .portal-banner.test-mode { color: #78350f; }
html[data-wdcp-theme="light"] .portal-banner.test-mode span { color: var(--diary-warning-fg); }

/* Search ------------------------------------------------------------------- */
html[data-wdcp-theme="light"] .portal-global-search-field input {
  background: #ffffff;
}

html[data-wdcp-theme="light"] .portal-global-search-panel {
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15,23,42,.18);
}

html[data-wdcp-theme="light"] .portal-global-search-item,
html[data-wdcp-theme="light"] .portal-global-search-empty,
html[data-wdcp-theme="light"] .portal-global-search-group-head span:last-child,
html[data-wdcp-theme="light"] .portal-global-search-shortcut {
  background: #f8fafc;
}

html[data-wdcp-theme="light"] .portal-global-search-loading span,
html[data-wdcp-theme="light"] .portal-skeleton span {
  background: linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9);
  background-size: 220% 100%;
}

html[data-wdcp-theme="light"] .portal-global-search-status.is-error { color: var(--diary-danger-fg); }

/* Portal help -------------------------------------------------------------- */
html[data-wdcp-theme="light"] .portal-help-drawer {
  background: #ffffff;
  background-color: #ffffff;
  color: var(--text);
  box-shadow: -18px 0 50px rgba(15,23,42,.16);
}

html[data-wdcp-theme="light"] .portal-help-guide,
html[data-wdcp-theme="light"] .portal-help-topic,
html[data-wdcp-theme="light"] .portal-help-empty {
  background-color: #ffffff;
}

/* Portal UX/navigation ----------------------------------------------------- */
html[data-wdcp-theme="light"] .portal-breadcrumbs li:not(:last-child)::after { color: rgba(15,23,42,.34); }
html[data-wdcp-theme="light"] .portal-section-nav {
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
}
html[data-wdcp-theme="light"] .portal-section-nav a:hover,
html[data-wdcp-theme="light"] .portal-section-nav a.is-current { color: var(--diary-info-fg); }
html[data-wdcp-theme="light"] .portal-list-loading { background: rgba(248,250,252,.88); }

/* Messages ----------------------------------------------------------------- */
html[data-wdcp-theme="light"] .cm-thread:hover,
html[data-wdcp-theme="light"] .cm-thread:focus-visible { background: #f8fafc; }
html[data-wdcp-theme="light"] .cm-thread.is-active { background: rgb(var(--diary-primary-rgb) / .08); }
html[data-wdcp-theme="light"] .cm-message-stream { background: #f8fafc; }
html[data-wdcp-theme="light"] .cm-message {
  background: #ffffff;
  border-color: var(--border);
}
html[data-wdcp-theme="light"] .cm-message-portal_user {
  background: #e8f4ff;
  border-color: rgb(var(--diary-primary-rgb) / .24);
}
html[data-wdcp-theme="light"] .cm-attachments a { background: #ffffff; }

/* Specialist cards and modals --------------------------------------------- */
html[data-wdcp-theme="light"] .maintenance-summary > div { background: #ffffff; }
html[data-wdcp-theme="light"] .dw-stat-grid a { background: #ffffff; }
html[data-wdcp-theme="light"] .dw-modal { background: #ffffff; color: var(--text); }
html[data-wdcp-theme="light"] .portal-media-preview { border-color: var(--border); background: #eef2f7; }
html[data-wdcp-theme="light"] .wdcp-booking-card { background: linear-gradient(180deg,#ffffff,#f8fafc); }
html[data-wdcp-theme="light"] .wdcp-modal-card {
  background: linear-gradient(180deg,#ffffff,#f8fafc);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: 0 26px 76px rgba(15,23,42,.20);
}
html[data-wdcp-theme="light"] .portal-task-media-card[open] { background: #ffffff; }
html[data-wdcp-theme="light"] .portal-task-media-card > summary:hover { background: #f8fafc; }
html[data-wdcp-theme="light"] .portal-task-media-card > summary::after,
html[data-wdcp-theme="light"] .portal-media-role-label { background: #f8fafc; }

/* Keep media viewers deliberately dark regardless of page theme; photos and
   video are easier to inspect against a neutral dark surround. */
html[data-wdcp-theme="light"] .portal-lightbox,
html[data-wdcp-theme="light"] .portal-lightbox-head,
html[data-wdcp-theme="light"] .portal-lightbox-foot,
html[data-wdcp-theme="light"] .portal-compare { color-scheme: dark; }

/* Toasts stay strongly legible but use light-theme surfaces. */
html[data-wdcp-theme="light"] .portal-toast {
  background: rgba(255,255,255,.97);
  color: var(--text);
  box-shadow: 0 16px 42px rgba(15,23,42,.16);
}
html[data-wdcp-theme="light"] .portal-toast.success { background: rgba(240,253,244,.98); color: var(--diary-success-fg); }
html[data-wdcp-theme="light"] .portal-toast.error { background: rgba(254,242,242,.98); color: var(--diary-danger-fg); }
html[data-wdcp-theme="light"] .portal-toast.info { background: rgba(239,246,255,.98); color: var(--diary-info-fg); }

/* Bottom-left theme switch ------------------------------------------------- */
/* Theme switch ------------------------------------------------------------- */
.portal-theme-switch {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 980;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: rgba(16,24,39,.96);
  color: var(--text);
  box-shadow: 0 12px 34px rgba(0,0,0,.26);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.portal-theme-switch:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--diary-primary-rgb) / .58);
}
.portal-theme-switch:focus-visible {
  outline: 3px solid rgb(var(--diary-accent-rgb) / .55);
  outline-offset: 3px;
}
.portal-theme-switch:disabled {
  cursor: wait;
  opacity: .72;
  transform: none;
}
.portal-theme-switch-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.22rem;
  line-height: 1;
}
.portal-theme-switch.is-saving .portal-theme-switch-icon {
  animation: wdcpThemeSpin .8s linear infinite;
}
@keyframes wdcpThemeSpin { to { transform: rotate(360deg); } }

html[data-wdcp-theme="light"] .portal-theme-switch {
  background: rgba(255,255,255,.97);
  color: #0f172a;
  border-color: rgba(15,23,42,.20);
  box-shadow: 0 12px 30px rgba(15,23,42,.14);
}

/* Light mode remains authoritative over legacy portal success/state styles. */
html[data-wdcp-theme="light"] .flash,
html[data-wdcp-theme="light"] .notice,
html[data-wdcp-theme="light"] .success-box,
html[data-wdcp-theme="light"] .state-card,
html[data-wdcp-theme="light"] .empty {
  color: var(--text);
  border-color: var(--border);
}
html[data-wdcp-theme="light"] .success-box,
html[data-wdcp-theme="light"] .flash-success {
  background: #ecfdf5;
  color: var(--diary-success-fg);
  border-color: var(--diary-success-border-solid);
}
html[data-wdcp-theme="light"] .status-pill.paid,
html[data-wdcp-theme="light"] .status-pill.completed,
html[data-wdcp-theme="light"] .status-pill.complete,
html[data-wdcp-theme="light"] .status-pill.done,
html[data-wdcp-theme="light"] .status-pill.booked {
  background: var(--diary-success-soft-solid);
  color: var(--diary-success-fg);
  border-color: var(--diary-success-border-solid);
}

@media (max-width: 600px) {
  .portal-theme-switch {
    left: 12px;
    bottom: 12px;
    width: 44px;
    height: 44px;
  }
}
@media print {
  .portal-theme-switch { display: none !important; }
}