/* assets/css/design-system.css */
/* Design tokens and component restyles — scoped to body.app-shell only,
   so pages without that class (Seats page, navbar.php) are unaffected. */

body.app-shell {
    --primary: #1DB868;
    --primary-hover: #22CC76;
    --primary-light: rgba(29, 184, 104, 0.16);
    --success: #22C55E;
    --success-light: rgba(34, 197, 94, 0.16);
    --warning: #F59E0B;
    --warning-light: rgba(245, 158, 11, 0.16);
    --danger: #F87171;
    --danger-light: rgba(248, 113, 113, 0.16);
    --info: #60A5FA;
    --info-light: rgba(96, 165, 250, 0.16);
    --bg: #0B0D10;
    --surface: #16181D;
    --border-color: #2A2E35;
    --text: #E5E7EB;
    --text-muted: #9CA3AF;
    --sidebar-bg: #0A0B0D;
    --radius-sm: 8px;
    --radius-lg: 14px;
    --shadow-elevate: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.4);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    /* Bootstrap's muted/secondary text defaults to its light theme (dark grey),
       which disappears on our dark surfaces. */
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-color-rgb: 156, 163, 175;
    --bs-tertiary-color: rgba(156, 163, 175, 0.75);

    font-family: 'IBM Plex Sans Arabic', 'Almarai', sans-serif;
    background: radial-gradient(ellipse at top left, rgba(29, 184, 104, 0.06), transparent 60%), var(--bg) !important;
    background-attachment: fixed;
    color: var(--text);
    color-scheme: dark;
}

body.app-shell h1, body.app-shell h2, body.app-shell h3,
body.app-shell h4, body.app-shell h5, body.app-shell h6 {
    color: var(--text);
    font-family: 'IBM Plex Sans Arabic', 'Almarai', sans-serif;
}

body.app-shell .page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-2);
}

body.app-shell .section-heading {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}

body.app-shell .text-muted-ds {
    font-size: 13px;
    color: var(--text-muted) !important;
}

body.app-shell .btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

body.app-shell .btn:active {
    transform: translateY(1px);
}

body.app-shell .btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: none;
}

body.app-shell .btn:disabled,
body.app-shell .btn.disabled {
    opacity: .5;
}

body.app-shell .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}
body.app-shell .btn-primary:hover,
body.app-shell .btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

body.app-shell .btn-success {
    background-color: var(--success);
    border-color: var(--success);
}
body.app-shell .btn-success:hover,
body.app-shell .btn-success:focus {
    background-color: #128A3E;
    border-color: #128A3E;
}

body.app-shell .btn-danger {
    background-color: var(--danger);
    border-color: var(--danger);
}
body.app-shell .btn-danger:hover,
body.app-shell .btn-danger:focus {
    background-color: #B91C1C;
    border-color: #B91C1C;
}

body.app-shell .btn-secondary {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--text);
}
body.app-shell .btn-secondary:hover,
body.app-shell .btn-secondary:focus {
    background-color: var(--bg);
    color: var(--text);
}

body.app-shell .btn-info {
    background-color: var(--info);
    border-color: var(--info);
    color: #fff;
}
body.app-shell .btn-info:hover,
body.app-shell .btn-info:focus {
    background-color: #1D4ED8;
    border-color: #1D4ED8;
    color: #fff;
}

body.app-shell .btn-outline-primary,
body.app-shell .btn-outline-success,
body.app-shell .btn-outline-danger,
body.app-shell .btn-outline-info,
body.app-shell .btn-outline-secondary {
    border-radius: var(--radius-sm);
}

/* Loading state helper — apply the `is-loading` class via existing JS
   click handlers where a request is in flight; does not require new JS,
   only an optional class toggle. */
body.app-shell .btn.is-loading {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}
body.app-shell .btn.is-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-ds-spin .6s linear infinite;
}
@keyframes btn-ds-spin {
    to { transform: rotate(360deg); }
}

