/* GolfStax — Golf Management System Styles
 *
 * All :root design tokens live in css/tokens.css (the single source of truth),
 * imported ahead of this file. Do NOT redefine tokens here — add them there.
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    touch-action: manipulation;
}

/* Accessibility: honor the OS "reduce motion" setting platform-wide. Animations
   and transitions collapse to ~instant; programmatic smooth-scroll is disabled.
   (Design-system rule — see docs/UI_NORMALIZATION.md §3.) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--font-sans);
    background: var(--charcoal);
    color: var(--text-primary);
    line-height: 1.6;
    overscroll-behavior: none;
    /* prevent pull-to-refresh on mobile */
}

/* Universal muted/helper text — compact, clean and consistent across pages.
   Previously `.text-muted` had no rule, so some instances inherited the full
   ~1rem body size while others were shrunk with inline styles, giving an
   uneven look. This makes the smaller, tidy size the single source of truth. */
.text-muted {
    color: var(--text-muted, #a3a3a3);
    font-size: 0.86rem;
    line-height: 1.45;
}

/* ============================================================================
   LOGIN SCREEN
   ============================================================================ */

#loginScreen {
    /* Layout applied when .active class is present */
}

#dashboardScreen {
    background: url('images/login-background.jpg') center/cover no-repeat fixed;
    min-height: 100vh; min-height: 100dvh;
    position: relative;
    z-index: 0;
}

#dashboardScreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    backdrop-filter: var(--overlay-blur);
    z-index: -1;
    pointer-events: none;
}

#tournamentScreen {
    background: url('images/login-background.jpg') center/cover no-repeat fixed;
    min-height: 100vh; min-height: 100dvh;
    position: relative;
    z-index: 0;
}

#tournamentScreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    backdrop-filter: var(--overlay-blur);
    z-index: -1;
    pointer-events: none;
}

#managePlayersScreen {
    background: url('images/login-background.jpg') center/cover no-repeat fixed;
    min-height: 100vh; min-height: 100dvh;
    position: relative;
    z-index: 0;
}

#managePlayersScreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    backdrop-filter: var(--overlay-blur);
    z-index: -1;
    pointer-events: none;
}

#schoolScreen,
#userManagementScreen,
#auditLogScreen {
    background: url('images/login-background.jpg') center/cover no-repeat fixed;
    min-height: 100vh; min-height: 100dvh;
    position: relative;
    z-index: 0;
}

#schoolScreen::before,
#userManagementScreen::before,
#auditLogScreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg);
    backdrop-filter: var(--overlay-blur);
    z-index: -1;
    pointer-events: none;
}

.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--login-overlay-bg);
    backdrop-filter: var(--login-overlay-blur);
    pointer-events: none;
    z-index: 1;
}

.login-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 28rem;
}

.login-box {
    position: relative;
    background: var(--surface-always-white);
    /* The card is white in BOTH themes, so its text must be dark in both —
       otherwise dark-mode text inherits white and goes invisible on white. */
    color: var(--charcoal);
    padding: var(--space-12);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    min-width: min(400px, 100%);
    text-align: center;
    overflow: hidden;
}

/* Belt-and-suspenders: plain text / labels / non-button links inside the white
   login card stay dark in both themes. Inputs and .btn keep their own colors. */
.login-box p,
.login-box label,
.login-box span:not(.login-tab),
.login-box a:not(.btn):not(.login-alt-btn) {
    color: var(--charcoal);
}
.login-box .text-muted,
.login-box small {
    color: var(--text-secondary);
}

/* The login card is WHITE in both themes. In dark mode several children are
   themed for a dark background and go faint/invisible on the white card — force
   light-card treatment inside .login-box regardless of data-theme. This is the
   "computer (light) looks fine, phone (dark) is out of wack" fix. */
[data-theme="dark"] .login-box .login-alt-btn {
    background: var(--surface-always-white);
    color: var(--charcoal);
    /* Dark-theme --border-color is light-on-dark → invisible on the white card. */
    border-color: rgba(0, 0, 0, 0.15); /* tokens-allow: fixed hairline on always-white card */
}
[data-theme="dark"] .login-box .login-alt-btn:hover,
[data-theme="dark"] .login-box .login-alt-btn.active {
    border-color: var(--primary-color);
    background: rgba(var(--gsx-brand-rgb), 0.08);
    color: var(--brand-ink);
}
[data-theme="dark"] .login-box .register-divider span { color: var(--text-muted); }
/* Theme-dependent inline var(--text-secondary)/opacity make secondary links
   faint on the white card in dark mode — force a readable muted grey (beats inline). */
.login-box a[style*="--text-secondary"],
.login-box p[style*="--text-secondary"] {
    color: var(--text-secondary) !important;
    opacity: 1 !important;
}

.login-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.login-live-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color var(--motion-base);
}

.login-live-link:hover {
    color: var(--brand-ink);
}

.login-top-row .login-theme-toggle {
    position: static;
}

.login-logo {
    display: block;
    margin: 0 auto 1rem;
    width: 120px;
    height: auto;
}

.login-title {
    display: block;
    margin: 0 auto 0.5rem;
    height: 40px;
    width: auto;
}

.login-box h1 {
    color: var(--charcoal);
    font-size: 2rem;
    margin-bottom: var(--space-2);
}

