/* ==========================================================
   GOAL LEGENDS THEME TOKENS
   ----------------------------------------------------------
   Dark is the default and lives on bare :root. Its values are
   the exact literals the stylesheets used before tokenising,
   so dark mode renders identically to before.

   Light ("Stadium White") applies when <html data-theme="light">,
   which App.razor sets server-side from the gl-theme cookie and
   wwwroot/js/theme.js toggles from the app-bar sun/moon button.

   Every light rule is guarded with :not(:has(.gl-dark-page)), so a page
   that renders an element with class gl-dark-page is fully dark (app
   bar, drawer, background included) even when light is selected. Used
   by LandingLayout (public pages) and the artwork-backed Team, Manager
   and National Team profile pages.

   .gl-force-dark re-declares the dark values on one element, keeping
   just that subtree dark inside an otherwise light page.

   Token families:
   --gl-ink / --gl-ink-rgb      text, hairlines, hover tints (was white)
   --gl-gold*                   brand gold; navy in light mode, split by
                                role (text / fill / tint / line / glow)
   --gl-shadow-rgb / -k         box & drop shadows (scaled down in light)
   --gl-dk-<hex>[-rgb]          dark surfaces (cards, panels), white in light
   --gl-on-gold-<hex>           text sitting on a flat gold fill
   ========================================================== */

