/* ══════════════════════════════════════════════════════════════════
   db-theme.css — OurDay Dashboard Bootstrap Theme
   Single source of truth for all custom styling.
   Bootstrap 5 handles layout utilities, spacing, grid, and base
   components. This file covers only what Bootstrap cannot.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens ─────────────────────────────────────────── */
:root {
    /* Colours */
    --white:                 #FFFFFF;
    --white-rgb:             255, 255, 255;
    --very-dark-gray:        #1a1a1a;
    --very-dark-gray-rgb:    26, 26, 26;
    --soft-pink:             #e8a0b4;
    --soft-pink-rgb:         232, 160, 180;
    --green-balloon:         #7dc4a8;
    --green-balloon-rgb:     125, 196, 168;
    --blue-beauty:           #779abf;
    --blue-beauty-rgb:       119, 154, 191;
    --cream:                 #FDFBF7;
    --cream-rgb:             253, 251, 247;
    --gold:                  #C9A96E;
    --gold-rgb:              201, 169, 110;
    --gold-light:            #E8D5B5;
    --gold-light-rgb:        232, 213, 181;
    --gold-border:           rgba(232, 213, 181, 0.28);
    --gold-bg-dim:           rgba(201, 169, 110, 0.12);
    --gold-bg-active:        rgba(232, 213, 181, 0.16);
    --panel-bg:              rgba(255, 245, 230, 0.07);
    --sidebar-bg:            rgba(10, 8, 5, 0.97);
    --topbar-bg:             rgba(0, 0, 0, 0.55);
    --offcanvas-bg:          rgba(0, 0, 0, 0.90);
    --overlay-bg:            rgba(255, 255, 255, 0.05);
    --body-bg:               #303030;

    /* Status colours */
    --color-attending:  var(--green-balloon);
    --color-declined:   var(--soft-pink);
    --color-pending:    var(--tx-primary);

    /* Text — white-on-dark scale */
    --tx-primary:       rgba(255, 255, 255, 0.95);
    --tx-secondary:     rgba(255, 255, 255, 0.80);
    --tx-tertiary:      rgba(255, 255, 255, 0.65);
    --tx-muted:         rgba(255, 255, 255, 0.42);

    /* Text - black-on-light scale */
    --tx-primary-dark:   rgba(26, 26, 26, 1.00);
    --tx-secondary-dark: rgba(26, 26, 26, 0.65);
    --tx-muted-dark:     rgba(26, 26, 26, 0.40);

    /* Typography — font families */
    --font-heading:     'Cormorant Garamond', Georgia, serif;
    --font-body:        'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Typography — size scale (8 tiers, down from 43 ad-hoc values) */
    --fs-xs:      .65rem;   /* badges, muted meta, unit labels            */
    --fs-sm:      .75rem;   /* helper text, timestamps, progress labels   */
    --fs-base:    .82rem;   /* primary UI text, form labels, dropdowns    */
    --fs-md:      .9rem;    /* form headings, venue results               */
    --fs-lg:      1.2rem;   /* panel titles, page section headings        */
    --fs-xl:      1.6rem;   /* page titles, large RSVP/stat numbers       */
    --fs-2xl:     1.8rem;   /* billing prices, success headings           */
    --fs-display: 2.6rem;   /* countdown numbers, hero stat values        */

    /* Typography — letter-spacing scale (3 values) */
    --ls-none:    0;        /* body text, inputs                          */
    --ls-labels:  .08em;    /* labels, badges, nav section headers        */
    --ls-caps:    .16em;    /* uppercase decorative caps                  */

    --ease:             cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --sidebar-w:        240px;
    --topbar-h:         60px;

    /* Override Bootstrap border-radius to match our theme */
    --bs-border-radius:    3px;
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: 4px;
}

.db-label-info {
    background: var(--blue-beauty);
}
.db-label-success {
    background: var(--green-balloon);
}
.db-label-warning {
    background: #fdd280;
}
.db-label-danger {
    background: var(--soft-pink);
}
.db-label-secondary-info {
    color: var(--blue-beauty);
}
.db-label-secondary-success {
    color: var(--green-balloon);
}
.db-label-secondary-warning {
    color: #fdd280;
}
.db-label-secondary-danger {
    color: var(--soft-pink);
}

/* ── 2. Base ──────────────────────────────────────────────────── */

/* Remove blue browser/Bootstrap focus ring on mouse click; keep it for keyboard nav */
.btn:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
.btn:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(201,169,110,.35);
}

body {
    font-family: var(--font-body);
    background-color: var(--body-bg);
    color: var(--tx-primary);
    min-height: 100vh;
}

/* ── 3. Background image + gradient overlay ───────────────────── */
.db-bg {
    position: fixed;
    inset: 0;
    background: url('/assets/img/backgrounds/foto-pettine-IfjHaIoAoqE-unsplash.jpg') center/cover no-repeat;
    z-index: 0;
}
.db-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* background: linear-gradient(135deg, rgba(30,20,12,.62) 0%, rgba(40,28,16,.52) 50%, rgba(30,20,12,.62) 100%); */
    background: linear-gradient( to bottom, rgba(15, 12, 10, 0.45) 0%, rgba(15, 12, 10, 0.55) 50%, rgba(15, 12, 10, 0.65) 100% );
}

/* ── 4. Glassmorphism ─────────────────────────────────────────── */
.db-glass    { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.db-glass-sm { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); }
.db-glass-lg { backdrop-filter: blur(20px);  -webkit-backdrop-filter: blur(20px); }
.db-glass-xl { backdrop-filter: blur(30px);  -webkit-backdrop-filter: blur(30px); }

/* ── 5. Layout shell ──────────────────────────────────────────── */
/* No z-index here on purpose. It used to carry z-index:1, which made the shell a
   stacking context — and since every modal lives inside the shell while Bootstrap
   appends .modal-backdrop to <body>, the modal's own z-index:1055 only counted
   within the shell. The backdrop (1050, in the root context) therefore painted
   over every dialog in the dashboard: dimmed and unclickable, including buttons
   with data-bs-dismiss that involve no custom JS at all.

   position: relative alone does not create a stacking context, so the sidebar and
   topbar below still layer correctly against page content, which has no z-index. */
.db-shell    { position: relative; min-height: 100vh; }
/* backdrop-filter on glassmorphic cards creates a new stacking context.
   Both sidebar and topbar need explicit z-index so they always paint
   above page content — otherwise a card's stacking context bleeds over
   the sidebar on hover repaint. */
.db-sidebar  { position: relative; z-index: 50; width: var(--sidebar-w); background: var(--sidebar-bg); border-right: 1px solid var(--gold-border); }
.db-topbar   { position: relative; z-index: 100; height: var(--topbar-h); background: var(--topbar-bg); }
/* Main column: flex child that holds topbar + scrollable content.
   min-width:0 prevents flex blowout; overflow is left to <main> only
   so topbar dropdowns are not clipped. */
.db-main-col { min-width: 0; flex: 1 1 0; }

/* ── 6. Gold border helpers ───────────────────────────────────── */
.border-gold   { border-color: var(--gold-border) !important; }
.border-gold-b { border-bottom: 1px solid var(--gold-border); }
.border-gold-t { border-top:    1px solid var(--gold-border); }
.db-vr         { width: 1px; background: var(--gold-border); align-self: stretch; }

/* ── 7. Sidebar navigation ────────────────────────────────────── */
.db-nav-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--tx-muted);
}
.db-nav-link {
    font-size: var(--fs-base);
    color: var(--tx-secondary) !important;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.db-nav-link svg { opacity: .7; }
.db-nav-link:hover {
    color: var(--gold-light) !important;
    background: rgba(232,213,181,.10) !important;
}
.db-nav-link.active {
    color: var(--gold-light) !important;
    background: var(--gold-bg-active) !important;
    border-right: 2px solid var(--gold-light);
}
.db-nav-link.active svg { opacity: 1; }

/* Nav badge (pill inside nav item) */
.db-nav-badge {
    background: rgba(201,169,110,.25);
    color: var(--gold-light);
    font-size: var(--fs-xs);
}

/* ── 8. Sidebar brand & selectors ────────────────────────────── */
.db-logo-name {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: 400;
    letter-spacing: var(--ls-labels);
    color: #fff;
    text-decoration: none;
}
.db-logo-name:hover { color: #fff; text-decoration: none; }
.db-logo-name span { color: var(--gold-light); font-style: italic; }

.db-logo-tagline {
    font-size: var(--fs-xs);
    font-weight: 300;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--tx-muted);
}

.db-selector-label {
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--tx-muted);
}
.db-selector-name {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--gold-light);
    cursor: pointer;
}
.db-selector-date {
    font-size: var(--fs-sm);
    font-weight: 300;
    color: var(--tx-secondary);
}

/* ── 9. Sidebar footer ────────────────────────────────────────── */
.db-plan-badge {
    background: var(--gold-bg-dim);
    border: 1px solid rgba(201,169,110,.3);
    color: var(--gold);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--ls-labels);
    text-transform: uppercase;
}
.db-user-name  { font-size: var(--fs-base); font-weight: 500; color: var(--tx-primary); }
.db-user-email { font-size: var(--fs-xs);   font-weight: 300; color: var(--tx-muted); }

/* ── 10. Avatar ───────────────────────────────────────────────── */
.db-avatar {
    background: linear-gradient(135deg, rgba(201,169,110,.4), rgba(232,213,181,.2));
    border: 1px solid var(--gold-border);
    font-family: var(--font-heading);
    color: var(--gold-light);
    flex-shrink: 0;
}
/* Standard 32px avatar (topbar + sidebar footer) */
.db-avatar--sm { width: 32px; height: 32px; font-size: var(--fs-md); }
/* 40px avatar (RSVP list) */
.db-avatar--md { width: 40px; height: 40px; font-size: var(--fs-lg); }

/* Notification list scroll container */
.db-notif-list { max-height: 280px; overflow-y: auto; }

/* ── 11. Topbar ───────────────────────────────────────────────── */
.db-topbar-title {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 400;
    letter-spacing: var(--ls-none);
    color: var(--tx-primary);
}
.db-search {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
}
.db-search input {
    background: none;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 300;
    color: var(--tx-primary);
    width: 100%;
    min-width: 0;
}
.db-search input::placeholder { color: var(--tx-muted); }