.login-box .subtitle {
    color: var(--brand-ink);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    margin-top: var(--space-3);
    margin-bottom: var(--space-6);
}

/* ============================================================================
   SCREEN MANAGEMENT
   ============================================================================ */

.screen {
    display: none !important;
}

.screen.active {
    display: block !important;
}

#loginScreen.active,
#registerScreen.active,
#pendingAccountScreen.active {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    /* accounts for mobile nav bars */
    background: url('images/login-background.jpg') center/cover no-repeat;
    background-attachment: fixed;
    justify-content: center;
    overflow-y: auto;
    padding: calc(2rem + env(safe-area-inset-top, 0px)) 1rem 2rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

#loginScreen.active,
#pendingAccountScreen.active {
    /* "safe" centers when the card fits but falls back to start (no top clip)
       when the content is taller than the viewport — fixes "login too long for
       phone" where centered overflow hid the logo above the scroll origin. */
    align-items: safe center;
}

#registerScreen.active {
    align-items: flex-start;
    padding-top: var(--space-12);
}

/* ============================================================================
   NAVIGATION
   ============================================================================ */

.navbar {
    background: var(--charcoal);
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 2rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--primary-color);
    box-shadow: 0 2px 10px var(--shadow-color);
    min-height: 60px;
}

/* Persistent school badge — inline, bottom-aligned next to logo */
.nav-school-badge {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    cursor: pointer;
    transition: opacity var(--motion-base);
    margin-left: var(--space-2);
    margin-bottom: -4px;
}

.nav-school-badge:hover {
    opacity: 0.75;
}

.nav-school-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-ink);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-main {
    display: flex;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Dark mode: show dark-mode logo, hide light-mode logo */
.brand-dark {
    display: block;
}

.brand-light {
    display: none;
}

/* Light mode: show light-mode logo, hide dark-mode logo */
[data-theme="light"] .brand-dark {
    display: none;
}

[data-theme="light"] .brand-light {
    display: block;
}

.nav-brand .btn {
    margin: 0;
}

/* Back button - clean chevron */
.nav-brand .brand-logo {
    height: 45px;
    width: auto;
}

.nav-brand .brand-logo-full {
    height: 38px;
    width: auto;
}

.nav-brand h2 {
    color: var(--text-primary);
    display: inline-block;
    margin: 0;
    font-size: 1.15rem;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.nav-user span {
    font-size: 0.82rem;
    font-weight: 500;
}

/* Nav buttons → clean text links */
.nav-user .btn-sm,
.nav-user .nav-link {
    min-height: 0;
    /* Unified desktop nav link: inline-flex + center so icons sit centered with
       the label, and a single `gap` owns the icon↔label spacing across School and
       Casual (no more ad-hoc inline margins). Mobile drawer links flex via 07-mobile. */
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75); /* tokens-allow: nav inactive link at 75% opacity; partial-opacity intentional */
    border-radius: var(--radius-sm);
    transition: all var(--motion-base);
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
}

/* One icon size for every desktop nav link (School 14px inline svgs, Casual 16px
   .solo-svg, player icons) so the whole navbar reads as one system. Overrides the
   per-svg width/height attributes. Trigger icons (.nav-row-ico) match at 16px too. */
.nav-user .nav-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.nav-user .btn-sm:hover,
.nav-user .nav-link:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

.nav-user .btn-sm.btn-secondary,
.nav-user .nav-link {
    background: none;
    border: none;
}

.nav-user .btn-sm.btn-secondary:hover,
.nav-user .nav-link:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Logout stands out subtly */
.nav-user .btn-logout,
.nav-user .nav-logout {
    color: var(--danger-ink);
    background: none;
    border: none;
    margin-left: var(--space-0-5);
    padding-left: var(--space-2-5);
    border-left: 1px solid var(--border-color);
}

.nav-user .btn-logout:hover,
.nav-user .nav-logout:hover {
    color: var(--danger-ink);
    background: var(--danger-wash);
}

/* Desktop: hide mobile-only drawer elements */
.nav-drawer-header {
    display: none;
}

.nav-drawer-links {
    display: contents;
}

.nav-drawer-overlay {
    display: none;
}

/* Desktop: player nav theme toggle → clean icon-only button.
   (The .nav-theme-row markup is the mobile-drawer row; without this it
   renders as a raw boxed <button> with the "Light / Dark mode" text.) */
@media (min-width: 769px) {
    .nav-drawer-footer {
        display: contents;
    }

    .nav-theme-row {
        background: none;
        border: none;
        padding: var(--space-1-5) var(--space-2);
        border-radius: var(--radius-sm);
        cursor: pointer;
        color: rgba(255, 255, 255, 0.75); /* tokens-allow: nav theme toggle at 75% opacity; partial-opacity intentional */
        display: flex;
        align-items: center;
        transition: all var(--motion-base);
    }

    .nav-theme-row:hover {
        color: var(--text-primary);
        background: var(--hover-bg);
    }

    /* Show only the icon; hide the "Light / Dark mode" text label */
    .nav-theme-row .nav-theme-label {
        gap: 0;
        font-size: 0;
        line-height: 0;
    }

    .nav-theme-row .nav-theme-label svg {
        width: 18px;
        height: 18px;
    }

    /* Sun in dark mode, moon in light mode */
    .nav-theme-row .icon-moon {
        display: none;
    }

    .nav-theme-row .icon-sun {
        display: inline-block;
    }

    [data-theme="light"] .nav-theme-row .icon-sun {
        display: none;
    }

    [data-theme="light"] .nav-theme-row .icon-moon {
        display: inline-block;
    }

    [data-theme="light"] .nav-theme-row {
        color: var(--text-secondary);
    }

    [data-theme="light"] .nav-theme-row:hover {
        color: var(--text-primary);
        background: var(--hairline-faint);
    }
}

/* ── Nav Dropdown Menus ── */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    padding: var(--space-1-5) var(--space-3);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.78); /* tokens-allow: nav dropdown trigger inactive at 78% opacity; partial-opacity intentional */
    border-radius: var(--radius-sm);
    transition: all var(--motion-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.nav-dropdown-trigger:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

.nav-dropdown-trigger.active {
    color: var(--brand-ink);
}

.nav-user .nav-link.active {
    color: var(--brand-ink);
}

.nav-caret {
    font-size: 0.65rem;
    transition: transform var(--motion-base);
    opacity: 0.65;
}

.nav-dropdown.open .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: var(--charcoal);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-context-menu);
    padding: var(--space-1-5) 0;
    overflow: hidden;
}

