@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');
/* Design Tokens - CSS Custom Properties */

:root {
    /* Base Colors */
    --white: #FFFFFF;
    --black: #1f1f1f;

    /* Purples (higher number = darker) */
    --purple-1000: #2C0A3D;
    --purple-900: #31144A;
    --purple-800: #3D195B;
    --purple-700: #432468;
    --purple-600: #4A2E6C;
    --purple-300: #75559D;
    --purple-200: #963CFF;

    /* Reds */
    --red: #E90052;

    /* Blues (higher number = darker) */
    --blue-500: #04F5FF;
    --blue-700: #03c2b4;

    /* Greens (higher number = darker) */
    --green-300: #84fab0;
    --green-600: #00B960;

    /* Yellows */
    --yellow: #EBFF01;
    --orange: #CC8200;

    /* Greys */
    --grey-100: #EAEAEA;
    --grey-200: #DADCE0;
    --grey-300: #CECECE;
    --grey-500: #6C757D;

    /* Medals */
    --gold: #C9B037;
    --silver: #B4B4B4;
    --bronze: #6A3805;

    /* Transparent Black (for shadows and overlays) */
    --black-alpha-15: rgba(0, 0, 0, 0.15);
    --black-alpha-20: rgba(0, 0, 0, 0.2);
    --black-alpha-25: rgba(0, 0, 0, 0.25);
    --black-alpha-35: rgba(0, 0, 0, 0.35);
    --black-alpha-50: rgba(0, 0, 0, 0.5);
    --black-alpha-60: rgba(0, 0, 0, 0.6);

    /* Transparent White (for highlights and borders) */
    --white-alpha-02: rgba(255, 255, 255, 0.02);
    --white-alpha-05: rgba(255, 255, 255, 0.05);
    --white-alpha-08: rgba(255, 255, 255, 0.08);
    --white-alpha-10: rgba(255, 255, 255, 0.1);
    --white-alpha-15: rgba(255, 255, 255, 0.15);
    --white-alpha-30: rgba(255, 255, 255, 0.3);

    /* Transparent Purples (for overlays and borders) */
    --purple-800-alpha-25: rgba(61, 25, 91, 0.25);
    --purple-900-alpha-80: rgba(49, 20, 74, 0.8);

    /* Transparent Yellow (for animations) - matches --yellow: #EBFF01 */
    --yellow-alpha-70: rgba(235, 255, 1, 0.7);
    --yellow-alpha-00: rgba(235, 255, 1, 0);

    /* Transparent Blue (for animations) */
    --blue-700-alpha-70: rgba(3, 194, 180, 0.7);
    --blue-700-alpha-00: rgba(3, 194, 180, 0);

    /* Transparent Green (for animations) */
    --green-600-alpha-70: rgba(0, 185, 96, 0.7);
    --green-600-alpha-00: rgba(0, 185, 96, 0);

    /* Transparent Red (for animations) */
    --red-alpha-70: rgba(233, 0, 82, 0.7);
    --red-alpha-00: rgba(233, 0, 82, 0);

    /* Spacing Scale (based on 0.25rem = 4px) */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* Border Radiuses */
    --bs-border-radius: 20px;
    --bs-border-radius-sm: 20px;
    --bs-border-radius-lg: 20px;
    --bs-border-radius-xl: 20px;
    --bs-border-radius-xxl: 20px;

    /* Breakpoints (documented as variables for reference) */
    --breakpoint-phone-small: 480px;
    --breakpoint-phone: 576px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 992px;
}

/* ============================================
   BREAKPOINTS (Reference Only)
   Note: CSS custom properties cannot be used in media queries.
   These values are documented here for consistency.
   ============================================

   --breakpoint-phone-small: 480px  (Extra small phones)
   --breakpoint-phone: 576px        (Standard phones)
   --breakpoint-tablet: 768px       (Tablets)
   --breakpoint-desktop: 992px      (Desktop)

   Mobile-First Approach:
   - Base styles: Extra-small mobile (< 480px)
   - @media (min-width: 480px): Small phone and up
   - @media (min-width: 576px): Phone and up
   - @media (min-width: 768px): Tablet and up
   - @media (min-width: 992px): Desktop and up
   ============================================ */
/* Typography Utilities - Complete set */

/* ============================================
   FONT SIZES
   ============================================ */

.text-2xs {
    font-size: 0.65rem;
}

.text-xs {
    font-size: 0.7rem;
}

.text-sm {
    font-size: 0.75rem;
}

.text-base {
    font-size: 1rem;
}

.text-lg {
    font-size: 1.125rem;
}