.db-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    background: var(--glass-bg, rgba(30,26,20,.97));
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    z-index: 1050;
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}
.search-category-header {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-labels);
    text-transform: uppercase;
    color: var(--tx-muted);
    padding: .45rem .75rem .2rem;
}
.search-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .75rem;
    cursor: pointer;
    transition: background .15s;
}
.search-item:hover,
.search-item.active {
    background: rgba(255,255,255,.07);
}
.search-item-icon {
    color: var(--tx-muted);
    flex-shrink: 0;
    font-size: var(--fs-base);
}
.search-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.search-item-label {
    font-size: var(--fs-base);
    color: var(--tx-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-item-subtitle {
    font-size: var(--fs-sm);
    color: var(--tx-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-empty {
    padding: .75rem;
    font-size: var(--fs-base);
    color: var(--tx-muted);
    text-align: center;
}

.db-lang-btn {
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: var(--ls-labels);
    color: var(--tx-secondary);
    border: 1px solid var(--gold-border);
    background: rgba(255,255,255,.04);
    cursor: pointer;
    border-radius: var(--bs-border-radius);
}
.db-lang-btn:hover { color: var(--gold-light); border-color: var(--gold); }

.db-icon-btn {
    width: 36px;
    height: 36px;
    background: var(--overlay-bg);
    border: 1px solid var(--gold-border);
    color: var(--tx-secondary);
    cursor: pointer;
}
.db-icon-btn:hover { color: var(--gold-light); border-color: var(--gold); }

.db-notif-dot {
    width: 6px;
    height: 6px;
    background: var(--gold);
    border: 1.5px solid rgba(10,8,6,.8);
    top: 6px;
    right: 6px;
}
.db-topbar-username { font-size: var(--fs-base); color: var(--tx-primary); }
.db-topbar-plan     { font-size: var(--fs-xs);  font-weight: 500; letter-spacing: var(--ls-labels); color: var(--gold); margin-top: 2px; }


/* ── 12. Page header ──────────────────────────────────────────── */
.db-welcome {
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gold-light);
}
.db-page-title {
    font-family: var(--font-heading);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: var(--ls-none);
    color: var(--tx-primary);
}
.db-page-title em { font-style: italic; color: var(--gold-light); }

.db-subtitle { font-size: var(--fs-base); font-weight: 300; color: var(--tx-secondary); }

/* Ornament separator */
.db-ornament { 
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0.75rem 0 1rem; }
.db-ornament__line {
    width: 100vh;
    height: 1px;
    background: linear-gradient(to right, rgba(232,213,181,.4), rgba(232,213,181,.4), transparent);
}
.db-ornament__diamond {
    width: 5px;
    height: 5px;
    background: var(--gold-light);
    transform: rotate(45deg);
    opacity: .6;
}

/* ── 13. Cards / panels ───────────────────────────────────────── */
.db-card {
    background: var(--panel-bg);
    border: 1px solid var(--gold-border) !important;
    border-radius: var(--bs-border-radius) !important;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.db-card:hover {
    border-color: rgba(232,213,181,.42) !important;
    background: rgba(255,245,230,.12);
}
.db-card.no-hover:hover {
    border-color: var(--gold-border) !important;
    background: var(--panel-bg);
}
.db-card-header { border-bottom: 1px solid var(--gold-border); }

.db-panel-title {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 400;
    color: #fff;
    letter-spacing: var(--ls-labels);
}
.db-panel-action {
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--ls-labels);
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    cursor: pointer;
}
.db-panel-action:hover { color: var(--gold-light); }

/* ── 14. Stat cards ───────────────────────────────────────────── */
.db-stat-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--ls-labels);
    text-transform: uppercase;
    color: var(--tx-secondary);
}
.card svg { color: var(--gold-light); }
.db-stat-value {
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: 1;
    letter-spacing: var(--ls-none);
    color: var(--tx-primary);
}
.db-stat-sub { font-size: var(--fs-base); font-weight: 400; color: var(--tx-secondary); }
.db-trend {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--color-attending);
}

/* ── 15. RSVP progress panel ──────────────────────────────────── */
.db-rsvp-num {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: 300;
    line-height: 1;
    color: var(--tx-primary);
}
.db-rsvp-num--attending { color: var(--color-attending); }
.db-rsvp-num--declined  { color: var(--color-declined); }
.db-rsvp-num--pending   { color: var(--color-pending); }
.db-rsvp-divider {
    width: 1px;
    height: 2.4rem;
    background: var(--gold-border);
    flex-shrink: 0;
}
.db-summary-label {
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: var(--ls-labels);
    text-transform: uppercase;
    color: var(--tx-muted);
}

/* Progress bar */
.db-progress {
    height: 4px;
    background: rgba(255,255,255,.08);
    border-radius: 2px;
}
.db-progress .progress-bar {
    background: linear-gradient(to right, var(--gold), var(--gold-light));
    border-radius: 2px;
}
.db-progress-label { font-size: var(--fs-base); font-weight: 400; color: var(--tx-primary); }

/* Segment row */
.db-seg-text { font-size: var(--fs-base); font-weight: 400; color: var(--tx-primary); }
.db-seg-dot  { display: inline-block; width: 6px; height: 6px; border-radius: 50%; vertical-align: middle; }
.db-seg-dot--attending { background: var(--color-attending); }
.db-seg-dot--declined  { background: var(--color-declined); }
.db-seg-dot--pending   { background: var(--tx-primary); }

.db-seg-val             { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 300; color: var(--tx-secondary); }
.db-seg-val--attending  { color: var(--color-attending); }
.db-seg-val--declined   { color: var(--color-declined); }
.db-seg-val--pending    { color: var(--color-pending); }

/* ── 16. Countdown panel ──────────────────────────────────────── */
.db-countdown-num {
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: 300;
    line-height: 1;
    color: var(--gold-light);
}
.db-unit-label {
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--tx-muted);
}
.db-countdown-sep {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    color: var(--gold-border);
    padding-top: .3rem;
}
.db-countdown-date {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-style: italic;
    color: var(--gold-light);
    opacity: .7;
    border-top: 1px solid var(--gold-border);
}

/* ── 17. RSVP list ────────────────────────────────────────────── */
.db-rsvp-item { border-bottom: 1px solid rgba(232,213,181,.08); }
.db-rsvp-item:last-child { border-bottom: none; }
.db-rsvp-name  { font-size: var(--fs-base); font-weight: 500; color: var(--tx-primary); }
.db-rsvp-event { font-size: var(--fs-sm);  font-weight: 300; color: var(--tx-muted); }
.db-rsvp-time  { font-size: var(--fs-xs);  font-weight: 300; color: var(--tx-muted); }
.db-rsvp-time--w  { min-width: 52px; text-align: right; }
.db-rsvp-badge-col { min-width: 78px; text-align: right; }

/* ── 18. Status badges ────────────────────────────────────────── */
.db-badge {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-labels);
    text-transform: uppercase;
}
.db-badge--attending { color: var(--color-attending); background: rgba(125,196,168,.12); border: 1px solid rgba(125,196,168,.25); }
.db-badge--declined  { color: var(--color-declined);  background: rgba(232,160,180,.12); border: 1px solid rgba(232,160,180,.25); }
.db-badge--pending   { color: var(--tx-muted);        background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); }

/* ── 19. Quick action tiles ───────────────────────────────────── */
.db-action-tile {
    background: var(--panel-bg);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}
.db-action-tile:hover {
    background: rgba(255,245,230,.13);
    border-color: rgba(232,213,181,.4);
}
.db-action-icon {
    width: 36px;
    height: 36px;
    background: var(--gold-bg-dim);
    border: 1px solid rgba(201,169,110,.25);
    border-radius: 50%;
    color: var(--gold);
}
.db-action-label { font-size: var(--fs-sm); font-weight: 400; color: var(--tx-secondary); line-height: 1.3; }

/* ── 20. Timeline / tasks ─────────────────────────────────────── */
.db-task-row { border-bottom: 1px solid rgba(232,213,181,.08); }
.db-task-row:last-child { border-bottom: none; }
.db-tl-dot {
    width: 8px;
    height: 8px;
    border: 1px solid var(--gold);
    background: rgba(201,169,110,.2);
    border-radius: 50%;
    flex-shrink: 0;
}
.db-tl-dot--done { border-color: var(--color-attending); background: rgba(125,196,168,.3); }
.db-tl-col { padding-top: 2px; }
.db-tl-line { width: 1px; flex: 1; background: var(--gold-border); margin-top: 4px; min-height: 28px; }
.db-task-check {
    width: 18px;
    height: 18px;
    border: 1px solid var(--gold-border);
    border-radius: 3px;
    flex-shrink: 0;
}
.db-task-check--done {
    background: rgba(201,169,110,.2);
    border-color: var(--gold);
    color: var(--gold);
}
.db-task-text { font-size: var(--fs-base); font-weight: 400; color: var(--tx-primary); }
.db-task-meta { font-size: var(--fs-xs);  font-weight: 300; color: var(--tx-muted); }

/* ── 21. Buttons ──────────────────────────────────────────────── */
.db-btn-primary { background: var(--gold-light); color: var(--tx-primary-dark); }
.db-btn-primary:hover { background: var(--white); transform: translateY(-2px); }
.db-btn-primary svg { color: var(--tx-primary-dark); }
.db-btn-secondary { background: transparent; border: 1px solid rgba(var(--white-rgb), 0.5); color: var(--tx-primary); }
.db-btn-secondary:hover { border-color: var(--gold-light); color: var(--gold-light); transform: translateY(-2px); }
.db-btn-secondary svg { color: var(--tx-primary); }
.db-btn-danger { background: transparent; border-color: var(--color-declined); color: var(--color-declined); }
.db-btn-danger:hover { background: rgba(var(--soft-pink-rgb),.3); border-color: var(--color-declined); color: var(--color-declined); transform: translateY(-2px); }
.db-btn-danger svg { color: var(--color-declined); }
.db-btn-input { border: 1px solid var(--gold-border); background: rgba(255,255,255,.06); color: var(--tx-primary); }
.input-group .form-control:has(~ .db-btn-input[style*="display:none"]) { border-radius: var(--bs-border-radius) !important; }
.input-group .db-datepicker-toggle,
.input-group .db-password-toggle,
.input-group .db-btn-input { border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0 !important; }
/* ── 22. Tables ───────────────────────────────────────────────── */
.db-table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(232,213,181,.06); color: var(--tx-secondary); }
.db-table-head tr { border-color: var(--gold-border); }
.db-table-th {
    color: var(--tx-secondary);
    font-size: var(--fs-base);
    font-weight: 500;
    letter-spacing: var(--ls-labels);
    /* text-transform: uppercase; */
}
.db-table-body { border-color: rgba(232,213,181,.08); }
.db-table-body tr { border-color: rgba(232,213,181,.08); color: var(--tx-secondary) }

/* ── 23. Form controls ────────────────────────────────────────── */
.db-form-control {
    background: rgba(255,255,255,.06);
    border-color: var(--gold-border);
    color: var(--tx-primary);
}
.db-form-control:focus {
    background: rgba(255,255,255,.09);
    border-color: var(--gold-light);
    color: var(--tx-primary);
    box-shadow: 0 0 0 .2rem rgba(201,169,110,.15);
}
.db-form-control:disabled,
.db-form-control[readonly],
.db-form-control:disabled:focus {
    background: rgba(var(--very-dark-gray-rgb),0.25);
    border-color: var(--gold-border);
    color: var(--tx-muted);
    box-shadow: none;
}
.subdomain-input-wrapper .db-form-control[readonly] {
    background: rgba(255,255,255,.06);
    border-right-color: transparent;
    color: var(--tx-primary);
}
.db-form-control::placeholder { color: var(--tx-muted); }
.db-form-control option { background: var(--body-bg); color: var(--tx-primary); }

.db-form-control.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--color-declined); }
.db-form-control.is-invalid:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { border-color: var(--color-declined); box-shadow: 0 0 0 3px rgba(232,160,180,.2); }
.invalid-feedback { color: var(--color-declined); }

.input-group .input-group-text {
    background: rgba(255,255,255,.06);
    border-color: var(--gold-border);
    color: var(--tx-muted);
    transition: border-color .15s ease-in-out;
}

.input-group-text {
    min-width: 40px;
    justify-content: center;
}

/* Remove inner double border between icon and input */
.input-group .input-group-text + .db-form-control,
.input-group .input-group-text + .form-select.db-form-control {
    border-left: 0;
}

/* Highlight icon border + move glow to group container on focus */
.input-group:has(.db-form-control:focus) .input-group-text {
    border-color: var(--gold-light);
}
.input-group:has(.db-form-control:focus) {
    box-shadow: 0 0 0 .2rem rgba(201,169,110,.15);
    border-radius: var(--bs-border-radius-sm);
}
.input-group .db-form-control:focus {
    box-shadow: none;
}

/* ── 24. Datepicker ───────────────────────────────────────────── */
.db-datepicker-toggle { cursor: pointer; }

/* Show/hide toggle on password fields. Same trailing-button treatment as the
   datepicker toggle above — it inherits .input-group-text for colour and
   border, and the shared radius rule in section 21 for the corners. */
.db-password-toggle { cursor: pointer; }
.db-password-toggle:hover { color: var(--gold); }
.db-password-toggle[aria-pressed="true"] { color: var(--gold); }

/* Edge draws its own reveal button inside password fields (::-ms-reveal is
   Microsoft's, and the only native show-password control any browser has).
   Without this, Edge users see two eye icons side by side — its unstyled one
   and ours. No other browser renders anything here. */
.input-group .db-form-control::-ms-reveal,
.input-group .db-form-control::-ms-clear { display: none; }