:root,
.gl-force-dark {
    --gl-ink: #ffffff;
    --gl-ink-rgb: 255,255,255;

    --gl-gold: #d4af37;
    --gl-gold-text: #d4af37;
    --gl-gold-line: #d4af37;
    --gl-gold-glow: #d4af37;
    --gl-gold-text-rgb: 212,175,55;
    --gl-gold-tint-rgb: 212,175,55;
    --gl-gold-line-rgb: 212,175,55;
    --gl-gold-glow-rgb: 212,175,55;

    --gl-shadow-rgb: 0,0,0;
    --gl-shadow-k: 1;

    /* Text inputs (.esm-input in authentication.css) */
    --gl-input-bg: #232937;
    /* Solid black fills, e.g. sticky table headers that must hide rows scrolling under them */
    --gl-black-surface: #000000;
    --gl-text-shadow-k: 1;

    --gl-dk-060a08-rgb: 6,10,8;
    --gl-dk-08080a-rgb: 8,8,10;
    --gl-dk-080c0a-rgb: 8,12,10;
    --gl-dk-090d0b-rgb: 9,13,11;
    --gl-dk-0a0908-rgb: 10,9,8;
    --gl-dk-0a0a0c: #0a0a0c;
    --gl-dk-0a0a0c-rgb: 10,10,12;
    --gl-dk-0a0a0f: #0a0a0f;
    --gl-dk-0b0f0d-rgb: 11,15,13;
    --gl-dk-0b111b: #0b111b;
    --gl-dk-0c0b09: #0c0b09;
    --gl-dk-0c0b09-rgb: 12,11,9;
    --gl-dk-0c0d10: #0c0d10;
    --gl-dk-0c0d11: #0c0d11;
    --gl-dk-0c0d11-rgb: 12,13,17;
    --gl-dk-0d0c0a: #0d0c0a;
    --gl-dk-0d0d0e: #0d0d0e;
    --gl-dk-0d0d0f: #0d0d0f;
    --gl-dk-0e0c09: #0e0c09;
    --gl-dk-0e0d0a: #0e0d0a;
    --gl-dk-0f0f0f: #0f0f0f;
    --gl-dk-0f0f0f-rgb: 15,15,15;
    --gl-dk-100e0a: #100e0a;
    --gl-dk-101012: #101012;
    --gl-dk-101216: #101216;
    --gl-dk-110f0b: #110f0b;
    --gl-dk-111113: #111113;
    --gl-dk-121316: #121316;
    --gl-dk-121318: #121318;
    --gl-dk-121318-rgb: 18,19,24;
    --gl-dk-12161e-rgb: 18,22,30;
    --gl-dk-131315: #131315;
    --gl-dk-14110a: #14110a;
    --gl-dk-141319-rgb: 20,19,25;
    --gl-dk-141414: #141414;
    --gl-dk-14141a: #14141a;
    --gl-dk-14141a-rgb: 20,20,26;
    --gl-dk-14161c: #14161c;
    --gl-dk-15151a: #15151a;
    --gl-dk-16161a: #16161a;
    --gl-dk-16181e: #16181e;
    --gl-dk-17150f: #17150f;
    --gl-dk-17151b: #17151b;
    --gl-dk-17181b: #17181b;
    --gl-dk-19150f: #19150f;
    --gl-dk-1a1610: #1a1610;
    --gl-dk-1a1a1a: #1a1a1a;
    --gl-dk-1b1710: #1b1710;
    --gl-dk-1c170c: #1c170c;
    --gl-dk-1c1810: #1c1810;
    --gl-dk-1c1a22: #1c1a22;
    --gl-dk-1c1c1e: #1c1c1e;
    --gl-dk-1c1f24: #1c1f24;
    --gl-dk-1c1f26: #1c1f26;
    --gl-dk-1d1810: #1d1810;
    --gl-dk-1d1b16: #1d1b16;
    --gl-dk-1e1910: #1e1910;
    --gl-dk-1e1e1e-rgb: 30,30,30;
    --gl-dk-201e26: #201e26;
    --gl-dk-242424-rgb: 36,36,36;
    --gl-dk-2a2312: #2a2312;
    --gl-dk-2b2b2b: #2b2b2b;
    --gl-on-gold-000000: #000000;
    --gl-on-gold-0a0a0c: #0a0a0c;
    --gl-on-gold-1a1a1a: #1a1a1a;

    /* Coloured text (status colours, pastels). Light = same hue darkened to 4.5:1 on white. */
    --gl-t-06210f: #06210f;
    --gl-t-1877f2: #1877F2;
    --gl-t-1a1a2e: #1a1a2e;
    --gl-t-1e88e5: #1e88e5;
    --gl-t-26c6da: #26c6da;
    --gl-t-2d2205: #2d2205;
    --gl-t-2ecc71: #2ecc71;
    --gl-t-2f7d2f: #2f7d2f;
    --gl-t-3498db: #3498db;
    --gl-t-39d98a: #39D98A;
    --gl-t-3a2c06: #3a2c06;
    --gl-t-3ddc84: #3ddc84;
    --gl-t-3fae59: #3fae59;
    --gl-t-42a5f5: #42A5F5;
    --gl-t-42d67b: #42d67b;
    --gl-t-4caf50: #4caf50;
    --gl-t-4caf7d: #4caf7d;
    --gl-t-4da3ff: #4da3ff;
    --gl-t-4fd1c5: #4fd1c5;
    --gl-t-57c785: #57c785;
    --gl-t-58616c: #58616C;
    --gl-t-5865f2: #5865F2;
    --gl-t-63ff63: #63ff63;
    --gl-t-64d66a: #64d66a;
    --gl-t-6fa8dc: #6fa8dc;
    --gl-t-6fcf6f: #6fcf6f;
    --gl-t-6fdc8c: #6fdc8c;
    --gl-t-72b7ff: #72b7ff;
    --gl-t-7ad67a: #7ad67a;
    --gl-t-7dbcff: #7dbcff;
    --gl-t-7df0bd: #7df0bd;
    --gl-t-7ec8ef: #7ec8ef;
    --gl-t-7ed88b: #7ed88b;
    --gl-t-7ee08a: #7ee08a;
    --gl-t-7fb8e0: #7fb8e0;
    --gl-t-7fc0ff: #7fc0ff;
    --gl-t-7fe08a: #7fe08a;
    --gl-t-8a6d12: #8a6d12;
    --gl-t-8fe3a9: #8fe3a9;
    --gl-t-9fd8ff: #9fd8ff;
    --gl-t-a5d6a7: #a5d6a7;
    --gl-t-a8c8ee: #a8c8ee;
    --gl-t-b03030: #b03030;
    --gl-t-b04040: #b04040;
    --gl-t-b388ff: #b388ff;
    --gl-t-b9d1ff: #b9d1ff;
    --gl-t-bfc8d6: #BFC8D6;
    --gl-t-cba6f7: #cba6f7;
    --gl-t-d6e2f5: #d6e2f5;
    --gl-t-d7b24a: #d7b24a;
    --gl-t-e0332f: #e0332f;
    --gl-t-e0333f: #e0333f;
    --gl-t-e05353: #e05353;
    --gl-t-e05555: #e05555;
    --gl-t-e0605a: #e0605a;
    --gl-t-e08080: #e08080;
    --gl-t-e0b23c: #e0b23c;
    --gl-t-e5636b: #e5636b;
    --gl-t-e57373: #e57373;
    --gl-t-e74c3c: #e74c3c;
    --gl-t-ee0707: rgb(238,7,7);
    --gl-t-f0a0a0: #f0a0a0;
    --gl-t-f0a63a: #f0a63a;
    --gl-t-f0c000: #f0c000;
    --gl-t-f0c94b: #f0c94b;
    --gl-t-f0cf6b: #f0cf6b;
    --gl-t-f2c744: #f2c744;
    --gl-t-f2c94c: #f2c94c;
    --gl-t-f44336: #F44336;
    --gl-t-f6dc8a: #f6dc8a;
    --gl-t-f6e6a8: #f6e6a8;
    --gl-t-f6e6b0: #f6e6b0;
    --gl-t-fa5c5c: #fa5c5c;
    --gl-t-ff4500: #FF4500;
    --gl-t-ff5a5a: #ff5a5a;
    --gl-t-ff6b35: #ff6b35;
    --gl-t-ff6b6b: #ff6b6b;
    --gl-t-ff7272: #ff7272;
    --gl-t-ff7373: #ff7373;
    --gl-t-ff8a80: #ff8a80;
    --gl-t-ff8a8a: #ff8a8a;
    --gl-t-ff9c9c: #ff9c9c;
    --gl-t-ffb3b3: #ffb3b3;
    --gl-t-ffb74d: #ffb74d;
    --gl-t-ffc107: #FFC107;
    --gl-t-ffd54f: #FFD54F;
    --gl-t-ffd700: #ffd700;
    --gl-t-ffd76a: #ffd76a;
    --gl-t-fff1c1-a75: rgba(255,241,193,.75);
    --gl-t-fff1c1-a8: rgba(255,241,193,.8);
    --gl-t-fff3c4: #fff3c4;
    --gl-t-f2564a: #f2564a;
    --gl-t-409cff: #409cff;

    /* Light-grey text on dark. Light = navy at the same emphasis over white. */
    --gl-n-888888: #888;
    --gl-n-999999: #999;
    --gl-n-bbbbbb: #bbb;
    --gl-n-bdbdbd: #bdbdbd;
    --gl-n-c9c9c9: #c9c9c9;
    --gl-n-c9d0d7: #c9d0d7;
    --gl-n-cccccc: #ccc;
    --gl-n-d0d0d0: #d0d0d0;
    --gl-n-dddddd: #ddd;
    --gl-n-e9efe9: #e9efe9;
    --gl-n-eeeeee: #eee;
    --gl-n-f2f1ee: #f2f1ee;
    --gl-n-f2f2f2: #f2f2f2;
    --gl-dk-080809-rgb: 8,8,9;
    --gl-dk-0a0a0b: #0a0a0b;
    --gl-dk-1b1a17: #1b1a17;
    --gl-dk-0a0a0a-rgb: 10,10,10;
    --gl-t-fff8e0: #fff8e0;
}