.text-xl {
    font-size: 1.25rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.text-3xl {
    font-size: 1.875rem;
}

.text-4xl {
    font-size: 2.25rem;
}

.text-5xl {
    font-size: 3rem;
}

/* ============================================
   FONT WEIGHTS
   ============================================ */

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

/* ============================================
   FONT STYLE
   ============================================ */

.italic {
    font-style: italic;
}

.not-italic {
    font-style: normal;
}

/* ============================================
   FONT FAMILIES
   ============================================ */

.font-mono {
    font-family: monospace;
}

.font-sans {
    font-family: 'Poppins', sans-serif;
}

/* ============================================
   LINE HEIGHTS
   ============================================ */

.leading-none {
    line-height: 1;
}

.leading-tight {
    line-height: 1.25;
}

.leading-snug {
    line-height: 1.375;
}

.leading-normal {
    line-height: 1.5;
}

.leading-relaxed {
    line-height: 1.625;
}

.leading-loose {
    line-height: 2;
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

/* ============================================
   TEXT TRANSFORM
   ============================================ */

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

.normal-case {
    text-transform: none;
}

/* ============================================
   TEXT DECORATION
   ============================================ */

.underline {
    text-decoration: underline;
}

.line-through {
    text-decoration: line-through;
}

.no-underline {
    text-decoration: none;
}

/* ============================================
   LETTER SPACING
   ============================================ */

.tracking-tighter {
    letter-spacing: -0.05em;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-normal {
    letter-spacing: 0;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

/* ============================================
   WHITESPACE & WORD BREAKING
   ============================================ */

.whitespace-normal {
    white-space: normal;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.whitespace-pre {
    white-space: pre;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}

.whitespace-pre-line {
    white-space: pre-line;
}

.break-word {
    white-space: normal !important;
    word-wrap: break-word;
}

.word-break-all {
    word-break: break-all;
}

.break-normal {
    word-break: normal;
    overflow-wrap: normal;
}

/* ============================================
   TEXT OVERFLOW
   ============================================ */

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-ellipsis {
    text-overflow: ellipsis;
}

.text-clip {
    text-overflow: clip;
}

/* ============================================
   VERTICAL ALIGNMENT
   ============================================ */

.align-baseline {
    vertical-align: baseline;
}

.align-top {
    vertical-align: top;
}

.align-middle {
    vertical-align: middle;
}

.align-bottom {
    vertical-align: bottom;
}

.align-text-top {
    vertical-align: text-top;
}

.align-text-bottom {
    vertical-align: text-bottom;
}
/* Colour Utilities - Complete palette using design tokens from variables.css */

/* ============================================
   TEXT COLOURS
   ============================================ */

/* White/Black */
.text-white {
    color: var(--white);
}

.text-black {
    color: var(--black);
}

/* Purples */
.text-purple-200 {
    color: var(--purple-200);
}

.text-purple-300 {
    color: var(--purple-300);
}

.text-purple-600 {
    color: var(--purple-600);
}

.text-purple-700 {
    color: var(--purple-700);
}

.text-purple-800 {
    color: var(--purple-800);
}

.text-purple-900 {
    color: var(--purple-900);
}

.text-purple-1000 {
    color: var(--purple-1000) !important;
}

/* Blues */
.text-blue-500 {
    color: var(--blue-500);
}

.text-blue-700 {
    color: var(--blue-700);
}

/* Greens */
.text-green-300 {
    color: var(--green-300);
}

.text-green-600 {
    color: var(--green-600);
}

/* Reds/Yellows/Orange */
.text-red {
    color: var(--red) !important;
}

.text-yellow {
    color: var(--yellow);
}

.text-orange {
    color: var(--orange);
}

/* Greys */
.text-grey-100 {
    color: var(--grey-100);
}

.text-grey-200 {
    color: var(--grey-200);
}

.text-grey-300 {
    color: var(--grey-300);
}

.text-grey-500 {
    color: var(--grey-500);
}

.text-muted {
    color: var(--grey-500);
}

/* Medals */
.text-gold {
    color: var(--gold);
}

.text-silver {
    color: var(--silver);
}

.text-bronze {
    color: var(--bronze);
}

/* ============================================
   BACKGROUND COLOURS
   ============================================ */

/* White/Black */
.bg-white {
    background-color: var(--white);
}

.bg-black {
    background-color: var(--black);
}

.bg-transparent {
    background-color: transparent;
}

/* Purples */
.bg-purple-200 {
    background-color: var(--purple-200);
}

.bg-purple-300 {
    background-color: var(--purple-300);
}

.bg-purple-600 {
    background-color: var(--purple-600);
}

.bg-purple-700 {
    background-color: var(--purple-700);
}

.bg-purple-800 {
    background-color: var(--purple-800);
}

.bg-purple-900 {
    background-color: var(--purple-900);
}

.bg-purple-1000 {
    background-color: var(--purple-1000);
}

.bg-purple-gradient {
    background: linear-gradient(135deg, var(--purple-300) 0%, var(--purple-900) 100%);
}

/* Blues */
.bg-blue-500 {
    background-color: var(--blue-500);
}

.bg-blue-700 {
    background-color: var(--blue-700);
}

/* Greens */
.bg-green-300 {
    background-color: var(--green-300);
}

.bg-green-600 {
    background-color: var(--green-600);
}

/* Reds/Yellows/Orange */
.bg-red {
    background-color: var(--red);
}

.bg-yellow {
    background-color: var(--yellow);
}

.bg-orange {
    background-color: var(--orange);
}

/* Greys */
.bg-grey-100 {
    background-color: var(--grey-100);
}

.bg-grey-200 {
    background-color: var(--grey-200);
}

.bg-grey-300 {
    background-color: var(--grey-300);
}

.bg-grey-500 {
    background-color: var(--grey-500);
}

/* Medals */
.bg-gold {
    background-color: var(--gold);
}

.bg-silver {
    background-color: var(--silver);
}

.bg-bronze {
    background-color: var(--bronze);
}
/* Border Utilities - Complete set using design tokens */

/* ============================================
   BORDER COLOURS
   ============================================ */

/* White/Black */
.border-white {
    border-color: var(--white);
}

.border-black {
    border-color: var(--black);
}

/* Purples */
.border-purple-200 {
    border-color: var(--purple-200);
}

.border-purple-300 {
    border-color: var(--purple-300);
}

.border-purple-600 {
    border-color: var(--purple-600);
}

.border-purple-700 {
    border-color: var(--purple-700);
}

.border-purple-800 {
    border-color: var(--purple-800);
}

.border-purple-900 {
    border-color: var(--purple-900);
}

.border-purple-1000 {
    border-color: var(--purple-1000);
}

/* Blues */
.border-blue-500 {
    border-color: var(--blue-500);
}

.border-blue-700 {
    border-color: var(--blue-700);
}

/* Greens */
.border-green-300 {
    border-color: var(--green-300);
}

.border-green-600 {
    border-color: var(--green-600);
}

/* Other colours */
.border-red {
    border-color: var(--red);
}

.border-yellow {
    border-color: var(--yellow);
}

.border-orange {
    border-color: var(--orange);
}

/* Greys */
.border-grey-100 {
    border-color: var(--grey-100);
}

.border-grey-200 {
    border-color: var(--grey-200);
}

.border-grey-300 {
    border-color: var(--grey-300);
}

.border-grey-500 {
    border-color: var(--grey-500);
}

/* Transparent */
.border-transparent {
    border-color: transparent;
}

/* ============================================
   BORDER WIDTHS
   ============================================ */

.border-0 {
    border-width: 0;
}

.border-1 {
    border-width: 1px;
}

.border-2 {
    border-width: 2px;
}

.border-3 {
    border-width: 3px;
}

.border-4 {
    border-width: 4px;
}

/* ============================================
   BORDER STYLES
   ============================================ */

.border-solid {
    border-style: solid;
}

.border-dashed {
    border-style: dashed;
}

.border-dotted {
    border-style: dotted;
}

.border-none {
    border-style: none;
}

/* ============================================
   BORDER RADIUS
   ============================================ */

.rounded-none {
    border-radius: 0;
}

.rounded-sm {
    border-radius: 4px;
}

.rounded {
    border-radius: 8px;
}

.rounded-md {
    border-radius: 12px;
}

.rounded-lg {
    border-radius: 16px;
}

.rounded-xl {
    border-radius: 20px;
}

.rounded-2xl {
    border-radius: 24px;
}

.rounded-full {
    border-radius: 9999px;
}

/* Individual corner radiuses */
.rounded-t {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.rounded-b {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.rounded-l {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.rounded-r {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
/* Sizing Utilities - Width and Height classes */

/* Percentage Widths - Complete scale for common layout splits */
.w-10 {
    width: 10%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-30 {
    width: 30%;
}

.w-33 {
    width: 33.333%;
}

.w-35 {
    width: 35%;
}

.w-40 {
    width: 40%;
}

.w-45 {
    width: 45%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-65 {
    width: 65%;
}

.w-66 {
    width: 66.666%;
}

.w-70 {
    width: 70%;
}

.w-75 {
    width: 75%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-100 {
    width: 100%;
}

/* Heights */
.h-screen {
    height: 100vh;
}

/* Max Heights */
.mh-600 {
    max-height: 600px;
}

/* Max Widths */
.max-w-60 {
    max-width: 60px;
}
/* Spacing Utilities - Margin and Padding */
/* Scale: 0, 1 (0.25rem), 2 (0.5rem), 3 (1rem), 4 (1.5rem), 5 (3rem) */

/* ============================================
   MARGIN - All Sides
   ============================================ */

.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }
.m-auto { margin: auto; }

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mt-auto { margin-top: auto; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mb-auto { margin-bottom: auto; }

/* Margin Left */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.ml-4 { margin-left: 1.5rem; }
.ml-5 { margin-left: 3rem; }
.ml-auto { margin-left: auto; }

/* Margin Right */
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.mr-4 { margin-right: 1.5rem; }
.mr-5 { margin-right: 3rem; }
.mr-auto { margin-right: auto; }

/* Margin X (Left + Right) */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-5 { margin-left: 3rem; margin-right: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Y (Top + Bottom) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* ============================================
   PADDING - All Sides
   ============================================ */

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

/* Padding Top */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }

/* Padding Left */
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 1rem; }
.pl-4 { padding-left: 1.5rem; }
.pl-5 { padding-left: 3rem; }

/* Padding Right */
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 1rem; }
.pr-4 { padding-right: 1.5rem; }
.pr-5 { padding-right: 3rem; }

/* Padding X (Left + Right) */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }

/* Padding Y (Top + Bottom) */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }

/* ============================================
   GAP (for Flexbox/Grid)
   ============================================ */

.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }
/* Flexbox Utilities - Complete set */

/* ============================================
   DISPLAY FLEX
   ============================================ */

.flex {
    display: flex !important;
}

.inline-flex {
    display: inline-flex !important;
}

/* ============================================
   FLEX DIRECTION
   ============================================ */

.flex-row {
    flex-direction: row !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-col {
    flex-direction: column !important;
}

.flex-col-reverse {
    flex-direction: column-reverse !important;
}

/* ============================================
   FLEX WRAP
   ============================================ */

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

/* ============================================
   JUSTIFY CONTENT
   ============================================ */

.justify-start {
    justify-content: flex-start !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-around {
    justify-content: space-around !important;
}

.justify-evenly {
    justify-content: space-evenly !important;
}

/* Legacy alias - kept for backwards compatibility */
.space-between {
    justify-content: space-between !important;
}

/* ============================================
   ALIGN ITEMS
   ============================================ */

.items-start {
    align-items: flex-start !important;
}

.items-end {
    align-items: flex-end !important;
}

.items-center {
    align-items: center !important;
}

.items-baseline {
    align-items: baseline !important;
}

.items-stretch {
    align-items: stretch !important;
}

/* ============================================
   ALIGN CONTENT
   ============================================ */

.content-start {
    align-content: flex-start !important;
}

.content-end {
    align-content: flex-end !important;
}

.content-center {
    align-content: center !important;
}

.content-between {
    align-content: space-between !important;
}

.content-around {
    align-content: space-around !important;
}

.content-stretch {
    align-content: stretch !important;
}

/* ============================================
   ALIGN SELF
   ============================================ */

.self-auto {
    align-self: auto !important;
}

.self-start {
    align-self: flex-start !important;
}

.self-end {
    align-self: flex-end !important;
}

.self-center {
    align-self: center !important;
}

.self-stretch {
    align-self: stretch !important;
}

.self-baseline {
    align-self: baseline !important;
}

/* ============================================
   FLEX GROW & SHRINK
   ============================================ */

.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

/* ============================================
   FLEX BASIS
   ============================================ */

.basis-auto {
    flex-basis: auto !important;
}

.basis-0 {
    flex-basis: 0 !important;
}

.basis-full {
    flex-basis: 100% !important;
}

/* ============================================
   FLEX SHORTHAND
   ============================================ */

.flex-1 {
    flex: 1 1 0% !important;
}

.flex-auto {
    flex: 1 1 auto !important;
}

.flex-initial {
    flex: 0 1 auto !important;
}

.flex-none {
    flex: none !important;
}

/* ============================================
   GAP
   ============================================ */

.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 0.75rem !important;
}

.gap-4 {
    gap: 1rem !important;
}

.gap-5 {
    gap: 1.25rem !important;
}

.gap-6 {
    gap: 1.5rem !important;
}

.gap-8 {
    gap: 2rem !important;
}

.gap-10 {
    gap: 2.5rem !important;
}

.gap-12 {
    gap: 3rem !important;
}

/* Row gap */
.gap-x-0 {
    column-gap: 0 !important;
}

.gap-x-1 {
    column-gap: 0.25rem !important;
}

.gap-x-2 {
    column-gap: 0.5rem !important;
}

.gap-x-3 {
    column-gap: 0.75rem !important;
}

.gap-x-4 {
    column-gap: 1rem !important;
}

/* Column gap */
.gap-y-0 {
    row-gap: 0 !important;
}

.gap-y-1 {
    row-gap: 0.25rem !important;
}

.gap-y-2 {
    row-gap: 0.5rem !important;
}

.gap-y-3 {
    row-gap: 0.75rem !important;
}

.gap-y-4 {
    row-gap: 1rem !important;
}

/* ============================================
   CONVENIENCE COMBINATIONS
   ============================================ */

/* Legacy - kept for backwards compatibility */
.flex-center {
    display: flex;
    align-items: center !important;
}

/* Center both axes */
.flex-center-all {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}

/* Column centered */
.flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center !important;
}
/* Display Utilities - Complete set */

/* ============================================
   DISPLAY
   ============================================ */

.block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
}

.inline {
    display: inline !important;
}

.hidden {
    display: none !important;
}

.table {
    display: table !important;
}

.table-cell {
    display: table-cell !important;
}

.table-row {
    display: table-row !important;
}

.grid {
    display: grid !important;
}

.inline-grid {
    display: inline-grid !important;
}

.contents {
    display: contents !important;
}

/* ============================================
   GRID
   ============================================ */

/* Grid template columns */
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

/* Grid template rows */
.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr)) !important;
}

.grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

.grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
}

.grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
}

/* Grid column span */
.col-span-1 {
    grid-column: span 1 / span 1 !important;
}

.col-span-2 {
    grid-column: span 2 / span 2 !important;
}

.col-span-3 {
    grid-column: span 3 / span 3 !important;
}

.col-span-4 {
    grid-column: span 4 / span 4 !important;
}

.col-span-6 {
    grid-column: span 6 / span 6 !important;
}

.col-span-full {
    grid-column: 1 / -1 !important;
}

/* Grid row span */
.row-span-1 {
    grid-row: span 1 / span 1 !important;
}

.row-span-2 {
    grid-row: span 2 / span 2 !important;
}

.row-span-3 {
    grid-row: span 3 / span 3 !important;
}

.row-span-full {
    grid-row: 1 / -1 !important;
}

/* Place items */
.place-items-start {
    place-items: start !important;
}

.place-items-end {
    place-items: end !important;
}

.place-items-center {
    place-items: center !important;
}

.place-items-stretch {
    place-items: stretch !important;
}

/* Place content */
.place-content-start {
    place-content: start !important;
}

.place-content-end {
    place-content: end !important;
}

.place-content-center {
    place-content: center !important;
}

.place-content-between {
    place-content: space-between !important;
}

.place-content-around {
    place-content: space-around !important;
}

.place-content-evenly {
    place-content: space-evenly !important;
}

.place-content-stretch {
    place-content: stretch !important;
}

/* Place self */
.place-self-auto {
    place-self: auto !important;
}

.place-self-start {
    place-self: start !important;
}

.place-self-end {
    place-self: end !important;
}

.place-self-center {
    place-self: center !important;
}

.place-self-stretch {
    place-self: stretch !important;
}
/* Position Utilities - Complete set */

/* ============================================
   POSITION
   ============================================ */

.static {
    position: static !important;
}

.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed !important;
}

