/*
 * ParkPlus Portal - Yellow brand layer
 *
 * The www.parkplus.ai look for the portal: warm paper (light theme) or warm
 * charcoal (dark theme), ink text, Bricolage Grotesque headings over Manrope
 * text, and the clean yellow #ffd60a.
 *
 * HOW IT IS SWITCHED
 *   ui_brand.py decides the brand per request. Only the yellow brand links this
 *   file (templates/_brand_head.html, last in <head>) and stamps
 *   data-brand="yellow" on <html>; every rule below is scoped to that
 *   attribute. With the classic brand this file is never loaded, so the
 *   original blue glass look comes back exactly.
 *
 * RULES OF THE BRAND (same as www)
 *   - Yellow is a FILL (buttons, the active nav item, toggles, checks, focus
 *     rings, highlights) and the fill always carries ink text.
 *   - On a light surface, accent text and icons are ink, never yellow -- a
 *     dark yellow reads as mustard on white. On the charcoal surfaces yellow
 *     text and icons are fine and stand in for the old blue ones.
 *   - No bluish surfaces. Neutrals are warm (paper / charcoal).
 *   - Status colours do not change: green allowed, red denied, amber warning.
 *
 * Wherever the classic styles read a CSS variable, this file only changes the
 * variable, so page-level styles keep working as before. Component rules below
 * cover only colours the classic styles hard-code.
 */

/* ============================================ */
/* BRAND PALETTE                               */
/* ============================================ */
html[data-brand="yellow"] {
  --pp-yellow: #ffd60a;
  --pp-yellow-2: #ffe033;      /* hover */
  --pp-yellow-3: #e6c200;      /* pressed, edges on white */
  --pp-yellow-soft: #fff3b0;
  --pp-yellow-tint: #fffae3;
  --pp-yellow-rgb: 255, 214, 10;

  --pp-ink: #0f1629;
  --pp-ink-2: #3b4358;
  --pp-ink-3: #676f83;
  --pp-ink-4: #9298a8;

  --pp-paper: #ffffff;
  --pp-paper-2: #f7f6f2;
  --pp-paper-3: #efede7;
  --pp-line: #e4e2db;
  --pp-line-2: #d3d0c7;

  /* warm charcoal -- the dark theme, and the sidebar in both themes */
  --pp-char-0: #0e0d0a;
  --pp-char-1: #15130f;
  --pp-char-2: #1c1a14;
  --pp-char-3: #26231b;
  --pp-on-char: #f4f1e8;       /* text on charcoal */
  --pp-on-char-2: #ddd8ca;
  --pp-on-char-3: #b3ad9d;

  --pp-font-display: 'Bricolage Grotesque', 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --pp-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --pp-radius-card: 1.125rem;
  --pp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================ */
/* DARK THEME (warm charcoal) - variable remap */
/* ============================================ */
html[data-brand="yellow"]:not([data-theme="light"]) {
  --bg-gradient-start: #0e0d0a;
  --bg-gradient-mid: #14120e;
  --bg-gradient-end: #1b1913;
  --sidebar-bg-start: #1a1813;
  --sidebar-bg-end: #110f0b;
  --color-primary: #ffd60a;
  --color-primary-light: #ffd60a;
  --color-primary-dark: #e6c200;
  --color-primary-rgb: 255, 214, 10;
  --color-secondary: #e6c200;
  --color-secondary-light: #ffe033;
  --color-secondary-rgb: 230, 194, 0;
  --select-option-bg: #1c1a14;

  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.075);
  --glass-bg-dark: rgba(24, 22, 17, 0.96);
  --glass-border: rgba(255, 255, 255, 0.085);
  --glass-border-hover: rgba(255, 255, 255, 0.17);

  --nav-dropdown-bg: rgba(255, 255, 255, 0.05);
  --nav-dropdown-border: rgba(255, 255, 255, 0.1);
  --nav-dropdown-text: #ddd8ca;

  --text-primary: #f7f5ef;
  --text-secondary: #e6e2d6;
  --text-muted: #bdb7a8;
  --text-disabled: #8d8777;

  --input-bg: rgba(255, 255, 255, 0.05);
  --input-bg-focus: rgba(255, 255, 255, 0.075);
  --input-border: rgba(255, 255, 255, 0.13);
  --input-border-focus: rgba(255, 214, 10, 0.7);
  --input-text: #f7f5ef;
  --input-placeholder: rgba(189, 183, 168, 0.65);

  --table-bg: linear-gradient(180deg, rgba(30, 27, 21, 0.97) 0%, rgba(22, 20, 15, 0.97) 100%);
  --table-header-bg: rgba(255, 255, 255, 0.045);
  --table-border: rgba(255, 255, 255, 0.09);
  --table-row-hover: rgba(255, 214, 10, 0.055);
  --table-cell-bg: transparent;

  --active-bg: rgba(255, 214, 10, 0.1);
  --active-border: rgba(255, 214, 10, 0.4);

  --btn-primary-gradient: #ffd60a;
  --btn-primary-gradient-hover: #ffe033;

  --toggle-active-bg: #ffd60a;
  --toggle-active-border: #e6c200;
  --checkbox-checked-bg: #ffd60a;
  --checkbox-checked-border: #e6c200;

  --shadow-color-rgb: 0, 0, 0;
  --shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 34px -16px rgba(0, 0, 0, 0.7);
  --shadow-glass-sm: 0 6px 18px -10px rgba(0, 0, 0, 0.6);
  --shadow-glass-lg: 0 26px 60px -22px rgba(0, 0, 0, 0.75);

  --scrollbar-track: rgba(255, 255, 255, 0.04);
  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --scrollbar-thumb-hover: rgba(255, 214, 10, 0.45);

  --title-gradient: none;
  --logo-filter: none;
  --card-header-text: #f7f5ef;

  --btn-secondary-bg: rgba(255, 255, 255, 0.06);
  --btn-secondary-border: rgba(255, 255, 255, 0.16);
  --btn-secondary-text: #ece8dc;
  --btn-secondary-hover-bg: rgba(255, 255, 255, 0.11);
  --btn-secondary-hover-text: #ffffff;

  /* charts (window.ppChartColor in _brand_head.html) */
  --pp-chart-primary: #ffd60a;
  --pp-chart-primary-rgb: 255, 214, 10;
  --pp-chart-bar-1: #ffd60a;
  --pp-chart-bar-2: #ffe680;
  --pp-chart-tooltip-bg: rgba(24, 22, 17, 0.97);
  --pp-chart-tooltip-border: rgba(255, 214, 10, 0.5);
  --pp-chart-shadow: rgba(255, 214, 10, 0.08);
  --pp-chart-pointer: #3a3529;          /* axis label chip; ECharts writes white on it */
}

/* ============================================ */
/* LIGHT THEME - variable remap                */
/* ============================================ */
/* The owner's direction: a WHITE page, clearly YELLOW cards, a WHITE
   navigation like the website's menu. Data (tables, charts) sits on white
   panels inside the cards, so numbers are always read on white. */
html[data-brand="yellow"][data-theme="light"] {
  --pp-ink-3: #596174;          /* muted text, a step darker than www's */
  --pp-paper-2: #f7f6f2;        /* neutral insets on white */
  --pp-paper-3: #efede7;
  --pp-line: #e7e3d8;           /* hairlines on white: bars, panels */
  --pp-line-2: #d3cdbd;         /* field and button edges on white */
  --pp-card: #fff4bd;           /* card fill */
  --pp-card-line: #efd670;      /* card edge */
  --pp-card-field: #dcc15e;     /* field and button edges on a card */
  --pp-card-rule: #f1e3a6;      /* rules inside a card or a data panel */
  --pp-panel-head: #fff8d6;     /* table header row */

  --bg-gradient-start: #ffffff;
  --bg-gradient-mid: #ffffff;
  --bg-gradient-end: #ffffff;
  --sidebar-bg-start: #ffffff;
  --sidebar-bg-end: #ffffff;
  --color-primary: #ffd60a;
  --color-primary-light: #ffd60a;
  --color-primary-dark: #0f1629;       /* .text-themed reads this in light: ink */
  --color-primary-rgb: 255, 214, 10;
  --color-secondary: #e6c200;
  --color-secondary-light: #0f1629;
  --color-secondary-rgb: 230, 194, 0;
  --select-option-bg: #ffffff;

  --glass-bg: #fff4bd;
  --glass-bg-hover: #fff0a6;
  --glass-bg-dark: #ffffff;
  --glass-border: #efd670;
  --glass-border-hover: #e2c34a;

  --nav-dropdown-bg: #ffffff;
  --nav-dropdown-border: #e7e3d8;
  --nav-dropdown-text: #3b4358;

  --text-primary: #0f1629;
  --text-secondary: #3b4358;
  --text-muted: #596174;
  --text-disabled: #6f7689;

  --input-bg: #ffffff;
  --input-bg-focus: #ffffff;
  --input-border: #d3cdbd;
  --input-border-focus: #0f1629;
  --input-text: #0f1629;
  --input-placeholder: #8a90a0;

  --table-bg: #ffffff;
  --table-header-bg: #fff8d6;
  --table-border: #f1e3a6;
  --table-row-hover: #fffbe9;
  --table-cell-bg: transparent;

  --active-bg: #fffae3;
  --active-border: #e6c200;

  --btn-primary-gradient: #ffd60a;
  --btn-primary-gradient-hover: #ffe033;

  --toggle-active-bg: #0f1629;
  --toggle-active-border: #0f1629;
  --checkbox-checked-bg: #0f1629;
  --checkbox-checked-border: #0f1629;

  --shadow-color-rgb: 15, 22, 41;
  --shadow-glass: 0 1px 2px rgba(120, 90, 0, 0.08), 0 14px 30px -20px rgba(120, 90, 0, 0.45);
  --shadow-glass-sm: 0 1px 2px rgba(15, 22, 41, 0.06), 0 3px 10px -4px rgba(15, 22, 41, 0.1);
  --shadow-glass-lg: 0 2px 4px rgba(15, 22, 41, 0.05), 0 30px 60px -24px rgba(15, 22, 41, 0.3);

  --scrollbar-track: rgba(15, 22, 41, 0.03);
  --scrollbar-thumb: rgba(15, 22, 41, 0.16);
  --scrollbar-thumb-hover: rgba(15, 22, 41, 0.3);

  --title-gradient: none;
  --logo-filter: none;
  --card-header-text: #0f1629;

  --btn-secondary-bg: #ffffff;
  --btn-secondary-border: #d3cdbd;
  --btn-secondary-text: #0f1629;
  --btn-secondary-hover-bg: #ffffff;
  --btn-secondary-hover-text: #0f1629;

  /* status colours as text on light grounds: the -700 end of each ramp */
  --color-success: #059669;
  --color-success-light: #047857;
  --color-warning: #b45309;
  --color-warning-light: #b45309;
  --color-danger-light: #b91c1c;
  --color-info: #0f1629;
  --color-info-light: #3b4358;

  --pp-chart-primary: #0f1629;
  --pp-chart-primary-rgb: 255, 214, 10;
  --pp-chart-bar-1: #ffd60a;
  --pp-chart-bar-2: #ffe680;
  --pp-chart-tooltip-bg: rgba(255, 255, 255, 0.98);
  --pp-chart-tooltip-border: #e6c200;
  --pp-chart-shadow: rgba(255, 214, 10, 0.2);
  --pp-chart-pointer: #0f1629;
}