body.app-shell .card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevate);
    color: var(--text);
}

body.app-shell .card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-4) var(--space-6);
    color: var(--text);
}

body.app-shell .card-body {
    padding: var(--space-6);
}

body.app-shell .card-title {
    color: var(--text) !important;
    font-weight: 600;
}

body.app-shell table.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-bg: var(--bg);
    --bs-table-hover-color: var(--text);
    --bs-table-border-color: var(--border-color);
    color: var(--text);
    margin-bottom: 0;
}

body.app-shell table.table thead th {
    background: var(--bg);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

body.app-shell table.table tbody td {
    font-size: 14px;
    border-color: var(--border-color);
    vertical-align: middle;
}

body.app-shell table.table-hover tbody tr:hover {
    background: var(--bg);
}

/* DataTables wraps the table itself; make the wrapper scroll horizontally
   on small screens instead of squeezing columns. */
/* This build uses datatables.net's own CSS (dataTables.dataTables.css),
   not the Bootstrap 5 integration package — its pagination markup is
   `.dt-paging-button`, not Bootstrap's `.page-link`/`.page-item`, and its
   colors are driven entirely by the --dt-* custom properties below
   (defined at :root by that stylesheet). Overriding them here — rather
   than fighting individual rules — cascades correctly regardless of
   whether dataTables.dataTables.css or design-system.css loads last. */
body.app-shell div.dt-container {
    overflow-x: auto;
    color: var(--text);
    --dt-control_color: var(--text);
    --dt-paging-button_background: transparent;
    --dt-paging-button_border: 1px solid var(--border-color);
    --dt-paging-button_color: var(--text);
    --dt-paging-button_background-disabled: transparent;
    --dt-paging-button_border-disabled: 1px solid var(--border-color);
    --dt-paging-button_color-disabled: var(--text-muted);
    --dt-paging-button_background-current: var(--primary);
    --dt-paging-button_border-current: 1px solid var(--primary);
    --dt-paging-button_color-current: #fff;
    --dt-paging-button_background-current-hover: var(--primary-hover);
    --dt-paging-button_border-current-hover: 1px solid var(--primary-hover);
    --dt-paging-button_color-current-hover: #fff;
    --dt-paging-button_background-hover: var(--bg);
    --dt-paging-button_border-hover: 1px solid var(--border-color);
    --dt-paging-button_color-hover: var(--text);
    --dt-input_border: 1px solid var(--border-color);
    --dt-input_background: var(--surface);
    --dt-input_color: var(--text);
}

body.app-shell .dt-search input,
body.app-shell .dt-length select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--surface);
    color: var(--text);
}

body.app-shell .page-link {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--text);
}
body.app-shell .page-link:hover {
    background-color: var(--bg);
    color: var(--text);
}
body.app-shell .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
body.app-shell .page-item.disabled .page-link {
    background-color: var(--surface);
    color: var(--text-muted);
}

body.app-shell ::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

body.app-shell .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Hook class added around DataTables tables in page markup (belt-and-
   suspenders with the .dt-container rule above, and covers the table
   before DataTables has initialized on first paint). */
body.app-shell .table-ds-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: var(--space-3);
    background: var(--surface);
}

body.app-shell .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

body.app-shell .form-control,
body.app-shell .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: 14px;
    padding: 10px 12px;
    color: var(--text);
    background-color: var(--surface);
}
body.app-shell .form-control:focus,
body.app-shell .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
body.app-shell .form-control.invalidInput {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px var(--danger-light);
}
body.app-shell .feedback {
    color: var(--danger);
}

body.app-shell .modal-content {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
body.app-shell .modal-header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-color);
}
body.app-shell .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}
body.app-shell .modal-body {
    padding: var(--space-6);
    color: var(--text);
}
body.app-shell .modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-color);
}

body.app-shell .dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-elevate);
}
body.app-shell .dropdown-item {
    color: var(--text);
}
body.app-shell .dropdown-item:hover {
    background: var(--bg);
    color: var(--text);
}