.sticky {
    position: sticky !important;
}

/* ============================================
   INSET (TOP, RIGHT, BOTTOM, LEFT)
   ============================================ */

/* All sides */
.inset-0 {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

.inset-auto {
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}

/* Horizontal (left + right) */
.inset-x-0 {
    left: 0 !important;
    right: 0 !important;
}

.inset-x-auto {
    left: auto !important;
    right: auto !important;
}

/* Vertical (top + bottom) */
.inset-y-0 {
    top: 0 !important;
    bottom: 0 !important;
}

.inset-y-auto {
    top: auto !important;
    bottom: auto !important;
}

/* Top */
.top-0 {
    top: 0 !important;
}

.top-1 {
    top: 0.25rem !important;
}

.top-2 {
    top: 0.5rem !important;
}

.top-3 {
    top: 0.75rem !important;
}

.top-4 {
    top: 1rem !important;
}

.top-auto {
    top: auto !important;
}

.top-full {
    top: 100% !important;
}

.top-1\/2 {
    top: 50% !important;
}

.-top-1 {
    top: -0.25rem !important;
}

.-top-2 {
    top: -0.5rem !important;
}

/* Right */
.right-0 {
    right: 0 !important;
}

.right-1 {
    right: 0.25rem !important;
}

.right-2 {
    right: 0.5rem !important;
}

.right-3 {
    right: 0.75rem !important;
}

.right-4 {
    right: 1rem !important;
}

.right-auto {
    right: auto !important;
}

.right-full {
    right: 100% !important;
}

.-right-1 {
    right: -0.25rem !important;
}

.-right-2 {
    right: -0.5rem !important;
}

/* Bottom */
.bottom-0 {
    bottom: 0 !important;
}

.bottom-1 {
    bottom: 0.25rem !important;
}

.bottom-2 {
    bottom: 0.5rem !important;
}

.bottom-3 {
    bottom: 0.75rem !important;
}

.bottom-4 {
    bottom: 1rem !important;
}

.bottom-auto {
    bottom: auto !important;
}

.bottom-full {
    bottom: 100% !important;
}

.-bottom-1 {
    bottom: -0.25rem !important;
}

.-bottom-2 {
    bottom: -0.5rem !important;
}

/* Left */
.left-0 {
    left: 0 !important;
}

.left-1 {
    left: 0.25rem !important;
}

.left-2 {
    left: 0.5rem !important;
}

.left-3 {
    left: 0.75rem !important;
}

.left-4 {
    left: 1rem !important;
}

.left-auto {
    left: auto !important;
}

.left-full {
    left: 100% !important;
}

.left-1\/2 {
    left: 50% !important;
}

.-left-1 {
    left: -0.25rem !important;
}

.-left-2 {
    left: -0.5rem !important;
}

/* ============================================
   Z-INDEX
   ============================================ */

.z-0 {
    z-index: 0 !important;
}

.z-10 {
    z-index: 10 !important;
}

.z-20 {
    z-index: 20 !important;
}

.z-30 {
    z-index: 30 !important;
}

.z-40 {
    z-index: 40 !important;
}

.z-50 {
    z-index: 50 !important;
}

.z-auto {
    z-index: auto !important;
}

.-z-10 {
    z-index: -10 !important;
}

/* ============================================
   CENTERING HELPERS
   ============================================ */

/* Center horizontally with absolute positioning */
.center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Center vertically with absolute positioning */
.center-y {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Center both axes with absolute positioning */
.center-xy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Overflow Utilities - Complete set */

/* ============================================
   OVERFLOW
   ============================================ */

.overflow-auto {
    overflow: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-visible {
    overflow: visible !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

.overflow-clip {
    overflow: clip !important;
}

/* Overflow X */
.overflow-x-auto {
    overflow-x: auto !important;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

.overflow-x-visible {
    overflow-x: visible !important;
}

.overflow-x-scroll {
    overflow-x: scroll !important;
}

.overflow-x-clip {
    overflow-x: clip !important;
}

/* Overflow Y */
.overflow-y-auto {
    overflow-y: auto !important;
}

.overflow-y-hidden {
    overflow-y: hidden !important;
}

.overflow-y-visible {
    overflow-y: visible !important;
}

.overflow-y-scroll {
    overflow-y: scroll !important;
}

.overflow-y-clip {
    overflow-y: clip !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */

/* Hide scrollbar but allow scrolling */
.scrollbar-hide {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none !important;
}

/* Default scrollbar */
.scrollbar-default {
    -ms-overflow-style: auto !important;
    scrollbar-width: auto !important;
}

/* Thin scrollbar */
.scrollbar-thin {
    scrollbar-width: thin !important;
}

/* ============================================
   OVERSCROLL BEHAVIOR
   ============================================ */

.overscroll-auto {
    overscroll-behavior: auto !important;
}

.overscroll-contain {
    overscroll-behavior: contain !important;
}

.overscroll-none {
    overscroll-behavior: none !important;
}

.overscroll-y-auto {
    overscroll-behavior-y: auto !important;
}

.overscroll-y-contain {
    overscroll-behavior-y: contain !important;
}

.overscroll-y-none {
    overscroll-behavior-y: none !important;
}

.overscroll-x-auto {
    overscroll-behavior-x: auto !important;
}

.overscroll-x-contain {
    overscroll-behavior-x: contain !important;
}

.overscroll-x-none {
    overscroll-behavior-x: none !important;
}
/* Cursor Utilities - Complete set */

/* ============================================
   CURSOR
   ============================================ */

.cursor-auto {
    cursor: auto !important;
}

.cursor-default {
    cursor: default !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-wait {
    cursor: wait !important;
}

.cursor-text {
    cursor: text !important;
}

.cursor-move {
    cursor: move !important;
}

.cursor-help {
    cursor: help !important;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.cursor-none {
    cursor: none !important;
}

.cursor-context-menu {
    cursor: context-menu !important;
}

.cursor-progress {
    cursor: progress !important;
}

.cursor-cell {
    cursor: cell !important;
}

.cursor-crosshair {
    cursor: crosshair !important;
}

.cursor-vertical-text {
    cursor: vertical-text !important;
}

.cursor-alias {
    cursor: alias !important;
}

.cursor-copy {
    cursor: copy !important;
}

.cursor-no-drop {
    cursor: no-drop !important;
}

.cursor-grab {
    cursor: grab !important;
}

.cursor-grabbing {
    cursor: grabbing !important;
}

/* Resize cursors */
.cursor-col-resize {
    cursor: col-resize !important;
}

.cursor-row-resize {
    cursor: row-resize !important;
}

.cursor-n-resize {
    cursor: n-resize !important;
}

.cursor-e-resize {
    cursor: e-resize !important;
}

.cursor-s-resize {
    cursor: s-resize !important;
}

.cursor-w-resize {
    cursor: w-resize !important;
}

.cursor-ne-resize {
    cursor: ne-resize !important;
}

.cursor-nw-resize {
    cursor: nw-resize !important;
}

.cursor-se-resize {
    cursor: se-resize !important;
}

.cursor-sw-resize {
    cursor: sw-resize !important;
}

.cursor-ew-resize {
    cursor: ew-resize !important;
}

.cursor-ns-resize {
    cursor: ns-resize !important;
}

.cursor-nesw-resize {
    cursor: nesw-resize !important;
}

.cursor-nwse-resize {
    cursor: nwse-resize !important;
}

.cursor-zoom-in {
    cursor: zoom-in !important;
}

.cursor-zoom-out {
    cursor: zoom-out !important;
}
/* Animation Utilities - Consolidated animations */

/* Pulse glow effect (for badges) - yellow variant */
.pulsing-yellow {
    animation: pulse-yellow 2s infinite;
}

@keyframes pulse-yellow {
    0% {
        box-shadow: 0 0 0 0 var(--yellow-alpha-70);
    }

    70% {
        box-shadow: 0 0 0 10px var(--yellow-alpha-00);
    }

    100% {
        box-shadow: 0 0 0 0 var(--yellow-alpha-00);
    }
}

/* Pulse glow effect - blue variant (for in-progress badges) */
.pulsing-blue {
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 var(--blue-700-alpha-70);
    }

    70% {
        box-shadow: 0 0 0 10px var(--blue-700-alpha-00);
    }

    100% {
        box-shadow: 0 0 0 0 var(--blue-700-alpha-00);
    }
}

/* Pulse glow effect - green variant (for exact score matches) */
.pulsing-green {
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 var(--green-600-alpha-70);
    }

    70% {
        box-shadow: 0 0 0 10px var(--green-600-alpha-00);
    }

    100% {
        box-shadow: 0 0 0 0 var(--green-600-alpha-00);
    }
}

/* Pulse glow effect - red variant (for incorrect matches) */
.pulsing-red {
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 var(--red-alpha-70);
    }

    70% {
        box-shadow: 0 0 0 10px var(--red-alpha-00);
    }

    100% {
        box-shadow: 0 0 0 0 var(--red-alpha-00);
    }
}

/* Pulse scale effect (for live scores - keyframes used in results-grid.css) */
@keyframes pulse-scale {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Spinner rotation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* Visual Effect Utilities */

/* ============================================
   SHADOWS
   ============================================ */

.shadow-none {
    box-shadow: none !important;
}

.shadow-sm {
    box-shadow: 0 2px 4px var(--black-alpha-15) !important;
}

.shadow {
    box-shadow: 0 8px 20px var(--black-alpha-35), inset 0 0 0 1px var(--white-alpha-05) !important;
}

.shadow-md {
    box-shadow: 0 4px 12px var(--black-alpha-20) !important;
}

.shadow-lg {
    box-shadow: 0 10px 30px var(--black-alpha-35) !important;
}

.shadow-xl {
    box-shadow: 0 20px 40px var(--black-alpha-50) !important;
}

/* ============================================
   OPACITY
   ============================================ */

.opacity-0 {
    opacity: 0 !important;
}

.opacity-5 {
    opacity: 0.05 !important;
}

.opacity-10 {
    opacity: 0.1 !important;
}

.opacity-20 {
    opacity: 0.2 !important;
}

.opacity-25 {
    opacity: 0.25 !important;
}

.opacity-30 {
    opacity: 0.3 !important;
}

.opacity-40 {
    opacity: 0.4 !important;
}

.opacity-50 {
    opacity: 0.5 !important;
}

.opacity-60 {
    opacity: 0.6 !important;
}

.opacity-70 {
    opacity: 0.7 !important;
}

.opacity-75 {
    opacity: 0.75 !important;
}

.opacity-80 {
    opacity: 0.8 !important;
}

.opacity-90 {
    opacity: 0.9 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

/* ============================================
   GLASS PANEL EFFECT
   ============================================ */

.glass-panel {
    background: radial-gradient(circle at center, var(--white-alpha-02) 0%, var(--white-alpha-08) 100%);
    border: 1px solid var(--white-alpha-10);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 var(--white-alpha-15);
}

/* ============================================
   TABLE STRIPING
   ============================================ */

/* Purple variant - Body rows use lighter purples (700, 800) to contrast with header (900) */
.table-striped-purple tbody tr:nth-child(odd) td {
    background-color: var(--purple-700);
}

.table-striped-purple tbody tr:nth-child(even) td {
    background-color: var(--purple-800);
}

/* ============================================
   VISIBILITY
   ============================================ */

.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

/* ============================================
   POINTER EVENTS
   ============================================ */

.pointer-events-none {
    pointer-events: none !important;
}

.pointer-events-auto {
    pointer-events: auto !important;
}

/* ============================================
   USER SELECT
   ============================================ */

.select-none {
    user-select: none !important;
}

.select-text {
    user-select: text !important;
}

.select-all {
    user-select: all !important;
}

.select-auto {
    user-select: auto !important;
}

/* ============================================
   TRANSITIONS
   ============================================ */

.transition-none {
    transition: none !important;
}

.transition-all {
    transition: all 0.3s ease !important;
}

.transition-colors {
    transition: color, background-color, border-color 0.3s ease !important;
}

.transition-opacity {
    transition: opacity 0.3s ease !important;
}

.transition-transform {
    transition: transform 0.3s ease !important;
}

/* Transition durations */
.duration-75 {
    transition-duration: 75ms !important;
}

.duration-100 {
    transition-duration: 100ms !important;
}

.duration-150 {
    transition-duration: 150ms !important;
}

.duration-200 {
    transition-duration: 200ms !important;
}

.duration-300 {
    transition-duration: 300ms !important;
}

.duration-500 {
    transition-duration: 500ms !important;
}

/* ============================================
   TRANSFORM
   ============================================ */

.rotate-0 {
    transform: rotate(0deg) !important;
}

.rotate-45 {
    transform: rotate(45deg) !important;
}

.rotate-90 {
    transform: rotate(90deg) !important;
}

.rotate-180 {
    transform: rotate(180deg) !important;
}

.-rotate-45 {
    transform: rotate(-45deg) !important;
}

.-rotate-90 {
    transform: rotate(-90deg) !important;
}

.-rotate-180 {
    transform: rotate(-180deg) !important;
}

/* Scale */
.scale-0 {
    transform: scale(0) !important;
}

.scale-50 {
    transform: scale(0.5) !important;
}

.scale-75 {
    transform: scale(0.75) !important;
}

.scale-90 {
    transform: scale(0.9) !important;
}

.scale-95 {
    transform: scale(0.95) !important;
}

.scale-100 {
    transform: scale(1) !important;
}

.scale-105 {
    transform: scale(1.05) !important;
}

.scale-110 {
    transform: scale(1.1) !important;
}

.scale-125 {
    transform: scale(1.25) !important;
}

.scale-150 {
    transform: scale(1.5) !important;
}
/* Base: Extra-small mobile (< --breakpoint-phone-small) */

main {
    background: var(--purple-800);
}

.page-container {
    min-height: calc(100vh - 3.5rem);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem;
}

.admin-table-container {
    background-color: var(--purple-600);
    padding: 1.5rem;
    border-radius: var(--bs-border-radius);
    width: 100%;
    max-width: 87.5rem;
    margin: 0;
}

.admin-content-container {
    max-width: 75rem;
    width: 100%;
    margin: auto;
}

.hero-image {
    height: 6.25rem;
    border-radius: var(--bs-border-radius);
}

.table-responsive {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.table-responsive:hover {
    -ms-overflow-style: auto;
    scrollbar-width: auto;
}

dd {
    font-size: 0.8rem;
}

/* Tablet and up (--breakpoint-tablet: 768px) */
@media (min-width: 768px) {
    .page-container {
        padding: 1.5rem;
        align-items: center;
    }

    .admin-table-container {
        padding: 2.5rem;
        width: 80%;
        margin: auto;
    }

    dd {
        font-size: 1rem;
    }
}
.app-loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--purple-800);
    color: var(--white);
    z-index: 9999;
}

    .app-loading-container .spinner {
        border: 0.25rem solid var(--white-alpha-30);
        border-radius: 50%;
        border-top: 0.25rem solid var(--green-600);
        width: 2.5rem;
        height: 2.5rem;
        animation: spin 1s linear infinite;
        margin-bottom: 1.25rem;
    }
/* Base: Extra-small mobile (< --breakpoint-phone-small) */

.navbar-overlay {
    background-color: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transition: background-color 0.3s ease-in-out;
}

.navbar-logo {
    height: 1.875rem;
    margin-right: 0.625rem;
    border-radius: var(--bs-border-radius);
}

.navbar-overlay .navbar-brand {
    display: none !important;
}

a.navbar-brand img,
a.navbar-brand span {
    cursor: pointer;
}

.navbar-nav .nav-item .nav-link,
.navbar-nav .nav-item .navbar-text {
    color: var(--white) !important;
    font-weight: 700;
}

.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
}

.mobile-nav-header {
    font-weight: 700;
    color: var(--blue-500) !important;
    font-size: 1.1rem;
    padding-top: 1rem;
}

.mobile-nav-sub-item {
    padding-left: 2rem !important;
    font-size: 1rem;
}

.admin-toggle {
    font-weight: bold;
}

.user-menu-toggle {
    line-height: 1;
}

.user-icon {
    font-size: 1.25rem;
}

.navbar-nav > .nav-item {
    transition: background-color 0.2s ease-in-out;
    border-radius: var(--bs-border-radius);
}

.navbar-nav > .nav-item:not(.no-hover):hover {
    background-color: var(--white);
}

.navbar-nav > .nav-item:hover .nav-link,
.navbar-nav > .nav-item:hover .navbar-text,
.navbar-nav > .nav-item:hover .bi-person-fill {
    color: var(--purple-800) !important;
}

.dropdown-menu {
    background-color: var(--white);
    border: none;
}

.dropdown-item {
    color: var(--purple-800);
    font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--purple-600);
    background-color: var(--white);
    font-weight: bold;
}

.dropdown-item.active {
    color: var(--purple-600);
    background-color: var(--white);
    font-weight: bold;
}

.dropdown-item .bi {
    font-weight: bold !important;
    color: var(--purple-800);
}

.dropdown-divider {
    border-top: 1px solid var(--purple-800-alpha-25);
}

/* Desktop and up (--breakpoint-desktop: 992px) */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        padding: 0.5rem 0.75rem;
    }
}
/* Section - Outer container (purple boxes with titles) */
/* Background: purple-600 (#4A2E6C) - Lightest */
.section {
    background-color: var(--purple-600);
    padding: 1.5rem;
    border-radius: var(--bs-border-radius);
    color: var(--white);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 20px var(--black-alpha-35), inset 0 0 0 1px var(--white-alpha-05);
}

/* Section body - matches card body behaviour */
.section > .body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.section > .body.no-padding {
    padding: 0;
}

/* Collapsible section header */
.section-header-collapsible {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    flex-direction: column;
}

.section-header-collapsible:hover {
    opacity: 0.85;
}

.section-header-collapsible h5 {
    margin-bottom: 0;
}

.section-header-collapsible .collapse-icon {
    transition: transform 0.3s ease;
    font-size: 1rem;
}

.section-header-collapsible .collapse-icon.rotated {
    transform: rotate(180deg);
}

/* Collapsible section body */
.section-body-collapsible {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 37.5rem;
    opacity: 1;
}

.section-body-collapsible:not(.collapsed) {
    overflow-y: auto;
}

.section-body-collapsible.collapsed {
    max-height: 0;
    opacity: 0;
}

/* Custom scrollbar styling for collapsible sections */
.section-body-collapsible::-webkit-scrollbar {
    width: 0.5rem;
}

.section-body-collapsible::-webkit-scrollbar-track {
    background: var(--purple-900);
    border-radius: 0.25rem;
}

.section-body-collapsible::-webkit-scrollbar-thumb {
    background: var(--purple-300);
    border-radius: 0.25rem;
}

.section-body-collapsible::-webkit-scrollbar-thumb:hover {
    background: var(--purple-200);
}
/* Base: Extra-small mobile (< --breakpoint-phone-small) */

/* Base Card Structure */

.card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

/* Base Card */
/* Background: purple-1000 (#2C0A3D) - Darkest (same as login form) */
/* ALL card parts (header, body, footer) use the SAME background colour */
.card {
    background-color: var(--purple-1000);
    border-radius: var(--bs-border-radius);
    color: var(--white);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Card Variants (layout only, NOT colour) */
.card.slide {
    /* Carousel items - same as base, width handled by carousel */
    height: 100%;
    max-width: 350px;
    width: 100%;
}

.card.thumbnail {
    /* Interactive selection cards */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    text-align: center;
}

.card.row {
    /* Horizontal inline cards - stacked on mobile */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

/* NO background variants - all cards use purple-1000 */

/* Card Sub-elements - ALL use same background as card (purple-1000) */
.card > .header {
    padding: 1rem 1.5rem 0;
    /* NO background-color - inherits from card (purple-1000) */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card > .header.row-layout {
    flex-direction: row;
    justify-content: space-between;
}

.card > .header h5 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.card > .header small {
    font-size: 0.85rem;
}

.card > .header span {
    font-size: 0.8rem;
}

.card > .body {
    padding: 1rem 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card > .body.no-padding {
    padding: 0;
}

.card > .body.centered {
    align-items: center;
    justify-content: center;
}

.card > .body.leaderboard-body {
    padding: 1.5em;
    overflow-y: auto;
}

.card > .body .btn {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

.card > .footer {
    padding: 0 1.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.card > .footer .btn {
    flex-grow: 1;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
}

.card > .footer.columns-2 .btn {
    flex-basis: calc(50% - 0.5rem);
}

/* Gradient info boxes used in dashboard tiles (use with .glass-panel) */
.gradient-flex-info {
    padding: 0.8rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.gradient-flex-info.center {
    justify-content: center;
}

/* Tablet and up (--breakpoint-tablet: 768px) */
@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-grid .card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 0.5rem);
        justify-self: center;
    }

    .card.slide {
        max-width: none;
        width: auto;
    }

    .card.row {
        flex-direction: row;
        gap: 0;
    }

    .card > .header h5 {
        font-size: 1.25rem;
    }

    .card > .header span {
        font-size: 1rem;
    }

    .card > .body .btn {
        font-size: 1rem;
        padding: 0.375rem 0.75rem;
    }

    .card > .footer .btn {
        font-size: 1rem;
        padding: 0.375rem 0.75rem;
    }
}
/* Team Selection Cards */
/* Note: .team-card has been replaced by .card.thumbnail in card-base.css */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
}

/* Hover effect for team cards */
.card.thumbnail:hover .team-card-logo-bg {
    background-color: var(--green-600);
}

.team-card-logo-bg {
    background-color: var(--grey-100);
    padding: 1.5rem;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease-in-out;
}

.team-card-logo {
    height: 80px;
    max-width: 100%;
}

.team-card-body {
    padding: 1rem;
}

.team-card-name {
    color: var(--white);
    font-weight: 500;
    margin-bottom: 1rem;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Match and Round Cards */

.match-editor-row {
    margin-bottom: 1.5rem;
}

/* Match logo styling for admin forms */
.match-logo {
    height: 25px;
}

.logo-wrapper {
    background-color: transparent;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-in-out;
}

    .logo-wrapper.visible {
        background-color: var(--white);
    }
/* Base: Extra-small mobile (< --breakpoint-phone-small) */

/* Member List Cards */
/* Note: .member-card has been replaced by .card.row in card-base.css */

.member-status-column {
    background-color: var(--purple-800);
    border-radius: var(--bs-border-radius);
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.member-status-column h4 {
    text-align: center;
}

.column-placeholder {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Tablet and up (--breakpoint-tablet: 768px) */
@media (min-width: 768px) {
    .member-status-column h4 {
        text-align: left;
    }
}
/* Round Card Component Styles
   Used in: RoundCard.razor (Active Rounds Tile on Dashboard)
*/

/* Match Preview Grid */
.match-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.75rem 0;
    width: 100%;
    margin-top: 0.5rem;
}

.match-preview-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--bs-border-radius);
    background-color: var(--black-alpha-25);
}

.match-preview-logo {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    flex-shrink: 0;
}

.match-preview-score {
    min-width: 0.875rem;
    text-align: center;
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.match-preview-vs {
    color: var(--grey-300);
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Match Outcome Backgrounds */
.match-preview-row.match-outcome-exact {
    background-color: var(--green-600);
}

.match-preview-row.match-outcome-correct-result {
    background-color: var(--yellow);
}

.match-preview-row.match-outcome-correct-result .match-preview-score,
.match-preview-row.match-outcome-correct-result .match-preview-vs {
    color: var(--purple-1000);
}

.match-preview-row.match-outcome-incorrect {
    background-color: var(--red);
}

/* Outcome Summary - In-Progress Rounds Footer */
.outcome-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: var(--black-alpha-25);
    border-radius: var(--bs-border-radius);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white);
}

.outcome-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.outcome-separator {
    color: var(--grey-300);
    opacity: 0.5;
}
/* Base: Extra-small mobile (< --breakpoint-phone-small) */

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 50rem;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    color: var(--white);
}

.badge-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 50rem;
    padding: 0px 10px 0px 0px;
    font-size: 0.6em;
    font-weight: bold;
    color: var(--white);
}

.badge-group.prediction-badge {
    font-size: 0.9em;
}

.badge-group .badge-icon {
    font-size: 1em;
}

.badge-group .badge-icon.large-font {
    font-size: 1.5em;
}

.badge-group-with-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.badge-group-with-header > div:first-of-type {
    font-weight: bold;
    font-size: 0.75em;
}

.badge-group--green {
    background-color: var(--green-600);
}

.badge-group--purple {
    background-color: var(--purple-200);
}

.badge-group--red {
    background-color: var(--red);
}

.badge-group--orange {
    background-color: var(--orange);
}

.badge-group--blue {
    background-color: var(--blue-700);
}

.badge-group--yellow {
    background-color: var(--yellow);
    color: var(--purple-800);
}

.badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    font-size: 1.1em;
    background-color: var(--white);
}

.badge-icon .bi {
    position: relative;
    top: 1px;
}

.badge-group--green .badge-icon {
    color: var(--green-600);
}

.badge-group--purple .badge-icon {
    color: var(--purple-200);
}

.badge-group--red .badge-icon {
    color: var(--red);
}

.badge-group--blue .badge-icon {
    color: var(--blue-700);
}

.badge-group--orange .badge-icon {
    color: var(--orange);
}

.badge-group--yellow .badge-icon {
    color: var(--purple-800);
}

.current-user-highlight .badge-group--green {
    background-color: var(--white);
    color: var(--green-600);
}

/* Tablet and up (--breakpoint-tablet: 768px) */
@media (min-width: 768px) {
    .badge-group {
        padding: 4px 12px 4px 4px;
        font-size: 0.8em;
    }

    /* Consolidated badge-icon font-size for tablet */
    .badge-icon,
    .badge-group .badge-icon,
    .badge-group .badge-icon.large-font {
        font-size: 12px;
    }

    .badge-group-with-header > div:first-of-type {
        font-size: 1em;
    }
}
/* Base: Extra-small mobile (< --breakpoint-phone-small) */

/* ---------- League row styling ---------- */
.boost-league-row {
    padding: 1rem;
    border-radius: var(--bs-border-radius);
    background: var(--purple-600);
    box-shadow: 0 8px 20px var(--black-alpha-35), inset 0 0 0 1px var(--white-alpha-05);
}

/* ---------- Grid + card sizing ---------- */
.boost-selector-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-around;
}

.boost-card-wrapper {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.375rem;
}

.boost-card-wrapper .boost-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.boost-card {
    flex: 1 1 13.75rem;
    max-width: 10rem;
}

.boost-hex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.boost-img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.small-boost-icon {
    width: 1.875rem;
    height: 1.875rem;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

/* ---------- Description full-width styling (centered) ---------- */
.boost-description-wrapper {
    border-top: 3px solid var(--purple-600);
}

.boost-description {
    font-size: 0.88rem;
}

.boost-card:hover {
    transform: translateY(-0.375rem) scale(1.02);
    transition: transform 0.12s ease;
}

/* Small phone and up (--breakpoint-phone-small: 480px) */
@media (min-width: 480px) {
    .boost-description {
        font-size: 0.9rem;
        padding: 0 0.375rem;
    }

    .boost-card-wrapper {
        max-width: calc(50% - 12px);
        flex: 0 0 calc(50% - 12px);
    }
}

/* Desktop and up (--breakpoint-desktop: 992px) */
@media (min-width: 992px) {
    .boost-description {
        font-size: 1rem;
        padding: 0;
    }

    .boost-card-wrapper {
        flex: 1 1 220px;
        max-width: 320px;
    }

    .boost-selector-grid.boost-count-2 .boost-card-wrapper {
        flex: 0 0 calc(50% - 18px);
        max-width: calc(50% - 18px);
    }

    /* 3 options - 3 columns */
    .boost-selector-grid.boost-count-3 .boost-card-wrapper {
        flex: 0 0 calc(33.333% - 18px);
        max-width: calc(33.333% - 18px);
    }

    /* 4+ options - 4 columns */
    .boost-selector-grid.boost-count-4 .boost-card-wrapper,
    .boost-selector-grid.boost-count-5 .boost-card-wrapper,
    .boost-selector-grid.boost-count-6 .boost-card-wrapper {
        flex: 0 0 calc(25% - 18px);
        max-width: calc(25% - 18px);
    }
}
/* Detail List - Label/Value rows inside card body */
.detail-list {
    width: 100%;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}

.detail-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-row dt {
    font-weight: normal;
    color: var(--grey-500);
}

.detail-row dd {
    font-weight: bold;
    margin-bottom: 0;
}

.detail-row code {
    font-size: 1rem;
    font-weight: bold;
    color: var(--white);
}

.detail-row.centered {
    justify-content: center;
}
.green-button,
.green-button:disabled,
.green-button:active {
    background-color: var(--green-600);
    color: var(--white);
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}

    .green-button:not(.badge):hover {
        background-color: var(--white);
        color: var(--green-600);
    }

.red-button,
.red-button:disabled,
.red-button:active {
    background-color: var(--red);
    color: var(--white);
    font-weight: bold;
    border: none;
}

    .red-button:not(.badge):hover {
        background-color: var(--white);
        color: var(--red);
    }

.red-outline-button {
    border: 1px solid var(--red);
    color: var(--red);
    background: transparent;
    font-weight: bold;
    transition: all 0.3s;
}

    .red-outline-button:hover {
        background-color: var(--red);
        color: var(--white);
    }

.purple-accent-button,
.purple-accent-button:disabled,
.purple-accent-button:active {
    background-color: var(--purple-200);
    color: var(--white);
    font-weight: bold;
}

    .purple-accent-button:not(.badge):hover {
        background-color: var(--white);
        color: var(--purple-200);
    }

.blue-light-button,
.blue-light-button:disabled,
.blue-light-button:active {
    background-color: var(--blue-700);
    color: var(--white);
    font-weight: bold;
}

    .blue-light-button:not(.badge):hover {
        background-color: var(--white);
        color: var(--blue-700);
    }

.btn.grey-button,
.btn.grey-button:disabled,
.btn.grey-button:active {
    background-color: var(--grey-500);
    border-color: var(--grey-500);
    opacity: 0.65;
    cursor: not-allowed;
}

.back-button,
.back-button:disabled,
.back-button:active {
    position: absolute;
    top: -0.9375rem;
    left: 0;
    transform: translateY(-50%);
    color: var(--white);
    transition: color 0.2s ease-in-out;
    text-decoration: none;
}

    .back-button:not(.badge):hover {
        color: var(--white);
        text-decoration: underline;
    }

    .back-button span {
        font-size: 1.5rem;
    }

.password-toggle-btn {
    background-color: var(--purple-1000);
    color: var(--white);
    border: 1px solid var(--white);
    border-left: 0;
    transition: color 0.2s ease-in-out;
}

    .password-toggle-btn:hover,
    .password-toggle-btn:active {
        color: var(--green-600);
        border: 1px solid var(--white);
        border-left: 0;
        background-color: var(--purple-1000);
    }

    .password-toggle-btn:focus {
        color: var(--green-600);
        border: 1px solid var(--white);
        border-left: 0;
        background-color: var(--purple-800);
    }

.btn .bi {
    vertical-align: middle;
    line-height: 1;
}

/* Social Buttons */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    font-weight: 500;
    border-radius: var(--bs-border-radius);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.social-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    transition: fill 0.2s ease-in-out;
}

.google-btn {
    background-color: var(--white);
    color: var(--black);
    border: 1px solid var(--grey-200);
}

    .google-btn:hover {
        background-color: var(--grey-300);
        border-color: var(--grey-300);
    }
/* Base: Extra-small mobile (< --breakpoint-phone-small) */

.carousel-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.carousel-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-grow: 1;
    overflow: hidden;
}