.nav-dropdown.open .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    width: 100%;
    padding: var(--space-2-5) var(--space-4);
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82); /* tokens-allow: nav dropdown item at 82% opacity; partial-opacity intentional */
    background: none;
    border: none;
    cursor: pointer;
    transition: all var(--motion-fast);
    text-align: left;
    white-space: nowrap;
}

.nav-dropdown-item:hover {
    background: rgba(var(--gsx-brand-rgb), 0.12);
    color: var(--text-primary);
}

.nav-dropdown-icon {
    font-size: 0.95rem;
    flex-shrink: 0;
    width: 1.2rem;
    text-align: center;
}

/* SVG icons in nav dropdown items */
.nav-dd-svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.65;
}

/* Right-side nav items (Profile, Logout, Theme) */
.nav-right-group {
    display: flex;
    align-items: center;
    gap: var(--space-0-5);
    margin-left: var(--space-2);
    padding-left: var(--space-3);
    border-left: 1px solid var(--border-color);
}

/* Light theme dropdowns */
[data-theme="light"] .nav-dropdown-menu {
    background: var(--surface-solid);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .nav-dropdown-item {
    color: var(--text-secondary);
}

[data-theme="light"] .nav-dropdown-item:hover {
    background: rgba(var(--gsx-brand-rgb), 0.08);
    color: var(--card-text);
}

/* Admin nav alert dot */
.admin-alert-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--double);
    border-radius: 50%;
    margin-left: var(--space-0-5);
    vertical-align: super;
    animation: admin-dot-pulse 2s infinite;
}

@keyframes admin-dot-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* Admin menu item count badges */
.admin-menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: auto;
    line-height: 1;
}

.admin-menu-badge-error {
    background: var(--danger-wash);
    color: var(--double-ink);
}

.admin-menu-badge-info {
    background: var(--info-wash);
    color: var(--info-ink);
}

[data-theme="light"] .admin-menu-badge-error {
    background: var(--danger-wash);
    color: var(--danger-ink);
}

[data-theme="light"] .admin-menu-badge-info {
    background: var(--info-wash);
    color: var(--info-ink);
}

[data-theme="light"] .nav-dropdown-trigger {
    color: var(--text-secondary);
}

[data-theme="light"] .nav-dropdown-trigger:hover {
    color: var(--card-text);
    background: var(--raise-3);
}

[data-theme="light"] .nav-dropdown-trigger.active {
    color: var(--brand-ink);
}

[data-theme="light"] .nav-user .nav-link.active {
    color: var(--brand-ink);
}

[data-theme="light"] .nav-right-group {
    border-left-color: var(--border-subtle);
}

/* Pulsing LIVE button */

/* ============================================================================
   HELPDESK — Support Tickets & Error Log Pages
   ============================================================================ */

.helpdesk-header {
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.helpdesk-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Stat pills row */
.stat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    align-items: center;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-0-5) var(--space-2-5);
    border-radius: var(--radius-xl);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    transition: opacity var(--motion-fast);
    border: 1px solid var(--border-color);
}

.stat-pill:hover {
    opacity: 0.8;
}

.stat-pill-open {
    background: var(--info-wash);
    color: var(--info-ink);
    border-color: var(--info-wash-border);
}

.stat-pill-progress {
    background: var(--warning-wash);
    color: var(--warning-ink);
    border-color: var(--warning-wash-border);
}

.stat-pill-resolved {
    background: var(--success-wash);
    color: var(--birdie-ink);
    border-color: var(--success-wash-border);
}

.stat-pill-closed {
    background: rgba(149, 165, 166, 0.12); /* tokens-allow: neutral blue-gray; no matching token */
    color: #95a5a6; /* tokens-allow: neutral blue-gray closed/low state; no matching token */
    border-color: rgba(149, 165, 166, 0.25); /* tokens-allow: neutral blue-gray border; no matching token */
}

.stat-pill-critical {
    background: var(--danger-wash);
    color: var(--double-ink);
    border-color: var(--danger-wash-border);
}

.stat-pill-high {
    background: var(--warning-wash);
    color: var(--bogey-ink);
    border-color: var(--warning-wash-border);
}