.db-datepicker {
    position: absolute;
    z-index: 1050;
    top: 100%;
    right: 0;
    background: var(--body-bg);
    border: 1px solid var(--gold-border);
    border-radius: .5rem;
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.3);
    padding: .75rem;
    width: 240px;
    margin-top: .25rem;
    user-select: none;
}

.db-dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.db-dp-title {
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: var(--ls-labels);
    color: var(--tx-primary);
    text-transform: uppercase;
}

.db-dp-nav {
    background: none;
    border: none;
    color: var(--tx-muted);
    font-size: var(--fs-lg);
    line-height: 1;
    padding: 0 .25rem;
    cursor: pointer;
    transition: color .15s;
}
.db-dp-nav:hover { color: var(--gold-light); }

.db-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.db-dp-dow {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-labels);
    color: var(--tx-muted);
    text-align: center;
    padding-bottom: .25rem;
}

.db-dp-day {
    text-align: center;
    font-size: var(--fs-base);
    padding: .3rem 0;
    border-radius: .25rem;
    cursor: pointer;
    color: var(--tx-secondary);
    transition: background .12s, color .12s;
}
.db-dp-day:hover    { background: rgba(201,169,110,.15); color: var(--tx-primary); }
.db-dp-day.is-today { color: var(--gold-light); font-weight: 600; }
.db-dp-day.is-selected {
    background: var(--gold-border);
    color: var(--tx-primary);
    font-weight: 600;
}

/* ── 25. Venue search widget ──────────────────────────────────── */
.venue-search-container { position: relative; width: 100%; }

.venue-search-dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0; right: 0;
    background: rgba(10,8,6,.97);
    border: 1px solid var(--gold-border);
    border-radius: .5rem;
    box-shadow: 0 .1875rem .75rem rgba(47,43,61,.14);
    backdrop-filter: blur(12px);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
}

.venue-search-result-item {
    padding: .75rem .875rem;
    cursor: pointer;
    border-bottom: 1px solid var(--gold-border);
    color: var(--tx-secondary);
    transition: background .15s;
}
.venue-search-result-item:last-child { border-bottom: none; }
.venue-search-result-item:hover { background: var(--gold-bg-dim); }

.venue-search-result-name { font-weight: 500; color: var(--tx-primary); font-size: var(--fs-md); }
.venue-search-result-secondary { font-size: var(--fs-base); color: var(--tx-muted); margin-top: .25rem; }

.venue-search-create-option { background: var(--gold-bg-dim); border-top: 1px solid var(--gold-border); font-weight: 500; }
.venue-search-create-option:hover { background: var(--gold-bg-active); }
.venue-search-create-option .venue-search-result-name { color: var(--gold-light); }

.venue-search-message { padding: .75rem .875rem; font-size: var(--fs-md); text-align: center; }

.venue-search-spinner {
    display: block;
    width: 14px; height: 14px;
    margin: .75rem auto;
    border: 2px solid var(--gold-border);
    border-top-color: var(--gold-light);
    border-radius: 50%;
    animation: db-spin .6s linear infinite;
}

/* Venue offcanvas form layout */
.venue-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.venue-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.venue-form-error {
    background: rgba(255,76,81,.1);
    border: 1px solid #ff4c51;
    border-radius: .375rem;
    padding: .75rem;
    color: #ff4c51;
    font-size: var(--fs-md);
    margin-bottom: 1rem;
}
/* The venue saved, but its address could not be geocoded, so the hotel map has
   nothing to centre on. Gold rather than red: nothing failed, and the couple can
   keep this address if they want to. */
.venue-form-warning {
    background: rgba(201,169,110,.1);
    border: 1px solid var(--gold-border);
    border-radius: .375rem;
    padding: .75rem;
    color: var(--tx-secondary);
    font-size: var(--fs-md);
    margin-bottom: 1rem;
}

/* Live verdict on the address being typed into the venue panel. Muted while
   checking, the theme's attending green when found, gold when not — not red,
   because an address Nominatim cannot place is still savable. */
.venue-address-status {
    font-size: var(--fs-md);
    margin-bottom: 1rem;
    padding: .5rem .75rem;
    border-radius: .375rem;
    border: 1px solid transparent;
}
.venue-address-status--checking  { color: var(--tx-muted); }
.venue-address-status--found     { color: var(--color-attending); border-color: rgba(125,196,168,.35); background: rgba(125,196,168,.08); }
.venue-address-status--not-found { color: var(--tx-secondary);    border-color: var(--gold-border);    background: rgba(201,169,110,.08); }

.venue-consent-row {
    background: rgba(201,169,110,.05);
    border: 1px solid rgba(201,169,110,.15);
    border-radius: .375rem;
    padding: 1rem;
    margin-top: 1.5rem;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--tx-secondary);
    font-style: italic;
}

/* Form labels */
.db-form-label {
    font-size: var(--fs-base);
    font-weight: 500;
    letter-spacing: var(--ls-labels);
    /*text-transform: uppercase;*/
    color: var(--tx-secondary);
    margin-bottom: .35rem;
}

/* Form inputs — override Bootstrap's default 1rem */
.form-control,
.form-select {
    font-size: var(--fs-base);
}

/* Inline help text below form fields */
.db-form-text {
    font-size: var(--fs-base);
    color: var(--tx-muted);
    margin-top: .25rem;
    display: block;
}

/* Optional label suffix (e.g. "(optional)") */
.db-form-optional {
    font-size: var(--fs-sm);
    font-weight: 300;
    color: var(--tx-muted);
    text-transform: none;
    letter-spacing: var(--ls-none);
}

/* form-check-label inside dark offcanvas/panels */
.db-check-label {
    font-size: var(--fs-base);
    color: var(--tx-secondary);
}

/* Muted gold icon (e.g. person icon beside name field) */
.db-muted-icon {
    color: rgba(201,169,110,.5);
    flex-shrink: 0;
}

/* Horizontal rule with gold border */
.db-hr {
    border: 0;
    border-top: 1px solid var(--gold-border);
    margin: 1rem 0;
}

/* Min-width wrapper for search bar in filter rows */
.db-search-min { min-width: 200px; }

/* Shorthand text-color helpers */
.db-tx-primary   { color: var(--tx-primary); }
.db-tx-secondary { color: var(--tx-secondary); }
.db-tx-muted     { color: var(--tx-muted); }



/* Inline spinner animation (loading rows) */
.db-spin { animation: db-spin 1s linear infinite; }

/* ── 25b. Offcanvas / modal ───────────────────────────────────── */

/* Coloris appends #clr-picker to <body> and ships z-index:1000, which predates
   Bootstrap's layer scale. Bootstrap puts the offcanvas backdrop at 1040 and the
   panel at 1045, so the colour picker on events.php opened *behind* the panel it
   belongs to — it was working the whole time, just painted underneath.
   1070 is Bootstrap's popover layer, which is what this panel is.

   Written as `body .clr-picker` rather than `.clr-picker` because header.php
   loads db-theme.css before $extra_css, so coloris.min.css comes later and would
   win on equal specificity. The extra element beats it without !important. */
body .clr-picker { z-index: 1070; }

.db-offcanvas {
    background: var(--offcanvas-bg);
    border-left: 1px solid var(--gold-border);
    min-width: 420px;
    max-width: 620px;
}
.db-offcanvas-header { background: transparent; }

.db-modal .modal-content {
    background: var(--body-bg);
    border: 1px solid var(--gold-border);
}
.db-modal .modal-header { border-bottom-color: var(--gold-border); }
.db-modal .modal-footer { border-top-color: var(--gold-border); }
.db-modal .modal-header .btn-close { filter: invert(1) brightness(1.5); }
/* Stat card icon circle */
.db-stat-icon { width: 42px; height: 42px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.db-stat-icon--attending  { background: rgba(125,196,168,.15); color: var(--color-attending); }
.db-stat-icon--guests     { background: rgba(201,169,110,.12); color: var(--gold); }
.db-stat-icon--pending    { background: rgba(232,213,181,.10); color: var(--tx-secondary); }
.db-stat-icon--declined   { background: rgba(232,160,180,.15); color: var(--color-declined); }
/* Slim progress bar wrapper */
.db-progress-sm { height: 6px; }

/* ── 25c. Alerts ──────────────────────────────────────────────── */
.db-alert-info    { border-left: 3px solid var(--blue-beauty) !important; }
.db-alert-warning { border-left: 3px solid var(--color-declined) !important; }

/* ── 26. Auth pages (standalone — no sidebar/topbar) ──────────── */

/* Full-screen blurred background — reuses .db-bg from §3 */
body.db-auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

/* Glass card container */
.db-auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    background: rgba(10, 8, 6, 0.35);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    padding: 2rem 2.5rem 2.5rem;
}

/* Brand heading inside auth card */
.db-auth-brand {
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: 400;
    letter-spacing: var(--ls-labels);
    color: #fff;
    text-decoration: none;
}
.db-auth-brand span { color: var(--gold-light); font-style: italic; }

.db-auth-subtitle {
    font-size: var(--fs-base);
    font-weight: 300;
    color: var(--tx-secondary);
}

/* Language dropdown — positioned top-right of the card */
.db-auth-lang-wrap {
    position: absolute;
    top: 1rem;
    right: 1rem;
}
.db-auth-lang-btn {
    display: flex;
    align-items: center;
    gap: .3rem;
    height: 28px;
    padding: 0 .65rem;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--gold-border);
    border-radius: 2rem;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--tx-secondary);
    transition: border-color .15s, color .15s;
}
.db-auth-lang-btn:hover { border-color: var(--gold); color: var(--gold-light); }

.db-auth-lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + .25rem);
    right: 0;
    min-width: 96px;
    padding: .25rem 0;
    background: rgba(10,8,6,.95);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    backdrop-filter: blur(12px);
    z-index: 200;
}
.db-auth-lang-dropdown.open { display: block; }

.db-auth-lang-opt {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .45rem .875rem;
    font-size: var(--fs-base);
    color: var(--tx-secondary);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.db-auth-lang-opt:hover  { background: var(--gold-bg-dim); color: var(--gold-light); }
.db-auth-lang-opt.active { color: var(--gold-light); font-weight: 600; }

/* Tab navigation */
.db-auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--gold-border);
    margin-bottom: 1.5rem;
}
.db-auth-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .625rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--tx-muted);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 500;
    transition: color .2s, border-color .2s;
}
.db-auth-tab-btn:hover { color: var(--tx-secondary); }
.db-auth-tab-btn.active { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* Auth-specific form label */
.db-auth-label {
    display: block;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--tx-secondary);
    margin-bottom: .35rem;
}

/* Full-width auth submit button */
.db-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .75rem;
    border-radius: var(--bs-border-radius);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    text-align: center;
}
.db-auth-btn-primary {
    background: var(--gold-light);
    color: var(--tx-primary-dark);
    padding: 0.75rem 2rem;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 500;
    letter-spacing: var(--ls-labels);
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    transition: all 0.3s var(--ease);
    display: inline-block;
}
.db-auth-btn-primary:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    color: var(--tx-primary-dark);
}
.db-auth-btn-primary:disabled { opacity: .65; cursor: not-allowed; }

.db-auth-btn-secondary {
    background: transparent;
    border: 1px solid var(--gold-border);
    color: var(--tx-secondary);
}
.db-auth-btn-secondary:hover {
    border-color: var(--gold);
    color: var(--gold-light);
    background: var(--gold-bg-dim);
}

/* Error / success messages */
.db-auth-error {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: rgba(232,160,180,.08);
    border-left: 3px solid var(--color-declined);
    color: var(--color-declined);
    padding: .75rem 1rem;
    border-radius: var(--bs-border-radius);
    margin-bottom: 1.25rem;
    font-size: var(--fs-base);
}
.db-auth-success {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: rgba(125,196,168,.08);
    border-left: 3px solid var(--green-balloon);
    color: var(--green-balloon);
    padding: .75rem 1rem;
    border-radius: var(--bs-border-radius);
    margin-bottom: 1.25rem;
    font-size: var(--fs-base);
}

