/* ==========================================
   GLOBAL DARK GOTHIC & VIKING THEME (HIGH CONTRAST)
   ========================================== */

/* Universal Responsive Reset */
* {
    box-sizing: border-box !important;
    max-width: 100vw !important;
}

html, body {
    font-family: 'Cinzel', 'Georgia', 'Helvetica Neue', Helvetica, Arial, serif !important;
    background-color: #0d0e11 !important;
    color: #e0e2eb !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important; /* Kills the horizontal scrollbar */
}

/* 1. FLEXBOX LAYOUT INNER STRUCTURE */
.page {
    display: flex !important;
    flex-direction: row !important;
    min-height: 100vh !important;
    width: 100%;
}

main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    background-color: #0d0e11 !important;
}

.content {
    padding: 2rem;
    width: 100% !important;
}

/* 2. SIDEBAR & NAVIGATION */
.sidebar {
    width: 250px !important;
    flex-shrink: 0 !important;
    background-color: #121318 !important;
    border-right: 1px solid #232630 !important;
}

.top-row {
    background-color: #121318 !important;
    border-bottom: 1px solid #232630 !important;
    color: #e0e2eb !important;
}

/* 3. CARDS & PANELS */
.card, .forum-card, .list-group-item, div[class*="card"] {
    background-color: #16181e !important;
    border: 1px solid #2e3342 !important;
    color: #e0e2eb !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7) !important;
    width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.bg-primary {
    background-color: #16181e !important;
    border: 1px solid #2e3342 !important;
}

.card-body, .card-title, .card-text, .card h5, .card strong {
    color: #dcdff0 !important;
}

/* 4. FORM INPUTS & UTILITIES */
.form-control {
    background-color: #121318 !important;
    border: 1px solid #363c4d !important;
    color: #ffffff !important;
    width: 100% !important;
}

    .form-control:focus {
        background-color: #16181e !important;
        color: #fff !important;
        border-color: #7b8bad !important;
    }

/* 5. READABILITY & HIGH CONTRAST OVERRIDES */
label, .form-label, .text-muted, .small, small, p.text-muted, .form-label.text-muted, label.text-muted {
    color: #e0e2eb !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

::placeholder {
    color: #a0a5b8 !important;
    opacity: 1 !important;
}

a {
    color: #9fbcf0 !important;
    text-decoration: none !important;
}

.badge {
    color: #ffffff !important;
    background-color: #2e3342 !important;
    border: 1px solid #4a5166;
}

.post-meta, .forum-meta {
    color: #e0e2eb !important;
    opacity: 1 !important;
}

/* Force hidden framework modals from affecting flexbox layouts */
#blazor-error-ui {
    display: none !important;
}

/* 6. RESPONSIVE MOBILE OPTIMIZATION */
.container, .container-fluid {
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
}

img, table, pre {
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 768px) {
    .page {
        flex-direction: column !important;
    }

    .sidebar {
        width: 100% !important;
        height: auto !important;
        flex-shrink: 1 !important;
        border-right: none !important;
        border-bottom: 1px solid #232630 !important;
    }

    main {
        width: 100% !important;
        flex: 1 !important;
    }

    .content {
        padding: 1rem !important;
    }
}

/* ==========================================
   7. RANK SYSTEM BREATHING GLOW ANIMATION
   ========================================== */
@keyframes rankBreathingGlow {
    0% {
        box-shadow: 0 0 5px var(--rank-glow-color), inset 0 0 5px var(--rank-glow-color);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 18px var(--rank-glow-color), inset 0 0 8px var(--rank-glow-color);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 0 5px var(--rank-glow-color), inset 0 0 5px var(--rank-glow-color);
        transform: scale(1);
    }
}

.rank-avatar-glow {
    animation: rankBreathingGlow var(--rank-anim-speed, 2s) infinite ease-in-out;
    border: 3px solid var(--rank-glow-color) !important;
}

/* The default Blazor reconnect dialog duplicates our own red "Connection lost"
   banner (App.razor) — hide it and its backdrop entirely; the element must
   still EXIST (blazor.web.js toggles classes on it; with no element it would
   render its own built-in overlay instead). */
#components-reconnect-modal { display: none !important; }
#components-reconnect-modal::backdrop { display: none !important; }