.stat-pill-error {
    background: var(--danger-wash);
    color: var(--double-ink);
    border-color: var(--danger-wash-border);
}

.stat-pill-info {
    background: var(--info-wash);
    color: var(--info-ink);
    border-color: var(--info-wash-border);
}

/* Filter card */
.helpdesk-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    margin: 0 var(--space-4) var(--space-3);
}

.helpdesk-filters select,
.helpdesk-filters input[type="text"],
.helpdesk-filters input[type="date"] {
    padding: var(--space-1-5) var(--space-2-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.82rem;
    min-width: 0;
}

.helpdesk-filters input[type="text"] {
    flex: 1;
    min-width: 120px;
}

.helpdesk-filters .btn-sm {
    padding: 0 var(--space-3-5);
    font-size: 0.8rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

.helpdesk-filters .btn-sm:hover {
    background: var(--accent-color);
    color: var(--gsx-on-brand);
}

.helpdesk-filters .btn-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.78rem;
    text-decoration: underline;
}

.helpdesk-filters .btn-clear:hover {
    color: var(--text-primary);
}

/* List card */
.helpdesk-list-card {
    margin: 0 var(--space-4) var(--space-4);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.helpdesk-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2-5) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.helpdesk-list-body {
    min-height: 120px;
}

/* ── Ticket Rows ── */
.ticket-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background var(--motion-instant);
    position: relative;
}

.ticket-row:last-child {
    border-bottom: none;
}

.ticket-row:hover {
    background: var(--raise-1);
}

[data-theme="light"] .ticket-row:hover {
    background: var(--raise-1);
}

.ticket-priority-bar {
    width: 4px;
    flex-shrink: 0;
    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

.ticket-priority-critical .ticket-priority-bar {
    background: var(--double);
}

.ticket-priority-high .ticket-priority-bar {
    background: var(--bogey);
}

.ticket-priority-medium .ticket-priority-bar {
    background: var(--warning);
}

.ticket-priority-low .ticket-priority-bar {
    background: #95a5a6; /* tokens-allow: neutral blue-gray low-priority bar; no matching token */
}

.ticket-main {
    flex: 1;
    padding: var(--space-2-5) var(--space-3);
    min-width: 0;
}

.ticket-top-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    flex-wrap: nowrap;
}

.ticket-id {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
}

.ticket-subject {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-comment-count {
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.ticket-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    align-items: center;
}

.ticket-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
}

.ticket-status-open {
    background: var(--info-wash);
    color: var(--info-ink);
}

.ticket-status-in-progress {
    background: var(--warning-wash);
    color: var(--warning-ink);
}

.ticket-status-resolved {
    background: var(--success-wash);
    color: var(--birdie-ink);
}

.ticket-status-closed {
    background: rgba(149, 165, 166, 0.12); /* tokens-allow: neutral blue-gray closed badge; no matching token */
    color: #95a5a6; /* tokens-allow: neutral blue-gray closed badge text; no matching token */
}

.ticket-cat {
    background: var(--purple-wash);
    color: var(--purple-ink);
}

.ticket-priority-critical .ticket-badge.ticket-priority-critical,
.ticket-badge.ticket-priority-critical {
    background: var(--danger-wash);
    color: var(--double-ink);
}

.ticket-badge.ticket-priority-high {
    background: var(--warning-wash);
    color: var(--bogey-ink);
}

.ticket-badge.ticket-priority-medium {
    background: var(--warning-wash);
    color: var(--warning-ink);
}

.ticket-badge.ticket-priority-low {
    background: rgba(149, 165, 166, 0.1); /* tokens-allow: neutral blue-gray low-priority wash; no matching token */
    color: #95a5a6; /* tokens-allow: neutral blue-gray low-priority text; no matching token */
}

.ticket-meta-text {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.ticket-meta-time {
    white-space: nowrap;
}

.ticket-due {
    color: var(--warning-ink);
}

.ticket-chevron {
    width: 18px;
    height: 18px;
    align-self: center;
    margin-right: var(--space-2-5);
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0.4;
}

/* ── Ticket Detail Overlay ── */
.helpdesk-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--scrim);
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-8) var(--space-4);
    overflow-y: auto;
}

.helpdesk-detail-panel {
    background: var(--card-bg);
    border-radius: var(--radius-3xl);
    width: 100%;
    max-width: 720px;
    padding: var(--space-7);
    box-shadow: var(--shadow-2xl);
    color: var(--text-primary);
    margin-top: 2vh;
}

.ticket-detail-header {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.ticket-detail-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-detail-title-row h3 {
    margin: 0 0 var(--space-1);
    font-size: 1.1rem;
}

.ticket-detail-title-row .btn-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0 var(--space-1);
}

.ticket-detail-subject {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.ticket-detail-badges {
    display: flex;
    gap: var(--space-1-5);
    flex-wrap: wrap;
}

.ticket-detail-section {
    margin-bottom: var(--space-3);
}

.ticket-detail-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: var(--space-0-5);
    font-weight: 600;
}

.ticket-detail-value {
    font-size: 0.88rem;
    color: var(--text-primary);
}