.carousel-track-wrapper {
    overflow: hidden;
    width: 100%;
}

.carousel-track {
    display: flex;
    height: 100%;
    max-width: 100%;
    transition: transform 0.3s ease-in-out;
}

.carousel-item-wrapper {
    flex: 0 0 100%;
    width: 100%;
    padding: 0;
    min-width: 0;
}

.carousel-item-content {
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    width: 100%;
}

.carousel-btn {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 2rem;
    padding: 0 1rem;
}

.carousel-btn:disabled {
    opacity: 0.3;
}

.carousel-dots {
    text-align: center;
    padding: 1rem 0 0.5rem 0;
    flex-shrink: 0;
}

.carousel-dot {
    cursor: pointer;
    height: 0.75rem;
    width: 0.75rem;
    margin: 0 0.3125rem;
    background-color: var(--purple-800);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.carousel-dot.active,
.carousel-dot:hover {
    background-color: var(--green-600);
}

/* Tablet and up (--breakpoint-tablet: 768px) */
@media (min-width: 768px) {
    .carousel-item-wrapper {
        padding: 0 0.3125rem;
    }

    .carousel-item-content {
        padding: 0 0.5rem;
    }

    .carousel--multi-item .carousel-item-wrapper {
        flex: 0 0 50%;
    }

    .carousel-container {
        aspect-ratio: auto;
    }
}
/* Base: Extra-small mobile (< --breakpoint-phone-small) */

.form-container {
    background-color: var(--purple-1000);
    padding: 2.5rem;
    border-radius: var(--bs-border-radius);
    width: 100%;
    max-width: 600px;
}

.form-container.wide {
    max-width: 900px;
}

.form-container.extra-wide {
    max-width: 1200px;
}

.form-check-input {
    background-color: var(--red);
    border-color: var(--red);
}

.form-check-input:checked {
    background-color: var(--green-600);
    border-color: var(--green-600);
}

.form-sub-header {
    color: var(--grey-100);
    font-weight: 500;
}

.input-group-text.prize-label {
    background-color: var(--purple-900);
    border-color: var(--purple-900);
    color: var(--white);
    font-weight: 500;
}

.message-box-solid {
    color: var(--white);
    border-radius: var(--bs-border-radius);
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.message-box-solid::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 0.5rem;
    font-size: 1.1rem;
}

.message-box-solid.error {
    background-color: var(--red);
}

.message-box-solid.error::before {
    content: "\F333";
}

.message-box-solid.warning {
    background-color: var(--yellow);
    color: var(--purple-900);
    font-weight: bold;
}

.message-box-solid.warning::before {
    content: "\F33B";
    color: var(--purple-900);
}

.message-box-solid.success {
    background-color: var(--green-600);
}

.message-box-solid.success::before {
    content: "\F26B";
}

.form-control {
    height: 48px;
    width: 100%;
    border-radius: 28px;
    padding: 0 18px;
    background: var(--purple-1000);
    border: 1px solid var(--white);
    color: var(--white);
    font-size: 1rem;
    transition: all 0.18s ease;
}

.form-control::placeholder {
    color: var(--white);
}

.form-control:focus {
    background: var(--purple-800);
    color: var(--white);
    border-color: var(--white);
    box-shadow: none;
    outline: none;
}

/* Match form input height for buttons */
.input-height {
    height: 48px;
}

.input-group .form-control:focus {
    z-index: auto;
}

.input-group:focus-within .password-toggle-btn {
    background-color: var(--purple-800);
    color: var(--white);
    z-index: 2;
}

/* Tablet and up (--breakpoint-tablet: 768px) */
@media (min-width: 768px) {
    .message-box-solid {
        text-align: left;
    }
}
/* SweetAlert Modal Overrides */

.swal2-select {
    background-color: var(--white) !important;
    color: var(--purple-800) !important;
    border-radius: var(--bs-border-radius);
    padding: 0.5rem;
}

.swal2-radio-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
}

    .swal2-radio-container label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