body.app-shell .badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
body.app-shell .badge-status-draft {
    background: rgba(255, 255, 255, .08);
    color: var(--text-muted);
}
body.app-shell .badge-status-pending {
    background: var(--warning-light);
    color: var(--warning);
}
body.app-shell .badge-status-active {
    background: var(--info-light);
    color: var(--info);
}
body.app-shell .badge-status-completed {
    background: var(--success-light);
    color: var(--success);
}
body.app-shell .badge-status-cancelled,
body.app-shell .badge-status-failed,
body.app-shell .badge-status-rejected {
    background: var(--danger-light);
    color: var(--danger);
}
body.app-shell .badge-status-approved {
    background: var(--success-light);
    color: var(--success);
}

body.app-shell .empty-state-ds {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--text-muted);
}
body.app-shell .empty-state-ds i {
    font-size: 32px;
    color: var(--border-color);
    margin-bottom: var(--space-3);
    display: block;
}
body.app-shell .empty-state-ds p {
    margin: 0;
    font-size: 14px;
}

/* height:auto overrides style.css's unscoped `body { height: 100% }`
   (an old pre-redesign rule, still loaded on every page) — percentage
   heights on <body> resolve against the viewport when nothing above it
   provides a definite height, so that rule silently capped body (and
   html) at exactly one viewport tall, everywhere, hiding any content
   that overflowed past it without growing the box. That's why content
   taller than the screen (long tables, long lists) left the sidebar's
   dark background stopping at the fold with the page's own background
   exposed below it: the sidebar and .app-main both stretch to match
   body's own (wrongly capped) height. min-height keeps the "at least
   one viewport" floor for short pages. */
body.app-shell {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    height: auto;
}

body.app-shell .app-sidebar {
    width: 260px;
    background: var(--sidebar-bg);
    border: none;
    padding: 0;
}

/* Wraps brand/nav/user separately from .app-sidebar itself: .app-sidebar
   keeps growing to match .app-main's full content height (via row stretch
   + min-height below) so its dark background never stops short on tall
   pages, while this inner box is the thing that's actually pinned to the
   viewport — otherwise the logout link (pinned to this box's own bottom
   via .sidebar-user's margin-top:auto) sits at the bottom of that full
   page-height box, off-screen until you scroll all the way down. */
body.app-shell .app-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

body.app-shell .app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

body.app-shell .app-content {
    padding: var(--space-6);
    flex: 1;
}

body.app-shell .sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
}

body.app-shell .sidebar-nav {
    padding: var(--space-4) var(--space-2);
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

body.app-shell .sidebar-user {
    margin-top: auto;
    padding: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, .08);
}

body.app-shell .sidebar-user-link {
    color: rgba(255, 255, 255, .85);
}

body.app-shell .sidebar-user-name {
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}

body.app-shell .sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
    transition: background-color .15s ease, color .15s ease;
}
body.app-shell .sidebar-link i {
    width: 18px;
    text-align: center;
}
body.app-shell .sidebar-link:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}
body.app-shell .sidebar-link.active {
    background: var(--primary);
    color: #fff;
}

body.app-shell .sidebar-group-toggle .sidebar-group-chevron {
    width: auto;
    font-size: 11px;
    transition: transform .2s ease;
}
body.app-shell .sidebar-group-toggle:not(.collapsed) .sidebar-group-chevron {
    transform: rotate(180deg);
}
body.app-shell .sidebar-sub {
    padding-inline-start: var(--space-4);
    margin: 0;
}