.ticket-detail-description {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Detail actions */
.ticket-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: end;
    margin: var(--space-4) 0;
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.ticket-action-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ticket-action-group label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.ticket-action-group select,
.ticket-action-group input {
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.82rem;
}

/* Comments */
.ticket-comments-section {
    margin-top: var(--space-5);
}

.ticket-comments-section h4 {
    margin: 0 0 var(--space-3);
    font-size: 0.95rem;
    color: var(--text-primary);
}

.ticket-comment {
    padding: var(--space-2-5) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    margin-bottom: var(--space-2);
    border: 1px solid var(--border-color);
}

.ticket-comment-internal {
    border-left: 3px solid var(--warning);
    background: rgba(var(--gsx-warning-rgb), 0.05); /* tokens-allow: 0.05 alpha — below --warning-wash (0.12); visible jump if snapped */
}

.ticket-comment-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: 0.8rem;
}

.ticket-internal-badge {
    font-size: 0.65rem;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-xs);
    background: var(--warning-wash);
    color: var(--warning-ink);
    font-weight: 600;
}

.ticket-comment-body {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
}

.ticket-add-comment {
    margin-top: var(--space-3);
}

.ticket-add-comment textarea {
    width: 100%;
    padding: var(--space-2-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
    box-sizing: border-box;
}

.ticket-comment-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-1-5);
}

.ticket-internal-toggle {
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
}

/* ── Error Rows ── */
.error-row {
    border-bottom: 1px solid var(--border-color);
    transition: background var(--motion-instant);
    border-left: 3px solid transparent;
}

.error-row:last-child {
    border-bottom: none;
}

.error-row:hover {
    background: var(--raise-1);
}

[data-theme="light"] .error-row:hover {
    background: var(--raise-1);
}

.error-row.error-type-server {
    border-left-color: var(--double);
}

.error-row.error-type-client {
    border-left-color: var(--bogey);
}

.error-row.error-type-promise {
    border-left-color: var(--warning);
}

.error-ack {
    opacity: 0.45;
}

.error-ack:hover {
    opacity: 0.75;
}

.error-main {
    padding: var(--space-2-5) var(--space-3-5);
    cursor: pointer;
}

.error-top-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    justify-content: space-between;
}

.error-top-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

/* Right-side detail column */
.error-detail-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-0-5);
    flex-shrink: 0;
    max-width: 280px;
}

.error-detail-loc {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--info-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.error-detail-status {
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-xs);
    background: var(--danger-wash);
    color: var(--danger-ink);
}

.error-detail-frame {
    font-size: 0.65rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.error-detail-ip {
    font-size: 0.63rem;
    color: var(--text-muted);
    opacity: 0.7;
}

[data-theme="light"] .error-detail-loc {
    color: var(--info-ink);
}

[data-theme="light"] .error-detail-status {
    background: var(--danger-wash);
    color: var(--danger-ink);
}

.error-type-badge {
    padding: var(--space-0-5) var(--space-2-5);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-mono);
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.error-type-client {
    background: rgba(230, 126, 34, 0.22); /* tokens-allow: 0.22 alpha between --warning-wash (0.12) and --warning-wash-border (0.30) */
    color: #f0a060; /* tokens-allow: warm orange dark-mode badge text; distinct from --warning-ink (#ffb74d) */
}

.error-type-promise {
    background: rgba(var(--gsx-warning-rgb), 0.22); /* tokens-allow: 0.22 alpha between --warning-wash and --warning-wash-border */
    color: #f5c842; /* tokens-allow: yellow-amber dark-mode badge text; no matching token */
}

.error-type-server {
    background: rgba(var(--gsx-danger-rgb), 0.22); /* tokens-allow: 0.22 alpha between --danger-wash (0.12) and --danger-wash-border (0.30) */
    color: var(--danger-ink);
}

[data-theme="light"] .error-type-client {
    background: var(--warning-wash);
    color: #c46a15; /* tokens-allow: amber-brown light-mode badge text; custom shade, --warning-ink light (#8a5a00) differs */
}

[data-theme="light"] .error-type-promise {
    background: var(--warning-wash);
    color: #b87d0a; /* tokens-allow: amber-brown light-mode badge text; custom shade, no token equivalent */
}

[data-theme="light"] .error-type-server {
    background: var(--danger-wash);
    color: var(--danger-ink);
}

.error-ack-badge {
    font-size: 0.78rem;
    color: var(--success-ink);
    flex-shrink: 0;
}

.error-message {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.error-meta-row {
    display: flex;
    gap: var(--space-2-5);
    flex-wrap: wrap;
    align-items: center;
}

.error-meta-text {
    font-size: 0.73rem;
    color: var(--text-muted);
}

.error-url {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.error-expand {
    padding: var(--space-2-5) var(--space-3-5) var(--space-3-5);
    border-top: 1px dashed var(--border-color);
    background: var(--bg-secondary);
}

.error-full-message {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-family: var(--font-mono);
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: var(--space-2);
    line-height: 1.5;
}

.error-stack {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--surface-sunken);
    padding: var(--space-2-5);
    border-radius: var(--radius-md);
    max-height: 250px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: var(--space-2);
    line-height: 1.45;
    border: 1px solid var(--hairline-faint);
}

[data-theme="light"] .error-stack {
    background: var(--raise-2);
    color: var(--text-secondary);
    border-color: var(--hairline-faint);
}

.error-ua,
.error-ip {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.error-actions {
    display: flex;
    gap: var(--space-1-5);
    margin-top: var(--space-2);
}

/* Action bar for error log */
.helpdesk-action-bar {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin: 0 var(--space-4) var(--space-2);
}

.helpdesk-action-bar .btn {
    font-size: 0.8rem;
    min-height: var(--gsx-control-height-sm);
    padding: 0 var(--space-3-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

.helpdesk-action-bar .btn:hover {
    background: var(--accent-color);
    color: var(--gsx-on-brand);
}

.helpdesk-action-bar .btn-danger {
    border-color: var(--danger-wash-border);
    color: var(--double-ink);
}

.helpdesk-action-bar .btn-danger:hover {
    background: var(--double);
    color: var(--on-danger);
}

/* Shared pagination */
.audit-pagination-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3);
}

.audit-page-info {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Light theme overrides */
[data-theme="light"] .stat-pill {
    background: var(--raise-2);
    color: var(--text-secondary);
}

[data-theme="light"] .stat-pill-open {
    background: var(--info-wash);
}

[data-theme="light"] .stat-pill-progress {
    background: var(--warning-wash);
}

[data-theme="light"] .stat-pill-resolved {
    background: var(--success-wash);
}

[data-theme="light"] .stat-pill-critical {
    background: var(--danger-wash);
}

[data-theme="light"] .stat-pill-error {
    background: var(--danger-wash);
}

[data-theme="light"] .helpdesk-filters {
    background: var(--raise-1);
}

[data-theme="light"] .helpdesk-overlay {
    background: var(--scrim-soft);
}

/* ── Hamburger Menu Toggle ── */
.hamburger-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    z-index: 10;
    margin-left: auto;
}

.hamburger-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--text-primary);
    border-radius: var(--radius-xs);
    transition: all var(--motion-slow) var(--ease-standard);
}

.navbar.menu-open .hamburger-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.navbar.menu-open .hamburger-toggle span:nth-child(2) {
    opacity: 0;
}

.navbar.menu-open .hamburger-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

[data-theme="light"] .hamburger-toggle span {
    background: var(--text-primary);
}

/* ── end Hamburger ── */

.btn-live {
    background: rgba(183, 28, 28, 0.7) !important; /* tokens-allow: LIVE button deep-red; --danger (#f44336) and --danger-dark are lighter */
    border: 1px solid rgba(var(--gsx-danger-rgb), 0.6) !important;
    color: var(--on-danger) !important;
    font-weight: 700;
    position: relative;
    animation: live-glow 2s ease-in-out infinite;
    text-decoration: none;
}

.btn-live:hover {
    background: rgba(220, 40, 40, 0.9) !important; /* tokens-allow: LIVE button hover deep-red gradient stop; custom dark-red animation */
}

.btn-live .live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    margin-right: var(--space-1-5);
    animation: live-pulse 1.2s ease-in-out infinite;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(var(--gsx-danger-rgb), 0.8);
}