/* --- Dashboard Card Layout (use with .glass-panel) --- */
.hero-rank-container {
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.secondary-rank-box {
    padding: 0.75rem 0.5rem;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Shield Icon System --- */
.rank-shield-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4.5rem;
}

    .rank-shield-container.small {
        width: 2.8rem;
        height: 3.2rem;
    }

.rank-shield-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Note: filter is applied as inline style to work with SVG defs and <base href> */
    stroke-width: 0.1875rem;
    stroke-linejoin: round;
    paint-order: stroke fill;
    vector-effect: non-scaling-stroke;
}

.rank-shield-text {
    position: relative;
    z-index: 2;
    font-weight: 800;
    font-size: 1.6rem;
    margin-top: 0.1875rem;
    color: var(--white);
    text-shadow: 0 1px 2px var(--black-alpha-60);
}

.rank-shield-container.small .rank-shield-text {
    font-size: 1.1rem;
    margin-top: 0.1875rem;
}

/*
 * Shield gradient colours are applied via inline SVG attributes (fill, stroke)
 * to work around the <base href> issue where url(#id) references in CSS
 * resolve relative to the base URL rather than the current document.
 * See MyLeaguesTile.razor for the gradient definitions and usage.
 */

/* Rank arrow text shadows for readability */
.hero-rank-container .text-green-600,
.hero-rank-container .text-red,
.secondary-rank-box .text-green-600,
.secondary-rank-box .text-red {
    text-shadow: 0 1px 1px var(--black-alpha-50);
}