/* ============================================ */
/* BASE + TYPE                                 */
/* ============================================ */
html[data-brand="yellow"] body {
  font-family: var(--pp-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A faint warm glow behind the content in the dark theme, so the charcoal has
   depth instead of reading as a flat fill. */
html[data-brand="yellow"]:not([data-theme="light"]) body {
  background:
    radial-gradient(1100px 520px at 85% -8%, rgba(255, 214, 10, 0.055), transparent 60%),
    linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
  background-attachment: fixed;
}

html[data-brand="yellow"] :is(h1, h2, h3, h4, .page-title) {
  font-family: var(--pp-font-display);
  letter-spacing: -0.012em;
}

html[data-brand="yellow"] ::selection {
  background: var(--pp-yellow-soft);
  color: var(--pp-ink);
}

html[data-brand="yellow"] :focus-visible {
  outline: 2px solid var(--pp-yellow);
  outline-offset: 2px;
}

/* Page title: solid ink/white instead of the blue gradient fill. */
html[data-brand="yellow"] .page-title {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
}

html[data-brand="yellow"] .page-subtitle {
  color: var(--text-muted);
}

/* ============================================ */
/* NAVIGATION - dark theme: charcoal           */
/* ============================================ */
html[data-brand="yellow"] .sidebar-glass {
  background: linear-gradient(180deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-end) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 40px -18px rgba(0, 0, 0, 0.6);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-brand="yellow"] .mobile-menu {
  background: linear-gradient(180deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-end) 100%) !important;
  border-right-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-brand="yellow"] .nav-link-glass {
  color: var(--pp-on-char-2);
  border: 1px solid transparent;
}

html[data-brand="yellow"] .nav-link-glass i {
  color: var(--pp-on-char-3);
  transition: color 0.2s ease;
}

html[data-brand="yellow"] .nav-link-glass:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

html[data-brand="yellow"] .nav-link-glass:hover i {
  color: var(--pp-yellow);
}

/* The page you are on: a yellow pill carrying ink, as www marks the current page. */
html[data-brand="yellow"] .nav-link-glass-active {
  background: var(--pp-yellow);
  border: 1px solid var(--pp-yellow);
  color: var(--pp-ink);
  font-weight: 700;
  box-shadow: 0 10px 24px -14px rgba(255, 214, 10, 0.7);
}

html[data-brand="yellow"] .nav-link-glass-active i {
  color: var(--pp-ink);
}

/* Section toggles (Administration, Properties). The classic light theme
   repaints these with !important, hence the !important here. */
html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer-toggle:not([class*="from-amber"]) {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--pp-on-char) !important;
}

html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer-toggle:not([class*="from-amber"]):hover {
  background: rgba(255, 255, 255, 0.085) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* A section that holds the current page */
html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer-toggle:not([class*="from-amber"])[class*="from-blue"] {
  background: rgba(255, 214, 10, 0.08) !important;
  border-color: rgba(255, 214, 10, 0.38) !important;
  color: #ffffff !important;
}

/* Demo Mode: outlined in yellow, so it never competes with the current-page pill. */
html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer-toggle[class*="from-amber"] {
  background: rgba(255, 214, 10, 0.1);
  border: 1px solid rgba(255, 214, 10, 0.5);
  color: var(--pp-yellow);
  box-shadow: none;
}

html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer-toggle[class*="from-amber"]:hover {
  background: rgba(255, 214, 10, 0.18);
  border-color: var(--pp-yellow);
  color: var(--pp-yellow);
}

/* Inside the charcoal navigation the content area's light-theme overrides
   (dark text, tinted insets) must not reach in; the light navigation below
   sets its own colours with stronger selectors. */
html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) .text-white {
  color: #ffffff !important;
}

html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) .text-gray-300 {
  color: var(--pp-on-char-2) !important;
}

html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) :is(.border-white\/10, .border-t) {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) .bg-white\/5 {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) .bg-white\/5:hover,
html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) .hover\:bg-white\/10:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}

html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) .divider-glass {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

html[data-brand="yellow"] :is(aside.sidebar-glass, div.mobile-menu) .text-themed {
  color: var(--pp-yellow) !important;
}

/* Impersonation notice: a solid brand-yellow card with an ink button, the same
   in both themes. The see-through tint looked washed out, and blanket text
   rules recoloured the button's own label -- white on yellow in dark, ink on
   ink in light. Everything inside the card is set here explicitly. */
html[data-brand="yellow"] .bg-gradient-to-br.from-blue-500\/20.from-blue-500\/20 {
  background: var(--pp-yellow) !important;
  border-color: var(--pp-yellow-3) !important;
  box-shadow: 0 1px 2px rgba(60, 45, 0, 0.18), 0 12px 24px -16px rgba(15, 22, 41, 0.55);
}

html[data-brand="yellow"] .bg-gradient-to-br.from-blue-500\/20 .text-blue-400.text-blue-400.text-blue-400,
html[data-brand="yellow"] .bg-gradient-to-br.from-blue-500\/20 .text-white.text-white:not(a) {
  color: var(--pp-ink) !important;
}

/* outweighs the dark theme's blanket .text-blue-300 rule further down */
html[data-brand="yellow"] .bg-gradient-to-br.from-blue-500\/20 .text-blue-300.text-blue-300.text-blue-300 {
  color: var(--pp-ink-2) !important;
}

html[data-brand="yellow"] .bg-gradient-to-br.from-blue-500\/20 .text-white.text-white:not(a).truncate {
  font-weight: 700;
}

html[data-brand="yellow"] .bg-gradient-to-br.from-blue-500\/20 a.bg-blue-600.bg-blue-600.text-white {
  background: var(--pp-ink) !important;
  color: #ffffff !important;
  box-shadow: none;
}

html[data-brand="yellow"] .bg-gradient-to-br.from-blue-500\/20 a.bg-blue-600.bg-blue-600.text-white:hover {
  background: #26304a !important;
}

html[data-brand="yellow"] .bg-gradient-to-br.from-blue-500\/20 a.bg-blue-600.bg-blue-600.text-white i {
  color: var(--pp-yellow) !important;
  background: none !important;
}

html[data-brand="yellow"] .bg-gradient-to-br.from-blue-500\/20 a.bg-blue-600.bg-blue-600.text-white:focus-visible {
  outline: 2px solid var(--pp-ink);
  outline-offset: 2px;
}

html[data-brand="yellow"] a.bg-blue-600 {
  background: var(--pp-yellow) !important;
  color: var(--pp-ink) !important;
}

html[data-brand="yellow"] a.bg-blue-600:hover {
  background: var(--pp-yellow-2) !important;
}

/* Theme switch in the navigation */
html[data-brand="yellow"] .theme-toggle-wrapper {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-brand="yellow"] .theme-toggle-wrapper:hover {
  background: rgba(255, 255, 255, 0.075);
}

html[data-brand="yellow"] .theme-toggle-label {
  color: var(--pp-on-char-2);
}

html[data-brand="yellow"] .theme-toggle-label i {
  color: var(--pp-yellow);
}

html[data-brand="yellow"] .theme-switch-slider {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

html[data-brand="yellow"] .theme-switch input:checked + .theme-switch-slider {
  background: rgba(255, 255, 255, 0.08);
}

/* Knob: yellow sun in the light theme, warm grey moon in the dark one. */
html[data-brand="yellow"] .theme-switch-slider:before {
  background: var(--pp-yellow) !important;
}

html[data-brand="yellow"] .theme-switch input:checked + .theme-switch-slider:before {
  background: linear-gradient(135deg, #4a4538 0%, #2e2a21 100%) !important;
}

/* Mobile menu buttons */
html[data-brand="yellow"] .mobile-menu-close {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

html[data-brand="yellow"][data-theme="light"] .mobile-menu-toggle {
  background: #ffffff !important;
  border-color: var(--pp-line-2) !important;
  color: var(--pp-ink) !important;
}

/* ============================================ */
/* NAVIGATION - light theme: the website menu  */
/* ============================================ */
/* Modelled on the www.parkplus.ai phone menu the owner likes: a white sheet,
   bold display-font links separated by hairlines, a round arrow chip at the
   end of each row, and the page you are on marked the website's way -- a
   yellow bar under its name and a solid yellow chip. Section toggles read as
   rows with a chevron chip; Demo Mode is the website's ink button. */
html[data-brand="yellow"][data-theme="light"] .sidebar-glass {
  border-right: 1px solid var(--pp-line);
  box-shadow: 8px 0 28px -24px rgba(15, 22, 41, 0.35);
}

html[data-brand="yellow"][data-theme="light"] .mobile-menu {
  border-right-color: var(--pp-line) !important;
  box-shadow: 18px 0 44px -18px rgba(15, 22, 41, 0.4);
}

/* rows sit flush, divided by hairlines, as on the website (Tailwind's
   space-y gaps between them are removed) */
html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) nav > :is(.nav-link-glass, .nav-link-glass-active, div.mb-2),
html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer > :is(.nav-link-glass, .nav-link-glass-active) {
  margin-top: 0 !important;
}

html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) nav > div.mb-2 {
  margin-bottom: 0;
}

html[data-brand="yellow"][data-theme="light"] :is(.nav-link-glass, .nav-link-glass-active) {
  position: relative;
  gap: 0.7rem;
  padding: 0.72rem 2.75rem 0.72rem 0.4rem;
  border: 0;
  border-bottom: 1px solid var(--pp-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--pp-ink);
  font-family: var(--pp-font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

html[data-brand="yellow"][data-theme="light"] :is(.nav-link-glass, .nav-link-glass-active) i {
  color: var(--pp-ink-3);
  font-size: 0.95rem;
}

/* the arrow chip */
html[data-brand="yellow"][data-theme="light"] :is(.nav-link-glass, .nav-link-glass-active)::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.68rem;
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pp-yellow-tint);
  color: var(--pp-ink);
  transition: background 0.2s ease, transform 0.25s var(--pp-ease);
}

html[data-brand="yellow"][data-theme="light"] .nav-link-glass:hover {
  background: transparent;
  color: var(--pp-ink);
  transform: none;
}

html[data-brand="yellow"][data-theme="light"] .nav-link-glass:hover i {
  color: var(--pp-ink);
}

html[data-brand="yellow"][data-theme="light"] .nav-link-glass:hover::after {
  background: var(--pp-yellow);
  transform: translateY(-50%) translateX(2px);
}

/* the page you are on */
html[data-brand="yellow"][data-theme="light"] .nav-link-glass-active {
  font-weight: 800;
}

html[data-brand="yellow"][data-theme="light"] .nav-link-glass-active i {
  color: var(--pp-ink);
}

html[data-brand="yellow"][data-theme="light"] .nav-link-glass-active span {
  background-image: linear-gradient(var(--pp-yellow), var(--pp-yellow));
  background-repeat: no-repeat;
  background-size: 100% 0.34em;
  background-position: 0 94%;
}

html[data-brand="yellow"][data-theme="light"] .nav-link-glass-active::after {
  background: var(--pp-yellow);
}

/* rows inside an opened section */
html[data-brand="yellow"][data-theme="light"] .nav-drawer :is(.nav-link-glass, .nav-link-glass-active) {
  font-size: 0.93rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

html[data-brand="yellow"][data-theme="light"] .nav-drawer :is(.nav-link-glass, .nav-link-glass-active)::after {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.6rem;
}

/* Section toggles (Administration, Properties) as rows with a chevron chip.
   The classic light theme paints them with !important, hence !important. */
html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer-toggle:not([class*="from-amber"]) {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pp-line) !important;
  border-radius: 0 !important;
  padding: 0.72rem 0.4rem !important;
  color: var(--pp-ink) !important;
  font-family: var(--pp-font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer-toggle:not([class*="from-amber"]) > i:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--pp-yellow-tint);
  color: var(--pp-ink);
  font-size: 0.68rem;
  transition: background 0.2s ease;
}

html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer-toggle:not([class*="from-amber"]):hover > i:last-child,
html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer-toggle:not([class*="from-amber"])[class*="from-blue"] > i:last-child {
  background: var(--pp-yellow);
}

html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer {
  margin-top: 0.25rem;
}

/* Demo Mode: the website's ink button */
html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer-toggle[class*="from-amber"] {
  background: var(--pp-ink);
  border: 1px solid var(--pp-ink);
  border-radius: 0.875rem;
  color: var(--pp-yellow);
  box-shadow: 0 10px 22px -14px rgba(15, 22, 41, 0.8);
}

html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .nav-drawer-toggle[class*="from-amber"]:hover {
  background: #26231b;
  border-color: #26231b;
  color: var(--pp-yellow);
}

html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) :is(.text-white, .hover\:text-white:hover) {
  color: var(--pp-ink) !important;
}

html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .text-gray-300 {
  color: var(--pp-ink-2) !important;
}

html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) :is(.border-white\/10, .border-t) {
  border-color: var(--pp-line) !important;
}

