/* ================================================================
   TRACKX DESIGN SYSTEM — Globale Styles & CSS-Variablen
   ================================================================ */

/* Google Fonts — zentral für das gesamte Projekt */
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Rajdhani:wght@300;500;700&family=Share+Tech+Mono&family=Montserrat:wght@400;600;700;900&family=Exo+2:wght@300;400;600;700&display=swap');

/* === CSS-VARIABLEN (Design Tokens) === */
:root {
    /* -- Farben -- */
    --tx-pink:          #ff0a96;
    --tx-pink-dark:     #d80073;
    --tx-pink-deeper:   #b00668;
    --tx-pink-glow:     rgba(255, 10, 150, 0.5);
    --tx-cyan:          #00ffff;
    --tx-cyan-dark:     #00d9ff;
    --tx-cyan-glow:     rgba(0, 255, 255, 0.5);
    --tx-purple:        #8000ff;
    --tx-dark:          #050112;
    --tx-dark-2:        #0a051a;
    --tx-dark-3:        #100a26;
    --tx-dark-4:        #1c1032;
    --tx-glass:         rgba(13, 1, 36, 0.7);
    --tx-glass-2:       rgba(18, 5, 41, 0.9);
    --tx-border:        rgba(74, 58, 97, 0.8);
    --tx-border-light:  rgba(255, 255, 255, 0.1);

    /* -- Schatten / Glows -- */
    --tx-glow-pink:         0 0 20px rgba(255, 10, 150, 0.5);
    --tx-glow-cyan:         0 0 20px rgba(0, 255, 255, 0.5);
    --tx-glow-pink-strong:  0 0 30px rgba(255, 10, 150, 0.7);
    --tx-glow-cyan-strong:  0 0 30px rgba(0, 255, 255, 0.6);

    /* -- Legacy-Aliases (Rückwärtskompatibilität) -- */
    --trackx-pink:      var(--tx-pink);
    --trackx-cyan:      var(--tx-cyan);
    --trackx-dark:      var(--tx-dark);
    --trackx-glass:     var(--tx-glass);
    --trackx-glow-pink: var(--tx-glow-pink);
    --trackx-glow-cyan: var(--tx-glow-cyan);
    --neon-pink:        #ff007f;
    --neon-blue:        var(--tx-cyan-dark);
    --bg-dark:          var(--tx-dark);
    --glass-bg:         var(--tx-glass-2);
    --border-glow:      rgba(255, 0, 127, 0.5);

    /* -- Schriftarten -- */
    --font-primary:  'Rajdhani', sans-serif;
    --font-display:  'Syncopate', sans-serif;
    --font-mono:     'Share Tech Mono', monospace;
    --font-body:     'Montserrat', sans-serif;
    --font-nav:      'Exo 2', sans-serif;

    /* -- Abstände / Border-Radius -- */
    --tx-radius-sm:   6px;
    --tx-radius:      10px;
    --tx-radius-lg:   16px;
    --tx-radius-xl:   24px;
    --tx-radius-pill: 50px;

    /* -- Layout -- */
    --tx-navbar-height: 70px;
    --tx-max-width:     1400px;
    --tx-content-pad:   clamp(16px, 4vw, 40px);
}

/* === GLOBALER RESET === */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--tx-dark);
    color: white;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Bilder immer fluid */
img {
    max-width: 100%;
    height: auto;
}

/* === LINKS === */
a, .btn-link {
    color: var(--tx-cyan);
    transition: color 0.2s;
}

a:hover {
    color: var(--tx-pink);
}

/* === BUTTONS === */
.btn-primary {
    color: #fff;
    background-color: var(--tx-pink);
    border-color: var(--tx-pink-dark);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--tx-pink-dark);
    border-color: var(--tx-pink-deeper);
    color: #fff;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem rgba(0, 255, 255, 0.2), 0 0 0 0.25rem rgba(255, 10, 150, 0.3);
}

/* === CONTENT === */
.content {
    padding-top: 0;
}

h1:focus {
    outline: none;
}

/* === FORMULAR-VALIDIERUNG === */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* === BLAZOR FEHLER-BOUNDARY === */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* === FORMULAR-FLOATS === */
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* === BLAZOR ERROR UI === */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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;
}

/* === RESPONSIVE TABELLEN === */
.tx-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* === GLOBALE UTILITY-KLASSEN === */
.tx-text-pink  { color: var(--tx-pink);  text-shadow: 0 0 10px var(--tx-pink-glow); }
.tx-text-cyan  { color: var(--tx-cyan);  text-shadow: 0 0 10px var(--tx-cyan-glow); }
.tx-font-mono  { font-family: var(--font-mono); }
.tx-font-display { font-family: var(--font-display); }

/* ================================================================
   RESPONSIVE BREAKPOINTS — Mobile-first
   - Mobile  : < 768px
   - Tablet  : 768px – 1024px
   - Desktop : > 1024px
   ================================================================ */

/* === MOBILE (< 768px) === */
@media (max-width: 767px) {
    .container, .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Ensure all fixed/sticky navbars don't collide with scrolled content */
    :root {
        --tx-content-pad: clamp(12px, 3vw, 24px);
    }

    /* Improve tap target sizes globally */
    button, [role="button"], a.btn, .btn {
        min-height: 44px;
    }
}

/* === TABLET (768px – 1024px) === */
@media (min-width: 768px) and (max-width: 1024px) {
    .container, .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

    :root {
        --tx-content-pad: clamp(16px, 3vw, 32px);
    }
}

/* === UTILITY: responsive table wrapper === */
.tx-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* === UTILITY: hide on mobile === */
@media (max-width: 767px) {
    .tx-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .tx-hide-desktop { display: none !important; }
}

/* === Prevent images from causing overflow === */
img, video, iframe, svg {
    max-width: 100%;
}

/* === Touch-friendly form controls === */
@media (max-width: 767px) {
    input, select, textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
}

/* ================================================================
   LEADERBOARD — Responsive (moved from Leaderboard.razor to avoid
   Razor @@ escaping issues with nested media queries)
   ================================================================ */

@media (max-width: 1024px) {
    .lb-page { padding: 32px 16px 60px; }
    .lb-table-wrap th { padding: 12px; }
    .lb-table-wrap td { padding: 10px 12px; }
}

@media (max-width: 767px) {
    .lb-page { padding: 24px 12px 50px; }
    .lb-header { margin-bottom: 24px; }
    .lb-tabs { gap: 6px; margin-bottom: 20px; }
    .lb-tab { padding: 8px 14px; font-size: .68rem; letter-spacing: 1px; }
    .lb-table-wrap th { padding: 10px; font-size: .58rem; letter-spacing: 1px; }
    .lb-table-wrap td { padding: 9px 10px; font-size: .78rem; }
    .rank-badge { width: 24px; height: 24px; font-size: .6rem; }
    .empty-msg { padding: 40px 16px; font-size: .72rem; }
}

@media (max-width: 479px) {
    .lb-page { padding: 16px 8px 40px; }
    .lb-tabs { gap: 4px; }
    .lb-tab { padding: 7px 10px; font-size: .62rem; letter-spacing: 0; }
    .lb-table-wrap th.hide-xs { display: none; }
    .lb-table-wrap td.hide-xs { display: none; }
    .lb-table-wrap th { padding: 8px; font-size: .55rem; }
    .lb-table-wrap td { padding: 8px; font-size: .72rem; }
    .back-btn { font-size: .68rem; padding: 10px 20px; }
    .lb-table-wrap table { min-width: 340px; }
}