/* ============================================================================
   THEME V2 — Centralized design tokens for the _LayoutV2 shell
   ----------------------------------------------------------------------------
   ONE source of truth for every theme colour used by pages on _LayoutV2.
   - Base :root ...................... DARK palette (neon-green) — the DEFAULT
   - :root[data-theme="light"] ...... LIGHT palette — "Sport Connect Energy"
                                       (opt-in via the toggle): light-blue ground,
                                       deep-navy text, vivid-blue primary,
                                       sunny-yellow accent, green for stats/wins,
                                       deep-navy footer
   - Legacy aliases ................. old var names repointed at the new tokens
                                       so existing var(--x) rules theme for free
   Switch is driven by <html data-theme="dark|light"> (see Scripts/common/theme.js)
   and mirrored onto <body class="pickleball-dark-theme|pickleball-light-theme">.

   DO NOT hard-code #hex in page CSS. Use the --color-* tokens below.
   Colours that carry MEANING stay literal — see "INTENTIONALLY FIXED" at the end.
   ============================================================================ */

:root {
    /* ---- Page / surfaces ---- */
    --color-page-bg: #0a0f1a;
    --color-page-bg-alt: #050810;
    --color-surface: #1a1f2e;
    --color-surface-secondary: #0e1728;
    --color-surface-hover: #1f2937;
    /* ---- Text ---- */
    --color-text-primary: #ffffff;
    --color-text-secondary: #eeeff0;
    --color-text-muted: #6b7280;
    --color-text-inverse: #0a0f1a; /* text ON a primary/green fill */
    /* ---- Brand / primary ---- */
    --color-primary: #9eff00;
    --color-primary-hover: #b2ff33;
    --color-primary-active: #8ad400;
    /* ---- Secondary / accent (sport theme — sand yellow + sea teal) ---- */
    --color-secondary: #f4d77a;
    --color-secondary-strong: #e9c14e;
    --color-accent: #2fb7a8;
    --color-accent-soft: rgba(47, 183, 168, 0.14);
    /* ---- Borders ---- */
    --color-border: #1f2937;
    --color-border-light: #172033;
    --color-border-strong: #fbbf24;
    /* ---- Inputs ---- */
    --color-input-bg: #0a0f1a;
    --color-input-text: #ffffff;
    --color-input-border: #1f2937;
    --color-input-placeholder: #6b7280;
    --color-input-focus-border: #9eff00;
    /* ---- Buttons ---- */
    --color-button-primary-bg: #9eff00;
    --color-button-primary-text: #0a0f1a;
    --color-button-primary-hover: #b2ff33;
    --color-button-secondary-bg: transparent;
    --color-button-secondary-text: #e5e7eb;
    --color-button-secondary-hover: #252c3d;
    /* ---- Status (hue constant across themes, lightness tuned) ---- */
    --color-success: #22c55e;
    --color-warning: #fbbf24;
    --color-danger: #ef4444;
    --color-info: #3b82f6;
    /* ---- Components ---- */
    --color-card-bg: #1a1f2e;
    --color-card-border: #1f2937;
    --color-modal-bg: #161b28;
    --color-table-header-bg: #0e1728;
    --color-table-row-bg: transparent;
    --color-table-row-hover: #1f2937;
    /* ---- Links ---- */
    --color-link: #9eff00;
    --color-link-hover: #b2ff33;
    /* ---- Elevation ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.24);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.45);
    --shadow-primary: 0 6px 20px rgba(158, 255, 0, 0.30); /* the one CTA-hover glow */
    --shadow-focus: 0 0 0 3px rgba(158, 255, 0, 0.25); /* input / button focus ring */
    --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.40); /* modal dialog */
    --shadow-dropdown: 0 10px 24px rgba(0, 0, 0, 0.35); /* menus / poppers */
    /* ---- Radius ---- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --radius-circle: 50%;
    /* ---- Typography ---- */
    --font-family-base: 'Inter', 'Segoe UI', 'Noto Sans', Tahoma, Arial, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    --font-family-heading: 'Poppins', 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    /* ---- Spacing ---- */
    --spacing-2xs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    /* ---- v3 panel surface (gradient — themed explicitly, not via alias) ---- */
    --v3-panel-bg: linear-gradient(180deg, #121a2a 0%, #0b1220 100%);
    --v3-panel-border: #1f2a3d;
    --v3-panel-radius: 14px;
    --v3-panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    --v3-tile-bg: #0e1728;
    --v3-tile-border: #253145;
    /* ========================================================================
       COMPONENT TOKENS (consumed by components-v2.css and the page CSS)
       Values chosen so existing literals map with no visual change; the few
       deliberate consolidations are listed in Docs/DESIGN_SYSTEM.md.
       ======================================================================== */
    /* Card / panel / tile */
    --card-bg: var(--v3-panel-bg);
    --card-border: var(--v3-panel-border);
    --card-radius: var(--v3-panel-radius);
    --card-shadow: var(--v3-panel-shadow);
    --card-padding: 12px;
    --tile-bg: var(--v3-tile-bg);
    --tile-border: var(--v3-tile-border);
    --tile-radius: var(--radius-md);
    /* Button */
    /* Geometry = the former .view-details-btn (40px / 12px bold / 8px radius) — the one shared button shape */
    --btn-radius: 8px;
    --btn-height: 40px;
    --btn-height-sm: 32px;
    --btn-height-lg: 48px;
    --btn-padding: 0 16px;
    --btn-padding-sm: 0 12px;
    --btn-font-size: 12px;
    --btn-font-weight: 700;
    --btn-gap: 8px;
    --btn-icon-size: 32px;
    --btn-icon-size-sm: 26px;
    /* Badge / chip */
    --badge-radius: var(--radius-pill);
    --badge-padding: 3px 8px;
    --badge-font-size: 14px;
    --badge-font-weight: 700;
    --badge-tracking: 0.5px;
    /* Modal */
    --modal-bg: var(--color-modal-bg);
    --modal-radius: 16px;
    --modal-padding: 28px;
    --modal-border: 1px solid var(--color-border);
    --modal-shadow: var(--shadow-overlay);
    --modal-overlay-bg: rgba(0, 0, 0, 0.55);
    --modal-overlay-blur: blur(4px);
    --modal-max-width: 480px;
    /* Navigation */
    --nav-topnav-bg: linear-gradient(180deg, rgba(13, 18, 25, 0.98) 0%, rgba(10, 15, 26, 0.92) 100%);
    --nav-topnav-border: var(--color-border);
    --nav-footer-bg: radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.12), transparent 38%), linear-gradient(180deg, #0b1324 0%, #070d1b 100%);
    --nav-link-color: var(--color-text-secondary);
    --nav-link-hover-color: var(--color-text-primary);
    --nav-accent-tint-bg: rgba(158, 255, 0, 0.10);
    --nav-accent-tint-border: rgba(158, 255, 0, 0.35);
    --nav-active-fill: var(--color-primary);
    --nav-active-text: var(--color-text-inverse);
    /* Icons */
    --icon-xs: 12px;
    --icon-sm: 14px;
    --icon-md: 16px;
    --icon-lg: 20px;
    --icon-xl: 32px;
    /* Semantic state (draw board "ready/pending card" cue) */
    --color-state-ready: #3b82f6;
    --color-live: var(--color-danger); /* "Live Activity" badge — one meaning */
    /* Tint pairs — soft bg + solid fg, for badges / pills / hover / selected rows */
    --tint-primary-bg: rgba(158, 255, 0, 0.14);
    --tint-primary-fg: var(--color-primary);
    --tint-success-bg: rgba(34, 197, 94, 0.14);
    --tint-success-fg: var(--color-success);
    --tint-warning-bg: rgba(251, 191, 36, 0.14);
    --tint-warning-fg: var(--color-warning);
    --tint-danger-bg: rgba(239, 68, 68, 0.14);
    --tint-danger-fg: var(--color-danger);
    --tint-info-bg: rgba(59, 130, 246, 0.14);
    --tint-info-fg: var(--color-info);
    --tint-neutral-bg: rgba(148, 163, 184, 0.14);
    --tint-neutral-fg: var(--color-text-secondary);
    --tint-gold-bg: rgba(242, 201, 76, 0.15);
    --tint-gold-fg: #f2c94c; /* bright gold — reads on dark; light theme overrides */
    /* z-index scale */
    --z-sidebar: 1000;
    --z-mobile-nav: 1001;
    --z-topnav: 1100;
    --z-dropdown: 2000;
    --z-modal-overlay: 9998;
    --z-modal: 9999;
    --z-profile-modal: 10000;
    --z-loading-overlay: 10001;
    /* ========================================================================
       LEGACY ALIASES — resolve THROUGH the semantic tokens above, so they
       automatically follow the active theme. Do not give these literal values.
       ======================================================================== */
    --primary-blue: #1e3a8a; /* fixed brand blue (also the light accent) */
    --primary-blue-hover: #1d4ed8;
    --primary-green: auto; /* FIXME: resolves to the invalid value `auto` in the dark theme; legacy alias, only a few non-CTA consumers left (.theme-toggle, shell .create-tournament-btn). Page CTAs now use .sc-btn--primary. */
    --accent-green: var(--color-primary);
    --accent-green-dark: var(--color-primary-active);
    --dark-bg: var(--color-page-bg);
    --darker-bg: var(--color-page-bg-alt);
    --bg-primary: var(--color-page-bg);
    --bg-secondary: var(--color-surface);
    --bg-tertiary: var(--color-surface-secondary);
    --card-bg: var(--color-card-bg);
    --sidebar-bg: var(--color-surface);
    --hover-bg: var(--color-surface-hover);
    --border-color: var(--color-border);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    /* tournament-details.css (--td-*) */
    --td-bg: var(--color-page-bg);
    --td-surface: var(--color-surface);
    --td-surface-2: var(--color-surface-secondary);
    --td-border: var(--color-border);
    --td-accent: var(--color-primary);
    --td-accent-2: #50e3c2; /* decorative teal glow — kept literal */
    --td-text: var(--color-text-primary);
    --td-muted: var(--color-text-secondary);
    --td-danger: var(--color-danger);
    /* registration-v2-premium.css (--reg-*) */
    --reg-bg: var(--color-page-bg);
    --reg-card: var(--color-surface);
    --reg-border: var(--color-border);
    --reg-primary: var(--color-primary);
    --reg-text: var(--color-text-primary);
    --reg-muted: var(--color-text-secondary);
    /* registration-v2.css extras */
    --accent-blue: var(--color-info);
    --accent-orange: #ff5722; /* meaningful (multi-account) — fixed */
    --status-paid: #4caf50; /* meaningful — fixed */
    --status-pending: #ffa726; /* meaningful — fixed */
    /* home-v2 / Content/V2/layout-v2 */
    --sidebar-width: 240px;
}