:root[data-theme="light"]:not(:has(.gl-dark-page)) {
    color-scheme: light;

    --gl-ink: #0f1b2d;
    --gl-ink-rgb: 15,27,45;

    /* Accent = the club's primary, darkened to 4.5:1 on white (navy when
       there's no club). See the CLUB COLOURS section below. */
    --gl-gold: var(--gl-club-deep);
    --gl-gold-text: var(--gl-club-deep);
    --gl-gold-line: var(--gl-club-deep);
    --gl-gold-glow: #c9a227;
    --gl-gold-text-rgb: var(--gl-club-deep-rgb);
    --gl-gold-tint-rgb: var(--gl-club-deep-rgb);
    --gl-gold-line-rgb: var(--gl-club-deep-rgb);
    --gl-gold-glow-rgb: 201,162,39;

    --gl-shadow-rgb: 15,27,45;
    --gl-shadow-k: .25;

    --gl-input-bg: #ffffff;
    --gl-black-surface: #f6f8fb;
    --gl-text-shadow-k: 0;

    --gl-dk-060a08-rgb: 255,255,255;
    --gl-dk-08080a-rgb: 255,255,255;
    --gl-dk-080c0a-rgb: 255,255,255;
    --gl-dk-090d0b-rgb: 255,255,255;
    --gl-dk-0a0908-rgb: 255,255,255;
    --gl-dk-0a0a0c: #ffffff;
    --gl-dk-0a0a0c-rgb: 255,255,255;
    --gl-dk-0a0a0f: #ffffff;
    --gl-dk-0b0f0d-rgb: 255,255,255;
    --gl-dk-0b111b: #ffffff;
    --gl-dk-0c0b09: #ffffff;
    --gl-dk-0c0b09-rgb: 255,255,255;
    --gl-dk-0c0d10: #ffffff;
    --gl-dk-0c0d11: #ffffff;
    --gl-dk-0c0d11-rgb: 255,255,255;
    --gl-dk-0d0c0a: #ffffff;
    --gl-dk-0d0d0e: #ffffff;
    --gl-dk-0d0d0f: #ffffff;
    --gl-dk-0e0c09: #ffffff;
    --gl-dk-0e0d0a: #ffffff;
    --gl-dk-0f0f0f: #ffffff;
    --gl-dk-0f0f0f-rgb: 255,255,255;
    --gl-dk-100e0a: #ffffff;
    --gl-dk-101012: #ffffff;
    --gl-dk-101216: #ffffff;
    --gl-dk-110f0b: #ffffff;
    --gl-dk-111113: #ffffff;
    --gl-dk-121316: #ffffff;
    --gl-dk-121318: #ffffff;
    --gl-dk-121318-rgb: 255,255,255;
    --gl-dk-12161e-rgb: 255,255,255;
    --gl-dk-131315: #ffffff;
    --gl-dk-14110a: #ffffff;
    --gl-dk-141319-rgb: 255,255,255;
    --gl-dk-141414: #ffffff;
    --gl-dk-14141a: #ffffff;
    --gl-dk-14141a-rgb: 255,255,255;
    --gl-dk-14161c: #ffffff;
    --gl-dk-15151a: #ffffff;
    --gl-dk-16161a: #ffffff;
    --gl-dk-16181e: #ffffff;
    --gl-dk-17150f: #ffffff;
    --gl-dk-17151b: #ffffff;
    --gl-dk-17181b: #ffffff;
    --gl-dk-19150f: #ffffff;
    --gl-dk-1a1610: #ffffff;
    --gl-dk-1a1a1a: #ffffff;
    --gl-dk-1b1710: #ffffff;
    --gl-dk-1c170c: #ffffff;
    --gl-dk-1c1810: #ffffff;
    --gl-dk-1c1a22: #f6f8fb;
    --gl-dk-1c1c1e: #ffffff;
    --gl-dk-1c1f24: #f6f8fb;
    --gl-dk-1c1f26: #f6f8fb;
    --gl-dk-1d1810: #ffffff;
    --gl-dk-1d1b16: #ffffff;
    --gl-dk-1e1910: #ffffff;
    --gl-dk-1e1e1e-rgb: 255,255,255;
    --gl-dk-201e26: #f6f8fb;
    --gl-dk-242424-rgb: 246,248,251;
    --gl-dk-2a2312: #f6f8fb;
    --gl-dk-2b2b2b: #f6f8fb;
    --gl-on-gold-000000: #ffffff;
    --gl-on-gold-0a0a0c: #ffffff;
    --gl-on-gold-1a1a1a: #ffffff;

    /* Coloured text, darkened for white backgrounds */
    --gl-t-06210f: #06210f;
    --gl-t-1877f2: #0d6fed;
    --gl-t-1a1a2e: #1a1a2e;
    --gl-t-1e88e5: #1775c8;
    --gl-t-26c6da: #187f8c;
    --gl-t-2d2205: #2d2205;
    --gl-t-2ecc71: #1e854a;
    --gl-t-2f7d2f: #2f7d2f;
    --gl-t-3498db: #207ab7;
    --gl-t-39d98a: #19834f;
    --gl-t-3a2c06: #3a2c06;
    --gl-t-3ddc84: #188649;
    --gl-t-3fae59: #308544;
    --gl-t-42a5f5: #0b75cb;
    --gl-t-42d67b: #1d8645;
    --gl-t-4caf50: #39843c;
    --gl-t-4caf7d: #38815c;
    --gl-t-4da3ff: #006fe6;
    --gl-t-4fd1c5: #217f77;
    --gl-t-57c785: #2b824f;
    --gl-t-58616c: #58616c;
    --gl-t-5865f2: #5865f2;
    --gl-t-63ff63: #008700;
    --gl-t-64d66a: #238328;
    --gl-t-6fa8dc: #2e78bc;
    --gl-t-6fcf6f: #2c832c;
    --gl-t-6fdc8c: #20833a;
    --gl-t-72b7ff: #0071e7;
    --gl-t-7ad67a: #298429;
    --gl-t-7dbcff: #0070e8;
    --gl-t-7df0bd: #0f834f;
    --gl-t-7ec8ef: #167aaf;
    --gl-t-7ed88b: #288536;
    --gl-t-7ee08a: #20862d;
    --gl-t-7fb8e0: #2b79b0;
    --gl-t-7fc0ff: #0072e0;
    --gl-t-7fe08a: #20832b;
    --gl-t-8a6d12: #8a6d12;
    --gl-t-8fe3a9: #218540;
    --gl-t-9fd8ff: #0077c8;
    --gl-t-a5d6a7: #3c833e;
    --gl-t-a8c8ee: #2975cf;
    --gl-t-b03030: #b03030;
    --gl-t-b04040: #b04040;
    --gl-t-b388ff: #8946ff;
    --gl-t-b9d1ff: #1b69ff;
    --gl-t-bfc8d6: #607696;
    --gl-t-cba6f7: #9448ef;
    --gl-t-d6e2f5: #3671ce;
    --gl-t-d7b24a: #8d701f;
    --gl-t-e0332f: #df2a26;
    --gl-t-e0333f: #df2a37;
    --gl-t-e05353: #da3030;
    --gl-t-e05555: #da3232;
    --gl-t-e0605a: #d8372f;
    --gl-t-e08080: #d03e3e;
    --gl-t-e0b23c: #906e17;
    --gl-t-e5636b: #dc2f39;
    --gl-t-e57373: #d93232;
    --gl-t-e74c3c: #df2e1b;
    --gl-t-ee0707: #e90707;
    --gl-t-f0a0a0: #de2d2d;
    --gl-t-f0a63a: #a3660c;
    --gl-t-f0c000: #8a6e00;
    --gl-t-f0c94b: #8c6e0c;
    --gl-t-f0cf6b: #90700f;
    --gl-t-f2c744: #8e6d0a;
    --gl-t-f2c94c: #906f0a;
    --gl-t-f44336: #e51b0d;
    --gl-t-f6dc8a: #8f700b;
    --gl-t-f6e6a8: #8b720e;
    --gl-t-f6e6b0: #8d7010;
    --gl-t-fa5c5c: #e90707;
    --gl-t-ff4500: #d63a00;
    --gl-t-ff5a5a: #e90000;
    --gl-t-ff6b35: #d83a00;
    --gl-t-ff6b6b: #ea0000;
    --gl-t-ff7272: #e70000;
    --gl-t-ff7373: #e80000;
    --gl-t-ff8a80: #e61200;
    --gl-t-ff8a8a: #eb0000;
    --gl-t-ff9c9c: #e80000;
    --gl-t-ffb3b3: #eb0000;
    --gl-t-ffb74d: #a96500;
    --gl-t-ffc107: #916d00;
    --gl-t-ffd54f: #916f00;
    --gl-t-ffd700: #857000;
    --gl-t-ffd76a: #936b00;
    --gl-t-fff1c1-a75: #937000;
    --gl-t-fff1c1-a8: #907000;
    --gl-t-fff3c4: #8c6f00;

    --gl-t-f2564a: #e42010;
    --gl-t-409cff: #0070e8;
    /* Light-grey text, as navy at equal emphasis */
    --gl-n-888888: #7f858f;
    --gl-n-999999: #6f7681;
    --gl-n-bbbbbb: #4f5865;
    --gl-n-bdbdbd: #4d5663;
    --gl-n-c9c9c9: #424b59;
    --gl-n-c9d0d7: #3b4554;
    --gl-n-cccccc: #3f4957;
    --gl-n-d0d0d0: #3b4554;
    --gl-n-dddddd: #2f3949;
    --gl-n-e9efe9: #222d3d;
    --gl-n-eeeeee: #1f2a3b;
    --gl-n-f2f1ee: #1d2839;
    --gl-n-f2f2f2: #1b2738;
    --gl-dk-080809-rgb: 255,255,255;
    --gl-dk-0a0a0b: #ffffff;
    --gl-dk-1b1a17: #ffffff;
    --gl-dk-0a0a0a-rgb: 255,255,255;
    --gl-t-fff8e0: #8e6e00;
}