/* Passkey icon */
.db-auth-passkey-icon {
    font-size: 3rem;
    color: var(--gold);
    text-align: center;
    margin: 1rem 0;
}

/* Loading spinner */
.db-auth-loading {
    display: none;
    text-align: center;
    padding: 2rem 0;
}
.db-auth-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(201,169,110,.2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: db-spin 1s linear infinite;
    margin: 0 auto 1rem;
}
@keyframes db-spin { to { transform: rotate(360deg); } }

/* Footer links below the card */
.db-auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gold-border);
    font-size: var(--fs-base);
    color: var(--tx-secondary);
}
.db-auth-footer a { color: var(--gold-light); text-decoration: none; font-weight: 500; }
.db-auth-footer a:hover { color: var(--gold-light); }
.db-auth-footer-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--tx-muted); font-size: var(--fs-base); text-decoration: none; transition: color .15s; }
.db-auth-footer-link:hover { color: var(--tx-secondary); }

/* ── 27. Inline utility classes (JS template literals) ───────── */
.db-mono    { font-family: monospace; }
.db-td-sm   { white-space: nowrap; font-size: var(--fs-base); }
.db-copy-btn { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .25rem; }
.db-action-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: .25rem; }
.db-badge-svg { display: inline; vertical-align: middle; margin-right: .3rem; }

/* ── 28. Skeleton loader ──────────────────────────────────────── */
.db-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.05) 75%);
    background-size: 200% 100%;
    animation: db-skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}
@keyframes db-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.db-skeleton-h4  { height: 16px; }
.db-skeleton-h3  { height: 12px; }
.db-skeleton-sq  { width: 30px; height: 30px; border-radius: 4px; }
.db-skeleton-map { height: 300px; border-radius: 0; }
.db-map-container { height: 300px; }

/* Overlay shown over the hotel map when there is nothing to plot — no venue
   set, or a venue whose address will not geocode. The map still renders behind
   it, framed on Belgium, so the card reads as empty rather than broken.

   z-index 1000 clears Leaflet's panes: tiles sit at 200, markers at 600 and
   controls at 800, all inside .leaflet-container's own stacking context. The
   backdrop takes pointer events so the dead map cannot be panned, and the inner
   panel sits above it. */
.db-map-notice {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
}
.db-map-notice-inner {
    max-width: 420px;
    padding: 1.25rem 1.5rem;
    text-align: center;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius);
    background: var(--body-bg);
}
/* Leaflet custom pin marker */
.db-map-pin-wrap   { display: flex; flex-direction: column; align-items: center; }
.db-map-pin-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.db-map-pin-tail   { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top-width: 10px; border-top-style: solid; }
/* Leaflet popup override */
.db-map-popup      { font-family: var(--font-body); font-size: var(--fs-base); min-width: 160px; }

/* ── 29. Accommodation lang switcher ──────────────────────────── */
.db-lang-tabs    { display: flex; gap: .25rem; border-bottom: 1px solid var(--gold-border); margin-bottom: .75rem; }
.db-lang-tab     { background: none; border: none; border-bottom: 2px solid transparent; padding: .3rem .6rem; font-size: var(--fs-sm); color: var(--tx-secondary); cursor: pointer; transition: color .15s, border-color .15s; margin-bottom: -1px; }
.db-lang-tab:hover { color: var(--tx-primary); }
.db-lang-tab.active { color: var(--gold-light); border-bottom-color: var(--gold); }
.db-lang-dot     { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: .3rem; vertical-align: middle; background: var(--tx-muted); }
.db-lang-dot.filled { background: var(--color-attending); }
.db-lang-panel       { font-size: var(--fs-base); color: var(--tx-secondary); line-height: 1.55; }
.db-lang-panel p     { margin-bottom: 0; }
.db-lang-empty       { color: var(--tx-muted); font-style: italic; }
.db-lang-char-count  { font-size: var(--fs-xs); color: var(--tx-muted); margin-top: .4rem; }
.db-lang-flag        { font-size: var(--fs-lg); line-height: 1; }
.db-icon-gold        { color: var(--gold); }

/* ── 30. Accommodation category buttons (map filter) ─────────── */
/* Colors are data-driven; JS toggles .db-cat-active / .db-cat-inactive */
.db-cat-btn { font-size: var(--fs-sm); transition: opacity .15s, filter .15s; border-width: 1px; border-style: solid; }
.db-cat-btn.db-cat-inactive { background: transparent !important; filter: none; opacity: .6; }

/* ── 30b. Topbar dropdown panels (notif, user, lang) ─────────── */
/* These share dark glass styling but must NOT inherit the fixed 60px
   height of .db-topbar. Use this class on all dropdown-menu elements
   that hang off the topbar. */
.db-dropdown-panel {
    background: rgba(20, 14, 8, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    color: var(--tx-primary);
    min-width: 200px;
}
/* Notification panel is wider */
#notif-dropdown.db-dropdown-panel { min-width: 320px; }

/* Notification list items (rendered by admin-dashboard.js) */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(232,213,181,.08);
    transition: background .15s;
    cursor: default;
}
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgba(201,169,110,.06); }
.notif-item:hover  { background: var(--gold-bg-dim); }
.notif-item--linked { cursor: pointer; }

.notif-item-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-bg-dim);
    border: 1px solid var(--gold-border);
    border-radius: 50%;
    color: var(--gold);
    font-size: var(--fs-sm);
}

.notif-item-body  { flex: 1; min-width: 0; }
.notif-item-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--tx-primary);
    margin-bottom: .2rem;
    line-height: 1.35;
}
.notif-item-text {
    font-size: var(--fs-sm);
    color: var(--tx-secondary);
    line-height: 1.45;
    margin-bottom: .35rem;
}
.notif-item-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.notif-item-time {
    font-size: var(--fs-xs);
    color: var(--tx-muted);
}
.notif-mark-read-btn {
    background: none;
    border: 1px solid var(--gold-border);
    border-radius: 2px;
    color: var(--gold);
    font-size: var(--fs-xs);
    font-family: var(--font-body);
    padding: .1rem .45rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.notif-mark-read-btn:hover {
    background: var(--gold-bg-dim);
    color: var(--gold-light);
}
.notif-empty {
    padding: 1.25rem 1rem;
    font-size: var(--fs-base);
    color: var(--tx-muted);
    text-align: center;
}

/* Dropdown items inside topbar panels */
.db-dropdown-panel .dropdown-item {
    color: var(--tx-secondary);
    font-size: var(--fs-base);
    font-family: var(--font-body);
}
.db-dropdown-panel .dropdown-item:hover,
.db-dropdown-panel .dropdown-item:focus {
    background: var(--gold-bg-dim);
    color: var(--gold-light);
}
.db-dropdown-panel .dropdown-item.active {
    background: var(--gold-bg-active);
    color: var(--gold-light);
}
.db-dropdown-panel .dropdown-item.text-danger { color: var(--color-declined) !important; }
.db-dropdown-panel .dropdown-item.text-danger:hover { background: rgba(232,160,180,.1); }
.db-dropdown-panel .dropdown-divider { border-color: var(--gold-border); }

/* ── 31. General content dropdowns (tables, cards) ───────────── */
.db-dropdown          { background: var(--body-bg); border: 1px solid var(--gold-border); border-radius: var(--radius); min-width: 140px; }
.db-dropdown-item     { color: var(--tx-secondary); font-size: var(--fs-base); padding: .45rem .85rem; display: flex; align-items: center; }
.db-dropdown-item:hover, .db-dropdown-item:focus { color: var(--tx-primary); background: var(--gold-bg-dim); }
.db-dropdown-danger   { color: var(--color-declined) !important; }
.db-dropdown-danger:hover { background: rgba(232,160,180,.1) !important; }
/* Utility: gold-coloured text for time values */
.db-gold-text         { color: var(--gold-light); }

/* ── 32. Events — timeline & tag swatch ──────────────────────── */
.db-timeline-track  { position: relative; height: 58px; margin-bottom: 4px; background: var(--overlay-bg); border-radius: 3px; cursor: crosshair; border: 1px solid var(--gold-border); }
.db-timeline-evt    { position: absolute; top: 5px; bottom: 5px; border-radius: 3px; overflow: hidden; cursor: pointer; min-width: 3px; transition: filter .15s; }
.db-timeline-evt:hover { filter: brightness(0.8); }
.db-timeline-inner  { padding: 3px 7px; color: #fff; font-size: var(--fs-sm); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-timeline-time   { font-weight: 700; display: block; }
.db-timeline-title  { display: block; opacity: .9; }
.db-timeline-ruler  { position: relative; height: 22px; }
.db-timeline-hour   { position: absolute; transform: translateX(-50%); font-size: var(--fs-xs); color: var(--tx-muted); white-space: nowrap; user-select: none; }
.db-timeline-hour::before { content: ''; position: absolute; top: -5px; left: 50%; width: 1px; height: 5px; background: var(--gold-border); }
/* Tag color input */
.db-color-input     { width: 36px; height: 34px; padding: 2px; border: 1px solid var(--gold-border); border-radius: 3px; cursor: pointer; background: transparent; }
/* Coloris color-picker overrides */
.clr-field          { display: flex !important; width: 100%; }
.clr-field input    { flex: 1; border-radius: 3px 0 0 3px !important; }
.clr-field button   { flex-shrink: 0; width: 36px; border-radius: 0 3px 3px 0 !important; }
/* Expandable event detail row */
.db-event-detail-row td { background: rgba(255,245,230,.04) !important; }
.db-expand-chevron  { font-size: var(--fs-sm); color: var(--tx-muted); transition: transform .2s; }
.db-event-row.expanded .db-expand-chevron { transform: rotate(90deg); }
.db-event-row { cursor: pointer; }

/* ── 33. Profile page ────────────────────────────────────────── */

/* Larger avatar for profile header */
.db-avatar--lg {
    width: 56px;
    height: 56px;
    font-size: var(--fs-xl);
}

/* Section sub-heading inside cards */
.db-section-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-labels);
    text-transform: uppercase;
    color: var(--tx-secondary);
}

/* Required field asterisk */
.db-required { color: var(--color-declined); }

/* Form check (radio/checkbox) input theming */
.db-form-check {
    background-color: rgba(255,255,255,.06);
    border-color: var(--gold-border);
}
.db-form-check:checked {
    background-color: var(--gold);
    border-color: var(--gold);
}
.db-form-check:focus {
    box-shadow: 0 0 0 .2rem rgba(201,169,110,.15);
    border-color: var(--gold);
}

/* Switch variant. HTML has no switch input type — a switch is a checkbox with
   role="switch" and Bootstrap's .form-switch styling. Bootstrap draws the knob
   with a background-image, and its default is a grey that vanishes on this dark
   panel, so both states are restated here. */
.form-switch .db-form-check {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.45%29'/%3e%3c/svg%3e");
    width: 2.25rem;
    height: 1.25rem;
}
.form-switch .db-form-check:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23252525'/%3e%3c/svg%3e");
}
.form-switch .db-form-check:focus:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.75%29'/%3e%3c/svg%3e");
}

/* Settings row: label and description on the left, control on the right. */
.db-setting-row {
    padding: 1rem 0;
    border-bottom: 1px solid var(--gold-border);
}
.db-setting-row:last-child { border-bottom: 0; }

/* Plan/tier badge in profile meta row */
.db-badge--plan {
    color: var(--gold-light);
    background: var(--gold-bg-dim);
    border: 1px solid var(--gold-border);
}

/* Attending-coloured icon (passkey checkmarks) */
.db-attending-icon { color: var(--color-attending); }
.db-attending-text { color: var(--color-attending); }

/* Gold icon (passkey key icon) */
.db-gold-icon { color: var(--gold); }

/* Declined-coloured icon */
.db-declined-icon { color: var(--color-declined); }