.current-user-highlight .text-green-600 {
    color: var(--white) !important;
    text-shadow: 0 1px 1px var(--black-alpha-50);
}

/* --- Financial Row Styles (use with .glass-panel) --- */
.financial-row {
    display: flex;
    border-radius: 0.5rem; /* Override glass-panel's 12px */
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.financial-col {
    flex: 1;
    padding: 0.75rem 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

    .financial-col:first-child::after {
        content: "";
        position: absolute;
        right: 0;
        width: 0.125rem;
        background-color: var(--white-alpha-10);
        top: 15%;
        bottom: 15%;
    }
.dashboard-container {
    width: 100%;
    margin: auto;
}

.position-info {
    color: var(--white);
}

    .position-info span:first-child {
        font-size: 1.2rem;
        font-weight: bold;
    }
.hero-section {
    background: linear-gradient(var(--purple-900-alpha-80), var(--purple-900-alpha-80)), url('https://images.unsplash.com/photo-1579952363873-27f3bade9f55?q=80&w=1935&auto=format&fit=crop') no-repeat center center;
    background-size: cover;
    color: var(--white);
    padding: 6rem 0;
    position: relative;
}

.diagonal-clip {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.feature-icon {
    font-size: 3rem;
    color: var(--green-600);
}

.tick-icon {
    font-size: 1rem;
    color: var(--green-600);
}

.testimonial-card {
    background-color: var(--purple-600);
    border: none;
}

    .testimonial-card img {
        width: 5rem;
        height: 5rem;
        object-fit: cover;
    }
/* Base: Extra-small mobile (< --breakpoint-phone-small) */

.leaderboard-table {
    border-collapse: collapse;
    width: 100%;
    color: var(--white);
    font-size: 0.9rem;
    table-layout: fixed;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--purple-800);
    white-space: nowrap;
}

.leaderboard-table th {
    background-color: var(--purple-900);
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 1;
}

.leaderboard-table td {
    background: var(--purple-700);
}

/* Striping now handled by .table-striped-purple utility */

.leaderboard-table .rank-col {
    width: 15%;
    text-align: left;
}

.leaderboard-table .rank-change-col {
    width: 5%;
    padding-right: 0;
}

.leaderboard-table .player-name-col {
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
}

.leaderboard-table .points-col {
    width: 30%;
    text-align: right;
}

.leaderboard-table tbody tr.current-user-highlight td {
    background-color: var(--green-600) !important;
    color: var(--white) !important;
}

.leaderboard-table tbody tr.overall-round-winner,
.leaderboard-table tbody tr.overall-round-winner td,
.leaderboard-table tbody tr.overall-round-winner.current-user-highlight td {
    background-color: var(--gold) !important;
    color: var(--white) !important;
    border: none;
}

/* Carousel card sizing */
.carousel-item-content .card {
    width: 100%;
    min-width: 0;
}

/* Dashboard leaderboard - scrollable container */
.leaderboard-scroll-container {
    max-height: 20rem;
    overflow-y: auto;
    border-radius: var(--bs-border-radius);
    width: 100%;
}

/* Custom scrollbar styling for webkit browsers */
.leaderboard-scroll-container::-webkit-scrollbar {
    width: 0.5rem;
}

.leaderboard-scroll-container::-webkit-scrollbar-track {
    background: var(--purple-900);
    border-radius: 0.25rem;
}

.leaderboard-scroll-container::-webkit-scrollbar-thumb {
    background: var(--purple-300);
    border-radius: 0.25rem;
}

.leaderboard-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--purple-200);
}