/* Demo Mode's menu items */
html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .bg-white\/5 {
  background: #ffffff !important;
  border-color: var(--pp-line-2) !important;
}

html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .bg-white\/5:hover,
html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .hover\:bg-white\/10:hover {
  background: var(--pp-yellow-tint) !important;
}

html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .divider-glass {
  background: transparent;
  margin: 0.5rem 0;
}

html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) .text-themed {
  color: var(--pp-ink) !important;
}

html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) a.bg-blue-600,
html[data-brand="yellow"][data-theme="light"] :is(aside.sidebar-glass, div.mobile-menu) a.bg-blue-600 i {
  background: var(--pp-ink) !important;
  color: var(--pp-yellow) !important;
}

/* Theme switch */
html[data-brand="yellow"][data-theme="light"] .theme-toggle-wrapper {
  background: var(--pp-paper-2);
  border-color: var(--pp-line);
}

html[data-brand="yellow"][data-theme="light"] .theme-toggle-wrapper:hover {
  background: var(--pp-yellow-tint);
}

html[data-brand="yellow"][data-theme="light"] .theme-toggle-label,
html[data-brand="yellow"][data-theme="light"] .theme-toggle-label i {
  color: var(--pp-ink);
}

html[data-brand="yellow"][data-theme="light"] .theme-switch-slider {
  background: #ffffff;
  border-color: var(--pp-line-2);
}

html[data-brand="yellow"][data-theme="light"] .theme-switch-slider:before {
  background: var(--pp-ink) !important;
}

/* The phone menu's close (X) and the hamburger: the website's round buttons */
html[data-brand="yellow"][data-theme="light"] .mobile-menu-close {
  background: var(--pp-ink) !important;
  color: var(--pp-yellow) !important;
  border-radius: 999px;
}

html[data-brand="yellow"][data-theme="light"] .mobile-menu-toggle {
  background: #ffffff !important;
  border-color: var(--pp-line-2) !important;
  color: var(--pp-ink) !important;
  border-radius: 999px !important;
}


/* ============================================ */
/* CARD HEADING ICONS - website-style tiles    */
/* ============================================ */
/* The accent icon that opens a card title sits on a tile, as www's feature
   cards do: yellow tile with an ink icon on paper, a yellow-tinted tile with
   a yellow icon on charcoal. Status-coloured icons (amber, green, red) keep
   their colour and stay bare. */
html[data-brand="yellow"] .glass-card :is(h2, h3) > i:first-child:is(.text-themed, .text-blue-400, .text-indigo-400, .text-sky-400) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 0.625rem;
  background: rgba(255, 214, 10, 0.14);
  color: var(--pp-yellow) !important;
  font-size: 0.875rem;
  vertical-align: middle;
}

/* On the yellow light-theme card the tile is ink with a yellow icon -- the
   website's ink chip on its yellow band. */
html[data-brand="yellow"][data-theme="light"] .glass-card :is(h2, h3) > i:first-child:is(.text-themed, .text-blue-400, .text-indigo-400, .text-sky-400) {
  background: var(--pp-ink);
  color: var(--pp-yellow) !important;
  box-shadow: 0 6px 14px -8px rgba(15, 22, 41, 0.6);
}