/* Profile tabs nav — lives inside .db-card-header, no extra border needed */
.db-profile-tabs {
    border: none;
    gap: 0;
    margin-bottom: -1px; /* overlap the card-header bottom border */
}
.db-profile-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    padding: .75rem 1.25rem;
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 400;
    letter-spacing: var(--ls-labels);
    color: var(--tx-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color .15s var(--ease), border-color .15s var(--ease);
}
.db-profile-tabs .nav-link svg { opacity: .6; transition: opacity .15s; }
.db-profile-tabs .nav-link:hover { color: var(--tx-primary); }
.db-profile-tabs .nav-link:hover svg { opacity: .9; }
.db-profile-tabs .nav-link.active {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
}
.db-profile-tabs .nav-link.active svg { opacity: 1; color: var(--gold); }

/* ── 34. Seating page ────────────────────────────────────────── */

/* The page used to pin itself to the viewport and forbid scrolling, so the
   canvas could fill whatever height was left. The summary table below it is
   taller than that, so the page now scrolls like every other dashboard page and
   the canvas takes a fixed working height instead (see .seat-layout). */

/* Stats bar */
.seat-stats {
    display: flex;
    gap: 2rem;
    align-items: center;
    padding: .875rem 1.25rem;
    background: var(--panel-bg);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    flex-shrink: 0;
}
.seat-stat-value {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: 300;
    color: var(--tx-primary);
    line-height: 1;
}
.seat-stat-value--attending { color: var(--color-attending); }
.seat-stat-value--warning   { color: var(--gold-light); }
.seat-stat-value--info      { color: var(--gold); }
.seat-stat-label {
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-labels);
    text-transform: uppercase;
    color: var(--tx-muted);
    margin-top: .15rem;
}
.seat-vr { width: 1px; height: 32px; background: var(--gold-border); flex-shrink: 0; }

/* Two-panel layout (sidebar + canvas)
   A working height of its own rather than "whatever the viewport has left": the
   summary table sits underneath, so the page scrolls and there is no remainder
   to claim. The canvas still scrolls inside this box, as it always did. */
.seat-layout {
    display: flex;
    height: clamp(420px, calc(100vh - var(--topbar-h) - 300px), 820px);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background: var(--panel-bg);
}

/* Left sidebar */
.seat-sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--gold-border);
    overflow: hidden;
}
.seat-sidebar-top {
    padding: .875rem 1rem .75rem;
    border-bottom: 1px solid var(--gold-border);
    flex-shrink: 0;
}
.seat-sidebar-heading {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-labels);
    text-transform: uppercase;
    color: var(--tx-muted);
    margin-bottom: .6rem;
}
.seat-guest-list {
    flex: 1;
    overflow-y: auto;
    padding: .5rem .75rem;
}
.seat-guest-list-empty {
    padding: 1.5rem .5rem;
    text-align: center;
    color: var(--tx-muted);
    font-size: var(--fs-base);
    line-height: 1.6;
}
.seat-party-group { margin-bottom: .75rem; }
.seat-party-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-labels);
    text-transform: uppercase;
    color: var(--tx-muted);
    padding: .2rem .25rem .35rem;
}
.seat-guest-chip {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    border-radius: var(--bs-border-radius);
    font-size: var(--fs-base);
    cursor: grab;
    user-select: none;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--gold-border);
    margin-bottom: .2rem;
    color: var(--tx-secondary);
    transition: background .12s, border-color .12s;
    min-width: 0;
}
.seat-guest-chip:hover { background: var(--gold-bg-dim); border-color: var(--gold); color: var(--tx-primary); }
.seat-guest-chip.dragging { opacity: .35; }
.seat-chip-icon { color: var(--tx-muted); flex-shrink: 0; }
.seat-guest-chip > span:not(.seat-chip-icon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.seat-guest-chip.seat-child-chip .seat-chip-icon { color: var(--gold); }

/* Canvas area */
.seat-canvas-wrapper {
    flex: 1;
    min-width: 0;
    overflow: auto;
    background-color: rgba(10, 8, 6, 0.55);
    background-image:
        linear-gradient(rgba(201,169,110,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,169,110,.08) 1px, transparent 1px);
    background-size: 40px 40px;
    position: relative;
}
.seat-canvas { position: relative; width: 800px; height: 600px; }

/* Empty state inside canvas */
.seat-canvas-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    text-align: center;
}
.seat-canvas-empty-icon { opacity: .2; color: var(--gold); margin-bottom: .75rem; }
.seat-canvas-empty-text { font-size: var(--fs-md); color: var(--tx-muted); margin: 0; line-height: 1.6; }
.seat-icon-faint { opacity: .25; }
.seat-icon-faint-30 { opacity: .30; }

/* Table cards */
.seat-table-card {
    position: absolute;
    background: rgba(58, 46, 34, 0.75);
    border: 1px solid var(--gold-border);
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    cursor: move;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .6rem .5rem .4rem;
    transition: border-color .15s, box-shadow .15s;
    text-align: center;
}
.seat-table-card:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201,169,110,.25), 0 2px 8px rgba(0,0,0,.35);
    z-index: 10;
}
.seat-table-card.drag-over {
    border-color: var(--color-attending);
    box-shadow: 0 0 0 2px rgba(125,196,168,.25);
}
.seat-table-card.is-full { border-color: var(--color-declined); }

/* Chairs.
   Children of the card, so a rotated table carries them round with it and seat 1
   keeps its position relative to the table. Sizes must match CHAIR_SIZE and
   CHAIR_OFFSET in seating.js, which computes the positions. */
.seat-chair-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Width and height are set per table by seating.js, which shrinks the chairs on
   a crowded table so they never overlap. */
.seat-chair {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* The glyph itself: outlined like a floor plan, filled with the canvas colour so
   a chair reads as a solid object against the table rather than a hole in it. */
.seat-chair-svg {
    width: 100%;
    height: 100%;
    fill: rgba(28, 23, 16, .92);
    stroke: var(--gold-border);
    stroke-width: 1.4;
    transition: fill .15s, stroke .15s;
}
.seat-chair.occupied .seat-chair-svg {
    fill: var(--color-attending);
    stroke: var(--color-attending);
}
.seat-chair.chair-drag-over .seat-chair-svg {
    fill: rgba(201,169,110,.55);
    stroke: var(--gold);
}
.seat-chair.occupied { cursor: grab; }

/* The seat number sits over the seat, not the back, and is turned back upright
   by seating.js whichever way the chair and the table face. */
.seat-chair-num {
    position: absolute;
    top: 58%;
    left: 50%;
    margin: -7px 0 0 -7px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    color: var(--tx-secondary);
    pointer-events: none;
}
.seat-chair.occupied .seat-chair-num { color: #1c1710; font-weight: 600; }

/* Drag-to-rotate handle — same hover-to-reveal treatment as the edit and delete
   buttons on the card. */
.seat-rotate-handle {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--gold-border);
    background: rgba(58, 46, 34, .95);
    color: var(--tx-secondary);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 3;
}
.seat-table-card:hover .seat-rotate-handle { display: flex; }
.seat-rotate-handle:hover { color: var(--gold); border-color: var(--gold); }
.seat-table-card.is-rotating .seat-rotate-handle { display: flex; cursor: grabbing; color: var(--gold); }
.seat-table-card.is-rotating { z-index: 20; }

/* Shape variants.
   The width and height here are only the minimum a table is ever drawn at —
   seating.js sets the real size inline, working out how much table it takes to
   seat the guests at a fixed chair size. A table for twelve is genuinely longer
   than one for six, as on a printed floor plan. */
.seat-shape-circular  { border-radius: 50%; min-width: 110px; min-height: 110px; }
.seat-shape-square    { border-radius: var(--bs-border-radius); min-width: 110px; min-height: 110px; }
.seat-shape-rectangle { border-radius: var(--bs-border-radius); min-width: 160px; min-height: 100px; }
.seat-shape-honor {
    border-radius: var(--bs-border-radius);
    min-width: 220px;
    min-height: 90px;
    border-color: var(--gold) !important;
    background: rgba(201,169,110,.12);
    box-shadow: 0 0 0 1px rgba(201,169,110,.3), 0 2px 8px rgba(0,0,0,.35);
}
.seat-shape-honor .seat-t-title { color: var(--gold-light); }
.seat-shape-honor .seat-t-count { color: var(--gold); }

.seat-t-title {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--tx-primary);
    line-height: 1.25;
    margin-bottom: .2rem;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seat-shape-circular .seat-t-title { max-width: 80px; }

.seat-t-count {
    font-size: var(--fs-sm);
    color: var(--tx-muted);
    font-weight: 500;
}
.seat-t-count.nearly-full { color: var(--gold-light); font-weight: 600; }
.seat-t-count.full        { color: var(--color-declined); font-weight: 700; }

.seat-t-actions { display: none; gap: .2rem; margin-top: .3rem; }
.seat-table-card:hover .seat-t-actions { display: flex; }
.seat-t-actions button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tx-muted);
    padding: 2px 5px;
    border-radius: 3px;
    transition: color .12s, background .12s;
    line-height: 1;
    display: flex;
    align-items: center;
}
.seat-t-actions button:hover          { color: var(--gold-light); background: var(--gold-bg-dim); }
.seat-t-actions button.btn-del:hover  { color: var(--color-declined); background: rgba(232,160,180,.1); }

/* Side panel (slides in from right) */
.seat-panel {
    position: fixed;
    top: var(--topbar-h);
    right: -400px;
    width: 360px;
    height: calc(100vh - var(--topbar-h));
    background: rgba(20, 14, 8, 0.95);
    border-left: 1px solid var(--gold-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 300;
    display: flex;
    flex-direction: column;
    transition: right .28s var(--ease);
}
.seat-panel.open { right: 0; }
.seat-panel-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gold-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.seat-panel-title { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 400; color: var(--tx-primary); }
.seat-panel-close {
    background: none;
    border: 1px solid var(--gold-border);
    border-radius: 3px;
    cursor: pointer;
    color: var(--tx-muted);
    padding: .2rem .35rem;
    transition: color .12s, border-color .12s;
    display: flex;
    align-items: center;
}
.seat-panel-close:hover { color: var(--tx-primary); border-color: var(--gold); }
.seat-panel-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }
.seat-panel-hint {
    font-size: var(--fs-sm);
    color: var(--tx-muted);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.seat-panel-guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .45rem .75rem;
    border-radius: var(--bs-border-radius);
    margin-bottom: .25rem;
    background: rgba(255,255,255,.04);
    border: 1px solid transparent;
    font-size: var(--fs-base);
    color: var(--tx-secondary);
    transition: background .12s, border-color .12s;
}
.seat-panel-guest-row:hover {
    background: rgba(232,160,180,.08);
    border-color: rgba(232,160,180,.2);
}
.seat-panel-guest-row .remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tx-muted);
    padding: 2px 5px;
    border-radius: 3px;
    transition: color .12s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.seat-panel-guest-row:hover .remove-btn { color: var(--color-declined); }

/* Which chair a guest is in, shown beside their name in the table panel. */
.seat-panel-seat-no {
    margin-left: auto;
    margin-right: .5rem;
    font-size: var(--fs-sm);
    color: var(--color-attending);
    white-space: nowrap;
}
.seat-panel-seat-no.unplaced { color: var(--tx-muted); font-style: italic; }

/* The unassigned list accepts a seated guest dragged back onto it. */
#guest-list.drag-over {
    outline: 2px dashed var(--color-declined);
    outline-offset: -4px;
    border-radius: var(--radius);
}
.seat-panel-empty {
    text-align: center;
    color: var(--tx-muted);
    font-size: var(--fs-base);
    padding: 2rem 0;
}

/* Summary table — the plan as a list, and the shape the printed version takes */
.seat-summary { margin-top: 1.5rem; }
.seat-summary-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}
.seat-summary-hint   { font-size: var(--fs-sm); color: var(--tx-muted); }
.seat-summary-totals { font-size: var(--fs-sm); color: var(--gold-light); white-space: nowrap; }

.seat-summary-col-seat { width: 4.5rem; text-align: center; }
.seat-summary-col-type { width: 8rem; }

/* One <tbody> per table, kept whole so a page break never splits a table
   across two sheets. */