/* Mobile/tablet padding for leaderboard body */
.body.leaderboard-body {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 3rem;
    padding-right: 3rem;
}

/* Desktop and up (--breakpoint-desktop: 992px) */
@media (min-width: 992px) {
    .body.leaderboard-body {
        padding: 1.5rem;
    }

    .leaderboard-scroll-container {
        max-height: none;
    }
}
/* Base: Extra-small mobile (< --breakpoint-phone-small) */

.prediction-grid {
    display: grid;
    gap: 1.5rem;
    /* Default to a single column for mobile-first design */
    grid-template-columns: 1fr;
}

.prediction-card {
    background-color: var(--purple-600);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    color: var(--white);
    box-shadow: 0 8px 20px var(--black-alpha-35), inset 0 0 0 1px var(--white-alpha-05);
}

.prediction-card-header {
    background-color: var(--purple-800);
    padding: 0.75rem 1.5rem;
    text-align: center;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    flex-direction: column;
}

.prediction-card-body {
    background-color: var(--purple-600);
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.status-select-pill {
    border: none;
    font-weight: bold;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem 0.75rem;
    padding: 0.25rem 2rem 0.25rem 0.75rem;
    border-radius: 50rem;
    font-size: 0.8rem;
}

.status-select-pill.scheduled {
    background-color: var(--red);
    color: var(--white);
}

.status-select-pill.in-progress {
    background-color: var(--yellow);
    color: var(--purple-900);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2331144a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.status-select-pill.completed {
    background-color: var(--green-600);
    color: var(--white);
}

.team-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 5rem;
}

.team-display .match-logo {
    height: 2.5rem;
}

.team-display .team-name {
    font-weight: 500;
    min-height: 2.5rem;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* --- Score Stepper --- */
.score-input-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
}

.score-input-stepper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.score-value {
    width: 3.125rem;
    height: 3.125rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.5rem;
    border: 2px solid var(--purple-900);
    background-color: var(--white);
    color: var(--purple-800);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--bs-border-radius);
}