/* ============================================ */
/* HEADER BAR                                  */
/* ============================================ */
html[data-brand="yellow"] header.header-glass {
  background: rgba(21, 19, 15, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

html[data-brand="yellow"][data-theme="light"] header.header-glass {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--pp-line);
}

/* ============================================ */
/* SURFACES                                    */
/* ============================================ */
html[data-brand="yellow"] :is(.glass-card, .glass-card-hover) {
  border-radius: var(--pp-radius-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-brand="yellow"][data-theme="light"] .glass-card {
  background: var(--pp-card);
  border-color: var(--pp-line);
  box-shadow: var(--shadow-glass);
}

html[data-brand="yellow"] .glass-card-hover:hover {
  border-color: var(--glass-border-hover);
}

html[data-brand="yellow"][data-theme="light"] .divider-glass {
  background: linear-gradient(90deg, transparent, var(--pp-line-2), transparent);
}

html[data-brand="yellow"][data-theme="light"] .list-group-glass .list-group-item {
  background: #ffffff;
  color: var(--pp-ink-2);
}

html[data-brand="yellow"][data-theme="light"] .rules-collapsible {
  background: #ffffff;
}

html[data-brand="yellow"][data-theme="light"] .rules-content {
  background: var(--pp-paper-2);
}

html[data-brand="yellow"] .rules-item i {
  color: var(--color-primary-light);
}

html[data-brand="yellow"][data-theme="light"] .rules-item i {
  color: var(--pp-ink-2);
}

html[data-brand="yellow"] .image-thumbnail-container:hover {
  border-color: var(--pp-yellow);
}

/* ============================================ */
/* BUTTONS                                     */
/* ============================================ */
/* Rounded rectangles rather than the website's pills: portal buttons can wrap
   to two lines on a phone, and a two-line pill looks broken. */
html[data-brand="yellow"] :is(.btn-glass, .btn-glass-primary, .btn-glass-secondary, .btn-glass-danger, .btn-glass-success, .btn-glass-warning) {
  border-radius: 0.875rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-weight: 600;
}

html[data-brand="yellow"] .btn-glass-primary {
  background: var(--pp-yellow);
  border-color: var(--pp-yellow);
  color: var(--pp-ink);
  font-weight: 700;
  box-shadow: 0 10px 24px -14px rgba(255, 214, 10, 0.75);
}

html[data-brand="yellow"] .btn-glass-primary:hover {
  background: var(--pp-yellow-2);
  border-color: var(--pp-yellow-2);
  color: var(--pp-ink);
  box-shadow: 0 14px 30px -14px rgba(255, 214, 10, 0.85);
}

html[data-brand="yellow"] .btn-glass-primary:active {
  background: var(--pp-yellow-3);
}

/* Anything inside the yellow fill is ink -- icons and spans included, and even
   where a template also put text-white on the button. */
html[data-brand="yellow"] .btn-glass-primary :is(i, span, svg),
html[data-brand="yellow"] .btn-glass-primary.text-white {
  color: var(--pp-ink) !important;
}

html[data-brand="yellow"] .btn-glass-primary:disabled,
html[data-brand="yellow"] .btn-glass-primary[disabled] {
  background: rgba(255, 214, 10, 0.45);
  border-color: transparent;
  box-shadow: none;
}

html[data-brand="yellow"] .btn-glass {
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-text);
}

html[data-brand="yellow"] .btn-glass:hover {
  background: var(--btn-secondary-hover-bg);
  color: var(--btn-secondary-hover-text);
}

html[data-brand="yellow"][data-theme="light"] :is(.btn-glass, .btn-glass-secondary):hover {
  border-color: var(--pp-ink);
}

html[data-brand="yellow"] .btn-glass-danger {
  background: #dc2626;
  border-color: #dc2626;
}

html[data-brand="yellow"] .btn-glass-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

html[data-brand="yellow"] .btn-glass-success {
  background: #15803d;
  border-color: #15803d;
}

html[data-brand="yellow"] .btn-glass-success:hover {
  background: #166534;
  border-color: #166534;
}

/* Warning keeps its amber, deepened so it does not read as the brand yellow. */
html[data-brand="yellow"] .btn-glass-warning {
  background: #d97706;
  border-color: #d97706;
  color: #ffffff;
}

html[data-brand="yellow"] .btn-glass-warning:hover {
  background: #b45309;
  border-color: #b45309;
}

/* Table row actions */
html[data-brand="yellow"] .action-btn {
  color: var(--text-muted);
}

html[data-brand="yellow"] .action-btn:hover {
  color: var(--text-primary);
}

html[data-brand="yellow"] .action-btn-primary:hover {
  background: rgba(255, 214, 10, 0.16);
  border-color: rgba(255, 214, 10, 0.5);
  color: var(--pp-yellow);
}

html[data-brand="yellow"][data-theme="light"] .action-btn {
  background: #ffffff;
  border-color: var(--pp-line-2);
  color: var(--pp-ink-2);
}

html[data-brand="yellow"][data-theme="light"] .action-btn:hover {
  background: var(--pp-yellow-tint);
  border-color: var(--pp-yellow-3);
  color: var(--pp-ink);
}

html[data-brand="yellow"][data-theme="light"] .action-btn-primary:hover {
  background: var(--pp-yellow);
  border-color: var(--pp-yellow);
  color: var(--pp-ink);
}

html[data-brand="yellow"][data-theme="light"] .action-btn-danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* Time range pills (dashboards, reports) */
html[data-brand="yellow"] .time-range-btn.active {
  background: var(--pp-yellow);
  color: var(--pp-ink);
  font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(255, 214, 10, 0.8);
}

/* Option buttons on the vehicle-locate pages */
html[data-brand="yellow"] :is(.radio-btn.selected, .custom-radio.selected) {
  background: var(--pp-yellow);
  border-color: var(--pp-yellow);
  color: var(--pp-ink);
  box-shadow: 0 6px 16px -8px rgba(255, 214, 10, 0.8);
}

html[data-brand="yellow"] .custom-radio:hover {
  border-color: var(--pp-yellow);
}

/* ============================================ */
/* FORMS                                       */
/* ============================================ */
html[data-brand="yellow"] :is(.input-glass, .select-glass, .textarea-glass) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-brand="yellow"] :is(.input-glass, .select-glass, .textarea-glass):focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.22);
}

html[data-brand="yellow"][data-theme="light"] :is(.input-glass, .select-glass, .textarea-glass):focus {
  box-shadow: 0 0 0 4px var(--pp-yellow-soft);
}

/* A field you cannot change is shown as an inset; its value stays readable
   (the classic look also faded it to 60%, which on a light ground is too faint). */
html[data-brand="yellow"][data-theme="light"] :is(.input-glass, .textarea-glass):is(:disabled, [readonly]) {
  background: var(--pp-paper-2);
  color: var(--pp-ink-2);
  opacity: 1 !important;
}

html[data-brand="yellow"][data-theme="light"] .input-group-glass .input-group-text,
html[data-brand="yellow"][data-theme="light"] :is(.input-group-glass-prefix, .input-group-glass-suffix, .input-group-glass .input-group-icon) {
  background: var(--pp-paper-2);
  color: var(--pp-ink-2);
}

html[data-brand="yellow"] .input-group-glass .input-group-icon:hover,
html[data-brand="yellow"] .password-toggle-btn:focus {
  color: var(--color-primary-light);
}

html[data-brand="yellow"][data-theme="light"] .input-group-glass .input-group-icon:hover,
html[data-brand="yellow"][data-theme="light"] .password-toggle-btn:focus {
  color: var(--pp-ink);
}

html[data-brand="yellow"] .toggle-glass input:checked + .toggle-slider:before {
  background-color: var(--pp-ink);
}

html[data-brand="yellow"][data-theme="light"] .toggle-slider {
  background: var(--pp-paper-3);
  border-color: var(--pp-line-2);
}

html[data-brand="yellow"][data-theme="light"] .toggle-glass input:checked + .toggle-slider {
  background: var(--pp-yellow);
  border-color: var(--pp-yellow-3);
}

/* Native checkboxes, radios and ranges pick up the brand too. */
html[data-brand="yellow"] input:is([type="checkbox"], [type="radio"], [type="range"]) {
  accent-color: var(--pp-yellow);
}

html[data-brand="yellow"] .accent-themed {
  accent-color: var(--pp-yellow);
}

html[data-brand="yellow"][data-theme="light"] :is(.glass-card label, label.block) {
  color: var(--pp-ink-2) !important;
}

/* ============================================ */
/* TABLES                                      */
/* ============================================ */
html[data-brand="yellow"] .table-glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-glass-sm);
}

html[data-brand="yellow"] .table-glass th {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

html[data-brand="yellow"] .table-glass td {
  color: var(--text-secondary);
  border-bottom-color: var(--table-border);
}

html[data-brand="yellow"][data-theme="light"] .table-glass th {
  color: var(--pp-ink-3);
}

html[data-brand="yellow"][data-theme="light"] .table-glass td {
  color: var(--pp-ink-2);
  border-bottom-color: var(--pp-paper-3);
}

/* ============================================ */
/* BADGES + ALERTS                             */
/* ============================================ */
/* "Info" badges label things (a vehicle's type, a tow's status) rather than
   warn, so they become a quiet neutral pill instead of the old blue one. */
html[data-brand="yellow"] .badge-glass-info {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.17);
  color: var(--pp-on-char);
}

html[data-brand="yellow"][data-theme="light"] .badge-glass-info {
  background: var(--pp-paper-2);
  border-color: var(--pp-line-2);
  color: var(--pp-ink-2);
}

html[data-brand="yellow"] .badge-glass,
html[data-brand="yellow"] .badge-glass-secondary {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--pp-on-char-2);
}

html[data-brand="yellow"][data-theme="light"] :is(.badge-glass, .badge-glass-secondary) {
  background: var(--pp-paper-2);
  border-color: var(--pp-line);
  color: var(--pp-ink-2);
}

/* "Info" alerts: neutral panel, yellow icon on charcoal / ink icon on paper. */
html[data-brand="yellow"] .alert-glass-info {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--pp-on-char-2);
}

html[data-brand="yellow"] .alert-glass-info > i:first-child {
  color: var(--pp-yellow);
}

html[data-brand="yellow"][data-theme="light"] .alert-glass-info {
  background: var(--pp-paper-2);
  border-color: var(--pp-line-2);
  color: var(--pp-ink-2);
}

html[data-brand="yellow"][data-theme="light"] .alert-glass-info > i:first-child {
  color: var(--pp-ink);
}

html[data-brand="yellow"] :is(.alert-glass, .alert-glass-success, .alert-glass-warning, .alert-glass-danger, .alert-glass-info) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Edge tag validation badge (sky in classic) */
html[data-brand="yellow"] .badge-glass.badge-tag-validated {
  background: rgba(255, 214, 10, 0.14);
  border-color: rgba(255, 214, 10, 0.45);
  color: #ffe680;
}

html[data-brand="yellow"][data-theme="light"] .badge-glass.badge-tag-validated {
  background: var(--pp-yellow-soft);
  border-color: var(--pp-yellow-3);
  color: var(--pp-ink);
}

/* ============================================ */
/* THEMED UTILITIES                            */
/* ============================================ */
html[data-brand="yellow"] :is(.text-themed, .text-themed-primary) {
  color: var(--pp-yellow);
}

html[data-brand="yellow"][data-theme="light"] :is(.text-themed, .text-themed-primary) {
  color: var(--pp-ink);
}

html[data-brand="yellow"] .text-themed-secondary {
  color: var(--color-secondary-light);
}

html[data-brand="yellow"] .bg-themed {
  background-color: rgba(255, 214, 10, 0.16);
}

html[data-brand="yellow"][data-theme="light"] .bg-themed {
  background-color: var(--pp-yellow-soft);
}

html[data-brand="yellow"] .border-themed {
  border-color: rgba(255, 214, 10, 0.4);
}

html[data-brand="yellow"][data-theme="light"] .border-themed {
  border-color: var(--pp-yellow-3);
}

html[data-brand="yellow"] .hover\:text-themed:hover {
  color: var(--pp-yellow);
}

html[data-brand="yellow"][data-theme="light"] .hover\:text-themed:hover {
  color: var(--pp-ink);
}

/* ============================================ */
/* TAILWIND ACCENT UTILITIES (blue -> brand)   */
/* ============================================ */
/* Templates use Tailwind's blue / indigo ramp for accent text, icon tiles and
   outlines. Doubled classes outrank the classic light theme's own
   :not()-qualified !important rules for the same utilities. */

/* -- accent text: yellow on charcoal ------------------------------------- */
html[data-brand="yellow"]:not([data-theme="light"]) :is(.text-blue-400, .text-blue-500, .text-blue-600, .text-indigo-400, .text-sky-400, .group:hover .group-hover\:text-blue-400, .hover\:text-blue-400:hover) {
  color: var(--pp-yellow) !important;
}

html[data-brand="yellow"]:not([data-theme="light"]) :is(.text-blue-300, .text-blue-200, .text-indigo-300, .text-indigo-200, .text-sky-300, .group:hover .group-hover\:text-blue-300, .hover\:text-blue-300:hover, .hover\:text-indigo-200:hover) {
  color: #ffe680 !important;
}