body.app-shell .user-avatar-ds {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Desktop: sidebar is a static column. Mobile/tablet: it's the same
   Bootstrap `.offcanvas` component navbar.php already uses elsewhere in
   this codebase, restyled — same proven JS wiring, no new behavior. */
@media (min-width: 992px) {
    body.app-shell .app-sidebar.offcanvas {
        /* Bootstrap's .offcanvas sets position:fixed by default (needed
           for the mobile slide-in overlay) — without overriding it back
           to relative here, the sidebar drops out of the row layout
           entirely on desktop and floats on top of .app-main instead of
           reserving its own column width beside it. */
        position: relative !important;
        transform: none !important;
        visibility: visible !important;
        /* min-height (not height): a fixed height:100vh opts this flex
           item out of the row's default align-items:stretch, capping it
           at exactly one viewport tall — on pages taller than that (wide
           tables, long lists), the sidebar's dark background stopped
           partway down, leaving the page's own background exposed below
           it for the rest of the scroll. min-height keeps the "at least
           one viewport" floor for short pages while still letting stretch
           grow it to match .app-main's full height on tall ones. */
        min-height: 100vh;
    }
    /* This box (not .app-sidebar, see above) is what actually sticks to
       the viewport — capped to exactly one viewport tall, so nav links
       overflow into their own internal scroll (.sidebar-nav) instead of
       pushing .sidebar-user's logout link off the bottom of the screen. */
    body.app-shell .app-sidebar-inner {
        position: sticky;
        top: 0;
        height: 100vh;
    }
    body.app-shell .app-sidebar .btn-close {
        display: none !important;
    }
}

/* Fixed positioning takes this out of body.app-shell's flex-row flow
   entirely, so it can never reappear as a phantom third column the way
   the old .app-topbar (a flex sibling of .app-sidebar) did. Visibility
   below 992px is handled by Bootstrap's own d-lg-none utility class on
   the element, not by a display override here. */
body.app-shell .sidebar-toggle-btn {
    position: fixed;
    top: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-elevate);
}

/* Standalone centered layout for pre-login pages (login, 404) — no
   sidebar, just a centered card on the app background. */
body.app-shell.auth-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-6);
}
body.app-shell.auth-shell .auth-card {
    width: 100%;
    max-width: 440px;
}

/* style.css only wires :checked feedback for .btn-outline-primary/success
   and .btn-dark — add the missing pairing for .btn-outline-secondary,
   which redesigned radio-toggle groups (e.g. add-event.php) now use. */
body.app-shell .btn-check:checked + .btn-outline-secondary {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 10px rgba(14, 143, 74, 0.35);
}

/* Stats strip — canonical definition, moved here from guestsMonitor.php's
   inline <style> (Phase 2) so guestsSystem.php and auditLog.php can reuse
   it without duplicating the rules. */
body.app-shell .stat-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 12px;
    text-align: center;
    transition: all 0.2s ease;
    height: 100%;
}

body.app-shell .stat-card:hover {
    background: var(--bg);
    transform: translateY(-2px);
}

body.app-shell .stat-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    font-size: 1.05rem;
}

body.app-shell .stat-card-accent .stat-card-icon {
    background: var(--primary-light);
    color: var(--primary);
}

body.app-shell .stat-card-accent {
    border-color: rgba(14, 143, 74, 0.25);
}

body.app-shell .stat-card-value {
    color: var(--text);
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 6px;
}

body.app-shell .stat-card-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Toolbar row — search on one side, primary actions on the other, its own
   visual zone above a table (not inside the table's card-header). */
body.app-shell .toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
    box-shadow: var(--shadow-elevate);
}

body.app-shell .toolbar-row .toolbar-search {
    flex: 1 1 220px;
    max-width: 280px;
}

body.app-shell .toolbar-row .toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* Action-card grid — clickable destination cards replacing a stacked
   full-width button list. Combined with .card in markup, so background/
   border/radius/shadow come from the existing .card rule; this adds the
   row layout + hover lift. */
body.app-shell .action-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    height: 100%;
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s ease;
}

body.app-shell .action-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(14, 143, 74, .12);
    transform: translateY(-2px);
    color: var(--text);
}

body.app-shell .action-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

body.app-shell .action-card-title {
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}