.seat-summary-group { break-inside: avoid; page-break-inside: avoid; }
.seat-summary-group-row th {
    padding: 0;
    background: var(--gold-bg-dim);
    border-top: 1px solid var(--gold-border);
}

/* The whole header strip is one button, so the click target is the full row and
   the keyboard reaches the same control the mouse does. */
.seat-summary-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .55rem .75rem;
    background: none;
    border: 0;
    text-align: left;
    color: var(--gold-light);
    cursor: pointer;
    transition: background .15s var(--ease);
}
.seat-summary-toggle:hover        { background: rgba(232,213,181,.10); }
.seat-summary-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.seat-summary-group-title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 400;
}
.seat-summary-group-meta {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--tx-muted);
    white-space: nowrap;
}
.seat-summary-chevron {
    flex-shrink: 0;
    color: var(--tx-muted);
    transition: transform .2s var(--ease);
}
/* Groups arrive open, so the chevron points down at the rows it is showing and
   swings to the side when they are folded away. The timeline's milestones turn
   the other way because they arrive closed — same vocabulary, opposite start. */
.seat-summary-group.is-collapsed .seat-summary-chevron { transform: rotate(-90deg); }
.seat-summary-group.is-collapsed tr:not(.seat-summary-group-row) { display: none; }
.seat-summary-group.is-unseated .seat-summary-toggle { color: var(--color-declined); }

.seat-summary-free            { color: var(--tx-muted); }
.seat-summary-free-label      { font-style: italic; color: var(--tx-muted); }
.seat-summary-note            { font-size: var(--fs-xs); font-style: italic; color: var(--tx-muted); }
.seat-summary-empty {
    text-align: center;
    color: var(--tx-muted);
    font-size: var(--fs-base);
    padding: 2rem 0;
}

/* Printing the seating page prints the plan, not the canvas: a floor plan drawn
   for dragging does not survive a sheet of A4, but the list does. The PDF export
   will produce this same table, so keep the two in step. */
@media print {
    body.seating-page .db-bg,
    body.seating-page .db-sidebar,
    body.seating-page .db-topbar,
    body.seating-page .seat-stats,
    body.seating-page .seat-layout,
    body.seating-page .seat-panel,
    body.seating-page .modal { display: none !important; }

    body.seating-page,
    body.seating-page main {
        overflow: visible !important;
        height: auto !important;
        background: #fff;
        color: #000;
    }
    body.seating-page .seat-summary {
        margin-top: 0;
        border: 0 !important;
        background: none;
        backdrop-filter: none;
    }
    body.seating-page .seat-summary-head { padding-left: 0; padding-right: 0; }
    body.seating-page .db-panel-title,
    body.seating-page .seat-summary-hint,
    body.seating-page .seat-summary-totals,
    body.seating-page .seat-summary-table,
    body.seating-page .seat-summary-table th,
    body.seating-page .seat-summary-table td { color: #000; background: none !important; }
    body.seating-page .seat-summary-group-row th,
    body.seating-page .seat-summary-group-row td { border-top: 1px solid #666; }
    /* Repeat the column headings at the top of every printed sheet. */
    body.seating-page .seat-summary-table thead { display: table-header-group; }

    /* Folding a group away is a convenience for reading the page, not an edit to
       the plan. Print every table whatever is open on screen — a seating plan
       missing half its tables is worse than a long one. */
    body.seating-page .seat-summary-group.is-collapsed tr { display: table-row !important; }
    body.seating-page .seat-summary-chevron { display: none; }
    body.seating-page .seat-summary-toggle { padding-left: 0; }
}

/* ── 35. Media page ──────────────────────────────────────────── */

/* Media grid */
.media-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}
@media (max-width: 1400px) { .media-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .media-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .media-grid { grid-template-columns: repeat(2, 1fr); } }

.media-card {
    background: var(--panel-bg);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    cursor: pointer;
}
.media-card:hover { border-color: var(--gold); }
.media-card.selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201,169,110,.3);
}

.media-thumb-wrap {
    position: relative;
    aspect-ratio: 1;
    background: rgba(0,0,0,.6);
    overflow: hidden;
}
.media-thumb-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s;
}
.media-card:hover .media-thumb-wrap img { transform: scale(1.04); }

.media-video-thumb {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,8,6,.8);
    color: var(--tx-muted);
}

.media-type-badge {
    position: absolute;
    bottom: 6px; left: 6px;
    background: rgba(0,0,0,.65);
    color: rgba(255,255,255,.9);
    font-size: var(--fs-xs);
    padding: 2px 7px;
    border-radius: 3px;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* Star / select button (top-left of thumb) */
.media-select-btn {
    position: absolute;
    top: 6px; left: 6px;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.6);
    background: rgba(0,0,0,.45);
    color: rgba(255,255,255,.85);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
    z-index: 3;
    opacity: 0;
}
.media-thumb-wrap:hover .media-select-btn { opacity: 1; }
.media-card.selected .media-select-btn {
    opacity: 1;
    background: var(--gold);
    border-color: var(--gold);
    color: var(--tx-primary-dark);
    transform: scale(1.1);
}
.media-select-btn:hover { transform: scale(1.15) !important; }

/* Order number badge (top-right, shown when selected) */
.media-sel-badge {
    position: absolute;
    top: 6px; right: 6px;
    background: var(--gold);
    color: var(--tx-primary-dark);
    width: 22px; height: 22px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    pointer-events: none;
}
.media-card.selected .media-sel-badge { display: flex; }

/* Delete button (bottom-right of thumb) */
.media-del-btn {
    position: absolute;
    bottom: 6px; right: 6px;
    background: rgba(232,160,180,.75);
    border: none;
    color: var(--tx-primary-dark);
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 2;
}
.media-del-btn:hover { background: var(--color-declined); }
.media-thumb-wrap:hover .media-del-btn { display: flex; }

.media-card-meta {
    padding: .5rem .625rem;
    font-size: var(--fs-base);
}
.media-card-meta .media-uploader {
    color: var(--tx-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.media-card-meta .media-date { color: var(--tx-muted); font-size: var(--fs-sm); }

/* Stats row */
.media-stat-card {
    background: var(--panel-bg);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    padding: .875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.media-stat-icon { width: 38px; height: 38px; border-radius: var(--bs-border-radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.media-stat-icon--photos   { background: rgba(201,169,110,.12); color: var(--gold); }
.media-stat-icon--videos   { background: rgba(125,196,168,.12); color: var(--color-attending); }
.media-stat-icon--people   { background: rgba(232,213,181,.10); color: var(--tx-secondary); }
.media-stat-icon--selected { background: rgba(201,169,110,.18); color: var(--gold-light); }
.media-stat-label { font-size: var(--fs-xs);  letter-spacing: var(--ls-labels); text-transform: uppercase; color: var(--tx-muted); }
.media-stat-value { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 300; color: var(--tx-primary); line-height: 1; }

/* Auto-width select in filter bar */
.db-filter-select-auto { width: auto; }
.db-text-secondary { color: var(--tx-secondary); }
.db-text-muted { color: var(--tx-muted); }

/* Selection banner */
.media-sel-banner {
    position: sticky;
    top: 0; z-index: 50;
    background: rgba(201,169,110,.18);
    border: 1px solid var(--gold);
    color: var(--tx-primary);
    padding: .65rem 1.25rem;
    border-radius: var(--bs-border-radius);
    margin-bottom: 1rem;
    display: none;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    backdrop-filter: blur(8px);
}
.media-sel-banner.visible { display: flex; }
.media-sel-banner-count { flex: 1; font-size: var(--fs-md); font-weight: 500; color: var(--gold-light); }

/* Split button (Launch Slideshow) */
.media-split-wrap { position: relative; display: inline-flex; }
.media-split-main {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--gold);
    color: var(--tx-primary-dark);
    border: none;
    padding: .45rem .875rem;
    font-size: var(--fs-base);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
    border-right: 1px solid rgba(26,18,8,.25);
    white-space: nowrap;
    transition: background .15s;
    font-family: var(--font-body);
}
.media-split-main:hover { background: var(--gold-light); color: var(--tx-primary-dark); }
.media-split-arrow {
    background: var(--gold);
    border: none;
    color: var(--tx-primary-dark);
    padding: 0 .6rem;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
}
.media-split-arrow:hover { background: var(--gold-light); }
.media-split-dropdown {
    position: absolute;
    top: calc(100% + 4px); right: 0;
    min-width: 220px;
    background: rgba(20,14,8,.95);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    backdrop-filter: blur(16px);
    z-index: 200;
    display: none;
}
.media-split-dropdown.open { display: block; }
.media-split-dropdown a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1rem;
    text-decoration: none;
    color: var(--tx-secondary);
    font-size: var(--fs-base);
    transition: background .1s, color .1s;
}
.media-split-dropdown a:hover { background: var(--gold-bg-dim); color: var(--gold-light); }
.media-split-dropdown a.disabled { color: var(--tx-muted); pointer-events: none; }
.media-split-divider { border: none; border-top: 1px solid var(--gold-border); margin: .2rem 0; }

/* Lightbox */
#media-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
#media-lightbox.open { display: flex; }
.lightbox-media-wrap { max-width: 90vw; max-height: 85vh; display: flex; align-items: center; }
.lightbox-media-wrap img,
.lightbox-media-wrap video { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 3px; display: block; }
.lightbox-close-btn {
    position: absolute; top: 20px; right: 24px;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
    color: #fff; width: 42px; height: 42px;
    border-radius: 50%; cursor: pointer; transition: background .15s;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-close-btn:hover { background: rgba(255,255,255,.3); }
.lightbox-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
    color: #fff; width: 46px; height: 46px;
    border-radius: 50%; cursor: pointer; transition: background .15s;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-nav-btn:hover { background: rgba(255,255,255,.3); }
#media-lightbox-prev { left: 20px; }
#media-lightbox-next { right: 20px; }
.lightbox-caption {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.85); font-size: var(--fs-base);
    background: rgba(0,0,0,.55); padding: 5px 18px;
    border-radius: 20px; white-space: nowrap; max-width: 80vw;
    overflow: hidden; text-overflow: ellipsis;
}

/* Reorder modal sortable list */
.sortable-list { list-style: none; padding: 0; margin: 0; }
.sortable-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .875rem;
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    margin-bottom: .5rem;
    background: rgba(255,255,255,.04);
    cursor: grab;
    user-select: none;
    transition: box-shadow .15s, opacity .15s;
}
.sortable-item:active { cursor: grabbing; }
.sortable-item.dragging { opacity: .4; }
.sortable-item.drag-over {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201,169,110,.25);
}
.sortable-drag-handle { color: var(--tx-muted); flex-shrink: 0; }
.sortable-item-thumb {
    width: 44px; height: 44px;
    object-fit: cover; border-radius: 3px; flex-shrink: 0;
}
.sortable-item-thumb-video {
    width: 44px; height: 44px;
    background: rgba(10,8,6,.8);
    border-radius: 3px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--tx-muted);
}
.sortable-item-name { flex: 1; font-size: var(--fs-base); color: var(--tx-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sortable-item-remove {
    background: none; border: none;
    color: var(--color-declined); cursor: pointer;
    padding: .2rem .3rem; border-radius: 3px; flex-shrink: 0;
    transition: background .15s;
    display: flex; align-items: center;
}
.sortable-item-remove:hover { background: rgba(232,160,180,.1); }

/* Empty state */
.media-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--tx-muted);
}
.media-empty-icon { margin-bottom: 1rem; color: var(--gold); opacity: .3; }
.media-empty h3 { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 300; color: var(--tx-secondary); margin-bottom: .5rem; }
.media-empty p { font-size: var(--fs-md); }

/* Reorder modal star icon (empty state) */
.media-reorder-empty-icon { color: var(--gold); }