@keyframes live-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 6px rgba(var(--gsx-danger-rgb), 0.8);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.7);
        box-shadow: 0 0 2px rgba(var(--gsx-danger-rgb), 0.3);
    }
}

@keyframes live-glow {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(var(--gsx-danger-rgb), 0.3);
    }

    50% {
        box-shadow: 0 0 18px rgba(var(--gsx-danger-rgb), 0.6);
    }
}

.btn-live-hidden {
    display: none !important;
}

/* Live Tournament Picker */
.live-pick-item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-3-5) var(--space-4);
    background: rgba(183, 28, 28, 0.1); /* tokens-allow: live picker deep-red tint; --danger (#f44336) is a lighter red */
    border: 1px solid rgba(var(--gsx-danger-rgb), 0.3);
    border-radius: var(--radius-md);
    cursor: pointer;
    width: 100%;
    text-align: left;
    color: var(--text);
    font-size: 0.95rem;
    transition: all var(--motion-base);
}

.live-pick-item:hover {
    background: rgba(183, 28, 28, 0.25); /* tokens-allow: live picker hover deep-red; custom dark-red */
    border-color: rgba(var(--gsx-danger-rgb), 0.6);
}

.live-pick-dot {
    width: 10px;
    height: 10px;
    background: var(--danger);
    border-radius: 50%;
    animation: live-pulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(var(--gsx-danger-rgb), 0.8);
}

.live-pick-name {
    flex: 1;
    font-weight: 600;
}

.live-pick-arrow {
    color: var(--brand-ink);
    font-size: 1.2rem;
    font-weight: 700;
}

/* Go Live button in tournament header */
.btn-go-live {
    background: linear-gradient(135deg, rgba(183, 28, 28, 0.8), rgba(220, 60, 60, 0.8)); /* tokens-allow: go-live gradient deep-red stops; custom dark-red animation */
    border: 1px solid rgba(var(--gsx-danger-rgb), 0.5);
    color: var(--on-danger);
    font-weight: 700;
    padding: var(--space-1-5) var(--space-5);
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--motion-slow);
}

.btn-go-live:hover {
    background: linear-gradient(135deg, rgba(220, 40, 40, 0.95), rgba(255, 70, 70, 0.9)); /* tokens-allow: go-live hover gradient stops; custom dark-red animation */
    box-shadow: 0 0 16px rgba(var(--gsx-danger-rgb), 0.5);
}

.btn-go-live .live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--on-danger);
    border-radius: 50%;
    margin-right: var(--space-1-5);
    vertical-align: middle;
}