/* MudBlazor reads these for the app bar, drawer, popovers and menus.
   design-system.css pins the drawer ones with !important, hence the
   !important here too (this selector is more specific, so it wins).
   (Public pages never get these: they carry .gl-dark-page, and they
   don't load MudBlazor's theme, so these are normally undefined there.) */
:root[data-theme="light"]:not(:has(.gl-dark-page)) {
    --mud-palette-background: #eef1f5 !important;
    --mud-palette-surface: #ffffff !important;
    --mud-palette-appbar-background: #ffffff !important;
    --mud-palette-appbar-text: var(--gl-club-ink) !important;
    --mud-palette-drawer-background: #ffffff !important;
    --mud-palette-drawer-text: #334155 !important;
    --mud-palette-drawer-icon: #334155 !important;
    --mud-palette-text-primary: #0f1b2d !important;
    --mud-palette-text-secondary: #526075 !important;
    --mud-palette-action-default: #526075 !important;
    --mud-palette-lines-default: #dfe5ec !important;
    --mud-palette-divider: #dfe5ec !important;
    --mud-palette-primary: var(--gl-club-deep) !important;
}

/* Pages marked .gl-dark-page (public pages etc.) keep the dark stadium background. */
:root[data-theme="light"]:not(:has(.gl-dark-page)) body {
    background-image: none;
    background-color: #eef1f5;
}