/* ============================================================================
   LIGHT THEME — only the semantic tokens are re-declared; the aliases above
   inherit the new values through their var() references.
   ============================================================================ */
    :root[data-theme="light"] {
        /* "Sport Connect Energy" — light-blue ground, deep-navy text, vivid-blue
           primary, sunny-yellow accent, green for stats/wins. High contrast; the
           default first-visit theme. */
        --color-page-bg: #e8f1fc;
        --color-page-bg-alt: #d8e8f8;
        --color-surface: #ffffff;
        --color-surface-secondary: #f2f7fd;
        --color-surface-hover: #e6f0fc;
        --color-text-primary: wheat;
        --color-text-secondary: white;
        --color-text-muted: #5b7aa8;
        --color-text-inverse: #ffffff;
        --color-primary: wheat;
        --color-primary-hover: #1e40af;
        --color-primary-active: #1a3a9c;
        /* Keep the green-alias family on vivid blue even though --color-primary is now wheat. */
        --primary-green: linear-gradient( 135deg, #1B6B57 0%, #0F4D3E 100% );
        --accent-green: #1d4ed8;
        --color-secondary: #f8c517;
        --color-secondary-strong: #e0ad00;
        --color-accent: #0ea5e9;
        --color-accent-soft: rgba(14, 165, 233, 0.12);
        --color-border: #c9ddf3;
        --color-border-light: #e0edfa;
        --color-border-strong: #9fc2e8;
        --color-input-bg: #ffffff;
        --color-input-text: #0f2547;
        --color-input-border: #a9c6e8;
        --color-input-placeholder: #6c8bb5;
        --color-input-focus-border: #1d4ed8;
        --color-button-primary-bg: #1d4ed8;
        --color-button-primary-text: #ffffff;
        --color-button-primary-hover: #1e40af;
        --color-button-secondary-bg: #ffffff;
        --color-button-secondary-text: #1d4ed8;
        --color-button-secondary-hover: #eef4fe;
        --color-success: #15803d;
        --color-warning: #b45309;
        --color-danger: #b91c1c;
        --color-info: #1d4ed8;
        --color-card-bg: #ffffff;
        --color-card-border: #c9ddf3;
        --color-modal-bg: #ffffff;
        --color-table-header-bg: #eef4fe;
        --color-table-row-bg: #ffffff;
        --color-table-row-hover: #f2f7fd;
        --color-link: #1d4ed8;
        --color-link-hover: #1e40af;
        --shadow-sm: 0 1px 2px rgba(15, 37, 71, 0.08);
        --shadow-md: 0 6px 18px rgba(15, 37, 71, 0.10);
        --shadow-lg: 0 16px 40px rgba(15, 37, 71, 0.16);
        --shadow-primary: 0 6px 18px rgba(29, 78, 216, 0.32);
        --shadow-focus: 0 0 0 3px rgba(29, 78, 216, 0.22);
        --shadow-overlay: 0 20px 55px rgba(15, 37, 71, 0.22);
        --shadow-dropdown: 0 10px 26px rgba(15, 37, 71, 0.16);
        /* Rounder corners for the clean light look (dark keeps 6/10/14). */
        --radius-md: 12px;
        --radius-lg: 16px;
        --v3-panel-bg: #ffffff;
        --v3-panel-border: #c9ddf3;
        --v3-panel-radius: 16px;
        --v3-panel-shadow: 0 6px 18px rgba(15, 37, 71, 0.10);
        --v3-tile-bg: #f2f7fd;
        --v3-tile-border: #d7e6f7;
        /* Component tokens — light overrides (only where the value must change) */
        --modal-overlay-bg: rgba(15, 37, 71, 0.45);
        --nav-topnav-bg: linear-gradient(180deg, #ffffff 0%, #eef4fe 100%);
        /* Footer stays a deep-navy block in light too — high-contrast anchor. */
        --nav-footer-bg: linear-gradient(180deg, #12233f 0%, #0d1a30 100%);
        --nav-accent-tint-bg: rgba(29, 78, 216, 0.10);
        --nav-accent-tint-border: rgba(29, 78, 216, 0.30);
        --tint-primary-bg: rgba(29, 78, 216, 0.12);
        --tint-success-bg: rgba(21, 128, 61, 0.14);
        --tint-warning-bg: rgba(180, 83, 9, 0.14);
        --tint-danger-bg: rgba(185, 28, 28, 0.14);
        --tint-info-bg: rgba(29, 78, 216, 0.12);
        --tint-neutral-bg: rgba(57, 89, 133, 0.12);
        --tint-gold-bg: rgba(248, 197, 23, 0.22);
        --tint-gold-fg: #8a6a08;
    }

/* Keep the class hook in sync when JS mirrors the attribute onto <body>. */
body.pickleball-light-theme {
    color-scheme: light;
}
body.pickleball-dark-theme {
    color-scheme: dark;
}

/* ============================================================================
   SAFE GLOBAL ELEMENT LAYER
   Minimal and non-destructive: NO bare span / p / h* colour rules (pages use
   <span> for icons, chips, sport colours). Only the elements that must follow
   the theme everywhere.
   ============================================================================ */
body {
    background-color: var(--color-page-bg);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
}

a {
    color: var(--color-link);
}
a:hover {
    color: var(--color-link-hover);
}

/* text-like inputs only — leave checkbox/radio/range/color/file to the UA */
input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
textarea,
select {
    background-color: var(--color-input-bg);
    color: var(--color-input-text);
    border-color: var(--color-input-border);
}
input::placeholder,
textarea::placeholder {
    color: var(--color-input-placeholder);
}
input:not([type]):focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-input-focus-border);
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

hr {
    border-color: var(--color-border);
}

/* ============================================================================
   SEMANTIC UTILITY CLASSES (use instead of bare-element colour rules)
   ============================================================================ */
.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-accent { color: var(--color-primary) !important; }
.surface { background-color: var(--color-surface); color: var(--color-text-primary); }
.surface-2 { background-color: var(--color-surface-secondary); }

/* ============================================================================
   THEME TOGGLE (top nav + sidebar footer). Structure styled here; palette via
   tokens so it works in both themes.
   ============================================================================ */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--primary-green);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    flex-shrink: 0;
}
.theme-toggle:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.theme-toggle i { font-size: 15px; line-height: 1; }
/* icon swap: JS toggles nothing — CSS shows the right glyph per theme */
.theme-toggle .theme-toggle-icon-dark { display: inline-block; }
.theme-toggle .theme-toggle-icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .theme-toggle-icon-dark { display: none; }
:root[data-theme="light"] .theme-toggle .theme-toggle-icon-light { display: inline-block; }