html[data-brand="yellow"]:not([data-theme="light"]) :is(.text-blue-100\/80, .text-blue-100\/50) {
  color: rgba(255, 243, 176, 0.75) !important;
}

/* -- accent text: ink on paper -------------------------------------------- */
html[data-brand="yellow"][data-theme="light"] :is(.text-blue-200, .text-blue-300, .text-blue-400, .text-blue-500, .text-blue-600, .text-indigo-200, .text-indigo-300, .text-indigo-400, .text-sky-300, .text-sky-400):is(.text-blue-200, .text-blue-300, .text-blue-400, .text-blue-500, .text-blue-600, .text-indigo-200, .text-indigo-300, .text-indigo-400, .text-sky-300, .text-sky-400) {
  color: var(--pp-ink) !important;
}

html[data-brand="yellow"][data-theme="light"] :is(.group:hover .group-hover\:text-blue-400, .group:hover .group-hover\:text-blue-300, .hover\:text-blue-300:hover, .hover\:text-blue-400:hover, .hover\:text-indigo-200:hover) {
  color: var(--pp-ink) !important;
}

/* -- tints: icon tiles, chips, active rows -------------------------------- */
html[data-brand="yellow"] :is(.bg-blue-500\/10, .bg-blue-500\/15, .bg-blue-500\/20, .bg-blue-400\/20, .bg-indigo-500\/20) {
  background-color: rgba(255, 214, 10, 0.14) !important;
}

html[data-brand="yellow"][data-theme="light"] :is(.bg-blue-500\/10, .bg-blue-500\/15, .bg-blue-500\/20, .bg-blue-400\/20, .bg-indigo-500\/20) {
  background-color: var(--pp-yellow-soft) !important;
}

html[data-brand="yellow"] :is(.from-blue-500\/20, .from-blue-600\/20):not(.nav-drawer-toggle) {
  --tw-gradient-from: rgba(255, 214, 10, 0.12) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(255, 214, 10, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html[data-brand="yellow"] :is(.to-blue-600\/20, .to-indigo-500\/20, .via-blue-600\/15):not(.nav-drawer-toggle) {
  --tw-gradient-to: rgba(255, 214, 10, 0.06) var(--tw-gradient-to-position) !important;
}

/* -- outlines ------------------------------------------------------------- */
html[data-brand="yellow"] :is(.border-blue-500\/30, .border-blue-500\/40, .border-blue-400\/30, .border-indigo-500\/30) {
  border-color: rgba(255, 214, 10, 0.38) !important;
}

html[data-brand="yellow"][data-theme="light"] :is(.border-blue-500\/30, .border-blue-500\/40, .border-blue-400\/30, .border-indigo-500\/30) {
  border-color: var(--pp-yellow-3) !important;
}

html[data-brand="yellow"] :is(.border-indigo-400, .hover\:border-indigo-400:hover, .hover\:border-blue-500\/50:hover, .hover\:border-blue-500\/40:hover, .focus\:ring-blue-500:focus) {
  border-color: var(--pp-yellow) !important;
  --tw-ring-color: rgba(255, 214, 10, 0.6) !important;
}

/* -- solid blue fills ----------------------------------------------------- */
html[data-brand="yellow"] :is(.bg-blue-600, .bg-blue-500, .bg-blue-400) {
  background-color: var(--pp-yellow) !important;
  color: var(--pp-ink) !important;
}

html[data-brand="yellow"] :is(.hover\:bg-blue-700:hover, .hover\:bg-blue-600:hover) {
  background-color: var(--pp-yellow-2) !important;
}

/* ============================================ */
/* LIGHT THEME: white-alpha fills              */
/* ============================================ */
/* The classic light theme turns bg-white/5 insets and their hovers into blue
   tints. Here they become paper, with a yellow tint on hover. */
html[data-brand="yellow"][data-theme="light"] .bg-white\/5 {
  background: var(--pp-paper-2) !important;
  border-color: var(--pp-line);
}

html[data-brand="yellow"][data-theme="light"] :is(.bg-white\/5:hover, .hover\:bg-white\/10:hover):is(.bg-white\/5, .hover\:bg-white\/10) {
  background: var(--pp-yellow-tint) !important;
}

html[data-brand="yellow"][data-theme="light"] .bg-white\/10 {
  background: var(--pp-paper-3);
}

html[data-brand="yellow"][data-theme="light"] .border-white\/10 {
  border-color: var(--pp-line) !important;
}

html[data-brand="yellow"][data-theme="light"] .border-white\/20 {
  border-color: var(--pp-line-2);
}

/* Near-white text utilities would vanish on paper (the classic light theme
   misses these two), so they become ink like the rest of the content. The
   navigation keeps its own colours (stronger selectors above). */
html[data-brand="yellow"][data-theme="light"] :is(.text-gray-100, .text-gray-200) {
  color: var(--pp-ink-2) !important;
}

/* Warm greys on paper (classic used cool slate greys) */
html[data-brand="yellow"][data-theme="light"] .text-gray-300 {
  color: var(--pp-ink-2) !important;
}

html[data-brand="yellow"][data-theme="light"] :is(.text-gray-400, .text-gray-500) {
  color: var(--pp-ink-3) !important;
}

/* ============================================ */
/* LIGHT THEME: readable status colours        */
/* ============================================ */
/* Tailwind's -100..-400 shades were picked for charcoal; on the light, tinted
   grounds they fall to 1.5-3:1. Same hues, the -700 end of each ramp. The
   navigation sets its own colours with stronger selectors. */
html[data-brand="yellow"][data-theme="light"] :is(.text-amber-100, .text-amber-200, .text-amber-300, .text-amber-400, .text-amber-100\/50, .text-amber-100\/70, .text-amber-100\/80, .text-amber-100\/90, .text-amber-300\/80, .text-amber-300\/90, .text-amber-400\/70, .hover\:text-amber-200:hover) {
  color: #92400e !important;
}

html[data-brand="yellow"][data-theme="light"] :is(.text-yellow-300, .text-yellow-400) {
  color: #a16207 !important;
}

html[data-brand="yellow"][data-theme="light"] :is(.text-red-100\/60, .text-red-100\/80, .text-red-200, .text-red-300, .text-red-400, .text-red-500, .hover\:text-red-300:hover) {
  color: #b91c1c !important;
}

html[data-brand="yellow"][data-theme="light"] :is(.text-green-300, .text-green-400, .text-emerald-200, .text-emerald-300, .text-emerald-400) {
  color: #047857 !important;
}

html[data-brand="yellow"][data-theme="light"] :is(.text-purple-400, .text-violet-400) {
  color: #6d28d9 !important;
}

html[data-brand="yellow"][data-theme="light"] .text-pink-400 {
  color: #be185d !important;
}

/* green gradient revenue figure (bg-clip-text) */
html[data-brand="yellow"][data-theme="light"] .bg-clip-text.from-emerald-400 {
  --tw-gradient-from: #059669 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: #047857 var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html[data-brand="yellow"][data-theme="light"] .empty-state-subtext {
  color: var(--pp-ink-3);
}

html[data-brand="yellow"][data-theme="light"] .rules-preview {
  opacity: 1;
  color: var(--pp-ink-3);
}

/* Patrol card notices, light theme (pages.css colours are for charcoal) */
html[data-brand="yellow"][data-theme="light"] :is(.tag-notice-message, .fuzzy-matches-intro, .fuzzy-matches-toggle) {
  color: #92400e;
}

html[data-brand="yellow"][data-theme="light"] .tag-notice-time {
  color: #a16207;
}

html[data-brand="yellow"][data-theme="light"] .fuzzy-match-distance {
  color: #92400e;
  background: rgba(245, 158, 11, 0.16);
}

html[data-brand="yellow"][data-theme="light"] .plate-diff-char {
  color: #b45309;
}

html[data-brand="yellow"][data-theme="light"] .fuzzy-match-plate {
  color: var(--pp-ink);
}

html[data-brand="yellow"][data-theme="light"] .fuzzy-match-details {
  color: var(--pp-ink-2);
}

html[data-brand="yellow"][data-theme="light"] .fuzzy-match-label,
html[data-brand="yellow"][data-theme="light"] .citation-history-meta {
  color: var(--pp-ink-3);
}

html[data-brand="yellow"][data-theme="light"] :is(.fuzzy-match-dnt, .do-not-tow-title, .do-not-tow-message, .citation-history-today, .citation-history-violation, .result-value.expired, .result-value.wrong-zone) {
  color: #b91c1c;
}

/* ============================================ */
/* DARK THEME: warm greys on charcoal          */
/* ============================================ */
html[data-brand="yellow"]:not([data-theme="light"]) .text-gray-200 {
  color: #ebe7dc;
}

html[data-brand="yellow"]:not([data-theme="light"]) .text-gray-300 {
  color: #d6d1c3;
}

html[data-brand="yellow"]:not([data-theme="light"]) .text-gray-400 {
  color: #aca696;
}

html[data-brand="yellow"]:not([data-theme="light"]) .text-gray-500 {
  color: #8f8979;
}

html[data-brand="yellow"]:not([data-theme="light"]) .text-gray-600 {
  color: #8a8474;
}

/* ============================================ */
/* PATROL / SCAN RESULTS                       */
/* ============================================ */
html[data-brand="yellow"] #captureButton {
  background: var(--pp-yellow);
  color: var(--pp-ink);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 22px rgba(255, 214, 10, 0.55), 0 0 0 0 rgba(255, 214, 10, 0.4);
}

html[data-brand="yellow"] #captureButton:hover {
  box-shadow: 0 6px 30px rgba(255, 214, 10, 0.75), 0 0 0 8px rgba(255, 214, 10, 0.22);
}

html[data-brand="yellow"] .camera-control-btn:hover {
  color: var(--pp-yellow);
}

/* The card itself is neutral; the green / red / amber header carries the verdict. */
html[data-brand="yellow"] .result-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0%, var(--glass-bg-dark) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
}

html[data-brand="yellow"] .result-card:hover {
  border-color: rgba(255, 214, 10, 0.35);
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.75);
}

html[data-brand="yellow"][data-theme="light"] .result-card {
  background: #ffffff;
  border-color: var(--pp-line);
  box-shadow: var(--shadow-glass);
}