.btn-go-live.is-live {
    animation: live-glow 2s ease-in-out infinite;
}

.btn-go-live.is-live .live-dot {
    animation: live-pulse 1.2s ease-in-out infinite;
    background: var(--on-danger);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); /* tokens-allow: decorative white glow on live dot; no token for glow effects */
}

/* Release Results button */
.btn-release-results {
    background: rgba(80, 80, 80, 0.7); /* tokens-allow: inactive state neutral dark-gray fill; no neutral fill token */
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-weight: 600;
    padding: var(--space-1-5) var(--space-3-5);
    font-size: 0.78rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--motion-slow);
}

.btn-release-results:hover {
    background: rgba(100, 100, 100, 0.8); /* tokens-allow: inactive-state hover neutral gray; no neutral fill token */
}

.btn-release-results.is-released {
    background: linear-gradient(135deg, rgba(var(--gsx-success-rgb), 0.8), rgba(76, 175, 80, 0.8)); /* tokens-allow: released gradient; multiple success stops at varying lightness */
    border: 1px solid rgba(var(--gsx-success-rgb), 0.5);
    color: var(--on-success);
    font-weight: 700;
}

.btn-release-results.is-released:hover {
    background: linear-gradient(135deg, rgba(56, 142, 60, 0.95), rgba(102, 187, 106, 0.9)); /* tokens-allow: released hover gradient; multiple success stops at varying lightness */
    box-shadow: 0 0 12px rgba(var(--gsx-success-rgb), 0.4);
}

.btn-end-live {
    background: rgba(100, 100, 100, 0.6); /* tokens-allow: end-live inactive neutral gray; no neutral fill token */
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-weight: 600;
    padding: var(--space-1-5) var(--space-4);
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--motion-slow);
}

.btn-end-live:hover {
    background: rgba(140, 100, 100, 0.7); /* tokens-allow: end-live hover muted reddish-gray; no token */
}

/* ============================================================================
   FORMS
   ============================================================================ */

.form-group {
    margin-bottom: var(--space-6);
    text-align: left;
}

/* Consent / Terms checkbox */
.consent-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    font-size: 0.78rem;
    color: var(--text-secondary, var(--text-muted, #999));
    cursor: pointer;
    line-height: 1.45;
}

.consent-checkbox input[type="checkbox"] {
    margin-top: var(--space-0-5);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.consent-checkbox a {
    color: var(--brand-ink);
    text-decoration: underline;
}

.consent-checkbox a:hover {
    opacity: 0.8;
}

.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--charcoal);
    font-weight: 500;
}

.screen:not(#loginScreen) .form-group label {
    color: var(--text-primary);
}

/* Form inputs render THEME-AWARE, matching the .gsx-input model: dark fields on
   dark surfaces, light fields on light — unified with the platform's 8px
   rounded-rect + 1px-border control geometry. Fixed-white cards (login/pending)
   opt back to a white field below. (W3 unification.) */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
    width: 100%;
    min-height: var(--gsx-control-height);
    padding: var(--space-2-5) var(--space-3);
    border: 1px solid var(--gsx-border);
    border-radius: var(--gsx-control-radius);
    font-size: 1rem;
    background: var(--gsx-input-bg);
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color var(--motion-base), box-shadow var(--motion-base);
}

.form-group textarea {
    min-height: 6rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--gsx-brand-rgb), 0.15);
}

/* Fixed-white cards (login / register / pending) keep a white field with a
   visible border + dark text in BOTH themes, so theme-aware dark fields don't
   vanish on the always-white card. Matches the .surface-light token convention. */
.login-card .form-group input,
.login-card .form-group select,
.login-card .form-group textarea,
.surface-light .form-group input,
.surface-light .form-group select,
.surface-light .form-group textarea,
.login-box .form-group input,
.login-box .form-group select,
.login-box .form-group textarea,
.pending-box .form-group input,
.pending-box .form-group select,
.pending-box .form-group textarea {
    background: var(--surface-always-white);
    border-color: var(--gray);
    color: var(--on-neutral);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    cursor: pointer;
    transition: background var(--motion-base);
    color: var(--card-text);
}

.checkbox-label:hover {
    background: var(--charcoal-lighter);
    border-color: var(--border-medium);
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    cursor: pointer;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

/* UNIFIED with the gsx system (platform-wide button audit): the legacy .btn
   family keeps its class names (≈800 call sites + contextual CSS + JS
   selectors depend on them) but renders with EXACTLY the .gsx-btn geometry,
   so every button on all three platforms reads as one system. New code should
   use .gsx-btn directly; this base is the compatibility skin. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--gsx-control-height);
    padding: 0 var(--space-3-5);
    border: 1px solid transparent;
    border-radius: var(--gsx-control-radius);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--motion-fast);
    text-decoration: none;
}

/* Canonical button affordances (H8 consolidation): every .btn gets a disabled
   state, a keyboard focus ring, and an opt-in full-width modifier. */
.btn:disabled,
.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.btn:focus-visible {
    outline: 2px solid var(--brand-ink);
    outline-offset: 2px;
}
.btn-block {
    display: block;
    width: 100%;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--gsx-on-brand);
}

.btn-primary:hover {
    background: var(--primary-dark);
}