body.app-shell .action-card-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* Split-screen auth layout — additive rules scoped under .auth-split-row
   / .auth-split-form / .auth-split-brand only, so they cannot affect
   404.php (which keeps using the original .auth-shell/.auth-card centered
   layout untouched). login.php sets body.app-shell to flex-direction:column
   for this layout (see its own <style> block) so .footer can be this row's
   sibling below it, full page width, instead of nested inside
   .auth-split-form where it only ever spanned that column's width and
   left the brand panel with no footer strip under it. */
body.app-shell .auth-split-row {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

body.app-shell .auth-split-brand {
    width: 45%;
    background: var(--sidebar-bg);
    color: #fff;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
}

body.app-shell .auth-split-brand-inner img {
    max-width: 160px;
    margin-bottom: var(--space-6);
}

body.app-shell .auth-split-brand-inner h2 {
    color: #fff;
    font-weight: 700;
    margin-bottom: var(--space-3);
}

body.app-shell .auth-split-brand-inner p {
    color: rgba(255, 255, 255, .75);
    max-width: 360px;
    margin: 0 auto;
}

/* flex-direction:column + margin:auto on .auth-card (not
   justify-content:center) so a .footer sibling can sit pinned at the
   very bottom while the card stays centered in the space above it —
   justify-content:center would center the (card + footer) pair as one
   block instead. */
body.app-shell .auth-split-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6);
}

body.app-shell .auth-split-form .auth-card {
    width: 100%;
    max-width: 440px;
    margin-top: auto;
    margin-bottom: auto;
}

/* Avatar/logo frame used on event-identity headers (home/guests/audit-log
   pages) — no size rule existed before, so logos of any source resolution
   rendered at inconsistent, sometimes huge, native sizes. */
body.app-shell .avatar-xl.eventLogoFrame {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--surface);
}

body.app-shell .avatar-xl.eventLogoFrame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Copyright footer — footer.php's markup is shared with pre-redesign
   pages (unscoped .footer in style.css keeps their full-bleed dark bar
   untouched there). On app-shell pages the include must be a DIRECT
   sibling of .app-content inside .app-main (not nested inside it, and
   not a sibling of .app-sidebar at the body level) — .app-main is a
   flex column and .app-content already has flex:1, so this sibling
   naturally lands at the true bottom of the viewport when content is
   short, and scrolls after it normally when content is tall. A fixed/
   full-viewport-width footer was tried and rejected: it painted over
   the sidebar, since position:fixed measures from the viewport rather
   than from .app-main's column next to the sidebar. flex-shrink:0
   keeps it from being squeezed by .app-content's flex:1. */
body.app-shell .footer {
    flex-shrink: 0;
    margin: 0;
    border-radius: 0;
    background-color: var(--sidebar-bg);
    justify-content: center;
    padding: 10px 0;
}

body.app-shell .footer span {
    font-size: 13px;
}

body.app-shell .footer a {
    color: var(--primary);
    font-weight: 700;
}

/* Seats page's seating-chart "stage" board is deliberately dark (seat
   icon PNGs and their labels are designed for a dark backdrop, inside a
   #212529 wrapper the seats page sets inline) — override the generic
   .card white background so it doesn't leak into this one, unrelated
   card, when the page is migrated onto this shell. */
body.app-shell .seat-stage-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Breadcrumb — overrides the dark, low-opacity default from style.css
   (meant for the old dark background) which read as near-invisible on
   this shell's light background. */
body.app-shell .breadcrumb-ds {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-elevate);
}

body.app-shell .breadcrumb-ds .breadcrumb-item {
    color: var(--text-muted);
    font-size: 14px;
}

body.app-shell .breadcrumb-ds .breadcrumb-item.active {
    color: var(--text);
    font-weight: 600;
}

body.app-shell .breadcrumb-ds .breadcrumb-item a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

body.app-shell .breadcrumb-ds .breadcrumb-item a:hover {
    text-decoration: underline;
}

/* Women seat-type badge — matches the pink badge on the women seat icons. */
.bg-pink {
    background-color: #DB2777 !important;
    color: #fff;
}