/* Skeleton grid */
.media-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}
@media (max-width: 1400px) { .media-skeleton-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1100px) { .media-skeleton-grid { grid-template-columns: repeat(3, 1fr); } }
.media-skeleton-card {
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background: rgba(255,255,255,.04);
    animation: db-skeleton-shimmer 1.5s ease-in-out infinite;
}
.media-skeleton-card .sk-thumb { aspect-ratio: 1; background: rgba(255,255,255,.06); }
.media-skeleton-card .sk-line  { height: 10px; margin: .5rem .625rem; border-radius: 3px; background: rgba(255,255,255,.06); }
.media-skeleton-card .sk-line.short { width: 60%; }

/* ── 36. Planning Timeline page ─────────────────────────────── */

/* Budget summary row — compact horizontal bar */
.tl-budget-row  { display: flex; flex-wrap: wrap; gap: 0; }
.tl-budget-item {
    flex: 1 1 0;
    min-width: 0;
    padding: .75rem 1rem;
    border-right: 1px solid var(--gold-border);
}
.tl-budget-item:last-child { border-right: none; }
@media (max-width: 900px) { .tl-budget-item { flex-basis: 33.333%; } .tl-budget-item:nth-child(3) { border-right: none; } }
@media (max-width: 576px)  { .tl-budget-item { flex-basis: 50%; } .tl-budget-item:nth-child(2n) { border-right: none; } }
.tl-budget-label { font-size: var(--fs-xs); letter-spacing: var(--ls-labels); text-transform: uppercase; color: var(--tx-muted); margin-bottom: .25rem; }
.tl-budget-value { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 300; color: var(--tx-primary); }
.tl-budget-value.success { color: var(--color-attending); }
.tl-budget-value.warning { color: var(--gold-light); }
.tl-budget-value.danger  { color: var(--color-declined); }

/* Milestone list — vertical, non-collapsible */
.tl-milestone-list { display: flex; flex-direction: column; gap: 6px; }
.tl-milestone-item { border-left: 3px solid var(--gold-border); border-radius: 0 6px 6px 0; transition: border-color .2s; margin-bottom: .4rem; }
.tl-milestone-item.active { border-left-color: var(--gold); }
.tl-milestone-head {
    display: flex; align-items: center; gap: .625rem;
    padding: .65rem 1rem;
    background: rgba(255,255,255,.025);
    cursor: pointer;
    user-select: none;
    border-radius: 0 6px 0 0;
    transition: background .15s;
}
.tl-milestone-item.expanded > .tl-milestone-head { border-radius: 0 6px 0 0; background: rgba(255,255,255,.04); }
.tl-milestone-head:hover { background: var(--gold-bg-dim); }
.tl-milestone-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tl-milestone-label { flex: 1; font-size: var(--fs-base); font-weight: 500; color: var(--tx-primary); }
.tl-milestone-date  { font-size: var(--fs-sm); color: var(--tx-muted); white-space: nowrap; }
.tl-milestone-badge {
    font-size: var(--fs-xs); padding: 2px 8px; border-radius: 10px;
    background: rgba(255,255,255,.06); color: var(--tx-muted); white-space: nowrap;
}
.tl-milestone-badge.has-pending { color: var(--gold-light); background: rgba(201,169,110,.12); }
.tl-milestone-chevron {
    flex-shrink: 0; color: var(--tx-muted);
    transition: transform .2s var(--ease);
}
.tl-milestone-item.expanded .tl-milestone-chevron { transform: rotate(180deg); }

/* Task rows inside expanded milestone */
.tl-milestone-tasks { display: none; padding: .25rem 1rem .5rem 2.25rem; }
.tl-milestone-item.expanded .tl-milestone-tasks { display: block; }
.tl-ms-task-row {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem 0;
    border-bottom: 1px solid rgba(232,213,181,.06);
}
.tl-ms-task-row:last-child { border-bottom: none; }
.tl-ms-task-complete {
    flex-shrink: 0; background: none; border: none; padding: 0;
    width: 20px; height: 20px; cursor: pointer;
    color: var(--tx-muted); display: flex; align-items: center; justify-content: center;
    transition: color .15s, transform .15s;
}
.tl-ms-task-complete:hover { color: var(--gold); transform: scale(1.15); }
.tl-ms-task-complete.is-done { color: var(--gold); }
.tl-ms-task-title { flex: 1; font-size: var(--fs-base); color: var(--tx-primary); line-height: 1.3; }
.tl-ms-task-title.done { text-decoration: line-through; color: var(--tx-muted); }
.tl-ms-task-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.tl-ms-task-empty { font-size: var(--fs-sm); color: var(--tx-muted); padding: .5rem 0; }

/* Upcoming tasks — vertical list with colored dots */
.tl-upcoming-row {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(232,213,181,.08);
}
.tl-upcoming-row.last { border-bottom: none; }
.tl-upcoming-gutter {
    display: flex; flex-direction: column; align-items: center;
    flex-shrink: 0; width: 14px; padding-top: 3px;
}
.tl-upcoming-dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0; border: 2px solid rgba(0,0,0,.3);
}
.tl-upcoming-line {
    flex: 1; width: 1px; min-height: 12px;
    background: var(--gold-border); margin-top: 4px;
}
.tl-upcoming-row.last .tl-upcoming-line { display: none; }
.tl-upcoming-body { flex: 1; min-width: 0; }
.tl-upcoming-title { font-size: var(--fs-base); font-weight: 500; color: var(--tx-primary); line-height: 1.3; }
.tl-upcoming-due   { font-size: var(--fs-sm);  color: var(--tx-muted); margin-top: 2px; }
.tl-upcoming-due.overdue { color: var(--color-declined); }
.tl-upcoming-complete {
    flex-shrink: 0; background: none; border: none; padding: 0;
    width: 20px; height: 20px; cursor: pointer;
    color: var(--tx-muted); display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
    transition: color .15s, transform .15s;
}
.tl-upcoming-complete:hover { color: var(--gold); transform: scale(1.15); }

/* Milestone scroll highlight */
.tl-milestone-highlight {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: var(--radius);
    transition: outline-color .4s var(--ease);
}

/* Empty / loading states */
.tl-empty-icon { color: var(--tx-muted); display: block; margin: 0 auto; }

/* ── 37. Animations ───────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.anim-1 { animation: fadeUp .6s var(--ease) .1s both; }
.anim-2 { animation: fadeUp .6s var(--ease) .2s both; }
.anim-3 { animation: fadeUp .6s var(--ease) .3s both; }

/* ── 38. Onboarding wizard ────────────────────────────────────── */

/* Wider card for wizard (extends .db-auth-card) */
.db-wiz-card {
    max-width: 760px;
    padding: 2rem 2.5rem 2.5rem;
    position: relative; /* needed for loading overlay */
}
@media (max-width: 576px) {
    .db-wiz-card { padding: 1.5rem 1.25rem 2rem; }
}

/* Step progress bar */
.wizard-progress {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    margin-bottom: 2.5rem;
}
.wizard-progress::before {
    content: '';
    position: absolute;
    top: 21px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--gold-border);
    z-index: 0;
}
.wizard-progress .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    flex: 1;
    position: relative;
    z-index: 1;
}
.wizard-progress .step-number {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--gold-border);
    background: #22211f;
    color: var(--tx-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    font-weight: 600;
    transition: background .25s, border-color .25s, color .25s;
}
.wizard-progress .step.active .step-number,
.wizard-progress .step.completed .step-number {
    background: var(--gold-light);
    border-color: var(--gold-light);
    color: var(--tx-primary-dark);
}
.wizard-progress .step.completed .step-number { background: #66615a; color: var(--gold-light); }
.wizard-progress .step-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--tx-muted);
    text-align: center;
    line-height: 1.2;
}
.wizard-progress .step.active .step-label { color: var(--gold-light); }

/* Individual wizard step panels */
.wizard-step { display: none; }
.wizard-step.active {
    display: block;
    animation: fadeUp .4s var(--ease) both;
}

/* Step header */
.step-header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.step-header h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: 400;
    color: var(--tx-primary);
    margin-bottom: .35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.step-header p {
    font-size: var(--fs-base);
    color: var(--tx-secondary);
    margin: 0;
}

/* Navigation row */
.wizard-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gold-border);
    gap: .5rem;
}
.nav-spacer { flex: 1; }

/* Subdomain input with inline suffix */
.subdomain-input-wrapper {
    display: flex;
    align-items: stretch;
}
.subdomain-input-wrapper .form-control,
.subdomain-input-wrapper .db-form-control {
    border-right: none !important;
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius) !important;
    flex: 1;
}
.subdomain-suffix {
    display: flex;
    align-items: center;
    padding: 0 .875rem;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--gold-border);
    border-left: none;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    color: var(--tx-muted);
    font-size: var(--fs-base);
    white-space: nowrap;
    transition: border-color .15s ease-in-out;
}
.subdomain-input-wrapper:focus-within .subdomain-suffix {
    border-color: var(--gold-light);
}
.subdomain-input-wrapper:focus-within {
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0 0 .2rem rgba(201,169,110,.15);
}
.subdomain-input-wrapper:focus-within .form-control {
    box-shadow: none;
}
.subdomain-status {
    font-size: var(--fs-sm);
    margin-top: .3rem;
    min-height: 1.2em;
}
.subdomain-status--available  { color: var(--color-attending); }
.subdomain-status--taken,
.subdomain-status--invalid,
.subdomain-status--error      { color: var(--color-declined); }
.subdomain-status--checking   { color: var(--tx-muted); }

/* Loading overlay (covers the wizard card) */
.db-wiz-loading,
#loading-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(10,8,6,.7);
    border-radius: var(--bs-border-radius);
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--tx-secondary);
    font-size: .85rem;
}
.db-wiz-loading.visible { display: flex; }
.db-wiz-loading,
#loading-overlay { font-size: var(--fs-base); }
.db-wiz-spinner,
#loading-overlay .spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(201,169,110,.2);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: db-spin 1s linear infinite;
}

/* Inline message (error / success) inside wizard — also used by wizard.js */
.error-message,
.success-message {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: var(--bs-border-radius);
    margin-bottom: 0;
    font-size: var(--fs-base);
}
.error-message {
    background: rgba(232,160,180,.08);
    border-left: 3px solid var(--color-declined);
    color: var(--color-declined);
}
.success-message {
    background: rgba(125,196,168,.08);
    border-left: 3px solid var(--color-attending);
    color: var(--color-attending);
}

/* Plan billing toggle */
.db-plan-toggle {
    display: inline-flex;
    border: 1px solid var(--gold-border);
    border-radius: 2rem;
    overflow: hidden;
    margin: 1rem auto;
}
.db-plan-toggle-btn {
    padding: .45rem 1.1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: .82rem;
    font-family: var(--font-body);
    color: var(--tx-secondary);
    transition: background .2s, color .2s;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.db-plan-toggle-btn.active { background: var(--gold-light); color: var(--tx-primary-dark); }
.db-plan-toggle-badge {
    background: var(--gold);
    color: var(--tx-primary-dark);
    font-size: .6rem;
    font-weight: 700;
    padding: .15rem .4rem;
    border-radius: 2rem;
}
.db-plan-toggle-btn.active .db-plan-toggle-badge { background: rgba(26,18,8,.25); color: var(--tx-primary-dark); }

/* Plan selection grid */
.db-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.db-plan-grid--1 { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
.db-plan-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 620px; margin: 0 auto; }
.db-plan-card {
    background: var(--panel-bg);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    transition: border-color .2s;
}
.db-plan-card:hover { border-color: var(--gold); }
.db-plan-card--highlight {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold-border);
}
.db-plan-card h4 {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--tx-primary);
    margin: 0;
}
.db-plan-card-desc { font-size: var(--fs-base); color: var(--tx-muted); margin: 0; }
.db-plan-price-row { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.db-plan-original { font-size: var(--fs-sm); color: var(--tx-muted); text-decoration: line-through; width: 100%; }
.db-plan-original:empty { display: none; }
.db-plan-price { font-size: var(--fs-2xl); font-weight: 600; color: var(--gold-light); }
.db-plan-period { font-size: var(--fs-sm); color: var(--tx-muted); }
.db-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}
.db-plan-features li {
    font-size: var(--fs-base);
    color: var(--tx-secondary);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.db-plan-features li svg { color: var(--color-attending); flex-shrink: 0; }
.db-plan-action { margin-top: auto; }

/* JS-generated success screen */
.success-animation {
    text-align: center;
    padding: 1.5rem 0;
    animation: fadeUp .4s var(--ease) both;
}
.checkmark {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(125,196,168,.12);
    border: 1px solid rgba(125,196,168,.3);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: var(--fs-2xl);
    color: var(--color-attending);
}
.success-animation h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    font-weight: 400;
    color: var(--tx-primary);
    margin-bottom: .5rem;
}
.success-animation p { font-size: var(--fs-md); color: var(--tx-secondary); margin-bottom: 1.5rem; }
.success-summary {
    background: var(--panel-bg);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    padding: 1rem 1.25rem;
    text-align: left;
    font-size: var(--fs-base);
    color: var(--tx-secondary);
    margin-bottom: 1.5rem;
}
.success-summary h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 400;
    color: var(--tx-primary);
    margin-bottom: .75rem;
}
.info-row {
    display: flex;
    justify-content: space-between;
    padding: .3rem 0;
    border-bottom: 1px solid var(--gold-border);
}
.info-row:last-child { border-bottom: none; }
.info-row strong { color: var(--tx-primary); }