html[data-brand="yellow"][data-theme="light"] .result-card:hover {
  border-color: var(--pp-line-2);
}

html[data-brand="yellow"] .result-label {
  color: var(--pp-yellow);
}

html[data-brand="yellow"][data-theme="light"] .result-label {
  color: var(--pp-ink-3);
}

/* Scan footers use the same warm-charcoal surface and button palette in both
   themes. Keep the palette local; other light-mode controls stay unchanged. */
html[data-brand="yellow"] .result-actions {
  background: var(--pp-char-1);
  border-top-color: rgba(255, 255, 255, 0.08);
  --btn-secondary-bg: rgba(255, 255, 255, 0.06);
  --btn-secondary-border: rgba(255, 255, 255, 0.16);
  --btn-secondary-text: #ece8dc;
  --btn-secondary-hover-bg: rgba(255, 255, 255, 0.11);
  --btn-secondary-hover-text: #ffffff;
}

html[data-brand="yellow"] .result-actions .btn-glass-secondary:hover {
  border-color: var(--btn-secondary-border);
}

/* Reserved-space bar stays black; its icon takes the yellow. */
html[data-brand="yellow"] .reserved-permit-bar {
  border-bottom-color: rgba(255, 214, 10, 0.35);
}

html[data-brand="yellow"] .reserved-permit-bar i {
  color: var(--pp-yellow);
}

/* TAG action and the notes badge were Google blue. */
html[data-brand="yellow"] .action-btn-tag,
html[data-brand="yellow"] .tag-notes-badge {
  background: var(--pp-yellow);
  color: var(--pp-ink);
  box-shadow: 0 2px 8px rgba(255, 214, 10, 0.35);
}

html[data-brand="yellow"] .action-btn-tag:hover {
  box-shadow: 0 4px 12px rgba(255, 214, 10, 0.55);
}

html[data-brand="yellow"] .citation-history-previous {
  color: #ffe680;
}

html[data-brand="yellow"] .citation-history-item-previous {
  background: rgba(255, 214, 10, 0.06);
}

html[data-brand="yellow"] .citation-history-violation-old {
  color: #ece3c2;
}

html[data-brand="yellow"][data-theme="light"] .citation-history-previous,
html[data-brand="yellow"][data-theme="light"] .citation-history-violation-old {
  color: var(--pp-ink-2);
}

html[data-brand="yellow"][data-theme="light"] .citation-history-item-previous {
  background: var(--pp-paper-2);
}

/* Patrol modals (tag a vehicle, transactions) */
html[data-brand="yellow"] .tag-modal {
  background: linear-gradient(135deg, rgba(34, 31, 24, 0.98) 0%, rgba(20, 18, 14, 0.98) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

html[data-brand="yellow"] .tag-modal-input:focus {
  border-color: rgba(255, 214, 10, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.18);
}

/* ============================================ */
/* LOGIN + STANDALONE PAGES                    */
/* ============================================ */
html[data-brand="yellow"] :is(.login-btn-glass-primary, .login-checkbox-glass:checked) {
  background: var(--pp-yellow);
  border-color: var(--pp-yellow);
  color: var(--pp-ink);
}

html[data-brand="yellow"] .login-btn-glass-primary:hover {
  background: var(--pp-yellow-2);
  box-shadow: 0 12px 26px -12px rgba(255, 214, 10, 0.8);
}

html[data-brand="yellow"] :is(.login-input-glass, .login-select-glass):focus {
  border-color: var(--input-border-focus);
}

html[data-brand="yellow"]:not([data-theme="light"]) :is(.login-page-body, .vehicle-locate-body, .contract-page-body) {
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(255, 214, 10, 0.07), transparent 60%),
    linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
}

html[data-brand="yellow"] .contract-header {
  background: linear-gradient(135deg, rgba(255, 214, 10, 0.12), rgba(255, 214, 10, 0.04));
  border-color: rgba(255, 214, 10, 0.3);
}

html[data-brand="yellow"][data-theme="light"] .contract-header {
  background: var(--pp-yellow-tint);
  border-color: var(--pp-yellow-3);
}

/* ============================================ */
/* EDGE PAGES (light theme leftovers)          */
/* ============================================ */
html[data-brand="yellow"][data-theme="light"] .edge-page .table-glass tbody tr:hover {
  background-color: var(--pp-yellow-tint);
}

html[data-brand="yellow"][data-theme="light"] .edge-page .glass-card .glass-card {
  background: var(--pp-paper-2);
  border-color: var(--pp-line);
}

/* ============================================ */
/* INLINE-STYLED PIECES (class hooks)          */
/* ============================================ */
/* These elements carry their classic colours inline. The templates give them
   a pp-* class (or they have an id), which no classic stylesheet uses, and
   these rules restyle them; !important is what outranks an inline style. */

/* Highlighted row actions (admin: log in as user, view contract) */
html[data-brand="yellow"] .action-btn.pp-action-accent {
  background: rgba(255, 214, 10, 0.16) !important;
  border-color: rgba(255, 214, 10, 0.45) !important;
  color: var(--pp-yellow);
}

html[data-brand="yellow"][data-theme="light"] .action-btn.pp-action-accent {
  background: var(--pp-yellow) !important;
  border-color: var(--pp-yellow-3) !important;
  color: var(--pp-ink);
}

/* Resident dashboard: guest code, "response submitted" */
html[data-brand="yellow"] .pp-brand-note {
  background: rgba(255, 214, 10, 0.08) !important;
  border-color: rgba(255, 214, 10, 0.3) !important;
}

html[data-brand="yellow"] .pp-brand-note-title {
  color: #ffe680 !important;
}

html[data-brand="yellow"] .pp-brand-note-text {
  color: #ece3c2 !important;
}

html[data-brand="yellow"][data-theme="light"] .pp-brand-note {
  background: var(--pp-yellow-tint) !important;
  border-color: var(--pp-yellow-3) !important;
}

html[data-brand="yellow"][data-theme="light"] .pp-brand-note-title {
  color: var(--pp-ink) !important;
}

html[data-brand="yellow"][data-theme="light"] .pp-brand-note-text {
  color: var(--pp-ink-2) !important;
}

/* Tagged-vehicle notice: stays amber, in the dark amber shades on paper */
html[data-brand="yellow"][data-theme="light"] .pp-tag-note-title {
  color: #92400e !important;
}

html[data-brand="yellow"][data-theme="light"] .pp-tag-note-msg {
  color: #78350f !important;
}

html[data-brand="yellow"][data-theme="light"] .pp-tag-note-time {
  color: #a16207 !important;
}

/* Resident dashboard modals ("I've fixed this", "report a space problem") */
html[data-brand="yellow"] .pp-modal-card {
  background: linear-gradient(135deg, #24211a 0%, #16140f 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-brand="yellow"] .pp-modal-head {
  background: rgba(255, 214, 10, 0.1) !important;
  border-bottom-color: rgba(255, 214, 10, 0.3) !important;
}

html[data-brand="yellow"] .pp-modal-title {
  color: var(--pp-yellow) !important;
  font-family: var(--pp-font-display);
}

html[data-brand="yellow"][data-theme="light"] .pp-modal-card {
  background: #ffffff !important;
  border-color: var(--pp-line) !important;
  box-shadow: var(--shadow-glass-lg);
}

html[data-brand="yellow"][data-theme="light"] .pp-modal-head {
  background: var(--pp-yellow) !important;
  border-bottom-color: var(--pp-yellow-3) !important;
}

html[data-brand="yellow"][data-theme="light"] :is(.pp-modal-title, .pp-modal-sub) {
  color: var(--pp-ink) !important;
}

html[data-brand="yellow"][data-theme="light"] .pp-modal-foot {
  background: var(--pp-paper-2) !important;
  border-top-color: var(--pp-line) !important;
}

/* EliseAI "turn off sync" choices on Configure Property */
html[data-brand="yellow"] #elise_keep_btn {
  background: rgba(255, 214, 10, 0.12) !important;
  border-color: rgba(255, 214, 10, 0.4) !important;
  color: #fff3b0 !important;
}

html[data-brand="yellow"][data-theme="light"] #elise_keep_btn {
  background: var(--pp-yellow-tint) !important;
  border-color: var(--pp-yellow-3) !important;
  color: var(--pp-ink) !important;
}

html[data-brand="yellow"][data-theme="light"] #elise_delete_btn {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

/* Employee registration card edge: the company's colour when one is set,
   otherwise the brand yellow (the classic fallback was blue). */
html[data-brand="yellow"] {
  --accent-color: #ffd60a;
}

/* Status badges on the light grounds: the red needs its darker shade to read
   at badge size; inline violet badges are coloured separately. */
html[data-brand="yellow"][data-theme="light"] .badge-glass-danger {
  color: #b91c1c;
}

html[data-brand="yellow"][data-theme="light"] .badge-glass[style*="167, 139, 250"] {
  color: #6d28d9 !important;
}

/* ============================================ */
/* LIGHT THEME: cards, data panels, controls   */
/* ============================================ */
/* Yellow cards on the white page. Anything you read data from -- a table, a
   chart, a nested card, an inset -- is a white panel inside the card, edged in
   gold. On the yellow card the brand yellow would vanish, so controls there
   switch to ink: primary buttons, active pills, switches and checks. */
html[data-brand="yellow"][data-theme="light"] :is(.glass-card, .glass-card-hover) {
  background: var(--pp-card);
  border: 1px solid var(--pp-card-line);
  box-shadow: var(--shadow-glass);
}

html[data-brand="yellow"][data-theme="light"] .glass-card-hover:hover {
  border-color: var(--pp-yellow-3);
}

/* nested cards and insets are white panels */
html[data-brand="yellow"][data-theme="light"] :is(.glass-card, .glass-card-hover) :is(.glass-card, .glass-card-hover) {
  background: #ffffff;
  border-color: var(--pp-card-rule);
  box-shadow: none;
}

html[data-brand="yellow"][data-theme="light"] .bg-white\/5 {
  background: #ffffff !important;
  border-color: var(--pp-card-rule);
}

html[data-brand="yellow"][data-theme="light"] :is(.bg-white\/5:hover, .hover\:bg-white\/10:hover):is(.bg-white\/5, .hover\:bg-white\/10) {
  background: var(--pp-yellow-tint) !important;
}