[data-theme="light"] .btn-primary {
    color: var(--gsx-on-brand);
}

[data-theme="light"] .btn-primary:hover {
    color: var(--gsx-on-brand);
}

.btn-secondary {
    background: var(--charcoal-lighter);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--charcoal-light);
}

.btn-outline {
    background: transparent;
    color: var(--text-secondary, #aaa);
    border: 1px solid var(--border-color, #444);
}

.btn-outline:hover {
    background: var(--raise-2);
    border-color: var(--primary-color);
    color: var(--brand-ink);
}

.btn-danger {
    background: var(--danger);
    color: var(--on-danger);
}

.btn-danger:hover {
    background: var(--danger-dark);
}

/* Canonical .btn-success + .btn-danger-outline (H8): single token-derived source.
   Replaces the hardcoded #27ae60 success in 09-pages and the !important  /* tokens-allow: reviewed raw value */
   .btn-danger-outline war in 08-settings + the 11-features duplicate. */
.btn-success {
    background: var(--success);
    color: var(--on-success);
}
.btn-success:hover {
    background: var(--success-dark);
}
.btn-danger-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--gsx-control-height);
    background: transparent;
    color: var(--danger-ink);
    border: 1px solid var(--danger);
    border-radius: var(--gsx-control-radius);
    padding: 0 var(--space-3-5);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all var(--motion-fast);
}
.btn-danger-outline:hover {
    background: var(--danger);
    color: var(--on-danger);
    border-color: var(--danger);
}

.btn-sm {
    min-height: var(--gsx-control-height-sm);
    padding: 0 var(--space-2-5);
    font-size: 0.82rem;
}

/* ============================================================================
   CONTAINER
   ============================================================================ */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-8);
}

/* ── A11y: keyboard focus visibility ──
   The form rule sets input:focus{outline:none}; restore a visible ring for
   keyboard users (mouse/touch focus stays clean via :focus-visible), plus a
   global fallback so links/buttons app-wide show focus. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--brand-ink);
    outline-offset: 1px;
}
:focus-visible {
    outline: 2px solid var(--brand-ink);
    outline-offset: 2px;
}

/* Secondary tagline under the main slogan (login/register white card). */
.login-box .subtitle-sub {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    margin: -1.05rem 0 1.4rem;
}

/* ── Login "More options" expander (progressive disclosure) ──
   Primary login (email/pw + Google) stays uncluttered; everything secondary
   collapses behind this toggle. Lives on the white login card → dark text. */
.login-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-top: var(--space-4);
    padding: var(--space-1-5) var(--space-3);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: color var(--motion-fast), background var(--motion-fast);
}
.login-more-toggle:hover {
    color: var(--brand-ink);
    background: var(--raise-2);
}
.login-more-arrow {
    font-size: 0.7rem;
    transition: transform var(--motion-base) var(--ease-standard);
}
.login-more-toggle[aria-expanded="true"] .login-more-arrow {
    transform: rotate(180deg);
}
.login-more {
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    /* The card is always white, so theme-flipping hairlines vanish here (dark's
       --hairline-faint is white-on-white). Fixed dark hairline instead. */
    border-top: 1px solid rgba(0, 0, 0, 0.08); /* tokens-allow: hairline on always-white login card */
    text-align: center;
}
/* Submit buttons in the expanded section join the Google/QR pill family:
   full-width pills, not the tiny left-aligned default .btn (the "offset
   Sign In" look). Covers Sign In / Create Account / Send Reset / Activate. */
.login-more .btn {
    display: block;
    width: 100%;
    padding: var(--space-2-5) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
}
/* Centered section, but multi-line legal text stays readable left-aligned. */
.login-more .consent-checkbox span {
    text-align: left;
}
.login-more-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-3);
    margin-bottom: var(--space-3-5);
}
.login-more-links a {
    color: var(--text-secondary);
    font-size: 0.82rem;
    text-decoration: none;
}
.login-more-links a:hover {
    color: var(--brand-ink);
}

/* ── Google/QR-first login: primary block + consent gate (revamp) ── */
.login-consent {
    margin: var(--space-1) 0 var(--space-4);
    text-align: left;
}
.login-primary {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
    transition: opacity var(--motion-fast) var(--ease-standard);
}
/* Disabled until the consent box is ticked (belt-and-suspenders: handlers also
   hard-gate). pointer-events:none blocks the Google iframe + QR button. */
.login-primary.is-gated {
    opacity: 0.45;
    pointer-events: none;
}
/* QR sign-in button — styled to sit as a sibling of the Google pill. */
.login-qr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: var(--space-2-5) var(--space-4);
    background: var(--surface-always-white); /* tokens-allow: QR btn on always-white login card */
    color: var(--charcoal);
    border: 1px solid rgba(0, 0, 0, 0.15); /* tokens-allow: fixed hairline on always-white card (theme border vanishes in dark) */
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast);
}
.login-qr-btn:hover {
    border-color: var(--primary-color);
    color: var(--brand-ink);
    background: var(--raise-1);
}

/* Passive consent notice under the primary (Google/QR) block — login is not
   consent-gated; this is disclosure only. Active opt-in lives in the signup forms. */
.login-consent-note {
    margin: 0.85rem auto 0;
    max-width: 22rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-secondary);
    text-align: center;
}
.login-consent-note a { color: var(--text-secondary); text-decoration: underline; }