/* JS-generated billing modal */
.billing-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.billing-modal-overlay.open { display: flex; }
.billing-modal {
    background: rgba(20,15,10,.97);
    border: 1px solid var(--gold-border);
    border-radius: var(--bs-border-radius);
    backdrop-filter: blur(16px);
    padding: 2rem;
    max-width: 540px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}
.billing-modal h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--tx-primary);
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.billing-modal-desc { font-size: var(--fs-base); color: var(--tx-secondary); margin-bottom: 1.25rem; }
.billing-modal-form { margin-bottom: 1.5rem; }
.billing-modal-form .form-label { color: var(--tx-secondary); font-size: var(--fs-sm); }
.billing-modal-form .form-control,
.billing-modal-form .form-select { background: rgba(255,255,255,.06); border-color: var(--gold-border); color: var(--tx-primary); }
.billing-modal-form .form-control:focus,
.billing-modal-form .form-select:focus { background: rgba(255,255,255,.09); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,.15); }
.billing-modal-actions { display: flex; gap: .75rem; justify-content: flex-end; }
.billing-modal .error-message { margin-top: .75rem; }

/* Venue search — extra utility selectors */
.venue-search-clear-btn { color: var(--tx-muted); }
.venue-search-clear-btn:hover { color: var(--tx-secondary); }
.venue-search-error { color: var(--color-declined); }
.venue-modal-overlay { background: rgba(0,0,0,.65); }
.venue-modal-box {
    background: rgba(20,15,10,.97);
    border: 1px solid var(--gold-border);
    backdrop-filter: blur(16px);
}
.venue-modal-header { border-bottom-color: var(--gold-border); }
.venue-modal-header h3 { color: var(--tx-primary); }
.venue-modal-close { color: var(--tx-muted); }
.venue-modal-close:hover { color: var(--tx-secondary); }
.venue-modal-footer { border-top-color: var(--gold-border); }
.venue-modal-field label { color: var(--tx-secondary); }
.venue-modal-field input,
.venue-modal-field select {
    background: rgba(255,255,255,.06);
    border-color: var(--gold-border);
    color: var(--tx-primary);
}
.venue-modal-field input:focus,
.venue-modal-field select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,169,110,.15);
    background: rgba(255,255,255,.08);
}
.venue-modal-error { background: rgba(232,160,180,.08); border-color: var(--color-declined); color: var(--color-declined); }
.venue-modal-consent-row { background: var(--gold-bg-dim); border-color: var(--gold-border); }
.venue-modal-checkbox-label { color: var(--tx-secondary); }

/* ── Toasts ────────────────────────────────────────────────────── */
.bs-toast.toast {
    background: rgba(10, 8, 5, 0.97);
    border: 1px solid var(--gold-border);
    border-left-width: 4px;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.75);
    min-width: 360px;
    max-width: 480px;
    color: var(--tx-secondary);
    font-size: var(--fs-base);
}
.bs-toast.toast .toast-body {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1.1rem;
    color: var(--tx-secondary);
}
.bs-toast.toast .toast-body .toast-icon {
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1;
}
.bs-toast.toast .toast-body .toast-title {
    font-family: var(--font-heading);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.15;
    margin-bottom: .2rem;
}
.bs-toast.toast .toast-body .toast-msg {
    font-size: var(--fs-base);
    color: var(--tx-secondary);
    line-height: 1.4;
}
.bs-toast.toast .toast-body .toast-text {
    flex: 1;
    min-width: 0;
}
.bs-toast.toast .btn-close {
    flex-shrink: 0;
    filter: invert(1) brightness(.55);
    padding: 0;
    margin-left: .5rem;
}
.bs-toast.toast .btn-close:hover { filter: invert(1) brightness(.9); }

/* type variants — left border + icon colour */
.bs-toast.toast-success { border-left-color: var(--gold); }
.bs-toast.toast-success .toast-icon { color: var(--gold); }
.bs-toast.toast-success .toast-title { color: var(--gold-light); }

.bs-toast.toast-error { border-left-color: #C0645A; }
.bs-toast.toast-error .toast-icon { color: #C0645A; }
.bs-toast.toast-error .toast-title { color: #D4857D; }

.bs-toast.toast-warning { border-left-color: #B89A5C; }
.bs-toast.toast-warning .toast-icon { color: #B89A5C; }
.bs-toast.toast-warning .toast-title { color: #CDB47A; }

.bs-toast.toast-info { border-left-color: rgba(201, 169, 110, 0.45); }
.bs-toast.toast-info .toast-icon { color: var(--tx-muted); }
.bs-toast.toast-info .toast-title { color: var(--tx-secondary); }

/* ── Support ticket page (support.php) ─────────────────────────────────── */

/* Ticket list rows */
.sp-ticket-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(232,213,181,.08);
    cursor: pointer;
    transition: background .15s;
}
.sp-ticket-row:last-child { border-bottom: none; }
.sp-ticket-row:hover { background: var(--gold-bg-dim); }
.sp-ticket-main   { flex: 1; min-width: 0; }
.sp-ticket-subject {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--tx-primary);
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .3rem;
}
.sp-ticket-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .3rem;
}
.sp-ticket-topic {
    font-size: var(--fs-xs);
    color: var(--tx-muted);
}
.sp-ticket-num {
    font-size: var(--fs-xs);
    color: var(--tx-muted);
    font-variant-numeric: tabular-nums;
}
.sp-ticket-preview {
    font-size: var(--fs-sm);
    color: var(--tx-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-ticket-time {
    font-size: var(--fs-xs);
    color: var(--tx-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Unread indicator dot */
.sp-unread-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}

/* Empty state icon */
.sp-empty-icon { opacity: .35; }

/* Chat thread container */
.sp-thread {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-height: 480px;
    overflow-y: auto;
    padding: .25rem 0;
}

/* Individual message */
.sp-msg { display: flex; flex-direction: column; max-width: 75%; }
.sp-msg--user  { align-self: flex-end; align-items: flex-end; }
.sp-msg--admin { align-self: flex-start; align-items: flex-start; }

.sp-msg-bubble {
    padding: .6rem .85rem;
    border-radius: 12px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    word-break: break-word;
}
.sp-msg--user  .sp-msg-bubble {
    background: rgba(201,169,110,.18);
    border-bottom-right-radius: 3px;
    color: var(--tx-primary);
}
.sp-msg--admin .sp-msg-bubble {
    background: rgba(255,255,255,.06);
    border-bottom-left-radius: 3px;
    color: var(--tx-primary);
}
.sp-msg-meta {
    font-size: var(--fs-xs);
    color: var(--tx-muted);
    margin-top: .25rem;
    padding: 0 .2rem;
}
.anim-4 { animation: fadeUp .6s var(--ease) .4s both; }

/* ── 30. Website Theme picker ────────────────────────────────── */
.wt-card { transition: border-color .2s, box-shadow .2s; cursor: default; }
.wt-card--active { border: 1px solid var(--gold-light) !important; box-shadow: 0 0 0 1px var(--gold-light); }
.wt-card--locked { opacity: .65; }
.wt-card--locked .wt-card__preview { filter: grayscale(.4); }

.wt-card__preview {
    position: relative;
    aspect-ratio: 10 / 7;
    overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--bg-card);
}
.wt-card__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wt-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
    font-size: var(--fs-xs);
    padding: .2rem .6rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--ls-labels);
    font-weight: 500;
}
.wt-badge--active { background: var(--gold-light); color: var(--bg-dark); }
.wt-badge--locked { background: rgba(0,0,0,.5); color: var(--tx-secondary); }

.wt-colors { display: flex; gap: .35rem; }
.wt-color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.wt-highlights { display: flex; flex-wrap: wrap; gap: .35rem; }
.wt-highlight {
    font-size: var(--fs-xs);
    color: var(--tx-secondary);
    background: var(--bg-card);
    padding: .15rem .5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

/* Layout variants a theme offers within its own design. Only rendered when a
   theme declares more than one, so this never shows a choice with one answer. */
.wt-variants { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }

.wt-variants__label {
    width: 100%;
    font-size: var(--fs-xs);
    color: var(--tx-secondary);
}

.wt-variant {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--fs-xs);
    color: var(--tx-secondary);
    cursor: pointer;
}

.wt-variant input { accent-color: var(--gold-light); cursor: pointer; }

.wt-variant:has(input:checked) { color: var(--tx-primary); }

.wt-alert { color: var(--tx-secondary); }

.wt-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1.25rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    border: 1px solid var(--gold-border);
}
.wt-bar__text {
    color: var(--tx-secondary);
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.wt-bar__text .wt-upsell__accent { color: var(--gold-light); }
.wt-bar__cta {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-labels);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

/* ── Website Theme: persistent hero-background bar ─────────────────── */
/* Fixed to the bottom of the content column (right of the always-present 240px
   sidebar) so it stays visible while scrolling a long list of themes — sticky
   would only pin it as a footer, out of view until you scroll to the very end. */
.hero-bar {
    position: fixed;
    left: var(--sidebar-w);
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 1rem 1.5rem;
    background: rgba(10, 8, 5, 0.92);
    border-top: 1px solid var(--gold-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
/* Reserve space so the last theme row is never hidden behind the fixed bar. */
#theme-grid { padding-bottom: 7.5rem; }
.hero-bar__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 68px;
    flex: 0 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: var(--overlay-bg);
    border: 1px solid var(--gold-border);
}
.hero-bar__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bar__empty { font-size: .75rem; color: var(--tx-muted); text-align: center; padding: 0 .5rem; }
.hero-bar__main { flex: 1 1 260px; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.hero-bar__label { font-weight: 600; color: var(--tx-primary); }
.hero-bar__hint { font-size: .85rem; color: var(--tx-muted); }
.hero-bar__consent { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: .85rem; color: var(--tx-secondary); cursor: pointer; }
.hero-bar__consent input { margin-top: .15rem; flex: 0 0 auto; accent-color: var(--gold); }
.hero-bar__terms { align-self: flex-start; padding: 0; background: none; border: 0; font-size: .8rem; color: var(--gold); text-decoration: underline; cursor: pointer; }
.hero-bar__terms-full { margin: .25rem 0 0; max-width: 60ch; font-size: .8rem; line-height: 1.5; color: var(--tx-muted); }
.hero-bar__actions { display: flex; gap: .5rem; flex: 0 0 auto; margin-left: auto; }
/* The dashboard is desktop-first; this is only a graceful fallback so the bar
   doesn't break on a narrow window, not a mobile-optimised layout. */
@media (max-width: 575.98px) {
    .hero-bar { flex-direction: column; align-items: stretch; }
    .hero-bar__actions { margin-left: 0; }
    #theme-grid { padding-bottom: 15rem; }
}