html[data-brand="yellow"][data-theme="light"] .bg-white\/10 {
  background: #ffffff;
}

html[data-brand="yellow"][data-theme="light"] .border-white\/10 {
  border-color: var(--pp-card-rule) !important;
}

html[data-brand="yellow"][data-theme="light"] .divider-glass {
  background: var(--pp-card-rule);
}

/* -- tables: a white sheet, a soft-yellow header row ---------------------- */
html[data-brand="yellow"][data-theme="light"] .table-glass {
  background: #ffffff;
  border: 1px solid var(--pp-card-rule);
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(120, 90, 0, 0.06);
}

html[data-brand="yellow"][data-theme="light"] .table-glass thead {
  background: var(--pp-panel-head);
  border-bottom: 1px solid var(--pp-card-rule);
}

html[data-brand="yellow"][data-theme="light"] .table-glass th {
  color: var(--pp-ink-2);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

html[data-brand="yellow"][data-theme="light"] .table-glass td {
  background: transparent;
  color: var(--pp-ink-2);
  border-bottom: 1px solid #f6efd6;
}

html[data-brand="yellow"][data-theme="light"] .table-glass tbody tr:hover,
html[data-brand="yellow"][data-theme="light"] .table-glass tbody tr:hover td {
  background: var(--table-row-hover);
}

/* -- charts: drawn on a white panel ---------------------------------------- */
html[data-brand="yellow"][data-theme="light"] [_echarts_instance_] {
  background: #ffffff;
  border: 1px solid var(--pp-card-rule);
  border-radius: 0.875rem;
}

/* -- fields on a card ------------------------------------------------------ */
html[data-brand="yellow"][data-theme="light"] :is(.input-glass, .select-glass, .textarea-glass) {
  background-color: #ffffff;
  border-color: var(--pp-line-2);
}

html[data-brand="yellow"][data-theme="light"] :is(.glass-card, .glass-card-hover) :is(.input-glass, .select-glass, .textarea-glass) {
  border-color: var(--pp-card-field);
}

html[data-brand="yellow"][data-theme="light"] :is(.input-glass, .select-glass, .textarea-glass):focus {
  border-color: var(--pp-ink);
  box-shadow: 0 0 0 3px rgba(255, 214, 10, 0.75);
}

html[data-brand="yellow"][data-theme="light"] :is(.input-glass, .textarea-glass):is(:disabled, [readonly]) {
  background: #fffbe8;
  color: var(--pp-ink-2);
  opacity: 1 !important;
}

html[data-brand="yellow"][data-theme="light"] .input-group-glass .input-group-text,
html[data-brand="yellow"][data-theme="light"] :is(.input-group-glass-prefix, .input-group-glass-suffix, .input-group-glass .input-group-icon) {
  background: #fffbe8;
  border-color: var(--pp-card-field);
  color: var(--pp-ink-2);
}

/* -- buttons --------------------------------------------------------------- */
html[data-brand="yellow"][data-theme="light"] .btn-glass-primary {
  box-shadow: 0 8px 20px -12px rgba(230, 194, 0, 0.95);
}

html[data-brand="yellow"][data-theme="light"] :is(.glass-card, .glass-card-hover) .btn-glass-primary {
  background: var(--pp-ink);
  border-color: var(--pp-ink);
  color: var(--pp-yellow);
  box-shadow: 0 8px 18px -12px rgba(15, 22, 41, 0.7);
}

html[data-brand="yellow"][data-theme="light"] :is(.glass-card, .glass-card-hover) .btn-glass-primary:hover {
  background: #26231b;
  border-color: #26231b;
  color: var(--pp-yellow);
}

html[data-brand="yellow"][data-theme="light"] :is(.glass-card, .glass-card-hover) .btn-glass-primary :is(i, span, svg) {
  color: var(--pp-yellow) !important;
}

html[data-brand="yellow"][data-theme="light"] :is(.glass-card, .glass-card-hover) :is(.btn-glass, .btn-glass-secondary) {
  background: #ffffff;
  border-color: var(--pp-card-field);
}

html[data-brand="yellow"][data-theme="light"] .action-btn {
  background: #ffffff;
  border-color: var(--pp-line-2);
}

/* time-range and option pills */
html[data-brand="yellow"][data-theme="light"] .time-range-selector {
  background: #ffffff;
  border-color: var(--pp-card-rule);
}

html[data-brand="yellow"][data-theme="light"] .time-range-btn.active {
  background: var(--pp-ink);
  color: var(--pp-yellow);
  box-shadow: 0 6px 14px -8px rgba(15, 22, 41, 0.7);
}

/* -- switches and checks: ink when on --------------------------------------- */
html[data-brand="yellow"][data-theme="light"] .toggle-slider {
  background: #e9e4d6;
  border-color: var(--pp-line-2);
}

html[data-brand="yellow"][data-theme="light"] .toggle-glass input:checked + .toggle-slider {
  background: var(--pp-ink);
  border-color: var(--pp-ink);
}

html[data-brand="yellow"][data-theme="light"] .toggle-glass input:checked + .toggle-slider:before {
  background-color: var(--pp-yellow);
}

html[data-brand="yellow"][data-theme="light"] input:is([type="checkbox"], [type="radio"], [type="range"]),
html[data-brand="yellow"][data-theme="light"] .accent-themed {
  accent-color: var(--pp-ink);
}

/* -- checkboxes: one look everywhere ---------------------------------------- */
/* There were three: the glass checkbox (.checkbox-glass, a "✓" character over
   a filled box), the browser's own (bare inputs, and inputs carrying
   .toggle-glass -- a class meant for a switch's label, which on an input only
   stretches it to 44x24), and a few Tailwind-styled ones. Side by side on one
   card they read as three different controls. Every visible checkbox is now
   drawn the same way: a 20px rounded square, white with an ink edge, ink with a
   white tick when checked -- yellow with an ink tick on the dark theme.
   Switches, the theme toggle and the hidden inputs behind custom controls are
   left alone. */
html[data-brand="yellow"] {
  --pp-cb-bg: rgba(255, 255, 255, 0.04);
  --pp-cb-edge: rgba(244, 241, 232, 0.45);
  --pp-cb-edge-hover: rgba(244, 241, 232, 0.75);
  --pp-cb-on: var(--pp-yellow);
  --pp-cb-ring: var(--pp-yellow);
  --pp-cb-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='%230f1629' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pp-cb-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%230f1629' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

html[data-brand="yellow"][data-theme="light"] {
  --pp-cb-bg: #ffffff;
  --pp-cb-edge: var(--pp-ink-3);
  --pp-cb-edge-hover: var(--pp-ink);
  --pp-cb-on: var(--pp-ink);
  --pp-cb-ring: var(--pp-ink);
  --pp-cb-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pp-cb-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

html[data-brand="yellow"] input[type="checkbox"]:not(.theme-toggle-checkbox, .flash-checkbox-hidden, .sr-only, .peer, .toggle-glass input) {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1.5px solid var(--pp-cb-edge);
  border-radius: 0.375rem;
  background-color: var(--pp-cb-bg);
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.875rem;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: inherit;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

html[data-brand="yellow"] input[type="checkbox"]:not(.theme-toggle-checkbox, .flash-checkbox-hidden, .sr-only, .peer, .toggle-glass input):hover {
  border-color: var(--pp-cb-edge-hover);
}

html[data-brand="yellow"] input[type="checkbox"]:not(.theme-toggle-checkbox, .flash-checkbox-hidden, .sr-only, .peer, .toggle-glass input):checked {
  background-color: var(--pp-cb-on);
  background-image: var(--pp-cb-tick);
  border-color: var(--pp-cb-on);
}

html[data-brand="yellow"] input[type="checkbox"]:not(.theme-toggle-checkbox, .flash-checkbox-hidden, .sr-only, .peer, .toggle-glass input):indeterminate {
  background-color: var(--pp-cb-on);
  background-image: var(--pp-cb-dash);
  border-color: var(--pp-cb-on);
}

html[data-brand="yellow"] input[type="checkbox"]:not(.theme-toggle-checkbox, .flash-checkbox-hidden, .sr-only, .peer, .toggle-glass input):focus-visible {
  outline: 2px solid var(--pp-cb-ring);
  outline-offset: 2px;
}

html[data-brand="yellow"] input[type="checkbox"]:not(.theme-toggle-checkbox, .flash-checkbox-hidden, .sr-only, .peer, .toggle-glass input):disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* the glass checkbox's "✓" character gives way to the drawn tick */
html[data-brand="yellow"] .checkbox-glass::after {
  content: none !important;
}

/* A day's checkbox in the enforcement schedule sat in its own boxed pill, so it
   looked like a different control from the one above it. It stands on the
   card like every other checkbox. */
html[data-brand="yellow"] div.pp-check-cell.bg-white\/5 {
  padding-left: 0;              /* lines the days up under the switch above */
  background: transparent !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* A label sits where its help line starts (the help lines are indented 2rem). */
html[data-brand="yellow"] .toggle-container > input[type="checkbox"] {
  margin-right: 0.25rem;
}

/* .toggle-container is inline-flex, so a stack of them -- the sign-up document
   requirements -- ran together on one line, each box hard against the previous
   label. In a vertical list each option gets its own line. */
html[data-brand="yellow"] :is(.space-y-2, .space-y-3, .space-y-4) > .toggle-container {
  display: flex;
}

/* -- quiet panels inside a card --------------------------------------------- */
html[data-brand="yellow"][data-theme="light"] :is(.badge-glass, .badge-glass-secondary, .badge-glass-info) {
  background: #ffffff;
  border-color: var(--pp-line-2);
  color: var(--pp-ink-2);
}

html[data-brand="yellow"][data-theme="light"] .alert-glass-info {
  background: #ffffff;
  border-color: var(--pp-card-field);
  color: var(--pp-ink-2);
}

html[data-brand="yellow"][data-theme="light"] :is(.rules-collapsible, .list-group-glass .list-group-item) {
  background: #ffffff;
}

html[data-brand="yellow"][data-theme="light"] .rules-content {
  background: #fffbe8;
}

/* -- links that were blue: ink with the website's yellow underline ----------- */
html[data-brand="yellow"][data-theme="light"] a:is(.text-blue-300, .text-blue-400, .text-indigo-300, .text-sky-300, .text-themed) {
  text-decoration: underline;
  text-decoration-color: var(--pp-yellow-3);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* -- header bar ------------------------------------------------------------- */
html[data-brand="yellow"][data-theme="light"] header.header-glass {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--pp-line);
}

/* -- the patrol scan card, light ------------------------------------------- */
html[data-brand="yellow"][data-theme="light"] .result-card {
  background: #ffffff;
  border-color: var(--pp-line);
}

/* The close button carries text-white, which the light navigation turns ink;
   on the ink button the X must stay yellow. */
html[data-brand="yellow"][data-theme="light"] div.mobile-menu button.mobile-menu-close.mobile-menu-close {
  color: var(--pp-yellow) !important;
}

/* Every coloured icon that opens a card title gets the tile, so the cards read
   alike. Status-coloured icons keep their hue: on charcoal they sit on a
   neutral tile, on the light theme's ink tile they take the bright shade. */
html[data-brand="yellow"] .glass-card :is(h2, h3) > i:first-child:is(.text-amber-400, .text-yellow-400, .text-red-400, .text-green-400, .text-emerald-400, .text-purple-400, .text-pink-400) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.875rem;
  vertical-align: middle;
}

html[data-brand="yellow"][data-theme="light"] .glass-card :is(h2, h3) > i:first-child:is(.text-amber-400, .text-yellow-400, .text-red-400, .text-green-400, .text-emerald-400, .text-purple-400, .text-pink-400) {
  background: var(--pp-ink);
  box-shadow: 0 6px 14px -8px rgba(15, 22, 41, 0.6);
}

html[data-brand="yellow"][data-theme="light"] .glass-card :is(h2, h3) > i:first-child:is(.text-amber-400, .text-yellow-400) {
  color: #fbbf24 !important;
}

html[data-brand="yellow"][data-theme="light"] .glass-card :is(h2, h3) > i:first-child.text-red-400 {
  color: #f87171 !important;
}

html[data-brand="yellow"][data-theme="light"] .glass-card :is(h2, h3) > i:first-child:is(.text-green-400, .text-emerald-400) {
  color: #34d399 !important;
}

html[data-brand="yellow"][data-theme="light"] .glass-card :is(h2, h3) > i:first-child.text-purple-400 {
  color: #c4b5fd !important;
}

html[data-brand="yellow"][data-theme="light"] .glass-card :is(h2, h3) > i:first-child.text-pink-400 {
  color: #f9a8d4 !important;
}

/* Resident form headers are filled with the primary colour inline (yellow in
   this brand), so their titles are ink in both themes; the delete header is
   red, so its title stays white. */
html[data-brand="yellow"] .card-header[style*="--btn-primary-gradient"] :is(h1, h2, h3, h4, h5, h6, p, span, i, .text-white) {
  color: var(--pp-ink) !important;
}

html[data-brand="yellow"] .card-header[style*="--color-danger"]:is(.text-white),
html[data-brand="yellow"] .card-header[style*="--color-danger"] :is(h1, h2, h3, h4, h5, h6, p, span, i, .text-white) {
  color: #ffffff !important;
}

/* A primary button that is waiting (disabled) on charcoal: dimmed, still legible */
html[data-brand="yellow"]:not([data-theme="light"]) :is(.btn-glass-primary:disabled, .btn-glass-primary[disabled]) {
  background: #4a4229;
  border-color: #4a4229;
  color: #d8cfae;
}

html[data-brand="yellow"]:not([data-theme="light"]) :is(.btn-glass-primary:disabled, .btn-glass-primary[disabled]) :is(i, span, svg) {
  color: #d8cfae !important;
}

/* A waiting (disabled) primary button on a light yellow card: muted, clearly
   not clickable (the ink fill above is only for live buttons). */
html[data-brand="yellow"][data-theme="light"] :is(.glass-card, .glass-card-hover) :is(.btn-glass-primary:disabled, .btn-glass-primary[disabled]) {
  background: #ebe1b4;
  border-color: #ebe1b4;
  color: rgba(15, 22, 41, 0.55);
  box-shadow: none;
}

html[data-brand="yellow"][data-theme="light"] :is(.glass-card, .glass-card-hover) :is(.btn-glass-primary:disabled, .btn-glass-primary[disabled]) :is(i, span, svg) {
  color: rgba(15, 22, 41, 0.55) !important;
}

/* ============================================ */
/* BOOTSTRAP PAGES (public vehicle locator)    */
/* ============================================ */
/* tools/vehicle_locate.html is built on Bootstrap 5, whose primary is blue. */
html[data-brand="yellow"] {
  --bs-primary: #ffd60a;
  --bs-primary-rgb: 255, 214, 10;
  --bs-link-color: #0f1629;
  --bs-link-color-rgb: 15, 22, 41;
  --bs-link-hover-color: #3b4358;
  --bs-link-hover-color-rgb: 59, 67, 88;
}

html[data-brand="yellow"]:not([data-theme="light"]) {
  --bs-link-color: #ffd60a;
  --bs-link-color-rgb: 255, 214, 10;
  --bs-link-hover-color: #ffe033;
  --bs-link-hover-color-rgb: 255, 224, 51;
}

html[data-brand="yellow"] .btn-primary {
  --bs-btn-bg: #ffd60a;
  --bs-btn-border-color: #ffd60a;
  --bs-btn-color: #0f1629;
  --bs-btn-hover-bg: #ffe033;
  --bs-btn-hover-border-color: #ffe033;
  --bs-btn-hover-color: #0f1629;
  --bs-btn-active-bg: #e6c200;
  --bs-btn-active-border-color: #e6c200;
  --bs-btn-active-color: #0f1629;
  --bs-btn-focus-shadow-rgb: 255, 214, 10;
  border-radius: 0.875rem;
  font-weight: 700;
}

html[data-brand="yellow"][data-theme="light"] a[href^="tel:"] {
  text-decoration-color: var(--pp-yellow-3);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* The scan verdict badge is the first thing a driver reads: same green / red /
   amber, deep enough that its small white type is crisp. */
html[data-brand="yellow"]:not([data-theme="light"]) .status-badge.allowed {
  background: #047857;
}

html[data-brand="yellow"]:not([data-theme="light"]) .status-badge.denied {
  background: #b91c1c;
}

html[data-brand="yellow"]:not([data-theme="light"]) .status-badge.unknown {
  background: #b45309;
}

html[data-brand="yellow"][data-theme="light"] .status-badge.allowed {
  color: #065f46;
}

html[data-brand="yellow"][data-theme="light"] .status-badge.denied {
  color: #991b1b;
}

html[data-brand="yellow"][data-theme="light"] .status-badge.unknown {
  color: #92400e;
}

/* Verdicts are operational signals, not decorative tints. Use the existing
   dark-mode header colours, with white plate/badge text, in light mode too. */
html[data-brand="yellow"][data-theme="light"] .result-header.allowed {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

html[data-brand="yellow"][data-theme="light"] .result-header.denied {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

html[data-brand="yellow"][data-theme="light"] .result-header.unknown {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

html[data-brand="yellow"][data-theme="light"] .result-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-brand="yellow"][data-theme="light"] .result-header .plate-display,
html[data-brand="yellow"][data-theme="light"] .result-header .status-badge {
  color: #ffffff;
}

html[data-brand="yellow"][data-theme="light"] .result-header .status-badge {
  border-color: rgba(255, 255, 255, 0.9);
}

html[data-brand="yellow"][data-theme="light"] .result-header .status-badge.allowed {
  background: #047857;
}

html[data-brand="yellow"][data-theme="light"] .result-header .status-badge.denied {
  background: #b91c1c;
}

html[data-brand="yellow"][data-theme="light"] .result-header .status-badge.unknown {
  background: #b45309;
}

/* ============================================ */
/* SIGN-IN PAGES (light theme)                 */
/* ============================================ */
/* Login, password reset and the employee portal: the website's yellow as a
   gradient behind the page, the form on a clean white card (owner's pick). */
html[data-brand="yellow"][data-theme="light"] .login-page-body {
  background:
    radial-gradient(900px 560px at 12% -12%, rgba(255, 255, 255, 0.55), transparent 62%),
    radial-gradient(820px 620px at 108% 112%, rgba(214, 150, 0, 0.32), transparent 62%),
    linear-gradient(150deg, #ffe45c 0%, #ffd60a 48%, #f6c400 100%);
  background-attachment: fixed;
}

html[data-brand="yellow"][data-theme="light"] .login-page-body .glass-card {
  background: #ffffff;
  border: 1px solid rgba(15, 22, 41, 0.08);
  box-shadow: 0 2px 4px rgba(15, 22, 41, 0.06), 0 34px 64px -26px rgba(90, 60, 0, 0.5);
}

html[data-brand="yellow"][data-theme="light"] .login-page-body .glass-card :is(.input-glass, .select-glass, .textarea-glass) {
  border-color: var(--pp-line-2);
}

html[data-brand="yellow"][data-theme="light"] .login-page-body .glass-card :is(.input-glass, .textarea-glass):is(:disabled, [readonly]) {
  background: var(--pp-paper-2);
}

html[data-brand="yellow"][data-theme="light"] .login-page-body .password-toggle-btn {
  border-left-color: var(--pp-line-2);
}


/* -- badges on light grounds ---------------------------------------------------
   The quiet-panel rule above paints neutral and info badges WHITE, which on a
   white card leaves a status like "Under review" or "Pending" as an outline
   nobody notices. Badges carry state, so every kind gets a visible fill on the
   light theme: neutral on paper grey, info on a soft blue. Success, warning and
   danger keep the colours glass-theme already gives them. */
html[data-brand="yellow"][data-theme="light"] :is(.badge-glass, .badge-glass-secondary):not([class*="badge-tag-"]) {
  background: var(--pp-paper-3);
  border-color: var(--pp-line-2);
  color: var(--pp-ink-2);
}

html[data-brand="yellow"][data-theme="light"] .badge-glass-info {
  background: #e3ecfb;
  border-color: #b9cdf0;
  color: #1e3a8a;
}