/* app.css paints the player profile page solid black; use the light page colour instead. */
:root[data-theme="light"]:not(:has(.gl-dark-page)) body.player-profile-active {
    background-color: #eef1f5 !important;
}

/* Metallic gradient headings (text clipped to a gradient). Their bright
   dark-mode metals wash out on white, so light mode swaps in deeper ones.
   Class-only selectors still beat each page's scoped rule on specificity. */
:root[data-theme="light"]:not(:has(.gl-dark-page)) .tr-title,
:root[data-theme="light"]:not(:has(.gl-dark-page)) .tr-honours-number,
:root[data-theme="light"]:not(:has(.gl-dark-page)) .tr-case-count,
:root[data-theme="light"]:not(:has(.gl-dark-page)) .fv-title,
:root[data-theme="light"]:not(:has(.gl-dark-page)) .fv-item-leading .fv-rank-number,
:root[data-theme="light"]:not(:has(.gl-dark-page)) .wl-title,
:root[data-theme="light"]:not(:has(.gl-dark-page)) .presets-title,
:root[data-theme="light"]:not(:has(.gl-dark-page)) .kd-title {
    background: linear-gradient(180deg, #c9a227 0%, #9c7a1c 50%, #6f5310 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

:root[data-theme="light"]:not(:has(.gl-dark-page)) .fc-hero-title,
:root[data-theme="light"]:not(:has(.gl-dark-page)) .fc-hub-title {
    background: linear-gradient(180deg, #6b7684 0%, #3e4854 55%, #252c35 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Kit Designer 3D stage: the WebGL canvas is transparent, so this is the
   backdrop the kit is shown against. Light mode gets a pale studio sweep
   instead of the dark spotlight; the gold sunburst stays as a faint accent. */
:root[data-theme="light"]:not(:has(.gl-dark-page)) .kd-stage {
    background:
        radial-gradient(70% 45% at 50% 42%, #ffffff, transparent 70%),
        radial-gradient(120% 70% at 50% 110%, rgba(201,162,39,.14), transparent 60%),
        linear-gradient(180deg, #f7f9fb 0%, #dde4ec 100%);
    box-shadow:
        0 0 0 1px #dfe5ec,
        0 30px 60px -40px rgba(15,27,45,.35);
}

/* Per-theme copies of the same element (e.g. the Lineup pitch image, which
   has a daylight version). !important because the elements' own scoped
   rules set display too. Only for block-level elements. */
.gl-light-only { display: none !important; }
:root[data-theme="light"]:not(:has(.gl-dark-page)) .gl-light-only { display: block !important; }
:root[data-theme="light"]:not(:has(.gl-dark-page)) .gl-dark-only { display: none !important; }

/* ==========================================================
   CLUB COLOURS (light theme only)
   MainLayout writes these from the club's crest colours via
   Services/ClubThemePalette.cs (html:root, so it outranks the defaults
   here). The defaults are plain Stadium White: white bar and menu, navy
   ink and accent, for accounts without a club.
   ========================================================== */
:root {
    --gl-club-c1: #ffffff;
    --gl-club-end: #ffffff;
    --gl-club-ink: #0f1b2d;
    --gl-club-ink-rgb: 15,27,45;
    --gl-club-deep: #13294b;
    --gl-club-deep-rgb: 19,41,75;
    --gl-club-gold: #90700f;
    --gl-club-menu-c1: #ffffff;
    --gl-club-menu-end: #ffffff;
    --gl-club-menu-ink: #0f1b2d;
    --gl-club-menu-ink-rgb: 15,27,45;
    --gl-club-menu-gold: #90700f;
}

/* Gradient app bar. Inside it, ink and gold tokens become the club's
   readable ink, so the club name, coins, icons and badges follow. */
:root[data-theme="light"]:not(:has(.gl-dark-page)) .mud-appbar {
    background: linear-gradient(100deg, var(--gl-club-c1) 0%, var(--gl-club-c1) 30%, var(--gl-club-end) 100%) !important;
    color: var(--gl-club-ink);
    --gl-ink: var(--gl-club-ink);
    --gl-ink-rgb: var(--gl-club-ink-rgb);
    --gl-gold-text: var(--gl-club-ink);
    --gl-gold-tint-rgb: var(--gl-club-ink-rgb);
    --gl-gold-line-rgb: var(--gl-club-ink-rgb);
    box-shadow: 0 1px 0 rgba(15,27,45,.08), 0 6px 18px -10px rgba(15,27,45,.35);
}

/* MudBlazor icon buttons (the menu toggle) take the palette's app-bar text,
   but MainLayout's scoped rules force them too; match both. */
:root[data-theme="light"]:not(:has(.gl-dark-page)) .mud-appbar .mud-icon-button,
:root[data-theme="light"]:not(:has(.gl-dark-page)) .mud-appbar .mud-icon-root {
    color: var(--gl-club-ink) !important;
}

/* The dark theme's gold hairline under the bar; the gradient replaces it. */
:root[data-theme="light"]:not(:has(.gl-dark-page)) .mud-appbar::after {
    display: none;
}

/* Nav drawer: the same club colours at reduced strength (ClubThemePalette.
   MenuStrength), running top to bottom, with its own readable ink. */
:root[data-theme="light"]:not(:has(.gl-dark-page)) .mud-drawer.esm-nav-drawer {
    background: linear-gradient(180deg, var(--gl-club-menu-c1) 0%, var(--gl-club-menu-end) 100%) !important;
    color: var(--gl-club-menu-ink);
    --gl-ink: var(--gl-club-menu-ink);
    --gl-ink-rgb: var(--gl-club-menu-ink-rgb);
    --gl-gold-text: var(--gl-club-menu-ink);
    --gl-gold-tint-rgb: var(--gl-club-menu-ink-rgb);
    --gl-gold-line-rgb: var(--gl-club-menu-ink-rgb);
    --mud-palette-drawer-text: var(--gl-club-menu-ink) !important;
    /* VIP menu items: gold that reads on this club's colour (see ClubThemePalette.Gold). */
    --gl-t-f0cf6b: var(--gl-club-menu-gold);
    --mud-palette-drawer-icon: var(--gl-club-menu-ink) !important;
    border-right: 1px solid rgba(var(--gl-club-menu-ink-rgb), .08);
}

/* Active menu item: a translucent ink wash with an edge marker, instead of
   the dark theme's gold pill (which would clash with every club colour). */
:root[data-theme="light"]:not(:has(.gl-dark-page)) .mud-drawer.esm-nav-drawer .mud-nav-link.active,
:root[data-theme="light"]:not(:has(.gl-dark-page)) .mud-drawer.esm-nav-drawer .mud-nav-link.mud-selected {
    background: rgba(var(--gl-club-menu-ink-rgb), .16) !important;
    color: var(--gl-club-menu-ink) !important;
    box-shadow: inset 3px 0 0 var(--gl-club-menu-ink);
}

:root[data-theme="light"]:not(:has(.gl-dark-page)) .mud-drawer.esm-nav-drawer .mud-nav-link.active .mud-icon-root,
:root[data-theme="light"]:not(:has(.gl-dark-page)) .mud-drawer.esm-nav-drawer .mud-nav-link.mud-selected .mud-icon-root {
    color: var(--gl-club-menu-ink) !important;
}

/* Light inputs need an edge to stand out from white cards. Public pages stay dark. */
:root[data-theme="light"]:not(:has(.gl-dark-page)) .esm-input:not(.gl-force-dark *) {
    box-shadow: inset 0 0 0 1px #cfd8e3;
}

/* Sun/moon toggle in the app bar: show the icon for the OTHER mode. */
.gl-theme-toggle .gl-theme-sun { display: inline-flex; }
.gl-theme-toggle .gl-theme-moon { display: none; }
:root[data-theme="light"]:not(:has(.gl-dark-page)) .gl-theme-toggle .gl-theme-sun { display: none; }
:root[data-theme="light"]:not(:has(.gl-dark-page)) .gl-theme-toggle .gl-theme-moon { display: inline-flex; }

/* ==========================================================
   ONE-TIME "NEW: LIGHT THEME" TIP (wwwroot/js/theme.js)
   Fixed colours on purpose: a navy card with a gold edge reads on the
   dark bar and on every club-coloured light bar alike.
   ========================================================== */
.gl-theme-tip {
    position: fixed;
    z-index: 2000;
    width: min(280px, calc(100vw - 24px));
    padding: 14px 16px 12px;
    border-radius: 12px;
    background: #0f1b2d;
    color: #ffffff;
    border: 1px solid #d4af37;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    font-size: .85rem;
    line-height: 1.45;
    animation: gl-tip-in .25s ease-out;
}

/* Arrow pointing up at the button; --gl-tip-arrow-x is set by the script. */
.gl-theme-tip::before {
    content: "";
    position: absolute;
    top: -7px;
    left: calc(var(--gl-tip-arrow-x, 50%) - 7px);
    width: 12px;
    height: 12px;
    background: #0f1b2d;
    border-left: 1px solid #d4af37;
    border-top: 1px solid #d4af37;
    transform: rotate(45deg);
}

.gl-theme-tip-title {
    margin: 0 0 4px;
    font-weight: 700;
    color: #f0cf6b;
    font-size: .9rem;
}

.gl-theme-tip-text {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, .88);
}

.gl-theme-tip-btn {
    display: block;
    margin-left: auto;
    padding: 6px 14px;
    border: 0;
    border-radius: 8px;
    background: #d4af37;
    color: #111111;
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
}

.gl-theme-tip-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Card variant pointing left (Feature Votes tip, next to the side menu);
   --gl-tip-arrow-y is set by the script. */
.gl-theme-tip.gl-theme-tip--left::before {
    top: calc(var(--gl-tip-arrow-y, 28px) - 7px);
    left: -7px;
    border-top: 0;
    border-bottom: 1px solid #d4af37;
}

/* Card above its target, arrow pointing down. */
.gl-theme-tip.gl-theme-tip--up::before {
    top: auto;
    bottom: -7px;
    border-top: 0;
    border-left: 0;
    border-right: 1px solid #d4af37;
    border-bottom: 1px solid #d4af37;
}

/* Welcome tour (welcomeTour.js): a little wider for its longer text. */
.gl-theme-tip.gl-tour-tip {
    width: min(320px, calc(100vw - 24px));
}

/* "1 of 3" on the welcome tour. */
.gl-tour-count {
    margin: 0 0 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .65;
}

.gl-theme-tip-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.gl-theme-tip-actions .gl-theme-tip-btn {
    margin-left: 0;
}

.gl-theme-tip-btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, .8);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

/* Pulsing gold ring on whatever a tip points at (any element). */
.gl-tip-glow {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    box-shadow: 0 0 0 2px #d4af37, 0 0 14px 4px rgba(212, 175, 55, .55);
    animation: gl-tip-glow 1.6s ease-in-out infinite;
}

/* Pulsing gold ring on the theme button while the tip is open. */
.gl-theme-toggle.gl-theme-toggle-glow {
    position: relative;
    box-shadow: 0 0 0 2px #d4af37, 0 0 14px 4px rgba(212, 175, 55, .55);
    animation: gl-tip-glow 1.6s ease-in-out infinite;
}

@keyframes gl-tip-glow {
    0%, 100% { box-shadow: 0 0 0 2px #d4af37, 0 0 10px 2px rgba(212, 175, 55, .45); }
    50% { box-shadow: 0 0 0 2px #f0cf6b, 0 0 20px 8px rgba(212, 175, 55, .7); }
}

@keyframes gl-tip-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-theme-tip,
    .gl-tip-glow,
    .gl-theme-toggle.gl-theme-toggle-glow {
        animation: none;
    }
}

/* ==========================================================
   LANGUAGE SWITCH (wwwroot/js/lang.js): a dropdown. The button shows the
   current language (flag + code + caret); the menu lists both, the
   current one ticked. In the app bar the button follows the bar's ink (so
   it works on dark, light and club-coloured bars); on public pages it
   floats top right. The menu is a fixed dark card in every theme, like
   the tip cards above.
   ========================================================== */
.gl-lang-toggle {
    position: relative;
    flex-shrink: 0;
}

.gl-lang-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 9px 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(var(--gl-ink-rgb), .25);
    background: rgba(var(--gl-ink-rgb), .06);
    color: var(--gl-ink);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
}

.gl-lang-current:hover,
.gl-lang-toggle.is-open .gl-lang-current {
    background: rgba(var(--gl-ink-rgb), .14);
}

.gl-lang-current:focus-visible,
.gl-lang-item:focus-visible {
    outline: 2px solid var(--gl-gold);
    outline-offset: 2px;
}

.gl-lang-caret {
    opacity: .7;
    transition: transform .15s ease;
}

.gl-lang-toggle.is-open .gl-lang-caret {
    transform: rotate(180deg);
}

.gl-lang-current img,
.gl-lang-item img {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

.gl-lang-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1400;
    min-width: 160px;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, .55);
    background: #14171f;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

.gl-lang-list[hidden] {
    display: none;
}

.gl-lang-item {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* the app bar centres button content */
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, .88);
    font: inherit;
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
}

.gl-lang-item:hover {
    background: rgba(255, 255, 255, .08);
}

.gl-lang-item.is-active {
    color: #ffffff;
    font-weight: 700;
    cursor: default;
}

.gl-lang-item.is-active:hover {
    background: transparent;
}

.gl-lang-check {
    margin-left: auto;
    color: #d4af37;
}

.gl-lang-toggle--landing {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 14px;
    z-index: 1000;
}

.gl-lang-toggle--landing .gl-lang-current {
    background: rgba(10, 10, 12, .55);
    border-color: rgba(255, 255, 255, .25);
    color: #ffffff;
    backdrop-filter: blur(6px);
}

.gl-lang-toggle--landing .gl-lang-current:hover,
.gl-lang-toggle--landing.is-open .gl-lang-current {
    background: rgba(10, 10, 12, .75);
}

/* Phones and narrow windows: the app bar has no room for it; the choice is
   in the account menu there instead (UserAccountMenu.razor, app.css). */
@media (max-width: 900px) {
    .gl-lang-toggle:not(.gl-lang-toggle--landing) {
        display: none;
    }
}

@media (max-width: 600px) {

    .gl-lang-toggle:not(.gl-lang-toggle--landing) .gl-lang-current {
        height: 30px;
        padding: 0 5px;
        gap: 3px;
    }

    .gl-lang-toggle:not(.gl-lang-toggle--landing) .gl-lang-code {
        display: none;
    }

    .gl-lang-toggle:not(.gl-lang-toggle--landing) .gl-lang-caret {
        width: 7px;
    }
}