.theme-toggle--sidebar {
    width: 100%;
    height: auto;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* ============================================================================
   BOOTSTRAP 3.2.0 — LIGHT-MODE OVERRIDES ONLY
   Scoped to [data-theme="light"] so the dark default is byte-for-byte unchanged.
   BS3 has no CSS custom properties, so these are explicit.
   ============================================================================ */
:root[data-theme="light"] .btn-default {
    background-color: var(--color-button-secondary-bg);
    border-color: var(--color-border-strong);
    color: var(--color-button-secondary-text);
}
:root[data-theme="light"] .btn-default:hover,
:root[data-theme="light"] .btn-default:focus {
    background-color: var(--color-button-secondary-hover);
    color: var(--color-text-primary);
}
:root[data-theme="light"] .btn-primary {
    background-color: var(--color-button-primary-bg);
    border-color: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
}
:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] .btn-primary:focus {
    background-color: var(--color-button-primary-hover);
    border-color: var(--color-button-primary-hover);
}
:root[data-theme="light"] .form-control {
    background-color: var(--color-input-bg);
    color: var(--color-input-text);
    border-color: var(--color-input-border);
}
:root[data-theme="light"] .form-control::placeholder { color: var(--color-input-placeholder); }
:root[data-theme="light"] .form-control:focus {
    border-color: var(--color-input-focus-border);
    box-shadow: var(--shadow-focus);
}
:root[data-theme="light"] .table {
    color: var(--color-text-primary);
}
:root[data-theme="light"] .table > thead > tr > th {
    background-color: var(--color-table-header-bg);
    border-bottom-color: var(--color-border);
}
:root[data-theme="light"] .table > tbody > tr > td,
:root[data-theme="light"] .table > tbody > tr > th {
    border-top-color: var(--color-border-light);
}
:root[data-theme="light"] .table-hover > tbody > tr:hover {
    background-color: var(--color-table-row-hover);
}
:root[data-theme="light"] .modal-content {
    background-color: var(--color-modal-bg);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
:root[data-theme="light"] .modal-header,
:root[data-theme="light"] .modal-footer {
    border-color: var(--color-border);
}
:root[data-theme="light"] .dropdown-menu {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}
:root[data-theme="light"] .dropdown-menu > li > a {
    color: var(--color-text-primary);
}
:root[data-theme="light"] .dropdown-menu > li > a:hover,
:root[data-theme="light"] .dropdown-menu > li > a:focus {
    background-color: var(--color-surface-hover);
    color: var(--color-text-primary);
}
:root[data-theme="light"] .pagination > li > a,
:root[data-theme="light"] .pagination > li > span {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-link);
}
:root[data-theme="light"] .pagination > .active > a,
:root[data-theme="light"] .pagination > .active > span {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}
:root[data-theme="light"] .nav-tabs {
    border-bottom-color: var(--color-border);
}
:root[data-theme="light"] .nav-tabs > li > a:hover {
    border-color: var(--color-border-light) var(--color-border-light) var(--color-border);
    background-color: var(--color-surface-hover);
}
:root[data-theme="light"] .nav-tabs > li.active > a,
:root[data-theme="light"] .nav-tabs > li.active > a:hover,
:root[data-theme="light"] .nav-tabs > li.active > a:focus {
    background-color: var(--color-surface);
    border-color: var(--color-border) var(--color-border) transparent;
    color: var(--color-text-primary);
}
:root[data-theme="light"] .alert-success { background-color: #e7f6ec; border-color: #b7e4c7; color: #1b5e34; }
:root[data-theme="light"] .alert-info    { background-color: #e6f0fb; border-color: #b6d4f2; color: #1c4a80; }
:root[data-theme="light"] .alert-warning { background-color: #fdf3e2; border-color: #f3d9a8; color: #7a4f12; }
:root[data-theme="light"] .alert-danger  { background-color: #fbe9e9; border-color: #f2c1c1; color: #8a2020; }

/* ============================================================================
   INTENTIONALLY FIXED — colours that carry meaning; NEVER tokenize these:
   - Sport identity: .pickleball-icon .tennis-icon .badminton-icon .volleyball-icon
     .bóng-bàn-icon .bóng-đá-icon (layout-v2.css)
   - Medals / ranks: rank-gold / rank-silver / rank-bronze (#ffd700 #c0c0c0 #cd7f32)
   - Result state: win/loss, trend-up / trend-down
   - Registration state: --status-paid (green) --status-pending (amber)
     --accent-orange / .multi-account-badge (orange)
   - Destructive: .user-menu-item.logout (red)
   - Flags: .lang-flag.vn / .lang-flag.en swatches
   - Profile stat categories: singles/doubles/mixed accent hues in profile-v2.css
   - Champion badge: gold in dark, sand-yellow tint (--color-secondary) in light
   - Chart.js data-series colours, marketing/login hero gradients, images
   - 3rd-party widget internals (sweetalert2, DataTables, jQuery UI) beyond the
     container overrides above
   - Score trust-level tooltip box: fixed dark #333/#fff, same in both themes
     (small decorative hover label, not a themed surface)
   ============================================================================ */

/* ============================================================================
   SCORE TRUST LEVEL — .trustL0 (least trusted) .. .trustL3 (most trusted), plus
   .score-over (score exceeds a tournament's cap, takes precedence over trust
   classes). Legacy-layout counterpart: theme.css. See Docs/DESIGN_SYSTEM.md.
   ============================================================================ */
.score-over,
.trustL0,
.trustL1,
.trustL2,
.trustL3 {
    position: relative;
    font-weight: bolder !important;
}

/* !important: these classes must win over a component's own unconditional `color`
   (e.g. .reg-skill-pill) regardless of stylesheet load order - same reasoning as the
   font-weight above. */
.score-over { color: var(--color-danger) !important; }
.trustL0 { color: var(--text-muted) !important; }
.trustL1 { color: var(--color-danger) !important; }
.trustL2 { color: var(--color-warning) !important; }
.trustL3 { color: var(--color-success) !important; }

.score-over:hover::after,
.trustL0:hover::after,
.trustL1:hover::after,
.trustL2:hover::after,
.trustL3:hover::after {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.score-over:hover::after { content: "Vượt điểm"; }
.trustL0:hover::after { content: "Điểm tự chấm"; }
.trustL1:hover::after { content: "Điểm chấm quá 6 tháng"; }
.trustL2:hover::after { content: "Điểm chấm quá 3 tháng"; }
.trustL3:hover::after { content: "Điểm chấm gần đây (dưới 3 tháng)"; }