.stepper-btn {
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    touch-action: manipulation;
}

.stepper-btn:hover {
    color: var(--green-600);
}

.stepper-btn:disabled {
    color: var(--grey-500);
    cursor: not-allowed;
}

.score-input-group .vs-separator {
    font-weight: bold;
    font-size: 1.5rem;
}

.form-container.extra-wide {
    padding: 1rem;
}

.form-container .d-flex.justify-content-end .btn {
    width: 100%;
}

/* Phone and up (--breakpoint-phone: 576px) */
@media (min-width: 576px) {
    .prediction-card-header {
        font-size: 1rem;
        flex-direction: row;
    }

    .prediction-card-body {
        padding: 1.0rem;
    }

    .team-display {
        width: 7.5rem;
    }

    .team-display .match-logo {
        height: 3.75rem;
    }

    .score-input-group {
        gap: 1rem;
        padding: 1.0rem;
    }

    .score-value {
        width: 4.375rem;
        height: 4.375rem;
        font-size: 2rem;
    }

    .stepper-btn {
        font-size: 2rem;
    }

    .form-container.extra-wide {
        padding: 2.5rem;
    }

    .form-container .d-flex.justify-content-end .btn {
        width: auto;
    }
}

/* Desktop and up (--breakpoint-desktop: 992px) */
@media (min-width: 992px) {
    .prediction-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.prize-summary {
    padding-top: 1rem;
    margin-top: 1rem;
    text-align: center;
}

.input-group .prize-label-fixed-width {
    flex-grow: 1;
    justify-content: flex-start;
    text-align: left;
}


.input-group .form-control.prize-amount-fixed-width {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 70px;
}

.input-group .prize-multiplier-fixed-width,
.input-group .btn.red-button {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
}

.prize-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
}

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

.prize-icon {
    flex: 0 0 40px;
    font-size: 1.5rem;
    color: var(--green-600);
}

.prize-description {
    flex-grow: 1;
    font-weight: 500;
}

.prize-amount {
    font-weight: bold;
    font-size: 1.1rem;
}
/* --- Desktop Grid Styles --- */
.results-grid-container {
    overflow-x: auto;
}

.results-grid {
    border-collapse: collapse;
    width: 100%;
    color: var(--white);
    font-size: 0.9rem;
}

    .results-grid th,
    .results-grid td {
        padding: 0.75rem;
        text-align: center;
        border-bottom: 1px solid var(--purple-800);
        white-space: nowrap;
    }

    .results-grid th {
        background-color: var(--purple-900);
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .results-grid .match-info {
        text-align: left;
        min-width: 3.75rem;
        position: sticky;
        left: 0;
        background-color: var(--purple-900);
        font-weight: bold;
    }

    .results-grid thead .match-info,
    .results-grid tfoot .match-info {
        z-index: 3;
    }

    .results-grid td.match-info {
        background-color: var(--purple-800);
        z-index: 2;
    }

    /* Striping handled by .table-striped-purple utility */

    .results-grid .score-cell {
        font-weight: bold;
        font-size: 1.1rem;
        background: var(--purple-800);
    }

    .results-grid .not-predicted-icon {
        font-size: 1.5rem;
        color: var(--grey-100);
    }

    .results-grid .match-info .match-logo-small {
        height: 1.875rem;
        width: 1.875rem;
    }

    .results-grid tfoot th {
        background-color: var(--purple-900);
        font-size: 1.2rem;
        position: sticky;
        bottom: 0;
    }

    .results-grid .actual-score.in-progress {
        color: var(--green-600);
        animation: pulse-scale 1.5s infinite;
    }

.blurred-score {
    filter: blur(2px);
    cursor: not-allowed;
    user-select: none;
}

.results-grid thead th.winner-column,
.results-grid tfoot th.winner-column {
    background-color: var(--gold) !important;
}

/* --- Mobile Carousel and Card Styles --- */
.mobile-results-carousel .carousel-container {
    max-height: none;
}

.mobile-match-header {
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

    .mobile-match-header .match-logo-small {
        height: 1.875rem;
        width: 1.875rem;
    }

.card-body .prediction-badge {
    width: 4.25rem;
    max-width: 4.25rem;
    min-width: 4.25rem;
}
/* Base: Extra-small mobile (< --breakpoint-phone-small) */

.boost-usage-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
}

.boost-usage-icon {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.boost-usage-window + .boost-usage-window {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--white-alpha-10);
}

.boost-usage-window-label {
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
}

.boost-usage-player-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.boost-usage-player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--bs-border-radius);
    background: var(--white-alpha-05);
}

.boost-usage-player-row.current-user-highlight {
    background-color: var(--green-600);
}

.boost-usage-player-name {
    font-size: 0.8rem;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: var(--space-3);
}

/* Slots container: scored, pending, unused, and expired pills */
.boost-usage-slots {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Used boost pill — fixed width so scored and pending pills align */
.boost-usage-pill {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
    cursor: default;
    min-width: 4.5rem;
    justify-content: center;
    text-align: center;
    border-radius: 50rem;
}

.boost-usage-pill .bi {
    font-size: 0.6rem;
    margin-right: 0.15rem;
}

/* Unused pill — available slot */
.boost-usage-pill--unused {
    background: var(--white-alpha-10);
    color: var(--white-alpha-30);
    display: inline-flex;
    align-items: center;
}

.boost-usage-pill--unused .bi {
    margin-right: 0;
}

/* Expired pill — window passed, boost not used */
.boost-usage-pill--expired {
    background: var(--white-alpha-10);
    color: var(--red);
    display: inline-flex;
    align-items: center;
}

.boost-usage-pill--expired .bi {
    margin-right: 0;
}

/* Tablet and up (--breakpoint-tablet: 768px) */
@media (min-width: 768px) {
    .boost-usage-header {
        justify-content: flex-start;
    }

    .boost-usage-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .boost-usage-window-label {
        text-align: left;
        font-size: 0.85rem;
    }

    .boost-usage-player-name {
        font-size: 0.85rem;
    }

    .boost-usage-pill {
        font-size: 0.7rem;
        padding: 0.2rem 0.6rem;
        min-width: 5rem;
    }
}

/* Desktop and up (--breakpoint-desktop: 992px) */
@media (min-width: 992px) {
    .boost-usage-player-list {
        display: block;
        column-count: 2;
        column-gap: var(--space-2);
    }

    .boost-usage-player-row {
        break-inside: avoid;
        margin-bottom: var(--space-2);
    }
}
/* Base application styles */
/* This file is bundled last to apply global defaults */

html, body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--grey-100);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--purple-800);
    font-weight: 700;
}

#blazor-error-ui {
    background: var(--yellow);
    color: var(--purple-900);
    bottom: 0;
    box-shadow: 0 -1px 2px var(--black-alpha-20);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }