/**
 * PhotoTouch Admin — style.css
 * Single consolidated stylesheet.
 * Bootstrap 5 + Font Awesome 5 required.
 * Light / dark themes via data-theme="dark|light" on <html>.
 * OS preference honoured automatically; localStorage persists the toggle.
 *
 * Sections:
 *  1.  Design Tokens – dark (default)
 *  2.  Light theme overrides
 *  3.  OS preference fallback
 *  4.  Base / body / typography
 *  5.  Login / auth layout
 *  6.  Premium card (glassmorphism)
 *  7.  Form controls
 *  8.  Buttons
 *  9.  Sticky nav (.siteMessage)
 * 10.  Footer (#footer)
 * 11.  Content cards (.card, .dspBox, .toolBar)
 * 12.  Tables
 * 13.  Alerts & messages
 * 14.  Modals & popups
 * 15.  Utility / layout helpers
 * 16.  Notification boxes
 * 17.  Views-clean utilities (migrated)
 * 18.  Animations
 * 19.  Responsive / media queries
 * 20.  Content view utilities (migrated inline styles)
 * 21.  Media Library — Site-wide asset manager
 * 22.  Components — status badges, .important, empty states, nav links
 * 23.  Layout Shell — #topbar + #sidebar + #app-shell
 * 30.  Dashboard — nav cards + stat cards
 * 41.  Registration — CSV preview, search result, stat skeleton
 * 51.  API Integrations — Dashboard, Builder, Run History, Run Detail
 * 52.  Email Analytics & Queue — Stat cards, status badges, filters, table
 * 53.  GDPR Data Privacy — Profile, Confirm, History, Search
 */


/* ═══════════════════════════════════════════════════════════════════
   0. SELF-HOSTED FONT — Plus Jakarta Sans (replaces Google Fonts CDN)
   ═══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* ═══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — DARK (DEFAULT)
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --brand:          #7c3aed;
  --brand-shadow:   rgba(124, 58, 237, 0.30);
  --brand-glow:     rgba(124, 58, 237, 0.16);

  /* Background layers */
  --bg-top:         #071a2c;
  --bg-mid:         #061525;
  --bg-bot:         #030a12;

  /* Surfaces */
  --surface:        rgba(11, 11, 11, 0.92);
  --surface-hover:  rgba(255, 255, 255, 0.04);
  --border:         rgba(255, 255, 255, 0.08);

  /* Text */
  --text:           #ffffff;
  --muted:          rgba(255, 255, 255, 0.58);

  /* Semantic */
  --color-success:  #86efac;
  --color-danger:   #fca5a5;
  --color-warning:  #fbbf24;
  --color-info:     #67e8f9;
  --bg-success:     rgba(34, 197, 94, 0.15);
  --bg-danger:      rgba(239, 68, 68, 0.15);
  --border-success: rgba(34, 197, 94, 0.30);
  --border-danger:  rgba(239, 68, 68, 0.30);

  /* Misc */
  --radius-card:    16px;
  --radius-premium: 32px;
  --shadow-card:    0 8px 32px rgba(0, 0, 0, 0.40);
  --shadow-premium: 0 18px 50px rgba(0, 0, 0, 0.55);

  /* Component geometry */
  --radius-btn:     8px;
  --radius-btn-sm:  6px;
  --radius-input:   8px;

  /* Brand interaction */
  --brand-hover:    #6d28d9;

  /* ── Semantic badge palette (10 colors) ── */
  --c-green:      #22c55e;
  --c-green-bg:   rgba(34, 197, 94, 0.15);
  --c-blue:       #3b82f6;
  --c-blue-bg:    rgba(59, 130, 246, 0.15);
  --c-amber:      #f59e0b;
  --c-amber-bg:   rgba(245, 158, 11, 0.15);
  --c-red:        #ef4444;
  --c-red-bg:     rgba(239, 68, 68, 0.15);
  --c-purple:     #a855f7;
  --c-purple-bg:  rgba(168, 85, 247, 0.15);
  --c-violet:     #7c3aed;
  --c-violet-bg:  rgba(124, 58, 237, 0.15);
  --c-gray:       #9ca3af;
  --c-gray-bg:    rgba(156, 163, 175, 0.15);
  --c-slate:      #6b7280;
  --c-slate-bg:   rgba(107, 114, 128, 0.15);
  --c-pink:       #ec4899;
  --c-pink-bg:    rgba(236, 72, 153, 0.15);
  --c-teal:       #10b981;
  --c-teal-bg:    rgba(16, 185, 129, 0.15);

  /* Row hover (tables, lists) */
  --row-hover:    rgba(124, 58, 237, 0.04);
  --preview-canvas-bg: #111111;
}


/* ═══════════════════════════════════════════════════════════════════
   2. LIGHT THEME OVERRIDES  [data-theme="light"] on <html>
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg-top:         #eef2ff;
  --bg-mid:         #e0e7ff;
  --bg-bot:         #dbeafe;

  --surface:        rgba(255, 255, 255, 0.90);
  --surface-hover:  rgba(0, 0, 0, 0.04);
  --border:         rgba(0, 0, 0, 0.10);

  --text:           #0f172a;
  --muted:          rgba(15, 23, 42, 0.55);

  --color-success:  #166534;
  --color-danger:   #991b1b;
  --color-warning:  #92400e;
  --color-info:     #0e7490;
  --bg-success:     rgba(34, 197, 94, 0.12);
  --bg-danger:      rgba(239, 68, 68, 0.10);
  --border-success: rgba(34, 197, 94, 0.25);
  --border-danger:  rgba(239, 68, 68, 0.25);

  --shadow-card:    0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-premium: 0 12px 40px rgba(0, 0, 0, 0.12);

  /* ── Semantic badge palette (light) ── */
  --c-green:      #16a34a;
  --c-green-bg:   rgba(34, 197, 94, 0.12);
  --c-blue:       #2563eb;
  --c-blue-bg:    rgba(59, 130, 246, 0.12);
  --c-amber:      #d97706;
  --c-amber-bg:   rgba(245, 158, 11, 0.12);
  --c-red:        #dc2626;
  --c-red-bg:     rgba(239, 68, 68, 0.12);
  --c-purple:     #7c3aed;
  --c-purple-bg:  rgba(168, 85, 247, 0.12);
  --c-violet:     #6d28d9;
  --c-violet-bg:  rgba(124, 58, 237, 0.12);
  --c-gray:       #6b7280;
  --c-gray-bg:    rgba(156, 163, 175, 0.12);
  --c-slate:      #4b5563;
  --c-slate-bg:   rgba(107, 114, 128, 0.12);
  --c-pink:       #db2777;
  --c-pink-bg:    rgba(236, 72, 153, 0.12);
  --c-teal:       #047857;
  --c-teal-bg:    rgba(16, 185, 129, 0.12);

  --row-hover:    rgba(124, 58, 237, 0.06);
}


/* ═══════════════════════════════════════════════════════════════════
   3. OS PREFERENCE FALLBACK
   Applied when user has NOT manually set a theme via the toggle.
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-top:         #eef2ff;
    --bg-mid:         #e0e7ff;
    --bg-bot:         #dbeafe;
    --surface:        rgba(255, 255, 255, 0.90);
    --surface-hover:  rgba(0, 0, 0, 0.04);
    --border:         rgba(0, 0, 0, 0.10);
    --text:           #0f172a;
    --muted:          rgba(15, 23, 42, 0.55);
    --color-success:  #166534;
    --color-danger:   #991b1b;
    --color-warning:  #92400e;
    --color-info:     #0e7490;
    --bg-success:     rgba(34, 197, 94, 0.12);
    --bg-danger:      rgba(239, 68, 68, 0.10);
    --border-success: rgba(34, 197, 94, 0.25);
    --border-danger:  rgba(239, 68, 68, 0.25);
    --shadow-card:    0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-premium: 0 12px 40px rgba(0, 0, 0, 0.12);

    /* Semantic badge palette (light) */
    --c-green:      #16a34a;
    --c-green-bg:   rgba(34, 197, 94, 0.12);
    --c-blue:       #2563eb;
    --c-blue-bg:    rgba(59, 130, 246, 0.12);
    --c-amber:      #d97706;
    --c-amber-bg:   rgba(245, 158, 11, 0.12);
    --c-red:        #dc2626;
    --c-red-bg:     rgba(239, 68, 68, 0.12);
    --c-purple:     #7c3aed;
    --c-purple-bg:  rgba(168, 85, 247, 0.12);
    --c-violet:     #6d28d9;
    --c-violet-bg:  rgba(124, 58, 237, 0.12);
    --c-gray:       #6b7280;
    --c-gray-bg:    rgba(156, 163, 175, 0.12);
    --c-slate:      #4b5563;
    --c-slate-bg:   rgba(107, 114, 128, 0.12);
    --c-pink:       #db2777;
    --c-pink-bg:    rgba(236, 72, 153, 0.12);
    --c-teal:       #047857;
    --c-teal-bg:    rgba(16, 185, 129, 0.12);

    --row-hover:    rgba(124, 58, 237, 0.06);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   4. BASE / BODY / TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════ */
html, body {
  min-height: 100%;
}

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 15% 10%, rgba(124, 58, 237, 0.14), transparent 45%),
    radial-gradient(circle at 80%  0%, rgba(0, 255, 180, 0.06),  transparent 40%),
    radial-gradient(circle at 50% 120%, rgba(0, 140, 255, 0.08), transparent 55%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bot) 100%) !important;
  transition: background 0.3s ease, color 0.2s ease;
}

/* Light theme adjusts radial glow opacity */
[data-theme="light"] body {
  background:
    radial-gradient(circle at 15% 10%, rgba(124, 58, 237, 0.08), transparent 45%),
    radial-gradient(circle at 80%  0%, rgba(0, 200, 140, 0.06),  transparent 40%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bot) 100%) !important;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body {
    background:
      radial-gradient(circle at 15% 10%, rgba(124, 58, 237, 0.08), transparent 45%),
      radial-gradient(circle at 80%  0%, rgba(0, 200, 140, 0.06),  transparent 40%),
      linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bot) 100%) !important;
  }
}

h1, h2, h3, h4, h5, h6 { color: var(--text); }

h1 { font-size: 1.75rem; font-weight: 800; margin-bottom: 1rem; }
h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.75rem; }
h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.65rem; }
h4 { font-size: 1.0rem;  font-weight: 700; margin-bottom: 0.5rem; }
h5 { font-size: 0.9rem;  font-weight: 700; margin-bottom: 0.5rem; }
h6 { font-size: 0.8rem;  font-weight: 600; color: var(--muted);   margin-bottom: 0.4rem; }

/* Section label — #title div placed inside .toolBar cards */
#title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

#subtitle { color: var(--muted); font-size: 0.9rem; }

/* Legacy selector aliases kept for backwards compat with content views */
.subtitle    { color: var(--muted); font-size: 0.85rem; }
.tinyfont    { font-size: 10px; color: var(--muted); }
.text-small  { font-size: 0.8rem; opacity: 0.8; }
.redprint    { color: #f87171; }

a { color: var(--muted); transition: color 0.2s; }
a:hover { color: var(--text); }

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text);
}

hr {
  border-color: var(--border);
  margin-top: 10px;
  margin-bottom: 10px;
}

/* ── 4b. Bootstrap utility overrides — theme-aware ─────────────── */
/* BS 5.0.2 hard-codes these with !important in light-mode colours. */
.text-muted       { color: var(--muted) !important; }
.text-success     { color: var(--color-success) !important; }
.text-danger      { color: var(--color-danger) !important; }
.text-warning     { color: var(--color-warning) !important; }
.text-info        { color: var(--color-info) !important; }

/* Border utilities — use theme border colour */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end        { border-color: var(--border) !important; }


/* ═══════════════════════════════════════════════════════════════════
   5. LOGIN / AUTH LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
body.login-page #maincontent {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  background: transparent !important;
  position: relative;
  z-index: 2;
}

body.login-page #maincontent > .container {
  width: 100%;
}

.login-shell {
  margin: 0 auto;
}

@media (min-width: 992px) {
  .login-shell { max-width: 520px; }
}

.login-portal-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(calc(100vw - 32px), 520px);
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
}

.login-portal-switcher a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 43px;
  padding: 8px 10px;
  border-radius: 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  transition: color .18s ease, background .18s ease;
}

.login-portal-switcher a:hover,
.login-portal-switcher a:focus,
.login-portal-switcher a.is-active {
  color: var(--brand);
  background: rgba(124, 58, 237, 0.10);
}

@media (max-width: 520px) {
  .login-portal-switcher a span {
    display: none;
  }
  .login-portal-switcher a i {
    font-size: 16px;
  }
}

.login-form-wrap {
  max-width: 420px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: left;
}

.help-links {
  margin-top: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

[data-theme="light"] .help-links { color: var(--muted); }

.help-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-weight: 900;
}

[data-theme="light"] .help-links a { color: var(--brand); }

.help-links a:hover { color: #fff; }
[data-theme="light"] .help-links a:hover { color: var(--text); }

/* ── Password reset: input icon sizing (replaces inline style) ─── */
.premium-card .input-group-text i.fas,
.premium-card .input-group-text i.far {
  font-size: 18px;
}

/* ── Password reset: account disambiguation buttons ────────────── */
.reset-account-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  transition: background 0.2s, border-color 0.2s;
}
.reset-account-btn:hover,
.reset-account-btn:focus {
  background: rgba(124, 58, 237, 0.10);
  border-color: var(--brand);
  color: var(--text);
}
[data-theme="light"] .reset-account-btn {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .reset-account-btn:hover,
[data-theme="light"] .reset-account-btn:focus {
  background: rgba(124, 58, 237, 0.08);
  border-color: var(--brand);
}
.reset-account-type { font-size: 0.82em; }
.reset-hint-text { font-size: 0.9em; }

/* ── Password reset: success alert on login page ─────────────── */
.premium-card .alert-success {
  border-radius: 16px;
  border: 1px solid rgba(34, 197, 94, 0.25);
  background: rgba(34, 197, 94, 0.10);
  color: #4ade80;
}
[data-theme="light"] .premium-card .alert-success {
  color: #166534;
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
}


/* ═══════════════════════════════════════════════════════════════════
   6. PREMIUM CARD (GLASSMORPHISM)
   ═══════════════════════════════════════════════════════════════════ */
.premium-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-premium);
  padding: 34px 34px 30px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), var(--shadow-premium);
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.premium-card::before {
  content: "";
  position: absolute;
  top: -25%;
  left: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, var(--brand-glow) 0%, transparent 60%);
  pointer-events: none;
}

.card-icon {
  position: relative;
  z-index: 1;
  font-size: 42px;
  color: var(--brand);
  margin-bottom: 10px;
}

.card-title {
  position: relative;
  z-index: 1;
  font-weight: 900;
  font-size: 26px;
  margin: 0 0 6px 0;
  color: var(--text);
}

.card-subtitle {
  position: relative;
  z-index: 1;
  color: var(--muted);
  margin-bottom: 18px;
}

@media (max-width: 480px) {
  .premium-card {
    padding: 26px 20px 22px;
    border-radius: 26px;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   7. FORM CONTROLS
   ═══════════════════════════════════════════════════════════════════ */

/* Premium card inputs */
/* The 18px pill used to come from a radius on the group plus `overflow:
   hidden`. That mask cut two things: the field keeps Bootstrap's own ~6px
   corner, so its right end showed as a notched stub against the group's wider
   curve, and the focus ring is an outer box-shadow, so it was clipped away on
   the side that matters. Rounding the two ends directly gives the same pill
   with nothing to clip. */
.premium-card .input-group {
  width: 100%;
  border-radius: 18px;
}

.premium-card .input-group-text {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-right: 0;
  border-radius: 18px 0 0 18px;
  color: rgba(255, 255, 255, 0.65);
  padding: 0 12px;
  min-width: 46px;
}

[data-theme="light"] .premium-card .input-group-text {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--muted);
}

.premium-card .form-control {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  height: 48px;
  padding: 12px 14px;
  box-shadow: none;
}

[data-theme="light"] .premium-card .form-control {
  background: rgba(255, 255, 255, 0.70);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--text);
}

.premium-card .input-group-text + .form-control {
  border-left: 0;
}

/* Bootstrap sizes the field from `width: 1%` plus `flex-grow`, which resolves
   ~2px wider than the space left beside the icon addon. The group clips its
   overflow to hold the 18px pill shape, so that overhang showed up as the
   field's right border being sliced off mid-stroke. Sizing from a zero basis
   makes the field exactly the remainder. */
.premium-card .input-group > .form-control {
  flex: 1 1 0%;
  min-width: 0;
  border-radius: 0 18px 18px 0;
}

/* Match the 48px field height — a 36px submit under two 48px inputs was the
   most visible thing wrong with the stack. */
.premium-card .login-form-wrap .btn-primary {
  min-height: 48px;
  font-size: 0.95rem;
}

.premium-card .form-control:focus {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.18);
  outline: none;
}

.premium-card .alert {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
}

[data-theme="light"] .premium-card .alert {
  border-color: rgba(0, 0, 0, 0.10);
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}

/* General form controls (admin views) */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-input);
  padding: 0.5rem 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

/* Bootstrap form-control inside dark/light contexts */
.form-control,
.form-select {
  background-color: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface-hover);
  border-color: rgba(124, 58, 237, 0.5);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.form-control::placeholder { color: var(--muted); }

/* ── Native <select> theming (light + dark) ──────────────────────────
 * Browsers render <option> elements via OS chrome and do NOT inherit
 * the parent <select>'s background/color reliably. Force both so the
 * dropdown items are legible in either theme. Also override Bootstrap's
 * .form-select chevron SVG which ships a dark stroke that disappears
 * against a dark surface. Fixes #197A and #218.
 */
select option,
.form-select option {
  background-color: #ffffff;
  color: #0f172a;
}
[data-theme="light"] select,
[data-theme="light"] .form-select,
[data-theme="light"] .form-control {
  background-color: #ffffff;
  color: #0f172a;
}
[data-theme="light"] select option,
[data-theme="light"] .form-select option {
  background-color: #ffffff;
  color: #0f172a;
}
:root:not([data-theme="dark"]) select option,
:root:not([data-theme="dark"]) .form-select option {
  background-color: #ffffff;
  color: #0f172a;
}
[data-theme="dark"] select option,
[data-theme="dark"] .form-select option {
  background-color: #1e293b;
  color: #f1f5f9;
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23e2e8f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}
:root:not([data-theme="dark"]) .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

/* Input size helpers (from views-clean) */
.input-wide  { width: 180px; }
.input-small { width: 80px; }
.select-large { width: 190px; height: 40px; }

/* Legacy compatibility: prefer .form-control plus width utilities in new views. */
.biginput { width: 100%; max-width: 400px; }

/* Real-time validation indicator span (admin create/edit forms) */
.fieldCheck {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: middle;
}
.fieldCheck.ok    { color: var(--color-success); }
.fieldCheck.error { color: var(--color-danger); }


/* ═══════════════════════════════════════════════════════════════════
   8. BUTTONS
   ═══════════════════════════════════════════════════════════════════ */

/* ── 8a. CTA Brand Button (login, major CTAs — pill shape) ───── */
.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: var(--brand);
  box-shadow: 0 6px 20px var(--brand-shadow);
  color: #fff;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-brand:hover,
.btn-brand:focus {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px var(--brand-shadow);
  color: #fff;
  outline: none;
}
.btn-brand:active { transform: translateY(0); filter: brightness(0.97); }

/* ── 8b. Bootstrap overrides ──────────────────────────────────── */
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  border-radius: var(--radius-btn);
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  box-shadow: 0 4px 12px var(--brand-shadow);
}

.btn-secondary {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
  border-radius: var(--radius-btn);
  font-weight: 600;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
  color: var(--text);
}
[data-theme="light"] .btn-secondary:hover {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.18);
}

.btn-outline-secondary {
  border-color: var(--border);
  color: var(--muted);
  border-radius: var(--radius-btn);
  font-weight: 600;
}
.btn-outline-secondary:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: rgba(255,255,255,0.20);
}
[data-theme="light"] .btn-outline-secondary:hover {
  border-color: rgba(0,0,0,0.18);
}

.btn-danger  { border-radius: var(--radius-btn); font-weight: 600; }
.btn-sm      { border-radius: calc(var(--radius-btn) - 2px); }
.btn-link    { text-decoration: none; }

/* ── 8c. Native input/button base (not Bootstrap .btn) ───────── */
input[type="submit"],
input[type="button"],
button:not([class*="btn"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-btn);
  padding: 0.38rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
  vertical-align: middle;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:not([class*="btn"]):hover {
  background: rgba(124, 58, 237, 0.10);
  border-color: rgba(124, 58, 237, 0.45);
  color: var(--text);
}
input[type="submit"]:active,
input[type="button"]:active,
button:not([class*="btn"]):active {
  background: rgba(124, 58, 237, 0.16);
}
input[type="submit"]:disabled,
input[type="button"]:disabled,
button:not([class*="btn"]):disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

[data-theme="light"] input[type="submit"],
[data-theme="light"] input[type="button"],
[data-theme="light"] button:not([class*="btn"]) {
  background: rgba(255,255,255,0.75);
  border-color: rgba(0,0,0,0.14);
  color: var(--text);
}
[data-theme="light"] input[type="submit"]:hover,
[data-theme="light"] input[type="button"]:hover,
[data-theme="light"] button:not([class*="btn"]):hover {
  background: rgba(124, 58, 237, 0.07);
  border-color: rgba(124, 58, 237, 0.40);
}

/* ── 8f. Admin badge / warning button ────────────────────────── */
.adm-btn {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  border-radius: var(--radius-btn-sm);
  border: 1px solid var(--color-warning);
  background: transparent;
  color: var(--color-warning) !important;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.adm-btn:hover {
  background: rgba(251, 191, 36, 0.15);
  color: #fff !important;
}

/* ── 8g. Theme toggle ─────────────────────────────────────────── */
button#theme-toggle {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--muted);
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
button#theme-toggle:hover {
  background: none !important;
  border: none !important;
  color: var(--text);
}


/* ═══════════════════════════════════════════════════════════════════
   9. STICKY NAV (.siteMessage)
   ═══════════════════════════════════════════════════════════════════ */
.siteMessage {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  text-align: left;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: background 0.3s ease, border-color 0.3s ease;
}

[data-theme="light"] .siteMessage {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.siteMessage .wrapper {
  padding: 16px 20px;
}

.siteMessage .top.wrapper {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.siteMessage a {
  color: var(--muted);
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.2s;
}
.siteMessage a:hover { color: var(--text); }

.siteMessage a.important       { color: #f87171; }
.siteMessage a.important:hover { color: #fca5a5; }

[data-theme="light"] .siteMessage a.important       { color: #dc2626; }
[data-theme="light"] .siteMessage a.important:hover { color: #991b1b; }

.siteMessage .btn-outline-warning {
  color: var(--color-warning) !important;
  border-color: var(--color-warning);
}
.siteMessage .btn-outline-warning:hover {
  background: rgba(251, 191, 36, 0.15);
  color: var(--text) !important;
}

/* Underline hover animation */
.underline {
  display: inline-block;
  position: relative;
  color: var(--muted);
  transition: color 0.2s;
}
.underline:hover { color: var(--text); }
.underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--text);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
a.important.underline::after {
  background-color: #f87171;
}
[data-theme="light"] a.important.underline::after {
  background-color: #dc2626;
}

#greeting { color: var(--muted); }

/* Scroll-float class applied by JS */
.navbar-fixed {
  position: fixed;
  top: 0;
  z-index: 998;
  width: 100%;
  transition: all 0.3s ease-in;
}


/* ═══════════════════════════════════════════════════════════════════
   10. FOOTER (#footer)
   ═══════════════════════════════════════════════════════════════════ */
#footer {
  background: rgba(3, 3, 3, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.70);
  padding: 26px 0 14px;
  transition: background 0.3s ease;
}

[data-theme="light"] #footer {
  background: rgba(240, 244, 255, 0.85);
  color: var(--muted);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

#footer,
#footer * { text-shadow: none; }

#footer .bottomtext { padding-left: 0; padding-right: 0; }
#footer .row        { margin-left: 0; margin-right: 0; }

#footer a {
  color: rgba(255, 255, 255, 0.70);
  text-decoration: none !important;
  font-weight: 900;
  letter-spacing: 0.6px;
}
#footer a:hover { color: #fff; }

[data-theme="light"] #footer a       { color: var(--muted); }
[data-theme="light"] #footer a:hover { color: var(--text); }

#footer i { color: rgba(255, 255, 255, 0.50); margin-right: 8px; }
[data-theme="light"] #footer i { color: var(--muted); }

#footer .border-start { border-color: var(--border) !important; }

#footer .status-wrap {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

#footer iframe { display: block; max-width: 100%; }

#footer .poweredby,
#footer .text-muted {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px;
}

[data-theme="light"] #footer .poweredby,
[data-theme="light"] #footer .text-muted {
  color: var(--muted) !important;
}

/* Modal backdrop height fix (was inline in footer_view) */
.modal-backdrop { height: 100%; }

/* Legacy footer classes from global.css */
.bottom {
  background-color: var(--surface);
  text-align: center;
  width: 100%;
}
.bottomtext {
  color: var(--text);
  text-align: center;
  margin: 0 auto;
  width: 100%;
  padding: 20px;
}


/* ═══════════════════════════════════════════════════════════════════
   11. CONTENT AREA CARDS
   ═══════════════════════════════════════════════════════════════════ */
#maincontent {
  position: relative;
  /* z-index removed — it created a stacking context that trapped Bootstrap modals
     below the modal-backdrop. position:relative alone is fine. */
  padding: 1.5rem 0 2rem;
  background: transparent !important;
  min-height: calc(100vh - 360px);
}

.container     { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; }
.pagecontainer { max-width: 100%; }
/* .sizecontainer is an alias for .container */
.sizecontainer { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; }

/* Bootstrap .card – dark/light adaptation */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--text);
  /* overflow:visible so dropdown menus can escape the card boundary.
     Table cards use .table-responsive for their own overflow clipping. */
  overflow: visible;
  transition: background 0.3s ease, border-color 0.3s ease;
}
/* Re-clip cards that wrap tables so corner cells don't poke out */
.card.p-0 { overflow: hidden; }

/* Card modifiers — use with Bootstrap .card */
.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
[data-theme="light"] .card-hover:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
.card-selectable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.card-selectable.selected,
.card-selectable.active { border-color: var(--brand); background: rgba(124,58,237,0.06); }
[data-theme="light"] .card-selectable.selected,
[data-theme="light"] .card-selectable.active { background: rgba(124,58,237,0.08); }

/* Table modifier — themed uppercase headers (replaces 9+ per-section table styles) */
.table-themed th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.table-themed td { font-size: 0.82rem; vertical-align: middle; }

.card-body { color: var(--text); padding: 1.25rem 1.5rem; }

.card-header {
  background: var(--surface-hover);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  padding: 0.75rem 1.5rem;
}

/* Legacy compatibility: prefer .card + .card-body or .card-toolbar in new views. */
.toolBar,
.dspBox {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.toolBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.toolBar input[type="button"],
.toolBar .btn {
  border-radius: var(--radius-btn);
  font-weight: 600;
}

/* Settings page tab strip — toolbar nav between sub-pages */
.settingTab {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

/* Inactive tab — ghost outline style */
.settingTab input[type="button"],
.settingTab .btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-btn-sm);
  padding: 0.28rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.settingTab input[type="button"]:hover,
.settingTab .btn:hover {
  background: var(--surface-hover);
  border-color: rgba(255,255,255,0.20);
  color: var(--text);
}
[data-theme="light"] .settingTab input[type="button"]:hover {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.18);
}

/* Active tab — DISABLED attribute marks the current page */
.settingTab input[type="button"]:disabled,
.settingTab input[type="button"][disabled] {
  opacity: 1 !important;
  pointer-events: none;
  cursor: default;
  background: rgba(124, 58, 237, 0.15) !important;
  border-color: rgba(124, 58, 237, 0.40) !important;
  color: var(--brand) !important;
  font-weight: 700;
}
[data-theme="light"] .settingTab input[type="button"]:disabled,
[data-theme="light"] .settingTab input[type="button"][disabled] {
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.30) !important;
  color: var(--brand) !important;
}

.v-page-wrap { padding: 10px; }

/* Section helpers */
.sectionBlock    { margin-top: 15px; }
.editpayment     { border-left: 10px solid orange; margin-bottom: 50px; }
.greybgbox       { border-radius: 2px; background: var(--surface-hover); border: 1px solid var(--border); }
.whitebgbox      { background: var(--surface); }

/* ── Settings section container ──────────────────────────────── */
.settingsbox {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

/* Section heading inside .settingsbox (e.g. "Slideshow Settings") */
.settingsbox > h5,
.settingsbox > h4 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
  overflow: hidden; /* clearfix for .fright children */
}

/* Form row — label + input side by side */
.settingsrow {
  display: flex;
  align-items: flex-start;
  padding: 0.6rem 0;
  gap: 1rem;
}

/* Separator variant */
.settingsborder {
  border-bottom: 1px solid var(--border);
}
.settingsrow.settingsborder:last-child {
  border-bottom: none;
}

/* Label column */
.settingsfieldname {
  flex: 0 0 200px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--muted);
  padding-top: 0.3rem;
  line-height: 1.4;
}

/* Value / input column */
.settingsfield {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text);
  min-width: 0;
}

/* Account/admin label/entry fields */
.labelfield           { font-weight: 800; color: var(--text); }
.entryfield           { font-weight: 400; color: var(--muted); }
.labelfieldDescription { font-weight: 400; color: var(--muted); }
.sectionexplination   { font-weight: 400; color: var(--muted); font-size: 1em; padding: 15px; }
.test-account         { color: var(--muted); font-weight: 800; }

/* Payment section spacing */
#PAYPAL, #STRIPE, #WORLDPAY { margin-top: 25px; margin-bottom: 25px; }

/* Popular link style */
a.popularLink {
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.9em;
  border-bottom: 1px dotted var(--muted);
  transition: all 0.3s ease-in;
}
a.popularLink:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}


/* ═══════════════════════════════════════════════════════════════════
   12. TABLES
   ═══════════════════════════════════════════════════════════════════ */
.table {
  color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
  --bs-table-color: var(--text);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-color: var(--text);
}

.table th,
.table td {
  border-color: var(--border);
  padding: 0.6rem 0.75rem;
  color: var(--text);
}

.table thead th {
  background: var(--surface-hover);
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

th { text-align: left; }

/* Legacy border table */
.tableBorder {
  border-collapse: collapse;
  width: 100%;
  color: var(--text);
}
.tableBorder td,
.tableBorder th {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  text-align: left;
}
.tableBorder .tableTitle { background: var(--surface-hover); color: var(--muted); font-weight: 700; }

/* tableWithColor */
.tableWithColor td,
.tableWithColor th { vertical-align: middle; }

/* Section heading rows */
.tableTitle {
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  line-height: 16px;
  font-weight: bold;
}
.tableSubTitle,
.tableSubTitleTop {
  border-bottom: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--muted);
  font-size: 12px;
  line-height: 14px;
  font-weight: bold;
}
.tableSubTitleTop { border-top: 1px solid var(--border); border-bottom: none; }

#sideTitle { padding: 5px; color: var(--text); font-size: 16px; font-weight: bold; line-height: 18px; }

/* Table row styles */
.tablerow td      { border-bottom: 1px solid var(--border); padding: 3px; }
.tablerow         { border-bottom: 1px solid var(--border); padding: 3px; }
.tablerowtitle    { display: inline-block; width: 200px; line-height: 40px; }
.tablerowcontent  { padding: 5px; }

/* Location row – gradient hover */
.locationRow {
  border-left: rgba(0, 0, 0, 0) 8px solid;
  border-right: var(--surface) 12px solid;
}
.locationRow:hover {
  border-left: #ff8f00 8px solid;
  border-right: var(--surface) 12px solid;
  background: linear-gradient(to right, rgba(255, 143, 0, 1) 0%, rgba(254, 164, 1, 1) 4%, rgba(255, 233, 0, 0) 75%);
}

/* table-centered helper (from views-clean) */
.table-centered   { margin: 0 auto; border-collapse: collapse; width: 100%; }
.table-head-row   { font-weight: bold; border-top: 1px solid var(--border); }
.table-heading    { width: 100%; border-bottom: 1px solid var(--border); }
.row-border-bottom { border-bottom: 1px solid var(--border); }
.cell-border-right { border-right: 1px solid var(--border); }
.cell-pad-right    { padding-right: 5px; }

/* .h3-border-bottom — used as thead <th> class in tableWithColor tables */
.h3-border-bottom {
  border-bottom: 2px solid var(--border);
  background: var(--surface-hover);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.55rem 0.75rem;
}

/* Soft bottom border for two-column data rows (admin_view, etc.) */
.tableBorderBottomSoft {
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}

/* Row hover highlight — modern admin feel */
.table tbody tr:hover > td,
.tableWithColor tbody tr:hover > td {
  background: var(--surface-hover);
  transition: background 0.12s;
}
[data-theme="light"] .table tbody tr:hover > td,
[data-theme="light"] .tableWithColor tbody tr:hover > td {
  background: rgba(0,0,0,0.025);
}

/* Clickable rows (.chk class used on <tr> elements) */
tr.chk { cursor: pointer; }

/* Bootstrap equivalents: prefer d-table, border-* utilities over the above in new views */


/* ═══════════════════════════════════════════════════════════════════
   13. ALERTS & MESSAGES
   ═══════════════════════════════════════════════════════════════════ */
.msg,
.errmsg {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.msg {
  background: var(--bg-success);
  border: 1px solid var(--border-success);
  color: var(--color-success);
}

.errmsg {
  background: var(--bg-danger);
  border: 1px solid var(--border-danger);
  color: var(--color-danger);
}

.alert { border-radius: 12px; }

/* Padded message utility */
.padded-message { padding: 2px; margin: 10px auto; }


/* ═══════════════════════════════════════════════════════════════════
   14. MODALS & POPUPS
   ═══════════════════════════════════════════════════════════════════ */
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  color: var(--text);
  transition: background 0.3s ease;
}

[data-theme="light"] .modal-content {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.modal-header { border-bottom: 1px solid var(--border); color: var(--text); }
.modal-footer { border-top:    1px solid var(--border); }

.modal .btn-close        { filter: invert(1); opacity: 0.8; }
[data-theme="light"] .modal .btn-close { filter: none; }

.modal .btn-secondary {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}
.modal .btn-primary { background: var(--brand); border-color: var(--brand); }

/* Customer detail modal action panels (resend, entitlement controls) */
.cd-modal-panel {
  background: rgba(11, 11, 11, 0.94);
  border: 1px solid var(--border);
  color: var(--text);
}
[data-theme="light"] .cd-modal-panel {
  background: rgba(255, 255, 255, 0.96);
}

/* Bootstrap tooltips must never sit in the click path of their trigger.
   The tooltip <div> (z-index 1080, appended to <body>) renders over small
   icon links/buttons and, without this, captures the click so the underlying
   <a>/<button> never fires (e.g. invoice PDF icons that "did nothing"). */
.tooltip { pointer-events: none; }

/* Legacy popup window */
#backgroundPopup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 10;
}
.popupWindow {
  display: none;
  position: fixed;
  width: 600px;
  z-index: 9999;
  padding: 0;
  font-size: 0.875rem;
  text-align: left;
  overflow: visible;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  color: var(--text);
}
.popupWindowFull {
  display: none;
  position: fixed;
  width: 100%; height: 100%;
  z-index: 9999;
  padding: 0; margin: 0;
  font-size: 0.875rem;
  text-align: left;
  overflow: visible;
  color: var(--text);
}
.popupWindowClose {
  position: absolute;
  right: -8px; top: -8px;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 700;
  display: block;
}
.popupWindowClose a       { color: var(--muted); }
.popupWindowClose a:hover { color: var(--text); }
.popupWindowCookie {
  display: none;
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  min-height: 120px;
  z-index: 9999;
  margin: 0;
  padding: 20px;
  font-size: 0.875rem;
  text-align: center;
  overflow: visible;
  color: var(--muted);
  background: var(--surface);
  backdrop-filter: blur(16px);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}


/* ═══════════════════════════════════════════════════════════════════
   15. UTILITY / LAYOUT HELPERS
   ═══════════════════════════════════════════════════════════════════ */

/* .hidden keeps display:none for JS; use Bootstrap d-none in new views */
.hidden {
  display: none !important;
  visibility: hidden !important;
}

.loading { display: none; text-align: center; }

/* Collapse icon rotation (Bootstrap data-bs-toggle) */
[data-bs-toggle="collapse"][aria-expanded="true"] > .js-rotate-if-collapsed {
  transition: transform 0.3s ease-in-out;
  transform: rotate(359deg);
  color: #f87171;
}

/* Back-to-top button */
#back-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 20;
}
#back-top a {
  width: 56px;
  display: block;
  text-align: center;
  font-size: 11px;
  border-radius: 50%;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.3s, background 0.3s;
}
#back-top a:hover { color: var(--text); }

/* Section / block layout (legacy .block used in some admin views) */
.block {
  display: inline-block;
  text-align: left;
  padding-left: 10px;
  margin-left: 10px;
  width: 45%;
  vertical-align: top;
}
@media only screen and (max-width: 960px) {
  .block { width: 100%; }
}

.blockContainer { margin: 20% auto; }
@media only screen and (max-width: 960px) {
  .blockContainer { margin: 25px auto; }
}

.wrapper { padding: 20px; padding-bottom: 30px; }

/* Legacy compatibility: prefer Bootstrap .d-none in markup and JS. */
.thidden { display: none !important; }

/* Float helper (used by .smallbutton inside h5 headings, etc.) */
.fright { float: right; }

/* Legacy compatibility: prefer Bootstrap flex/spacing utilities in new views. */
.subnavbutton,
.navbutton {
  display: block;
  margin-top: 0.5rem;
}

/* Linked actions inside .navbutton */
.navbutton a {
  display: inline-block;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-btn-sm);
  text-decoration: none;
  transition: color 0.18s, background 0.18s;
}
.navbutton a:hover {
  color: var(--text);
  background: var(--surface-hover);
}

/* Legacy compatibility: prefer .modal-body in new modal markup. */
.popupwindowcontent {
  padding: 0.5rem 0;
}

/* Section */
.section {
  width: 95%;
  margin: 0 auto;
  padding: 10px 0;
  overflow: hidden;
}

/* Legacy view-subtitle helpers (from views-clean) */
.view-subtitle  { text-align: left; margin-left: 10px; }
.subtitle-pad   { padding: 5px; }


/* ═══════════════════════════════════════════════════════════════════
   16. (REMOVED — notificationBox / warningBox were dead CSS, zero view references)
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   17. VIEWS-CLEAN UTILITIES (MIGRATED)
   These were previously in views-clean.css. Prefer Bootstrap 5
   equivalents in new views (e.g. .overflow-hidden → Bootstrap's class).
   ═══════════════════════════════════════════════════════════════════ */

/* Image preview grid item */
.image-preview-wrapper {
  position: relative;
  width: 230px;
  height: 280px;
  float: left;        /* Consider flex/grid in new views */
  padding: 2px;
  margin: 5px;
}

.img-max { max-width: 200px; max-height: 200px; }

/* button wrapper */
.button-wrapper { width: 200px; }

.btn-search {
  position: relative;
  float: left;        /* Use float-start in new views */
  width: 200px;
}

/* dspBox position reset (admin content wrapper) */
.dspBox { margin-top: 20px; position: relative; }


/* ═══════════════════════════════════════════════════════════════════
   18. ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */

/* Greeting fade – used in all navbar views */
@keyframes text-fade {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  50%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

#greeting {
  opacity: 0;
  transition: opacity 1s ease;
  animation: text-fade 7.5s ease-in-out infinite;
}

/* Dropzone passing-through (retained from dropzone context) */
@keyframes passing-through {
  0%   { opacity: 0;   transform: translateY(40px);  }
  30%  { opacity: 1;   transform: translateY(0px);   }
  70%  { opacity: 1;   transform: translateY(0px);   }
  100% { opacity: 0;   transform: translateY(-40px); }
}

@keyframes slide-in {
  0%   { opacity: 0;   transform: translateY(40px);  }
  30%  { opacity: 1;   transform: translateY(0px);   }
}

@keyframes pulse-glow {
  0%   { box-shadow: 0 0 0 0 var(--brand-shadow); }
  70%  { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}


/* ═══════════════════════════════════════════════════════════════════
   19. BASE COMPONENTS — Shared Design System
   Reusable classes for stat cards, badges, filter bars, data tables,
   scroll sentinels, and skeleton loaders. New features MUST use
   these instead of creating section-specific variants.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 19a. Stat Card — use with .card: <div class="card stat-card"> ── */
/* Stat card modifier — use with .card */
.stat-card {
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
}
.stat-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.12);
}
.stat-card-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-card-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
/* Small info affordance (ⓘ) — hover/focus shows a Bootstrap tooltip explaining
   a metric or section. Auto-initialised by footer_view.php. */
.info-tip {
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.55;
  cursor: help;
  margin-left: 4px;
  transition: opacity 0.12s ease;
}
.info-tip:hover, .info-tip:focus { opacity: 1; outline: none; }
.stat-card-sub {
  font-size: 0.75rem;
  color: var(--muted);
}
.stat-card-icon {
  font-size: 2rem;
  color: var(--brand);
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .stat-card { padding: 0.75rem; }
  .stat-card-value { font-size: 1.25rem; }
}

/* ── 19b. Badge Pill — Unified badge system ────────────────────── */
.badge-pill {
  display: inline-block;
  padding: 0.2em 0.55em;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-pill-sm { font-size: 0.65rem; padding: 0.15em 0.4em; border-radius: 3px; }
.badge-pill-lg { font-size: 0.78rem; padding: 0.25em 0.65em; }
.badge-pill-dashed { background: transparent !important; border: 1px dashed currentColor; }
.badge-pill-outline { background: transparent !important; border: 1px solid currentColor; }

/* Tinted (semi-transparent bg, colored text — auto-adapts dark/light via vars) */
.badge-green  { background: var(--c-green-bg);  color: var(--c-green); }
.badge-blue   { background: var(--c-blue-bg);   color: var(--c-blue); }
.badge-amber  { background: var(--c-amber-bg);  color: var(--c-amber); }
.badge-red    { background: var(--c-red-bg);     color: var(--c-red); }
.badge-purple { background: var(--c-purple-bg);  color: var(--c-purple); }
.badge-violet { background: var(--c-violet-bg);  color: var(--c-violet); }
.badge-gray   { background: var(--c-gray-bg);    color: var(--c-gray); }
.badge-slate  { background: var(--c-slate-bg);   color: var(--c-slate); }
.badge-pink   { background: var(--c-pink-bg);    color: var(--c-pink); }
.badge-teal   { background: var(--c-teal-bg);    color: var(--c-teal); }

/* Solid (opaque bg, white text — theme-independent) */
.badge-solid-green  { background: var(--c-green);  color: #fff; }
.badge-solid-blue   { background: var(--c-blue);   color: #fff; }
.badge-solid-amber  { background: var(--c-amber);  color: #1a1a2e; }
.badge-solid-red    { background: var(--c-red);     color: #fff; }
.badge-solid-purple { background: var(--c-purple);  color: #fff; }
.badge-solid-violet { background: var(--c-violet);  color: #fff; }
.badge-solid-slate  { background: var(--c-slate);   color: #fff; }

/* Bordered (adds subtle matching border to any tinted badge) */
.badge-bordered { border: 1px solid currentColor; }
.badge-green.badge-bordered  { border-color: rgba(34, 197, 94, 0.3); }
.badge-blue.badge-bordered   { border-color: rgba(59, 130, 246, 0.3); }
.badge-amber.badge-bordered  { border-color: rgba(245, 158, 11, 0.3); }
.badge-red.badge-bordered    { border-color: rgba(239, 68, 68, 0.3); }
.badge-purple.badge-bordered { border-color: rgba(168, 85, 247, 0.3); }
.badge-teal.badge-bordered   { border-color: rgba(16, 185, 129, 0.3); }
.badge-pink.badge-bordered   { border-color: rgba(236, 72, 153, 0.3); }
.badge-gray.badge-bordered   { border-color: rgba(156, 163, 175, 0.3); }

/* ── 19c. Filter Bar ───────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: end;
  margin-bottom: 1rem;
}
.filter-bar .form-control,
.filter-bar .form-select {
  max-width: 200px;
  font-size: 0.8rem;
}
.filter-bar label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 2px;
}
.filter-bar-boxed {
  padding: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
@media (max-width: 768px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .form-control,
  .filter-bar .form-select { max-width: 100%; }
}

/* ── 19d. Data Table ───────────────────────────────────────────── */
.data-table { font-size: 0.85rem; }
.data-table thead th {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.data-table td { vertical-align: middle; }
.data-table tbody tr { transition: background 0.15s ease; }
.data-table tbody tr:hover { background: var(--row-hover); }

/* Compact variant for audit/integration logs */
.data-table-sm { font-size: 0.8rem; }
.data-table-sm th { font-size: 0.72rem; letter-spacing: 0.04em; }

/* Row status accents (left border) */
.row-accent-green  { border-left: 3px solid var(--c-green); }
.row-accent-amber  { border-left: 3px solid var(--c-amber); }
.row-accent-red    { border-left: 3px solid var(--c-red); }
.row-accent-blue   { border-left: 3px solid var(--c-blue); }

/* ── 19e. Scroll Sentinel (infinite scroll) ────────────────────── */
.scroll-sentinel {
  text-align: center;
  padding: 1.5rem 0;
}
.scroll-sentinel .spinner-border {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── 19f. Skeleton Shimmer (loading placeholders) ──────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text {
  display: inline-block;
  min-width: 3em;
  height: 0.85em;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 25%, rgba(255,255,255,0.06) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  vertical-align: middle;
  color: transparent !important;
}
[data-theme="light"] .skeleton-text {
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.02) 50%, rgba(0,0,0,0.06) 75%);
  background-size: 200% 100%;
}
.skeleton-text-lg { height: 1.75rem; width: 3rem; }


/* ═══════════════════════════════════════════════════════════════════
   20. RESPONSIVE / MEDIA QUERIES
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #footer .border-start {
    border-left: 0 !important;
    text-align: left !important;
  }
  .tablerowtitle { width: 140px; }
}

@media (max-width: 480px) {
  .premium-card {
    padding: 26px 20px 22px;
    border-radius: 26px;
  }
  .siteMessage .wrapper { padding: 10px 14px; }
}

@media (max-width: 960px) {
  .block { width: 100%; }
  .blockContainer { margin: 25px auto; }
}


/* ═══════════════════════════════════════════════════════════════════
   20. CONTENT VIEW UTILITIES
   Styles extracted from inline <style> blocks in content views.
   ═══════════════════════════════════════════════════════════════════ */

/* Customer search — scrollable result tables (customer_view.php) */
.table-wrapper { position: relative; }
.table-scroll  { height: 150px; overflow: auto; margin-top: 20px; }

::-webkit-scrollbar { -webkit-appearance: none; width: 7px; }
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

/* File upload view (uploadimages_view.php) */
#uploadImages { padding: 20px; }

#upload-settings,
#my-dropzone {
  max-width: 800px;
  margin-left: 0;
}

.settings-row         { display: flex; align-items: center; margin-bottom: 15px; }
.settings-label       { flex: 0 0 80px; font-weight: bold; }
.settings-input-group { flex: 1; display: flex; gap: 10px; }

/* Scoped form-control for upload form only (avoids overriding global .form-control) */
#uploadImages .form-control {
  display: block;
  width: 100%;
  height: 28px;
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-sizing: border-box;
}

/* Dropzone widget */
#my-dropzone {
  border: 2px dashed #0087F7;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  min-height: 180px;
  padding: 20px;
}
[data-theme="light"] #my-dropzone { background: rgba(0, 135, 247, 0.03); }

/* Print template preview (printing_view.php) */
#sampleFrame {
  background-color: var(--preview-canvas-bg);
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

#layerFrame {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

#layerImage {
  min-width: 100px;
  min-height: 100px;
  background-image: url('/assets/img/shadow_LS.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  overflow: hidden;
  opacity: 0.8;
}

/* Gallery login access admin table (galleryloginaccess_view.php) */
#gla-bootstrap-scope table { font-size: 12px; text-align: left; }

/* Event image file browser thumbnails (event_image_view.php) */
#files { --thumb-size: 180px; }

.thumb {
  position: relative;
  width: calc(var(--thumb-size) + 50px);
  min-height: calc(var(--thumb-size) + 90px);
  float: left;
  padding: 2px;
  margin: 5px;
  background: var(--surface-hover);
}
.thumb input[type="checkbox"] { margin-bottom: 6px; }
.thumb img {
  display: block;
  max-width: var(--thumb-size);
  max-height: var(--thumb-size);
  margin: 5px auto;
}

.thumb-size-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 12px;
  font-size: 12px;
}
.thumb-size-control input[type="range"] { width: 180px; vertical-align: middle; }
.thumb-size-value {
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════
   21. MEDIA LIBRARY — Site-wide asset manager
   Styles for medialibrary/media_view.php and marketing/templates_view.php
   ═══════════════════════════════════════════════════════════════════ */

/* --- Media Library grid --- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.media-item {
  border-radius: 8px;
  overflow: hidden;
}
.media-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.25); }

.media-thumb {
  width: 100%;
  height: 130px;
  overflow: hidden;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
[data-theme="dark"] .media-thumb { background: rgba(255,255,255,0.06); }

.media-meta {
  padding: 8px 10px 10px;
}
.media-name {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.media-info {
  font-size: 0.72rem;
  margin-top: 2px;
}
.media-actions {
  margin-top: 6px;
  display: flex;
  gap: 4px;
}
.media-tags { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 2px; }
.media-tags .badge { cursor: pointer; }
.media-tags .badge:hover { opacity: 0.8; }

/* --- Folder cards --- */
.media-folder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  padding: 14px 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  color: var(--text);
}
.media-folder-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  color: var(--text);
  border-color: var(--brand);
}
.media-folder-icon { font-size: 1.8rem; color: var(--brand); margin-bottom: 4px; }
.media-folder-name { font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; }
.media-folder-count { font-size: 0.68rem; color: var(--muted); }
.media-folder-unfoldered .media-folder-icon { color: var(--muted); }

/* Dropzone area for Media Library */
.dropzone-area {
  border: 2px dashed var(--brand);
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.04);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: pointer;
  transition: background 0.2s;
}
.dropzone-area:hover,
.dropzone-area.dz-drag-hover { background: rgba(124, 58, 237, 0.09); }
.dropzone-area .dz-message { text-align: center; color: var(--muted); }

/* Extra-small button variant */
.btn-xs {
  padding: 2px 7px;
  font-size: 0.72rem;
  line-height: 1.4;
  border-radius: 4px;
}

/* --- Browse Media modal grid --- */
.bm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px;
}
.bm-card {
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--surface);
}
.bm-card:hover { border-color: var(--brand); }
.bm-card.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(124,58,237,0.35);
}
.bm-card img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}
.bm-card-info {
  padding: 4px 6px;
  font-size: 0.7rem;
}
.bm-card-info small { color: var(--muted); }

/* --- Email Template Gallery grid --- */
.mkt-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.mkt-template-card {
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
}
.mkt-template-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

.mkt-template-preview {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f8f8f8;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .mkt-template-preview { background: rgba(255,255,255,0.06); }

.mkt-template-no-preview {
  text-align: center;
  padding: 20px;
}

/* Hover overlay on preview */
.mkt-template-overlay {
  position: absolute;
  inset: 0;
  background: rgba(124, 58, 237, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}
.mkt-template-preview:hover .mkt-template-overlay { opacity: 1; }

.mkt-template-info {
  padding: 12px 14px 14px;
}

/* Marketing dashboard stat badges */
.mkt-stat-badge {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.95rem;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════
   22. COMPONENTS — STATUS BADGES, INLINE LABELS, EMPHASIS
   ═══════════════════════════════════════════════════════════════════ */

/* .important — inline warning/critical text (popups, notices) */
.important {
  color: var(--color-warning);
  font-weight: 600;
}
[data-theme="light"] .important { color: #92400e; }

/* ── Inline status badges ─────────────────────────────────────── */
/* Use: <span class="status-badge status-active">Active</span>    */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.status-active,
.status-enabled {
  background: var(--bg-success);
  border-color: var(--border-success);
  color: var(--color-success);
}
.status-inactive,
.status-disabled {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
  color: var(--muted);
}
.status-warning,
.status-pending {
  background: rgba(251,191,36,0.12);
  border-color: rgba(251,191,36,0.30);
  color: var(--color-warning);
}
.status-danger,
.status-error {
  background: var(--bg-danger);
  border-color: var(--border-danger);
  color: var(--color-danger);
}

/* ── Main event/location list table — location row badge ─────── */
/* (used in main_view.php location rows) */
.locationRow td { padding: 0.5rem 0.75rem; font-size: 0.875rem; }

/* ── Keyboard / code tag ──────────────────────────────────────── */
kbd {
  display: inline-block;
  padding: 0.1em 0.4em;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.8em;
  font-family: monospace;
  color: var(--text);
}

/* ── Card/dspBox inner header row ─────────────────────────────── */
/* A common pattern: <div class="d-flex align-items-center mb-3"> */
.card-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.65rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  overflow: hidden;
}

/* ── Data value emphasis ──────────────────────────────────────── */
.data-value {
  font-weight: 600;
  color: var(--text);
}
.data-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--muted);
  font-size: 0.875rem;
}
.empty-state i.fa-3x {
  opacity: 0.35;
}
.empty-state i {
  font-size: 2rem;
  opacity: 0.35;
  display: block;
  margin-bottom: 0.75rem;
}
.empty-state h3 {
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.empty-state p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.empty-state-compact {
  color: var(--muted);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 6rem 1rem;
  text-align: center;
}

.legacy-edit-card {
  max-width: 500px;
  margin: 1.5rem auto 0;
  padding-bottom: 1rem !important;
}

/* ── Nav link active indicator (admin sticky nav) ─────────────── */
.siteMessage .nav-link {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: var(--radius-btn-sm);
  transition: color 0.18s, background 0.18s;
}
.siteMessage .nav-link:hover {
  color: var(--text);
  background: var(--surface-hover);
}
/* link-body-emphasis in dark/light mode — sync with our theme vars */
.siteMessage .link-body-emphasis {
  color: var(--muted) !important;
}
.siteMessage .link-body-emphasis:hover {
  color: var(--text) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   23. LAYOUT SHELL — top bar + side rail
   Replaces .siteMessage two-row horizontal nav with a fixed top bar
   and a sticky left sidebar (220px).
   ═══════════════════════════════════════════════════════════════════ */

/* Geometry tokens */
:root {
  --topbar-h:   48px;
  --sidebar-w: 220px;
}

/* ── Top bar ──────────────────────────────────────────────────── */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 1000;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
}

/* Brand: "FYP. • Admin" */
.topbar-brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none !important;
  line-height: 1;
}
.brand-fyp {
  font-size: 1rem;
  font-weight: 900;
  color: var(--brand);
  letter-spacing: -0.5px;
}
.brand-sep {
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.45;
  margin: 0 0.1rem;
}
.brand-ctx {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

/* Greeting (center, desktop only) */
.topbar-greeting {
  flex: 1;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 1.25rem;
}

/* Right-side actions */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.topbar-link {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted) !important;
  text-decoration: none !important;
  transition: color 0.18s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.topbar-link:hover          { color: var(--text) !important; }
.topbar-link.signout:hover  { color: var(--color-danger) !important; }
.topbar-link.dropdown-toggle::after { font-size: 0.6rem; vertical-align: 0.1em; }

/* Account switcher pill in topbar */
.topbar-acct-badge {
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
body[data-account-type="orders"] .topbar-acct-badge {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}
body[data-account-type="downloads"] .topbar-acct-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

/* Floating "Back to Admin" button — shown in content area during masquerade */
.admin-back-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1050;
}
.admin-back-float a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.30);
  border-radius: 8px;
  color: var(--brand) !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.admin-back-float a:hover {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.admin-back-float a i { font-size: 0.68rem; }

/* Help dropdown in topbar */
.topbar-help-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-width: 200px;
  padding: 0.35rem 0;
}
.topbar-help-menu .dropdown-item {
  color: var(--text);
  font-size: 0.8rem;
  padding: 0.45rem 1rem;
}
.topbar-help-menu .dropdown-item:hover,
.topbar-help-menu .dropdown-item:focus {
  background: var(--row-hover);
  color: var(--text);
}
.topbar-help-menu .dropdown-item i { color: var(--muted); width: 1.1em; text-align: center; }
.topbar-help-menu .dropdown-divider { border-color: var(--border); margin: 0.25rem 0; }

/* BACK badge (shown when platform admin is masquerading as a tenant) */
.topbar-back-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 9px;
  border-radius: var(--radius-btn-sm);
  border: 1px solid rgba(251, 191, 36, 0.40);
  color: var(--color-warning) !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background 0.18s;
}
.topbar-back-badge:hover { background: rgba(251, 191, 36, 0.10) !important; }

/* Hamburger (mobile only — shown via media query) */
#sidebar-toggle {
  display: none;
  background: none;
  border: none;
  padding: 4px 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--radius-btn-sm);
  flex-shrink: 0;
  transition: color 0.18s, background 0.18s;
}
#sidebar-toggle:hover {
  color: var(--text);
  background: var(--surface-hover);
}

/* ── App shell (topbar-offset flex row) ───────────────────────── */
#app-shell {
  display: flex;
  padding-top: var(--topbar-h);
  min-height: 100vh;
}

/* ── Side rail ────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease,
              border-color 0.3s ease;
}

/* Inner wrapper — provides positioning context for sub-panel overlay */
#sidebar-inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  padding: 0.75rem 0 1rem;
}

/* Nav group container */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0.5rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

/* A long Platform Admin drawer reduces the space available to the primary
 * navigation. Its rows must scroll at their designed height, never shrink
 * into one another to satisfy the flex container. */
.sidebar-nav > * {
  flex-shrink: 0;
}

/* Optional section label */
.sidebar-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
  opacity: 0.55;
  padding: 0.75rem 0.75rem 0.2rem;
}

/* Nested group header inside an expanded submenu (Marketing, etc.) */
.sidebar-submenu .sidebar-sublabel {
  font-size: 0.58rem;
  padding: 0.6rem 0.5rem 0.15rem 1.5rem;
  opacity: 0.45;
}
.sidebar-submenu .sidebar-sublabel:first-child {
  padding-top: 0.3rem;
}

/* Individual nav link */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.15rem 0.75rem;
  border-radius: var(--radius-btn-sm);
  color: var(--muted) !important;
  font-size: 0.83rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-launch-form {
    margin: 0;
}

.sidebar-launch-form .sidebar-link {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}
.sidebar-link i {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  opacity: 0.65;
  transition: opacity 0.15s;
}
.sidebar-link:hover {
  background: var(--surface-hover);
  color: var(--text) !important;
}
.sidebar-link:hover i { opacity: 1; }

/* Active state */
.sidebar-link.active {
  background: rgba(124, 58, 237, 0.12);
  color: var(--brand) !important;
  font-weight: 700;
}
.sidebar-link.active i {
  opacity: 1;
  color: var(--brand);
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%; bottom: 20%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--brand);
}
[data-theme="light"] .sidebar-link.active {
  background: rgba(124, 58, 237, 0.08);
}

/* Disabled / coming-soon sidebar links */
.sidebar-link-disabled {
  opacity: 0.40;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

/* Thin separator */
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 0.5rem 0.75rem;
}

/* Sidebar tail — pushes footer links + collapse button to bottom */
.sidebar-tail {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 0;
  max-height: calc(100vh - var(--topbar-h) - 5rem);
  overflow: hidden;
}

/* Sidebar footer (de-emphasised admin/platform links) */
.sidebar-footer {
  padding: 0.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The platform-admin tree is much longer than the other footer content.
 * Keep its expansion inside its own scroll region so it cannot compress
 * or alter the spacing of the primary admin navigation above it. */
#admin-tools-submenu.open {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  max-height: calc(100vh - var(--topbar-h) - 11rem);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#admin-tools-submenu.open::-webkit-scrollbar { width: 5px; }
#admin-tools-submenu.open::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}
.sidebar-link-admin {
  color: rgba(251, 191, 36, 0.60) !important;
  font-size: 0.78rem;
}
.sidebar-link-admin i {
  opacity: 0.65;
  color: var(--color-warning);
}
.sidebar-link-admin:hover {
  color: var(--color-warning) !important;
  background: rgba(251, 191, 36, 0.07);
}

/* ── Content pane ─────────────────────────────────────────────── */
#app-shell > #maincontent {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.5rem 2rem;
  background: transparent !important;
  min-height: calc(100vh - var(--topbar-h));
}

/* ── Sidebar overlay (mobile tap-to-close backdrop) ───────────── */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 998;
  cursor: pointer;
}

/* ── Responsive: collapse sidebar ≤ 768px ─────────────────────── */
@media (max-width: 768px) {
  #sidebar-toggle { display: inline-flex; }

  #sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    z-index: 999;
    transform: translateX(calc(-1 * var(--sidebar-w)));
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }
  #sidebar.sidebar-open       { transform: translateX(0); }
  #sidebar-overlay.active     { display: block; }

  #app-shell > #maincontent {
    padding: 1rem 0.75rem 2rem;
  }

  .topbar-greeting { display: none; }
}

@media (min-width: 769px) {
  #sidebar-overlay { display: none !important; }
}

/* ── Sidebar collapse (desktop toggle) ───────────────────────── */
:root { --sidebar-w-collapsed: 52px; }

/* Collapse/expand button at the bottom of the rail */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  transition: color 0.18s, background 0.18s;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-collapse-btn:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.sidebar-collapse-btn i {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: 0.78rem;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed state */
#sidebar.sidebar-collapsed { width: var(--sidebar-w-collapsed); }

#sidebar.sidebar-collapsed .sidebar-link span,
#sidebar.sidebar-collapsed .sidebar-label,
#sidebar.sidebar-collapsed .sidebar-footer span,
#sidebar.sidebar-collapsed .sidebar-collapse-btn span {
  display: none;
}

#sidebar.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding: 0.5rem 0;
  gap: 0;
}
#sidebar.sidebar-collapsed .sidebar-link i { width: auto; font-size: 0.95rem; }

#sidebar.sidebar-collapsed .sidebar-collapse-btn {
  justify-content: center;
  padding: 0.5rem 0;
}
#sidebar.sidebar-collapsed .sidebar-collapse-btn i {
  width: auto;
}

#sidebar.sidebar-collapsed .sidebar-divider { margin: 0.35rem 0.5rem; }
#sidebar.sidebar-collapsed .sidebar-footer  { padding: 0.25rem; }

/* Promote-tier rows (Gallery Codes, Lost Image Finder) — shown as
 * standalone top-level parents in the expanded sidebar so they're
 * discoverable without expanding the Images submenu. In collapsed
 * sidebar mode they disappear; users reach them via the Images flyout
 * which keeps duplicates marked `sidebar-tuck-in-collapsed`. (2026-05-25)
 */
#sidebar.sidebar-collapsed .sidebar-promote-tier { display: none; }

/* Submenu items tagged `sidebar-tuck-in-collapsed` only appear in
 * collapsed sidebar mode (they're the fall-back home for promoted
 * top-level rows that hide in collapsed mode). */
.sidebar-tuck-in-collapsed { display: none !important; }
#sidebar.sidebar-collapsed .sidebar-tuck-in-collapsed { display: flex !important; }

/* Hide collapse button on mobile (hamburger handles it there) */
@media (max-width: 768px) {
  .sidebar-collapse-btn { display: none; }
}

/* ── Sidebar collapsible submenu ───────────────────────────── */
.sidebar-parent-row {
  display: flex;
  align-items: stretch; /* button stretches to match link height — not the other way around */
}
.sidebar-parent-row > .sidebar-link {
  flex: 1;
  min-width: 0;
  overflow: hidden;          /* prevent content from bleeding under the toggle */
}
/* Text span inside parent-row link: flex layout so text truncates, badges stay */
.sidebar-parent-row > .sidebar-link > span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  overflow: hidden;
}
/* Badges inside parent-row links never shrink — text truncates instead */
.sidebar-parent-row > .sidebar-link .badge {
  flex-shrink: 0;
}

/* Sublinks (inside open submenus) stay compact */
.sidebar-sublink { padding-top: 0.10rem; padding-bottom: 0.10rem; }

/* Chevron toggle — stretches to fill row height, icon centered inside */
.sidebar-submenu-toggle {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0 0.5rem;        /* no vertical padding — height is driven by the sibling link */
  display: flex;
  align-items: center;      /* center chevron icon vertically within stretched height */
  justify-content: center;
  cursor: pointer;
  font-size: 0.65rem;
  opacity: 0.4;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
  border-radius: var(--radius-btn-sm);
  line-height: 1;
}
.sidebar-submenu-toggle:hover {
  opacity: 1;
  background: var(--surface-hover);
}
.sidebar-submenu-toggle i {
  display: block;
}

/* Collapsible container */
.sidebar-submenu {
  display: none; /* hidden by default — opened by drill-in or .open toggle */
}
.sidebar-submenu.open {
  display: block;
}
/* #471 — While the focused sub-panel is showing, hide the inline
   .sidebar-submenu.open duplication on the main sidebar. The same
   content is in both places otherwise (the panel clones from the
   inline source) — confusing on screen + harder to navigate back.
   The body.sidebar-drilled-in class is toggled by sidebarDrillIn /
   _sidebarSlideOutDone. */
body.sidebar-drilled-in #sidebar .sidebar-nav .sidebar-submenu.open {
  display: none;
}

/* Indented sub-links */
.sidebar-link.sidebar-sublink {
  padding-left: 2rem;
  font-size: 0.78rem;
}
.sidebar-link.sidebar-sublink i {
  font-size: 0.72rem;
}

/* Collapsed sidebar: hide chevron */
#sidebar.sidebar-collapsed .sidebar-submenu-toggle {
  display: none;
}

/* ── Drill-down sub-panel ─────────────────────────────────────── */
#sidebar-sub-panel {
  position: absolute;
  inset: 0;
  background: var(--bg-mid);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  z-index: 10;
}
#sidebar-sub-panel::-webkit-scrollbar { display: none; }
#sidebar-sub-panel.open { transform: translateX(0); }
/* sliding-out: panel is animating back to translateX(100%) — same as default (no .open) */
#sidebar-sub-panel.sliding-out { transform: translateX(100%); }
/* #470 — applied for one frame during page-load auto-drill so the panel
   appears in its open state without animating. Removed via RAF×2 so
   user-initiated drill-ins (click handlers) still animate normally. */
#sidebar-sub-panel.no-transition { transition: none !important; }

.sidebar-sub-header {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem 0.4rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-mid);
  flex-shrink: 0;
}
.sidebar-sub-back {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.45rem;
  border-radius: var(--radius-btn-sm);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 700;
  width: 100%;
  transition: background 0.15s;
}
.sidebar-sub-back:hover { background: var(--surface-hover); }
.sidebar-sub-back i { font-size: 0.72rem; }
#sidebar-sub-content {
  padding: 0.5rem;
  flex: 1;
}
/* Sub-panel items: more breathing room + slightly larger text */
#sidebar-sub-content .sidebar-sublink { padding-left: 0.75rem; padding-top: 0.35rem; padding-bottom: 0.35rem; font-size: 0.84rem; }
#sidebar-sub-content .sidebar-label   { padding-left: 0.75rem; }

/* ── 24. Page-level slide transitions ──────────────────────── */
@keyframes slideInFromRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInFromLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

.page-slide-in-right { animation: slideInFromRight 0.22s cubic-bezier(0.4,0,0.2,1) forwards; }
.page-slide-in-left  { animation: slideInFromLeft  0.22s cubic-bezier(0.4,0,0.2,1) forwards; }

.page-exit-left {
  transition: opacity 0.18s ease, transform 0.18s ease;
  opacity: 0;
  transform: translateX(-28px);
}

/* ── 25. Photographer list: account type + feature badges ───── */
.acct-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 0.65rem;
  margin-right: 0.4rem;
  vertical-align: middle;
  flex-shrink: 0;
}
.acct-type-badge.orders {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}
.acct-type-badge.downloads {
  background: rgba(148, 163, 184, 0.12);
  color: var(--muted);
  opacity: 0.6;
}
.feature-badge {
  font-size: 0.75rem;
  margin-inline: 0.18rem;
}
.feature-badge.on  { color: var(--brand); opacity: 1; }
.feature-badge.off { color: var(--muted); opacity: 0.35; }

.quick-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: none;
}
.quick-link-btn:hover {
  background: var(--surface);
  color: var(--text);
}

/* ── 26. Settings form (editdefaults) tabs ──────────────────── */
.nav-tabs .nav-link {
  color: var(--muted);
  border-color: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border) var(--border) var(--surface);
}
.nav-tabs .nav-link:hover:not(.active) {
  color: var(--text);
  border-color: transparent;
}
/* Card directly below tabs — merge top border */
.rounded-top-0 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.border-top-0  { border-top: none !important; }

/* ── Dropdown (Bootstrap) — dark/light adaptation ─────────────── */
.dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
  padding: 0.35rem;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.dropdown-item {
  color: var(--muted);
  border-radius: calc(var(--radius-card) - 4px);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  transition: background 0.15s, color 0.15s;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--surface-hover);
  color: var(--text);
}
.dropdown-item.active,
.dropdown-item:active {
  background: rgba(255, 255, 255, 0.13);
  color: var(--text);
}
.dropdown-divider { border-color: var(--border); margin: 0.25rem 0; }
[data-theme="light"] .dropdown-menu {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .dropdown-item:focus { background: rgba(0, 0, 0, 0.04); }
[data-theme="light"] .dropdown-item.active { background: rgba(0, 0, 0, 0.07); }

/* ── Nav pills — neutral frosted-glass active (replaces Bootstrap #0d6efd) */
.nav-pills .nav-link {
  color: var(--muted);
  transition: background 0.18s, color 0.18s;
}
.nav-pills .nav-link:hover {
  color: var(--text);
  background: var(--surface-hover);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: rgba(255, 255, 255, 0.13);
  color: var(--text);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07);
}
[data-theme="light"] .nav-pills .nav-link.active,
[data-theme="light"] .nav-pills .show > .nav-link {
  background: rgba(0, 0, 0, 0.07);
  color: var(--text);
  box-shadow: none;
}

/* ── Dashboard quick-link cards ──────────────────────────────── */
.dashboard-link-card {
  color: var(--text) !important;
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
  cursor: pointer;
}
.dashboard-link-card:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
}
[data-theme="light"] .dashboard-link-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  border-color: rgba(0, 0, 0, 0.14);
}
.dashboard-link-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--muted);
  transition: color 0.18s, background 0.18s;
}
.dashboard-link-card:hover .dashboard-link-icon {
  color: var(--text);
  background: rgba(255, 255, 255, 0.09);
}
[data-theme="light"] .dashboard-link-card:hover .dashboard-link-icon {
  background: rgba(0, 0, 0, 0.05);
}

/* ── 27. Audit log table ──────────────────────────────────────────────
 * Risk-level row highlighting and badge colours.
 * Works in both light and dark themes using semi-transparent tints.    */

.audit-row-critical td { border-left: 3px solid var(--bs-danger, #dc3545); }
.audit-row-elevated td { border-left: 3px solid var(--bs-warning, #ffc107); }

[data-theme="dark"]  .audit-row-critical,
[data-theme="dark"]  .audit-row-critical:hover { background: rgba(220,53,69,.12)  !important; }
[data-theme="dark"]  .audit-row-elevated,
[data-theme="dark"]  .audit-row-elevated:hover { background: rgba(255,193,7,.10)  !important; }
[data-theme="light"] .audit-row-critical,
[data-theme="light"] .audit-row-critical:hover { background: rgba(220,53,69,.07)  !important; }
[data-theme="light"] .audit-row-elevated,
[data-theme="light"] .audit-row-elevated:hover { background: rgba(255,193,7,.10)  !important; }

/* Risk badges */
.audit-badge-critical { background: #c0392b; color: #fff; }
.audit-badge-elevated { background: #d35400; color: #fff; }
.audit-badge-routine  { background: rgba(120,120,120,.35); color: inherit; }

/* ── 28. Role selector cards (.role-card-group) ──────────────────────
 * Used on admin add/edit forms for visual role selection.
 * Adapts to light and dark themes via CSS variables.              */

.role-card-group  { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.role-card-label  { flex: 1; min-width: 150px; cursor: pointer; }
.role-card-label input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.role-card-inner {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 1.1rem 1rem;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.role-card-label:hover .role-card-inner {
  border-color: rgba(255,255,255,0.18);
  background: var(--surface-hover);
}
.role-card-label input:checked + .role-card-inner {
  border-color: var(--brand);
  background: var(--brand-glow);
  box-shadow: 0 0 0 1px var(--brand);
}
.role-card-icon {
  font-size: 1.4rem; margin-bottom: 0.45rem;
  color: var(--muted); transition: color 0.15s;
}
.role-card-label input:checked + .role-card-inner .role-card-icon { color: var(--brand); }
.role-card-name { font-weight: 600; font-size: 0.875rem; color: var(--text); }
.role-card-desc { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }
[data-theme="light"] .role-card-label:hover .role-card-inner { border-color: rgba(0,0,0,0.15); }

/* ── 29. System Messages — type badges ───────────────────────────────
 * Soft tinted badges that adapt to dark and light themes.
 * .badge-msg-info / -notice / -alert                              */

.badge-msg-info,
.badge-msg-notice,
.badge-msg-alert {
  display: inline-flex;
  align-items: center;
  padding: .2em .55em;
  border-radius: .35rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Dark (default) */
.badge-msg-info   { background: rgba(255,255,255,0.09); color: var(--muted); }
.badge-msg-notice { background: rgba(245,158, 11,0.18); color: #f59e0b; }
.badge-msg-alert  { background: rgba(239, 68, 68,0.18); color: #f87171; }

/* Light */
[data-theme="light"] .badge-msg-info   { background: rgba(0,0,0,0.06);         color: var(--muted); }
[data-theme="light"] .badge-msg-notice { background: rgba(217,119,  6,0.12);   color: #92400e; }
[data-theme="light"] .badge-msg-alert  { background: rgba(220, 38, 38,0.12);   color: #b91c1c; }

/* ── 30. Dashboard — nav cards + stat cards ────────────────────────── */

.dash-nav-card {
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
  color: var(--text);
}
.dash-nav-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .375rem .75rem rgba(0,0,0,.25);
  color: var(--text);
}
[data-theme="light"] .dash-nav-card:hover {
  box-shadow: 0 .375rem .75rem rgba(0,0,0,.10);
}
.dash-nav-icon-primary {
  color: var(--brand);
}
.dash-nav-desc {
  font-size: .72rem;
  line-height: 1.3;
}


/* ── 31. Locations page ──────────────────────────────────────────────── */

/* Photographer identity bar */
.loc-identity-bar {
  padding: .5rem .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Copy button + toast */
.loc-copy-btn {
  padding: .15rem .35rem;
  font-size: .72rem;
  line-height: 1;
  border-color: var(--border);
  color: var(--muted);
}
.loc-copy-btn:hover { color: var(--text); }
.loc-copy-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--c-green);
  color: #fff;
  padding: .35rem .9rem;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1080;
}
.loc-copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Event code monospace */
.loc-eventcode {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: .82rem;
  color: var(--muted);
  user-select: all;
  letter-spacing: .02em;
}

/* Create location card — Quick/Detailed toggle */
#create-location-card .btn-group-sm .btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
#detail-fields { transition: max-height .3s ease; }

/* Business hours grid */
#detail-bh-grid table { font-size: .82rem; }
#detail-bh-grid th { font-weight: 500; }
#detail-bh-grid select { font-size: .8rem; min-width: 5.5rem; }

/* Location table — allow sticky thead by removing overflow clip from ancestors */
#loc-table-wrap { overflow: visible !important; }
.card:has(#loc-table-wrap) { overflow: visible; }

/* Location table — row hover + sticky header */
#loc-table { table-layout: fixed; }
#loc-table tbody tr:hover { background: var(--row-hover); }
#loc-table thead th {
  position: sticky;
  top: var(--topbar-h);
  background: var(--surface);
  backdrop-filter: blur(12px);
  z-index: 3;
  border-bottom: 2px solid var(--border);
}
[data-theme="light"] #loc-table thead th {
  background: rgba(255,255,255,0.95);
}
/* Location name column — truncate long names */
#loc-table td:not(.text-center):not(.text-end) { word-break: break-word; overflow-wrap: break-word; }

/* Sortable column headers (client-side sort) */
#loc-table th.loc-sortable { cursor: pointer; user-select: none; }
#loc-table th.loc-sortable:hover { color: var(--text); }
#loc-table th.loc-sortable:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
#loc-table .loc-sort-icon {
  margin-left: 4px;
  font-size: .72rem;
  color: var(--muted);
  opacity: .6;
}
#loc-table .loc-sort-icon.active { color: var(--brand); opacity: 1; }

/* Selected row highlight */
.loc-row.loc-selected {
  background: var(--c-violet-bg) !important;
}
[data-theme="light"] .loc-row.loc-selected {
  background: rgba(124,58,237,0.06) !important;
}

/* Checkbox accent */
.loc-check { accent-color: var(--brand); }

/* Tool action links — compact icon buttons */
.loc-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 3px;
  border-radius: 4px;
  color: var(--muted);
  font-size: .8rem;
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
  flex: 0 0 auto;
}
.loc-tool:first-child { margin-left: 0; }
/* Tool groups — visual clusters in the locations row (added 2026-06-29).
   Icons stay tight within a group (.loc-tool margin-left 3px); the GAP between
   groups lives on the wrapper span. First icon of each group sits flush via the
   existing .loc-tool:first-child rule. */
.loc-tool-group { display: inline-flex; align-items: center; }
.loc-tool-group + .loc-tool-group { margin-left: 28px; }
/* Delete group gets extra breathing room (two-class selector beats the +
   rule above on specificity, so it must stay below it). */
.loc-tool-group.loc-tool-group-danger { margin-left: 44px; }
/* Tools cell: keep icons on one line, even when content reflows */
#loc-table td.text-end { white-space: nowrap; }
.loc-tool:hover {
  color: var(--text);
  background: var(--surface-hover, rgba(255,255,255,0.06));
}
[data-theme="light"] .loc-tool:hover {
  background: rgba(0,0,0,0.06);
}
.loc-tool.text-danger:hover {
  color: var(--color-danger, #ef4444);
  background: rgba(239, 68, 68, 0.08);
}

/* Location ID code styling */
#loc-table code {
  color: var(--muted);
  font-size: .78rem;
}

/* Region/Area assign link */
.loc-assign-link {
  text-decoration: none;
  color: inherit;
}
.loc-assign-link:hover { opacity: .8; }

/* Bulk action bar */
.loc-bulk-bar {
  padding: .65rem 1rem;
  background: var(--surface);
  border: 1px solid var(--brand);
  border-radius: 8px;
}

/* Skeleton loading rows */
.loc-skeleton td {
  padding: .65rem .5rem;
}

/* Infinite scroll sentinel */
#loc-sentinel .spinner-border {
  width: 1.2rem;
  height: 1.2rem;
}

/* Responsive — stack business hours grid on small screens */
@media (max-width: 767.98px) {
  #detail-bh-grid { overflow-x: auto; }
  .loc-bulk-bar { padding: .5rem .75rem; }
  .loc-identity-bar { flex-wrap: wrap; }
}

/* ── 31a. CSV Import Preview ─────────────────────────────────────────── */

/* Preview table container */
#csv-preview-table {
  font-size: .82rem;
  border-collapse: collapse;
  width: 100%;
}
#csv-preview-table th {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
}
#csv-preview-table td,
#csv-preview-table th {
  padding: .35rem .5rem;
  border: 1px solid var(--border);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Row-level: error = red tint, warn = amber tint */
.csv-row-error { background: var(--c-red-bg) !important; }
.csv-row-warn  { background: var(--c-amber-bg) !important; }

/* Cell-level: red highlight for invalid values */
.csv-cell-error {
  background: var(--c-red-bg);
  color: var(--c-red);
  font-weight: 600;
}

/* Light theme refinements */
[data-theme="light"] #csv-preview-table th {
  background: rgba(255,255,255,0.9);
}

/* ── 31b. Bulk Edit spreadsheet ──────────────────────────────────────── */

/* Table wrapper — scrollable with sticky header */
#be-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* Sticky table header */
#be-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  backdrop-filter: blur(12px);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid var(--border);
}
/* Pencil hint on editable column headers */
.be-edit-hint { font-size: .6rem; color: var(--muted); margin-left: 3px; opacity: 0.5; }
[data-theme="light"] #be-table thead th {
  background: rgba(255,255,255,0.95);
}

/* Editable input — borderless, blends into cell */
.be-input {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  width: 100%;
  padding: 2px 4px;
  font-size: .8rem;
  border-radius: 3px;
  transition: border-color .15s;
}
.be-input:focus {
  border-color: var(--brand);
  outline: none;
  background: rgba(124,58,237,0.04);
}
[data-theme="light"] .be-input:focus {
  background: rgba(124,58,237,0.03);
}

/* Editable select — same transparent pattern */
.be-select {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  width: 100%;
  padding: 2px 2px;
  font-size: .8rem;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .15s;
}
.be-select:focus {
  border-color: var(--brand);
  outline: none;
}
.be-select option { background: var(--surface); color: var(--text); }
[data-theme="light"] .be-select option { background: #fff; color: #1e293b; }

/* Dirty cell — amber left border */
.be-dirty {
  border-left: 3px solid var(--c-amber) !important;
}

/* Saved cell — green flash that fades */
.be-saved {
  border-left: 3px solid var(--c-green) !important;
  transition: border-color 1.5s ease;
}

/* Error cell — red left border */
.be-error {
  border-left: 3px solid var(--c-red) !important;
}

/* Sticky save bar */
#be-save-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w, 220px);
  right: 0;
  z-index: 100;
  padding: .65rem 1.25rem;
  background: var(--surface);
  backdrop-filter: blur(16px);
  border-top: 2px solid var(--brand);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: .75rem;
  transform: translateY(100%);
  transition: transform .25s ease;
}
#be-save-bar.be-save-bar-visible {
  transform: translateY(0);
}
[data-theme="light"] #be-save-bar {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}

/* Dirty count badge in save bar */
.be-dirty-count {
  background: var(--c-amber-bg);
  color: var(--c-amber);
  font-size: .78rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
}

/* Row hover */
#be-table tbody tr:hover { background: var(--row-hover); }

/* Location name link */
#be-table .be-loc-name {
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
#be-table .be-loc-name:hover { color: var(--brand); }

/* Event code */
#be-table .be-code {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: .78rem;
  color: var(--muted);
}

/* Responsive: save bar full width on collapsed sidebar */
@media (max-width: 991.98px) {
  #be-save-bar { left: 0; }
}


/* ── 32. Photographer Activity Log ─────────────────────────────────── */
/* Role badges for per-photographer audit trail.
   Reuses .data-table / .data-table-sm, .audit-row-elevated, .audit-badge-* from section 27. */

.paudit-role-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 500;
  padding: .2em .55em;
  border-radius: 4px;
  line-height: 1.4;
  white-space: nowrap;
}
.paudit-role-account_owner    { background: var(--brand); color: #fff; }
.paudit-role-manager          { background: rgba(99,102,241,.75); color: #fff; }
.paudit-role-admin            { background: rgba(99,102,241,.75); color: #fff; }
.paudit-role-triprism_admin   { background: #c0392b; color: #fff; }
.paudit-role-padmin           { background: #d35400; color: #fff; }
.paudit-role-location         { background: rgba(16,185,129,.6); color: #fff; }
.paudit-role-regional         { background: rgba(59,130,246,.6); color: #fff; }
.paudit-role-area             { background: rgba(59,130,246,.6); color: #fff; }
.paudit-role-customer_service { background: rgba(245,158,11,.6); color: #fff; }
.paudit-role-reports          { background: rgba(120,120,120,.5); color: #fff; }

/* Light theme — slightly more opaque badges */
[data-theme="light"] .paudit-role-account_owner  { background: var(--brand); }
[data-theme="light"] .paudit-role-manager,
[data-theme="light"] .paudit-role-admin          { background: rgba(99,102,241,.85); }
[data-theme="light"] .paudit-role-triprism_admin { background: #e74c3c; }
[data-theme="light"] .paudit-role-padmin         { background: #e67e22; }
[data-theme="light"] .paudit-role-location       { background: rgba(16,185,129,.75); }
[data-theme="light"] .paudit-role-regional,
[data-theme="light"] .paudit-role-area           { background: rgba(59,130,246,.75); }
[data-theme="light"] .paudit-role-customer_service { background: rgba(245,158,11,.75); }
[data-theme="light"] .paudit-role-reports        { background: rgba(120,120,120,.65); }

/* CSV export button */
.paudit-export-btn {
  font-size: .8rem;
  padding: .3em .75em;
}


/* ── 33. Account Section — toolbar, accordion, profile ──────────────── */

/* Account tab toolbar — nav pills */
.account-toolbar .nav-pills {
  gap: .35rem;
}
.account-toolbar .nav-pills .nav-link {
  font-size: .82rem;
  font-weight: 500;
  padding: .4rem .85rem;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  transition: background .15s, color .15s, border-color .15s;
}
.account-toolbar .nav-pills .nav-link:hover {
  color: var(--text);
  border-color: var(--brand);
}
.account-toolbar .nav-pills .nav-link.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Platform Settings — accordion theming */
.platform-accordion .accordion-item {
  background: var(--surface);
  border-color: var(--border);
}
.platform-accordion .accordion-button {
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  font-size: .88rem;
}
.platform-accordion .accordion-button::after {
  filter: var(--accordion-chevron-filter, none);
}
.platform-accordion .accordion-button:not(.collapsed) {
  background: var(--brand-glow);
  color: var(--text);
  box-shadow: none;
}
.platform-accordion .accordion-body {
  border-top: 1px solid var(--border);
}

/* Dark theme accordion chevron needs inversion */
:root {
  --accordion-chevron-filter: invert(1);
}
[data-theme="light"] {
  --accordion-chevron-filter: none;
}

/* Profile definition list */
.profile-field dt {
  font-weight: 500;
  font-size: .85rem;
  color: var(--muted);
  padding-top: .55rem;
  padding-bottom: .55rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.profile-field dd {
  font-size: .88rem;
  padding-top: .55rem;
  padding-bottom: .55rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.profile-field dt:last-of-type,
.profile-field dd:last-of-type {
  border-bottom: none;
}

/* Finance role badge for audit log */
.paudit-role-finance { background: rgba(34,197,94,.6); color: #fff; }
[data-theme="light"] .paudit-role-finance { background: rgba(34,197,94,.75); }


/* ── 34. Account Switcher — Orders / Downloads pairing ────────────────
   Compact inline switcher: [ORD badge] [Switch to Downloads →]
   Green = ORDERS account, Blue = DOWNLOADS account.
   ──────────────────────────────────────────────────────────────────── */

/* Single-row inline container */
.sidebar-account-switcher {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0.5rem 0;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background 0.2s, border-color 0.2s;
}

/* Compact type badge (ORD / DL) */
.sidebar-account-badge {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Switch button link */
.sidebar-switch-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-switch-btn:hover { color: var(--text); }
.sidebar-switch-btn i { font-size: 0.65rem; flex-shrink: 0; }

/* ── ORDERS (green) ──────────────────────────────────────────── */
body[data-account-type="orders"] .sidebar-account-switcher {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
}
body[data-account-type="orders"] .sidebar-account-badge {
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
}
body[data-account-type="orders"] .sidebar-switch-btn:hover {
  background: rgba(34, 197, 94, 0.10);
}
body[data-account-type="orders"] #topbar {
  border-bottom: 2px solid rgba(34, 197, 94, 0.50);
}

/* ── DOWNLOADS (blue) ────────────────────────────────────────── */
body[data-account-type="downloads"] .sidebar-account-switcher {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
}
body[data-account-type="downloads"] .sidebar-account-badge {
  background: rgba(59, 130, 246, 0.18);
  color: #3b82f6;
}
body[data-account-type="downloads"] .sidebar-switch-btn:hover {
  background: rgba(59, 130, 246, 0.10);
}
body[data-account-type="downloads"] #topbar {
  border-bottom: 2px solid rgba(59, 130, 246, 0.50);
}

/* ── Light theme variants */
[data-theme="light"] body[data-account-type="orders"] .sidebar-account-switcher {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.20);
}
[data-theme="light"] body[data-account-type="downloads"] .sidebar-account-switcher {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.20);
}
[data-theme="light"] body[data-account-type="orders"] #topbar {
  border-bottom: 2px solid rgba(34, 197, 94, 0.40);
}
[data-theme="light"] body[data-account-type="downloads"] #topbar {
  border-bottom: 2px solid rgba(59, 130, 246, 0.40);
}

/* ── Collapsed sidebar: badge-only ───────────────────────────── */
#sidebar.sidebar-collapsed .sidebar-account-switcher {
  justify-content: center;
  margin: 0.25rem 0.2rem 0;
  padding: 0.25rem;
}
#sidebar.sidebar-collapsed .sidebar-switch-btn { display: none; }

/* ═══════════════════════════════════════════════════════════════
   29b. Location Architecture — Toolbar Tabs, Filter Bar, Badges
   ═══════════════════════════════════════════════════════════════ */

/* Metadata badges under location name in table */
.loc-meta {
  margin-top: 2px;
  line-height: 1.3;
}
.loc-meta-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.loc-meta-badge.bg {
  background: rgba(124, 58, 237, 0.15);
  color: var(--brand);
}
.loc-meta-badge.pf {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}
[data-theme="light"] .loc-meta-badge.bg {
  background: rgba(124, 58, 237, 0.1);
}
[data-theme="light"] .loc-meta-badge.pf {
  background: rgba(59, 130, 246, 0.1);
}
.loc-meta-badge.qc {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}
[data-theme="light"] .loc-meta-badge.qc {
  background: rgba(234, 179, 8, 0.15);
  color: #a16207;
}

/* Tag chips */
.loc-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  margin: 1px 2px;
}
[data-theme="light"] .loc-tag {
  background: rgba(0, 0, 0, 0.06);
}

/* ── 35. ACL Permission Override UI + Readonly Badge ─────────────────
   Permission grid in subuser edit form.
   Readonly badge in sidebar for admin masquerade.
   Client role badge in audit log.
   ──────────────────────────────────────────────────────────────────── */

/* Permission override table */
.acl-override-table {
  font-size: 0.82rem;
}
.acl-override-table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
}
.acl-override-table td {
  vertical-align: middle;
  padding: 0.35rem 0.5rem;
}
.acl-override-table .form-check-input {
  cursor: pointer;
}
.acl-tier-badge {
  font-size: 0.6rem;
  padding: 0.15em 0.4em;
  vertical-align: middle;
}

/* Readonly badge (shared pattern for admin + photographer sidebars) */
.sidebar-readonly-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.5rem 0.5rem 0;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.sidebar-readonly-badge i {
  font-size: 0.72rem;
}

/* Collapsed sidebar: hide text, keep icon */
.sidebar-collapsed .sidebar-readonly-badge span {
  display: none;
}
.sidebar-collapsed .sidebar-readonly-badge {
  justify-content: center;
  padding: 0.4rem;
  margin: 0.5rem 0.25rem 0;
}

/* Light theme readonly badge */
[data-theme="light"] .sidebar-readonly-badge {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
  color: #dc2626;
}

/* Client role badge in photographer audit log */
.paudit-role-client { background: var(--c-purple-bg); color: var(--c-purple); }

/* Sidebar focused mode (one submenu open hides others) */

/* --- ACL Permission Grid — Collapsible Groups & Action Toggles --- */

/* Group header row — parent feature with expand/collapse chevron */
.acl-group-header {
  background: rgba(124, 58, 237, 0.06);
  border-bottom: 1px solid var(--border);
}
.acl-group-header td {
  font-weight: 600;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
[data-theme="light"] .acl-group-header {
  background: rgba(124, 58, 237, 0.05);
}

/* Chevron toggle button */
.acl-group-toggle {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0 0.35rem;
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  display: inline-block;
}
.acl-group-toggle.collapsed {
  transform: rotate(-90deg);
}

/* Collapsible children container — max-height transition */
.acl-group-children tr {
  transition: opacity 0.15s ease;
}
.acl-group-children.acl-collapsed {
  display: none;
}

/* Indentation for nested rows */
.acl-indent-1 { padding-left: 1.5rem !important; }
.acl-indent-2 { padding-left: 2.8rem !important; }
.acl-indent-3 { padding-left: 4.0rem !important; }

/* Action sub-key rows — lighter background */
.acl-action-row {
  background: rgba(255, 255, 255, 0.02);
}
.acl-action-row td:first-child {
  font-size: 0.85rem;
  color: var(--muted);
}
[data-theme="light"] .acl-action-row {
  background: rgba(0, 0, 0, 0.015);
}

/* Action toggle — Allowed / No Access pill buttons */
.acl-action-toggle {
  display: inline-flex;
  gap: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.acl-action-toggle label {
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  cursor: pointer;
  margin: 0;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.acl-action-toggle input[type="radio"] {
  display: none;
}
.acl-action-toggle input[type="radio"]:checked + label {
  background: var(--brand);
  color: #fff;
}
.acl-action-toggle .acl-deny-label {
  border-left: 1px solid var(--border);
}
.acl-action-toggle input[type="radio"].acl-deny-radio:checked + label {
  background: rgba(239, 68, 68, 0.75);
  color: #fff;
}

/* ACL table compact styling */
#acl-grid-table {
  font-size: 0.85rem;
  margin-bottom: 0;
}
#acl-grid-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
#acl-grid-table td {
  vertical-align: middle;
  padding: 0.35rem 0.5rem;
}
#acl-grid-table .form-check-input {
  cursor: pointer;
}

/* Tier explanation footer */
.acl-tier-help {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border);
}

/* Reset to Defaults button */
.acl-reset-btn {
  font-size: 0.78rem;
}

/* ═══════════════════════════════════════════════════════════════
   36. Model Releases — Dashboard, Status Badges, Template Builder
   ═══════════════════════════════════════════════════════════════ */

/* Quick action cards */
.mr-quick-action-card {
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.mr-quick-action-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  color: var(--text);
}
.mr-quick-icon {
  font-size: 1.4rem;
  color: var(--brand);
  width: 2.5rem;
  text-align: center;
  flex-shrink: 0;
}

/* Template builder — field config grid */
.mr-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.mr-field-row:last-child { border-bottom: none; }
.mr-field-label {
  font-weight: 500;
  min-width: 160px;
}
.mr-field-toggle .btn-group .btn {
  font-size: 0.78rem;
  padding: 0.2rem 0.65rem;
}
.mr-field-toggle .btn-check:checked + .btn-outline-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Legal text display */
.mr-legal-box {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  background: rgba(255,255,255,0.03);
  font-size: 0.85rem;
  line-height: 1.5;
}
[data-theme="light"] .mr-legal-box {
  background: rgba(0,0,0,0.02);
}

/* Template cards grid */
.mr-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.mr-template-card {
  border-radius: 8px;
  padding: 1.25rem;
  transition: border-color 0.2s ease;
}
.mr-template-card:hover {
  border-color: var(--brand);
}
.mr-template-card.mr-template-default {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}


/* ═══════════════════════════════════════════════════════════════
   37. Gallery Codes — Overview Page, Inline Card, Company Codes
   ═══════════════════════════════════════════════════════════════ */

/* Code display — monospace with copy button */
.gc-code-display {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
}
.gc-code-display code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.gc-copy-btn {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  border-radius: 4px;
}

/* Inline card (per-location partial) */
.gc-inline-card {
  padding: 1rem;
  border-radius: 8px;
}

/* Company code cards */
.gc-company-card {
  border-radius: 8px;
  transition: border-color 0.2s ease;
}
.gc-company-card:hover {
  border-color: var(--brand);
}
.gc-company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}


/* ═══════════════════════════════════════════════════════════════
   38. Registration — Dashboard, Search, Upload Form
   ═══════════════════════════════════════════════════════════════ */

/* Search result table — compact */
#search-result .table {
  font-size: 0.85rem;
}
#search-result .table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
#search-result code {
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Upload form — section spacing */
#uploadForm hr {
  border-color: var(--border);
  opacity: 0.5;
}

/* Upload form — import option help text indentation */
#uploadForm .form-text code {
  color: var(--brand);
  font-size: 0.82em;
}

/* CSV preview table */
#csv-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  background: rgba(255,255,255,0.02);
}
[data-theme="light"] #csv-preview { background: rgba(0,0,0,0.015); }
#csv-preview .table-responsive {
  max-height: 320px;
  overflow-y: auto;
  border-radius: 4px;
}
#csv-table { font-size: 0.82rem; margin-bottom: 0; }
#csv-table thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
#csv-table td { vertical-align: middle; }
#csv-table .csv-cell { max-width: 180px; }
#csv-table .table-warning { background: var(--c-amber-bg) !important; }

/* Confirmation page — stat lines */
.page-content .fa-check-circle.fa-3x { color: var(--c-green); }


/* ═══════════════════════════════════════════════════════════════
   39. Changelog / Release Notes
   ═══════════════════════════════════════════════════════════════ */

/* Sidebar changelog link — small font, muted, separator */
.sidebar-changelog {
  border-top: 1px solid var(--border);
  padding: 0.5rem 0 0.25rem;
  margin-top: 0.25rem;
}
.sidebar-changelog-link {
  font-size: 0.72rem !important;
  opacity: 0.7;
}
.sidebar-changelog-link:hover,
.sidebar-changelog-link.active {
  opacity: 1;
}
.sidebar-changelog-link .badge {
  font-size: 0.62rem;
  vertical-align: middle;
}

/* Badge — brand-colored pill */
.changelog-badge {
  background: var(--brand) !important;
  color: #fff !important;
  font-weight: 700;
}

/* Badge — amber pill for unpaid invoices */
.billing-badge {
  background: #f59e0b !important;
  color: #000 !important;
  font-weight: 700;
  font-size: 0.62rem;
  vertical-align: middle;
}
/* Badge — violet pill for AI generation count */
.mkt-ai-badge {
  background: var(--c-violet-bg) !important;
  color: var(--c-violet) !important;
  font-weight: 600;
  font-size: 0.62rem;
  padding: 2px 6px;
  vertical-align: middle;
  margin-left: 4px;
}

/* Collapsed sidebar — hide text + badge, icon only */
.sidebar-collapsed .sidebar-changelog-link span {
  display: none;
}
.sidebar-collapsed .sidebar-changelog {
  padding: 0.35rem 0 0.15rem;
}

/* Date group — card-like section with separator */
.changelog-date-group {
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
}
.changelog-date-group:last-child {
  border-bottom: none;
}

/* Date header row */
.changelog-date-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.changelog-date {
  font-weight: 700;
  color: var(--text);
}
.changelog-date-header .badge {
  font-size: 0.7rem;
  font-weight: 600;
}

/* Executive summary */
.changelog-summary {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

/* Entry row — flex with hover accent */
.changelog-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-left: 3px solid transparent;
  border-radius: 4px;
  transition: border-color 0.15s, background-color 0.15s;
}
.changelog-entry:hover {
  border-left-color: var(--brand);
  background: rgba(124, 58, 237, 0.04);
}
[data-theme="light"] .changelog-entry:hover {
  background: rgba(124, 58, 237, 0.06);
}

/* Entry title */
.changelog-entry-title {
  font-size: 0.9rem;
  color: var(--text);
}

/* Type badge — colored pill */
.changelog-type-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  white-space: nowrap;
  min-width: 5.2em;
  text-align: center;
}
.changelog-type-feature     { background: var(--c-purple-bg); color: var(--c-purple); }
.changelog-type-enhancement { background: var(--c-green-bg);  color: var(--c-green); }
.changelog-type-bug         { background: var(--c-red-bg);    color: var(--c-red); }

/* Detail toggle chevron */
.changelog-detail-toggle {
  color: var(--muted);
  font-size: 0.72rem;
  transition: transform 0.2s;
  text-decoration: none !important;
  flex-shrink: 0;
}
.changelog-detail-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Collapse content — indented past badge width */
.changelog-detail {
  margin-left: calc(5.2em + 1rem + 0.5rem);
  padding: 0.25rem 0 0.5rem;
}
.changelog-detail p {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* Filter buttons — brand active state */
.page-content .btn-brand {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Responsive — stack on mobile */
@media (max-width: 576px) {
  .changelog-entry {
    flex-wrap: wrap;
  }
  .changelog-detail {
    margin-left: 0.5rem;
  }
}


/* =========================================================================
   40. AI Template Generation
   ========================================================================= */

/* --- Prompt Builder Modal --- */
.ai-prompt-field {
  margin-bottom: 1rem;
}
.ai-prompt-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 0.875rem;
}
.ai-prompt-field .form-text {
  color: var(--muted);
  font-size: 0.78rem;
}
.ai-prompt-field .form-select,
.ai-prompt-field .form-control {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
}
.ai-prompt-field .form-select:focus,
.ai-prompt-field .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(124,58,237,0.2);
}
[data-theme="light"] .ai-prompt-field .form-select,
[data-theme="light"] .ai-prompt-field .form-control {
  background: rgba(0,0,0,0.03);
}

/* Elements checkbox grid */
.ai-elements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 12px;
}
.ai-elements-grid .form-check {
  padding: 6px 8px 6px 2rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  transition: background 0.15s;
}
.ai-elements-grid .form-check:hover {
  background: rgba(124,58,237,0.08);
}
[data-theme="light"] .ai-elements-grid .form-check {
  background: rgba(0,0,0,0.02);
}
[data-theme="light"] .ai-elements-grid .form-check:hover {
  background: rgba(124,58,237,0.06);
}

/* Remaining badge (compact, in toolbar) */
#ai-remaining-compact {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
#ai-remaining-badge {
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(124,58,237,0.15);
  color: var(--brand);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ai-depleted {
  background: rgba(239,68,68,0.15) !important;
  color: #ef4444 !important;
}

/* Generation spinner */
.ai-gen-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ai-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

/* --- AI Usage Page --- */

/* Usage progress bar */
.ai-usage-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}
.ai-usage-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.ai-usage-bar-fill.green  { background: #22c55e; }
.ai-usage-bar-fill.amber  { background: #f59e0b; }
.ai-usage-bar-fill.red    { background: #ef4444; }

/* Status badges */
.ai-log-status-success {
  color: #22c55e;
  font-weight: 600;
  font-size: 0.75rem;
}
.ai-log-status-error {
  color: #ef4444;
  font-weight: 600;
  font-size: 0.75rem;
}
.ai-log-status-rate_limited {
  color: #f59e0b;
  font-weight: 600;
  font-size: 0.75rem;
}

/* Expandable prompt block */
.ai-log-prompt {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.78rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  margin: 8px 0;
}
[data-theme="light"] .ai-log-prompt {
  background: rgba(0,0,0,0.04);
}

/* Prompt expand toggle */
.ai-log-expand {
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s;
  padding: 2px 6px;
  border: none;
  background: none;
}
.ai-log-expand:hover {
  color: var(--brand);
}
.ai-log-expand[aria-expanded="true"] i {
  transform: rotate(90deg);
}

/* Responsive */
@media (max-width: 768px) {
  .ai-elements-grid {
    grid-template-columns: 1fr;
  }
}


/* ── 40. Sending Hours + AI Plan Builder ──────────────────────────────
   Sending hours day grid, override table, status badges.
   AI plan builder review cards, step rows, segment pills.
   ───────────────────────────────────────────────────────────────────── */

/* --- Sending Hours --- */
.sh-day-table {
  border-collapse: separate;
  border-spacing: 0;
}
.sh-day-row td {
  vertical-align: middle;
  padding: 6px 8px;
}
.sh-day-row label {
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
}
.sh-time-select {
  width: auto;
  min-width: 110px;
  display: inline-block;
}
.sh-override-table {
  font-size: 0.9rem;
}
.sh-override-table th {
  font-weight: 600;
  border-bottom: 2px solid var(--border);
}
.sh-override-table td {
  vertical-align: middle;
}
.sh-status-badge {
  font-size: 0.75rem;
  padding: 4px 10px;
  font-weight: 500;
}
.sh-status-inherited { background: var(--c-purple-bg); color: var(--c-purple); }
.sh-status-custom    { background: var(--c-green-bg);  color: var(--c-green); }
.sh-status-disabled  { background: var(--c-gray-bg);   color: var(--muted); }
.sh-inline-editor > td {
  padding: 0 !important;
  border-top: none !important;
}

/* --- AI Plan Builder --- */
.ai-plan-card {
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.ai-plan-card:hover {
  border-color: var(--brand);
}
.ai-plan-step {
  padding: 6px 0 6px 20px;
  border-left: 2px solid var(--border);
  margin-left: 8px;
  font-size: 0.9rem;
}
.ai-plan-step i {
  color: var(--brand);
  width: 16px;
  text-align: center;
}
.ai-plan-template-brief {
  font-style: italic;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 2px;
  line-height: 1.4;
}
.ai-plan-segment-pill {
  display: inline-block;
  background: rgba(124,58,237,0.12);
  color: var(--brand);
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 500;
}
[data-theme="light"] .ai-plan-segment-pill {
  background: rgba(124,58,237,0.08);
}

/* Responsive */
@media (max-width: 576px) {
  .sh-time-select {
    min-width: 90px;
    font-size: 0.8rem;
  }
  .sh-day-row label {
    font-size: 0.85rem;
  }
}


/* ── 38b. Registration — CSV preview, search result, stat skeleton ───
   Dashboard stats, search result table, CSV upload preview/validation.
   ───────────────────────────────────────────────────────────────────── */

/* Search type selector */
.reg-search-type {
  width: auto;
}

/* Search result code display */
#search-result code {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand);
}

/* (CSV table rules merged into Section 38 above) */

/* Scheduling section — sendafter picker */
#sendafter-picker {
  max-width: 320px;
}

/* Photo pass QR code centering */
#qrcodeimg {
  min-height: 240px;
}
#qrcodeimg canvas,
#qrcodeimg img {
  border-radius: 8px;
}

/* Responsive: stack search controls on small screens */
@media (max-width: 576px) {
  #search-result .table-responsive {
    font-size: 0.8rem;
  }
  #csv-preview .table-responsive {
    max-height: 240px;
  }
}


/* =========================================================================
   41 — Ticket Management: List + Filter Bar
   ========================================================================= */

/* --- Sidebar ticket badge --- */
.sidebar-ticket-badge {
  font-size: 0.65rem;
  padding: 2px 5px;
  vertical-align: middle;
  margin-left: 4px;
}


/* =========================================================================
   42 — Ticket Detail: Thread, Reply, Triage Panel
   ========================================================================= */

/* --- Message thread --- */
.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ticket-msg {
  border-radius: 10px;
  padding: 14px 18px;
  border-left: 4px solid var(--border);
  background: var(--surface);
}

.ticket-msg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 4px;
}

.ticket-msg-sender {
  font-weight: 600;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ticket-msg-sender i {
  font-size: 0.82rem;
  opacity: 0.7;
}

.ticket-msg-time {
  font-size: 0.78rem;
  color: var(--muted);
}

.ticket-msg-body {
  font-size: 0.92rem;
  line-height: 1.55;
  word-break: break-word;
}

/* Customer messages */
.ticket-msg-customer {
  border-left-color: #64748b;
}

/* Tech support (TriPrism admin) */
.ticket-msg-tech {
  border-left-color: #1e293b;
  background: rgba(30, 41, 59, 0.08);
}
[data-theme="light"] .ticket-msg-tech {
  background: rgba(30, 41, 59, 0.05);
}

/* Account staff (photographer team) */
.ticket-msg-staff {
  border-left-color: #7c3aed;
  background: rgba(124, 58, 237, 0.06);
}
[data-theme="light"] .ticket-msg-staff {
  background: rgba(124, 58, 237, 0.04);
}

/* Internal notes */
.ticket-msg-internal {
  border-left: 4px dashed #f59e0b;
  background: rgba(245, 158, 11, 0.06);
}
[data-theme="light"] .ticket-msg-internal {
  background: rgba(245, 158, 11, 0.04);
}

/* System messages */
.ticket-msg-system {
  border-left-color: #64748b;
  background: rgba(100, 116, 139, 0.06);
  font-style: italic;
}

/* AI triage messages */
.ticket-msg-ai {
  border-left-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.06);
}
[data-theme="light"] .ticket-msg-ai {
  background: rgba(139, 92, 246, 0.04);
}

/* --- Message type badges --- */
.ticket-badge-internal,
.ticket-badge-ai { font-size: 0.68rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
.ticket-badge-internal { background: var(--c-amber); color: #1a1a2e; letter-spacing: 0.04em; }
.ticket-badge-ai       { background: #8b5cf6; color: #fff; }

/* --- Triage panel --- */
.ticket-triage-panel {
  border-left: 4px solid #8b5cf6;
}
.ticket-triage-confidence {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ticket-triage-action {
  padding: 4px 0;
  font-size: 0.88rem;
  color: var(--text);
}
.ticket-triage-action i {
  color: #8b5cf6;
  margin-right: 6px;
  font-size: 0.72rem;
}

/* --- Reply form --- */
#reply_message {
  min-height: 100px;
  resize: vertical;
}

/* --- Responsive --- */
@media (max-width: 576px) {
  .ticket-msg { padding: 10px 12px; }
  .ticket-msg-header { flex-direction: column; align-items: flex-start; }
}


/* =========================================================================
   43 — Two-Factor Authentication (2FA)
   ========================================================================= */

/* --- Method selection cards --- */
.twofa-method-card {
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.twofa-method-card:hover {
  border-color: var(--brand);
}
.twofa-method-card.active {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}
.twofa-method-card .method-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  color: var(--brand);
}
.twofa-method-card .method-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
}
.twofa-method-card .method-desc {
  font-size: 0.82rem;
  color: var(--muted);
}
.twofa-method-card .method-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.15);
  color: var(--brand);
  margin-top: 6px;
}

/* --- Code input --- */
.twofa-code-input {
  font-family: 'Courier New', monospace;
  font-size: 1.6rem;
  letter-spacing: 0.5em;
  text-align: center;
  max-width: 240px;
  margin: 0 auto;
  padding: 10px;
}

/* --- Segmented one-time-code input (otp-input.js) --- */
.otp-input {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 0 auto;
}
.otp-box {
  width: 48px;
  height: 58px;
  padding: 0;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.otp-box:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}
[data-theme="light"] .otp-box {
  background: rgba(255, 255, 255, 0.90);
}
@media (max-width: 480px) {
  .otp-input { gap: 6px; }
  .otp-box { width: 40px; height: 50px; font-size: 1.4rem; }
}

/* --- QR code container --- */
.twofa-qr-container {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  display: inline-block;
}
.twofa-qr-container canvas {
  display: block;
}

/* --- Secret key display --- */
.twofa-secret-key {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  word-break: break-all;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
}

/* --- Backup code grid --- */
.twofa-backup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-width: 400px;
  margin: 0 auto;
}
.twofa-backup-code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.twofa-backup-num {
  color: var(--muted);
  font-size: 0.8rem;
  min-width: 20px;
}

/* --- Setup panel sections --- */
.twofa-panel {
  display: none;
}
.twofa-panel.active {
  display: block;
}

/* --- Resend countdown --- */
.twofa-resend-countdown {
  font-size: 0.85rem;
  color: var(--muted);
}

/* --- 2FA status badge in team table --- */
.twofa-badge-enabled {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --- Light theme adjustments --- */
[data-theme="light"] .twofa-method-card .method-badge {
  background: rgba(124, 58, 237, 0.10);
}
[data-theme="light"] .twofa-code-input {
  background: rgba(255,255,255,0.90);
}

/* --- Responsive --- */
@media (max-width: 576px) {
  .twofa-backup-grid { grid-template-columns: 1fr; }
  .twofa-code-input { font-size: 1.3rem; letter-spacing: 0.3em; }
}


/* =========================================================================
   44 — AI Triage Dashboard
   ========================================================================= */

/* Confidence bar */
.triage-confidence-bar {
  position: relative;
  width: 80px;
  height: 20px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
}
.triage-confidence-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--brand);
  border-radius: 10px;
  transition: width 0.3s ease;
}
.triage-confidence-text {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 20px;
  color: var(--text);
}
[data-theme="light"] .triage-confidence-bar {
  background: rgba(0,0,0,0.06);
}

/* Action badges in triage detail */
.triage-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  padding: 0.25em 0.5em;
  border-radius: 0.25rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
}
.triage-action-badge i { font-size: 0.65rem; }

/* Case file display */
.triage-casefile pre {
  font-size: 0.8rem;
  max-height: 400px;
  overflow-y: auto;
  background: rgba(0,0,0,0.15);
  border-radius: 0.375rem;
  padding: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
}
[data-theme="light"] .triage-casefile pre {
  background: rgba(0,0,0,0.04);
}

/* Triage sidebar badge */
.sidebar-triage-badge {
  font-size: 0.65rem;
  vertical-align: middle;
  margin-left: 4px;
}

/* Run Triage Now results table */
#triageRunResults .table { font-size: 0.8rem; }
#triageRunResults .table td { vertical-align: middle; }

@media (max-width: 768px) {
  .triage-confidence-bar { width: 60px; }
}


/* =========================================================================
   45 — Canned Responses & Signatures
   ========================================================================= */

/* Canned response list */
.canned-response-row {
  transition: background 0.15s ease;
}
.canned-response-row:hover {
  background: rgba(124, 58, 237, 0.04);
}
[data-theme="light"] .canned-response-row:hover {
  background: rgba(124, 58, 237, 0.06);
}

/* Category badges */
.canned-category-badge {
  font-size: 0.7rem;
  padding: 0.2em 0.5em;
  border-radius: 0.2rem;
  background: rgba(124, 58, 237, 0.15);
  color: var(--brand);
}
[data-theme="light"] .canned-category-badge {
  background: rgba(124, 58, 237, 0.10);
}

/* Merge tag reference */
.merge-tag-ref {
  font-size: 0.8rem;
}
.merge-tag-ref code {
  font-size: 0.75rem;
  padding: 0.15em 0.35em;
  background: rgba(124, 58, 237, 0.10);
  border-radius: 0.2rem;
  color: var(--brand);
}

/* Signature preview in table */
.signature-preview {
  max-height: 80px;
  overflow: hidden;
  font-size: 0.8rem;
  white-space: pre-wrap;
  color: var(--muted);
}

/* Location badge on canned responses */
.canned-location-badge {
  font-size: 0.65rem;
  padding: 0.15em 0.4em;
  border-radius: 0.2rem;
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}
[data-theme="light"] .canned-location-badge {
  background: rgba(59, 130, 246, 0.10);
  color: #2563eb;
}


/* =========================================================================
   46 — Smart Suggestions / Quick Context (Ticket Detail)
   ========================================================================= */

/* Quick Context card on ticket detail */
.ticket-quick-context {
  border-left: 3px solid var(--brand);
}
.ticket-quick-context .card-header {
  cursor: pointer;
  user-select: none;
}

/* Suggestion rows */
.qc-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.85rem;
}
.qc-row + .qc-row {
  border-top: 1px solid var(--border);
}

/* Status icons */
.qc-icon-ok     { color: #22c55e; }
.qc-icon-warn   { color: #f59e0b; }
.qc-icon-error  { color: #ef4444; }
.qc-icon-info   { color: #3b82f6; }

[data-theme="light"] .qc-icon-ok     { color: #16a34a; }
[data-theme="light"] .qc-icon-warn   { color: #d97706; }
[data-theme="light"] .qc-icon-error  { color: #dc2626; }
[data-theme="light"] .qc-icon-info   { color: #2563eb; }

/* Gap analysis alert */
.qc-gap-alert {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
[data-theme="light"] .qc-gap-alert {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.20);
}

/* One-click action buttons in ticket detail */
.ticket-quick-actions .btn {
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
}

/* Canned response dropdown on reply form */
.canned-response-select {
  max-width: 300px;
  font-size: 0.8rem;
}

/* Suggested code highlight */
.qc-suggested-code {
  display: inline-block;
  padding: 0.2em 0.5em;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--brand);
}

/* AI triage panel on ticket */
.ticket-triage-panel {
  border-left: 3px solid #3b82f6;
}

/* Signature notice */
.signature-notice {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

@media (max-width: 576px) {
  .qc-row { flex-wrap: wrap; }
  .canned-response-select { max-width: 100%; }
}


/* =========================================================================
   47 — Ticket View: Thread, Sidebar, Summernote, Badges, Quick Context
   Two-column layout, message thread, reply card, hold badge, timer badges,
   status badges, quick-context items, Summernote dark/light theming.
   ========================================================================= */

/* --- Two-column layout --- */
.ticket-sidebar {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.ticket-reply-card {
  border-radius: 10px;
  padding: 16px;
}

/* --- Message thread --- */
.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ticket-message {
  border-radius: 10px;
  padding: 14px 18px;
  border-left: 4px solid var(--border);
  background: var(--surface);
}
.ticket-message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.85rem;
}
.ticket-message-header strong {
  font-weight: 600;
}
.ticket-message-header .text-muted {
  font-size: 0.78rem;
}
.ticket-message-body {
  font-size: 0.92rem;
  line-height: 1.55;
  word-break: break-word;
}

/* Inline preview thumbnail for browser-native image attachments (jpeg/png/
   gif/webp). HEIC/HEIF photos are never given a thumbnail — they render as a
   download link instead — so this only ever wraps a decodable image. */
.ticket-attachment-thumb {
  max-width: 160px;
  max-height: 120px;
  width: auto;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: cover;
  display: block;
}

/* One reported-photo tile in the ticket "Reported Photos" panel. */
.report-photo-cell {
  max-width: 180px;
}

/* Staff messages — brand accent, slightly tinted */
.ticket-message-staff {
  border-left-color: #7c3aed;
  background: rgba(124, 58, 237, 0.06);
}
[data-theme="light"] .ticket-message-staff {
  background: rgba(124, 58, 237, 0.04);
}

/* Customer messages — default surface */
.ticket-message-customer {
  border-left-color: #64748b;
  background: var(--surface);
}

/* Internal notes — dashed amber border, amber tint */
.ticket-message-internal {
  border-left: 4px dashed #f59e0b;
  background: rgba(245, 158, 11, 0.06);
}
[data-theme="light"] .ticket-message-internal {
  background: rgba(245, 158, 11, 0.04);
}

/* Summernote dark/light theming retired with the editor consolidation
   (2026-05-30). Editor surfaces now use TinyMCE 7, which ships its own
   skin (oxide / oxide-dark) wired up via document.dataset.theme in
   application/views/layout/_tinymce7_init.php. */

/* --- Merge tag snippets --- */
.ticket-merge-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.ticket-merge-tag-btn {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  transition: border-color 0.15s, color 0.15s;
}
.ticket-merge-tag-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* --- Reply footer --- */
.ticket-reply-footer {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
}
.ticket-reply-status {
  max-width: 200px;
  font-size: 0.82rem;
}

/* --- Hold badge (amber dashed) --- */
.ticket-hold-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 4px;
  border: 1px dashed var(--c-amber); background: var(--c-amber-bg); color: var(--c-amber);
}

/* --- Timer badges --- */
.ticket-timer-followup,
.ticket-timer-closing {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 600; padding: 2px 7px; border-radius: 4px;
}
.ticket-timer-followup { background: var(--c-blue-bg); color: var(--c-blue); }
.ticket-timer-closing  { background: var(--c-red-bg);  color: var(--c-red); }

/* --- Quick context item classes --- */
.qc-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0;
  font-size: 0.84rem;
}
.qc-item + .qc-item {
  border-top: 1px solid var(--border);
}

.qc-good {
  color: #22c55e;
}
.qc-good i { color: #22c55e; }

.qc-bad {
  color: #ef4444;
}
.qc-bad i { color: #ef4444; }

.qc-warn {
  color: #f59e0b;
}
.qc-warn i { color: #f59e0b; }

.qc-alert {
  color: #ef4444;
  font-weight: 700;
}
.qc-alert i { color: #ef4444; }

.qc-suggest {
  color: #3b82f6;
}
.qc-suggest i { color: #3b82f6; }

/* Light theme quick context overrides */
[data-theme="light"] .qc-good,
[data-theme="light"] .qc-good i { color: #16a34a; }
[data-theme="light"] .qc-bad,
[data-theme="light"] .qc-bad i { color: #dc2626; }
[data-theme="light"] .qc-warn,
[data-theme="light"] .qc-warn i { color: #d97706; }
[data-theme="light"] .qc-alert,
[data-theme="light"] .qc-alert i { color: #dc2626; }
[data-theme="light"] .qc-suggest,
[data-theme="light"] .qc-suggest i { color: #2563eb; }

/* --- Responsive: sidebar stacks above thread below lg --- */
@media (max-width: 991.98px) {
  .ticket-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
    margin-bottom: 16px;
  }
}
@media (max-width: 576px) {
  .ticket-message { padding: 10px 12px; }
  .ticket-message-header { flex-direction: column; align-items: flex-start; }
  .ticket-reply-card { padding: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   47. SUPPORT TICKETS (Photographer → TriPrism)
   ═══════════════════════════════════════════════════════════════ */

.sup-ticket-number {
  font-size: 0.8rem;
  color: var(--brand);
  background: rgba(124, 58, 237, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}
.sup-ticket-subject {
  font-weight: 500;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sup-subject-cell {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Status badges (solid) --- */
.sup-status-new,
.sup-status-progress,
.sup-status-awaiting,
.sup-status-resolved,
.sup-status-closed { font-size: 0.7rem; padding: 3px 8px; border-radius: 4px; }
.sup-status-new      { background: var(--c-blue);   color: #fff; }
.sup-status-progress { background: var(--c-amber);  color: #1a1a2e; }
.sup-status-awaiting { background: var(--c-purple); color: #fff; }
.sup-status-resolved { background: var(--c-green);  color: #fff; }
.sup-status-closed   { background: var(--c-slate);  color: #fff; }

/* --- Priority badges (tinted) --- */
.sup-priority-normal,
.sup-priority-high,
.sup-priority-urgent { font-size: 0.7rem; padding: 2px 7px; border-radius: 4px; text-transform: capitalize; }
.sup-priority-normal { background: var(--c-gray-bg);  color: var(--muted); }
.sup-priority-high   { background: var(--c-amber-bg); color: var(--c-amber); font-weight: 600; }
.sup-priority-urgent { background: var(--c-red-bg);   color: var(--c-red); font-weight: 700; text-transform: uppercase; }

/* --- Category badge --- */
.sup-cat-badge {
  background: rgba(124, 58, 237, 0.1);
  color: var(--brand);
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 4px;
}

/* --- Sidebar badge --- */
.sup-sidebar-badge {
  background: var(--brand);
  color: #fff;
  font-size: 0.65rem;
  min-width: 18px;
}

.pending-sidebar-badge {
  background: var(--c-amber);
  color: #fff;
  margin-left: auto;
}

/* --- Conversation thread --- */
.sup-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sup-message {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.sup-message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sup-message-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
}

/* Customer message */
.sup-message-customer {
  background: rgba(107, 114, 128, 0.06);
  border-left: 3px solid #6b7280;
}
[data-theme="light"] .sup-message-customer {
  background: rgba(107, 114, 128, 0.05);
}

/* Admin/staff message */
.sup-message-admin {
  background: rgba(124, 58, 237, 0.06);
  border-left: 3px solid #7c3aed;
}
[data-theme="light"] .sup-message-admin {
  background: rgba(124, 58, 237, 0.05);
}

/* Internal note */
.sup-message-internal {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #f59e0b;
  border-style: dashed;
  border-left-style: solid;
}
[data-theme="light"] .sup-message-internal {
  background: rgba(245, 158, 11, 0.06);
}

/* Forward record */
.sup-message-forward {
  background: rgba(217, 119, 6, 0.06);
  border-left: 3px solid #d97706;
  border-style: dashed;
  border-left-style: solid;
}
[data-theme="light"] .sup-message-forward {
  background: rgba(217, 119, 6, 0.04);
}

/* Author badges */
.sup-author-admin {
  background: #7c3aed;
  color: #fff;
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 3px;
}
.sup-author-internal {
  background: #f59e0b;
  color: #1a1a2e;
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 3px;
}
.sup-author-forward {
  background: #d97706;
  color: #fff;
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 3px;
}

/* --- Email chips (quick-pick) --- */
.sup-email-chip {
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 20px;
}
.sup-email-chip:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* --- Satisfaction rating buttons --- */
.sup-rate-btn {
  font-size: 0.85rem;
  padding: 4px 16px;
  border-radius: 20px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .sup-ticket-subject { max-width: 180px; }
  .sup-subject-cell { max-width: 150px; }
  .sup-message-header { font-size: 0.8rem; }
}


/* =========================================================================
   48 — Ticket Features: Collision Detection, Merge/Split, Manual Create
   ========================================================================= */

/* --- Agent Collision Banner --- */
.collision-banner {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  background: rgba(59, 130, 246, 0.10);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #3b82f6;
}
.collision-banner.collision-has-typing {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.25);
  color: #22c55e;
}
[data-theme="light"] .collision-banner {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.18);
  color: #2563eb;
}
[data-theme="light"] .collision-banner.collision-has-typing {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.18);
  color: #16a34a;
}
.collision-viewing {
  color: #3b82f6;
}
.collision-typing {
  color: #22c55e;
}
[data-theme="light"] .collision-viewing { color: #2563eb; }
[data-theme="light"] .collision-typing  { color: #16a34a; }

/* --- Agent Count Badge (ticket list) --- */
.ticket-agent-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.7rem; font-weight: 600; padding: 2px 6px; border-radius: 4px;
  background: var(--c-blue-bg); color: var(--c-blue);
}

/* --- Merged Ticket Badge --- */
.ticket-merged-badge {
  font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: 4px;
  background: var(--c-gray-bg); color: var(--c-gray); border: 1px dashed rgba(107,114,128,0.40);
}

/* Dimmed row for merged tickets */
.ticket-row-merged td { opacity: 0.55; }
.ticket-row-merged:hover td { opacity: 0.8; }

/* --- Agent-Created Badge --- */
.ticket-agent-created-badge {
  font-size: 0.6rem; font-weight: 600; padding: 1px 5px; border-radius: 3px;
  background: var(--c-violet-bg); color: var(--brand); vertical-align: middle; margin-left: 4px;
}

/* --- Duplicate Cluster Badge --- */
.ticket-dup-badge {
  font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: 4px;
  background: var(--c-amber-bg); color: var(--c-amber); border: 1px solid rgba(245,158,11,0.30); white-space: nowrap;
}

/* --- Duplicate Summary Bar (above ticket table) --- */
.dup-summary-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin-bottom: 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  background: rgba(245, 158, 11, 0.10);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.20);
}
[data-theme="light"] .dup-summary-bar {
  background: rgba(245, 158, 11, 0.08);
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.18);
}

/* --- Duplicate Detection Card --- */
#duplicates-card .badge.bg-secondary {
  font-size: 0.65rem;
  font-weight: 500;
}

/* --- Split Mode --- */
.split-checkbox {
  cursor: pointer;
  accent-color: var(--brand);
}
.ticket-message:has(.split-checkbox:checked) {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* Split sticky bar */
.split-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  padding: 12px 24px;
  background: rgba(124, 58, 237, 0.95);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.9rem;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
}
[data-theme="light"] .split-sticky-bar {
  background: rgba(124, 58, 237, 0.92);
}

/* --- Merge Modal --- */
#mergeModalBody dl {
  font-size: 0.85rem;
}
#mergeModalBody dt {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 0.5rem;
}
#mergeModalBody dd {
  margin-bottom: 0.25rem;
}

/* Customer name in ticket list */
.ticket-customer-name {
  font-weight: 500;
}
.ticket-subject {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Customer info DL in ticket detail sidebar */
.ticket-customer-dl dt {
  float: left;
  width: 110px;
  font-weight: 500;
  color: var(--muted);
  clear: left;
}
.ticket-customer-dl dd {
  margin-left: 115px;
  margin-bottom: 0.35rem;
  word-break: break-word;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .ticket-subject { max-width: 160px; }
  .collision-banner { font-size: 0.78rem; }
}
@media (max-width: 576px) {
  .split-sticky-bar { padding: 10px 16px; font-size: 0.8rem; }
}


/* =========================================================================
   49 — Customer 360° Lookup
   Search bar card, stat card grid, detail tables, loading states,
   photo count highlight, wave-2 label, dark + light theme variants.
   ========================================================================= */

/* --- Search card --- */
.cs360-search-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 1rem;
}
.cs360-search-card .card-body { padding: 1.25rem; }

/* --- Channel sections (vertical list) --- */
.cs360-section {
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.cs360-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
}
.cs360-section-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cs360-section-icon {
  font-size: 1rem;
  color: var(--brand);
  width: 1.25rem;
  text-align: center;
}
.cs360-section-label {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
}
.cs360-section-error {
  border-left-color: var(--c-red);
}
.cs360-section-error .cs360-section-icon { color: var(--c-red); }

/* Wave-2 "via code" indicator */
.cs360-wave2-badge {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--muted);
  padding-left: 0.25rem;
}

/* No-results message */
.cs360-no-results {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Summary bar after search */
.cs360-summary {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

/* --- Tables inside sections --- */
.cs360-table code {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
}
.cs360-photo-count {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand);
}
[data-theme="light"] .cs360-photo-count { color: #6d28d9; }

.cs360-truncated {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 0.5rem;
  padding: 4px 0;
}

/* Status badges */
.cs360-status { font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.cs360-status-sent    { background: var(--c-green-bg); color: var(--c-green); }
.cs360-status-queued  { background: var(--c-blue-bg);  color: var(--c-blue); }
.cs360-status-error   { background: var(--c-red-bg);   color: var(--c-red); }
.cs360-status-pending { background: var(--c-amber-bg); color: var(--c-amber); }

/* Star rating in feedback */
.cs360-stars { color: #f59e0b; letter-spacing: 1px; }
[data-theme="light"] .cs360-stars { color: #d97706; }

/* Error message in section */
.cs360-section .cs360-error-msg {
  font-size: 0.84rem;
  color: var(--c-red);
  padding: 8px 1rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .cs360-table { font-size: 0.8rem; }
  .cs360-section-label { font-size: 0.76rem; }
}
@media (max-width: 576px) {
  .cs360-search-card .card-body { padding: 1rem; }
  .cs360-section-header { padding: 0.5rem 0.75rem; }
  .cs360-table { font-size: 0.76rem; }
}


/* =========================================================================
   50 — Email Analytics, Suppressions & A/B Testing
   Campaign analytics delivery funnel, CSS bar charts, suppression badges,
   A/B variant editor, winner badge, dark + light theme variants.
   ========================================================================= */

/* --- Delivery funnel (horizontal bar visualization) --- */
.analytics-funnel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 1.5rem;
}
.analytics-funnel-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.analytics-funnel-label {
  min-width: 90px;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: right;
  color: var(--muted);
}
.analytics-funnel-bar-bg {
  flex: 1;
  height: 28px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.analytics-funnel-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
  min-width: 2px;
}
.analytics-funnel-bar.bar-sent      { background: var(--brand); }
.analytics-funnel-bar.bar-delivered { background: #3b82f6; }
.analytics-funnel-bar.bar-opened    { background: #22c55e; }
.analytics-funnel-bar.bar-clicked   { background: #f59e0b; }
.analytics-funnel-count {
  min-width: 60px;
  font-size: 0.82rem;
  font-weight: 600;
}

/* --- CSS bar chart (timeline, no JS library needed) --- */
.analytics-bar {
  display: inline-block;
  min-width: 4px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
}
.analytics-bar.bar-opens   { background: #22c55e; }
.analytics-bar.bar-clicks  { background: #f59e0b; }
.analytics-bar-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
  margin-top: 4px;
}

/* --- Rate display (large number) --- */
.analytics-rate {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.analytics-rate-label {
  font-size: 0.78rem;
  color: var(--muted);
}

/* --- Suppression reason badges --- */
.suppression-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
}
.suppression-badge-hard_bounce { background: var(--c-red-bg);   color: var(--c-red);   border: 1px solid rgba(239,68,68,0.3); }
.suppression-badge-spam_report { background: var(--c-amber-bg); color: var(--c-amber); border: 1px solid rgba(245,158,11,0.3); }
.suppression-badge-unsubscribe { background: var(--c-amber-bg); color: var(--c-amber); border: 1px solid rgba(245,158,11,0.3); }
.suppression-badge-dropped     { background: var(--c-gray-bg);  color: var(--c-gray);  border: 1px solid rgba(156,163,175,0.3); }
.suppression-badge-manual      { background: var(--c-slate-bg); color: var(--c-slate); border: 1px solid rgba(107,114,128,0.3); }

/* --- A/B test variant editor --- */
.variant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.variant-row:last-child {
  border-bottom: none;
}
.variant-label-input {
  width: 100px;
  font-weight: 600;
}
.variant-subject-input {
  flex: 1;
}

/* --- A/B test winner badge --- */
.variant-winner {
  display: inline-block; padding: 2px 10px; border-radius: 4px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--c-green-bg); color: var(--c-green); border: 1px solid rgba(34,197,94,0.3);
}

/* --- A/B test status badges --- */
.abtest-status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; }
.abtest-status-draft      { background: var(--c-gray-bg);  color: var(--c-gray); }
.abtest-status-running    { background: var(--c-blue-bg);  color: var(--c-blue); }
.abtest-status-evaluating { background: var(--c-amber-bg); color: var(--c-amber); }
.abtest-status-completed  { background: var(--c-green-bg); color: var(--c-green); }
.abtest-status-cancelled  { background: var(--c-red-bg);   color: var(--c-red); }

/* --- A/B variant comparison table --- */
.variant-winner-row td {
  background: rgba(34, 197, 94, 0.06);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .analytics-funnel-label { min-width: 70px; font-size: 0.76rem; }
  .analytics-funnel-count { min-width: 40px; font-size: 0.76rem; }
  .variant-row { flex-direction: column; align-items: stretch; }
  .variant-label-input { width: 100%; }
}
@media (max-width: 576px) {
  .analytics-rate { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   49. Canned Responses Management
   ═══════════════════════════════════════════════════════════════════ */
.canned-body-preview {
  max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.canned-scope-global,
.canned-scope-location { font-size: 0.7rem; padding: 2px 7px; border-radius: 4px; }
.canned-scope-global   { background: var(--c-blue-bg);  color: var(--c-blue);  border: 1px solid rgba(59,130,246,0.25); }
.canned-scope-location { background: var(--c-green-bg); color: var(--c-green); border: 1px solid rgba(34,197,94,0.25); }
/* Legacy editor modal overrides retired 2026-05-30 with the editor
   consolidation. TinyMCE 7 handles its own modal styling. */


/* ═══════════════════════════════════════════════════════════════════
   51. API Integrations — Dashboard, Builder, Run History, Run Detail
   ═══════════════════════════════════════════════════════════════════ */

/* ── Disclaimer banner ── */
.integ-disclaimer {
  border-left: 4px solid #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.75rem 1rem;
}
[data-theme="light"] .integ-disclaimer {
  background: rgba(245, 158, 11, 0.10);
}

.integ-log-success { border-left: 3px solid rgba(34, 197, 94, 0.5); }
.integ-log-error   { border-left: 3px solid rgba(239, 68, 68, 0.5); }
.integ-log-skipped  { border-left: 3px solid rgba(245, 158, 11, 0.5); }

/* ── Expand/collapse detail button ── */
.integ-expand-btn {
  padding: 2px 6px; font-size: 0.7rem; line-height: 1;
  transition: transform 0.2s ease;
}
.integ-expand-btn[aria-expanded="true"] { transform: rotate(180deg); }

/* ── Payload/response preview blocks ── */
.integ-preview-json {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  padding: 0.5rem;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.75rem;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
[data-theme="light"] .integ-preview-json {
  background: rgba(0,0,0,0.05);
}
.integ-preview-csv {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  padding: 0.5rem;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.75rem;
  max-height: 200px;
  overflow-x: auto;
  white-space: pre;
}
[data-theme="light"] .integ-preview-csv {
  background: rgba(0,0,0,0.05);
}

/* ── Builder: transport selector cards ── */
.integ-transport-card {
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.integ-transport-card:hover {
  border-color: rgba(124, 58, 237, 0.3);
}
.integ-transport-card.selected {
  border-color: var(--brand);
  background: rgba(124, 58, 237, 0.08);
}
.integ-transport-card i {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* ── Builder: field mapping rows ── */
.integ-field-mapping-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}
[data-theme="light"] .integ-field-mapping-row {
  background: rgba(0,0,0,0.03);
}
.integ-field-mapping-row .form-select,
.integ-field-mapping-row .form-control {
  font-size: 0.8rem;
}

/* ── Builder: location mapping rows ── */
.integ-location-mapping-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

/* ── Terms acceptance ── */
.integ-terms-accepted {
  color: #22c55e;
  font-weight: 600;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .integ-field-mapping-row { flex-direction: column; }
  .integ-transport-card { padding: 0.75rem; }
  .integ-transport-card i { font-size: 1.2rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   52. Email Analytics & Queue — Stat cards, status badges, filters,
       infinite scroll table, bulk actions, history offcanvas
   ═══════════════════════════════════════════════════════════════════ */

/* Period buttons */
.email-period-btn {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.email-period-btn:hover {
  border-color: var(--brand);
  color: var(--text);
}
.email-period-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Sortable column headers */
.email-th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.email-th-sortable:hover {
  color: var(--brand);
}
.email-th-sortable .sort-icon {
  font-size: 0.65rem;
  margin-left: 3px;
  opacity: 0.4;
}
.email-th-sortable.active .sort-icon {
  opacity: 1;
  color: var(--brand);
}

/* ── Feedback & entitlement badges ── */
.email-feedback-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}
[data-theme="light"] .email-feedback-badge {
  background: rgba(245, 158, 11, 0.10);
  color: #b45309;
}
.email-entitlement-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}
[data-theme="light"] .email-entitlement-badge {
  background: rgba(34, 197, 94, 0.10);
  color: #15803d;
}

/* ── Bulk action bar ── */
.email-bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.20);
  border-radius: 6px;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
[data-theme="light"] .email-bulk-bar {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.15);
}

/* ── Infinite scroll sentinel ── */
#email-sentinel .spinner-border {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── History offcanvas ── */
.email-history-item {
  transition: background 0.15s;
}
.email-history-item:hover {
  background: rgba(124, 58, 237, 0.04);
}
[data-theme="light"] .email-history-item:hover {
  background: rgba(124, 58, 237, 0.06);
}

/* ── Email detail view ── */
.email-detail-dl dt {
  font-size: 0.8rem;
  color: var(--muted);
}
.email-detail-dl dd {
  font-size: 0.85rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .email-bulk-bar { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
 * 53.  GDPR Data Privacy — Profile, Confirm, History, Search
 * ═══════════════════════════════════════════════════════════ */

/* ── Channel cards on profile page ── */
.gdpr-channel-card { border-radius: 0.5rem; margin-bottom: 0.75rem; overflow: hidden; }
.gdpr-channel-card .card-header { cursor: pointer; padding: 0.6rem 1rem; display: flex; align-items: center; gap: 0.5rem; background: transparent; border-bottom: 1px solid var(--border); }
.gdpr-channel-card .card-header:hover { background: rgba(124,58,237,0.04); }
.gdpr-channel-card .card-header .channel-icon { width: 28px; text-align: center; color: var(--brand); font-size: 0.9rem; }
.gdpr-channel-card .card-header .channel-label { font-weight: 600; font-size: 0.85rem; flex: 1; }
.gdpr-channel-card .card-header .channel-count { font-weight: 700; font-size: 0.9rem; }
.gdpr-channel-card .card-header .channel-toggle { transition: transform 0.2s; font-size: 0.75rem; color: var(--muted); }
.gdpr-channel-card .card-header[aria-expanded="true"] .channel-toggle { transform: rotate(180deg); }
.gdpr-channel-card.gdpr-empty { opacity: 0.5; }
.gdpr-channel-card.gdpr-empty .card-header { cursor: default; }

/* ── Delete card accent ── */
.gdpr-delete-card { border-left: 3px solid #ef4444; }

/* ── Dry-run summary table ── */
.gdpr-dryrun-table { font-size: 0.85rem; margin-bottom: 0; }
.gdpr-dryrun-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.gdpr-dryrun-table .gdpr-row-delete { border-left: 3px solid #ef4444; }
.gdpr-dryrun-table .gdpr-row-anonymize { border-left: 3px solid #f59e0b; }

/* ── Search button on Customer 360° userdata rows ── */
.gdpr-action-btn { padding: 0.15rem 0.4rem; font-size: 0.75rem; line-height: 1; border-radius: 4px; }
.gdpr-action-btn:hover { background: rgba(245,158,11,0.15); }

/* ── Legal notice card ── */
.gdpr-legal-card { font-size: 0.8rem; color: var(--muted); border-left: 3px solid var(--brand); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .gdpr-channel-card .card-header { flex-wrap: wrap; }
}


/* ═══════════════════════════════════════════════════════════════════
   55. CUSTOMERS — Dashboard, List, Detail
   ═══════════════════════════════════════════════════════════════════ */

.text-brand { color: var(--brand); }
.text-purple { color: #a855f7; }

/* ── Activity Badges ── */
.cust-badge-email,
.cust-badge-text,
.cust-badge-rating,
.cust-badge-entitlement,
.cust-badge-order,
.cust-badge-image { font-size: 0.7rem; font-weight: 600; padding: 0.2em 0.5em; border-radius: 4px; }
.cust-badge-email       { background: var(--c-blue-bg);   color: var(--c-blue); }
.cust-badge-text        { background: var(--c-green-bg);  color: var(--c-green); }
.cust-badge-rating      { background: var(--c-amber-bg);  color: var(--c-amber); }
.cust-badge-entitlement { background: var(--c-purple-bg); color: var(--c-purple); }
.cust-badge-order       { background: var(--c-green-bg);  color: var(--c-green); }
.cust-badge-image       { background: var(--c-violet-bg); color: var(--c-violet); }

/* ── Source Badges ── */
.cust-badge-source-email,
.cust-badge-source-order,
.cust-badge-source-ticket,
.cust-badge-source-text,
.cust-badge-source-feedback,
.cust-badge-source-modelrelease { font-size: 0.65rem; font-weight: 600; padding: 0.15em 0.4em; border-radius: 3px; }
.cust-badge-source-email        { background: var(--c-blue-bg);   color: var(--c-blue); margin-left: 0.35em; vertical-align: middle; }
.cust-badge-source-order        { background: var(--c-green-bg);  color: var(--c-green); }
.cust-badge-source-ticket       { background: var(--c-blue-bg);   color: var(--c-blue); }
.cust-badge-source-text         { background: var(--c-green-bg);  color: var(--c-green); }
.cust-badge-source-feedback     { background: var(--c-amber-bg);  color: var(--c-amber); }
.cust-badge-source-modelrelease { background: var(--c-purple-bg); color: var(--c-purple); }

.cust-loc-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 500;
  padding: 0.15em 0.5em; border-radius: 4px;
  background: rgba(124,58,237,0.08); color: var(--brand);
}

/* ── Detail Page Header ── */
.cust-detail-header { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.cust-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(124,58,237,0.12); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}

/* ── Detail Scrollable Containers ── */
.cust-detail-scroll { max-height: 350px; overflow-y: auto; }
.cust-detail-scroll-sm { max-height: 250px; overflow-y: auto; }

/* ── Email / Phone Badges ── */
.cd-email-badge, .cd-phone-badge {
  font-size: 0.78rem; font-weight: 500; padding: 0.3em 0.6em;
}
.cd-email-badge .btn-close, .cd-phone-badge .btn-close {
  filter: brightness(0) invert(1); opacity: 0.6; vertical-align: middle;
}
.cd-email-badge .btn-close:hover, .cd-phone-badge .btn-close:hover { opacity: 1; }

/* ── Notes ── */
.cd-note { transition: background 0.15s; }
.cd-note:hover { background: rgba(124,58,237,0.04); }

/* ── Year Star Ratings ── */
.cd-year-rating { white-space: nowrap; }
.cd-star { cursor: pointer; transition: color 0.15s, transform 0.15s; }
.cd-star:hover { transform: scale(1.25); color: #f59e0b !important; }
.cd-star[aria-disabled="true"] { cursor: default; pointer-events: none; }

/* ── Detail Table Code Cells ── */
.cust-detail-scroll code, .cust-detail-scroll-sm code {
  font-size: 0.78rem; color: var(--brand); background: rgba(124,58,237,0.06);
  padding: 0.1em 0.35em; border-radius: 3px;
}

/* ── Merge Modal — Primary / Secondary Comparison ── */
.cust-merge-primary { border-left: 3px solid #22c55e; }
.cust-merge-secondary { border-left: 3px solid #ef4444; }
.cust-merge-primary .card-header { background: rgba(34,197,94,0.08); }
.cust-merge-secondary .card-header { background: rgba(239,68,68,0.08); }
.cust-merge-swap {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, background 0.2s;
}
.cust-merge-swap:hover { transform: rotate(180deg); background: rgba(124,58,237,0.12); }

/* ── Duplicate Detection Card ── */
.cust-dup-row { transition: background 0.15s; }
.cust-dup-row:hover { background: rgba(245,158,11,0.06); }
.cust-dup-reason {
  font-size: 0.65rem; font-weight: 600; padding: 0.15em 0.45em; border-radius: 3px;
  background: rgba(245,158,11,0.15); color: #f59e0b;
}

/* ── Split Mode ── */
.cust-split-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
  background: var(--surface); border-top: 2px solid #06b6d4;
  backdrop-filter: blur(16px); box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
}
.cust-split-check { cursor: pointer; }
#cd-codes-table tr:has(.cust-split-check:checked) { background: rgba(6,182,212,0.08); }

/* ── Merge History ── */
.cust-merge-history-row { transition: background 0.15s; }
.cust-merge-history-row:hover { background: rgba(124,58,237,0.04); }

/* ── Light Theme ── */
[data-theme="light"] .cust-detail-header { background: rgba(255,255,255,0.80); }
[data-theme="light"] .cust-loc-badge { background: rgba(124,58,237,0.1); }
[data-theme="light"] .cd-email-badge .btn-close, [data-theme="light"] .cd-phone-badge .btn-close { filter: none; }
[data-theme="light"] .cd-note:hover { background: rgba(124,58,237,0.06); }
[data-theme="light"] .cust-detail-scroll code, [data-theme="light"] .cust-detail-scroll-sm code {
  background: rgba(124,58,237,0.08); color: #6d28d9;
}
[data-theme="light"] .cust-merge-primary .card-header { background: rgba(34,197,94,0.1); }
[data-theme="light"] .cust-merge-secondary .card-header { background: rgba(239,68,68,0.1); }
[data-theme="light"] .cust-dup-row:hover { background: rgba(245,158,11,0.08); }
[data-theme="light"] .cust-dup-reason { background: rgba(245,158,11,0.18); color: #d97706; }
[data-theme="light"] .cust-split-bar { background: rgba(255,255,255,0.90); box-shadow: 0 -4px 12px rgba(0,0,0,0.1); }
[data-theme="light"] #cd-codes-table tr:has(.cust-split-check:checked) { background: rgba(6,182,212,0.1); }
[data-theme="light"] .cust-merge-history-row:hover { background: rgba(124,58,237,0.06); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .cust-avatar { width: 44px; height: 44px; }
  .cust-avatar .fa-2x { font-size: 1.25rem; }
  .cust-detail-scroll { max-height: 280px; }
  .cust-detail-scroll-sm { max-height: 200px; }
  .cust-split-bar .d-flex { flex-wrap: wrap; gap: 0.5rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   56. KNOWLEDGE BASE — Help Center
   ═══════════════════════════════════════════════════════════════════ */

/* ── Search ── */
.kb-search-wrap { max-width: 600px; }
.kb-search-wrap .form-control-lg {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 0.75rem 1rem;
}
.kb-search-wrap .form-control-lg::placeholder { color: var(--muted); }
.kb-search-wrap .form-control-lg:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}
.kb-search-results {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0 0 10px 10px; max-height: 400px; overflow-y: auto;
  z-index: 100; backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
.kb-search-result {
  display: block; padding: 0.65rem 1rem; color: var(--text);
  text-decoration: none; border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.kb-search-result:last-child { border-bottom: none; }
.kb-search-result:hover { background: rgba(124,58,237,0.08); color: var(--text); }
.kb-search-empty { color: var(--muted); font-style: italic; }

/* ── Category Cards (Home) ── */
.kb-category-card {
  border-radius: 10px; padding: 1.25rem;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  height: 100%;
}
.kb-category-card:hover {
  transform: translateY(-3px); border-color: var(--brand);
  box-shadow: 0 8px 24px rgba(124,58,237,0.12);
}
.kb-category-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(124,58,237,0.12); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.kb-category-icon-lg { width: 48px; height: 48px; font-size: 1.2rem; }

/* ── Article List (Category) ── */
.kb-article-list { display: flex; flex-direction: column; gap: 0; }
.kb-article-row {
  display: block; padding: 1rem 1.25rem; color: var(--text);
  text-decoration: none; border-bottom: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
  border-left: 3px solid transparent;
}
.kb-article-row:first-child { border-top: 1px solid var(--border); }
.kb-article-row:hover {
  background: rgba(124,58,237,0.05); border-left-color: var(--brand);
  color: var(--text);
}
.kb-article-icon {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(124,58,237,0.08); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; flex-shrink: 0; margin-top: 2px;
}

/* ── Article Card ── */
.kb-article-card {
  border-radius: 10px;
}

/* ── Article Body Typography ── */
.kb-article-body h4 { font-size: 1.15rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.kb-article-body h5 { font-size: 1rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.4rem; }
.kb-article-body p { margin-bottom: 0.75rem; line-height: 1.65; }
.kb-article-body ul, .kb-article-body ol { margin-bottom: 0.75rem; padding-left: 1.5rem; }
.kb-article-body li { margin-bottom: 0.3rem; line-height: 1.55; }
.kb-article-body code {
  background: rgba(124,58,237,0.08); color: var(--brand);
  padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.88em;
}
.kb-article-body table { width: 100%; margin-bottom: 1rem; }
.kb-article-body table th, .kb-article-body table td {
  padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border);
}
.kb-article-body table th { font-weight: 600; }

/* ── Breadcrumb ── */
.kb-breadcrumb { font-size: 0.875rem; }
.kb-breadcrumb a { color: var(--brand); text-decoration: none; }
.kb-breadcrumb a:hover { text-decoration: underline; }

/* ── Related Articles Sidebar ── */
.kb-related-card {
  border-radius: 10px;
}
.kb-related-link {
  display: block; padding: 0.5rem 0.65rem; border-radius: 6px;
  color: var(--text); text-decoration: none;
  transition: background 0.15s;
}
.kb-related-link:hover { background: rgba(124,58,237,0.06); color: var(--text); }
.kb-related-active {
  background: rgba(124,58,237,0.1); border-left: 2px solid var(--brand);
  font-weight: 600;
}

/* ── Light Theme ── */
[data-theme="light"] .kb-category-card:hover { box-shadow: 0 8px 24px rgba(124,58,237,0.1); }
[data-theme="light"] .kb-article-row:hover { background: rgba(124,58,237,0.04); }
[data-theme="light"] .kb-search-results { background: rgba(255,255,255,0.95); }
[data-theme="light"] .kb-search-result:hover { background: rgba(124,58,237,0.06); }
[data-theme="light"] .kb-related-link:hover { background: rgba(124,58,237,0.05); }
[data-theme="light"] .kb-related-active { background: rgba(124,58,237,0.08); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .kb-search-wrap { max-width: 100%; }
  .kb-category-icon-lg { width: 40px; height: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════
   57. KB ADMIN — Knowledge Base management
   ═══════════════════════════════════════════════════════════════════ */

.kb-admin-stat-card {
  border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kb-admin-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* ═══════════════════════════════════════════════════════════════════
   58. LANDING PAGE CUSTOMIZER — WordPress-style full-page editor
   ═══════════════════════════════════════════════════════════════════ */

/* ── Topbar Back Button (hidden by default, shown in customizer) ── */
.customizer-back-btn {
  display: none;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  margin-left: 12px;
  transition: background 0.15s ease;
}
.customizer-back-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }

/* ── Body Attribute Overrides — Full-Page Takeover ── */
body[data-customizer="true"] #sidebar,
body[data-customizer="true"] #sidebar-toggle { display: none !important; }
body[data-customizer="true"] #maincontent { margin-left: 0 !important; }
body[data-customizer="true"] .pagecontainer { padding: 0; max-width: 100%; }
body[data-customizer="true"] .customizer-back-btn { display: inline-flex; }

/* ── Customizer Wrapper ── */
.customizer-wrap {
  display: flex;
  flex-direction: column;          /* journey tabs on top, controls|preview below */
  position: fixed;
  top: var(--topbar-h, 48px);
  left: 0; right: 0; bottom: 0;
  z-index: 10;
}
/* The controls + preview row sits below the full-width journey tab bar. */
.customizer-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ── Left Panel: Controls ── */
.customizer-controls {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.customizer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.customizer-back {
  color: var(--muted);
  font-size: 1rem;
  text-decoration: none;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.customizer-back:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* MKT-020 — Prominent Exit button on the editor header.
   Replaces the icon-only back-arrow that photographers couldn't find. */
.customizer-back.customizer-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(124,58,237,0.10);
  border: 1px solid rgba(124,58,237,0.35);
}
.customizer-back.customizer-exit:hover {
  background: rgba(124,58,237,0.18);
  border-color: var(--brand);
  color: var(--text);
}
[data-theme="light"] .customizer-back.customizer-exit {
  color: #0f172a;
  background: rgba(124,58,237,0.10);
  border-color: rgba(124,58,237,0.35);
}
[data-theme="light"] .customizer-back.customizer-exit:hover {
  background: rgba(124,58,237,0.18);
}
.customizer-title { font-size: 0.95rem; font-weight: 700; color: var(--text); }

/* ── Scrollable Sections ── */
.customizer-sections {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.customizer-sections::-webkit-scrollbar { width: 5px; }
.customizer-sections::-webkit-scrollbar-track { background: transparent; }
.customizer-sections::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* ── Accordion Sections ── */
.customizer-section { border-bottom: 1px solid var(--border); }
.customizer-section-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.customizer-section-btn:hover { background: rgba(255,255,255,0.04); }
.customizer-chevron {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
  color: var(--muted);
}
.customizer-section-btn[aria-expanded="true"] .customizer-chevron { transform: rotate(180deg); }

.customizer-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.customizer-section-body.open { max-height: 2000px; }
.customizer-section-body > div { padding: 0 16px 16px; }

/* ── Field Groups & Labels ── */
.customizer-field-group { margin-bottom: 14px; }
.customizer-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* ── Image Thumbnails ── */
.customizer-thumb {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.customizer-thumb img { display: block; max-width: 100%; height: auto; }
.customizer-thumb-delete {
  position: absolute;
  top: 4px; right: 4px;
  width: 24px; height: 24px;
  background: rgba(239,68,68,0.9);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.customizer-thumb:hover .customizer-thumb-delete { opacity: 1; }

/* #465 — Always-visible Remove button overlay (the existing
   .customizer-thumb-delete is icon-only + hover-revealed, but the user
   reported they "couldn't delete" because no remove affordance existed
   at all — discoverability beats hover-discovery for a feature that
   was previously absent). Lives on top of the thumbnail in the bottom-
   right corner; click → confirm → deleteGraphic(). */
.customizer-thumb-remove {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 2px 8px;
  font-size: 0.68rem;
  line-height: 1.4;
  z-index: 2;
  opacity: 0.92;
}
.customizer-thumb-remove:hover { opacity: 1; }

/* ── File Upload ── */
.customizer-upload {
  position: relative;
  display: block;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.customizer-upload:hover { border-color: var(--brand); background: rgba(124,58,237,0.04); }
.customizer-upload input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
/* Visible hint shown through the transparent full-box file input. The input
   above is the click/drop target for the whole box, so this label is purely
   presentational — pointer-events:none lets every click fall through to it.
   Action buttons (e.g. Browse Media Library) live OUTSIDE .customizer-upload
   so the overlay never swallows them. */
.customizer-upload-label {
  display: block;
  pointer-events: none;
}

/* ── Form Controls Inside Customizer ── */
.customizer-controls .form-control,
.customizer-controls .form-select {
  font-size: 0.82rem;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
  color: var(--text);
}
.customizer-controls .form-control:focus,
.customizer-controls .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(124,58,237,0.15);
}

/* ── Color Picker Field ── */
.customizer-color-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.customizer-color-field input[type="color"] {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  cursor: pointer;
  background: transparent;
}
.customizer-color-field input[type="text"] {
  flex: 1;
  font-family: monospace;
  font-size: 0.82rem;
}

/* ── Theme Preset Grid ── */
.customizer-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.customizer-theme-card {
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.customizer-theme-card:hover { border-color: rgba(124,58,237,0.4); }
.customizer-theme-card.active { border-color: var(--brand); background: rgba(124,58,237,0.08); }
.customizer-theme-swatches {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
}
.customizer-theme-swatch {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
}
.customizer-theme-name { font-size: 0.72rem; font-weight: 600; color: var(--text); }

/* ── Custom Variable Override Rows ── */
.customizer-var-group { margin-bottom: 12px; }
.customizer-var-group-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.customizer-var-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.customizer-var-row label { flex: 1; font-size: 0.78rem; color: var(--text); }
.customizer-var-row input[type="color"] {
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px;
  cursor: pointer;
  background: transparent;
}
.customizer-var-row input[type="text"] {
  width: 80px;
  font-family: monospace;
  font-size: 0.78rem;
}
.customizer-var-modified { background: rgba(124,58,237,0.06); border-radius: 4px; padding: 4px 6px; }
.customizer-var-suggested {
  background: rgba(34,197,94,0.08);
  border: 1px dashed rgba(34,197,94,0.35);
  border-radius: 4px;
  padding: 4px 6px;
  position: relative;
}
.customizer-var-suggested::after {
  content: 'auto';
  position: absolute;
  right: 4px;
  top: 2px;
  font-size: 0.6rem;
  color: var(--c-green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* ── Save Bar ── */
.customizer-save-bar {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.customizer-save-bar .btn { width: 100%; }

/* ── Editor Mode Toggle (Theme | Layout) + Layout Builder ──
   Storefront Landing Block Builder. The Layout panel is the visual block
   composer; it shares the customizer shell with the Theme accordion and the
   live preview, and is toggled in layout_editor.js. */
.customizer-mode {
  display: flex;
  gap: 4px;
  padding: 10px 16px 0;
  flex-shrink: 0;
}
.customizer-mode-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.customizer-mode-btn:hover { color: var(--text); border-color: var(--brand); }
.customizer-mode-btn.active { color: #fff; background: var(--brand); border-color: var(--brand); }

.customizer-layout {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.layout-palette { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.layout-palette-label {
  width: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--muted);
  margin-bottom: 2px;
}
.layout-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-size: 0.78rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.layout-add-btn:hover { border-color: var(--brand); color: var(--brand); }

.layout-canvas {
  flex: 1;
  min-height: 160px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px;
}
.layout-empty { text-align: center; padding: 28px 12px; color: var(--muted); }
.layout-empty i { font-size: 1.6rem; opacity: 0.5; margin-bottom: 10px; display: block; }
.layout-empty p { margin: 0 0 4px; }

[data-theme="light"] .layout-add-btn { background: rgba(0,0,0,0.03); }

/* Canvas block cards (Phase 2) */
.layout-block { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); margin-bottom: 8px; }
.layout-block.dragging { opacity: 0.5; }
.layout-block-head { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--border); cursor: grab; }
.layout-grip { opacity: 0.4; }
.layout-block-type { font-weight: 600; font-size: 0.82rem; flex: 1; }
.layout-icon-btn { border: none; background: transparent; color: var(--muted); padding: 2px 5px; cursor: pointer; border-radius: 4px; }
.layout-icon-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.layout-block-body { padding: 9px 10px; display: flex; flex-direction: column; gap: 8px; }
.layout-field { display: block; }
.layout-field > span { display: block; font-size: 0.72rem; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.layout-field-check { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text); }
.layout-save-bar { display: flex; flex-direction: column; }
[data-theme="light"] .layout-icon-btn:hover { background: rgba(0,0,0,0.05); }

/* Section builder (Phase 2 — sections tier) */
.layout-add-section-btn {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.layout-add-section-btn:hover { border-color: var(--brand); color: var(--brand); }
[data-theme="light"] .layout-add-section-btn { background: rgba(0,0,0,0.03); }
.layout-section-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; font-size: 0.72rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.layout-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.layout-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.layout-badge-live      { color: var(--c-green);  background: var(--c-green-bg); }
.layout-badge-scheduled { color: var(--c-amber);  background: var(--c-amber-bg); }
.layout-badge-expired   { color: var(--c-slate);  background: var(--c-slate-bg); }
.layout-section-panel { border-top: 1px dashed var(--border); padding: 9px 10px; display: flex; flex-direction: column; gap: 8px; }
.layout-section-panel.d-none { display: none; }
.layout-panel-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 2px 0; }
.layout-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.layout-icon-btn.active { color: var(--brand); }

/* Media picker (image / video URL fields) */
.layout-media-input { display: flex; gap: 6px; }
.layout-media-input .form-control { flex: 1; min-width: 0; }
.layout-browse-btn { flex-shrink: 0; }
.lm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.lm-card { padding: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface); cursor: pointer; aspect-ratio: 1; }
.lm-card:hover { border-color: var(--brand); }
.lm-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Storefront Landing Builder — block tier (Phase 3) ── */
.layout-toolbar { display: flex; gap: 6px; margin-bottom: 8px; }
.layout-tool-btn {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--border); background: rgba(255,255,255,0.04);
    color: var(--text); border-radius: 6px; padding: 4px 10px;
    font-size: 0.78rem; cursor: pointer;
}
.layout-tool-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.layout-tool-btn:disabled { opacity: 0.4; cursor: default; }
[data-theme="light"] .layout-tool-btn { background: rgba(0,0,0,0.03); }

.layout-blocks-panel { gap: 10px; }
.layout-block-palette { display: flex; flex-wrap: wrap; gap: 5px; }
.layout-add-block-btn {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--border); background: rgba(255,255,255,0.04);
    color: var(--muted); border-radius: 6px; padding: 3px 8px;
    font-size: 0.72rem; cursor: pointer;
}
.layout-add-block-btn:hover { border-color: var(--brand); color: var(--brand); }
[data-theme="light"] .layout-add-block-btn { background: rgba(0,0,0,0.03); }

.layout-blocklist { display: flex; flex-direction: column; gap: 6px; }
.layout-blocklist-empty { font-size: 0.74rem; color: var(--muted); margin: 2px 0; }
.layout-subblock { border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,0.02); }
[data-theme="light"] .layout-subblock { background: rgba(0,0,0,0.02); }
.layout-subblock.dragging { opacity: 0.5; }
.layout-subblock-head { display: flex; align-items: center; gap: 5px; padding: 5px 8px; cursor: grab; }
.layout-track-note { font-size: 0.7rem; color: var(--c-violet); padding: 0 8px 6px; display: flex; align-items: center; gap: 5px; }
.layout-subpanel { border-top: 1px dashed var(--border); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.layout-subpanel.d-none { display: none; }

.layout-icons-editor { display: flex; flex-direction: column; gap: 6px; }
.layout-icon-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 6px; align-items: center; }
.layout-icons-add { align-self: flex-start; }

/* ── Preset List ── */
.customizer-preset-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
  max-height: 160px;
  overflow-y: auto;
}
.customizer-preset-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.customizer-preset-row .btn-link { padding: 2px 4px; }

/* ── Draft Badge ── */
.customizer-draft-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Right Panel: Preview ── */
.customizer-preview {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: rgba(0,0,0,0.15);
  overflow: hidden;
}

/* ── Viewport Toggle Buttons ── */
.customizer-viewport-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.customizer-viewport-btn {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.customizer-viewport-btn:hover { border-color: var(--brand); color: var(--text); }
.customizer-viewport-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ── Preview Iframe ── */
.customizer-iframe-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
  position: relative;            /* anchor for the preview location badge */
}

/* Preview location badge — when editing a non-location scope (e.g. the account-default
   Booking Page), the preview renders against a representative location; this tells the
   user which one so they don't mistake it for a per-location edit. Bottom-left so it
   clears the global "Back to Admin" floater (bottom-right). */
.preview-loc-badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 20;
  display: flex; align-items: flex-start; gap: 9px;
  max-width: 320px; padding: 9px 13px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); font-size: 0.8rem; line-height: 1.3;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.preview-loc-badge > i { color: var(--brand); font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.preview-loc-badge__note { color: var(--muted); font-size: 0.72rem; margin-top: 2px; }
.customizer-iframe {
  width: 100%;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  transition: width 0.3s ease;
}
.customizer-iframe.viewport-tablet { width: 768px; }
.customizer-iframe.viewport-mobile { width: 375px; }

/* ── Toast Notification ── */
.customizer-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.customizer-toast.show { opacity: 1; transform: translateY(0); }
.customizer-toast.success { background: var(--c-green); }
.customizer-toast.error { background: var(--c-red); }

/* ── Theme Mode Radio Group ── */
.customizer-mode-group {
  display: flex;
  gap: 6px;
}
.customizer-mode-group label {
  flex: 1;
  text-align: center;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--muted);
}
.customizer-mode-group input[type="radio"] { display: none; }
.customizer-mode-group input[type="radio"]:checked + span {
  /* parent label gets styled via JS adding .active class */
}
.customizer-mode-group label.active {
  border-color: var(--brand);
  background: rgba(124,58,237,0.1);
  color: var(--text);
}

/* ── Legal Section ── */
.customizer-legal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.customizer-legal-item:last-child { border-bottom: none; }
.customizer-legal-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Light Theme ── */
[data-theme="light"] .customizer-back-btn:hover { background: rgba(0,0,0,0.06); }
[data-theme="light"] .customizer-controls { background: rgba(255,255,255,0.95); }
[data-theme="light"] .customizer-section-btn:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .customizer-upload:hover { background: rgba(124,58,237,0.04); }
[data-theme="light"] .customizer-controls .form-control,
[data-theme="light"] .customizer-controls .form-select { background: rgba(0,0,0,0.03); }
[data-theme="light"] .customizer-preview { background: rgba(0,0,0,0.04); }
[data-theme="light"] .customizer-sections::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme="light"] .customizer-sections { scrollbar-color: rgba(0,0,0,0.15) transparent; }
[data-theme="light"] .customizer-theme-swatch { border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .customizer-var-modified { background: rgba(124,58,237,0.06); }
[data-theme="light"] .customizer-legal-item { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .customizer-back:hover { background: rgba(0,0,0,0.05); }

/* ── Responsive ── */
@media (max-width: 991px) {
  .customizer-body { flex-direction: column; }
  .customizer-controls { width: 100%; height: 50%; border-right: none; border-bottom: 1px solid var(--border); }
  .customizer-preview { height: 50%; }
  .customizer-iframe.viewport-tablet,
  .customizer-iframe.viewport-mobile { width: 100%; }
}
@media (max-width: 575px) {
  .customizer-controls { height: 60%; }
  .customizer-preview { height: 40%; padding: 8px; }
  .customizer-viewport-bar { display: none; }
  .customizer-theme-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   59. MODAL DESIGNER — Microsite consent modal builder
   ═══════════════════════════════════════════════════════════════════ */

/* ── Modal Cards (list page) ── */
.mm-modal-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.mm-modal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.mm-card-hero {
  height: 120px;
  background-size: cover;
  background-position: center;
  border-radius: 8px 8px 0 0;
}
.mm-card-hero-empty {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124,58,237,0.06);
  color: var(--muted);
  border-radius: 8px 8px 0 0;
}

/* ── Image Upload Zones (builder) ── */
.mm-image-zone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mm-image-zone:hover { border-color: var(--brand); background: rgba(124,58,237,0.04); }

.mm-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.82rem;
  gap: 4px;
}

.mm-image-preview {
  max-width: 100%;
  max-height: 160px;
  border-radius: 6px;
  object-fit: contain;
}

/* ── Live Preview (builder right column) ── */
.mm-preview-sticky {
  position: sticky;
  top: 80px;
}

.mm-preview-frame {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #1a1a2e;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.mm-preview-chrome {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mm-chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mm-preview-body {
  min-height: 400px;
  position: relative;
}

.mm-preview-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.mm-preview-modal {
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  color: #000000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ── Color Picker Row ── */
.mm-color-row .col {
  text-align: center;
}
.mm-color-row .form-label {
  font-size: 0.72rem;
  font-weight: 600;
}
.mm-color-row .form-control-color {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  cursor: pointer;
}

/* ── Light Theme ── */
[data-theme="light"] .mm-card-hero-empty { background: rgba(124,58,237,0.05); }
[data-theme="light"] .mm-image-zone:hover { background: rgba(124,58,237,0.03); }
[data-theme="light"] .mm-preview-frame { background: #f0f0f5; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
[data-theme="light"] .mm-preview-chrome { background: rgba(0,0,0,0.04); border-bottom-color: rgba(0,0,0,0.08); }

/* ── Responsive ── */
@media (max-width: 991px) {
  .mm-preview-sticky { position: static; margin-top: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   60. TECH SUPPORT DASHBOARD — Operations board, date cells, sorting
   ═══════════════════════════════════════════════════════════════════ */

/* ── Slim Stat Cards ── */
.ts-stat-slim { padding: 12px 10px; }
.ts-stat-slim .stat-card-value { font-size: 1.4rem; }
.ts-stat-slim .stat-card-label { font-size: 0.7rem; }
.ts-stat-slim .stat-card-icon { font-size: 0.85rem; margin-bottom: 4px; }

/* ── Health Dots ── */
.ts-health-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; vertical-align: middle; margin-right: 4px; flex-shrink: 0;
}
.ts-health-dot-green { background: var(--c-green); box-shadow: 0 0 4px rgba(34,197,94,0.4); }
.ts-health-dot-amber { background: var(--c-amber); box-shadow: 0 0 4px rgba(245,158,11,0.4); }
.ts-health-dot-red   { background: var(--c-red);   box-shadow: 0 0 4px rgba(239,68,68,0.4); }
.ts-health-dot-gray  { background: var(--c-gray); }

/* ── Date Cells ── */
.ts-date-cell { display: inline-block; text-align: left; line-height: 1.3; }
.ts-date-primary { font-size: 0.82rem; font-weight: 500; }
.ts-date-relative { font-size: 0.7rem; color: var(--muted); }

/* ── Sort Headers ── */
.ts-sort-header { cursor: pointer; user-select: none; white-space: nowrap; }
.ts-sort-header:hover { color: var(--brand); }
.ts-sort-header .ts-sort-icon { opacity: 0.35; transition: opacity 0.15s; font-size: 0.7rem; }
.ts-sort-header:hover .ts-sort-icon { opacity: 0.7; }
.ts-sort-header.ts-sort-active .ts-sort-icon { opacity: 1; color: var(--brand); }

/* ── Location Row ── */
.ts-loc-row { transition: background 0.15s; }
.ts-loc-row:hover { background: var(--row-hover); }
.ts-loc-row.ts-expanded { background: rgba(124,58,237,0.04); }

/* ── Expanded Detail ── */
.ts-expand-row td { background: rgba(124,58,237,0.02); border-top: none; }

/* ── Business Hours Badge ── */
.ts-bh-badge { font-size: 0.68rem; margin-top: 2px; }

/* ── Group Headers (Open / Closed / No Hours) ── */
.ts-group-header td {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
[data-theme="light"] .ts-group-header td { background: rgba(0,0,0,0.02); }

/* ── Anomaly Cards ── */
.ts-anomaly-card {
  border-left: 3px solid var(--c-amber);
  background: var(--c-amber-bg);
}
.ts-anomaly-red {
  border-left-color: var(--c-red);
  background: var(--c-red-bg);
}

/* ── Auto-refresh Spinner ── */
#ts-refresh-btn .fa-spin { animation-duration: 0.8s; }

/* ── Muted Row (non-operating locations) ── */
.ts-row-muted { opacity: 0.5; }
.ts-row-muted:hover { opacity: 0.75; }

/* ── Operational Status Badges (per-location) ── */
.ts-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 4px; white-space: nowrap;
}
.ts-status-operating         { color: var(--c-green);  background: var(--c-green-bg); }
.ts-status-operating_limited { color: var(--c-amber);  background: var(--c-amber-bg); }
.ts-status-operating_offline { color: var(--c-blue);   background: var(--c-blue-bg); }
.ts-status-setup             { color: var(--c-gray);   background: var(--c-gray-bg); }
.ts-status-closed_seasonal   { color: var(--c-amber);  background: var(--c-amber-bg); }
.ts-status-closed_permanent  { color: var(--c-slate);  background: var(--c-slate-bg); }
.ts-status-down              { color: var(--c-red);    background: var(--c-red-bg); }
.ts-status-maintenance       { color: var(--c-purple); background: var(--c-purple-bg); }

/* ── Incident Management ── */
.ts-incident-row { border-left: 3px solid transparent; transition: background 0.15s; }
.ts-incident-row:hover { background: var(--row-hover); }
.ts-incident-open         { border-left-color: var(--c-amber); }
.ts-incident-acknowledged { border-left-color: var(--c-blue); }
.ts-incident-snoozed      { border-left-color: var(--c-gray); }
.ts-incident-resolved     { border-left-color: var(--c-green); }

/* ── Snooze Countdown Badge ── */
.ts-snooze-countdown {
  font-size: 0.68rem; font-weight: 500;
  color: var(--c-gray); white-space: nowrap;
}
.ts-snooze-countdown.ts-snooze-expiring { color: var(--c-amber); }

/* ── Tech Support Bulk Bar ── */
.ts-bulk-bar {
  position: sticky; bottom: 0; z-index: 1030;
  background: var(--surface); border-top: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
  padding: 10px 16px;
}

/* ── Status Set Dropdown ── */
.ts-status-select { font-size: 0.78rem; max-width: 160px; }

/* ── Settings Modal Compact ── */
.ts-settings-field { font-size: 0.85rem; }
.ts-settings-field .form-control,
.ts-settings-field .form-select { font-size: 0.82rem; }

/* Tech Support loading overlay */
.ts-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(8, 12, 22, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ts-loading-panel {
  min-width: 260px;
  max-width: 420px;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.ts-loading-spinner {
  width: 3rem;
  height: 3rem;
}

/* ── Incident Stats Bar ── */
.ts-incident-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.ts-incident-stat {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.78rem; font-weight: 500;
}

/* ── Light Theme ── */
[data-theme="light"] .ts-loc-row.ts-expanded { background: rgba(124,58,237,0.03); }
[data-theme="light"] .ts-expand-row td { background: rgba(124,58,237,0.015); }
[data-theme="light"] .ts-bulk-bar { box-shadow: 0 -4px 16px rgba(0,0,0,0.08); }
[data-theme="light"] .ts-loading-overlay { background: rgba(255, 255, 255, 0.48); }
[data-theme="light"] .ts-loading-panel { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); }

/* ── Responsive: hide columns at breakpoints ── */
@media (max-width: 991px) {
  .ts-col-hide-md { display: none !important; }
}
@media (max-width: 768px) {
  .ts-col-hide-sm { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   61. Admin Invoices — Bulk Action Bar
   ═══════════════════════════════════════════════════════════════ */
#bulk-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
  background: var(--surface); border-top: 1px solid var(--border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
}
[data-theme="light"] #bulk-bar {
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════════════════════════
   62. Native Email Editor — Block palette, canvas, properties, RTE
   ═══════════════════════════════════════════════════════════════ */

/* ── Block Palette Grid ── */
.ne-palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ne-palette-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-align: center;
}
.ne-palette-block i { font-size: 1rem; color: var(--muted); transition: color 0.15s; }
.ne-palette-block:hover {
  border-color: var(--brand);
  color: var(--text);
  background: var(--c-violet-bg);
}
.ne-palette-block:hover i { color: var(--brand); }

/* ── Canvas (sortable block list) ── */
.ne-canvas { min-height: 40px; }
.ne-canvas-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  margin-bottom: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ne-canvas-item:hover { border-color: rgba(124,58,237,0.4); }
.ne-canvas-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Category colour cue (survives hover/selected since it's a shadow, not a border) */
.ne-canvas-item.ne-cat-email   { box-shadow: inset 3px 0 0 var(--c-violet); }
.ne-canvas-item.ne-cat-photo   { box-shadow: inset 3px 0 0 var(--c-teal); }
.ne-canvas-item.ne-cat-utility { box-shadow: inset 3px 0 0 var(--c-gray); }
.ne-canvas-item.selected {
  border-color: var(--brand);
  background: var(--c-violet-bg);
}
.ne-canvas-handle {
  cursor: grab;
  color: var(--muted);
  opacity: 0.5;
  padding: 0 2px;
}
.ne-canvas-handle:hover { opacity: 1; }
.ne-canvas-label {
  flex: 1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ne-canvas-label i { color: var(--muted); font-size: 0.7rem; }
.ne-canvas-actions { display: flex; gap: 2px; }
.ne-canvas-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.7rem;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.ne-canvas-btn:hover { color: var(--text); background: var(--border); }
.ne-canvas-btn-danger:hover { color: var(--c-red); background: var(--c-red-bg); }

/* jQuery UI sortable placeholder */
.ne-canvas .ui-sortable-placeholder {
  height: 36px;
  border: 2px dashed var(--brand);
  border-radius: 5px;
  background: var(--c-violet-bg);
  visibility: visible !important;
}

/* ── Property Panel ── */
.ne-property-group {
  margin-bottom: 12px;
}
.ne-property-label {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 3px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Shared prop types: 4-side padding grid + alignment segmented control ── */
.ne-padding-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ne-padding-cell { display: flex; flex-direction: column; align-items: center; }
.ne-padding-cell input { text-align: center; padding-left: 2px; padding-right: 2px; }
.ne-padding-side { font-size: 0.6rem; color: var(--muted); margin-top: 1px; }
.ne-align-group { display: inline-flex; gap: 2px; }
.ne-align-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 5px 11px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.ne-align-btn:hover { color: var(--text); }
.ne-align-btn.active { border-color: var(--brand); color: var(--brand); background: var(--c-violet-bg); }

/* ── Property-panel group subsection headers (Tier 3 I) ── */
.ne-prop-group-header {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--muted);
  margin: 14px 0 7px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.ne-prop-group-header.first { margin-top: 2px; padding-top: 0; border-top: 0; }

/* ── Color picker field ── */
.ne-color-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ne-color-field input[type="color"] {
  width: 32px;
  height: 32px;
  padding: 1px;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}

/* ── Image field ── */
.ne-image-field { margin-bottom: 4px; }
.ne-image-thumb {
  position: relative;
  display: inline-block;
  margin-bottom: 6px;
  max-width: 100%;
}
.ne-image-thumb img {
  display: block;
  max-width: 100%;
  max-height: 120px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.ne-image-clear {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Social icon editor rows (platform + link + optional custom-image override) ── */
.ne-social-row {
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px dashed var(--border);
}
.ne-social-row:last-of-type { border-bottom: 0; }
.ne-social-override { opacity: 0.85; }

/* ── Media-library picker grid (Browse) ── */
.ne-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  max-height: 58vh;
  overflow-y: auto;
}
.ne-media-item {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.ne-media-item:hover { border-color: var(--brand); }
.ne-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Mini Rich Text Editor ── */
.ne-rte-wrap {
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.ne-rte-toolbar {
  display: flex;
  gap: 1px;
  padding: 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.ne-rte-btn {
  background: none;
  border: none;
  color: var(--muted);
  padding: 3px 7px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: color 0.12s, background 0.12s;
}
.ne-rte-btn:hover { color: var(--text); background: var(--border); }
.ne-rte-area {
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text);
  background: transparent;
  outline: none;
}
.ne-rte-area a { color: var(--brand); }
/* Match the indented-list rendering used in the preview + exported email. */
.ne-rte-area ul, .ne-rte-area ol { padding-left: 40px; margin: 6px 0; }

/* ── Merge tag chips ── */
.ne-merge-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ne-merge-tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-family: 'Courier New', monospace;
  background: var(--c-violet-bg);
  color: var(--brand);
  border: 1px solid rgba(124,58,237,0.2);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}
.ne-merge-tag:hover { background: rgba(124,58,237,0.25); }

/* ── Saved block items ── */
.ne-saved-block {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  margin-bottom: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s;
  color: var(--text);
}
.ne-saved-block:hover { border-color: var(--brand); }
.ne-saved-block i { color: var(--muted); }

/* ── Viewport toggles ── */
.ne-viewport-toggles {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 10;
  display: flex;
  gap: 4px;
}

/* ── Block property popup ── */
.ne-block-popup {
  position: absolute;
  z-index: 100;
  width: 320px;
  max-width: calc(100% - 20px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* shell clips to its radius; the body scrolls, not the header */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.ne-block-popup-header {
  flex: 0 0 auto;              /* header stays pinned while the settings body scrolls */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
}
.ne-popup-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}
.ne-popup-close:hover { color: var(--text); background: var(--border); }
.ne-block-popup-body {
  flex: 1 1 auto;
  min-height: 0;              /* lets the flex child shrink so overflow-y can scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
}
/* Compact quick-actions in the block popup (Tier 3 L) */
.ne-popup-quick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ne-popup-quick .btn { justify-content: flex-start; }

/* MKT-014 — popup header inline actions (Duplicate / Delete). */
.ne-popup-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  margin-right: 6px;
}
.ne-popup-action {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.ne-popup-action:hover {
  color: var(--text);
  background: var(--border);
  border-color: var(--brand);
}
.ne-popup-action-danger:hover {
  color: var(--c-red);
  border-color: var(--c-red);
  background: var(--c-red-bg);
}

/* MKT-023 — Saved Footers list (footer-block properties panel). */
.ne-footer-actions { margin-top: 8px; }
.ne-footer-list {
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px;
}
.ne-footer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 0.78rem;
  gap: 6px;
}
.ne-footer-item:hover { background: var(--row-hover); }
.ne-footer-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ne-footer-item-actions { display: inline-flex; gap: 3px; flex-shrink: 0; }

/* ── Light theme ── */
[data-theme="light"] .ne-palette-block { background: rgba(255,255,255,0.7); }
[data-theme="light"] .ne-canvas-item { background: rgba(255,255,255,0.7); }
[data-theme="light"] .ne-saved-block { background: rgba(255,255,255,0.7); }
[data-theme="light"] .ne-block-popup { background: rgba(255,255,255,0.92); }

/* ── Responsive: stack at 991px ── */
@media (max-width: 991px) {
  .ne-viewport-toggles { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   61. PRINT QUEUE
   ═══════════════════════════════════════════════════════════════════ */
.pq-row { cursor: pointer; transition: background 0.15s; }
.pq-row:hover { background: var(--row-hover); }
.pq-row.pq-selected { background: rgba(124,58,237,0.12); }
.pq-thumb {
  width: 80px; height: 80px; object-fit: cover; border-radius: 4px;
  cursor: pointer; transition: opacity 0.15s;
}
.pq-thumb:hover { opacity: 0.8; }
.pq-img-cell { width: 90px; }
.pq-msg-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

[data-theme="light"] .pq-row.pq-selected { background: rgba(124,58,237,0.1); }

/* ═══════════════════════════════════════════════════════════════════
   63. QUICK EDIT MODE — Admin Photographer List
   ═══════════════════════════════════════════════════════════════════ */

/* ── Save bar (sticky bottom) ── */
.qe-save-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
  background: rgba(124,58,237,0.95); backdrop-filter: blur(12px);
  color: #fff; padding: 12px 24px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
  animation: qe-slide-up 0.25s ease-out;
}
@keyframes qe-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── Company inline input ── */
.qe-company-input {
  max-width: 280px; display: inline-block;
  font-size: 0.875rem; padding: 2px 8px;
  background: var(--surface); color: var(--text); border-color: var(--border);
}
.qe-company-input:focus {
  border-color: var(--brand); box-shadow: 0 0 0 2px rgba(124,58,237,0.25);
}

/* ── Status toggle button ── */
.qe-status-toggle {
  font-size: 0.75rem; padding: 2px 10px; cursor: pointer;
  transition: all 0.15s;
}

/* ── Feature toggle buttons ── */
.qe-feature-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent; background: transparent;
  cursor: pointer; transition: all 0.2s; font-size: 0.85rem;
  padding: 0;
}
.qe-feature-toggle.on {
  color: var(--c-green); border-color: var(--c-green);
  background: var(--c-green-bg);
}
.qe-feature-toggle.off {
  color: var(--c-gray); border-color: var(--border);
  opacity: 0.5;
}
.qe-feature-toggle:hover {
  opacity: 1; transform: scale(1.15);
}

/* ── Changed row highlight ── */
.qe-row-changed {
  background: rgba(245,158,11,0.08) !important;
  border-left: 3px solid var(--c-amber);
}

/* ── Toast notification ── */
.qe-toast {
  position: fixed; top: 80px; right: 24px; z-index: 1060;
  max-width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: qe-fade-in 0.2s ease-out;
}
@keyframes qe-fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Active mode body indicator ── */
.qe-mode-active #photographer-table tbody tr { transition: background 0.15s, border-left 0.15s; }

/* ── Light theme ── */
[data-theme="light"] .qe-save-bar { background: rgba(124,58,237,0.92); }
[data-theme="light"] .qe-company-input {
  background: rgba(255,255,255,0.9); color: #0f172a; border-color: #d1d5db;
}
[data-theme="light"] .qe-row-changed { background: rgba(245,158,11,0.1) !important; }
[data-theme="light"] .qe-feature-toggle.off { opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════════════
   63. SOC 2 — Compliance Reviews, Incidents, Platform Secrets
   ═══════════════════════════════════════════════════════════════════ */

/* ── Compliance review status badges ── */
.compliance-badge-pending   { background: var(--c-amber-bg); color: var(--c-amber); }
.compliance-badge-completed { background: var(--c-green-bg); color: var(--c-green); }
.compliance-badge-overdue   { background: var(--c-red-bg);   color: var(--c-red); }

/* ── Incident priority badges ── */
.incident-badge-critical { background: var(--c-red-bg);   color: var(--c-red); font-weight: 600; }
.incident-badge-high     { background: var(--c-amber-bg); color: var(--c-amber); }

/* ── Incident status badges ── */
.incident-badge-open          { background: var(--c-red-bg);    color: var(--c-red); }
.incident-badge-acknowledged  { background: var(--c-blue-bg);   color: var(--c-blue); }
.incident-badge-investigating { background: var(--c-purple-bg); color: var(--c-purple); }
.incident-badge-resolved      { background: var(--c-green-bg);  color: var(--c-green); }
.incident-badge-sla_breached  { background: var(--c-red-bg);    color: var(--c-red); font-weight: 700; border: 1px dashed var(--c-red); }

/* ── SLA countdown ── */
.sla-countdown { font-size: 0.75rem; font-weight: 600; }
.sla-countdown.sla-ok      { color: var(--c-green); }
.sla-countdown.sla-warning  { color: var(--c-amber); }
.sla-countdown.sla-breached { color: var(--c-red); }

/* ── Incident timeline ── */
.incident-timeline { position: relative; padding-left: 24px; }
.incident-timeline::before {
  content: ''; position: absolute; left: 7px; top: 0; bottom: 0;
  width: 2px; background: var(--border);
}
.incident-timeline-item { position: relative; margin-bottom: 1.25rem; }
.incident-timeline-item::before {
  content: ''; position: absolute; left: -21px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-blue); border: 2px solid var(--surface);
}
.incident-timeline-item.tl-created::before  { background: var(--c-red); }
.incident-timeline-item.tl-ack::before      { background: var(--c-blue); }
.incident-timeline-item.tl-resolved::before { background: var(--c-green); }
.incident-timeline-item .tl-time { font-size: 0.72rem; color: var(--muted); }
.incident-timeline-item .tl-label { font-weight: 600; font-size: 0.82rem; }

/* ── Compliance review type badges ── */
.review-type-badge { font-size: 0.72rem; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.review-type-30  { background: var(--c-blue-bg);   color: var(--c-blue); }
.review-type-90  { background: var(--c-purple-bg); color: var(--c-purple); }
.review-type-180 { background: var(--c-amber-bg);  color: var(--c-amber); }
.review-type-365 { background: var(--c-teal-bg);   color: var(--c-teal); }

/* ── Secrets table ── */
.secret-key-code { font-family: monospace; font-size: 0.82rem; color: var(--c-purple); }
.secret-value-masked { font-family: monospace; letter-spacing: 2px; color: var(--muted); }
.secret-rotated-badge { font-size: 0.72rem; color: var(--c-green); }

/* ── Checklist in review completion ── */
.review-checklist .form-check { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.review-checklist .form-check:last-child { border-bottom: none; }
.review-checklist .form-check-label { font-size: 0.85rem; }

/* ══════════════════════════════════════════════════════════════
   63. Sub-Processor Disclosure (Public Legal Page)
   ══════════════════════════════════════════════════════════════ */
.sp-section-title {
    font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.sp-section-title i { color: var(--brand); margin-right: 0.35rem; font-size: 0.95rem; }

.sp-card { border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.sp-card-header {
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.sp-card-body { padding: 1rem; }
.sp-provider-name { font-size: 0.95rem; }
.sp-provider-sub { font-size: 0.78rem; color: var(--muted); margin-left: 0.25rem; }

.sp-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 0.25rem; }
.sp-value { font-size: 0.85rem; margin-bottom: 0.5rem; }
.sp-value:last-child { margin-bottom: 0; }

.sp-practice-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem; }
.sp-practice-title i { color: var(--brand); margin-right: 0.25rem; }
.sp-practice-list { list-style: none; padding: 0; margin: 0; }
.sp-practice-list li {
    font-size: 0.84rem; padding: 0.3rem 0; padding-left: 1.2rem;
    position: relative;
}
.sp-practice-list li::before {
    content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
    position: absolute; left: 0; color: var(--c-green); font-size: 0.7rem; top: 0.45rem;
}

/* Light theme */
[data-theme="light"] .sp-card { background: rgba(255,255,255,0.85); }
[data-theme="light"] .sp-card-header { border-bottom-color: rgba(0,0,0,0.08); }

/* ── 64. Account Deletion Danger Zone ──────────────────────── */
.deletion-danger-zone {
    border: 1px solid var(--c-red);
    border-left: 4px solid var(--c-red);
    background: var(--c-red-bg);
}
[data-theme="light"] .deletion-danger-zone {
    background: rgba(239,68,68,0.06);
}

/* ══════════════════════════════════════════════════════════════
   65. Image QC, Status & Lost Image Finder
   ══════════════════════════════════════════════════════════════ */

/* Hidden image treatment */
.img-status-hidden { opacity: 0.35; filter: grayscale(30%); transition: opacity 0.2s; }
.img-status-hidden:hover { opacity: 0.7; filter: none; }

/* Badge overlays on thumbnails */
.img-badge-overlay {
    position: absolute; top: 4px; right: 4px; z-index: 2;
    display: flex; flex-direction: column; gap: 3px; align-items: flex-end;
}

/* Tag indicator dots */
.img-tag-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; margin-right: 2px;
}
.img-tag-dot-qc     { background: var(--c-purple); }
.img-tag-dot-quality { background: var(--c-green);  }
.img-tag-dot-status  { background: var(--c-amber);  }

/* Action button row below thumbnail */
.img-action-row {
    display: flex; gap: 4px; justify-content: center;
    margin-top: 4px; flex-wrap: wrap;
}
.img-action-btn {
    width: 26px; height: 26px; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border);
    color: var(--muted); font-size: 0.7rem; cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    padding: 0;
}
.img-action-btn:hover {
    color: var(--brand); border-color: var(--brand);
    background: rgba(124,58,237,0.08);
}
.img-action-btn.active { color: var(--c-amber); border-color: var(--c-amber); }

/* Thumb wrapper — make position context for overlays */
.thumb-qc { position: relative; }

/* Lost Image Finder */
.lost-finder-card { position: relative; }
.lost-finder-card .lost-note {
    font-size: 0.75rem; font-style: italic; color: var(--muted);
    margin-top: 4px; line-height: 1.3;
}
.lost-finder-stats .stat-card { min-width: 140px; }

/* Image History Timeline */
.img-history-entry {
    border-left: 2px solid var(--border);
    padding-left: 12px; margin-bottom: 8px;
    position: relative;
}
.img-history-entry::before {
    content: ''; position: absolute; left: -5px; top: 4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand); border: 2px solid var(--surface);
}
.img-history-entry .img-history-action {
    font-weight: 600; font-size: 0.85rem;
}
.img-history-entry .img-history-meta {
    font-size: 0.75rem; color: var(--muted);
}
.img-history-entry .img-history-detail {
    font-size: 0.8rem; margin-top: 2px;
}

/* QC modal form styles */
.qc-reason-select { min-width: 180px; }
.qc-tag-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
}
.qc-tag-option {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--border); font-size: 0.8rem;
    transition: border-color 0.15s, background 0.15s;
}
.qc-tag-option:hover { border-color: var(--brand); background: rgba(124,58,237,0.06); }
.qc-tag-option.selected {
    border-color: var(--brand); background: rgba(124,58,237,0.12);
    color: var(--brand); font-weight: 600;
}

/* Bulk action bar for QC */
.qc-bulk-bar {
    position: sticky; bottom: 0; z-index: 10;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 8px 16px; display: flex; align-items: center; gap: 12px;
    backdrop-filter: blur(12px);
}
.qc-bulk-bar .qc-selected-count {
    font-size: 0.85rem; font-weight: 600; color: var(--brand);
}

/* Light theme */
[data-theme="light"] .img-action-btn { border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .img-action-btn:hover { background: rgba(124,58,237,0.06); }
[data-theme="light"] .img-history-entry { border-left-color: rgba(0,0,0,0.12); }
[data-theme="light"] .img-history-entry::before { border-color: #fff; }
[data-theme="light"] .qc-tag-option { border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .qc-bulk-bar {
    background: rgba(255,255,255,0.9); border-top-color: rgba(0,0,0,0.08);
}

/* Inline thumbnails in search results */
.cs-thumbs-row { cursor: default; }
.cs-thumbs-row:hover { background: transparent !important; }
.cs-inline-thumbs { min-height: 28px; }
.cs-inline-thumb { transition: opacity 0.15s; }
.cs-inline-thumb:hover { opacity: 0.85; }
.cs-inline-thumb-hidden { opacity: 0.35; }
.cs-inline-thumb-hidden:hover { opacity: 0.6; }
[data-theme="light"] .cs-thumbs-row:hover { background: transparent !important; }

/* ─────────────────────────────────────────────────────────
   66. Pricing Page
   ───────────────────────────────────────────────────────── */

.pricing-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 20px 80px;
}

/* Hero */
.pricing-hero { margin-bottom: 56px; }
.pricing-logo { margin-bottom: 20px; }
.pricing-logo img { border-radius: 8px; }
.pricing-headline {
    font-size: 2.6rem; font-weight: 800;
    line-height: 1.15; margin-bottom: 16px;
    background: linear-gradient(135deg, #fff 40%, var(--brand));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pricing-subhead {
    font-size: 1.1rem; color: var(--muted);
    line-height: 1.6; max-width: 540px; margin: 0 auto;
}

/* Tier Cards */
.pricing-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0;
    display: flex; flex-direction: column;
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.pricing-card-featured {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand), 0 8px 32px rgba(124,58,237,0.25);
}
.pricing-card-featured:hover {
    box-shadow: 0 0 0 1px var(--brand), 0 16px 48px rgba(124,58,237,0.35);
}
.pricing-card-badge {
    position: absolute; top: 0; left: 0; right: 0;
    background: var(--brand); color: #fff;
    text-align: center; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 5px 0;
}
.pricing-card-featured .pricing-card-header { padding-top: 40px; }

.pricing-card-header {
    padding: 28px 24px 0;
    text-align: center;
}
.pricing-tier-label {
    display: block;
    font-size: 1.5rem; font-weight: 800;
    color: var(--text);
    margin-bottom: 2px;
}
.pricing-tier-tag {
    display: block;
    font-size: 0.82rem; color: var(--muted);
    font-style: italic;
}

/* Price display */
.pricing-card-price {
    text-align: center;
    padding: 16px 24px 4px;
    line-height: 1;
}
.pricing-dollar {
    font-size: 1.4rem; font-weight: 700;
    vertical-align: super; color: var(--muted);
}
.pricing-amount {
    font-size: 3.2rem; font-weight: 800;
    color: var(--text); letter-spacing: -0.02em;
}
.pricing-cents {
    font-size: 1.4rem; font-weight: 700;
    vertical-align: super; color: var(--muted);
}
.pricing-period {
    font-size: 0.82rem; color: var(--muted);
    margin-left: 2px;
}
.pricing-amount-custom {
    font-size: 1.8rem; font-weight: 800;
    color: var(--text);
}

/* Platform fee */
.pricing-card-fee {
    text-align: center;
    font-size: 0.82rem; color: var(--muted);
    padding: 4px 24px 16px;
    border-bottom: 1px solid var(--border);
}
.pricing-fee-value {
    font-weight: 700; color: var(--brand);
    font-size: 0.92rem;
}

/* Feature list */
.pricing-card-body {
    padding: 20px 24px;
    flex: 1;
}
.pricing-features {
    list-style: none; padding: 0; margin: 0;
}
.pricing-features li {
    font-size: 0.85rem; color: var(--text);
    padding: 5px 0;
    display: flex; align-items: center; gap: 8px;
}
.pricing-features li i {
    width: 16px; text-align: center;
    font-size: 0.78rem; color: var(--brand);
    flex-shrink: 0;
}
.pricing-feature-excluded {
    opacity: 0.4;
}
.pricing-feature-excluded i { color: var(--muted) !important; }

.pricing-free-badge {
    display: inline-block;
    background: var(--c-green-bg); color: var(--c-green);
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    padding: 1px 6px; border-radius: 4px;
}

/* Card footer / CTA */
.pricing-card-footer {
    padding: 0 24px 24px;
    text-align: center;
}
.btn-pricing {
    width: 100%; padding: 10px 16px;
    font-weight: 700; font-size: 0.88rem;
    border-radius: 8px;
}

/* Enterprise variant */
.pricing-card-enterprise {
    border-style: dashed;
}

/* ── Usage-Based Pricing ─────────── */
.pricing-usage-section { margin-top: 80px; }

.pricing-section-title {
    font-size: 1.8rem; font-weight: 800;
    color: var(--text); margin-bottom: 8px;
}
.pricing-section-sub {
    font-size: 0.95rem; color: var(--muted);
    margin-bottom: 0;
}

.pricing-usage-card {
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    height: 100%;
}
.pricing-usage-icon {
    font-size: 1.6rem; color: var(--brand);
    margin-bottom: 12px;
}
.pricing-usage-title {
    font-size: 1.1rem; font-weight: 700;
    color: var(--text); margin-bottom: 4px;
}
.pricing-usage-note {
    font-size: 0.78rem; color: var(--muted);
    margin-bottom: 16px;
}
.pricing-usage-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.82rem; text-align: left;
}
.pricing-usage-table thead th {
    font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted);
    padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.pricing-usage-table tbody td {
    padding: 8px; color: var(--text);
    border-bottom: 1px solid var(--border);
}

/* ── Feature Comparison ──────────── */
.pricing-compare-section { margin-top: 80px; }

.pricing-compare-wrapper {
    overflow-x: auto;
    margin-top: 32px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.pricing-compare-table {
    width: 100%; border-collapse: collapse;
    min-width: 700px;
}
.pricing-compare-table thead th {
    padding: 14px 16px;
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted);
    border-bottom: 2px solid var(--border);
    position: sticky; top: 0;
    background: var(--surface);
}
.pricing-compare-feature { min-width: 240px; }

.pricing-compare-group td {
    font-size: 0.78rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--brand);
    padding: 14px 16px 8px;
    border-bottom: 1px solid var(--border);
    background: rgba(124,58,237,0.04);
}
.pricing-compare-table tbody tr:not(.pricing-compare-group) td {
    padding: 10px 16px;
    font-size: 0.82rem; color: var(--text);
    border-bottom: 1px solid var(--border);
}
.pricing-compare-table tbody tr:not(.pricing-compare-group):hover {
    background: var(--row-hover);
}

/* ── FAQ ─────────────────────────── */
.pricing-faq-section { margin-top: 80px; }

.pricing-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px; margin-top: 32px;
}
.pricing-faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}
.pricing-faq-q {
    font-size: 0.95rem; font-weight: 700;
    color: var(--text); margin-bottom: 8px;
}
.pricing-faq-item p {
    font-size: 0.85rem; color: var(--muted);
    margin: 0; line-height: 1.6;
}

/* ── CTA ─────────────────────────── */
.pricing-cta {
    margin-top: 80px;
    padding: 60px 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(59,130,246,0.08));
    border: 1px solid var(--border);
}
.btn-pricing-cta {
    padding: 14px 48px;
    font-size: 1.1rem; font-weight: 700;
    border-radius: 10px;
}

/* ── Light Theme ─────────────────── */
[data-theme="light"] .pricing-headline {
    background: linear-gradient(135deg, #0f172a 40%, var(--brand));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="light"] .pricing-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
[data-theme="light"] .pricing-card-featured {
    box-shadow: 0 0 0 1px var(--brand), 0 8px 32px rgba(124,58,237,0.12);
}
[data-theme="light"] .pricing-card-featured:hover {
    box-shadow: 0 0 0 1px var(--brand), 0 16px 48px rgba(124,58,237,0.18);
}
[data-theme="light"] .pricing-cta {
    background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(59,130,246,0.04));
}

/* ── Responsive ──────────────────── */
@media (max-width: 991px) {
    .pricing-headline { font-size: 2rem; }
    .pricing-page { padding: 40px 16px 60px; }
}
@media (max-width: 767px) {
    .pricing-headline { font-size: 1.6rem; }
    .pricing-faq-grid { grid-template-columns: 1fr; }
    .pricing-compare-feature { min-width: 160px; }
    .pricing-section-title { font-size: 1.4rem; }
    .pricing-usage-section,
    .pricing-compare-section,
    .pricing-faq-section,
    .pricing-cta { margin-top: 56px; }
}

/* ==========================================================================
   67. Bookings Module
   ========================================================================== */

/* ── Availability Calendar Grid ────────────────────────────────────────── */
.avail-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.avail-day-header {
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    padding: 8px 4px;
    color: var(--muted);
}
.avail-day {
    min-height: 72px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    background: var(--surface);
    display: flex;
    flex-direction: column;
}
.avail-day:hover {
    border-color: var(--brand);
    transform: translateY(-1px);
}
.avail-day:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.avail-day.avail-empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
    min-height: 0;
}
.avail-day.avail-empty:hover {
    transform: none;
    border-color: transparent;
}
.avail-day.avail-green  { background: var(--c-green-bg); border-color: var(--c-green); }
.avail-day.avail-amber  { background: var(--c-amber-bg); border-color: var(--c-amber); }
.avail-day.avail-red    { background: var(--c-red-bg);   border-color: var(--c-red);   }
.avail-day.avail-gray   { background: var(--c-gray-bg);  border-color: var(--c-gray);  }
.avail-day.avail-selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand);
}
.avail-day-num {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
}
.avail-day-count {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: auto;
    padding-top: 4px;
}
.avail-day.avail-green .avail-day-count  { color: var(--c-green); }
.avail-day.avail-amber .avail-day-count  { color: var(--c-amber); }
.avail-day.avail-red   .avail-day-count  { color: var(--c-red);   }
.avail-day.avail-today .avail-day-num {
    color: var(--brand);
}
.avail-day.avail-today .avail-day-num::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
    margin: 3px auto 0;
}

/* Emergency closure overlay — bolt icon top-right corner of affected day cells.
   Diagonal red striping makes the closure status unmissable while preserving
   the underlying availability color so operators still see what was scheduled. */
.avail-day.avail-closed {
    position: relative;
    background-image: linear-gradient(
        135deg,
        var(--c-red-bg) 0,    var(--c-red-bg) 4px,
        transparent 4px,      transparent 12px,
        var(--c-red-bg) 12px, var(--c-red-bg) 16px,
        transparent 16px,     transparent 24px
    );
    border-color: var(--c-red);
}
.avail-day-closure {
    position: absolute;
    top: 4px;
    right: 4px;
    color: var(--c-red);
    font-size: 0.85em;
    line-height: 1;
}
.avail-slot.avail-slot-closed {
    background: var(--c-red-bg);
    opacity: 0.85;
}

/* ── Slot Detail Panel ─────────────────────────────────────────────────── */
.avail-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}
.avail-slot:last-child { border-bottom: none; }
.avail-slot:hover { background: var(--row-hover); }
.avail-slot-time {
    font-weight: 500;
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    font-size: 0.88rem;
}
.avail-slot-capacity {
    font-size: 0.82rem;
    color: var(--muted);
}

/* ── Month Navigation ──────────────────────────────────────────────────── */
.avail-month-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.avail-month-label {
    font-weight: 600;
    font-size: 1rem;
    min-width: 160px;
    text-align: center;
}

/* ── Schedule Override Fields ──────────────────────────────────────────── */
.ovr-time-fields,
.ovr-recurrence-fields {
    transition: opacity 0.2s;
}

/* ── Service / Package / Add-on Graphics ──────────────────────────────── */
/* Hero cover on service cards (services list) */
.bk-svc-cover {
    height: 120px;
    overflow: hidden;
    background: var(--surface);
}
.bk-svc-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Thumbnail in package / add-on tables */
.bk-item-thumb {
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.bk-item-thumb-sm {
    width: 40px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid var(--border);
}
/* No-image placeholder in package / add-on tables */
.bk-item-thumb-placeholder {
    width: 48px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bk-item-thumb-placeholder.sm {
    width: 40px;
    height: 30px;
}
/* Image preview box on edit forms */
.bk-img-preview {
    width: 120px;
    height: 90px;
    border: 1px solid var(--border);
    background: var(--surface);
}

/* ── Skeleton Loading ──────────────────────────────────────────────────── */
.bk-skeleton-row td,
.bkr-skeleton-row td {
    padding: 14px 12px;
}
.bk-skeleton-row .skeleton-text,
.bkr-skeleton-row .skeleton-text {
    max-width: 140px;
}

/* ── Config tile (overview panel on location / BG / portfolio dashboards) ── */
.bk-config-tile {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    transition: background 0.15s, border-color 0.15s;
}
.bk-config-tile:hover {
    background: var(--c-violet-bg);
    border-color: var(--brand);
    color: var(--text);
}
.bk-config-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--c-violet-bg);
    color: var(--brand);
    flex-shrink: 0;
    font-size: 0.8rem;
}
[data-theme="light"] .bk-config-tile {
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .bk-config-tile:hover {
    background: var(--c-violet-bg);
    border-color: var(--brand);
}

/* ── Light Theme ───────────────────────────────────────────────────────── */
[data-theme="light"] .avail-day {
    background: rgba(255,255,255,0.6);
}
[data-theme="light"] .avail-day.avail-empty { background: transparent; }
[data-theme="light"] .avail-day.avail-green { background: var(--c-green-bg); }
[data-theme="light"] .avail-day.avail-amber { background: var(--c-amber-bg); }
[data-theme="light"] .avail-day.avail-red   { background: var(--c-red-bg);   }
[data-theme="light"] .avail-day.avail-gray  { background: var(--c-gray-bg);  }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .avail-day { min-height: 54px; padding: 4px 5px; }
    .avail-day-num { font-size: 0.92rem; }
    .avail-day-count { font-size: 0.65rem; }
    .avail-day-header { font-size: 0.6rem; padding: 4px 2px; }
}

/* ============================================================
   Section 68 — ZIP Download Progress Panel
   ============================================================ */
#zipDownloadPanel {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    background: var(--surface);
}
.zip-dl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}
.zip-dl-row:last-child { border-bottom: none; }
.zip-dl-label {
    min-width: 72px;
    font-size: 0.82rem;
    color: var(--muted);
    white-space: nowrap;
}
.zip-dl-bar-wrap { flex: 1; }
.zip-dl-pct {
    min-width: 148px;
    font-size: 0.80rem;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
}

/* ── Light Theme ───────────────────────────────────────────────────────── */
[data-theme="light"] #zipDownloadPanel {
    background: rgba(255,255,255,0.80);
}

/* ═══════════════════════════════════════════════════════════════════════════
   § 69 — Files Gallery (event_image_view)
   filter bar · grid · lightbox · album mode · color tools · bulk bar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── v0 ROLLBACK — original float-based thumbnail layout (pre-modernisation)
   To revert, uncomment this block and delete the new § 69 rules below.
   Source: § 20 lines 1954–1986 + § 65 .thumb-qc
   ─────────────────────────────────────────────────────────────────────────
#files { --thumb-size: 180px; }

.thumb {
  position: relative;
  width: calc(var(--thumb-size) + 50px);
  min-height: calc(var(--thumb-size) + 90px);
  float: left;
  padding: 2px;
  margin: 5px;
  background: var(--surface-hover);
}
.thumb input[type="checkbox"] { margin-bottom: 6px; }
.thumb img {
  display: block;
  max-width: var(--thumb-size);
  max-height: var(--thumb-size);
  margin: 5px auto;
}
.thumb-size-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 12px;
  font-size: 12px;
}
.thumb-size-control input[type="range"] { width: 180px; vertical-align: middle; }
.thumb-size-value {
  min-width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.thumb-qc { position: relative; }
   ─────────────────────────────────────────────────────────────────────── */

/* ── Filter bar ────────────────────────────────────────────────────────── */
.files-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}
.files-filter-bar select,
.files-filter-bar .form-select {
    min-width: 130px;
    font-size: 0.82rem;
    height: 32px;
    padding: 3px 8px;
}

/* Orientation chips */
.orientation-chips { display: flex; gap: 4px; }
.orientation-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    color: var(--muted);
    background: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}
.orientation-chip:hover { border-color: var(--brand); color: var(--text); }
.orientation-chip.active {
    background: var(--c-violet-bg);
    border-color: var(--brand);
    color: var(--brand);
}

/* View-mode toggle */
.view-mode-toggle { display: flex; gap: 4px; }
.view-mode-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
    font-size: 0.85rem;
    background: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.view-mode-btn:hover  { border-color: var(--brand); color: var(--text); }
.view-mode-btn.active { background: var(--c-violet-bg); border-color: var(--brand); color: var(--brand); }

/* Thumb-size slider row */
.files-size-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--muted);
}
.files-size-row input[type=range] { width: 100px; accent-color: var(--brand); }
#thumbSizeValue { min-width: 48px; }

/* ── Image grid ─────────────────────────────────────────────────────────── */
#files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    padding-top: 6px;
}
.files-grid-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}
.files-grid-item:hover { transform: translateY(-2px); border-color: var(--brand); }
.files-grid-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

/* Status overlays */
.files-grid-item.is-hidden { opacity: 0.40; }
.files-grid-item.is-hidden img { filter: grayscale(0.6); }
.fg-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}
.fg-badge-hidden  { background: rgba(245,158,11,0.88); color: #fff; }
.fg-badge-lost    { background: rgba(239,68,68,0.88);  color: #fff; }
.fg-badge-selected {
    left: auto;
    right: 5px;
    background: rgba(34, 197, 94, 0.92);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
}

.files-grid-item.fg-selected {
    border-color: rgba(34, 197, 94, 0.9);
    box-shadow:
        0 0 0 2px rgba(34, 197, 94, 0.38),
        0 14px 32px rgba(34, 197, 94, 0.22);
    transform: translateY(-2px);
}
[data-theme="light"] .files-grid-item.fg-selected {
    box-shadow:
        0 0 0 2px rgba(34, 197, 94, 0.42),
        0 10px 24px rgba(16, 185, 129, 0.22);
}

/* Selection checkbox */
.fg-check {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.6);
    background: rgba(0,0,0,0.35);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #fff;
}
.files-grid-item.selected .fg-check,
.fg-check.checked {
    background: var(--brand);
    border-color: var(--brand);
}

/* Scroll sentinel */
#files-sentinel {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.82rem;
    margin-top: 10px;
}

/* Loading skeletons */
.fg-skeleton {
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    aspect-ratio: 1;
}
.fg-skeleton::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

/* ── Lightbox ───────────────────────────────────────────────────────────── */
#filesLightbox {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0,0,0,0.92);
    flex-direction: column;
}

/* Toolbar strip */
.lb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(0,0,0,0.55);
    flex-shrink: 0;
    gap: 10px;
}
.lb-title {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-counter { font-size: 0.80rem; color: rgba(255,255,255,0.55); white-space: nowrap; }
.lb-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.80);
    cursor: pointer;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.06);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.lb-btn:hover { background: var(--c-violet-bg); border-color: var(--brand); color: #fff; }
.lb-btn.active { background: var(--c-violet-bg); border-color: var(--brand); color: var(--brand); }

/* Toolbar nav/close button aliases */
.lb-nav-btn,
.lb-close-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.80);
    cursor: pointer;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.06);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
.lb-nav-btn:hover,
.lb-close-btn:hover { background: var(--c-violet-bg); border-color: var(--brand); color: #fff; }
.lb-nav-btn:disabled { opacity: 0.35; cursor: default; }
.lb-nav-btn:disabled:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.80); }

/* Row container below toolbar (.lb-body in HTML) */
.lb-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* Image centering area (.lb-main in HTML, .lb-center in legacy CSS) */
.lb-main,
.lb-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

/* Image + canvas — support both camelCase (HTML) and kebab-case (legacy) IDs */
#lb-image, #lbImage,
#lb-canvas, #lbCanvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    user-select: none;
}

/* Prev/Next arrows */
.lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.50);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s;
    z-index: 2;
}
.lb-arrow:hover { background: var(--brand); border-color: var(--brand); }
.lb-arrow.lb-prev { left: 12px; }
.lb-arrow.lb-next { right: 12px; }

/* Side panel */
.lb-panel {
    width: 280px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.60);
    border-left: 1px solid rgba(255,255,255,0.08);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: width 0.2s;
}
.lb-panel.collapsed { width: 0; overflow: hidden; }

/* Panel section aliases (.lb-section / .lb-panel-section both supported) */
.lb-panel-section,
.lb-section {
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.lb-panel-title,
.lb-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.45);
    margin-bottom: 10px;
}

/* Color slider rows */
.lb-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.lb-slider-label,
.lb-slider-row label {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.60);
    min-width: 68px;
    margin-bottom: 0;
}
.lb-slider-row input[type=range] {
    flex: 1;
    accent-color: var(--brand);
    height: 4px;
}
.lb-slider-val,
.lb-val {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    min-width: 28px;
    text-align: right;
}
.lb-reset-link {
    font-size: 0.72rem;
    color: var(--brand);
    cursor: pointer;
    text-decoration: none;
}
.lb-reset-link:hover { text-decoration: underline; }

/* QC action buttons inside panel */
.lb-qc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-qc-btn {
    font-size: 0.74rem;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.80);
    background: rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background 0.15s;
}
.lb-qc-btn:hover   { background: rgba(255,255,255,0.14); }
.lb-qc-btn.danger  { border-color: rgba(239,68,68,0.45); color: rgba(239,68,68,0.9); }
.lb-qc-btn.danger:hover { background: rgba(239,68,68,0.15); }
.lb-qc-btn.success { border-color: rgba(34,197,94,0.45);  color: rgba(34,197,94,0.9); }
.lb-qc-btn.success:hover { background: rgba(34,197,94,0.15); }

/* ── Album mode ─────────────────────────────────────────────────────────── */
#files-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding-top: 6px;
}
.album-card {
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}
.album-card:hover { transform: translateY(-2px); border-color: var(--brand); }
.album-cover {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}
.album-cover-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 2rem;
}
.album-info {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.album-code {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-count {
    font-size: 0.74rem;
    color: var(--muted);
    white-space: nowrap;
}

/* Sub-grid inside expanded album row */
.album-subgrid-row {
    grid-column: 1 / -1;
    padding: 8px;
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 4px;
}
.album-subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    margin-top: 6px;
}

/* ── Bulk action bar ────────────────────────────────────────────────────── */
#files-bulk-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--surface);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(12px);
    padding: 10px 20px;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
#files-bulk-bar.open { display: flex; }
#filesBulkBar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--surface);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(12px);
    padding: 10px 20px;
}
#files-main-bulk-bar,
#files-event-bulk-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--surface);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(12px);
    padding: 10px 20px;
}
#files-main-bulk-bar.open,
#files-event-bulk-bar.open { display: block; }
.bulk-bar-count {
    font-size: 0.82rem;
    color: var(--muted);
    min-width: 80px;
}
.bulk-bar-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
}

/* ── Light theme overrides ──────────────────────────────────────────────── */
[data-theme="light"] .files-grid-item  { background: #fff; }
[data-theme="light"] .album-card       { background: #fff; }
[data-theme="light"] .lb-toolbar       { background: rgba(255,255,255,0.92); }
[data-theme="light"] .lb-title         { color: #374151; }
[data-theme="light"] .lb-counter       { color: #9ca3af; }
[data-theme="light"] .lb-btn,
[data-theme="light"] .lb-nav-btn,
[data-theme="light"] .lb-close-btn    { color: #374151; border-color: #d1d5db; background: rgba(0,0,0,0.04); }
[data-theme="light"] .lb-btn:hover,
[data-theme="light"] .lb-nav-btn:hover,
[data-theme="light"] .lb-close-btn:hover { background: var(--c-violet-bg); border-color: var(--brand); color: var(--brand); }
[data-theme="light"] .lb-panel        { background: rgba(255,255,255,0.92); border-left-color: #e5e7eb; }
[data-theme="light"] .lb-panel-section,
[data-theme="light"] .lb-section      { border-bottom-color: #f0f0f0; }
[data-theme="light"] .lb-panel-title,
[data-theme="light"] .lb-section-title { color: #9ca3af; }
[data-theme="light"] .lb-slider-label,
[data-theme="light"] .lb-slider-row label { color: #6b7280; }
[data-theme="light"] .lb-slider-val,
[data-theme="light"] .lb-val          { color: #9ca3af; }
[data-theme="light"] .lb-qc-btn        { color: #374151; border-color: #d1d5db; background: #f9fafb; }
[data-theme="light"] .lb-arrow         { background: rgba(255,255,255,0.80); border-color: #d1d5db; color: #374151; }
[data-theme="light"] .lb-arrow:hover   { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-theme="light"] #files-bulk-bar   { background: rgba(255,255,255,0.95); border-top-color: #e5e7eb; }
[data-theme="light"] #filesBulkBar,
[data-theme="light"] #files-main-bulk-bar,
[data-theme="light"] #files-event-bulk-bar { background: rgba(255,255,255,0.95); border-top-color: #e5e7eb; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .lb-panel { display: none; }
    .lb-arrow { width: 36px; height: 36px; font-size: 0.95rem; }
    .files-filter-bar { gap: 6px; }
    #files-album-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Legacy Files views structural redesign pass */
#files .tableBorderLeftTopRight {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
}
#files .tableSubTitle,
#files .tableSubTitleTop,
#files .tableSubTitleBottomTop,
#files .tableSubTitleBottomTopRight {
    background: var(--surface-3);
    border-color: var(--border);
}
#files .tableBorderBottomSoft {
    border-color: var(--border);
}
#files #subtitle {
    margin: 0 0 0.75rem 0;
    font-weight: 700;
    color: var(--text);
}
#files .msg,
#files .errmsg {
    margin-bottom: 0.75rem;
}
#files input[type="button"],
#files input[type="submit"],
#files button,
#files .btn {
    border-radius: 999px;
}


/* ============================================================================
   § 68  VISUAL SCHEDULER CANVAS
   Drag-and-drop scheduling canvas for Bookings → Schedule
   Layout: two-panel (template palette left + week canvas right)
   Interaction: jQuery UI draggable/droppable + mousedown draw
   ============================================================================ */

/* ── Shell layout ─────────────────────────────────────────────────────────── */
.vs-shell {
    display: flex;
    gap: 0;
    min-height: 600px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
}

/* ── Left palette panel ───────────────────────────────────────────────────── */
.vs-palette {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: rgba(0,0,0,0.18);
    padding: 14px 12px;
    gap: 8px;
}
.vs-palette-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 2px 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

/* Day template draggable cards */
.vs-tpl-card {
    border-radius: 8px;
    padding: 8px 10px;
    cursor: grab;
    user-select: none;
    border: 1px solid transparent;
    transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    background: rgba(255,255,255,0.05);
    border-color: var(--border);
}
.vs-tpl-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    background: rgba(255,255,255,0.09);
}
.vs-tpl-card.ui-draggable-dragging {
    opacity: 0.85;
    transform: rotate(1.5deg) scale(1.04);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    cursor: grabbing;
    z-index: 9999;
}
.vs-tpl-swatch {
    width: 10px;
    min-width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 3px;
    flex-shrink: 0;
}
.vs-tpl-label {
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.vs-tpl-sub {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 1px;
}
.vs-tpl-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s;
}
.vs-tpl-card:hover .vs-tpl-actions { opacity: 1; }
.vs-tpl-act-btn {
    background: none;
    border: none;
    padding: 1px 3px;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.7rem;
    border-radius: 3px;
    transition: color 0.1s, background 0.1s;
}
.vs-tpl-act-btn:hover { color: var(--text); background: rgba(255,255,255,0.1); }

/* ── Canvas area (right panel) ────────────────────────────────────────────── */
.vs-canvas {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Season header bar */
.vs-season-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: rgba(0,0,0,0.12);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.vs-season-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    padding: 3px 10px 3px 6px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background 0.12s;
    color: var(--text);
}
.vs-season-chip:hover { background: rgba(255,255,255,0.11); }
.vs-season-chip.active { border-color: var(--brand); background: var(--c-violet-bg); }
.vs-season-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vs-season-dates {
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 400;
}

/* Week grid */
.vs-week {
    display: flex;
    flex: 1;
    min-width: 560px;
}

/* Time ruler */
.vs-ruler {
    width: 48px;
    flex-shrink: 0;
    padding-top: 76px; /* aligns with day-header height */
    position: relative;
    background: rgba(0,0,0,0.08);
    border-right: 1px solid var(--border);
    user-select: none;
}
.vs-ruler-tick {
    position: absolute;
    right: 8px;
    font-size: 0.65rem;
    color: var(--muted);
    transform: translateY(-50%);
    white-space: nowrap;
    line-height: 1;
}
.vs-ruler-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
    opacity: 0.5;
}

/* Day column wrapper */
.vs-days {
    display: flex;
    flex: 1;
}
.vs-day-col {
    flex: 1;
    min-width: 90px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: background 0.15s;
}
.vs-day-col:last-child { border-right: none; }

/* Day column header */
.vs-day-header {
    height: 76px;
    border-bottom: 1px solid var(--border);
    padding: 5px 8px 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: rgba(0,0,0,0.12);
    flex-shrink: 0;
    gap: 2px;
}

/* Intensity row in day header */
.vs-intensity-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.vs-intensity-input {
    width: 54px;
    padding: 1px 4px;
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    line-height: 1.4;
    -moz-appearance: textfield;
}
.vs-intensity-input::-webkit-inner-spin-button,
.vs-intensity-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vs-intensity-input:focus {
    outline: none;
    border-color: var(--brand);
    background: rgba(124,58,237,0.12);
}
.vs-intensity-input.vs-dirty {
    border-color: var(--c-amber);
    color: var(--c-amber);
}
.vs-intensity-label {
    font-size: 0.62rem;
    color: var(--muted);
    white-space: nowrap;
}
.vs-clear-day-btn {
    margin-left: auto;
    background: none;
    border: none;
    padding: 1px 3px;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.65rem;
    border-radius: 3px;
    line-height: 1;
}
.vs-clear-day-btn:hover { color: var(--c-red); background: rgba(239,68,68,0.1); }

/* Save Calendar button in toolbar */
#vs-save-calendar-btn {
    margin-left: auto;
}

/* Light theme */
[data-theme="light"] .vs-intensity-input {
    background: rgba(0,0,0,0.04);
    color: #0f172a;
}
[data-theme="light"] .vs-intensity-input:focus {
    background: rgba(124,58,237,0.06);
}
.vs-day-header-top {
    display: flex;
    align-items: center;
    gap: 6px;
}
.vs-day-name {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
}
.vs-day-toggle {
    margin-left: auto;
    width: 30px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.vs-day-hours-badge {
    font-size: 0.65rem;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 4px;
    border-radius: 4px;
    border: 1px dashed transparent;
    transition: border-color 0.12s, color 0.12s;
    display: inline-block;
    max-width: 100%;
}
.vs-day-hours-badge:hover {
    border-color: var(--brand);
    color: var(--brand);
}
.vs-day-hours-badge.vs-closed {
    color: var(--c-red);
    font-style: italic;
}

/* Day body — the droppable drawing canvas */
.vs-day-body {
    flex: 1;
    position: relative;
    cursor: crosshair;
    min-height: 600px;
    transition: background 0.15s;
}
.vs-day-body.ui-droppable-hover {
    background: rgba(124, 58, 237, 0.06);
}
.vs-day-col.vs-closed .vs-day-body {
    cursor: default;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 6px,
        rgba(255,255,255,0.015) 6px,
        rgba(255,255,255,0.015) 12px
    );
}

/* Hour grid lines inside day body — slightly thickened so the hour boundaries
   read as the primary grid against the lighter snap sublines below. */
.vs-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--border);
    opacity: 0.55;
    pointer-events: none;
}
/* Snap-interval dashed sublines (5/10/15/30) — faint dashed guides; sit behind
   blocks. Drawn dynamically by vsAppendSnapLines() at the current snap step. */
.vs-snap-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--muted);
    opacity: 0.35;
    pointer-events: none;
}
/* On the light canvas (white-ish body) var(--border) washed out — use a darker
   slate dash so the snap guides stay readable. */
[data-theme="light"] .vs-snap-line {
    border-top-color: rgba(15, 23, 42, 0.4);
    opacity: 0.5;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .vs-snap-line {
        border-top-color: rgba(15, 23, 42, 0.4);
        opacity: 0.5;
    }
}

/* ── Canvas blocks ────────────────────────────────────────────────────────── */
.vs-block {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 2px;
    padding: 4px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: move;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    transition: box-shadow 0.12s, opacity 0.12s;
    user-select: none;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.vs-block:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.32);
    z-index: 20;
}
.vs-block.ui-draggable-dragging {
    opacity: 0.88;
    z-index: 9998;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.vs-block.vs-block-blocked {
    background: repeating-linear-gradient(
        -45deg,
        rgba(107,114,128,0.35),
        rgba(107,114,128,0.35) 5px,
        rgba(107,114,128,0.18) 5px,
        rgba(107,114,128,0.18) 10px
    );
    border-color: rgba(107,114,128,0.4);
    cursor: default;
}
.vs-block.vs-block-blocked .vs-block-label { color: var(--c-gray); }

/* #228 — Eraser tool: tagged blocks render hatched + greyed but stay visible
   in the canvas. Customer booking flow ignores them entirely (slot generator
   skips is_erased rows). Toggle on / off from the toolbar eraser button. */
.vs-block.vs-block-erased {
    background: repeating-linear-gradient(
        -45deg,
        rgba(156,163,175,0.40),
        rgba(156,163,175,0.40) 4px,
        rgba(156,163,175,0.18) 4px,
        rgba(156,163,175,0.18) 8px
    );
    border-color: rgba(156,163,175,0.55);
    opacity: 0.7;
}
.vs-block.vs-block-erased .vs-block-label,
.vs-block.vs-block-erased .vs-block-time,
.vs-block.vs-block-erased .vs-block-service {
    color: var(--c-gray);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Eraser-mode cursor: when active, every block becomes targetable for erase. */
body.vs-eraser-active .vs-block {
    cursor: crosshair !important;
}
body.vs-eraser-active .vs-block:hover {
    outline: 2px solid var(--c-red);
    outline-offset: -2px;
}

/* Block state: held (scheduled but not published to customers) */
.vs-block.vs-block-held {
    background: repeating-linear-gradient(
        -45deg,
        rgba(245,158,11,0.30),
        rgba(245,158,11,0.30) 5px,
        rgba(245,158,11,0.12) 5px,
        rgba(245,158,11,0.12) 10px
    );
    border-color: var(--c-amber);
    opacity: 0.8;
}
.vs-block.vs-block-held .vs-block-label::after {
    content: ' (Held)';
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--c-amber);
}

/* Block state: proposed (staff change pending approval) */
.vs-block.vs-block-proposed {
    background: repeating-linear-gradient(
        -45deg,
        rgba(168,85,247,0.30),
        rgba(168,85,247,0.30) 5px,
        rgba(168,85,247,0.12) 5px,
        rgba(168,85,247,0.12) 10px
    );
    border: 2px dashed var(--c-purple);
    opacity: 0.85;
}
.vs-block.vs-block-proposed .vs-block-label::after {
    content: ' (Proposed)';
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--c-purple);
}

.vs-block.vs-from-template::after {
    content: '';
    position: absolute;
    bottom: 3px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
}
.vs-block-label {
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vs-block-time {
    font-size: 0.65rem;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    margin-top: 2px;
}
.vs-block-service {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.65);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Sessions/duration + release-schedule readout on a canvas block (white text on
   the block's coloured fill, matching .vs-block-service). */
.vs-block-sessions {
    font-size: 0.66rem;
    color: rgba(255,255,255,0.92);
    margin-top: 2px;
    white-space: nowrap;
}
.vs-block-sessions strong { font-weight: 700; }
.vs-block-release {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.62);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vs-block-release i { font-size: 0.55rem; opacity: 0.8; }
/* Block-rule recommendation (advisory) — a long block that "needs a break". */
.vs-block-flag {
    font-size: 0.6rem;
    margin-top: 1px;
    color: #fff;
    background: var(--c-amber);
    border-radius: 3px;
    padding: 0 4px;
    display: inline-block;
    max-width: 100%;
}
.vs-block-flag i { font-size: 0.55rem; }
.vs-block-flagged { box-shadow: inset 0 0 0 1px var(--c-amber); }

/* Resize handle at bottom of block */
.vs-block-resize {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    background: rgba(255,255,255,0.08);
    border-radius: 0 0 6px 6px;
}
.vs-block-resize:hover { background: rgba(255,255,255,0.22); }

/* Delete × button on block */
.vs-block-del {
    position: absolute;
    top: 2px;
    right: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 0.6rem;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    display: none;
    padding: 0;
}
.vs-block:hover .vs-block-del { display: block; }
.vs-block-del:hover { background: var(--c-red); color: #fff; }

/* Ghost block (while drawing) */
.vs-block-ghost {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 2px;
    background: rgba(124, 58, 237, 0.12);
    border: 2px dashed var(--brand);
    pointer-events: none;
    z-index: 5;
    transition: none;
}

/* ── Block popover (assign service + label) ───────────────────────────────── */
.vs-popover {
    position: fixed;
    z-index: 10000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.55);
    padding: 14px 16px;
    min-width: 240px;
    max-width: 300px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.vs-popover-title {
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vs-popover-close {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 2px;
    line-height: 1;
}
.vs-popover-close:hover { color: var(--text); }
.vs-popover .form-label { font-size: 0.72rem; color: var(--muted); margin-bottom: 3px; }
.vs-popover .form-control,
.vs-popover .form-select { font-size: 0.78rem; margin-bottom: 8px; }
.vs-popover-footer {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* ── Hours editor popover ─────────────────────────────────────────────────── */
.vs-hours-popover {
    position: fixed;
    z-index: 10001;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    padding: 12px 14px;
    min-width: 200px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── Drop preview overlay ─────────────────────────────────────────────────── */
.vs-drop-preview {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 6px;
    border: 2px dashed var(--brand);
    background: rgba(124,58,237,0.12);
    pointer-events: none;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.1s;
}
.vs-day-body.ui-droppable-hover .vs-drop-preview { opacity: 1; }

/* ── Season modal ─────────────────────────────────────────────────────────── */
.vs-season-color-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.vs-color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.12s, transform 0.1s;
}
.vs-color-swatch:hover { transform: scale(1.15); }
.vs-color-swatch.selected { border-color: #fff; }

/* ── Light theme overrides ────────────────────────────────────────────────── */
[data-theme="light"] .vs-palette              { background: rgba(0,0,0,0.03); }
[data-theme="light"] .vs-tpl-card             { background: #fff; border-color: #e5e7eb; }
[data-theme="light"] .vs-tpl-card:hover       { background: #f9fafb; }
[data-theme="light"] .vs-canvas               { background: #f8fafc; }
[data-theme="light"] .vs-season-bar           { background: rgba(0,0,0,0.03); }
[data-theme="light"] .vs-day-header           { background: #f1f5f9; }
[data-theme="light"] .vs-ruler                { background: #f1f5f9; }
[data-theme="light"] .vs-popover              { background: rgba(255,255,255,0.97); }
[data-theme="light"] .vs-hours-popover        { background: rgba(255,255,255,0.97); }
[data-theme="light"] .vs-day-col.vs-closed .vs-day-body {
    background: repeating-linear-gradient(
        -45deg, transparent, transparent 6px,
        rgba(0,0,0,0.025) 6px, rgba(0,0,0,0.025) 12px
    );
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .vs-palette { width: 180px; }
    .vs-day-col { min-width: 72px; }
}
@media (max-width: 640px) {
    .vs-shell   { flex-direction: column; }
    .vs-palette { width: 100%; border-right: none; border-bottom: 1px solid var(--border);
                  flex-direction: row; flex-wrap: wrap; padding: 10px; }
    .vs-week    { min-width: 420px; }
}

/* ── Palette section dividers ────────────────────────────────────────────── */
.vs-palette-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vs-palette-section + .vs-palette-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.vs-palette-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

/* ── Part chip (atomic block definition in palette) ──────────────────────── */
.vs-part-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    cursor: grab;
    user-select: none;
    transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
    font-size: 0.8rem;
    position: relative;
}
.vs-part-chip:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.vs-part-grip {
    color: var(--muted);
    font-size: 0.72rem;
    cursor: grab;
    padding: 0 3px 0 0;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.12s;
}
.vs-part-chip:hover .vs-part-grip { opacity: 1; }
.vs-part-grip:active { cursor: grabbing; }
.vs-part-chip.ui-sortable-handle { cursor: default; }
.vs-part-chip.ui-sortable-placeholder {
    visibility: visible !important;
    background: rgba(124,58,237,0.12);
    border: 1px dashed var(--brand);
    border-radius: 6px;
}
.vs-part-swatch {
    width: 10px;
    min-width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vs-part-label {
    flex: 1;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vs-part-dur {
    font-size: 0.68rem;
    color: var(--muted);
    flex-shrink: 0;
    white-space: nowrap;
}
.vs-part-blocked-tag {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-amber);
    flex-shrink: 0;
}
.vs-part-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s;
}
.vs-part-chip:hover .vs-part-actions { opacity: 1; }
.vs-part-act-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.68rem;
    border-radius: 3px;
    transition: color 0.1s, background 0.1s;
    line-height: 1;
}
.vs-part-act-btn:hover { color: var(--text); background: rgba(255,255,255,0.1); }
.vs-part-act-btn.del:hover { color: var(--c-red); }

/* ── Part empty state ────────────────────────────────────────────────────── */
.vs-parts-empty {
    font-size: 0.75rem;
    color: var(--muted);
    text-align: center;
    padding: 10px 4px;
    font-style: italic;
}

/* ── Part modal color swatch grid ────────────────────────────────────────── */
.vs-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
}

/* ── Light theme overrides for parts ─────────────────────────────────────── */
[data-theme="light"] .vs-part-chip             { background: #fff; border-color: #e2e8f0; }
[data-theme="light"] .vs-part-chip:hover       { background: #f8fafc; }
[data-theme="light"] .vs-palette-section + .vs-palette-section { border-top-color: #e2e8f0; }


/* ══════════════════════════════════════════════════════════════════════════
   Section 69 — Visual Scheduler Phase 5: drag/drop, resize, block popover,
                template editor offcanvas
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Block drag / resize states ─────────────────────────────────────────── */
.vs-block-resize {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    border-radius: 0 0 3px 3px;
    background: rgba(255,255,255,0.12);
    z-index: 2;
}
.vs-block-resize:hover {
    background: rgba(255,255,255,0.30);
}
.vs-block.vs-block-dragging {
    opacity: 0.85;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    z-index: 50;
    cursor: grabbing !important;
}
.vs-block.vs-block-resizing {
    opacity: 0.90;
    z-index: 50;
    cursor: ns-resize !important;
}

/* ── Drop hover on day body ──────────────────────────────────────────────── */
.vs-day-body.vs-drop-hover {
    background: rgba(124, 58, 237, 0.08);
    outline: 2px dashed var(--brand);
    outline-offset: -2px;
}

/* ── Save-as-template button in day column header ────────────────────────── */
.vs-save-tpl-btn {
    background:  transparent;
    border:      none;
    padding:     0 3px;
    font-size:   0.72rem;
    color:       var(--muted);
    cursor:      pointer;
    line-height: 1;
    opacity:     0.55;
    transition:  opacity 0.15s, color 0.15s;
}
.vs-save-tpl-btn:hover { color: var(--brand); opacity: 1; }

/* ── Block assignment popover ────────────────────────────────────────────── */
#vs-block-pop {
    background:           var(--surface);
    border:               1px solid var(--border);
    border-radius:        8px;
    padding:              12px 14px;
    box-shadow:           var(--shadow);
    backdrop-filter:      blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Template editor offcanvas ───────────────────────────────────────────── */
#vs-template-editor {
    background: var(--bg-mid);
    border-left: 1px solid var(--border);
}
#vs-template-editor .offcanvas-title {
    font-size:   0.9rem;
    font-weight: 700;
    color:       var(--text);
}
#vs-template-editor .offcanvas-body {
    color: var(--text);
}

/* ── Mini template canvas wrapper ────────────────────────────────────────── */
.vs-tpl-canvas-wrap {
    border:        1px solid var(--border);
    border-radius: 4px;
    background:    var(--bg-bot);
    overflow-y:    auto;
    max-height:    450px;
}
.vs-tpl-canvas-inner {
    position:   relative;
    display:    flex;
    min-height: 900px;
}
#vste-ruler {
    width:      36px;
    flex-shrink: 0;
    position:   relative;
    min-height: 900px;
    background: var(--bg-bot);
}
#vste-body {
    flex:       1;
    position:   relative;
    min-height: 900px;
}

/* ── Template editor slot (uses same .vs-block styles) ───────────────────── */
.vs-block.vs-tpl-slot { cursor: grab; }

/* ── Light theme overrides ───────────────────────────────────────────────── */
/* During palette drag: blocks pass pointer events through so day body always receives drop */
body.vs-palette-dragging .vs-block {
    pointer-events: none !important;
}

/* ── Canvas toolbar (snap + view controls) ───────────────────────────────── */
.vs-canvas-toolbar {
    padding: 6px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(0,0,0,0.08);
    flex-shrink: 0;
}
.vs-toolbar-label {
    font-size: 0.7rem;
    color: var(--muted);
    white-space: nowrap;
}
.vs-toolbar-select {
    font-size: 0.72rem !important;
    padding: 1px 20px 1px 6px !important;
    height: auto !important;
    width: auto !important;
}
.vs-view-btn.active {
    background: var(--c-violet-bg) !important;
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}
[data-theme="light"] .vs-canvas-toolbar { background: rgba(0,0,0,0.03); }

/* ── Day view: single-column mode ────────────────────────────────────────── */
.vs-day-col.vs-day-view-hidden {
    display: none !important;
}
.vs-day-col.vs-day-view-solo {
    flex: 1;
    min-width: 0;
    /* Clicking the day name label cues user it's interactive */
    cursor: default;
}
.vs-day-col.vs-day-view-solo .vs-day-name {
    font-size: 0.85rem;
    cursor: default;
}
/* In week view, day name acts as a day-view shortcut link */
.vs-week-view .vs-day-name {
    cursor: pointer;
    transition: color 0.12s;
}
.vs-week-view .vs-day-name:hover {
    color: var(--brand);
}

[data-theme="light"] .vs-day-body.vs-drop-hover {
    background: rgba(124,58,237,0.05);
    outline-color: var(--brand);
}
[data-theme="light"] #vs-block-pop {
    background: rgba(255,255,255,0.95);
}
[data-theme="light"] #vs-template-editor {
    background: #f8fafc;
    border-left-color: #e2e8f0;
}
[data-theme="light"] .vs-tpl-canvas-wrap,
[data-theme="light"] #vste-ruler,
[data-theme="light"] #vste-body {
    background: #ffffff;
}


/* ============================================================================
   § 70  SERVICE CARD BUILDER
   Two-column builder: sidebar (Display Options) + main (live card preview)
   Preview card CSS mirrors cheddar's booking.css card classes exactly.
   Used by: bookings/editservice
   ============================================================================ */

/* ---- Builder shell ---- */
.svc-builder-shell {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.svc-builder-sidebar {
    flex: 0 0 240px;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.svc-builder-main { flex: 1 1 0; min-width: 0; }

/* ---- Sidebar option sections ---- */
.svc-options-section { margin-bottom: 1.25rem; }
.svc-options-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.svc-options-group-label { font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; }

/* ---- Layout radio pills ---- */
.svc-layout-radio { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.svc-layout-radio label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid var(--border);
    color: var(--muted);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.svc-layout-radio input[type="radio"] { display: none; }
.svc-layout-radio label.svc-layout-active {
    background: var(--c-violet-bg);
    border-color: var(--brand);
    color: var(--brand);
}

/* ---- Toggle rows ---- */
.svc-toggle { display: flex; flex-direction: column; gap: 0.4rem; }
.svc-toggle .form-check {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.2rem 0; border-bottom: 1px solid var(--border); margin: 0;
}
.svc-toggle .form-check:last-child { border-bottom: none; }
.svc-toggle .form-check-label { font-size: 0.8rem; cursor: pointer; flex: 1; padding-left: 0; }
.svc-toggle .form-check-input { margin-left: 0; }

/* ---- Icon swatch button ---- */
.svc-icon-swatch {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; cursor: pointer;
    border: 2px solid var(--border);
    transition: border-color 0.15s, transform 0.1s;
    flex-shrink: 0;
}
.svc-icon-swatch:hover { border-color: var(--brand); transform: scale(1.05); }

/* ---- Icon picker grid ---- */
.svc-icon-option {
    width: 44px; height: 44px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; cursor: pointer;
    border: 2px solid transparent;
    background: var(--c-gray-bg); color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.svc-icon-option:hover { border-color: var(--brand); background: var(--c-violet-bg); }
.svc-icon-option.selected { border-color: var(--brand); background: var(--c-violet-bg); color: var(--brand); }

/* ---- Field hidden / disabled state ---- */
.svc-field-hidden {
    opacity: 0.2;
    pointer-events: none;
    user-select: none;
    filter: grayscale(0.6);
}

/* The preview hero is the ONLY affordance for opening the banner image
   picker, so it must stay clickable even when "Service Image" is toggled
   off. Display-off ≠ can't-set-the-image: the hero stays dimmed (to show
   it won't render on the storefront) but the picker still opens on click. */
#svcPreviewHero.svc-field-hidden {
    pointer-events: auto;
    cursor: pointer;
}

/* ============================================================
   PREVIEW HOST — outer container
   ============================================================ */
.svc-preview-host {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
    background: #e8edf2;          /* neutral staging bg so card stands out */
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
[data-theme="light"] .svc-preview-host { background: #e2e8f0; }

/* ============================================================
   PREVIEW CARD WRAPPER
   data-layout="banner|grid|list" drives structural variants
   ============================================================ */

/* Base defaults (banner) */
.preview-card-wrap {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    color: #1a1a2e;
    box-shadow: 0 2px 14px rgba(0,0,0,0.12);
    width: 100%;
    max-width: 540px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none !important;
}
.preview-card-wrap:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}

/* ---- Grid variant ---- */
.preview-card-wrap[data-layout="grid"] {
    max-width: 220px;
}

/* ---- List variant ---- */
.preview-card-wrap[data-layout="list"] {
    flex-direction: row;
    max-width: 540px;
    min-height: 110px;
}

/* ============================================================
   HERO IMAGE AREA
   ============================================================ */
.preview-hero {
    position: relative;
    width: 100%;
    height: 180px;
    flex-shrink: 0;
    background: #f0eefc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}
.preview-hero img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.preview-hero-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.8rem; font-weight: 600; gap: 0.3rem;
    opacity: 0; transition: opacity 0.18s; pointer-events: none;
}
.preview-hero:hover .preview-hero-overlay { opacity: 1; }
.preview-hero-placeholder {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #9ca3af; gap: 0.2rem;
}

/* Grid: shorter hero */
.preview-card-wrap[data-layout="grid"] .preview-hero { height: 130px; }

/* List: narrow left thumb */
.preview-card-wrap[data-layout="list"] .preview-hero {
    width: 120px; height: auto; min-height: 100%;
    border-radius: 0;
}

/* ============================================================
   CARD BODY
   ============================================================ */
.preview-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

/* Grid body: smaller padding */
.preview-card-wrap[data-layout="grid"] .preview-body { padding: 12px; }

/* ============================================================
   ICON + TITLE ROW  (cheddar: .d-flex.align-items-center.gap-3)
   ============================================================ */
.preview-icon-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Grid: stack icon above text */
.preview-card-wrap[data-layout="grid"] .preview-icon-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.preview-text-col { flex: 1; min-width: 0; }

/* ---- cheddar svc-icon-block ---- */
.svc-icon-block {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.svc-icon-inner { color: #fff !important; }

/* List: list-icon-block size */
.preview-card-wrap[data-layout="list"] .svc-icon-block {
    width: 54px; height: 54px;
}

/* ============================================================
   BADGE ROW
   ============================================================ */
.preview-badge-row { margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }

/* cheddar .svc-badge */
.svc-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 9px; border-radius: 20px;
    white-space: nowrap;
}
.svc-badge-orange {
    background: rgba(238,81,58,0.12);
    color: #ee513a;
    border: 1px solid rgba(238,81,58,0.28);
    cursor: pointer;
}
.svc-badge-orange:hover { background: rgba(238,81,58,0.2); }
.svc-badge-empty-hint {
    font-size: 0.68rem; color: #9ca3af;
    border: 1px dashed #d1d5db;
    padding: 2px 7px; border-radius: 20px;
    cursor: pointer;
}
.svc-badge-empty-hint:hover { border-color: #ee513a; color: #ee513a; }

/* Badge select — transparent overlay covers the full badge row area */
.svc-badge-select-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    width: 100%;
    height: 100%;
}

/* ============================================================
   TYPOGRAPHY — matches cheddar exactly
   ============================================================ */
/* cheddar uses Poppins; we approximate with system-ui bold */
.preview-card-wrap .card-title {
    font-size: 0.97rem; font-weight: 700;
    color: #1a1a2e; line-height: 1.25;
    margin: 0;
}
.preview-card-wrap .card-title-sm {
    font-size: 1.05rem; font-weight: 700;
    color: #1a1a2e; margin-bottom: 4px;
}
.preview-card-wrap .card-tagline {
    font-size: 0.79rem; font-weight: 600;
    color: #ee513a;               /* cheddar accent-orange */
    margin-bottom: 6px;
}
.preview-card-wrap .card-desc {
    font-size: 0.83rem; color: #1a1a2e;
    opacity: 0.65; line-height: 1.6;
    margin: 0;
}
.preview-card-wrap .card-duration {
    font-size: 0.75rem; color: #1a1a2e; opacity: 0.45;
    display: flex; align-items: center; gap: 4px;
}

/* ============================================================
   INLINE EDITABLE INPUTS inside preview
   ============================================================ */
.svc-inline-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px dashed rgba(0,0,0,0.2) !important;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    opacity: inherit;
    padding: 0 2px;
    width: 100%;
    outline: none;
    transition: border-color 0.15s;
    resize: none;
}
.svc-inline-input:focus { border-bottom-color: rgba(238,81,58,0.6) !important; }

.svc-dur-input {
    width: 42px;
    text-align: center;
    display: inline-block;
    /* hide native spinner arrows so they don't overlap the number */
    -moz-appearance: textfield;
    appearance: textfield;
}
.svc-dur-input::-webkit-outer-spin-button,
.svc-dur-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================================
   FOOTER: Duration + Book
   ============================================================ */
.preview-footer { margin-top: 6px; }

/* Banner layout, duration hidden + description shown: the Book button is moved
   beside the description (mirrors the BYP storefront's description col-8/9 +
   button col-4/3 row). The description textarea flexes, the button stays fixed. */
.preview-desc-btn-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.preview-desc-btn-row .card-desc { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.preview-desc-btn-row > #svcPreviewBtnWrap { flex: 0 0 auto; }

/* ============================================================
   DARK THEME — admin dark mode overrides
   ============================================================ */
[data-theme="dark"] .preview-card-wrap,
:root .preview-card-wrap {
    background: #1e2235;
    color: #e8ecf1;
    box-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
[data-theme="dark"] .preview-card-wrap .card-title,
[data-theme="dark"] .preview-card-wrap .card-title-sm {
    color: #f1f5f9;
}
[data-theme="dark"] .preview-card-wrap .card-desc { color: #cbd5e1; opacity: 0.75; }
[data-theme="dark"] .preview-card-wrap .card-duration { color: #94a3b8; opacity: 1; }
[data-theme="dark"] .svc-inline-input { border-bottom-color: rgba(255,255,255,0.15) !important; }
[data-theme="dark"] .svc-inline-input:focus { border-bottom-color: rgba(238,81,58,0.7) !important; }
[data-theme="dark"] .preview-hero { background: rgba(124,58,237,0.15); }
[data-theme="dark"] .preview-hero-placeholder { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .svc-badge-empty-hint { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.35); }

/* Light theme: card is already white */
[data-theme="light"] .preview-card-wrap { background: #ffffff; color: #1a1a2e; }

/* ============================================================
   IMAGE PICKER MODAL — drop zone
   ============================================================ */
.bk-img-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--surface);
}
.bk-img-drop-zone:hover,
.bk-img-drop-zone:focus-visible {
    border-color: var(--brand);
    background: rgba(124,58,237,0.06);
    color: var(--text);
    outline: none;
}
.bk-img-drop-over {
    border-color: var(--brand) !important;
    background: rgba(124,58,237,0.1) !important;
    color: var(--text) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .svc-builder-shell { flex-direction: column; }
    .svc-builder-sidebar { position: static; max-height: none; flex: none; width: 100%; }
    .preview-card-wrap[data-layout="grid"] { max-width: 100%; }
    .preview-card-wrap[data-layout="list"] .preview-hero { width: 90px; }
}

/* ---- Layout picker cards (settings page) ---- */
.bk-layout-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
    height: 100%;
}
.bk-layout-card:hover { border-color: rgba(124,58,237,0.4); }
.bk-layout-card-active {
    border-color: var(--brand) !important;
    background: var(--c-violet-bg);
}
.bk-layout-card-active strong,
.bk-layout-card-active .fas:not(.fa-check) { color: var(--brand); }
.bk-layout-card-check {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bk-layout-card-active .bk-layout-card-check {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
[data-theme="light"] .bk-layout-card { background: rgba(255,255,255,0.9); }
[data-theme="light"] .bk-layout-card-active { background: var(--c-violet-bg); }


/* ============================================================================
   § 71  PACKAGE CARD BUILDER
   Full-width preview row (mirrors cheddar alternating package layout exactly)
   Odd sort_order → image right (order-md-2). Even → image left (default).
   Used by: bookings/editPackage
   ============================================================================ */

/* ---- Simple / Complex pill toggle ---- */
.pkg-type-toggle {
    display: inline-flex;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
}
.pkg-type-btn {
    background: transparent;
    border: none;
    padding: 0.35rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}
.pkg-type-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pkg-type-btn.active {
    background: var(--brand);
    color: #fff;
}

/* ---- Image column ---- */
/* Image fills column width; min-height for placeholder state */
.pkg-preview-img-wrap {
    position: relative;
    width: 100%;
    min-height: 260px;
    border-radius: 12px;
    background: var(--c-violet-bg);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pkg-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}
.pkg-preview-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    width: 100%;
    min-height: 260px;
    gap: 0.35rem;
}
.pkg-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    gap: 0.4rem;
    opacity: 0;
    transition: opacity 0.18s;
    pointer-events: none;
    border-radius: 12px;
}
.pkg-preview-img-wrap:hover .pkg-img-overlay { opacity: 1; }

/* ---- Content column ---- */
/* Title — matches cheddar h4 */
.pkg-preview-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
}

/* Prices */
.pkg-preview-was {
    font-size: 0.88rem;
    color: var(--muted);
}
.pkg-preview-was s { text-decoration-color: var(--muted); }
/* Sale price — orange accent like cheddar var(--accent-orange) */
.pkg-preview-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ee513a;
}

/* Description */
.pkg-preview-desc {
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Checklist */
.pkg-preview-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pkg-preview-checklist li {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--text);
}
.pkg-preview-checklist li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.65rem;
    color: var(--c-green);
    flex-shrink: 0;
}

/* Select Package button — mirrors cheddar .btn-book */
.pkg-preview-atc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.5rem;
    border-radius: 8px;
    background: #ee513a;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: default;
    pointer-events: none;
    transition: background 0.2s;
}

/* ---- Light theme ---- */
[data-theme="light"] .pkg-type-toggle {
    background: #fff;
    border-color: #cbd5e1;
}
[data-theme="light"] .pkg-type-btn { color: #64748b; }
[data-theme="light"] .pkg-type-btn.active { background: var(--brand); color: #fff; }
[data-theme="light"] .pkg-preview-img-wrap { background: #f1f5f9; }
[data-theme="light"] .pkg-preview-title { color: #0f172a; }
[data-theme="light"] .pkg-preview-checklist li { color: #1e293b; }

/* ═══════════════════════════════════════════════════════════════
   §68 — BOOKING LANDING PAGE EDITOR
   Two-pane visual editor: controls left, live preview right.
   Preview mimics the cheddar dark booking site.
   ─────────────────────────────────────────────────────────────── */

/* ── Editor section headings ────────────────────────────────── */
.lp-section-head {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
}
.lp-section-head i { color: var(--brand); }

/* ── Hero image well (editor left) ─────────────────────────── */
.lp-img-well {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    border: 1.5px dashed var(--border);
    cursor: pointer;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}
.lp-img-well:hover,
.lp-img-well:focus { border-color: var(--brand); outline: none; }
.lp-img-well img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lp-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--muted);
    gap: 0.4rem;
    font-size: 0.82rem;
    text-align: center;
    padding: 1rem;
}
.lp-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    gap: 0.4rem;
    opacity: 0;
    transition: opacity 0.2s;
}
.lp-img-well:hover .lp-img-overlay,
.lp-img-well:focus .lp-img-overlay { opacity: 1; }

/* ── Trust bar repeater rows ────────────────────────────────── */
.lp-trust-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.lp-trust-icon-preview {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(124,58,237,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    flex-shrink: 0;
    font-size: 0.75rem;
}

/* ── Icon input group preview span ─────────────────────────── */
.lp-icon-preview {
    background: rgba(124,58,237,0.18) !important;
    color: var(--brand) !important;
    border-color: var(--border) !important;
    min-width: 40px;
    justify-content: center;
}

/* ── Feature callout rows in editor ────────────────────────── */
.lp-feature-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.9rem;
    background: rgba(255,255,255,0.03);
}

/* ── Gallery thumbs in editor ───────────────────────────────── */
.lp-gallery-thumb {
    position: relative;
    width: 72px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    flex-shrink: 0;
}
.lp-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lp-gallery-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.72);
    border: none;
    color: #fff;
    font-size: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.lp-gallery-thumb-remove:hover { background: var(--c-red); }

/* ── Sticky preview panel ───────────────────────────────────── */
.lp-preview-sticky {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

/* ── Preview container (mimics cheddar dark booking site) ───── */
.lp-preview {
    border-radius: 12px;
    overflow: hidden;
    background: #071a2c;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 16px 48px rgba(0,0,0,0.55);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.lp-placeholder-text {
    color: rgba(255,255,255,0.25);
    font-style: italic;
}

/* ── Preview: Hero ──────────────────────────────────────────── */
.lp-prev-hero {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}
.lp-prev-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #0f2942;
    transition: background-image 0.35s;
}
.lp-prev-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(7,26,44,0.38) 0%, rgba(7,26,44,0.72) 100%);
}
.lp-prev-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2.25rem 1.5rem;
    width: 100%;
}
.lp-prev-headline {
    font-size: 1.45rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
    line-height: 1.25;
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
    word-break: break-word;
}
.lp-prev-subtext {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.78);
    margin-bottom: 1.1rem;
    line-height: 1.55;
    word-break: break-word;
}
.lp-prev-cta {
    display: inline-block;
    padding: 0.55rem 1.7rem;
    background: var(--brand, #7c3aed);
    color: #fff;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    pointer-events: none;
}
.lp-prev-change-hint {
    position: absolute;
    bottom: 0.8rem;
    right: 0.8rem;
    z-index: 3;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.68rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    opacity: 0;
    transition: opacity 0.2s;
}
.lp-prev-hero:hover .lp-prev-change-hint,
.lp-prev-hero:focus .lp-prev-change-hint { opacity: 1; }

/* ── Preview: Trust bar ─────────────────────────────────────── */
.lp-prev-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    min-height: 52px;
}
.lp-prev-trust:empty::before {
    content: 'Trust bar hidden — add items to enable';
    color: rgba(255,255,255,0.22);
    font-size: 0.7rem;
    font-style: italic;
}
.lp-prev-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    background: rgba(124,58,237,0.14);
    border: 1px solid rgba(124,58,237,0.25);
    border-radius: 20px;
    padding: 0.28rem 0.8rem;
    color: #ddd6fe;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}
.lp-prev-trust-item i { color: #a78bfa; font-size: 0.72rem; }

/* ── Preview: How It Works ──────────────────────────────────── */
.lp-prev-hiw {
    padding: 1.1rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.025);
}
.lp-prev-hiw-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #a78bfa;
    text-align: center;
    margin-bottom: 0.7rem;
}
.lp-prev-hiw-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.lp-prev-step {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    color: rgba(255,255,255,0.75);
}
.lp-prev-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand, #7c3aed);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lp-prev-step-arrow {
    color: rgba(255,255,255,0.28);
    font-size: 0.62rem;
}

/* ── Preview: Feature Callouts ──────────────────────────────── */
.lp-prev-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lp-prev-feature {
    padding: 1.1rem 0.8rem;
    border-right: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}
.lp-prev-feature:last-child { border-right: none; }
.lp-prev-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(124,58,237,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    color: #a78bfa;
    font-size: 0.9rem;
}
.lp-prev-feature-title {
    font-size: 0.76rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.3rem;
    word-break: break-word;
    min-height: 1em;
}
.lp-prev-feature-text {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.45;
    word-break: break-word;
}

/* ── Preview: Gallery Strip ─────────────────────────────────── */
.lp-prev-gallery {
    padding: 0.85rem 0;
    background: rgba(255,255,255,0.02);
}
.lp-prev-gallery-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0 0.85rem;
    scrollbar-width: thin;
}
.lp-prev-gallery-strip:empty::before {
    content: 'Gallery images will appear here';
    color: rgba(255,255,255,0.22);
    font-size: 0.7rem;
    font-style: italic;
    white-space: nowrap;
}
.lp-prev-gallery-img {
    width: 90px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    display: block;
    border: 1px solid rgba(255,255,255,0.08);
}

/* ── Light theme overrides ──────────────────────────────────── */
[data-theme="light"] .lp-img-well {
    background: rgba(0,0,0,0.04);
    border-color: #cbd5e1;
}
[data-theme="light"] .lp-feature-row {
    background: rgba(0,0,0,0.02);
    border-color: #e2e8f0;
}
[data-theme="light"] .lp-trust-icon-preview {
    background: rgba(124,58,237,0.1);
}

/* ── Phase 3: Full-pane Customizer Layout ──────────────────── */

.lp-cust {
    display: flex;
    height: calc(100vh - 96px);
    margin: -0.5rem -0.5rem -1.5rem;
    border-top: 1px solid var(--border);
    overflow: hidden;
}

/* Left accordion panel */
.lp-cust-panel {
    width: 340px;
    min-width: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--border);
    background: var(--bg-mid);
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
}
.lp-cust-panel::-webkit-scrollbar { width: 4px; }
.lp-cust-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Panel header */
.lp-cust-ph {
    padding: 0.75rem 1rem 0.65rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    background: var(--bg-mid);
    z-index: 5;
    flex-shrink: 0;
}
.lp-cust-ph-title {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.lp-cust-ph-title i { color: var(--brand); }

/* Save status indicator */
.lp-save-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--border);
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.lp-save-dot.saving { background: var(--c-amber); border-color: var(--c-amber); }
.lp-save-dot.saved  { background: var(--c-green); border-color: var(--c-green); }
.lp-save-dot.error  { background: var(--c-red);   border-color: var(--c-red); }
.lp-save-label {
    font-size: 0.68rem;
    color: var(--muted);
    transition: color 0.2s;
}
.lp-save-label.saving { color: var(--c-amber); }
.lp-save-label.saved  { color: var(--c-green); }
.lp-save-label.error  { color: var(--c-red); }

/* Accordion items */
.lp-acc { border-bottom: 1px solid var(--border); }
.lp-acc:last-child { border-bottom: none; }

.lp-acc-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}
.lp-acc-btn:hover { background: rgba(255,255,255,0.04); }

.lp-acc-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(124,58,237,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--brand);
}

.lp-acc-chev {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--muted);
    transition: transform 0.2s;
}
.lp-acc-btn[aria-expanded="false"] .lp-acc-chev { transform: rotate(-90deg); }

.lp-acc-body {
    padding: 0.2rem 1rem 1.1rem;
}

/* Field labels inside accordion */
.lp-field-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
    display: block;
    margin-bottom: 0.28rem;
    margin-top: 0.8rem;
}
.lp-field-label:first-child { margin-top: 0; }

/* BG type pills */
.lp-bg-pills {
    display: flex;
    gap: 0.28rem;
    margin: 0.35rem 0 0.5rem;
}
.lp-bg-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.32rem 0.3rem;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.14s;
    user-select: none;
}
.lp-bg-pill input[type="radio"] { display: none; }
.lp-bg-pill.active {
    background: rgba(124,58,237,0.14);
    border-color: var(--brand);
    color: var(--brand);
}
.lp-bg-pill:hover:not(.active) { border-color: rgba(124,58,237,0.35); color: var(--text); }

/* Conditional sub-panels */
.lp-bg-sub { display: none; }
.lp-bg-sub.lp-active { display: block; }

/* Color picker row: swatch + hex input */
.lp-color-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.lp-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    cursor: pointer;
    flex-shrink: 0;
    padding: 2px;
    background: transparent;
}
.lp-hex-input {
    font-family: ui-monospace, 'Courier New', monospace !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.06em;
}

/* Gradient angle range */
.lp-angle-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.lp-angle-row input[type="range"] {
    flex: 1;
    accent-color: var(--brand);
}

/* Toggle switch row */
.lp-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0;
}
.lp-toggle-row-label {
    font-size: 0.78rem;
    color: var(--text);
}

/* Preset palette chips */
.lp-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}
.lp-preset-chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.12s;
    flex-shrink: 0;
}
.lp-preset-chip:hover { transform: scale(1.3); }
.lp-preset-chip.active { border-color: #fff; box-shadow: 0 0 0 2px var(--brand); }

/* Trust bar repeater */
.lp-trust-item-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}

/* Icon swatch — visible trigger for the icon picker. Sits inline next
   to its hidden .lp-icon-input. */
.lp-icon-swatch {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: rgba(255,255,255,0.02);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.14s, background 0.14s;
    flex-shrink: 0;
    font-size: 1rem;
    padding: 0;
}
.lp-icon-swatch:hover,
.lp-icon-swatch:focus-visible {
    border-color: var(--brand);
    background: rgba(124,58,237,0.08);
    outline: none;
}
.lp-icon-swatch .lp-icon-emoji {
    font-size: 1.05rem;
    line-height: 1;
}
[data-theme="light"] .lp-icon-swatch { background: #fff; border-color: #e2e8f0; }

/* Icon picker modal — grid layout */
.lp-icon-section { margin-bottom: 1.1rem; }
.lp-icon-section:last-child { margin-bottom: 0; }
.lp-icon-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lp-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 0.35rem;
}
.lp-icon-pick {
    aspect-ratio: 1 / 1;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
    transition: border-color 0.14s, background 0.14s, transform 0.12s;
    padding: 0;
}
.lp-icon-pick:hover,
.lp-icon-pick:focus-visible {
    border-color: var(--brand);
    background: rgba(124,58,237,0.12);
    transform: scale(1.05);
    outline: none;
}
.lp-icon-pick-fa i { font-size: 1.05rem; }
[data-theme="light"] .lp-icon-pick { background: #fff; border-color: #e2e8f0; }

/* Gallery image tiles (Media-Library-only) */
.lp-gal-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.lp-gal-url-row.lp-gal-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.12s;
}
.lp-gal-url-row.lp-gal-tile:hover,
.lp-gal-url-row.lp-gal-tile:focus-visible {
    border-color: var(--brand);
    transform: translateY(-1px);
    outline: none;
}
.lp-gal-tile--filled { border-style: solid; }
.lp-gal-tile-thumb {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.lp-gal-tile-empty {
    text-align: center;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.1;
    padding: 0.3rem;
}
.lp-gal-tile-remove {
    position: absolute;
    top: 4px; right: 4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 2;
}
.lp-gal-url-row.lp-gal-tile:hover .lp-gal-tile-remove,
.lp-gal-url-row.lp-gal-tile:focus-within .lp-gal-tile-remove { opacity: 1; }

/* Keep legacy class hook for any callers that still expect it */
.lp-gal-url-row:not(.lp-gal-tile) {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Add / remove row buttons */
.lp-add-row {
    font-size: 0.74rem;
    color: var(--brand);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: opacity 0.15s;
}
.lp-add-row:hover { opacity: 0.75; }

.lp-remove-row {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.75rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.lp-remove-row:hover { color: var(--c-red); }

/* Feature entry */
.lp-feature-entry textarea { resize: none; }

/* Readonly overlay */
.lp-cust-panel.is-readonly .lp-acc-body {
    opacity: 0.5;
    pointer-events: none;
}

/* Right iframe panel */
.lp-cust-frame-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.lp-cust-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-mid);
    gap: 0.5rem;
    flex-shrink: 0;
}
.lp-cust-bar-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.lp-preview-shell {
    flex: 1;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background:
        repeating-conic-gradient(rgba(255,255,255,0.02) 0 25%, transparent 0 50%) 0 / 24px 24px,
        var(--bg-mid);
    overflow: auto;
    padding: 0;
    transition: padding 0.18s ease;
}
.lp-preview-shell.lp-vp-tablet,
.lp-preview-shell.lp-vp-mobile {
    padding: 1rem 0.5rem;
    align-items: flex-start;
}
.lp-cust-frame {
    flex: 1;
    width: 100%;
    max-width: 100%;
    border: none;
    background: #fff;
    display: block;
    transition: max-width 0.18s ease, height 0.18s ease;
}
.lp-preview-shell.lp-vp-tablet .lp-cust-frame {
    max-width: 768px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    border-radius: 8px;
}
.lp-preview-shell.lp-vp-mobile .lp-cust-frame {
    max-width: 390px;
    width: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    border-radius: 18px;
}

/* Viewport toggle pills */
.lp-vp-pills {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
}
.lp-vp-pill {
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 0.3rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
    border-right: 1px solid var(--border);
}
.lp-vp-pill:last-child { border-right: none; }
.lp-vp-pill:hover:not(.active) { color: var(--text); background: rgba(124,58,237,0.08); }
.lp-vp-pill.active {
    color: var(--brand);
    background: rgba(124,58,237,0.14);
}
.lp-vp-pill:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}
[data-theme="light"] .lp-preview-shell {
    background:
        repeating-conic-gradient(rgba(0,0,0,0.03) 0 25%, transparent 0 50%) 0 / 24px 24px,
        #f1f5f9;
}
[data-theme="light"] .lp-vp-pills { background: #fff; }
[data-theme="light"] .lp-vp-pill { color: #64748b; }
[data-theme="light"] .lp-vp-pill.active { color: var(--brand); }

/* Light theme adjustments */
[data-theme="light"] .lp-cust-panel,
[data-theme="light"] .lp-cust-ph,
[data-theme="light"] .lp-cust-bar { background: #f1f5f9; }
[data-theme="light"] .lp-acc-btn:hover { background: rgba(0,0,0,0.04); }
[data-theme="light"] .lp-bg-pill { border-color: #e2e8f0; color: #64748b; }
[data-theme="light"] .lp-color-swatch { border-color: #e2e8f0; }
[data-theme="light"] .lp-preset-chip.active { border-color: #1e293b; }

/* Responsive: md range (768–991px) keeps two-column layout but
   shrinks the left panel so the iframe doesn't get clipped. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .lp-cust-panel { width: 280px; min-width: 280px; }
    .lp-cust-frame-wrap { min-width: 0; }
    .lp-cust-bar { padding: 0.4rem 0.5rem; }
    .lp-vp-pill { padding: 0.28rem 0.4rem; font-size: 0.72rem; }
    .lp-acc-body { padding: 0.2rem 0.75rem 1rem; }
}

/* Responsive: stack below 768px (tablet portrait + phone). */
@media (max-width: 767.98px) {
    .lp-cust { flex-direction: column; height: auto; }
    .lp-cust-panel { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--border); max-height: 55vh; }
    .lp-cust-frame-wrap { height: 60vh; min-width: 0; }
    .lp-cust-bar { flex-wrap: wrap; row-gap: 0.4rem; }
    .lp-vp-pill .d-md-inline { display: none !important; }
    .lp-preview-shell { padding: 0.5rem 0.25rem; }
    .lp-preview-shell.lp-vp-tablet .lp-cust-frame,
    .lp-preview-shell.lp-vp-mobile .lp-cust-frame { max-width: 100%; }
}

/* Extra-small phones — keep iframe edge-to-edge but preserve scroll. */
@media (max-width: 380px) {
    .lp-cust { margin: 0; }
    .lp-acc-body { padding: 0.2rem 0.5rem 0.8rem; }
}

/* ============================================================
   § 72  PRODUCT CATALOG BROWSER
   Route: /orders/products
   ============================================================ */

/* Layout: folder nav left + content right */
.prod-layout {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}
.prod-folder-nav {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    position: sticky;
    top: 5rem;
}
.prod-content {
    flex: 1 1 0;
    min-width: 0;
}

/* Folder nav links */
.prod-folder-link {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prod-folder-link:hover {
    background: var(--row-hover);
    color: var(--text);
}
.prod-folder-link.active {
    background: rgba(124, 58, 237, .15);
    color: var(--brand);
    font-weight: 600;
}

/* Group card */
.prod-group-card {
    overflow: hidden;
    transition: box-shadow .15s;
}
.prod-group-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .875rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
}
.prod-group-header:hover {
    background: var(--row-hover);
}
.prod-group-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(124, 58, 237, .12);
    color: var(--brand);
    font-size: .9rem;
}
.prod-group-chevron {
    transition: transform .2s;
    color: var(--muted);
    font-size: .8rem;
}
.prod-group-chevron.rotated {
    transform: rotate(90deg);
}
.prod-count-badge {
    font-size: .7rem !important;
}

/* Group body (collapsed by default) */
.prod-group-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    border-top: 0 solid var(--border);
}
.prod-group-body.open {
    max-height: 9999px;
    border-top-width: 1px;
}

/* Bundle list inside group body */
.prod-bundle-list {
    padding: .5rem 0;
}
.prod-bundle-row {
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.prod-bundle-row:last-child {
    border-bottom: none;
}
.prod-bundle-price {
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand);
    white-space: nowrap;
}

/* Item list inside bundle */
.prod-item-list {
    margin-top: .5rem;
    padding: .5rem .75rem;
    background: rgba(0,0,0,.12);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.prod-item-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
}
.prod-item-name {
    flex: 1 1 0;
    min-width: 0;
    color: var(--text);
}
.prod-item-badges {
    flex-shrink: 0;
}

/* Light theme overrides */
[data-theme="light"] .prod-folder-link { color: #475569; }
[data-theme="light"] .prod-folder-link.active { background: rgba(124,58,237,.1); }
[data-theme="light"] .prod-group-icon { background: rgba(124,58,237,.08); }
[data-theme="light"] .prod-item-list { background: rgba(0,0,0,.04); }

/* Responsive: stack below 700px */
@media (max-width: 700px) {
    .prod-layout { flex-direction: column; }
    .prod-folder-nav { flex: none; flex-direction: row; flex-wrap: wrap; position: static; }
    .prod-folder-link { flex: none; }
}

/* ============================================================
   § 73  DISCOUNTS & COUPONS
   Route: /orders/discounts
   ============================================================ */

/* Tab nav */
.disc-tab-nav {
    display: flex;
    gap: .25rem;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--border);
}
.disc-tab {
    display: flex;
    align-items: center;
    padding: .6rem 1.1rem;
    border-radius: 8px 8px 0 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: background .15s, color .15s;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
}
.disc-tab:hover { background: var(--row-hover); color: var(--text); }
.disc-tab.active {
    background: var(--surface);
    color: var(--brand);
    border-color: var(--border);
    border-bottom-color: var(--surface);
}

/* Discount group cards */
.disc-group-card { overflow: hidden; }
.disc-group-icon {
    width: 2rem; height: 2rem;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: rgba(124,58,237,.12);
    color: var(--brand);
    font-size: .9rem;
}

/* Monospace code pill */
.disc-code {
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: .78rem;
    background: rgba(124,58,237,.12);
    color: var(--brand);
    border: 1px solid rgba(124,58,237,.25);
    border-radius: 6px;
    padding: .15rem .5rem;
    letter-spacing: .05em;
}

/* Rules accordion panel */
.disc-rules-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    border-top: 0 solid var(--border);
}
.disc-rules-panel.open {
    max-height: 2000px;
    border-top-width: 1px;
}
.disc-rules-inner { padding: 0; }

/* Bulk generate result grid */
.disc-bulk-results {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .5rem;
}
.disc-bulk-grid { display: flex; flex-direction: column; gap: .3rem; }
.disc-bulk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .25rem .5rem;
    border-radius: 4px;
    font-size: .82rem;
}
.disc-bulk-row:hover { background: var(--row-hover); }

/* Light theme */
[data-theme="light"] .disc-tab.active { background: #fff; border-bottom-color: #fff; }
[data-theme="light"] .disc-group-icon { background: rgba(124,58,237,.08); }
[data-theme="light"] .disc-code { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.2); }

/* ============================================================
   § 74  VENDOR MANAGEMENT
   Route: /storefront/vendors
   ============================================================ */

/* No custom component styles needed — this page uses exclusively
   Bootstrap 5 utilities + shared base components:
     - .filter-bar      (search + status filter row)
     - .data-table      (vendor list table)
     - .badge-pill      (enabled / disabled status dot)
     - .btn-brand       (Add Vendor CTA)
   Modal layout uses Bootstrap .modal + standard .form-control.

   Only exception: the empty-state icon block, handled by Bootstrap
   utility classes (text-center, py-5, text-muted). */

/* ============================================================
   § 75  MARKETPLACE MANAGEMENT
   Route: /storefront/marketplaces
   ============================================================ */

/* ── Layout: two-column sidebar + detail ── */
.mp-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 767px) {
    .mp-layout { grid-template-columns: 1fr; }
}

/* ── Sidebar ── */
.mp-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 80px;
}
.mp-sidebar-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .75rem 1rem .4rem;
}
.mp-list {
    list-style: none;
    margin: 0;
    padding: 0 .5rem .5rem;
}
.mp-list-item {
    display: flex;
    align-items: center;
    gap: .25rem;
    border-radius: 6px;
    padding: .1rem .25rem;
    transition: background .15s;
}
.mp-list-item:hover,
.mp-list-item.active {
    background: rgba(124,58,237,.07);
}
.mp-select-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: none;
    border: none;
    color: var(--text);
    padding: .45rem .5rem;
    text-align: left;
    cursor: pointer;
    border-radius: 5px;
    font-size: .875rem;
    min-width: 0;
}
.mp-list-item.active .mp-select-btn {
    color: var(--brand);
    font-weight: 600;
}
.mp-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-item-actions {
    display: flex;
    gap: .2rem;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s;
}
.mp-list-item:hover .mp-item-actions {
    opacity: 1;
}

/* ── Detail panel ── */
.mp-detail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    min-height: 240px;
}
.mp-section-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .6rem;
}

/* ── Inline pricing forms (product catalog view) ── */
.prod-price-form {
    padding: .25rem 0 .1rem;
    gap: .4rem !important;
}
.prod-price-label {
    font-size: .78rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
    align-self: center;
}
.prod-price-input {
    max-width: 80px !important;
    font-size: .8rem !important;
    padding: .2rem .4rem !important;
    height: auto !important;
}
.prod-price-feedback {
    font-size: .78rem;
    align-self: center;
}
.prod-price-override {
    color: var(--brand) !important;
    font-weight: 600;
}

/* Light theme adjustments */
[data-theme="light"] .mp-sidebar,
[data-theme="light"] .mp-detail {
    background: rgba(255,255,255,.8);
    border-color: rgba(0,0,0,.1);
}
[data-theme="light"] .mp-list-item:hover,
[data-theme="light"] .mp-list-item.active {
    background: rgba(124,58,237,.05);
}

/* ============================================================
   § 76  STOREFRONT ACCOUNT SETTINGS
   Route: /storefront/settings
   ============================================================
   Uses Bootstrap 5 nav-tabs, .card, .form-control, .form-switch,
   .data-table, .badge-pill exclusively — no custom classes needed.

   .sf-faq-row — subtle hover on FAQ list rows (inline style on hover
   is deferred to base component. No custom class required here.) */

/* ============================================================
   § 68  SIGNUP WIZARD
   Route: /signup (public, no auth)
   ============================================================
   Split-panel layout: left brand/progress rail, right form area.
   Uses .premium-card for complete/verify pages.
   Stripe card element lives inside .signup-stripe-card wrapper.     */

.signup-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── Left panel ── */
.signup-left {
    width: 280px;
    flex-shrink: 0;
    background: linear-gradient(160deg, #7c3aed 0%, #4c1d95 100%);
    padding: 40px 28px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.signup-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 44px;
}
.signup-brand-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
}
.signup-brand-logo {
    height: 28px;
    width: auto;
}

/* Step progress */
.signup-progress {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}
.signup-progress-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    position: relative;
}
.signup-progress-item + .signup-progress-item::before {
    content: '';
    position: absolute;
    left: 15px;
    top: -7px;
    width: 2px;
    height: 14px;
    background: rgba(255,255,255,0.18);
}
.signup-progress-item.done + .signup-progress-item::before,
.signup-progress-item.active + .signup-progress-item::before {
    background: rgba(255,255,255,0.45);
}
.signup-step-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 600;
    flex-shrink: 0;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.55);
    border: 2px solid rgba(255,255,255,0.18);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.signup-progress-item.active .signup-step-dot {
    background: #fff;
    color: #7c3aed;
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
}
.signup-progress-item.done .signup-step-dot {
    background: rgba(255,255,255,0.85);
    color: #7c3aed;
    border-color: rgba(255,255,255,0.85);
}
.signup-step-label {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.48);
    font-weight: 500;
    transition: color 0.2s;
}
.signup-progress-item.active .signup-step-label {
    color: #fff;
    font-weight: 600;
}
.signup-progress-item.done .signup-step-label {
    color: rgba(255,255,255,0.75);
}
.signup-brand-footer {
    margin-top: auto;
    padding-top: 28px;
}
.signup-brand-tagline {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
}
.signup-brand-already {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    margin: 0;
}
.signup-brand-already a {
    color: rgba(255,255,255,0.82);
    text-decoration: underline;
}

/* ── Right panel ── */
.signup-right {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 64px 28px;
    background: var(--bg-top);
    overflow-y: auto;
}
.signup-form-area {
    width: 100%;
    max-width: 480px;
}

/* Step header */
.signup-step-header {
    margin-bottom: 28px;
}
.signup-step-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.signup-step-sub {
    color: var(--muted);
    margin-bottom: 0;
    font-size: 0.95rem;
}

/* Stripe card container
   NOTE: do NOT use display:flex here — Stripe's iframe expects a
   standard block parent. A flex parent can cause the iframe to
   collapse its clickable width, stranding the cursor on the left.
   Signup is a fixed light-theme flow so the container is hard-coded
   white + light-border regardless of site theme. */
.signup-stripe-card {
    min-height: 48px;
    padding: 14px 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    border-radius: 8px;
}
.signup-stripe-card .StripeElement {
    width: 100%;
    display: block;
}
.signup-stripe-card iframe {
    width: 100% !important;
    display: block !important;
}

/* Navigation bar */
.signup-nav {
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.signup-back-btn {
    color: var(--muted);
}
.signup-submit-btn {
    min-width: 140px;
}
.signup-skip-link {
    font-size: 0.875rem;
    text-decoration: none;
}
.signup-skip-link:hover {
    color: var(--text) !important;
    text-decoration: underline;
}
.signup-help-link {
    font-size: 0.875rem;
    color: var(--muted);
}
.signup-help-link a {
    color: var(--c-blue);
}
.signup-tip {
    border-radius: 8px;
    font-size: 0.875rem;
}

/* Complete + Verify pages */
.signup-complete-card {
    max-width: 460px;
    padding: 48px 40px;
}
.signup-complete-icon {
    font-size: 3rem;
    color: var(--brand);
}
.signup-complete-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}
.signup-complete-sub {
    color: var(--muted);
    margin-bottom: 28px;
    line-height: 1.6;
}

/* Light theme */
[data-theme="light"] .signup-right {
    background: #eef2ff;
}
/* .signup-stripe-card is now hard-coded to white above — no theme override needed. */

/* Responsive */
@media (max-width: 768px) {
    .signup-shell         { flex-direction: column; }
    .signup-left          { width: 100%; height: auto; position: static;
                            padding: 20px 18px; flex-direction: row;
                            align-items: center; gap: 12px; flex-wrap: wrap; }
    .signup-brand         { margin-bottom: 0; flex-shrink: 0; }
    .signup-progress      { flex-direction: row; flex-wrap: wrap; gap: 2px; overflow-x: auto; flex: none; }
    .signup-progress-item { flex-direction: column; align-items: center;
                            gap: 3px; padding: 4px 6px; }
    .signup-progress-item + .signup-progress-item::before { display: none; }
    .signup-step-label    { font-size: 0.6rem; text-align: center; }
    .signup-brand-footer  { display: none; }
    .signup-right         { padding: 28px 16px; }
    .signup-complete-card { padding: 32px 20px; }
}


/* ═══════════════════════════════════════════════════════════════
   Section 69 — Location Dashboard
   ═══════════════════════════════════════════════════════════════ */

.loc-dash {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px;
}

/* #463 — Grid layout: main content + right rail (QR pairing panel) */
.loc-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .loc-dash-grid { grid-template-columns: 1fr; }
    .loc-dash-rail { order: -1; }
}
.loc-dash-rail {
    position: sticky;
    top: calc(var(--topbar-h, 64px) + 16px);
}
.loc-dash-rail-card {
    padding: 16px;
}
.loc-dash-rail-title {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    color: var(--text);
}
.loc-dash-rail-qrcode {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    background: #fff;             /* QR libs draw black-on-white; force white bg so dark theme stays scannable */
    padding: 12px;
    border-radius: 8px;
}
.loc-dash-rail-qrcode canvas,
.loc-dash-rail-qrcode img {
    display: block;
    max-width: 100%;
    height: auto;
}
.loc-dash-rail-caption {
    text-align: center;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}

/* Header */
.loc-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.loc-dash-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--text);
}

.loc-dash-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.loc-dash-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: flex-start;
}

/* Stats Row */
.loc-dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}

.loc-dash-stats .stat-card {
    padding: 16px;
}

.loc-dash-stats .stat-card-value {
    font-size: 0.95rem;
    font-weight: 600;
}

/* #462 — Business Hours clock card on the dashboard.
   Compact summary panel with an icon, current status, today's hours, and an
   Edit Hours button that opens the businessHoursModal popup. */
.bh-clock-card .bh-clock-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.bh-clock-card .bh-clock-on {
    background: var(--c-green-bg);
    color: var(--c-green);
}
.bh-clock-card .bh-clock-off {
    background: var(--c-gray-bg);
    color: var(--c-gray);
}

/* #462 — Business Hours modal: weekly grid + per-day break + holiday rows. */
.bh-week {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.bh-day-row {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
}
.bh-day-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.bh-day-head .form-check { flex: 0 0 80px; }
.bh-day-times {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}
.bh-day-times select { max-width: 130px; }
.bh-break-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-left: 92px;     /* align under the time selects, past the day-name pill */
}
.bh-break-row .form-check { flex: 0 0 auto; }
.bh-break-row select { max-width: 110px; font-size: 0.78rem; }

#bh-holiday-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bh-holiday-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px;
    background: var(--surface-hover, rgba(255,255,255,0.04));
    border-radius: 6px;
}
.bh-holiday-row .bh-hol-date { max-width: 160px; }
.bh-holiday-row .bh-hol-time { max-width: 130px; }

/* ── Branding Dashboard (/branding, 2026-05-26) ─────────────────────
   One-stop hub for every customer-facing landing page surface, with
   per-page visitor + engagement stats. Each panel is a Section-19
   .card with a header (title + Edit button) and a 4-tile stats grid
   that wraps to two columns on tablet and one column on mobile. */
.branding-dash { padding: 20px; }
.branding-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.branding-dash-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text);
}
.branding-dash-subtitle { line-height: 1.4; }
.branding-dash-panel-body { padding: 18px 20px; }
.branding-dash-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.branding-dash-panel-title {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}
.branding-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.branding-dash-stat {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    min-width: 0;
}
[data-theme="light"] .branding-dash-stat { background: rgba(0,0,0,0.02); }
.branding-dash-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 6px;
}
.branding-dash-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}
.branding-dash-stat-sub {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 4px;
    line-height: 1.3;
}
@media (max-width: 900px) {
    .branding-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .branding-dash-stats { grid-template-columns: 1fr; }
}

/* #461 v2 — Single Edit/Save/Cancel toggle replaces the per-row pencils.
   The grid renders read-only by default; clicking the top-right Edit
   button adds .edit-mode to the wrapper which hides every static value
   and reveals every .loc-attr-form simultaneously. Save POSTs all forms
   in parallel via fetch (see JS below); Cancel reloads to discard.
   The per-row .loc-attr-edit-btn pencil + per-form .loc-attr-cancel are
   kept in the markup but hidden via CSS — the single toolbar pair is
   the only visible control surface. */
.loc-attr-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px 4px;
    border-bottom: 1px solid var(--border);
}
.loc-attr-grid-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.loc-attr-grid-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.loc-attr-grid .card-body {
    padding: 12px 18px;
}
/* Hide every per-row pencil — the global Edit button replaces them.
   Hover/focus affordance from #461 v1 is no longer needed. */
.loc-attr-edit-btn { display: none !important; }
/* Edit mode: hide static values, reveal every form, hide per-row Save/Cancel */
.loc-attr-grid.edit-mode .loc-attr-value { display: none; }
.loc-attr-grid.edit-mode .loc-attr-form  { display: flex !important; }
.loc-attr-grid.edit-mode .loc-attr-form button[type="submit"],
.loc-attr-grid.edit-mode .loc-attr-form .loc-attr-cancel { display: none; }
.loc-attr {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.loc-attr:last-child { border-bottom: 0; }
.loc-attr-label {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.loc-attr-value {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text);
    font-size: 0.95rem;
}
.loc-attr-value-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loc-attr-value-text code {
    background: var(--surface-hover, rgba(255,255,255,0.06));
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}
.loc-attr-edit-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--muted);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
    font-size: 0.85rem;
}
.loc-attr:hover .loc-attr-edit-btn,
.loc-attr-edit-btn:focus-visible { opacity: 1; color: var(--brand); }
.loc-attr-form {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.loc-attr-form input[type="text"],
.loc-attr-form select {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 420px;
}
@media (max-width: 640px) {
    .bh-day-head { gap: 6px; }
    .bh-day-head .form-check { flex: 1 0 100%; }
    .bh-day-times { gap: 4px; }
    .bh-day-times select { max-width: none; flex: 1 1 auto; }
    .bh-break-row { padding-left: 0; }
    .loc-attr { grid-template-columns: 1fr; gap: 4px; }
    .loc-attr-label { font-size: 0.78rem; }
}

/* Location-attribute chip row: Event Code · Site Type · Timezone.
   In view mode the chips render side-by-side with an FA icon on the
   left. In edit mode the wrapper falls back to a vertical stack and
   each chip reverts to a label | form row (handled by the .edit-mode
   override below). */
.loc-attr-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    padding: 6px 0 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
}
.loc-attr-grid .loc-attr-chip {
    /* #516 — stack icon above body in display mode so narrow chip widths
       (e.g. Timezone) don't crush the label/value next to the icon. Edit
       mode overrides this back to a grid layout below. */
    display: flex;
    grid-template-columns: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    border-bottom: 1px solid var(--border);
}
[data-theme="light"] .loc-attr-grid .loc-attr-chip {
    background: rgba(15,23,42,0.03);
}
.loc-attr-chip-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    flex-shrink: 0;
    background: var(--c-violet-bg);
    color: var(--c-violet);
}
.loc-attr-chip-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
}
.loc-attr-chip-body .loc-attr-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
}
.loc-attr-chip-body .loc-attr-value {
    font-size: 0.92rem;
    color: var(--text);
}

/* Disabled-style dropdown row: Business Group · Portfolio · Event Type.
   In view mode the visible `<select disabled>` reads as the current value
   and clicking Edit swaps it for the real form. */
.loc-attr-selects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    padding: 6px 0 4px;
}
.loc-attr-grid .loc-attr-select {
    display: flex;
    grid-template-columns: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0;
    border-bottom: 0;
}
.loc-attr-grid .loc-attr-select .loc-attr-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
}
.loc-attr-grid .loc-attr-select .loc-attr-value {
    display: flex;
    align-items: center;
    gap: 6px;
}
.loc-attr-grid .loc-attr-select .loc-attr-value .loc-attr-readonly-select {
    flex: 1 1 auto;
}
.loc-attr-readonly-select:disabled {
    opacity: 0.85;
    cursor: default;
    background-color: rgba(255,255,255,0.03);
    color: var(--text);
}
[data-theme="light"] .loc-attr-readonly-select:disabled {
    background-color: rgba(15,23,42,0.04);
}

/* Edit-mode overrides — when the grid flips into edit-mode, both the chip
   row and the select row reflow to a vertical stack so the forms breathe. */
.loc-attr-grid.edit-mode .loc-attr-chips,
.loc-attr-grid.edit-mode .loc-attr-selects {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border-bottom: 0;
    margin-bottom: 0;
}
.loc-attr-grid.edit-mode .loc-attr-chip,
.loc-attr-grid.edit-mode .loc-attr-select {
    display: grid !important;
    grid-template-columns: 180px 1fr !important;
    background: transparent !important;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 10px 0;
    gap: 12px;
}
.loc-attr-grid.edit-mode .loc-attr-chip-icon,
.loc-attr-grid.edit-mode .loc-attr-chip-body .loc-attr-value,
.loc-attr-grid.edit-mode .loc-attr-readonly-select {
    display: none;
}
.loc-attr-grid.edit-mode .loc-attr-chip-body {
    display: contents;
}
.loc-attr-grid.edit-mode .loc-attr-chip-body .loc-attr-label,
.loc-attr-grid.edit-mode .loc-attr-select .loc-attr-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* Shared `.settings-row` pattern — label/help on the left, control on the
   right. Used on the modernized texting page and meant to spread to other
   settings sub-pages over time. Wraps on small screens. */
.settings-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.settings-row:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-row:first-child { padding-top: 0; }
.settings-row-info {
    flex: 1 1 360px;
    min-width: 0;
}
.settings-row-label {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.settings-row-help {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.4;
}
.settings-row-control {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* Stack mode flips main axis to vertical. The base `.settings-row` sets
   `justify-content: space-between` (intentional in horizontal mode — pushes
   info left, control right) and `.settings-row-info` carries
   `flex: 1 1 360px` (intentional in horizontal mode — 360px min-width).
   In column direction both of those become vertical, so without overrides
   each stack row would be at least 360px tall with the label pinned to the
   top and the form pinned to the bottom. Reset both to content sizing here. */
.settings-row.settings-row-stack {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
}
.settings-row.settings-row-stack .settings-row-info,
.settings-row.settings-row-stack .settings-row-control { flex: 0 0 auto; }
.settings-row.settings-row-stack .settings-row-control { width: 100%; }
.settings-row-control-full { width: 100%; }

/* SMS provider routing — small status tiles, not a toggle (the system
   auto-picks the provider by destination country). */
.provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.provider-tile {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: rgba(255,255,255,0.03);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
[data-theme="light"] .provider-tile {
    background: rgba(15,23,42,0.03);
}
.provider-tile-on {
    border-color: var(--c-green);
    background: var(--c-green-bg);
}
.provider-tile-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}
.provider-tile-label {
    font-weight: 600;
}
.provider-tile-help {
    line-height: 1.4;
}
.provider-tile-cred {
    color: var(--text);
}

/* Shared sub-page header (Back + breadcrumb) used by every settings
   sub-page (rooms, printing, texting, ...). Replaces the legacy in-page
   `settingTab` bar — the focused sidebar already carries the top-level
   settings navigation, so the in-page tabs were redundant. */
.settings-subpage-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
}
.settings-subpage-header .settings-subpage-back {
    flex-shrink: 0;
}
.settings-subpage-header .settings-subpage-crumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted);
}
.settings-subpage-header .settings-subpage-crumb .breadcrumb-item a {
    color: var(--muted);
    text-decoration: none;
}
.settings-subpage-header .settings-subpage-crumb .breadcrumb-item a:hover {
    color: var(--text);
    text-decoration: underline;
}
.settings-subpage-header .settings-subpage-crumb .breadcrumb-item.active {
    color: var(--text);
    font-weight: 600;
}
.settings-subpage-header .settings-subpage-crumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--muted);
}

/* Rail-mounted Street Address card: sits between the QR pairing card and
   the Business Hours card. Display mode shows the formatted address, Edit
   Address swaps in a 5-field form (street, city, state, zip, country). */
.loc-addr-card {
    padding: 16px;
}
.loc-addr-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.loc-addr-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    flex-shrink: 0;
    background: var(--c-blue-bg);
    color: var(--c-blue);
}
.loc-addr-title {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}
.loc-addr-text {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0 0 10px 0;
    color: var(--text);
    font-style: normal;
}
.loc-addr-form .form-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.loc-addr-form .form-control-sm {
    font-size: 0.85rem;
}

/* #516 — Rail-mounted Store Number card: optional retailer / chain branch
   number. Same display↔form pattern as the street-address card so they
   read as a set in the right rail. */
.loc-store-card {
    padding: 16px;
}
.loc-store-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.loc-store-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1rem;
    flex-shrink: 0;
    background: var(--c-teal-bg);
    color: var(--c-teal);
}
.loc-store-title {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}
.loc-store-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 10px 0;
    font-variant-numeric: tabular-nums;
}

/* #516 — Sticky "Editing: <location>" pill that lives at the top of the
   right rail. Hidden until the main page title scrolls out of view, then
   fades in. The rail itself is already position:sticky so the pill rides
   along with it. */
.loc-dash-rail-stickyname {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--c-violet-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    max-width: 100%;
    overflow: hidden;
}
.loc-dash-rail-stickyname.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.loc-dash-rail-stickyname-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
    flex-shrink: 0;
}
.loc-dash-rail-stickyname-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}
.loc-dash-rail-stickyname-code {
    font-size: 0.75rem;
    background: transparent;
    color: var(--c-violet);
    padding: 0;
    flex-shrink: 0;
}

/* Rail-mounted Business Hours card: compact vertical layout that fits the
   260px right-rail container. Replaces the wider horizontal layout used
   when the card lived in the main column. */
.loc-dash-rail .bh-clock-card {
    padding: 16px;
}
.bh-rail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.bh-rail-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.bh-rail-title {
    font-weight: 600;
    color: var(--text);
}
.bh-rail-today {
    line-height: 1.4;
}

/* Section Heading */
.loc-dash-section-heading {
    margin-bottom: 20px;
}

.loc-dash-section-heading h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text);
}

.loc-dash-section-heading p {
    font-size: 0.85rem;
    margin: 0;
}

/* Action Cards Grid */
.loc-dash-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}

/* Individual Action Card */
.loc-dash-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.loc-dash-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.12);
    color: var(--text);
    text-decoration: none;
}

.loc-dash-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Primary card (Layout Editor) — subtle brand accent */
.loc-dash-card-primary {
    border-color: rgba(124, 58, 237, 0.25);
    background: linear-gradient(135deg, var(--surface) 0%, rgba(124, 58, 237, 0.06) 100%);
}

.loc-dash-card-primary .loc-dash-card-icon {
    background: rgba(124, 58, 237, 0.15);
    color: var(--brand);
}

/* Card Icon */
.loc-dash-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
}

/* Card Body */
.loc-dash-card-body {
    flex: 1;
    min-width: 0;
}

.loc-dash-card-body h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text);
}

.loc-dash-card-body p {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
}

/* Card Arrow */
.loc-dash-card-arrow {
    flex-shrink: 0;
    color: var(--muted);
    font-size: 0.85rem;
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.loc-dash-card:hover .loc-dash-card-arrow {
    opacity: 1;
    transform: translateX(3px);
    color: var(--brand);
}

/* Location Settings Modal — grouped sections */
.loc-settings-group {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.loc-settings-group-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.loc-settings-group-title i {
    margin-right: 6px;
}

/* Light theme adjustments */
[data-theme="light"] .loc-dash-card-icon {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .loc-dash-card-primary {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(124, 58, 237, 0.04) 100%);
}

[data-theme="light"] .loc-dash-card:hover {
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.08);
}

/* Responsive */
@media (max-width: 768px) {
    .loc-dash-header {
        flex-direction: column;
    }
    .loc-dash-header-actions {
        width: 100%;
    }
    .loc-dash-cards {
        grid-template-columns: 1fr;
    }
    .loc-dash-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .loc-dash-stats {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════
   Section 70 — Location Branding Editor
   ═══════════════════════════════════════════════════════════════ */

/* Master toggle area */
.brand-master-toggle {
    padding: 16px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* Disabled state — dim sections when master toggle is off */
.brand-sections-disabled {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

/* Section cards */
.brand-section .card-body {
    padding: 16px 20px;
}

.brand-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.brand-section-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

.brand-section-header h3 i {
    margin-right: 8px;
    color: var(--brand);
}

/* Inherited / Overridden badge in section headers */
.brand-inherited-badge {
    flex-shrink: 0;
}

/* Form field placeholders show inherited values */
.brand-section input::placeholder,
.brand-section textarea::placeholder {
    font-style: italic;
    opacity: 0.5;
}

/* Compact form labels */
.brand-section .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Section 69 — Query Builder
   ═══════════════════════════════════════════════════════════════════════ */

/* Condition rows */
.qb-condition { transition: background 0.15s; border-radius: 6px; padding: 4px 6px; }
.qb-condition:hover { background: var(--row-hover); }

/* Field checkboxes grid */
.qb-field-check { font-size: 0.82rem; padding: 3px 8px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; transition: border-color 0.15s; }
.qb-field-check:hover { border-color: var(--brand); }
.qb-field-check input:checked + .form-check-label { color: var(--brand); font-weight: 600; }

/* Results meta bar */
#results-meta { font-size: 0.875rem; }

/* Saved query cards */
#saved-list .card { border: 1px solid var(--border); }
#saved-list .card:hover { border-color: var(--brand); }

/* Help/export button group alignment */
#btn-help, #btn-export { font-size: 0.8rem; }

/* AI Chat bubbles */
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-bubble { max-width: 80%; padding: 8px 14px; border-radius: 12px; font-size: 0.875rem; line-height: 1.45; }
.ai-msg-user .ai-msg-bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 2px; }
.ai-msg-assistant .ai-msg-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 2px; }
#ai-chat-messages { scroll-behavior: smooth; }
#ai-definition-summary { line-height: 1.6; }

/* Query Builder results table */
#results-table { border-collapse: collapse; }
#results-table thead th { white-space: nowrap; }
#results-table tbody tr:nth-child(even) { background: var(--row-hover); }
#results-table tbody tr:hover { background: rgba(124,58,237,0.08); }
.qb-sortable-th:hover { color: var(--brand); }
.qb-sortable-th .fa-sort-up, .qb-sortable-th .fa-sort-down { color: var(--brand); }

/* Pro Tip pulse dot + floating callout */
.qb-protip-dot {
    position: absolute; top: -3px; right: -3px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--c-amber);
    animation: qb-pulse 1.5s ease-in-out infinite;
    pointer-events: none; z-index: 11;
}
@keyframes qb-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.6); }
    50% { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
}
.qb-protip-float {
    position: absolute; top: 50%; left: calc(100% + 12px);
    transform: translateY(-50%);
    background: var(--surface); border: 1px solid var(--c-amber);
    border-radius: 8px; padding: 10px 14px; font-size: 0.8rem;
    white-space: nowrap; z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    animation: qb-protip-in 0.3s ease-out;
    line-height: 1.4;
}
.qb-protip-float::before {
    content: ''; position: absolute; top: 50%; right: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent; border-right-color: var(--c-amber);
}
.qb-protip-close {
    position: absolute; top: 4px; right: 6px;
    background: none; border: none; color: var(--muted);
    font-size: 0.7rem; cursor: pointer; padding: 0; line-height: 1;
}
.qb-protip-close:hover { color: var(--text); }
@keyframes qb-protip-in {
    from { opacity: 0; transform: translateY(-50%) translateX(-6px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   Section 70 — Full Season Scheduler
   ═══════════════════════════════════════════════════════════════════ */
#fs-mini-cal { gap: 2px; }
.fs-mini-day { transition: background 0.15s, border-color 0.15s; }
.fs-mini-day:hover { border-color: var(--brand) !important; transform: scale(1.15); }
.fs-day-col { transition: background 0.15s; }
.fs-day-col:last-child { border-right: none !important; }
.fs-block { transition: background 0.15s, transform 0.1s; }
.fs-block:hover { transform: translateX(2px); opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════════
   Section 71 — Device Heartbeat Dashboard
   ═══════════════════════════════════════════════════════════════════ */

/* Status dots */
.device-status-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.device-status-green  { background: var(--c-green); box-shadow: 0 0 6px var(--c-green); }
.device-status-yellow { background: var(--c-amber); box-shadow: 0 0 6px var(--c-amber); }
.device-status-red    { background: var(--c-red);   box-shadow: 0 0 6px var(--c-red); animation: device-pulse 1.5s ease-in-out infinite; }
.device-status-gray   { background: var(--c-gray);  opacity: 0.5; }

@keyframes device-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* Location cards (photographer dashboard) */
.device-location-card {
    transition: transform 0.15s, border-color 0.15s;
    border-left: 3px solid var(--border);
}
.device-location-card:hover { transform: translateY(-2px); }
.device-location-green  { border-left-color: var(--c-green); }
.device-location-yellow { border-left-color: var(--c-amber); }
.device-location-red    { border-left-color: var(--c-red); }
.device-location-gray   { border-left-color: var(--c-gray); }

/* Device cards (location detail) */
.device-card {
    transition: transform 0.15s, border-color 0.15s;
    border-top: 3px solid var(--border);
}
.device-card:hover { transform: translateY(-2px); }
.device-card-green  { border-top-color: var(--c-green); }
.device-card-yellow { border-top-color: var(--c-amber); }
.device-card-red    { border-top-color: var(--c-red); }
.device-card-gray   { border-top-color: var(--c-gray); }

/* Fleet health bar (admin fleet view) */
.device-health-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--c-gray-bg);
    min-width: 120px;
}
.device-health-segment { height: 100%; }
.device-health-green  { background: var(--c-green); }
.device-health-yellow { background: var(--c-amber); }
.device-health-red    { background: var(--c-red); }
.device-health-gray   { background: var(--c-gray); opacity: 0.4; }

/* Media level bars (printer trays) */
.device-media-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--c-gray-bg);
    overflow: hidden;
}
.device-media-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

/* Today's heartbeat timeline (24-hour grid) */
.device-timeline-today {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}
.device-hour-block {
    width: calc((100% - 46px) / 24);
    min-width: 20px;
    height: 28px;
    border-radius: 3px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--muted);
    cursor: default;
}
.device-hour-full    { background: var(--c-green); color: #fff; }
.device-hour-partial { background: var(--c-amber-bg); border: 1px solid var(--c-amber); }
.device-hour-empty   { background: var(--c-red-bg); border: 1px solid var(--c-red); }
.device-hour-current { background: var(--c-blue-bg); border: 1px dashed var(--c-blue); }
.device-hour-future  { background: var(--surface); border: 1px solid var(--border); opacity: 0.4; }
.device-hour-label   { font-size: 0.6rem; line-height: 1; }

/* 90-day daily grid (GitHub contribution style) */
.device-daily-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.device-day-cell {
    width: 10px; height: 10px;
    border-radius: 2px;
    cursor: default;
}
.device-day-high { background: var(--c-green); }
.device-day-mid  { background: var(--c-amber); }
.device-day-low  { background: var(--c-red); }
.device-day-zero { background: var(--c-red); opacity: 0.3; }
.device-day-none { background: var(--surface); border: 1px solid var(--border); }

/* Legend dots */
.device-legend-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 2px;
}

/* Fleet row hover */
.device-fleet-row:hover { background: var(--row-hover); }

/* Responsive */
@media (max-width: 576px) {
    .device-hour-block { min-width: 12px; height: 22px; }
    .device-hour-label { display: none; }
    .device-day-cell { width: 8px; height: 8px; }
}


/* ═══════════════════════════════════════════════════════════════════
   Section 72 — Billing Engine Admin
   ═══════════════════════════════════════════════════════════════════ */

/* Billing page wrapper */
#billing { max-width: 1200px; }

/* Rate card save-success flash */
#billing .card[style*="border-color"] {
    transition: border-color 0.3s ease;
}

/* Tier editor table inputs */
#billing .tier-editor .form-control-sm {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

/* Plan cards grid */
#billing .card-footer {
    border-color: var(--border);
}

/* Photographer profile stat cards — compact value */
#billing .stat-card .stat-card-value {
    word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Landing Config — Media Library Image Picker Widget
   Used by every *_image_url field on /bookings/landingConfig. Replaces the
   raw URL input with a click-to-open picker (preview thumb when filled,
   drag-drop placeholder when empty).
   ═══════════════════════════════════════════════════════════════════════════ */
.lp-img-picker {
    position: relative;
    display: block;
    width: 100%;
    min-height: 120px;
    border: 1.5px dashed var(--border);
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.04);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    overflow: hidden;
}
.lp-img-picker:hover,
.lp-img-picker:focus-visible {
    border-color: var(--brand);
    background: rgba(124, 58, 237, 0.08);
    outline: none;
}
.lp-img-picker[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}
.lp-img-picker--filled {
    border-style: solid;
    background: transparent;
    min-height: 140px;
}
.lp-img-picker-thumb {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
}
.lp-img-picker-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.45rem 0.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-img-picker--filled:hover .lp-img-picker-overlay,
.lp-img-picker--filled:focus-visible .lp-img-picker-overlay {
    opacity: 1;
}
.lp-img-picker-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--muted);
}
.lp-img-picker-empty .fw-semibold {
    color: var(--text);
}

/* ──────────────────────────────────────────────────────────────
   Section 73 — Settings Search (top-bar magnifying glass)
   Modal-based command-palette-style search over the
   ACL-filtered settings_search config.
   ────────────────────────────────────────────────────────────── */

/* Trigger button in top bar */
.topbar-search-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 12px;
    cursor: pointer;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.topbar-search-btn:hover,
.topbar-search-btn:focus-visible {
    background-color: rgba(124, 58, 237, 0.10);
    border-color: rgba(124, 58, 237, 0.45);
    outline: none;
}
.topbar-search-btn .fa-search {
    font-size: 0.85rem;
    color: var(--muted);
}
.topbar-search-btn:hover .fa-search {
    color: var(--brand);
}

/* Modal shell */
.settings-search-modal .modal-dialog {
    max-width: 640px;
}
.settings-search-modal .modal-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    color: var(--text);
}
[data-theme="light"] .settings-search-modal .modal-content {
    background: rgba(255, 255, 255, 0.96);
}

/* Header — input row */
.settings-search-header {
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    gap: 8px;
}
.settings-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}
.settings-search-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 0.9rem;
    pointer-events: none;
}
.settings-search-input {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 1rem;
    padding: 10px 56px 10px 40px;
    border-radius: 10px;
    width: 100%;
}
.settings-search-input:focus {
    background: transparent;
    color: var(--text);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
    outline: none;
}
.settings-search-input::placeholder {
    color: var(--muted);
}
.settings-search-hint {
    position: absolute;
    right: 10px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--brand);
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
}

/* Body — results scroll area */
.settings-search-body {
    padding: 8px 0;
    max-height: 60vh;
}
.settings-search-results {
    padding: 0 8px 8px;
}

/* Empty / hint state */
.settings-search-empty {
    text-align: center;
    padding: 32px 24px;
    color: var(--muted);
}
.settings-search-empty i {
    font-size: 1.6rem;
    color: var(--muted);
    opacity: 0.6;
    margin-bottom: 12px;
    display: block;
}
.settings-search-empty p {
    margin: 4px 0;
    font-size: 0.9rem;
}
.settings-search-hint-text {
    font-size: 0.78rem !important;
    opacity: 0.7;
    margin-top: 8px !important;
}

/* Group label */
.settings-search-group-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 12px 12px 4px;
}
.settings-search-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Result row */
.settings-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: background-color 0.12s ease, transform 0.12s ease;
    border: 1px solid transparent;
}
.settings-search-item:hover,
.settings-search-item:focus-visible,
.settings-search-item.active {
    background: rgba(124, 58, 237, 0.10);
    border-color: rgba(124, 58, 237, 0.30);
    color: var(--text);
    text-decoration: none;
    outline: none;
}
.settings-search-item.active {
    background: rgba(124, 58, 237, 0.16);
}
.settings-search-item-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.14);
    color: var(--brand);
    border-radius: 6px;
    font-size: 0.85rem;
}
.settings-search-item-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.settings-search-item-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings-search-item-desc {
    font-size: 0.78rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings-search-item-arrow {
    color: var(--muted);
    opacity: 0;
    font-size: 0.75rem;
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.settings-search-item:hover .settings-search-item-arrow,
.settings-search-item.active .settings-search-item-arrow {
    opacity: 1;
    transform: translateX(2px);
    color: var(--brand);
}
.settings-search-item mark {
    background: rgba(124, 58, 237, 0.22);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════════════
   Section 74 — Platform Emails (customer-journey layout)
   Bootstrap-first: relies on .card / .card-body / .form-switch / .btn /
   .badge-pill etc. for structure. This section only adds:
     - the Defaults-card tile rows
     - the touchpoint icon badge + step label
     - the inter-card flow connector (vertical line + chevron)
     - active-on left-stripe highlight on touchpoint cards
   ═══════════════════════════════════════════════════════════════════ */

.pe-min-w-0 { min-width: 0; }

/* ── Defaults card field tiles ────────────────────────────────────── */
.pe-default-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid var(--border);
    border-radius: 10px;
    min-height: 64px;
}
[data-theme="light"] .pe-default-tile {
    background: rgba(124, 58, 237, 0.05);
}
.pe-default-tile-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.12);
    color: var(--brand);
    border-radius: 9px;
    font-size: 1rem;
}
.pe-default-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.pe-default-empty {
    font-weight: 400;
    font-style: italic;
    color: var(--muted);
}

/* ── Phase (section) header ────────────────────────────────────────
   The catalog is a flat list of peer blocks — Digital Gallery, Customer
   Accounts, Booking, and so on — each holding several touchpoint cards. Those
   cards carry icon chips, borders and hover shadows, so a bare <h4> heading
   read as LESS important than the cards beneath it. This gives the section
   heading enough weight to sit clearly above its cards, plus a top rule and
   generous space so one block is visibly separate from the previous block's
   last card. */
.pe-phase {
    margin-top: 2.75rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
/* The first phase needs no divider above it — it follows the page's own
   defaults panel, not another phase. */
.pe-phase:first-of-type {
    margin-top: 1.5rem;
    padding-top: 0;
    border-top: 0;
}
.pe-phase-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.pe-phase-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--brand);
    font-size: 1.15rem;
}
.pe-phase-headings {
    min-width: 0;   /* let the blurb wrap instead of pushing the row wide */
}
.pe-phase-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.2;
}
.pe-phase-blurb {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: var(--muted);
    max-width: 720px;
    line-height: 1.5;
}
@media (max-width: 575.98px) {
    .pe-phase { margin-top: 2rem; padding-top: 1.5rem; }
    .pe-phase-icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 1rem; }
    .pe-phase-title { font-size: 1.2rem; }
}

/* ── Touchpoint cards (Bootstrap .card with modifier) ─────────────── */
.pe-touchpoints {
    display: flex;
    flex-direction: column;
    gap: 0;            /* gap controlled by .pe-step-arrow spacing */
}
.pe-touchpoint {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    border-left: 3px solid transparent;
}
.pe-touchpoint:hover {
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}
.pe-touchpoint-on {
    border-left-color: var(--c-green);
}

/* Touchpoint title (link) — stays in body color, only underlines on hover */
.pe-tp-title {
    color: var(--text);
    text-decoration: none;
}
.pe-tp-title:hover {
    color: var(--brand);
    text-decoration: underline;
}

/* Icon badge inside a touchpoint */
.pe-tp-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.1);
    color: var(--brand);
    border-radius: 10px;
    font-size: 1.1rem;
}

/* Step counter pill ("3 / 6") — small, muted, lives next to the title */
.pe-step-label {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: rgba(124, 58, 237, 0.08);
    color: var(--brand);
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 999px;
    line-height: 1.2;
    flex-shrink: 0;
}

/* Inter-card flow indicator — simple centered arrow between touchpoints.
   Markup carries text-align + opacity inline; nothing else needed. */
.pe-step-arrow { pointer-events: none; }

/* ── Combined-vs-split pair picker (col-6 A/B decision card) ──────── */
.pe-pair-picker {
    margin-bottom: 1.25rem;
}
.pe-pair-option {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    height: 100%;
    color: var(--text);
    /* <button> defaults to white-space: nowrap (user-agent stylesheet), which
       keeps the description paragraph on one line and overflows the column. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.pe-pair-option .card-body {
    min-width: 0;
    max-width: 100%;
}
.pe-pair-option p {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.pe-pair-option:hover:not(.is-selected):not(.is-saving) {
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}
.pe-pair-option.is-selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25), 0 4px 18px rgba(0, 0, 0, 0.22);
    background: rgba(124, 58, 237, 0.04);
}
[data-theme="light"] .pe-pair-option.is-selected {
    background: rgba(124, 58, 237, 0.06);
}
.pe-pair-option.is-saving {
    opacity: 0.55;
    cursor: progress;
}
.pe-pair-check {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.pe-pair-option.is-selected .pe-pair-check {
    opacity: 1;
}

/* Preview tiles inside the picker (mini representations of the cards
   that will render below depending on the chosen mode) */
.pe-pair-preview {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.pe-pair-preview-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;                /* let icon + text wrap if needed */
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    background: rgba(124, 58, 237, 0.06);
    border: 1px dashed rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.pe-pair-preview-card i {
    flex-shrink: 0;
    color: var(--brand);
    font-size: 0.9rem;
}

/* Combined-mode touchpoint card gets a subtle "linked" accent */
.pe-touchpoint-combined {
    border-color: rgba(124, 58, 237, 0.25);
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.025) 0%, transparent 100%);
}

/* ── Scope bar (Configuring for: <scope>) ─────────────────────────── */
.pe-scope-bar {
    border-left: 3px solid var(--brand);
}
.pe-scope-current {
    font-size: 1rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 2px;
}
.pe-scope-select {
    max-width: 320px;
    min-width: 220px;
}

/* ── Editor picker (AI / GrapeJS / Native) on /templateplatform/edit ─ */
.pe-editor-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    color: var(--text);
    /* <button> defaults to white-space: nowrap (user-agent stylesheet) */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-height: 92px;
}
.pe-editor-choice:hover {
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}
.pe-editor-choice-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.12);
    color: var(--brand);
    border-radius: 9px;
    font-size: 1.05rem;
}
.pe-editor-choice-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.pe-editor-choice-body > * {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}
.pe-editor-choice-body strong {
    font-size: 0.98rem;
    font-weight: 600;
    display: block;
}
.pe-editor-choice-body .small {
    display: block;
    line-height: 1.35;
}

/* Briefly highlight the body_html textarea after AI applies a draft */
.pe-ai-just-applied {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35) !important;
    transition: box-shadow 0.6s ease;
}

/* ── Bundle-membership context shown in the scope bar ──────────────── */
.pe-bundle-membership {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--border);
}

/* ── Location Bundles — edit page member grid ──────────────────────── */
.lb-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.4rem 0.75rem;
    max-height: 420px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.02);
}
[data-theme="light"] .lb-member-grid {
    background: rgba(124, 58, 237, 0.03);
}
.lb-member-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
}
.lb-member-row:hover {
    background: rgba(124, 58, 237, 0.08);
}
.lb-member-row .form-check-input {
    margin: 0;
    flex-shrink: 0;
}
.lb-member-name {
    font-size: 0.88rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Form-switch tweaks specific to Platform Emails */
.pe-tp-switch {
    padding-left: 2.4em;
    min-height: 1.5em;
}
.pe-tp-switch .form-check-input {
    width: 2em;
    height: 1.1em;
    cursor: pointer;
}
.pe-tp-switch .form-check-label {
    cursor: pointer;
    user-select: none;
}
.pe-tp-switch-disabled {
    opacity: 0.6;
}
.pe-tp-switch-disabled .form-check-input,
.pe-tp-switch-disabled .form-check-label {
    cursor: not-allowed;
}
.pe-tp-controls {
    flex-wrap: wrap;
}

/* Mobile compaction ------------------------------------------------- */
@media (max-width: 640px) {
    .pe-tp-controls {
        margin-left: 0 !important;
        margin-top: 0.4rem;
        width: 100%;
        justify-content: flex-end;
    }
    .pe-default-tile {
        flex-wrap: wrap;
    }
}

/* ============================================================================
   Marketing Dashboard — Quick Actions, section headings, feature cards
   ============================================================================ */

/* Quick Actions strip — hero row of primary marketing actions */
.mkt-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
    margin: 1rem 0 1.25rem;
}
.mkt-quick-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text) !important;
    text-decoration: none !important;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.mkt-quick-action:hover {
    transform: translateY(-2px);
    border-color: var(--brand);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.15);
}
.mkt-quick-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 58, 237, 0.12);
    color: var(--brand);
    border-radius: 10px;
    font-size: 1.05rem;
}
.mkt-quick-label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
.mkt-quick-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mkt-quick-sub {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 1px;
}

/* Section heading between dashboard tile rows */
.mkt-section-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--muted);
    opacity: 0.72;
    margin: 1.25rem 0 0.6rem;
    padding-left: 0.15rem;
}

/* Marketing feature card — replaces ad-hoc inline-styled tiles */
.mkt-feature-card {
    border: 1px solid var(--border);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.mkt-feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.mkt-feature-icon {
    font-size: 2.2rem;
    color: var(--brand);
    margin-bottom: 12px;
    line-height: 1;
}
.mkt-count-badge {
    background: var(--brand);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
}

/* ============================================================================
   Lifecycle Emails — Preview & Test Send modal
   ============================================================================ */

.btn-outline-brand {
    color: var(--brand);
    border-color: rgba(124, 58, 237, 0.4);
    background: transparent;
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.pe-touchpoint .pe-tp-preview-btn {
    transition: transform 0.12s ease;
}
.pe-touchpoint:hover .pe-tp-preview-btn {
    transform: translateY(-1px);
}

#tpPreviewModal .modal-body { min-height: 580px; }

.tp-preview-stage {
    position: relative;
    background: #1a1a1a;
    min-height: 580px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.25rem;
    overflow: auto;
}
[data-theme="light"] .tp-preview-stage { background: #e5e7eb; }

.tp-preview-frame-wrap {
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    overflow: hidden;
    transition: max-width 0.2s ease, width 0.2s ease;
    width: 100%;
    max-width: 720px;
    height: 540px;
}
.tp-preview-frame-wrap[data-device="desktop"] { max-width: 720px; }
.tp-preview-frame-wrap[data-device="tablet"]  { max-width: 600px; }
.tp-preview-frame-wrap[data-device="mobile"]  { max-width: 380px; }
.tp-preview-frame-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.tp-preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.tp-preview-side {
    background: var(--surface);
    border-left: 1px solid var(--border);
    max-height: 580px;
    overflow-y: auto;
}

.tp-device-btn.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

/* ============================================================================
   Segment builder — live recipient preview panel
   ============================================================================ */
.seg-preview-panel {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18);
    z-index: 5;
}
.seg-preview-count-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}
.seg-preview-count {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--brand);
    line-height: 1;
}
.seg-preview-count-label {
    font-size: 0.85rem;
    color: var(--muted);
}
.seg-preview-sample {
    max-height: 280px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}
.seg-preview-sample .data-table {
    margin: 0;
}

/* ============================================================================
   Campaign builder — visual flow timeline
   ============================================================================ */

/* Trigger header at the top of the timeline */
.flow-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.04));
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 0;
}
.flow-trigger-dot {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.flow-trigger-body { flex: 1; min-width: 0; }
.flow-trigger-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--brand);
    opacity: 0.85;
}
.flow-trigger-detail {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 2px;
}

/* Connector between trigger/steps — vertical line + centered delay chip */
.flow-connector {
    list-style: none;
    position: relative;
    height: 38px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flow-connector::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(124, 58, 237, 0.4), rgba(124, 58, 237, 0.18));
    transform: translateX(-50%);
}
.flow-connector-chip {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.flow-connector-immediate .flow-connector-chip {
    color: var(--c-amber);
    border-color: rgba(245, 158, 11, 0.4);
}

/* Step card refresh — lift on hover, position label */
.flow-step {
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.flow-step:hover {
    transform: translateY(-1px);
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.flow-step-pos {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--muted);
    opacity: 0.72;
    margin-bottom: 3px;
}

/* ── 65. Marketing — Visual Journey Canvas (B4 Phase 3) ─────────────────────
   Glassmorphic SVG-based 2D canvas. Uses theme tokens throughout so the
   whole surface tracks dark + light modes without overrides. Node shapes
   are pure CSS (color/border/text); SVG provides the geometry.
   ───────────────────────────────────────────────────────────────────────── */

.journey-canvas-page {
    --journey-node-action-bg:    var(--c-violet-bg);
    --journey-node-action-fg:    var(--c-violet);
    --journey-node-condition-bg: var(--c-amber-bg);
    --journey-node-condition-fg: var(--c-amber);
    --journey-node-wait-bg:      var(--c-blue-bg);
    --journey-node-wait-fg:      var(--c-blue);
    --journey-node-goal-bg:      var(--c-green-bg);
    --journey-node-goal-fg:      var(--c-green);
    --journey-node-exit-bg:      var(--c-slate-bg);
    --journey-node-exit-fg:      var(--c-slate);
    --journey-edge-default:      var(--muted);
    --journey-edge-yes:          var(--c-green);
    --journey-edge-no:           var(--c-red);
    --journey-edge-timeout:      var(--c-amber);
    --journey-canvas-bg:         var(--bg-mid);
    --journey-grid-dot-color:    rgba(255,255,255,0.06);
    --journey-marquee-fill:      rgba(124,58,237,0.10);
    --journey-marquee-stroke:    var(--brand);

    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px); /* leave room for app navbar */
    background: var(--journey-canvas-bg);
    color: var(--text);
    overflow: hidden;
}
[data-theme="light"] .journey-canvas-page {
    --journey-grid-dot-color: rgba(15,23,42,0.07);
}

/* Top toolbar — sticky, glass */
.journey-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: nowrap;
    z-index: 30;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.journey-toolbar-left,
.journey-toolbar-center,
.journey-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.journey-toolbar-left { flex: 1; min-width: 0; }
.journey-toolbar-center { justify-content: center; }
.journey-toolbar-right { flex: 1; justify-content: flex-end; }
.journey-toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
}
.journey-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}
.journey-title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}
.journey-title > i { color: var(--brand); }
.journey-zoom-readout {
    min-width: 48px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: 0.82rem;
}

/* Autosave status badge */
.journey-autosave-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--muted);
    padding: 4px 8px;
    transition: color 0.2s ease;
}
.journey-autosave-status--error { color: var(--c-red); }

/* Save button — error count pill */
.journey-error-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--c-red);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Workspace = palette + canvas + drawer */
.journey-workspace {
    flex: 1;
    display: grid;
    grid-template-columns: 220px 1fr 0;  /* drawer expands as needed */
    min-height: 0;
    position: relative;
}
.journey-workspace.drawer-open { grid-template-columns: 220px 1fr 340px; }

/* Palette */
.journey-palette {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.journey-palette-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 2px;
}
.journey-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: left;
    cursor: grab;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    color: var(--text);
}
.journey-palette-item:hover {
    border-color: var(--brand);
    background: rgba(124,58,237,0.06);
    transform: translateY(-1px);
}
.journey-palette-item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.journey-palette-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.journey-palette-icon--action    { background: var(--journey-node-action-bg);    color: var(--journey-node-action-fg); }
.journey-palette-icon--condition { background: var(--journey-node-condition-bg); color: var(--journey-node-condition-fg); }
.journey-palette-icon--wait      { background: var(--journey-node-wait-bg);      color: var(--journey-node-wait-fg); }
.journey-palette-icon--goal      { background: var(--journey-node-goal-bg);      color: var(--journey-node-goal-fg); }
.journey-palette-icon--exit      { background: var(--journey-node-exit-bg);      color: var(--journey-node-exit-fg); }
.journey-palette-label {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.journey-palette-label strong { font-size: 0.9rem; }
.journey-palette-label small  { color: var(--muted); font-size: 0.74rem; }
.journey-palette-help {
    margin-top: 6px;
    padding: 10px 12px;
    background: rgba(59,130,246,0.07);
    border: 1px solid rgba(59,130,246,0.18);
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.4;
}
[data-theme="light"] .journey-palette-help {
    background: rgba(59,130,246,0.06);
    border-color: rgba(59,130,246,0.22);
}
.journey-palette-help > i { color: var(--c-blue); margin-right: 4px; }

/* Canvas stage — the actual SVG holder */
.journey-canvas-stage {
    position: relative;
    overflow: hidden;
    cursor: default;
    outline: none;
}
.journey-canvas-stage:focus-visible {
    box-shadow: inset 0 0 0 2px var(--brand);
}
.journey-canvas-stage--connecting { cursor: crosshair; }
.journey-canvas-svg {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
}
.journey-canvas-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    pointer-events: none;
}

/* Grid dot pattern */
.journey-grid-dot { fill: var(--journey-grid-dot-color); }

/* Empty state */
.journey-empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    pointer-events: none;
}
.journey-empty-state[hidden] { display: none; }
.journey-empty-state > * { pointer-events: auto; }
.journey-empty-state-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(124,58,237,0.10);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 16px;
}
.journey-empty-state h2 {
    font-size: 1.25rem;
    margin: 0 0 6px;
    color: var(--text);
}
.journey-empty-state p {
    color: var(--muted);
    margin: 0 0 16px;
}

/* SVG node visuals */
.journey-node {
    cursor: grab;
    transition: opacity 0.15s ease;
}
.journey-node:focus { outline: none; }
.journey-node:focus-visible .journey-node-shape {
    stroke: var(--brand);
    stroke-width: 2.5;
}
.journey-node-shape {
    fill: var(--surface);
    stroke: var(--border);
    stroke-width: 1.5;
    transition: stroke 0.18s ease, fill 0.18s ease, transform 0.18s ease;
}
.journey-node--action    .journey-node-shape { stroke: rgba(124,58,237,0.35); }
.journey-node--condition .journey-node-shape { stroke: rgba(245,158,11,0.35); }
.journey-node--wait      .journey-node-shape { stroke: rgba(59,130,246,0.35); }
.journey-node--goal      .journey-node-shape { stroke: rgba(34,197,94,0.45); }
.journey-node--exit      .journey-node-shape { stroke: rgba(107,114,128,0.35); }
.journey-node--selected  .journey-node-shape { stroke: var(--brand); stroke-width: 2.5; }
.journey-node--error     .journey-node-shape { stroke: var(--c-red); }

.journey-node-icon-bg {
    fill: var(--surface);
    stroke: var(--border);
    stroke-width: 1;
}
.journey-node--action    .journey-node-icon-bg { fill: var(--journey-node-action-bg); stroke: transparent; }
.journey-node--condition .journey-node-icon-bg { fill: var(--journey-node-condition-bg); stroke: transparent; }
.journey-node--wait      .journey-node-icon-bg { fill: var(--journey-node-wait-bg); stroke: transparent; }
.journey-node--goal      .journey-node-icon-bg { fill: var(--journey-node-goal-bg); stroke: transparent; }
.journey-node--exit      .journey-node-icon-bg { fill: var(--journey-node-exit-bg); stroke: transparent; }

.journey-node-icon-fo { overflow: visible; }
.journey-node-icon {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
}
.journey-node--action    .journey-node-icon { color: var(--journey-node-action-fg); }
.journey-node--condition .journey-node-icon { color: var(--journey-node-condition-fg); }
.journey-node--wait      .journey-node-icon { color: var(--journey-node-wait-fg); }
.journey-node--goal      .journey-node-icon { color: var(--journey-node-goal-fg); }
.journey-node--exit      .journey-node-icon { color: var(--journey-node-exit-fg); }

.journey-node-label {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    fill: var(--text);
    pointer-events: none;
}
.journey-node-sublabel {
    font-size: 11px;
    fill: var(--muted);
    pointer-events: none;
}

/* Error badge on node */
.journey-node-error-badge circle { fill: var(--c-red); }
.journey-node-error-badge text {
    fill: #fff;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

/* Ports */
.journey-node-port {
    fill: var(--surface);
    stroke: var(--brand);
    stroke-width: 2;
    cursor: crosshair;
    transition: r 0.15s ease, stroke-width 0.15s ease, fill 0.15s ease;
}
.journey-node-port--in { stroke: var(--muted); }
.journey-node-port:hover {
    fill: var(--brand);
    stroke: var(--brand);
}
.journey-canvas-stage--connecting .journey-node-port--in {
    r: 10;
    stroke-width: 3;
    fill: var(--c-green);
    stroke: var(--c-green);
}

/* Edges */
.journey-edge-line {
    stroke-width: 2;
    transition: stroke 0.15s ease, stroke-width 0.15s ease;
}
.journey-edge { cursor: pointer; }
.journey-edge:hover .journey-edge-line { stroke-width: 3; }
.journey-edge--default .journey-edge-line { stroke: var(--journey-edge-default); }
.journey-edge--yes     .journey-edge-line { stroke: var(--journey-edge-yes); }
.journey-edge--no      .journey-edge-line { stroke: var(--journey-edge-no); }
.journey-edge--timeout .journey-edge-line { stroke: var(--journey-edge-timeout); stroke-dasharray: 6 4; }

/* Arrowhead fills must match per branch */
.journey-arrow.journey-arrow--default { fill: var(--journey-edge-default); }
.journey-arrow.journey-arrow--yes     { fill: var(--journey-edge-yes); }
.journey-arrow.journey-arrow--no      { fill: var(--journey-edge-no); }
.journey-arrow.journey-arrow--timeout { fill: var(--journey-edge-timeout); }

/* Edge label */
.journey-edge-label-bg {
    fill: var(--surface);
    stroke: var(--border);
    stroke-width: 1;
}
.journey-edge-label-text {
    fill: var(--text);
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
}

/* Preview line while connecting */
.journey-edge-preview {
    stroke: var(--brand);
    stroke-width: 2.5;
    stroke-dasharray: 6 4;
    fill: none;
    pointer-events: none;
}

/* Marquee */
.journey-marquee {
    fill: var(--journey-marquee-fill);
    stroke: var(--journey-marquee-stroke);
    stroke-width: 1.5;
    stroke-dasharray: 5 3;
    pointer-events: none;
}

/* Mini-map */
.journey-minimap {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    z-index: 10;
}
.journey-minimap-svg {
    display: block;
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}
[data-theme="light"] .journey-minimap-svg { background: rgba(15,23,42,0.05); }
/* Phase 4 — minimap nodes are now <g> wrappers (rect + glyph) so the
   color rule applies to the inner rect; the glyph picks up
   contrasting text via .journey-minimap-node-glyph. */
.journey-minimap-node                  { cursor: pointer; outline: none; }
.journey-minimap-node:focus-visible    { filter: drop-shadow(0 0 2px var(--brand)); }
.journey-minimap-node-rect             { fill: var(--muted); opacity: 0.5; }
.journey-minimap-node--action  .journey-minimap-node-rect { fill: var(--c-violet); opacity: 0.85; }
.journey-minimap-node--condition .journey-minimap-node-rect { fill: var(--c-amber);  opacity: 0.9; }
.journey-minimap-node--wait    .journey-minimap-node-rect { fill: var(--c-blue);   opacity: 0.85; }
.journey-minimap-node--goal    .journey-minimap-node-rect { fill: var(--c-green);  opacity: 0.95; }
.journey-minimap-node--exit    .journey-minimap-node-rect { fill: var(--c-slate);  opacity: 0.75; }
.journey-minimap-node-glyph {
    fill: #ffffff;
    font-size: 4.5px;
    font-family: var(--font-display, 'Plus Jakarta Sans'), sans-serif;
    font-weight: 700;
    pointer-events: none;
}
[data-theme="light"] .journey-minimap-node-glyph { fill: #0f172a; }
.journey-minimap-viewport {
    fill: rgba(124,58,237,0.10);
    stroke: var(--brand);
    stroke-width: 1.5;
    stroke-dasharray: 3 2;
    pointer-events: none;
}
.journey-minimap-label {
    font-size: 0.66rem;
    text-align: center;
    color: var(--muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Status bar (errors/warnings counters) */
.journey-status-bar {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: flex;
    gap: 8px;
    z-index: 10;
}
.journey-status-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.journey-status-counter--errors {
    background: rgba(239,68,68,0.18);
    color: var(--c-red);
    border: 1px solid rgba(239,68,68,0.35);
}
.journey-status-counter--warnings {
    background: rgba(245,158,11,0.18);
    color: var(--c-amber);
    border: 1px solid rgba(245,158,11,0.35);
}

/* Properties drawer */
.journey-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: flex;
    flex-direction: column;
    z-index: 20;
}
.journey-drawer[hidden] { display: none; }
.journey-drawer--open { transform: translateX(0); }
.journey-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.journey-drawer-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}
.journey-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
}
.journey-drawer-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.journey-drawer-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.journey-drawer-field label { color: var(--muted); font-weight: 600; }
.journey-drawer-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 18px 0 8px;
}
.journey-drawer-payload {
    padding: 12px;
    background: rgba(245,158,11,0.05);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 8px;
    margin-bottom: 14px;
}
[data-theme="light"] .journey-drawer-payload {
    background: rgba(245,158,11,0.07);
    border-color: rgba(245,158,11,0.28);
}

/* Phase 4 — Segment Picker (typeahead inside condition drawer) */
.journey-segment-picker { position: relative; }
.journey-segment-picker-input {
    width: 100%;
    margin-bottom: 4px;
}
.journey-segment-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: var(--shadow);
}
.journey-segment-picker-list[hidden] { display: none; }
.journey-segment-picker-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.journey-segment-picker-row:last-child { border-bottom: 0; }
.journey-segment-picker-row:hover,
.journey-segment-picker-row:focus,
.journey-segment-picker-row.is-active {
    background: var(--row-hover);
}
.journey-segment-picker-name { font-weight: 600; color: var(--text); }
.journey-segment-picker-count {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.journey-segment-picker-empty {
    padding: 8px 10px;
    color: var(--muted);
    font-style: italic;
}
.journey-segment-picker-summary {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--muted);
}
.journey-segment-picker-selected {
    color: var(--text);
    font-weight: 600;
}
.journey-drawer-help {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    margin-top: 4px;
}

/* Phase 4 — drag perf hint on actively-dragged nodes. CSS `will-change`
   promotes the layer once a drag starts, so transforms during the
   mousemove rAF don't trigger paint on the whole canvas. */
.journey-node.is-dragging {
    will-change: transform;
}

.journey-drawer-edges {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.journey-drawer-edge {
    display: grid;
    grid-template-columns: 1fr 90px 32px;
    grid-template-rows: auto auto;
    gap: 6px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    align-items: center;
}
.journey-drawer-edge-target {
    grid-column: 1 / -1;
}
.journey-drawer-edge--yes      { border-left: 3px solid var(--c-green); }
.journey-drawer-edge--no       { border-left: 3px solid var(--c-red); }
.journey-drawer-edge--default  { border-left: 3px solid var(--muted); }
.journey-drawer-edge--timeout  { border-left: 3px solid var(--c-amber); }
.journey-drawer-edge input,
.journey-drawer-edge select {
    font-size: 0.8rem;
    padding: 4px 6px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.journey-drawer-empty {
    padding: 10px;
    background: rgba(124,58,237,0.04);
    border-radius: 6px;
}

/* Text outline alternate view */
.journey-text-outline {
    position: absolute;
    inset: 0;
    background: var(--bg-mid);
    color: var(--text);
    z-index: 25;
    overflow-y: auto;
    padding: 24px 32px;
}
.journey-text-outline[hidden] { display: none; }
.journey-text-outline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.journey-text-outline-header h2 {
    font-size: 1.25rem;
    margin: 0;
}
.journey-text-outline-intro {
    color: var(--muted);
    margin-bottom: 16px;
    max-width: 640px;
}
.journey-text-outline-list {
    list-style: decimal;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
}
.journey-text-outline-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.journey-text-outline-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.journey-text-outline-edges {
    list-style: '➔ ';
    padding-left: 24px;
    color: var(--muted);
    font-size: 0.85rem;
    margin: 4px 0;
}
.journey-text-outline-item .btn { align-self: flex-start; }

/* Templates picker */
.journey-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.journey-template-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    color: var(--text);
}
.journey-template-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand);
    box-shadow: 0 8px 18px rgba(124,58,237,0.18);
}
.journey-template-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.journey-template-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}
.journey-template-card--brand  .journey-template-card-icon { background: rgba(124,58,237,0.16); color: var(--brand); }
.journey-template-card--green  .journey-template-card-icon { background: var(--c-green-bg);    color: var(--c-green); }
.journey-template-card--amber  .journey-template-card-icon { background: var(--c-amber-bg);    color: var(--c-amber); }
.journey-template-card--blue   .journey-template-card-icon { background: var(--c-blue-bg);     color: var(--c-blue); }
.journey-template-card--pink   .journey-template-card-icon { background: var(--c-pink-bg);     color: var(--c-pink); }
.journey-template-card--purple .journey-template-card-icon { background: var(--c-purple-bg);   color: var(--c-purple); }

.journey-template-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.journey-template-card-body strong {
    font-size: 0.92rem;
    color: var(--text);
}
.journey-template-card-body small {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
}
.journey-template-card-meta {
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* Keyboard shortcuts panel */
.journey-shortcuts {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.78rem;
    color: var(--muted);
    cursor: pointer;
    z-index: 8;
    box-shadow: var(--shadow);
    max-width: 600px;
}
.journey-shortcuts > summary {
    cursor: pointer;
    list-style: none;
}
.journey-shortcuts > summary::-webkit-details-marker { display: none; }
.journey-shortcuts > summary > i { color: var(--brand); margin-right: 4px; }
.journey-shortcuts[open] {
    padding: 12px 16px;
    max-width: 520px;
}
.journey-shortcuts-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 10px 0 0;
    color: var(--text);
}
.journey-shortcuts-list dt { font-weight: 600; }
.journey-shortcuts-list kbd {
    background: rgba(124,58,237,0.10);
    color: var(--brand);
    border: 1px solid rgba(124,58,237,0.25);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.75rem;
}

/* Convert-to-visual-journey CTA inside the linear campaign builder */
.journey-convert-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin: 0 0 12px;
    background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(168,85,247,0.06));
    border: 1px solid rgba(124,58,237,0.30);
    border-radius: 10px;
}
[data-theme="light"] .journey-convert-cta {
    background: linear-gradient(135deg, rgba(124,58,237,0.07), rgba(168,85,247,0.05));
    border-color: rgba(124,58,237,0.30);
}
.journey-convert-cta-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(124,58,237,0.2);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.journey-convert-cta-body {
    flex: 1;
    min-width: 0;
}
.journey-convert-cta-body strong {
    display: block;
    font-size: 0.92rem;
    color: var(--text);
}
.journey-convert-cta-body small {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
}
.journey-convert-cta .btn { flex-shrink: 0; }

/* Reduced motion accommodations */
@media (prefers-reduced-motion: reduce) {
    .journey-drawer,
    .journey-node-shape,
    .journey-template-card,
    .journey-palette-item,
    .journey-edge-line { transition: none !important; }
}

/* Responsive — below 880px, collapse palette to a horizontal bar; below
   620px, prompt the user toward the alternate text outline */
@media (max-width: 880px) {
    .journey-workspace { grid-template-columns: 0 1fr 0; }
    .journey-palette {
        position: absolute;
        top: 56px; left: 0; right: 0;
        flex-direction: row;
        overflow-x: auto;
        z-index: 12;
        padding: 8px 12px;
        gap: 6px;
    }
    .journey-palette-title,
    .journey-palette-help { display: none; }
    .journey-palette-item {
        flex-shrink: 0;
        min-width: 140px;
    }
    .journey-drawer { width: 100%; }
    .journey-workspace.drawer-open { grid-template-columns: 0 0 1fr; }
}
@media (max-width: 620px) {
    .journey-shortcuts { display: none; }
    .journey-toolbar { gap: 6px; }
    .journey-title > span { max-width: 140px; }
}

/* end Section 65 */


/* ════════════════════════════════════════════════════════════════════
   SECTION 66 — Analytics hub cards (Phase 3 consolidation)
   ════════════════════════════════════════════════════════════════════ */

.an-hubs-grid .an-hub-card {
    color: var(--text);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.an-hubs-grid .an-hub-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand);
}
.an-hub-card-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--c-violet-bg);
    color: var(--c-violet);
    font-size: 1.1rem;
}

/* end Section 66 */


/* ════════════════════════════════════════════════════════════════════
   SECTION 67 — View-As role preview (Phase 8 sidebar restructure)
   ════════════════════════════════════════════════════════════════════
   Masteradmin-only UI: dropdown toggle + persistent banner shown while
   the preview is active. Uses theme tokens so it works in dark + light.
   ════════════════════════════════════════════════════════════════════ */

.topbar-link.view-as-active {
    color: var(--c-amber);
}
.topbar-link.view-as-active i.fa-user-shield {
    color: var(--c-amber);
}

.view-as-banner {
    background: linear-gradient(90deg, var(--c-amber-bg), transparent 70%);
    border-bottom: 1px solid var(--c-amber);
    color: var(--text);
    font-size: 0.85rem;
}
.view-as-banner-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 6px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.view-as-banner i.fa-user-shield {
    color: var(--c-amber);
}
.view-as-banner-help {
    color: var(--muted);
    margin-left: 14px;
    font-size: 0.78rem;
}
.view-as-banner .view-as-exit-btn {
    border-color: var(--c-amber);
    color: var(--c-amber);
    margin-left: auto;
}
.view-as-banner .view-as-exit-btn:hover {
    background: var(--c-amber);
    color: var(--bg-bot);
}

/* Light theme — keep contrast readable */
[data-theme="light"] .view-as-banner {
    color: var(--text);
}
[data-theme="light"] .view-as-banner-help {
    color: var(--muted);
}

/* end Section 67 */


/* ════════════════════════════════════════════════════════════════════
   SECTION 68 — Sidebar Pinning (Phase 9 sidebar restructure)
   ════════════════════════════════════════════════════════════════════
   Adds a star-toggle on each top-level sidebar row and a Pinned group
   at the top that surfaces the user's chosen quick-access items.
   ════════════════════════════════════════════════════════════════════ */

.sidebar-pinned-group {
    border-bottom: 1px dashed var(--border);
    padding-bottom: 6px;
    margin-bottom: 6px;
}
.sidebar-label-pinned {
    color: var(--c-amber);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 0.7rem;
}
.sidebar-label-pinned i.fa-thumbtack {
    color: var(--c-amber);
}

/* Pin star button — sits to the right of the sidebar-parent-row */
.sidebar-parent-row {
    position: relative;
}
.sidebar-pin-star {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--muted);
    border-radius: 4px;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
}
.sidebar-pin-star {
    /* hidden + non-interactive until edit mode is on (Section 70 controls visibility) */
    pointer-events: none;
}
.sidebar-pin-star:hover {
    background: rgba(255,255,255,0.06);
    color: var(--c-amber);
}
.sidebar-pin-star.pinned {
    color: var(--c-amber);
}
[data-theme="light"] .sidebar-pin-star:hover {
    background: rgba(0,0,0,0.06);
}

/* Pinned clones at the top of the sidebar — subtle background gradient
   so the Pinned group reads as its own visual cluster without losing
   parity with the main rows. */
.sidebar-parent-row-pinned .sidebar-link {
    background: linear-gradient(90deg, rgba(245,158,11,0.08), transparent);
}

/* Hide the star + pinned group entirely when the sidebar is in its
   collapsed icon-only state — the floating panel is the alternate UI */
.sidebar-collapsed .sidebar-pinned-group {
    display: none;
}
.sidebar-collapsed .sidebar-pin-star {
    display: none;
}

/* end Section 68 */



/* ════════════════════════════════════════════════════════════════════
   SECTION 69 — Sidebar sub-nav visibility
   ════════════════════════════════════════════════════════════════════
   Inline submenus expand under their parent when the user is in that
   section (the `.sidebar-submenu.open` class is added by the navbar
   PHP when `$_in_X_section` is true). The drill-in focus panel is
   the alternate access path — chevron click opens it with the full
   sub-tree even when you're not currently in the section.
   The previous "force-hide every submenu inline" rule was reverted
   because it left no path to sub-pages outside edit mode + auto-drill.
   ════════════════════════════════════════════════════════════════════ */

/* The submenu-toggle chevron is the explicit drill-in handle; hide it
   only in icon-collapsed mode where the entire rail is icon-only. */
.sidebar-collapsed .sidebar-submenu-toggle {
    display: none;
}

/* end Section 69 */


/* ════════════════════════════════════════════════════════════════════
   SECTION 70 — Sidebar edit mode (topbar pin toggle)
   ════════════════════════════════════════════════════════════════════
   The topbar pin icon flips `body.sidebar-editing`. While that class
   is on:
     - All pin stars become visible + interactive (top-level rows AND
       individual sub-items so users can pin deep destinations like
       "Marketing → Bounce Rules" to the top).
     - All `.sidebar-submenu` source divs are revealed inline so the
       full structure of every workspace is visible.
     - A hide button (eye-slash) appears next to the pin star on every
       TOP-LEVEL row, letting the user move workspaces they don't use
       into a collapsed "Show More" group at the bottom.
   The topbar toggle itself uses the same plain `.topbar-link` styling
   as every other topbar element (see View-As in Section 67) — the
   active state is a simple color change to `var(--brand)`.
   ════════════════════════════════════════════════════════════════════ */

.topbar-link.edit-active,
.topbar-link.edit-active i {
    color: var(--brand);
}

/* While editing: every pin star is visible + clickable */
body.sidebar-editing #sidebar .sidebar-pin-star {
    opacity: 1;
    pointer-events: auto;
}

/* While editing: reveal every submenu source div inline so all
   sub-items are visible (and pinnable individually). */
body.sidebar-editing #sidebar .sidebar-nav .sidebar-submenu {
    display: block !important;
}

/* Sub-link wrapper — JS wraps each `.sidebar-sublink` inside a
   `.sidebar-sub-row` div so we can position a pin star absolutely
   within it (the bare `<a>` can't host the button as a child per
   HTML rules — interactive content inside an anchor is invalid). */
.sidebar-sub-row {
    position: relative;
}
.sidebar-sub-row .sidebar-pin-star {
    right: 6px;
}

/* Hide button — eye-slash icon, sits to the LEFT of the pin star on
   top-level rows only. Reads as a real button in edit mode (background
   + border + tactile hover) so the photographer can see it's an
   interactive control, not just decoration. */
.sidebar-hide-btn {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0;
    box-shadow: 0 1px 0 rgba(0,0,0,0.10);
}
body.sidebar-editing #sidebar .sidebar-hide-btn {
    opacity: 1;
    pointer-events: auto;
}
.sidebar-hide-btn:hover {
    background: rgba(239,68,68,0.12);
    border-color: var(--c-red);
    color: var(--c-red);
}
[data-theme="light"] .sidebar-hide-btn {
    background: #fff;
}
[data-theme="light"] .sidebar-hide-btn:hover {
    background: rgba(239,68,68,0.12);
}

/* Spacer placeholder — sub-rows and section labels don't host a hide
   button (hide is top-level only), but they get a same-sized spacer so
   every row's content starts at the same column in edit mode. */
.sidebar-hide-spacer {
    position: absolute;
    width: 26px;
    height: 26px;
    visibility: hidden;
    pointer-events: none;
    /* In edit mode the spacer aligns with where the hide button sits
       on parent rows (see body.sidebar-editing override below). */
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
}
body.sidebar-editing .sidebar-hide-spacer {
    left: 32px;
    right: auto;
}

/* Hidden top-level rows: removed from the main rail when NOT editing.
   In edit mode they stay visible but dim so the user can un-hide. */
.sidebar-parent-row.is-hidden { display: none; }
body.sidebar-editing .sidebar-parent-row.is-hidden {
    display: flex;
    opacity: 0.45;
}

/* Auto-hidden section labels — hidden whenever every parent row in
   their section is hidden (computed by applyLabelHiddenState in JS).
   In edit mode the label stays visible but dim so the user can see
   the section is empty and un-hide a child to bring it back. */
.sidebar-label.is-hidden { display: none; }
body.sidebar-editing .sidebar-label.is-hidden {
    display: block;
    opacity: 0.45;
}

/* "Show More" expandable group at the very bottom of the sidebar.
   Hidden when there are zero hidden items; renders a collapsed pill
   that expands to a stack of the hidden workspaces when clicked. */
.sidebar-showmore-group {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.sidebar-showmore-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 0.78rem;
    padding: 6px 12px;
    cursor: pointer;
    text-align: left;
    border-radius: 4px;
}
.sidebar-showmore-toggle:hover {
    background: var(--row-hover);
    color: var(--text);
}
.sidebar-showmore-toggle .fa-chevron-down {
    margin-left: auto;
    transition: transform .15s ease;
}
.sidebar-showmore-group.expanded .sidebar-showmore-toggle .fa-chevron-down {
    transform: rotate(180deg);
}
.sidebar-showmore-list {
    display: none;
    margin-top: 4px;
}
.sidebar-showmore-group.expanded .sidebar-showmore-list {
    display: block;
}
.sidebar-showmore-item .sidebar-link {
    opacity: 0.78;
}

/* In icon-collapsed mode the show-more group is suppressed — the
   floating drill-in panel is the alternate access path. */
.sidebar-collapsed .sidebar-showmore-group { display: none; }

/* ─── Edit-mode "form" layout ──────────────────────────────────────
   When sidebar-editing is on, the rail widens into a single flat
   form: pin + hide controls sit on the LEFT of each row, the
   drill-in sub-panel is suppressed, and every submenu is expanded
   inline so the user can see + toggle every workspace and sub-page
   in one scroll. Returns to the normal 220px rail the moment edit
   mode is toggled off — every selector here is scoped under
   `body.sidebar-editing`. */
body.sidebar-editing #sidebar {
    width: 400px;
}
/* Edit mode overrides icon-collapsed width so a user who toggles
   edit while collapsed gets the full form, not a 52px stub. */
body.sidebar-editing #sidebar.sidebar-collapsed {
    width: 400px;
}
body.sidebar-editing #sidebar.sidebar-collapsed .sidebar-link span,
body.sidebar-editing #sidebar.sidebar-collapsed .sidebar-label,
body.sidebar-editing #sidebar.sidebar-collapsed .sidebar-footer span,
body.sidebar-editing #sidebar.sidebar-collapsed .sidebar-collapse-btn span {
    display: inline;
}

/* Suppress the floating drill-in sub-panel while editing — the
   inline expanded submenus above are the single source of truth
   for the form view. */
body.sidebar-editing #sidebar-sub-panel {
    display: none !important;
}

/* Pin star moves to the LEFT of the row. Hide button sits just
   to the right of the pin star (still on the left of the label). */
body.sidebar-editing .sidebar-parent-row .sidebar-pin-star,
body.sidebar-editing .sidebar-sub-row .sidebar-pin-star {
    right: auto;
    left: 6px;
}
body.sidebar-editing .sidebar-hide-btn {
    right: auto;
    left: 32px;
}

/* Make room for the left-side controls so labels don't slide
   under the pin/hide buttons. */
body.sidebar-editing .sidebar-parent-row > .sidebar-link {
    padding-left: 60px;
}
/* Sub-rows can't be hidden (only top-level workspaces can), so they
   carry an invisible hide-spacer to keep the pin/hide control column
   aligned. The LABEL then indents past the parent label start (60px)
   so the row visually reads as a list item nested under its parent. */
body.sidebar-editing .sidebar-sub-row .sidebar-link.sidebar-sublink {
    padding-left: 80px;
}
/* Subtle left guide line — a single 1px rail at the parent-label
   column makes the tree relationship unambiguous without adding
   chrome. Sits between the (invisible) hide-spacer column and the
   indented sub-label. */
body.sidebar-editing .sidebar-sub-row::before {
    content: '';
    position: absolute;
    left: 64px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--border);
    pointer-events: none;
}
/* Section labels host the spacer absolutely — they need to be a
   positioning context. In edit mode their text also shifts right to
   line up with the indented parent-row labels below. */
.sidebar-nav > .sidebar-label { position: relative; }
body.sidebar-editing .sidebar-nav > .sidebar-label {
    padding-left: 60px;
}

/* end Section 70 */


/* ============================================================
   Section 75 — Visual Print Template Editor (/settings/printing)
   Drag/resize canvas + layer panel for authoring PT Print Station
   XML templates without touching the file.
   ============================================================ */

.visual-editor-wrap {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.ve-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.ve-presets-label { flex: 0 0 auto; }
.ve-preset { min-width: 56px; }

.ve-orient-tabs .nav-link {
    padding: 4px 14px;
    font-size: 0.85rem;
}
.ve-orient-tabs .nav-link.active {
    background: var(--brand);
    color: #fff;
}

.ve-canvas-frame {
    background: rgba(0,0,0,0.18);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 16px;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}
[data-theme="light"] .ve-canvas-frame {
    background: rgba(15,23,42,0.04);
}

.ve-canvas {
    position: relative;
    background: #fff;
    background-image:
        linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.04) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    touch-action: none;
    user-select: none;
}

.ve-layer {
    position: absolute;
    border: 2px solid rgba(124,58,237,0.55);
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: grab;
    overflow: hidden;
}
.ve-layer:active { cursor: grabbing; }
.ve-layer.image {
    background: repeating-linear-gradient(
        45deg,
        rgba(59,130,246,0.18) 0,
        rgba(59,130,246,0.18) 10px,
        rgba(59,130,246,0.28) 10px,
        rgba(59,130,246,0.28) 20px
    );
    border-color: rgba(59,130,246,0.7);
}
.ve-layer.graphic {
    border-color: rgba(168,85,247,0.7);
}
.ve-layer.selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(124,58,237,0.25);
}

.ve-layer-label {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
}

.ve-resize-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--brand);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 2;
}
/* Corner handles — sized 16px, diagonal resize cursors. */
.ve-resize-handle.handle-nw,
.ve-resize-handle.handle-ne,
.ve-resize-handle.handle-se,
.ve-resize-handle.handle-sw { width: 16px; height: 16px; }
.ve-resize-handle.handle-nw { top: -8px;    left: -8px;   cursor: nwse-resize; }
.ve-resize-handle.handle-ne { top: -8px;    right: -8px;  cursor: nesw-resize; }
.ve-resize-handle.handle-se { bottom: -8px; right: -8px;  cursor: nwse-resize; }
.ve-resize-handle.handle-sw { bottom: -8px; left: -8px;   cursor: nesw-resize; }
/* Edge handles — centered along each edge, axial resize cursors. */
.ve-resize-handle.handle-n  { top: -7px;    left: 50%;    transform: translateX(-50%); cursor: ns-resize; }
.ve-resize-handle.handle-s  { bottom: -7px; left: 50%;    transform: translateX(-50%); cursor: ns-resize; }
.ve-resize-handle.handle-e  { top: 50%;     right: -7px;  transform: translateY(-50%); cursor: ew-resize; }
.ve-resize-handle.handle-w  { top: 50%;     left: -7px;   transform: translateY(-50%); cursor: ew-resize; }

.ve-align-bar { display: flex; flex-wrap: wrap; }
.ve-align-bar .btn { flex: 1 1 auto; }

.ve-side {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}

.ve-layer-list {
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

.ve-layer-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    background: rgba(255,255,255,0.02);
}
[data-theme="light"] .ve-layer-row {
    background: rgba(15,23,42,0.02);
}
.ve-layer-row:hover { background: var(--row-hover); }
.ve-layer-row.selected {
    border-color: var(--brand);
    background: rgba(124,58,237,0.08);
}
.ve-layer-row-icon {
    color: var(--muted);
    width: 18px;
    text-align: center;
}
.ve-layer-row-name {
    flex: 1 1 auto;
    font-size: 0.85rem;
    color: var(--text);
}
.ve-layer-row .btn {
    padding: 2px 6px;
    font-size: 0.72rem;
}

.ve-props {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 10px;
}
.ve-props-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 8px;
}

/* ============================================================
   Edit Business Group — visual customizer rewrite of
   /main/editbusinessgroup/{id}. Sticky top bar + accordion of
   14 sections under a single form. Replaces the legacy
   view/edit-toggle layout. Mirrors the Theme Customizer
   accordion language but in a single-column layout (no live
   preview surface for a BG — settings cascade rather than render).
   ============================================================ */
.entityedit-page {
    padding: 0 0 80px;
}
.entityedit-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.entityedit-topbar-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entityedit-wrap {
    max-width: 880px;
    margin: 20px auto;
    padding: 0 20px;
}
.entityedit-form { display: flex; flex-direction: column; gap: 10px; }
.entityedit-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.entityedit-section-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: 0;
    text-align: left;
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}
.entityedit-section-btn:hover { background: rgba(124,58,237,0.04); }
.entityedit-section-btn[aria-expanded="true"] {
    border-bottom: 1px solid var(--border);
    background: rgba(124,58,237,0.04);
}
.entityedit-chevron { transition: transform .2s ease; font-size: 0.7rem; color: var(--muted); }
.entityedit-section-btn[aria-expanded="true"] .entityedit-chevron { transform: rotate(180deg); }
.entityedit-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.entityedit-section-body.open {
    max-height: 5000px;
    padding: 14px 16px 16px;
}
.entityedit-section-help { padding-bottom: 8px; }

.entityedit-field { margin-bottom: 12px; }
.entityedit-field:last-child { margin-bottom: 0; }

/* ── Platform Defaults readability + inline per-section save (pd-defaults) ──
   Scoped to the Platform Defaults page so the other cascade editors are
   untouched. Caps the reading width (long help text stopped running the full
   page width), adds a hairline between fields, and gives each collapsible
   section its own inline Save button (populated by the page script). */
.pd-defaults .entityedit-field {
    max-width: 680px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.pd-defaults .entityedit-field:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 4px; }
.pd-defaults .entityedit-label { margin-bottom: 6px; }
.pd-defaults .form-text { margin-top: 6px; line-height: 1.5; max-width: 680px; }
.pd-defaults .entityedit-section-body.open { padding-top: 6px; }
.pd-section-save {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.pd-saved-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--c-green-bg);
    color: var(--c-green);
    opacity: 1;
    transition: opacity 0.6s ease;
}
.pd-saved-pill-out { opacity: 0; }
.entityedit-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.entityedit-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.entityedit-toggle:last-child { border-bottom: 0; }
.entityedit-toggle-label {
    flex: 1 1 auto;
    font-size: 0.9rem;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    margin: 0;
}

.entityedit-icon-row {
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
}
.entityedit-icon-row:last-child { border-bottom: 0; }
.entityedit-icon-row-label {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}
.entityedit-icon-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}
.entityedit-icon-slot {
    display: flex;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
}
[data-theme="light"] .entityedit-icon-slot { background: rgba(15,23,42,0.02); }
.entityedit-icon-slot.set { border-color: rgba(34,197,94,0.35); }
.entityedit-icon-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--muted);
    font-size: 1.5rem;
}
.entityedit-icon-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.entityedit-icon-controls {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.entityedit-icon-variant {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.entityedit-icon-controls input[type="file"] { font-size: 0.72rem; padding: 2px 4px; }
.entityedit-icon-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.entityedit-icon-actions .btn-xs {
    font-size: 0.7rem;
    padding: 2px 6px;
    line-height: 1.3;
}

.entityedit-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0 4px;
}
.entityedit-danger {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
    text-align: right;
}
.entityedit-readonly {
    padding: 6px 10px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.85rem;
}
[data-theme="light"] .entityedit-readonly { background: rgba(15,23,42,0.02); }

.entityedit-locations-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.entityedit-location-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    color: var(--text);
    text-decoration: none;
    font-size: 0.82rem;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
[data-theme="light"] .entityedit-location-pill { background: rgba(15,23,42,0.03); }
.entityedit-location-pill:hover {
    background: rgba(124,58,237,0.1);
    border-color: rgba(124,58,237,0.4);
    color: var(--text);
    transform: translateY(-1px);
}
.entityedit-location-pill i { color: var(--muted); font-size: 0.75rem; }
.entityedit-location-pill:hover i { color: var(--brand); }
.entityedit-location-name { font-weight: 500; }
.entityedit-location-et {
    color: var(--muted);
    font-size: 0.72rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(0,0,0,0.08);
    margin-left: 2px;
}
[data-theme="light"] .entityedit-location-et { background: rgba(15,23,42,0.06); }

/* Manage-mode pill cluster — wraps a location pill with an inline
   detach (×) button so the pill stays clickable but the X is a tap
   target outside it. */
.entityedit-location-pill-wrap {
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    overflow: visible;
}
.entityedit-location-pill-wrap .entityedit-location-pill {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}
.entityedit-pill-detach {
    border: 1px solid var(--border);
    border-left: 0;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    background: rgba(239,68,68,0.05);
    color: var(--c-red);
    padding: 0 10px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.entityedit-pill-detach:hover {
    background: var(--c-red);
    color: #fff;
}

.entityedit-attach-form {
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: rgba(124,58,237,0.03);
    margin-top: 12px;
}
[data-theme="light"] .entityedit-attach-form { background: rgba(124,58,237,0.04); }
.entityedit-attach-form .entityedit-label { margin-bottom: 6px; }


/* ============================================================
   Entity grid pages — Business Groups / Portfolios / Event Types
   list views. Replaces the dense data tables with a visual card
   grid: hero image + name + key stats + actions. Each card is
   tappable as a whole (entity-card-hero is the primary link),
   with explicit Edit + Delete buttons in the actions row.
   ============================================================ */
.entity-grid-page {
    padding: 0 20px 20px;
}
.entity-grid-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 20px 0;
}
.entity-grid-header .entity-grid-back { flex: 0 0 auto; }
.entity-grid-header .entity-grid-title {
    flex: 1 1 320px;
    min-width: 0;
}
.entity-grid-header .entity-grid-title h1 {
    font-size: 1.4rem;
    color: var(--text);
}
.entity-grid-header .entity-grid-new {
    flex: 0 0 auto;
    margin-left: auto;
}
.entity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.entity-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.entity-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    border-color: rgba(124,58,237,0.35);
}
.entity-card-hero {
    display: block;
    aspect-ratio: 16 / 9;
    background: rgba(255,255,255,0.04);
    overflow: hidden;
    text-decoration: none;
}
[data-theme="light"] .entity-card-hero { background: rgba(15,23,42,0.04); }
.entity-card-hero img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 18px;
    transition: transform .25s ease;
}
.entity-card:hover .entity-card-hero img { transform: scale(1.03); }
.entity-card-hero-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 3rem;
    background: linear-gradient(135deg, rgba(124,58,237,0.05) 0%, transparent 100%);
}
.entity-card-body {
    padding: 14px 14px 10px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.entity-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}
.entity-card-description {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.entity-card-meta {
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.entity-card-stats {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.entity-card-icons {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.entity-icon-thumb {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
}
[data-theme="light"] .entity-icon-thumb { background: rgba(15,23,42,0.03); }
.entity-icon-thumb.set {
    border-color: rgba(34,197,94,0.45);
    background: rgba(34,197,94,0.06);
}
.entity-icon-thumb.empty {
    color: var(--muted);
    opacity: 0.5;
    font-size: 0.7rem;
}
.entity-icon-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.entity-card-actions {
    border-top: 1px solid var(--border);
    padding: 10px 14px;
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(0,0,0,0.08);
}
[data-theme="light"] .entity-card-actions { background: rgba(15,23,42,0.02); }
.entity-card-actions .btn { font-size: 0.78rem; }


/* ============================================================
   Cascade strip — Template Platform inheritance breadcrumb
   Used above the Text Message + Email Body editors on
   /settings/texting and /settings/emails. Shows which scope
   contributes the resolved body and which scopes have overrides.
   ============================================================ */
.cascade-strip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}
.cascade-strip-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.cascade-chain {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.cascade-chain .cascade-step {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.78rem;
    border: 1px solid var(--border);
    color: var(--muted);
    background: rgba(255,255,255,0.02);
}
[data-theme="light"] .cascade-chain .cascade-step {
    background: rgba(15,23,42,0.02);
}
.cascade-chain .cascade-step + .cascade-step::before {
    content: '\f054'; /* fa-chevron-right */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--muted);
    font-size: 0.6rem;
    margin-right: 4px;
    opacity: 0.5;
}
.cascade-chain .cascade-step.set {
    color: var(--text);
    border-color: rgba(124,58,237,0.4);
    background: rgba(124,58,237,0.08);
}
.cascade-chain .cascade-step.active {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
}
.cascade-chain .cascade-step.active i { color: #fff; }
.cascade-resolved-preview {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.cascade-resolved-preview code {
    color: var(--text);
    background: rgba(124,58,237,0.06);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-word;
    white-space: pre-wrap;
}

.ve-overlay-thumb {
    display: block;
    max-width: 100%;
    max-height: 96px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
    padding: 4px;
    object-fit: contain;
}

/* end Section 75 */

/* ============================================================================
   Section 76 — Booking Setup Wizard (/bookings/setup/{eventid})
   Guided per-location setup: status hero + vertical progress rail + focused
   step panels. Theme-safe (tokens only); status colors map to the semantic
   --c-* palette so they read in both light and dark.
   ============================================================================ */

/* ---- status → color token (shared by rail + panel + badge) ---- */
.bk-setup .status-done      { --bk-status: var(--c-green);  --bk-status-bg: var(--c-green-bg); }
.bk-setup .status-todo      { --bk-status: var(--c-blue);   --bk-status-bg: var(--c-blue-bg); }
.bk-setup .status-attention { --bk-status: var(--c-amber);  --bk-status-bg: var(--c-amber-bg); }
.bk-setup .status-blocked   { --bk-status: var(--c-gray);   --bk-status-bg: var(--c-gray-bg); }
.bk-setup .status-optional  { --bk-status: var(--c-slate);  --bk-status-bg: var(--c-slate-bg); }
.bk-setup .status-ongoing   { --bk-status: var(--c-gray);   --bk-status-bg: var(--c-gray-bg); }

/* ---- Status hero ---- */
.bk-setup-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.bk-setup-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background: radial-gradient(120% 140% at 0% 0%, var(--hero-accent, var(--brand)) 0%, transparent 55%);
}
.bk-setup-hero.is-live    { --hero-accent: var(--c-green); }
.bk-setup-hero.is-pending { --hero-accent: var(--c-amber); }
.bk-setup-hero-main { display: flex; align-items: center; gap: 1rem; position: relative; }
.bk-setup-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    color: #fff;
    background: var(--hero-accent, var(--brand));
    white-space: nowrap;
}
.bk-setup-hero-headline { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.bk-setup-hero-sub { color: var(--muted); font-size: 0.85rem; }
.bk-setup-hero-progress { position: relative; min-width: 200px; flex: 1; max-width: 340px; }
.bk-setup-hero-progress .progress { height: 10px; background: rgba(255,255,255,0.08); border-radius: 999px; }
.bk-setup-hero-progress .progress-bar { background: var(--hero-accent, var(--brand)); border-radius: 999px; transition: width 0.4s ease; }
.bk-setup-hero-pct { text-align: right; color: var(--muted); font-size: 0.8rem; margin-top: 0.25rem; }

/* ---- Progress rail ---- */
.bk-setup-rail-card { position: sticky; top: 88px; }
.bk-setup-rail { list-style: none; margin: 0; padding: 0; }
.bk-setup-rail-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
    cursor: pointer;
    color: var(--text);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.bk-setup-rail-item:hover { background: var(--row-hover); }
.bk-setup-rail-item.is-active { background: var(--row-hover); border-color: var(--brand); }
.bk-setup-rail-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* connector dot */
.bk-setup-dot {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--bk-status, var(--c-gray));
    background: var(--bk-status-bg, var(--c-gray-bg));
    border: 1.5px solid var(--bk-status, var(--c-gray));
    position: relative;
}
/* connector line between dots */
.bk-setup-rail li:not(:last-child) .bk-setup-dot::after {
    content: "";
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5px;
    height: calc(100% + 0.6rem);
    background: var(--border);
}
.bk-setup-rail-body { display: flex; flex-direction: column; min-width: 0; }
.bk-setup-rail-label { font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.bk-setup-rail-meta { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.15rem; }
.bk-setup-rail-status { font-size: 0.72rem; color: var(--bk-status, var(--muted)); font-weight: 600; }
.bk-setup-rail-req {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 0.3rem;
}

/* ---- Focused step panel ---- */
.bk-setup-panel { border-left: 3px solid var(--bk-status, var(--brand)); }
.bk-setup-panel-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.bk-setup-panel-num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--bk-status, var(--brand));
    background: var(--bk-status-bg, var(--c-violet-bg));
    border: 1.5px solid var(--bk-status, var(--brand));
}
.bk-setup-panel-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--text); }
.bk-setup-panel-tags { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.bk-setup-panel-tier { font-size: 0.75rem; color: var(--muted); }
.bk-setup-panel-why { font-size: 0.95rem; color: var(--text); margin: 0.25rem 0 0.5rem; }
.bk-setup-panel-guidance { font-size: 0.85rem; margin-bottom: 1.25rem; }
.bk-setup-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

/* status badge inside the panel (reuses badge-pill base, colored by token) */
.bk-status-badge {
    color: var(--bk-status, var(--c-gray));
    background: var(--bk-status-bg, var(--c-gray-bg));
    border: 1px solid var(--bk-status, var(--c-gray));
}

/* ---- Auto-hiding "finish setup" banner on the location page ---- */
.bk-setup-nudge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    border-radius: 12px;
    border: 1px solid var(--c-amber);
    background: var(--c-amber-bg);
    margin-bottom: 1.25rem;
}
.bk-setup-nudge-text { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--text); }
.bk-setup-nudge-text i { color: var(--c-amber); }

/* "Back to Setup" return banner (shown on a fix screen reached via ?from=setup) */
.bk-setup-nudge.is-return { border-color: var(--brand); background: var(--c-violet-bg); }
.bk-setup-nudge.is-return .bk-setup-nudge-text i { color: var(--brand); }

@media (max-width: 991.98px) {
    .bk-setup-rail-card { position: static; margin-bottom: 1rem; }
}

/* Inline action form inside a step panel — complete the step here, no detour */
.bk-setup-panel .bk-inline-form {
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
    padding-top: 1rem;
    margin-bottom: 1rem;
}
.bk-setup-panel .bk-inline-form .form-label { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.15rem; }

/* end Section 76 */

/* ============================================================================
   SECTION 77 — Analytics Period Filter + comparison (shared)
   Drives application/views/layout/_period_filter.php + period_filter.js. The
   period-delta + period-compare-* classes are the reusable side-by-side /
   delta vocabulary every analytics surface renders with.
   ============================================================================ */

/* Filter bar — sits above each dashboard's data */
.period-filter {
    gap: 0.5rem;
    align-items: center;
}
.period-filter .period-presets .btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.period-filter .period-custom.d-flex,
.period-filter .period-compare-custom.d-flex { display: flex !important; }
.period-filter input[type="date"].form-control-sm { max-width: 9.5rem; }
.period-filter .period-caption { white-space: nowrap; }

/* Delta badge — colored by good/bad direction, not just up/down */
.period-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.4;
}
.period-delta-good { color: var(--c-green); background: var(--c-green-bg); }
.period-delta-bad  { color: var(--c-red);   background: var(--c-red-bg); }
.period-delta-flat { color: var(--c-gray);  background: var(--c-gray-bg); }

/* Stat card in comparison mode — current value big, comparison + delta beneath */
.stat-card .stat-card-compare {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--muted);
}
.stat-card .stat-card-compare .scc-prior { font-variant-numeric: tabular-nums; }

/* Side-by-side comparison TABLE — current | comparison | Δ columns.
   Apply .data-table-compare to a .data-table to right-align the numeric trio. */
.data-table-compare th.compare-col,
.data-table-compare td.compare-col { text-align: right; font-variant-numeric: tabular-nums; }
.data-table-compare td.compare-prior { color: var(--muted); }
.data-table-compare th.compare-delta,
.data-table-compare td.compare-delta { text-align: right; white-space: nowrap; }

/* end Section 77 */

/* ============================================================================
   SECTION 78 — Queue Board (live day timeline)
   Vertical time-scaled queue: every slot positioned by time, service on the
   left, reservation chips, plus the clock + queue-position overlay lines.
   ========================================================================== */
.qb-timeline {
    position: relative;
    max-height: calc(100vh - 320px);
    min-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
}
.qb-grid { position: relative; width: 100%; }

/* Hour gridlines + gutter labels */
.qb-hourline {
    position: absolute; left: 0; right: 0;
    border-top: 1px solid var(--border);
    pointer-events: none;
}
.qb-hourlabel {
    position: absolute; left: 4px;
    transform: translateY(-50%);
    font-size: 0.66rem; color: var(--muted);
    font-variant-numeric: tabular-nums;
    pointer-events: none; width: 48px;
}

/* Slot blocks */
.qb-slot {
    position: absolute;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: 8px;
    padding: 3px 7px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.qb-slot:hover, .qb-slot:focus {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    outline: none;
    z-index: 4;
}
.qb-slot-full { border-left-color: var(--c-green); background: var(--c-green-bg); }
.qb-slot-open { border-left-style: dashed; opacity: .82; }
.qb-slot-svc {
    font-weight: 700; font-size: 0.78rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qb-slot-time { font-size: 0.68rem; color: var(--muted); margin-bottom: 2px; }
.qb-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.qb-chip { font-size: 0.68rem; }
.qb-chip-open {
    font-size: 0.68rem; color: var(--muted);
    border: 1px dashed var(--border); border-radius: 4px; padding: 0 5px;
}

/* Overlay lines (P3): clock = where we are in the day; queue = who we're serving */
.qb-line {
    position: absolute; left: 0; right: 0; height: 0;
    pointer-events: none; z-index: 6;
}
.qb-line-label {
    position: absolute; right: 6px; top: -9px;
    font-size: 0.6rem; font-weight: 700; padding: 1px 6px;
    border-radius: 6px; white-space: nowrap;
}
.qb-line-clock { border-top: 2px dashed var(--c-blue); }
.qb-line-clock .qb-line-label { background: var(--c-blue-bg); color: var(--c-blue); }
.qb-line-queue { border-top: 2px solid var(--c-violet); }
.qb-line-queue .qb-line-label { background: var(--c-violet-bg); color: var(--c-violet); }

/* Per-hour breakdown strip (P4) */
.qb-hourstrip {
    display: flex; gap: 6px; overflow-x: auto;
    padding-bottom: 4px;
}
.qb-hourcell {
    flex: 0 0 auto; min-width: 96px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 9px;
}
.qb-hourcell-h { font-weight: 700; font-size: 0.72rem; }
.qb-hourcell-m { font-size: 0.68rem; color: var(--text); }
.qb-hourcell-s { font-size: 0.62rem; color: var(--muted); white-space: nowrap; }

/* Drag-to-notify selection band (P5) */
.qb-dragband {
    position: absolute; left: 58px; right: 4px;
    background: rgba(124,58,237,0.14);
    border: 1px dashed var(--c-violet);
    border-radius: 6px; pointer-events: none; z-index: 5;
}

/* end Section 78 */

/* ============================================================================
   SECTION 79 — Season Scheduler: Operating / Mall Hours zones
   Three bands shaded behind the day canvas (Mall/Operating Hours feature).
   Theme-aware via tokens. pointer-events:none is set inline so draw still works.
   ============================================================================ */
/* Outside mall (venue) hours — not bookable. Diagonal hatch = unavailable. */
.fs-zone-closed {
    background: repeating-linear-gradient(
        45deg,
        var(--c-slate-bg),
        var(--c-slate-bg) 5px,
        transparent 5px,
        transparent 10px
    );
}
/* Mall hours outside operating hours — bookable, but flagged as extended. */
.fs-zone-mall {
    background: var(--c-amber-bg);
}
/* end Section 79 */

/* ════════════════════════════════════════════════════════════════════════
   Section 80 — Featured Location designer (bookings/locationpages/showcase)
   Helper classes layered on top of the shared .customizer-* shell (Section
   around L6818). Theme-token only — works in light + dark.
   ════════════════════════════════════════════════════════════════════════ */
.customizer-save-status { font-size: .76rem; color: var(--muted); }
.customizer-save-status.saving { color: var(--c-amber); }
.customizer-save-status.saved  { color: var(--c-green); }
.customizer-save-status.error  { color: var(--c-red); }

/* Page-View picker — two selectable cards (Traditional vs Featured Location) */
.sc-view-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-view-opt {
    display: flex; flex-direction: column; gap: 2px;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; cursor: pointer; background: var(--surface);
    transition: border-color .12s, box-shadow .12s;
}
.sc-view-opt:hover { border-color: var(--brand); }
.sc-view-opt.active { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(124,58,237,.25); }
.sc-view-opt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.sc-view-opt-title { font-weight: 600; font-size: .85rem; color: var(--text); }
.sc-view-opt-sub { font-size: .72rem; color: var(--muted); line-height: 1.35; }
@media (max-width: 480px) { .sc-view-picker { grid-template-columns: 1fr; } }

/* Featured-only sections dim until Featured Location is selected */
.sc-featured-only[data-active="0"] .customizer-section { opacity: .6; }

/* Background color/image type pills (per zone) */
.sc-bg-pills { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.sc-bg-pill { margin: 0; padding: 4px 14px; font-size: .78rem; cursor: pointer; color: var(--muted); background: var(--surface); }
.sc-bg-pill + .sc-bg-pill { border-left: 1px solid var(--border); }
.sc-bg-pill.active { background: var(--brand); color: #fff; }
.sc-bg-pill input { position: absolute; opacity: 0; pointer-events: none; }

/* Media-library image picker box */
.sc-img {
    border: 1px dashed var(--border); border-radius: 10px; min-height: 84px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--surface); padding: 6px;
}
.sc-img.has-img { border-style: solid; padding: 0; }
.sc-img-thumb { max-width: 100%; max-height: 160px; object-fit: contain; display: block; }
.sc-img.is-empty .sc-img-empty { text-align: center; }

/* Row flash — when a service card is clicked in the preview, its rail row pulses
   so the photographer sees where the persistent control lives. */
.sc-svc-img.sc-svc-flash {
    animation: scSvcFlash 1.4s ease-out;
    border-radius: 10px;
}
@keyframes scSvcFlash {
    0%   { box-shadow: 0 0 0 3px var(--brand); background: var(--row-hover); }
    100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
}
/* end Section 80 */

/* ════════════════════════════════════════════════════════════════════════
   Section 81 — Booking Flow Designer (journey tabs over the showcase editor)
   The Landing tab = the showcase editor; Book/Add-Ons/Checkout/Confirmation
   swap the left controls to per-step panels. Theme-token only.
   ════════════════════════════════════════════════════════════════════════ */
.flow-tabs {
    display: flex; gap: 2px; flex-wrap: wrap;
    padding: 8px 14px 0; margin-bottom: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;                  /* full-width bar across the top of the editor */
}
.flow-tab {
    appearance: none; border: 1px solid transparent; border-bottom: none;
    background: transparent; color: var(--muted);
    font-size: .76rem; font-weight: 600; line-height: 1;
    padding: 8px 11px; border-radius: 8px 8px 0 0; cursor: pointer;
    transition: color .12s, background .12s;
}
.flow-tab:hover { color: var(--text); background: var(--row-hover); }
.flow-tab.active {
    color: var(--brand); background: var(--surface);
    border-color: var(--border); border-bottom-color: var(--surface);
    margin-bottom: -1px;
}
.flow-tab i { opacity: .8; }
/* Anchor tabs (the Block Builder's journey bar links out to the Flow Designer panes) */
a.flow-tab { text-decoration: none; display: inline-flex; align-items: center; }
/* The Block Builder shows the same journey bar as a flush row under its menu bar */
.bkb-flow-tabs { flex: 0 0 auto; margin-top: 0; border-radius: 0; }

/* The panes wrapper is now the scroll container (was .customizer-sections, which
   used to be a direct flex child of .customizer-controls). flex:1 + min-height:0
   lets it fill the remaining column height and scroll; tabs above stay fixed. */
.flow-panes { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* The accordion no longer owns the scroll — .flow-panes does — so let it flow. */
.flow-pane .customizer-sections { flex: none; overflow: visible; }
/* Only the active pane shows; Landing pane holds the original sections. */
.flow-pane { display: none; }
.flow-pane.flow-pane-active { display: block; }
.flow-pane-intro {
    padding: 14px 16px 4px; font-size: .82rem; color: var(--text);
}
.flow-pane-intro p { line-height: 1.4; }
.flow-field-group {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 8px;
}
.flow-field-group .form-check.form-switch { margin: 0; padding-left: 2.6em; }
.flow-field-group .form-check-label { font-size: .82rem; color: var(--text); }

/* Per-field save feedback (mirrors the showcase saved/saving cue) */
[data-flow-field].flow-saving { opacity: .6; }
[data-flow-field].flow-saved { box-shadow: 0 0 0 2px var(--c-green); }
.flow-field-group .form-check-input.flow-saved { box-shadow: 0 0 0 3px var(--c-green-bg); }
/* end Section 81 */

/* ============================================================================
   SECTION 82 — Booking Page Text bulk grid (bookings/pagetext)
   Spreadsheet-style cascade editor. Theme-token colors; sticky first column.
   ============================================================================ */
.pt-grid-wrap { max-height: calc(100vh - 230px); overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.pt-grid { margin-bottom: 0; min-width: 1100px; }
.pt-grid th[scope="col"] {
    position: sticky; top: 0; z-index: 3; background: var(--surface);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.pt-grid .pt-rowhead {
    position: sticky; left: 0; z-index: 2; background: var(--surface);
    min-width: 190px; max-width: 230px; font-weight: 600; vertical-align: middle;
}
.pt-grid thead .pt-rowhead { z-index: 4; }
.pt-grid td { vertical-align: top; min-width: 150px; }
.pt-row-default .pt-rowhead { background: var(--c-violet-bg); }
.pt-row-mall .pt-rowhead    { background: var(--c-blue-bg); }
.pt-row-mall td             { background: rgba(59,130,246,0.04); }
.pt-row-loc .pt-rowhead     { font-weight: 500; }

.pt-cell { position: relative; }
.pt-cell-input { font-size: .8rem; }
.pt-cell-input::placeholder { color: var(--muted); font-style: italic; opacity: .8; }
.pt-cell-src { display: inline-block; margin-top: 2px; }
.pt-cell-status {
    position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%;
    background: transparent; transition: background .2s ease;
}
.pt-cell-status.is-saving { background: var(--c-amber); }
.pt-cell-status.is-ok     { background: var(--c-green); }
.pt-cell-status.is-err    { background: var(--c-red); }

/* Inheritance hints in the single-scope Featured Location editor (Page Text). */
.sc-inherit-hint { line-height: 1.3; }
/* end Section 82 */

/* ============================================================================
   Section 83 — Storage Lifecycle timeline (storage policy editor modal)
   Begin-day stage list with inline pricing + 30-day steppers. Theme-aware.
   ============================================================================ */
.storage-timeline { display: flex; flex-direction: column; gap: 8px; }

.tl-stage {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: 10px;
}
.tl-stage-free     { border-left-color: var(--c-green); opacity: 0.95; }
.tl-stage-terminal { border-left-color: var(--c-slate); }

.tl-stage-main { min-width: 0; }
.tl-stage-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tl-stage-name { font-weight: 600; color: var(--text); }
.tl-stage-when { font-size: 0.78rem; color: var(--muted); }
.tl-stage-meta { font-size: 0.74rem; color: var(--muted); margin-top: 2px; }

.tl-stage-ctrls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tl-dur { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }

/* connector dot between stages */
.tl-stage + .tl-stage { position: relative; }
.tl-stage + .tl-stage::before {
    content: ""; position: absolute; left: 16px; top: -8px; height: 8px;
    border-left: 2px dotted var(--border);
}

@media (max-width: 575.98px) {
    .tl-stage { flex-direction: column; align-items: stretch; }
    .tl-stage-ctrls { justify-content: flex-end; }
}
/* end Section 83 */

/* ════════════════════════════════════════════════════════════════════════
   Section 84 — Partner Portal shell + sidebar
   The partner shell (views/layout/template_partner.php) is its own flex layout
   — NOT the Bootstrap grid / admin #sidebar system. A fixed-width sticky sidebar
   panel + a flexible main column. The critical bit: `.partner-main { min-width:0 }`
   so wide content (the editors' preview iframes) can't blow out the flex track
   and overlap the sidebar (the bug the grid version had).
   ════════════════════════════════════════════════════════════════════════ */
.partner-shell {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem;
    max-width: 1560px;
    margin: 0 auto;
}
.partner-main {
    flex: 1 1 auto;
    min-width: 0;          /* allow the column to shrink; stops iframe overflow/overlap */
}
.partner-sidebar {
    flex: 0 0 230px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.5rem;
    box-shadow: var(--shadow);
    position: sticky;
    top: 1rem;
}
@media (max-width: 767.98px) {
    .partner-shell { flex-direction: column; gap: 0.75rem; padding: 0.75rem; }
    .partner-sidebar { position: static; flex: 1 1 auto; width: 100%; }
}

/* Design-studio editors (Look & feel, Booking page): the live preview is the
   point of these screens, so it gets the dominant column (col-lg-8) and is
   pinned tall while the narrower controls list (col-lg-4) scrolls — never a
   cramped sliver. Sticky lives on the card (not the col) so it has room to
   stick within the stretched grid track. */
.partner-editor-preview {
    position: sticky;
    top: 1rem;
}
.partner-preview-frame {
    display: block;
    width: 100%;
    height: calc(100vh - 9.5rem);
    min-height: 600px;
    border: 0;
    border-radius: 0 0 .5rem .5rem;
}
@media (max-width: 991.98px) {
    /* below lg the columns stack — drop sticky and use a comfortable height */
    .partner-editor-preview { position: static; }
    .partner-preview-frame { height: 75vh; min-height: 480px; }
}
.partner-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text);
    border-radius: 9px;
    padding: 0.55rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.partner-sidebar .nav-link i {
    width: 1.15rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--muted);
    transition: color 0.15s ease;
    flex: 0 0 auto;
}
.partner-sidebar .nav-link:hover {
    background: var(--row-hover);
    color: var(--text);
}
.partner-sidebar .nav-link:hover i { color: var(--brand); }
.partner-sidebar .nav-link.active {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}
.partner-sidebar .nav-link.active i { color: #fff; }
.partner-sidebar .nav-link.disabled {
    color: var(--text);
    font-weight: 600;
    cursor: default;
}
.partner-sidebar .nav-link.disabled:hover { background: transparent; }
.partner-sidebar .sidebar-label {
    opacity: 0.7;
    color: var(--muted);
    padding: 0.8rem 0.8rem 0.25rem;
}
.partner-sidebar .sidebar-label:first-child { padding-top: 0.35rem; }

/* Sidebar location accordion — one collapsible group per location, each
   holding that location's design editors (Look & feel / Gallery / Booking / …). */
.partner-loc-toggle { cursor: pointer; }
.partner-loc-toggle .partner-loc-caret { transition: transform 0.2s ease; opacity: 0.55; flex: 0 0 auto; }
.partner-loc-toggle[aria-expanded="true"] .partner-loc-caret { transform: rotate(180deg); }
.partner-loc-editors {
    margin: 0.1rem 0 0.35rem 0.65rem;
    padding-left: 0.4rem;
    border-left: 2px solid var(--border);
    list-style: none;
}
.partner-loc-editors .nav-link { font-size: 0.85rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
/* A location the partner can't design (no editable surfaces) still appears, as a
   plain non-interactive entry, so the full location list is always visible. */
.partner-loc-static { color: var(--muted); cursor: default; }
.partner-loc-static:hover { background: transparent; color: var(--muted); }
.partner-loc-filter {
    max-width: 7.5rem;
    height: 1.7rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.8rem;
}

/* Visual-editor image-upload slots (booking + look&feel). */
.partner-img-group .sidebar-label { opacity: 0.7; }
.partner-img-thumb {
    flex: 0 0 auto;
    width: 64px; height: 44px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--row-hover);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.partner-img-thumb .partner-img-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-img-thumb .partner-img-empty { color: var(--muted); font-size: 0.9rem; }
.min-w-0 { min-width: 0; }
/* Click-to-edit: flash the control group the partner clicked in the preview. */
.partner-section-flash { animation: partnerSectionFlash 1.2s ease; border-radius: 8px; }
@keyframes partnerSectionFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
    25%      { box-shadow: 0 0 0 3px var(--brand); }
}

/* ── Design-studio editor chrome (toolbar + grouped control sections) ──── */
.partner-editor-head { margin-bottom: 0.25rem; }
.partner-editor-actions .badge-pill { white-space: nowrap; }
.partner-img-note { font-style: italic; opacity: 0.85; }

/* Collapsible control groups in the editor rail. */
.partner-editor-controls .partner-editor-section { border-radius: 11px; }
.partner-editor-section > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}
.partner-section-toggle { color: var(--text); }
.partner-section-toggle:hover { color: var(--brand); }
.partner-section-toggle > i.fa-solid:first-child {
    width: 1.15rem;
    text-align: center;
    color: var(--brand);
    flex: 0 0 auto;
}
.partner-section-caret { transition: transform 0.2s ease; opacity: 0.5; flex: 0 0 auto; }
.partner-section-toggle[aria-expanded="true"] .partner-section-caret { transform: rotate(180deg); }
.partner-editor-section .card-body { padding: 0.9rem; }

/* Preview device-width toggle (desktop / tablet / mobile). The framed states
   constrain the iframe to a device width + centre it on a subtle stage. */
.partner-preview-stage { transition: padding 0.15s ease; }
.partner-preview-stage.partner-preview-framed { background: var(--row-hover); padding: 0.75rem 0; }
.partner-preview-devices .btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
/* end Section 84 */

/* ═══════════════════════════════════════════════════════════════════════
   Section 85 — Booking Page Block Builder ("Spotlight") editor chrome
   The editor page's own controls. The block PREVIEW styles (.bkb-hero,
   .bkb-svc-card, …) live in booking-blocks.css (the preview iframe).
   Reuses the .customizer-* shell from the showcase editor.
   ═══════════════════════════════════════════════════════════════════════ */
.bkb-page { max-width: 1500px; }
/* The Block Builder is a FULL-SCREEN editor (the base fixed .customizer-wrap, pinned under
   the nav): a top MENU BAR (.bkb-head) + journey tabs as flex rows, then the palette | preview
   row filling the rest. Flexbox fills it — no magic height, and nothing overlays the toolbar. */
.bkb-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; flex: 0 0 auto; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.bkb-head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bkb-head-actions .form-select { width: auto; min-width: 200px; }
.bkb-save-pill { font-size: .8rem; color: var(--muted); min-width: 8ch; }
.bkb-save-pill.is-saving { color: var(--c-amber); }
.bkb-save-pill.is-saved  { color: var(--c-green); }
.bkb-save-pill.is-error  { color: var(--c-red); }
.bkb-inherit-note { font-size: .85rem; }

/* Promo card in the Page-View section that links to the builder */
.bkb-promo { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border: 1px solid var(--border);
    border-radius: 12px; background: linear-gradient(135deg, rgba(124,58,237,.10), rgba(124,58,237,.02)); }
.bkb-promo-title { font-weight: 700; }
.bkb-promo-sub { font-size: .82rem; color: var(--muted); }
.bkb-promo .btn { white-space: nowrap; }

/* Palette */
.bkb-controls { padding: .25rem .25rem 1rem; overflow-y: auto; }
.bkb-palette { margin-bottom: 1rem; }
.bkb-palette-title, .bkb-layers-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 1rem .25rem .45rem; }
.bkb-palette-title:first-child { margin-top: .25rem; }
.bkb-pal-group { margin-bottom: .5rem; }
.bkb-pal-group-label { font-size: .72rem; color: var(--muted); margin: .25rem; }
.bkb-pal-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; }
.bkb-pal-btn { display: flex; align-items: center; gap: .4rem; padding: .5rem .55rem; border: 1px solid var(--border);
    border-radius: 9px; background: var(--surface); color: var(--text); font-size: .82rem; cursor: pointer; text-align: left; transition: .12s; }
.bkb-pal-btn:hover { border-color: var(--brand); transform: translateY(-1px); }
.bkb-pal-btn:disabled { opacity: .5; cursor: not-allowed; }
.bkb-pal-drag { cursor: grab; }
.bkb-pal-drag:active { cursor: grabbing; }
.bkb-pal-drag.ui-draggable-dragging { box-shadow: var(--shadow); border-color: var(--brand); opacity: .95; }
.bkb-pal-btn i { color: var(--brand); width: 1.1em; text-align: center; }
.bkb-pal-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Layers list */
.bkb-layers { list-style: none; margin: 0; padding: 0; }
.bkb-layers--drop { outline: 2px dashed var(--brand); outline-offset: 2px; border-radius: 9px; } /* palette-tile drop target */
.bkb-layer { display: flex; align-items: center; gap: .3rem; padding: .1rem .25rem; border: 1px solid transparent; border-radius: 9px; }
.bkb-layer.is-sel { border-color: var(--brand); background: var(--row-hover); }
.bkb-layer.is-off { opacity: .5; }
.bkb-layer-grip { cursor: grab; color: var(--muted); padding: .4rem .2rem; }
.bkb-layer-grip:active { cursor: grabbing; }
.bkb-layer-main { flex: 1; display: flex; align-items: center; gap: .5rem; background: none; border: 0; color: var(--text); text-align: left; padding: .4rem .3rem; cursor: pointer; }
/* Visible drop indicator while reordering rows or dropping a palette tile into the list */
.bkb-layers .ui-sortable-placeholder { visibility: visible !important; height: 38px; border: 2px dashed var(--brand); border-radius: 9px; background: var(--row-hover); margin: .15rem 0; }
.bkb-layer-main i { color: var(--brand); width: 1.1em; text-align: center; }
.bkb-layer-eye { background: none; border: 0; color: var(--muted); padding: .4rem .5rem; cursor: pointer; }
.bkb-layer-eye:hover { color: var(--text); }
.bkb-layers-empty { color: var(--muted); font-size: .85rem; padding: 1rem .5rem; text-align: center; }

/* Property panel */
.bkb-back { text-decoration: none; }
/* Right-hand slide-in inspector (over the preview) — editing keeps the canvas + list visible */
.bkb-inspector {
    position: absolute; top: 0; right: 0; bottom: 0; width: 340px;
    display: flex; flex-direction: column;
    background: var(--surface); border-left: 1px solid var(--border);
    box-shadow: var(--shadow); transform: translateX(100%);
    transition: transform .2s ease; z-index: 100;
}
.bkb-inspector.is-open { transform: none; }
.bkb-inspector-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.bkb-inspector-title { font-weight: 600; color: var(--text); }
.bkb-inspector > #bkbProps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; }
@media (max-width: 900px) { .bkb-inspector { width: 100%; border-left: none; } }
/* Page-settings drawer — shares the .bkb-inspector slide-in; hosts the non-block
   page SETTINGS (fallback Page View + Look & Theme + backgrounds). */
.bkb-settings[hidden] { display: none; }
.bkb-settings .bkb-settings-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; }
.bkb-set-section { border: 1px solid var(--border); border-radius: 10px; margin-bottom: .6rem; background: var(--surface); overflow: hidden; }
.bkb-set-section > summary { cursor: pointer; list-style: none; padding: .6rem .75rem; font-weight: 600; color: var(--text); display: flex; align-items: center; }
.bkb-set-section > summary::-webkit-details-marker { display: none; }
.bkb-set-section > summary::after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: auto; font-size: .7rem; color: var(--muted); transition: transform .2s ease; }
.bkb-set-section[open] > summary::after { transform: rotate(180deg); }
.bkb-set-section > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.bkb-set-section-body { padding: .35rem .75rem .75rem; border-top: 1px solid var(--border); }
/* radio "cards" for the fallback Page View (mirror the showcase editor's picker) */
.bkb-set-viewpick { display: grid; gap: .5rem; }
.bkb-set-viewopt { position: relative; display: block; border: 1px solid var(--border); border-radius: 10px; padding: .6rem .7rem .6rem 2.2rem; cursor: pointer; }
.bkb-set-viewopt.active { border-color: var(--brand); background: var(--c-violet-bg); }
.bkb-set-viewopt input[type="radio"] { position: absolute; left: .7rem; top: .8rem; }
.bkb-set-viewopt-title { display: block; font-weight: 600; color: var(--text); }
.bkb-set-viewopt-sub { display: block; font-size: .78rem; color: var(--muted); }
/* background image picker (reuses the shared media modal via BkbEditor.openMedia) */
.bkb-set-img { display: flex; align-items: center; gap: .6rem; }
.bkb-set-img-preview { flex: 0 0 auto; width: 72px; height: 48px; border: 1px solid var(--border); border-radius: 8px; background: var(--row-hover) center / cover no-repeat; }
.bkb-set-img-actions { display: flex; flex-direction: column; gap: .3rem; }
/* palette tile for a singleton section already on the page */
.bkb-pal-btn.is-used, .bkb-pal-btn.is-used:hover { opacity: .45; cursor: not-allowed; transform: none; border-color: var(--border); }
.bkb-props-head { font-weight: 700; margin: .1rem .25rem .7rem; display: flex; align-items: center; gap: .5rem; }
.bkb-props-head i { color: var(--brand); }
.bkb-field { margin-bottom: .55rem; }
.bkb-field-label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .25rem; line-height: 1.35; }
/* A prop that auto-disables when another setting makes it irrelevant (e.g. hero
   Min Height under Natural fit): reset the fieldset chrome, grey the inert control. */
.bkb-field-off { border: 0; margin: 0; padding: 0; min-width: 0; opacity: .5; }
.bkb-field-note { margin-top: .25rem; }
.bkb-color { display: flex; align-items: center; gap: .4rem; }
.bkb-color input[type="color"] { width: 34px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; }
.bkb-color-hex { max-width: 8ch; }
.bkb-align .btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.bkb-switch { padding-left: 2.4em; }
.bkb-rte-tb { display: flex; gap: .15rem; margin-bottom: .25rem; }
.bkb-rte-tb button { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: .25rem .5rem; cursor: pointer; }
.bkb-rte-body { min-height: 90px; overflow: auto; }
/* merge-tag picker */
.bkb-rte-mergetag { font-weight: 700; }
.bkb-mt-menu { position: absolute; z-index: 3000; min-width: 230px; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: .35rem; }
.bkb-mt-group { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .45rem .5rem .2rem; }
.bkb-mt-item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: .35rem .5rem; cursor: pointer; color: var(--text); }
.bkb-mt-item:hover { background: var(--row-hover); }
.bkb-mt-item code { color: var(--brand); font-size: .8rem; }
.bkb-mt-item span { font-size: .78rem; color: var(--muted); }
.bkb-imgfield { border: 1px solid var(--border); border-radius: 10px; padding: .5rem; }
.bkb-imgfield-thumb img { max-width: 100%; max-height: 120px; border-radius: 6px; display: block; }
.bkb-imgfield-thumb .bkb-img-none { color: var(--muted); font-size: .8rem; }
.bkb-imgfield-btns { display: flex; gap: .4rem; margin-top: .4rem; }
.bkb-badgelist { display: flex; flex-direction: column; gap: .35rem; }
.bkb-badge-row { display: flex; gap: .3rem; align-items: center; }
.bkb-badge-icon { max-width: 10ch; }
.bkb-acc { border: 1px solid var(--border); border-radius: 10px; margin-top: .6rem; }
.bkb-acc > summary { cursor: pointer; padding: .55rem .7rem; font-weight: 600; font-size: .88rem; list-style: none; }
.bkb-acc > summary::-webkit-details-marker { display: none; }
.bkb-acc[open] > summary { border-bottom: 1px solid var(--border); }
.bkb-acc-body { padding: .6rem .7rem; }
.bkb-acc-body .bkb-field { margin-bottom: .45rem; }
.bkb-acc-body .bkb-field:last-child { margin-bottom: 0; }
/* Add-On Presentation panel — preset picker opens by default. */
.bkb-pres-panel > summary { color: var(--brand); }
/* Service Cards block → per-scope card editor deep-links */
.bkb-scpanel > summary { color: var(--brand); }
.bkb-scpanel-hint { font-size: .8rem; color: var(--muted); margin: 0 0 .55rem; line-height: 1.4; }
.bkb-scpanel-empty { font-size: .82rem; color: var(--muted); margin: 0; }
.bkb-scpanel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.bkb-scpanel-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.bkb-scpanel-name { font-size: .86rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkb-scpanel-edit { flex: 0 0 auto; white-space: nowrap; }
.bkb-dow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; }
.bkb-dow { font-size: .82rem; display: flex; align-items: center; gap: .25rem; }
.bkb-props-foot { margin-top: 1rem; }
.bkb-media-tile { width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: none; cursor: pointer; }
.bkb-media-tile img { width: 100%; height: 90px; object-fit: cover; display: block; }

/* Preview viewport frames on the block editor iframe */
#previewFrame.vp-tablet { max-width: 768px; margin: 0 auto; }
#previewFrame.vp-mobile { max-width: 390px; margin: 0 auto; }

/* Template chooser cards */
.bkb-tpl { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1rem .5rem;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; transition: .12s; }
.bkb-tpl:hover { border-color: var(--brand); transform: translateY(-2px); }
.bkb-tpl i { font-size: 1.6rem; color: var(--brand); margin-bottom: .25rem; }
.bkb-tpl span { font-weight: 700; }
.bkb-tpl small { color: var(--muted); font-size: .72rem; text-align: center; }
.bkb-tpl--wide { flex-direction: row; text-align: left; align-items: center; gap: 12px; padding: 14px 16px; flex-wrap: wrap;
    border-color: var(--brand); background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(124,58,237,.03)); }
.bkb-tpl--wide i { margin: 0; font-size: 1.4rem; }
.bkb-tpl--wide span { flex: 1 1 auto; }
.bkb-tpl--wide small { flex: 0 0 100%; text-align: left; }

/* Version history list */
.bkb-hist { list-style: none; margin: 0; padding: 0; }
.bkb-hist-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .25rem; border-bottom: 1px solid var(--border); }
.bkb-hist-row:last-child { border-bottom: 0; }
.bkb-hist-rev { font-weight: 700; }
.bkb-hist-meta { color: var(--muted); font-size: .8rem; margin-left: auto; }
.bkb-hist-restore { flex: 0 0 auto; }
/* end Section 85 */

/* ═══════════════════════════════════════════════════════════════════════════
   Section 86 — Storage Sell-Through ("My Real Behavior")
   Year-over-year decay screen (storage/behavior_view). Only geometry that isn't
   expressible with Bootstrap utilities lives here — colours/cards come from the
   shared tokens + base components (stat-card, badge-pill, data-table).
   ═══════════════════════════════════════════════════════════════════════════ */
.sellthrough-intro { max-width: 60ch; }
.sellthrough-chartwrap { position: relative; height: 360px; }
@media (max-width: 575.98px) {
    .sellthrough-chartwrap { height: 300px; }
}
/* end Section 86 */

/* ============================================================================
   Section 87 — Partner "All Locations" progress (CP2)
   Read-only per-surface stage on the partner dashboard cards + the same
   5-segment bar reused in the card/table views. Colour comes from the shared
   semantic tokens (--c-*); each bar is tinted via a data-driven --seg-color var.
   ═══════════════════════════════════════════════════════════════════════════ */
.partner-surface-list { display: flex; flex-direction: column; gap: .55rem; }
.partner-surface-row { padding-top: .55rem; border-top: 1px solid var(--border); }
.partner-surface-row:first-child { padding-top: 0; border-top: 0; }
.partner-surface-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.partner-surface-name { font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
a.partner-surface-name:hover { color: var(--brand); text-decoration: underline; }
.partner-surface-stage { font-size: .72rem; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.partner-progress { display: flex; gap: 3px; align-items: center; }
.partner-progress-seg { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--border); transition: background .2s ease; }
.partner-progress-seg.on { background: var(--seg-color, var(--brand)); }
/* Table view (CP1) — keep each surface column wide enough for the bar + label. */
.partner-table-cell { min-width: 150px; vertical-align: middle; }
/* end Section 87 */

/* ============================================================================
   Section 88 — Template Migration Workbench (/templateplatform/migrate)
   Source picker rows, AI-question review cards, detected-media rows. All colour
   comes from the shared theme tokens so it works in both light and dark.
   ═══════════════════════════════════════════════════════════════════════════ */
.wb-source-list { max-height: 320px; overflow-y: auto; }
.wb-source { background: transparent; }
.wb-source.active { background: var(--row-hover); border-left: 3px solid var(--brand); }
.wb-stat-num { font-size: 1.35rem; font-weight: 800; color: var(--brand); }
.wb-flag { border-left: 3px solid var(--c-amber); }
.wb-flag.wb-flag-done { border-left-color: var(--c-green); opacity: .85; }
.wb-flag-region { text-transform: uppercase; letter-spacing: .04em; }
.wb-media-row { padding: .4rem 0; border-top: 1px solid var(--border); }
.wb-media-row:first-child { border-top: 0; }
.wb-media-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 6px;
    border: 1px solid var(--border); background: var(--surface); flex: 0 0 auto; }
.wb-media-thumb-fallback { color: var(--muted); font-size: 1.1rem; }
/* end Section 88 */

/* ============================================================================
   SECTION 89 — Delivery Gate inline editor (Platform Emails timing & delays)
   Card expander + bulk grid share the .dg-editor control set. Theme-safe:
   colors come from tokens so both light and dark work.
   ============================================================================ */
.dg-editor { transition: box-shadow .2s ease; border-radius: 8px; }
.dg-editor.dg-saved  { box-shadow: 0 0 0 2px var(--c-green); }
.dg-editor.dg-error  { box-shadow: 0 0 0 2px var(--c-red); }
.dg-field.dg-dim { opacity: .45; }
.dg-field.dg-dim input, .dg-field.dg-dim select { pointer-events: none; }
.dg-eff { font-style: italic; }
.pe-dg-toggle { color: var(--muted); font-weight: 600; }
.pe-dg-toggle:hover { color: var(--brand); }
.pe-dg-summary { color: var(--text); }
/* Bulk grid: keep the wide table scrollable rather than bleeding the page. */
.dg-grid-wrap { overflow-x: auto; }
.dg-grid td, .dg-grid th { white-space: nowrap; vertical-align: middle; }
.dg-grid .dg-grid-num { max-width: 74px; }
.dg-grid tr.dg-row-changed td { background: var(--c-amber-bg); }
/* end Section 89 */

/* ============================================================================
   SECTION 90 — Waiting on Photos board (delivery/photowait)
   ============================================================================ */
.pw-stuck > td, .pw-stuck > th { background: var(--c-amber-bg); }
/* end Section 90 */

/* ============================================================================
   SECTION 91 — Scope multi-picker (Engagement Flows "who sees this campaign")
   A searchable, scrollable checkbox list for choosing MANY targets at one
   cascade level. Locations are grouped by business group. Bootstrap handles the
   controls; this only adds the scroll box, the sticky group headers, and the
   row hover — all on theme tokens so it works light and dark.
   ============================================================================ */
.scope-picker { border: 1px solid var(--border); border-radius: .5rem; background: var(--surface); }
.scope-picker-bar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
                    padding: .4rem; border-bottom: 1px solid var(--border); }
.scope-picker-bar .scope-picker-search { flex: 1 1 8rem; min-width: 8rem; }
.scope-picker-count { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.scope-picker-list { max-height: 15rem; overflow-y: auto; padding: .25rem; }
.scope-picker-group { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
                      color: var(--muted); font-weight: 700; padding: .35rem .4rem .2rem;
                      display: flex; align-items: center; justify-content: space-between; gap: .5rem;
                      position: sticky; top: 0; background: var(--surface); z-index: 1; }
.scope-picker-item { display: flex; align-items: center; gap: .45rem;
                     padding: .2rem .4rem; border-radius: .25rem; }
.scope-picker-item:hover { background: var(--row-hover); }
.scope-picker-item label { margin: 0; cursor: pointer; flex: 1 1 auto; font-size: .9rem; }
.scope-picker-item input { flex: 0 0 auto; cursor: pointer; }
.scope-picker-empty { padding: .6rem .4rem; font-size: .85rem; color: var(--muted); }
/* end Section 91 */