/* ===== Global Variables ===== */
:root {
    --team-primary: #B01B1D;
    --team-primary-rgb: 176, 27, 29;
    --team-secondary: #440000;
    --team-secondary-rgb: 68, 0, 0;
    --team-accent: #ffffff;
    --transition-speed: 0.3s;
    --navbar-height: 50px;
}

html,
body,
* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

/* ===== My Benfica Dashboard ===== */
.my-benfica-dashboard {
    --my-benfica-ink: var(--bs-body-color);
    --my-benfica-muted: var(--bs-secondary-color);
    --my-benfica-line: var(--bs-border-color);
    --my-benfica-soft: var(--bs-tertiary-bg);
    color: var(--my-benfica-ink);
}

.my-benfica-hero {
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
}

.my-benfica-hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.my-benfica-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.2rem;
    color: var(--team-primary);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.my-benfica-hero h1 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0;
}

.my-benfica-hero p {
    margin: 0.2rem 0 0;
    max-width: 48rem;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    line-height: 1.35;
}

.my-benfica-hero-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.my-benfica-hero-actions .btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.86rem;
}

.my-benfica-stat,
.my-benfica-panel {
    border: 1px solid var(--my-benfica-line);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
}

.my-benfica-stat {
    height: 100%;
    min-height: 4.25rem;
    padding: 0.65rem 0.75rem;
}

.my-benfica-stat span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--my-benfica-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.my-benfica-stat span i {
    color: var(--team-primary);
}

.my-benfica-stat strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--my-benfica-ink);
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    line-height: 1;
}

.my-benfica-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.my-benfica-panel {
    overflow: hidden;
}

.my-benfica-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--my-benfica-line);
    background: var(--bs-tertiary-bg);
    font-weight: 700;
}

.my-benfica-panel-header a {
    color: var(--team-primary);
    font-weight: 800;
    text-decoration: none;
}

.my-benfica-panel-header a:hover,
.my-benfica-panel-header a:focus {
    text-decoration: underline;
}

.my-benfica-list {
    display: grid;
}

.my-benfica-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    color: var(--my-benfica-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: background-color 0.18s ease;
}

.my-benfica-row:last-child {
    border-bottom: 0;
}

.my-benfica-row:hover,
.my-benfica-row:focus {
    color: var(--my-benfica-ink);
    background: var(--bs-tertiary-bg);
}

.my-benfica-row--forum-topic {
    align-items: flex-start;
}

.my-benfica-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.5rem;
    background: var(--my-benfica-soft);
    color: var(--team-primary);
    flex: 0 0 2.15rem;
}

.my-benfica-topic-icon.is-sticky,
.my-benfica-topic-icon.is-manager,
.my-benfica-topic-icon.is-competition {
    color: #b7791f;
}

.my-benfica-topic-icon.is-locked {
    color: #6b7280;
}

.my-benfica-topic-icon.is-player,
.my-benfica-topic-icon.is-player-number {
    color: #1d4ed8;
}

.my-benfica-topic-icon.is-match {
    color: #15803d;
}

.my-benfica-topic-icon.is-club {
    color: #0f766e;
}

.my-benfica-topic-icon strong {
    font-size: .9rem;
    line-height: 1;
}

.my-benfica-person-photo {
    flex: 0 0 auto;
}

.my-benfica-row-title {
    display: block;
    max-width: 100%;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-benfica-row--forum-topic .my-benfica-row-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.my-benfica-row-meta {
    display: block;
    max-width: 100%;
    color: var(--my-benfica-muted);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-benfica-empty {
    display: grid;
    justify-items: start;
    gap: 0.45rem;
    padding: 1rem;
    color: var(--my-benfica-muted);
}

.my-benfica-matchup-logos {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 4.6rem;
}

.my-benfica-team-logo {
    width: 1.9rem;
    height: 1.9rem;
    object-fit: contain;
}

.my-benfica-matchup-logos span {
    margin: 0 0.35rem;
    color: var(--my-benfica-muted);
    font-size: 0.58rem;
    font-weight: 850;
    text-transform: uppercase;
}

.my-benfica-actions {
    display: grid;
    gap: 0.55rem;
    padding: 0.95rem;
}

.my-benfica-actions a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--my-benfica-line);
    border-radius: 0.5rem;
    color: var(--my-benfica-ink);
    background: var(--bs-body-bg);
    font-weight: 800;
    text-decoration: none;
}

.my-benfica-actions a:hover,
.my-benfica-actions a:focus {
    border-color: rgba(176, 27, 29, 0.32);
    color: var(--team-primary);
}

.min-w-0 {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .my-benfica-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .my-benfica-hero-main,
    .my-benfica-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .my-benfica-hero-actions .btn {
        width: 100%;
    }
}

/* ===== Predictions Hub ===== */
.predictions-hub {
    --prediction-ink: var(--bs-body-color);
    --prediction-muted: var(--bs-secondary-color);
    --prediction-line: var(--bs-border-color);
    --prediction-soft: var(--bs-tertiary-bg);
    --prediction-gold: #c9972b;
    color: var(--prediction-ink);
}

.predictions-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
}

.predictions-hero h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0;
}

.predictions-hero p {
    margin: 0.2rem 0 0;
    max-width: 44rem;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    line-height: 1.35;
}

.predictions-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.2rem;
    color: var(--team-primary);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.predictions-season-filter {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
}

.predictions-season-filter label {
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    font-weight: 700;
}

.predictions-season-filter .form-select {
    min-width: 9rem;
}

.predictions-season-filter .form-select,
.predictions-season-filter .btn {
    min-height: 2rem;
}

.prediction-stat-card,
.prediction-match-card,
.prediction-history-item,
.prediction-leaderboard {
    border: 1px solid var(--prediction-line);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
}

.prediction-stat-card {
    height: 100%;
    padding: 0.9rem;
}

.prediction-stat-card span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--prediction-muted);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.prediction-stat-card span i {
    color: var(--team-primary);
}

.prediction-stat-card strong {
    display: block;
    margin-top: 0.4rem;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1;
}

.prediction-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.prediction-section-heading h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.prediction-section-heading span {
    color: var(--prediction-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.predictions-open-list {
    display: grid;
    gap: 0.5rem;
}

.predictions-history-layout {
    margin-top: 0.25rem;
}

.prediction-match-card {
    padding: 0.5rem;
    margin-bottom: 0.9rem;
}

.prediction-match-card-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.prediction-match-title-row,
.prediction-row-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.prediction-matchup-logos {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.prediction-team-logo {
    width: 2.15rem;
    height: 2.15rem;
    object-fit: contain;
}

.prediction-matchup-vs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.35rem;
    color: var(--prediction-muted);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
}

.prediction-match-card-header strong {
    display: block;
    font-size: 1.15rem;
}

.prediction-match-label,
.prediction-match-meta {
    display: block;
    color: var(--prediction-muted);
    font-size: 0.8rem;
}

.prediction-status-pill,
.prediction-points-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
}

.prediction-status-pill.is-open {
    background: rgba(25, 135, 84, 0.12);
    color: #146c43;
}

.prediction-status-pill.is-locked {
    background: rgba(108, 117, 125, 0.13);
    color: #495057;
}

.prediction-card-fields .form-label {
    color: var(--prediction-muted);
    font-weight: 700;
}

.prediction-card-fields > [class*="col-"] {
    min-width: 0;
}

.prediction-card-fields .prediction-score-field {
    flex: 0 0 8rem;
    max-width: 8rem;
}

.prediction-card-fields .prediction-player-field {
    flex: 1 1 14rem;
    min-width: 12rem;
}

.prediction-card-fields .prediction-confidence-field {
    flex: 0 0 5.5rem;
    max-width: 5.5rem;
}

.prediction-card-fields .prediction-submit-field {
    flex: 0 0 5rem;
    max-width: 5rem;
}

.prediction-score-input,
.prediction-confidence-input,
.prediction-select {
    border-color: rgba(176, 27, 29, 0.16);
    border-radius: 0.55rem;
}

.prediction-score-input,
.prediction-confidence-input {
    font-weight: 800;
    text-align: center;
}

.prediction-save-btn {
    border: 0;
    border-radius: 0.55rem;
    background: var(--team-primary);
    color: #fff;
    font-weight: 800;
}

.prediction-save-btn:hover,
.prediction-save-btn:focus {
    background: #8e1518;
    color: #fff;
}

.prediction-community-panel {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(176, 27, 29, 0.12);
    font-size: 0.86rem;
}

.prediction-community-header,
.prediction-outcome-split,
.prediction-top-scores,
.prediction-community-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.45rem;
}

.prediction-community-header span,
.prediction-outcome-split span,
.prediction-top-scores strong {
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: var(--prediction-soft);
    color: var(--prediction-ink);
    font-weight: 700;
}

.prediction-community-header span:first-child,
.prediction-top-scores > span {
    padding-left: 0;
    background: transparent;
    color: var(--prediction-muted);
}

.prediction-outcome-split .is-benfica {
    background: rgba(25, 135, 84, 0.12);
    color: #146c43;
}

.prediction-outcome-split .is-draw {
    background: rgba(108, 117, 125, 0.13);
    color: #495057;
}

.prediction-outcome-split .is-opponent {
    background: rgba(33, 37, 41, 0.1);
    color: #212529;
}

.prediction-list {
    display: grid;
    gap: 0.6rem;
}

.prediction-history-item {
    display: block;
    padding: 0.85rem 0.95rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.prediction-history-item:hover,
.prediction-history-item:focus {
    color: inherit;
    background: var(--bs-tertiary-bg);
    border-color: rgba(var(--team-primary-rgb), 0.32);
}

.prediction-leaderboard {
    overflow: hidden;
}

.prediction-leader-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.prediction-leader-row:last-child {
    border-bottom: 0;
}

.prediction-points-pill {
    background: var(--team-primary);
    color: #fff;
}

.prediction-missing-reminder {
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(201, 151, 43, 0.35);
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(201, 151, 43, 0.12), rgba(176, 27, 29, 0.04));
}

.prediction-missing-reminder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #7b5b16;
}

.prediction-missing-reminder p {
    margin: 0;
    font-size: 0.9rem;
}

.prediction-missing-reminder-list {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.prediction-missing-reminder-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.55);
    color: inherit;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
}

.prediction-missing-reminder-list a:hover,
.prediction-missing-reminder-list a:focus {
    background: rgba(255, 255, 255, 0.8);
    color: inherit;
}

.prediction-missing-reminder-list a span {
    color: var(--prediction-muted);
    font-weight: 600;
    white-space: nowrap;
}

.prediction-mini-boards {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.prediction-mini-board {
    border: 1px solid var(--prediction-line);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    padding: 0.65rem 0.75rem;
}

.prediction-mini-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.prediction-mini-board-head strong {
    font-size: 0.9rem;
}

.prediction-mini-board-head span {
    color: var(--prediction-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.prediction-mini-board-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.prediction-mini-board-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.prediction-mini-board-row > div:first-child {
    min-width: 0;
}

.prediction-mini-board-row > div:first-child strong {
    display: block;
    font-size: 0.84rem;
    line-height: 1.2;
}

.prediction-mini-board-row > div:first-child span {
    display: block;
    color: var(--prediction-muted);
    font-size: 0.74rem;
}

.prediction-mini-board-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.prediction-mini-board-meta .prediction-points-pill {
    min-width: 2.5rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.7rem;
}

.prediction-mini-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .predictions-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .predictions-season-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .predictions-season-filter .form-select,
    .predictions-season-filter .btn {
        width: 100%;
    }

    .prediction-match-card-header,
    .prediction-leader-row {
        align-items: stretch;
        flex-direction: column;
    }

    .prediction-history-item.d-flex {
        align-items: stretch !important;
        flex-direction: column;
    }

    .prediction-mini-board-row,
    .prediction-missing-reminder-list a {
        align-items: start;
        flex-direction: column;
    }

    .prediction-card-fields .prediction-score-field,
    .prediction-card-fields .prediction-player-field,
    .prediction-card-fields .prediction-confidence-field,
    .prediction-card-fields .prediction-submit-field {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== Shadow Utilities ===== */
.shadow-sm {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.shadow-md {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.shadow-lg {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ===== General Styles ===== */
body {
    padding-top: var(--navbar-height);
    background-color: #f8f8f8;
    transition: background-color var(--transition-speed) ease;
    margin-top: 0 !important; /* Prevent unwanted margin */
    overflow-x: hidden; /* clip removed: can interfere with position:fixed painting in Safari's compositor (position:relative already removed, which was the real fix) */
    width: 100%; /* Ensure body takes exactly 100% width */
    /* position: relative removed — was causing Safari fixed-element stacking issues with overflow-x */
}

html,
body {
    max-width: 100%;
}

@supports (height: 100dvh) {
    .modal {
        min-height: 100dvh;
    }

    .modal-backdrop {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: auto;
        min-height: 100dvh;
    }
}

/* App-wide modal safety defaults */
.modal {
    isolation: isolate;
}

.modal-dialog {
    max-width: min(var(--bs-modal-width, 500px), calc(100vw - 1rem));
}

@media (max-width: 576px) {
    :root {
        --mobile-modal-top-offset: calc(var(--navbar-height, 50px) + env(safe-area-inset-top) + 0.35rem);
    }

    .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100vw - 1rem);
    }

    .modal-dialog:not(.modal-dialog-centered) {
        margin: var(--mobile-modal-top-offset) 0.5rem 0.5rem;
    }

    .modal-dialog.modal-dialog-centered {
        min-height: calc(100dvh - var(--mobile-modal-top-offset) - 1rem);
    }

    .modal-content {
        max-height: calc(100dvh - var(--mobile-modal-top-offset) - 0.5rem);
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Container Alignment Fixes ===== */
.container-fluid > .container,
.container-fluid > .container-sm,
.container-fluid > .container-md,
.container-fluid > .container-lg,
.container-fluid > .container-xl {
    padding-left: 0;
    padding-right: 0;
}

.container-fluid > div[class^="container"],
.container-fluid > div[class*=" container"] {
    margin-left: auto;
    margin-right: auto;
}

.nav-width {
    max-width: 100%;
    height: var(--navbar-height);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    align-items: center;
    position: relative;
}

#navigation-container {
    background-color: var(--team-primary);
    margin-top: 0 !important;
    padding: 0 !important;
    position: relative;
}

#navigation-container,
main {
    max-width: 100%;
    overflow-x: clip;
}

/* Fix for container-xl in navigation - ensures proper width constraints */
.nav-width.container-xl {
    max-width: var(--bs-container-xl);
    width: 100%;
    background-color: var(--team-primary); /* Ensure color extends across */
}

/* Ensure same width between navigation and hero */
.hero-width.p-0,
.nav-width.p-0 {
    width: 100%;
    position: relative;
}

/* Hero section full-width background fixes - improved for all screen sizes */
#hero-container {
    position: relative;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    overflow-x: clip;
}

.team-gradient-bg {
    position: relative;
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%);
    width: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    /* Fix for Safari and iOS */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Allow content within hero to be container-width - improved containment */
.hero-content-inner {
    max-width: var(--bs-container-xl, 1320px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    box-sizing: border-box;
}

/* ===== Hero Content Inner Spacing ===== */
.container-xl .hero-content-inner {
    padding-left: 0;
    padding-right: 0;
}

/* Remove top and bottom padding for hero headers in container-xl */
.container-xl .hero-header {
    padding-top: 5px;
    padding-bottom: 10px;
}

/* Override compact hero padding in container-xl */
.container-xl .hero-header.compact {
    padding-top: 5px;
    padding-bottom: 10px;
}

/* Ensure this applies at all breakpoints */
@media (min-width: 1200px) {
    /* Hero vertical padding consistency for larger screens */
    .hero-header {
        padding-top: 5px;
        padding-bottom: 10px;
    }
}

.hero-width.container-xl {
    padding-left: 0;
    padding-right: 0;
}

/* Special handling for container-xl within team-gradient-bg */
.team-gradient-bg .container-xl {
    background-color: transparent;
}

/* Fix for mobile devices and potential overflow issues */
@supports(padding: max(0px)) {
    .hero-content-inner {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
}

/* Improved responsive styles for different breakpoints */
@media (max-width: 575.98px) {
    .hero-content-inner {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Remove unnecessary horizontal padding that might cause misalignment */
@media (min-width: 992px) {
    .navbar > .container,
    .navbar > .container-fluid,
    .navbar > .container-lg,
    .navbar > .container-md,
    .navbar > .container-sm,
    .navbar > .container-xl {
        justify-content: start;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* When navbar is in a container that's already contained, remove extra padding */
    .container .navbar > .container,
    .container-sm .navbar > .container-sm,
    .container-md .navbar > .container-md,
    .container-lg .navbar > .container-lg,
    .container-xl .navbar > .container-xl,
    .container-fluid .navbar > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Fix for container-xl breakpoint - ensures proper width */
    .container-xl.nav-width {
        max-width: 1320px;
    }
}

/* Fix navbar sticky positioning */
.navbar-sticky, .sticky-top {
    background-color: var(--team-primary) !important;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    margin-top: 0 !important; /* Remove any margin */
}

/* Shared team gradient background for both navigation and hero */
.team-gradient-bg,
.hero-header,
#hero-container,
[id="hero-container"] {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%) !important;
    color: var(--team-accent) !important;
}

/* Even more specific for when JavaScript might be adding inline styles */
.hero-header[style*="background"],
#hero-container[style*="background"] {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%) !important;
}

/* Hero content should be transparent to show gradient background */
.hero-content-inner {
    background-color: transparent !important;
}

/* Consistent styling between navigation and hero */
#navigation-container, 
#hero-container {
    width: 100%;
    margin-top: 0 !important;
    padding: 0 !important;
    position: relative;
    left: 0;
    right: 0;
}

/* ===== Header & Navigation Styles ===== */
.site-header {
    position: relative;
    overflow: hidden;
    max-height: 200px;
    margin: 0;
}

.site-header img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 200px;
    display: block;
}

.site-branding {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, rgba(176, 27, 29, 0.8) 0%, rgba(0,0,0,0.7) 100%);
    padding: 1rem;
    z-index: 1;
}

.site-title {
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin: 0;
    letter-spacing: 1px;
}

.navbar-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1060;
    transition: transform 0.3s ease; /* only transform — box-shadow removed to avoid CPU repaint during scroll */
    will-change: transform; /* promote to GPU compositor layer so animation doesn't invalidate page layers */
    background-color: var(--team-primary);
    height: var(--navbar-height);
}

.navbar-sticky.scrolled {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* instant, no transition */
}

.navbar-sticky.hidden {
    transform: translateY(-100%);
}

/* Zero out Bootstrap's default vertical padding — height is enforced by .nav-width */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.navbar-brand {
    font-weight: 700;
    position: relative;
    padding-bottom: 3px;
    display: flex;
    align-items: center;
}

.navbar-brand i {
    margin-right: 10px;
}

.navbar-brand:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #ffffff; /* Changed from var(--team-secondary) to white to match admin */
    transition: all var(--transition-speed);
    transform: translateX(-50%);
}

.navbar-brand:hover:after {
    width: 100%;
}

.nav-item {
    position: relative;
    margin: 0 0.125rem;
}

.nav-item .nav-link {
    color: #fff;
    padding: 0.75rem 1rem;
    transition: all var(--transition-speed) ease;
    border-radius: 4px;
}

.nav-item .nav-link:hover, 
.nav-item .nav-link:focus {
    color: #fff;
    background-color: rgba(255,255,255,0.1);
}

.nav-item .nav-link.active {
    background-color: var(--team-secondary);
    color: white;
}

.nav-item .nav-link i {
    margin-right: 5px;
}

/* Remove blue outline on menu click - match admin */
.navbar-nav .nav-link:focus,
.dropdown-item:focus,
.navbar .btn:focus,
.dropdown-toggle:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* ===== Hero Header Styles ===== */
.hero-header {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%);
    padding: 5px 0; /* Set consistent 5px padding for all containers */
    position: relative;
    overflow: hidden;
    color: white;
    margin-top: 0;
    z-index: 1;
}

/* Override and ensure consistent padding for all container types */
.container .hero-header,
.container-sm .hero-header,
.container-md .hero-header,
.container-lg .hero-header,
.container-xl .hero-header,
.container-fluid .hero-header {
    padding-top: 5px;
    padding-bottom: 10px;
}

/* Mobile specific override */
@media (max-width: 768px) {
    .hero-header,
    .hero-header.compact {
        padding: 5px 0;
    }
}

/* Hero container width settings - ensures background color extends fully */
.hero-width {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative; /* Ensure position context for children */
}

/* Fix hero background color for all container types */
#hero-container {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%);
    margin-top: 0 !important;
    padding: 0 !important;
    position: relative;
    width: 100%;
    left: 0;
    right: 0;
}

/* Container-specific styling to ensure proper hero background extends */
.hero-width.container {
    max-width: var(--bs-container-width);
}

.hero-width.container-sm {
    max-width: var(--bs-container-sm);
}

.hero-width.container-md {
    max-width: var(--bs-container-md);
}

.hero-width.container-lg {
    max-width: var(--bs-container-lg);
}

.hero-width.container-xl {
    max-width: var(--bs-container-xl, 1320px); /* Fallback if variable not available */
    width: 100%;
}

/* Enhanced responsive hero styling for all screen sizes */
@media (min-width: 1400px) {
    /* XL screens */
    .container-xl.hero-width {
        max-width: 1320px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    /* LG screens */
    .container-lg.hero-width,
    .container-xl.hero-width {
        max-width: 1140px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* MD screens */
    .container-md.hero-width,
    .container-lg.hero-width,
    .container-xl.hero-width {
        max-width: 960px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* SM screens */
    .container-sm.hero-width,
    .container-md.hero-width,
    .container-lg.hero-width,
    .container-xl.hero-width {
        max-width: 720px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    /* XS screens */
    .container.hero-width,
    .container-sm.hero-width,
    .container-md.hero-width,
    .container-lg.hero-width,
    .container-xl.hero-width {
        max-width: 540px;
    }
}

@media (max-width: 575px) {
    /* Mobile screens */
    .hero-width {
        width: 100%;
    }
}

/* Hero stats styling */
.hero-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hero-stats.compact-stats {
    margin-top: 0.5rem;
}

.stat-item {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.compact-stats .stat-item {
    padding: 0.25rem 0.75rem;
}

.stat-item:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.2);
}

.compact-stats .stat-item:hover {
    transform: translateY(-3px);
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}

.compact-stats .stat-value {
    font-size: 1.5rem;
    margin-bottom: 0.1rem;
}

.stat-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.compact-stats .stat-label {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/* Next match styling */
.next-match {
    background-color: rgba(0, 0, 0, 0.2);
    border-left: 4px solid #fff;
    padding: 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
}

.next-match.compact-match {
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
}

/* ===== Hero Carousel Styles ===== */
#heroCarousel {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

#heroCarousel .carousel-indicators {
    bottom: 0; /* Keep at bottom position */
    margin-bottom: 0;
    padding-bottom: 6px; /* Keep padding to push dots up slightly */
    background: none; /* Remove the gradient background */
    z-index: 5; /* Ensure indicators appear above content */
}

/* Make the dots more visible with better contrast */
#heroCarousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 4px;
    background-color: rgba(255, 255, 255, 0.7); /* Increased opacity for better visibility */
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Stronger shadow for contrast */
}

#heroCarousel .carousel-indicators button.active {
    background-color: white;
    transform: scale(1.2);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2), 0 0 5px rgba(255, 255, 255, 0.5); /* Dual shadow for glow effect */
}

.compact-match-box {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.compact-match-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.compact-match-box .match-title {
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
}

.carousel-match-graphic, .season-graphic {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    height: 100%;
}

.match-teams-display {
    color: white;
}

.match-graphic-header {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.match-team-logo {
    width: auto;
    max-height: 60px;
    max-width: 100%;
}

.team-logo-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 700;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.countdown-box {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    min-width: 45px;
    text-align: center;
}

.team-name {
    color: white;
    font-weight: 500;
}

.stat-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-box {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    height: 100%;
}

.stat-box:hover {
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, 0.2);
}

.stat-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    margin-right: 10px;
}

.stat-data {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.1;
    color: white;
}

.stat-label {
    font-size: 0.75rem;
    opacity: 0.8;
    color: white;
}

.season-summary {
    color: white;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.summary-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-performers-chart {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    height: 100%;
}

.performer-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.performer-name {
    width: 30%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.85rem;
}

.performer-value {
    width: 10%;
    text-align: right;
    font-weight: 700;
}

.progress {
    flex: 1;
}

.progress-bar {
    background-color: var(--team-primary);
}

/* Media queries for responsive carousel */
@media (max-width: 767px) {
    #heroCarousel .carousel-inner {
        min-height: 0;
    }

    #heroCarousel h2 {
        font-size: 1.35rem;
        line-height: 1.2;
    }

    #heroCarousel .row.align-items-center {
        row-gap: 0.75rem !important;
    }

    #heroCarousel .compact-match-box {
        padding: 0.65rem;
        border-radius: 10px;
    }

    #heroCarousel .compact-match-box .badge {
        font-size: 0.7rem;
    }

    #heroCarousel .match-title,
    #heroCarousel .team-name {
        font-size: 0.82rem;
        line-height: 1.25;
    }

    #heroCarousel .stat-box {
        padding: 0.55rem;
        min-height: 58px;
    }

    #heroCarousel .stat-icon {
        width: 26px;
        height: 26px;
        margin-right: 0.5rem;
        font-size: 0.75rem;
    }

    #heroCarousel .compact-button {
        padding: 0.35rem 0.65rem;
        font-size: 0.78rem;
        line-height: 1.15;
        border-radius: 999px;
    }

    #heroCarousel .d-flex.mt-auto.pt-2 {
        gap: 0.45rem;
        flex-wrap: wrap;
        padding-top: 0.55rem !important;
    }

    .match-graphic-header {
        font-size: 1rem;
    }
    
    .carousel-match-graphic, .season-graphic {
        margin-top: 15px;
        padding: 10px;
    }
    
    .stat-value {
        font-size: 1rem;
    }
    
    .performer-name {
        width: 35%;
        font-size: 0.8rem;
    }
    
    #heroCarousel .carousel-indicators {
        bottom: 0;
        padding-bottom: 6px;
    }
}

@media (max-width: 576px) {
    #heroCarousel {
        padding-bottom: 0.35rem;
    }

    #heroCarousel .match-teams-display {
        padding: 0.75rem !important;
    }

    #heroCarousel h2 {
        font-size: 1.2rem;
    }

    #heroCarousel p.mb-2,
    #heroCarousel .match-graphic-header {
        margin-bottom: 0.45rem !important;
    }

    #heroCarousel .col-6.col-sm-4 {
        width: 50%;
    }

    #heroCarousel .stat-value {
        font-size: 0.92rem;
    }

    #heroCarousel .stat-label {
        font-size: 0.66rem;
    }

    #heroCarousel .performer-name {
        font-size: 0.74rem;
    }

    #heroCarousel .performer-value {
        font-size: 0.74rem;
    }

    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next {
        display: none;
    }
    
    #heroCarousel .carousel-indicators {
        bottom: 0;
        padding-bottom: 4px;
    }
    
    .club-name {
        font-size: 0.9rem;
        max-width: 140px;
    }
}

/* ===== Button Styles ===== */
.cta-button {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background-color: var(--bs-body-bg);
    color: var(--team-primary);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: none;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    background-color: #f0f0f0;
    color: var(--team-primary);
}

.compact-button {
    display: inline-block;
    padding: 0.35rem 1rem;
    background-color: var(--bs-body-bg);
    color: var(--team-primary);
    text-decoration: none;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: none;
}

.compact-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background-color: #f0f0f0;
    color: var(--team-primary);
}

/* Fix for hero carousel link clicking issues */
#heroCarousel .compact-button {
    position: relative;
    z-index: 10; /* Ensure buttons are above carousel controls */
    pointer-events: auto !important; /* Force clickable */
    display: inline-block;
}

/* Ensure carousel controls don't interfere with buttons */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    z-index: 5; /* Lower than buttons */
}

#heroCarousel .carousel-indicators {
    z-index: 5; /* Lower than buttons */
}

/* Make sure button containers are properly positioned */
#heroCarousel .d-flex {
    position: relative;
    z-index: 10;
}

/* Ensure carousel items don't have click-blocking overlays */
#heroCarousel .carousel-item {
    pointer-events: auto;
}

/* Fix any potential overlay issues */
#heroCarousel .carousel-item > * {
    pointer-events: auto;
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}

.select-with-icon {
    position: relative;
    min-width: 100px;
}

.select-icon {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8);
    z-index: 2;
    pointer-events: none;
    font-size: 0.8rem;
    width: 1rem;
    text-align: center;
}

.filter-controls select {
    border: none;
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    transition: background-color 0.2s ease;
    padding-left: 2rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%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 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-controls select:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.2);
}

.filter-controls select::-moz-focus-inner {
    border: 0;
}

.filter-controls .theme-toggle {
    margin-left: 2px;
}

@media (min-width: 992px) {
    .filter-controls .select-with-icon {
        flex: 0 0 auto;
        width: max-content;
        min-width: max-content;
    }

    .filter-controls select {
        width: auto;
        max-width: none;
        min-width: 0;
        padding-right: 1.9rem !important;
    }
}

/* ===== Navbar Button Consistency ===== */
.navbar .btn {
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    margin-top: 0;
    margin-bottom: 0;
}

.navbar .theme-toggle,
.navbar .btn-outline-light,
.navbar .btn-sm {
    height: 31px;
    min-height: 31px;
    max-height: 31px;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

/* Navbar button icon consistency */
.navbar .btn i,
.navbar .theme-toggle i {
    font-size: 0.875rem;
}

.navbar .btn i + span {
    margin-left: 5px;
}

/* ===== Content Styling ===== */
nav#mainContent {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

/* Keep center column ending flush with sidebars by removing trailing spacing. */
#mainContent > :last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#mainContent > :last-child .widget-container:last-child,
#mainContent > :last-child .section-card:last-child,
#mainContent > :last-child .card:last-child {
    margin-bottom: 0 !important;
}

/* Apply the same trailing-spacing reset to both sidebars. */
#leftSidebar > :last-child,
#rightSidebar > :last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#leftSidebar > :last-child .widget-container:last-child,
#leftSidebar > :last-child .section-card:last-child,
#leftSidebar > :last-child .card:last-child,
#rightSidebar > :last-child .widget-container:last-child,
#rightSidebar > :last-child .section-card:last-child,
#rightSidebar > :last-child .card:last-child {
    margin-bottom: 0 !important;
}

#mainContent .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

#mainContent .table-responsive > .table {
    min-width: 100%;
}

/* Prevent competition table wrappers from pushing layout width */
#mainContent .table-responsive.mx-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Keep long section headers from forcing card overflow */
#mainContent .card-header .d-flex {
    min-width: 0;
}

#mainContent .card-header h1,
#mainContent .card-header h2,
#mainContent .card-header h3,
#mainContent .card-header h4,
#mainContent .card-header h5,
#mainContent .card-header h6 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.section-card {
    border-left: 4px solid var(--team-primary);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    background-color: var(--bs-body-bg);
    overflow: hidden;
    border-radius: 0.375rem;
    padding: 0 !important;
    contain: paint;
}

#match-comments.section-card,
#article-comments.section-card {
    position: relative;
    z-index: 20;
    overflow: visible;
    contain: none;
}

#match-comments.section-card .card-body,
#article-comments.section-card .card-body {
    overflow: visible;
}

#match-comments .dropdown,
#article-comments .dropdown {
    position: relative;
}

#match-comments .dropdown-menu,
#article-comments .dropdown-menu {
    z-index: 1080 !important;
}

.section-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.section-card .card-header,
.card-header {
    background-color: var(--team-primary);
    color: white;
    border: none !important;
    border-bottom: none !important;
    padding: 0.25rem 0.6rem;
    margin: -1px -1px 0 -1px;
    border-radius: 0 !important;
    position: relative;
    z-index: 1;
    width: calc(100% + 2px);
    box-shadow: none !important;
}

.card-header:first-child {
    border-radius: 0 !important;
}

.section-card .card-body {
    position: relative;
    z-index: 0;
}

/* Standardize collapsible section headers */
.card-header,
.card-header.collapsed {
    padding: 0.50rem 0.50rem !important; /* Ensure consistent padding */
    transition: background-color 0.3s ease;
}

/* Remove unwanted transitions on collapse */
.card-header .d-flex {
    position: relative;
}

/* Only add right padding when collapse button exists */
.card-header .d-flex:has(.btn-collapse) {
    padding-right: 30px; /* Reserve space for collapse button */
}

/* Ensure header content doesn't shift */
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    margin-bottom: 0;
    flex-grow: 1;
}

/* Fixed position for collapse button */
.card-header .btn-collapse {
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

/* Ensure section actions without collapse button align to the right properly */
.section-actions.ms-auto {
    margin-left: auto !important;
}

/* ===== Match Card Styles ===== */
.match-card {
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all var(--transition-speed) ease;
}

.match-card-no-shadow {
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.125);
}

.match-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.match-card-no-shadow:hover {
    box-shadow: none !important;
    transform: translateY(0);
    border-color: rgba(0,0,0,0.2);
}

.match-win {
    border-left: 4px solid #28a745 !important;
}

.match-loss {
    border-left: 4px solid #dc3545 !important;
}

.match-draw {
    border-left: 4px solid #ffc107 !important;
}


.match-card:hover {
    transform: scale(1.05);
}

.match-card .card-body {
    padding: 1.25rem;
    position: relative;
}

.match-card .card-footer {
    padding: 0.5rem 1rem;
    background-color: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    transition: background-color var(--transition-speed) ease;
}

/* ===== Custom Button Sizes ===== */
.btn-xs {
    --bs-btn-padding-y: 0.10rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.8rem;
    --bs-btn-border-radius: 0.25rem;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
    border-radius: var(--bs-btn-border-radius);
    line-height: 1.3;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
}

.btn-xs i {
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
}

.btn-xs .follow-text {
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
}

.btn-xs .badge {
    font-size: 0.7rem;
    padding: 0.10rem 0.5rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: baseline;
    align-self: center;
}

.btn-xs .follow-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    text-align: center;
    line-height: 1.2;
    align-self: center;
}

.card-header h6 {
    line-height: 1.5;
}

.card-header .section-actions {
    display: flex;
    align-items: center;
}

/* More compact button styling in match cards */
.btn-group {
    display: flex;
    gap: 0.5rem;
}

/* ===== Bootstrap Button Theme Overrides (matching admin) ===== */
.btn {
    transition: all 0.3s ease;
}

.btn:focus {
    box-shadow: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: var(--team-primary);
    border-color: var(--team-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--team-secondary);
    border-color: var(--team-secondary);
}

.btn-outline-primary {
    color: var(--team-primary);
    border-color: var(--team-primary);
}

.btn-outline-primary:hover {
    background-color: var(--team-primary);
    color: white;
}

/* Normalize icon size inside buttons, badges and alerts - match admin */
.badge i.fas,
.badge i.far,
.alert i.fas,
.alert i.far,
.btn i.fas,
.btn i.far {
    font-size: 0.875em;
}

/* Action icon semantic colors - match admin */
.action-add,
.action-edit,
.action-upload,
.action-save {
    color: #28a745;
}

.action-delete,
.action-remove {
    color: #dc3545;
}

/* Dropdown item icon colors - match admin */
.dropdown-item .fa-edit,
.dropdown-item .fa-pen,
.dropdown-item .fa-pencil-alt,
.dropdown-item .fa-save {
    color: #28a745;
}

.dropdown-item .fa-trash-alt,
.dropdown-item .fa-trash,
.dropdown-item .fa-times {
    color: #dc3545;
}

/* ===== Enhanced Match Box Styling ===== */
.compact-match-box {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.compact-match-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.2);
}

.club-name {
    font-weight: 600;
    color: white;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.match-time {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* ===== List and Link Styles ===== */
.stat-link {
    text-decoration: none;
    transition: all var(--transition-speed);
}

.stat-link:hover {
    text-decoration: underline;
}

.list-group-item {
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background-color: rgba(var(--team-primary-rgb), 0.05);
}

.list-group-item.active {
    background-color: var(--team-primary);
    border-color: var(--team-primary);
}

.player-link {
    color: var(--bs-body-color);
    font-weight: 500;
    transition: all 0.2s ease;
}

.player-link:hover {
    color: var(--team-primary);
}

/* ===== Sidebar Styles ===== */
.sidebar-column {
    position: relative;
    z-index: 1000;
}

.theme-toggle {
    cursor: pointer;
    max-height: 31px;
    padding: 0.25rem 0.5rem;
    min-width: 31px;
}

/* Mobile sidebar toggle button */
.sidebar-toggle {
    display: inline-block;
    font-weight: 500;
    color: #fff;
    background-color: var(--team-primary);
    border: 1px solid var(--team-primary);
    transition: all var(--transition-speed) ease;
}

.sidebar-toggle:hover, 
.sidebar-toggle:focus {
    background-color: var(--team-secondary);
    border-color: var(--team-secondary);
    color: #fff;
}

/* Mobile sidebar behavior */
@media (max-width: 767.98px) {
    [data-sidebar-column] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease;
    }
    
    [data-sidebar-column].show {
        max-height: 2000px;
    }
    
    /* ===== Mobile Navigation Button Fixes ===== */
    /* Ensure login/register button container maintains flex layout */
    .navbar .ms-2 {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    
    /* Login/register buttons mobile styling */
    .navbar .ms-2 .btn-sm {
        min-width: auto;
        padding: 0.25rem 0.5rem;
        flex-shrink: 0;
    }
    
    /* Ensure icons are visible on mobile */
    .navbar .ms-2 .btn-sm i {
        margin: 0;
    }
    
    /* Specific spacing for login button */
    .navbar .ms-2 .btn-outline-light {
        margin-right: 0.25rem;
    }
    
    /* Mobile navbar right section alignment */
    .navbar-nav + .filter-controls {
        flex-wrap: nowrap;
        align-items: center;
    }
    
    /* Theme toggle button mobile spacing */
    .theme-toggle {
        margin-left: 0.25rem !important;
    }
}

/* ===== Ranking Table Styles ===== */
.ranking-table {
    border-radius: 8px;
    overflow: hidden;
}

.ranking-table-header {
    background-color: #f0f0f0;
    color: #333;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px
}

.ranking-table tbody tr {
    transition: all 0.2s ease;
}

.ranking-table tbody tr:hover {
    background-color: rgba(var(--team-primary-rgb), 0.1);
}

.ranking-number {
    font-weight: 700;
}

/* Ranking colors */
.rank-1 {
    color: #ffd700; /* Gold */
}

.rank-2 {
    color: #c0c0c0; /* Silver */
}

.rank-3 {
    color: #cd7f32; /* Bronze */
}

/* Top ranking backgrounds */
.ranking-top1 {
    background-color: rgba(176, 27, 29, 0.1);
}

.ranking-top2 {
    background-color: rgba(0, 0, 0, 0.1);
}

.ranking-top3 {
    background-color: rgba(205, 127, 50, 0.1);
}

.ranking-badge {
    background-color: #6c757d;
    color: #fff;
    font-weight: 500;
    min-width: 26px;
    transition: all 0.2s ease;
}

.ranking-top1 .ranking-badge {
    background-color: var(--team-primary);
    color: #fff;
}

.ranking-top2 .ranking-badge {
    background-color: var(--team-secondary);
    color: #fff;
}

.ranking-top3 .ranking-badge {
    background-color: #888;
    color: #fff;
}

/* ===== Stats Tab Styles ===== */
.stats-tabs .nav-tabs {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    display: flex;
    justify-content: space-around; /* Changed from space-between to space-around for better distribution */
    background-color: #f0f2f5;
    padding: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
}

.stats-tabs .nav-item {
    flex: 1;
    display: flex;
    margin: 0;
    padding: 0;
    max-width: 20%; /* Limit maximum width of each tab */
}

.stats-tabs .nav-link {
    margin: 0;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px; /* Reduced from 44px */
    padding: 0.25rem; /* Reduced padding */
    min-width: 40px; /* Ensure minimum width for icon */
    border-radius: 0;
    background: #f0f2f5;
    position: relative;
    overflow: visible;
}

/* Hide tab text, show only icons */
.stats-tabs .nav-link .tab-text {
    display: none;
}

.stats-tabs .nav-link i {
    font-size: 1.1rem; /* Slightly reduced font size */
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
    padding: 0;
}

.stats-tabs .nav-item:first-child .nav-link {
    border-top-left-radius: 4px;
}

.stats-tabs .nav-item:last-child .nav-link {
    border-top-right-radius: 4px;
    border-right: none;
}

/* Increase scaling effect on active tab for better visual indication */
.stats-tabs .nav-link.active i {
    transform: scale(1.15);
}

.stats-tabs .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--team-primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.stats-tabs .nav-link.active {
    color: var(--team-primary);
    background-color: var(--bs-body-bg);
    box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
    position: relative;
    z-index: 1;
}

.stats-tabs .nav-link.active::after {
    transform: scaleX(1);
}

.stats-tabs .nav-link.active i {
    transform: scale(1.15);
}

.stats-tabs .nav-link:hover:not(.active) {
    background-color: rgba(var(--team-primary-rgb), 0.05);
}

.stats-tabs .nav-link:hover:not(.active)::after {
    transform: scaleX(0.5);
    background-color: rgba(var(--team-primary-rgb), 0.3);
}

.stats-tabs .tab-content {
    background-color: var(--bs-body-bg);
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.stats-tabs-no-shadow .tab-content {
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.125);
    border-top: none;
}

/* Icon-specific styles */

.stats-tabs .nav-link i.fa-shirt {
    color: #dc3545;
}

.stats-tabs .nav-link i.fa-futbol {
    color: #198754;
}

.stats-tabs .nav-link i.fa-goal-assist-mask {
    color: #0dcaf0;
}

.stats-tabs .nav-link i.fa-star {
    color: #ffc107;
}

/* Enhance active state */
.stats-tabs .nav-link.active i {
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.2));
}

/* Dark mode adjustments */
[data-bs-theme=dark] .stats-tabs .nav-link i.fa-shirt {
    color: #e35d6a;
    filter: brightness(1.2);
}

[data-bs-theme=dark] .stats-tabs .nav-link i.fa-futbol {
    color: #2ece82;
    filter: brightness(1.2);
}

[data-bs-theme=dark] .stats-tabs .nav-link i.fa-goal-assist-mask {
    color: #1dd5f5;
    filter: brightness(1.2);
}

[data-bs-theme=dark] .stats-tabs .nav-link i.fa-star {
    color: #ffd43b;
    filter: brightness(1.2);
}

/* Match Rating specific styles */
.ranking-badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
    font-weight: 600;
}

.ranking-badge.bg-warning i {
    font-size: 0.75rem;
    margin-right: 2px;
}

.ranking-top1 .ranking-badge.bg-warning,
.ranking-top2 .ranking-badge.bg-warning,
.ranking-top3 .ranking-badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

[data-bs-theme=dark] .ranking-badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

/* Match count and votes info */
.ranking-table .text-muted.small {
    font-size: 0.7rem;
    margin-top: 2px;
    line-height: 1.2;
}

/* ===== Utility Styles ===== */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block;
    z-index: 1055; /* above Bootstrap dropdowns (1030), modals (1050), below tooltips (1070) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-speed) ease,
                visibility var(--transition-speed) ease,
                transform var(--transition-speed) ease,
                background-color var(--transition-speed) ease;
    background-color: var(--team-primary);
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#back-to-top:hover {
    background-color: var(--team-secondary);
    transform: translateY(-3px);
}

.tooltip {
    font-size: 0.85rem;
    z-index: 1050;
}

/* ===== Dark Theme Styles ===== */
[data-bs-theme=dark] {
    --bs-body-bg: #121212;
    --bs-body-color: #e0e0e0;
}

[data-bs-theme=dark] .card {
    background-color: #1e1e1e;
    border-color: #2c2c2c;
}

[data-bs-theme=dark] .card-header {
    background-color: var(--team-primary);
    color: white;
    border-bottom: none;
}

[data-bs-theme=dark] .section-card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-radius: 0.375rem;
    overflow: hidden;
}

[data-bs-theme=dark] .section-card .card-header {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

[data-bs-theme=dark] .stats-tabs .nav-tabs {
    background-color: #222;
    border-color: #333;
}

[data-bs-theme=dark] .stats-tabs .nav-link {
    color: #e0e0e0;
    background-color: #222;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

[data-bs-theme=dark] .stats-tabs .nav-link.active {
    color: #fff;
    background-color: #333;
}

[data-bs-theme=dark] .stats-tabs .nav-link.active::after {
    background-color: var(--team-primary);
}

[data-bs-theme=dark] .stats-tabs .tab-content {
    background-color: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    border-color: #333;
}

[data-bs-theme=dark] .stats-tabs-no-shadow .tab-content {
    box-shadow: none !important;
    border: 1px solid #333;
    border-top: none;
}

[data-bs-theme=dark] .ranking-table-header {
    background-color: #333;
    color: #e0e0e0;
}

[data-bs-theme=dark] .match-scoreboard .card-footer {
    background-color: #282828;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

[data-bs-theme=dark] .match-card {
    background-color: #1e1e1e;
    border-color: #2c2c2c;
}

[data-bs-theme=dark] .match-card-no-shadow {
    border-color: #333;
}

[data-bs-theme=dark] .match-card-no-shadow:hover {
    border-color: #444;
}

[data-bs-theme=dark] .match-card .card-footer {
    background-color: #282828;
    border-color: #333;
    color: #e0e0e0;
}

[data-bs-theme=dark] .list-group-item {
    background-color: #222;
    border-color: #333;
    color: #e0e0e0;
}

[data-bs-theme=dark] .list-group-item:hover {
    background-color: #2a2a2a;
}

[data-bs-theme=dark] .navbar-sticky {
    background-color: #111111; /* Match admin dark navbar color */
}

[data-bs-theme=dark] .dropdown-menu {
    background-color: #222;
    border: 1px solid #444; /* Consistent border on all sides */
    border-left: 4px solid var(--team-primary); /* Keep the left accent border */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border-radius: 0 0.375rem 0.375rem 0;
}

[data-bs-theme=dark] .dropdown-item {
    color: #e0e0e0;
}

[data-bs-theme=dark] .dropdown-item:hover,
[data-bs-theme=dark] .dropdown-item:focus,
[data-bs-theme=dark] .dropdown-item:active {
    background-color: rgba(var(--team-primary-rgb), 0.2);
    color: #fff;
}

[data-bs-theme=dark] .dropdown-menu .active {
    background-color: rgba(var(--team-primary-rgb), 0.3);
    color: #fff;
}

/* Ensure dropdown items with icons maintain proper styling in dark mode */
[data-bs-theme=dark] .dropdown-item i,
[data-bs-theme=dark] .dropdown-item .fas,
[data-bs-theme=dark] .dropdown-item .fab,
[data-bs-theme=dark] .dropdown-item .far {
    opacity: 0.9;
    color: #e0e0e0;
}

/* Force Bootstrap dropdown positioning to work correctly */
.dropdown-menu {
    position: absolute !important;
}

/* On mobile, ensure dropdowns work with Bootstrap's positioning */
/* ===== Mobile Inline Quick-Links (full nav visible in navbar on tablet/mobile) ===== */
/* The wrap is a flex item that fills all space between brand and the right-side actions.
   overflow-x:auto lives here so the inner ul can stay overflow:visible for dropdowns. */
.mobile-inline-quicklinks-wrap {
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
    position: relative;
}

/* Fade-right effect via pseudo-element — avoids mask-image which would trap
   position:fixed descendants (like the Stats dropdown) inside a local containing block */
.mobile-inline-quicklinks-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--team-primary));
    z-index: 1;
}

.mobile-inline-quicklinks-wrap::-webkit-scrollbar {
    display: none;
}

.mobile-inline-quicklinks {
    gap: 0;
    flex-wrap: nowrap;
    overflow: visible;
}

.mobile-inline-quicklinks .nav-link {
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.mobile-iqk-label {
    display: none;
}

@media (min-width: 768px) {
    .mobile-iqk-label {
        display: inline;
        margin-left: 0.25rem;
    }
}

@media (max-width: 767.98px) {
    .mobile-inline-quicklinks > .nav-item:nth-child(n+3) {
        display: none !important;
    }
}

/* Right-side actions must never shrink or wrap — always pinned to the right edge */
@media (max-width: 1199.98px) {
    #mobile-native-actions-host {
        flex-shrink: 0;
    }
}

@media (max-width: 1199.98px) {
    /* Force proper rendering for mobile dropdowns */
    .navbar-nav .dropdown-menu.show {
        position: absolute !important;
        display: block !important;
        transform: none !important;
        inset: auto !important;
        min-width: 160px !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        top: 100% !important;
        z-index: 1000 !important;
        max-width: calc(100vw - 30px) !important;
    }
    
    /* Left-aligned dropdowns (like Stats) */
    .navbar-nav .dropdown-menu.show:not(.dropdown-menu-end) {
        left: 0 !important;
        right: auto !important;
    }
    
    /* Right-aligned dropdowns - force to stay on screen */
    .navbar-nav .dropdown-menu.show.dropdown-menu-end {
        right: 15px !important;
        left: auto !important;
        transform: translateX(0) !important;
    }

    /* Stats dropdown in the inline quicklinks — uses data-bs-display=static (no Popper),
       so we position it with fixed to fully escape the overflow-x:clip + mask stacking context */
    .mobile-inline-quicklinks .dropdown-menu.show {
        position: fixed !important;
        top: var(--mobile-inline-dropdown-top, calc(var(--navbar-height) + 0px)) !important;
        left: var(--mobile-inline-dropdown-left, 1rem) !important;
        margin-top: 0 !important;
        right: auto !important;
        transform: none !important;
        z-index: 1070 !important;
        width: max-content !important;
        min-width: 160px !important;
        max-width: calc(100vw - 2rem) !important;
        overflow: visible !important;
    }
}

/* Ensure dropdown items render properly */
.dropdown-item {
    display: block !important;
    width: 100% !important;
    padding: 0.25rem 1rem !important;
    clear: both !important;
    font-weight: 400 !important;
    color: var(--bs-body-color) !important;
    text-align: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: 0 !important;
    line-height: 1.5 !important;
    min-height: auto !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-tertiary-bg) !important;
}

/* Logo styles for dynamic menus - Applied to all menu logos */
.navbar img,
.dropdown-menu img,
.nav img,
.navbar-nav img,
.dropdown-item img,
.menu-logo,
.nav-logo,
.dropdown-logo {
    transition: all 0.2s ease;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1));
    border-radius: 2px;
}

.navbar .dropdown-item:hover img,
.dropdown-menu .dropdown-item:hover img,
.nav .dropdown-item:hover img,
.navbar-nav .dropdown-item:hover img,
.dropdown-item:hover .menu-logo,
.dropdown-item:hover .nav-logo,
.dropdown-item:hover .dropdown-logo {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

/* Specific logo sizing - Applied to all menu contexts */
.menu-logo.competition,
.nav-logo.competition,
.dropdown-logo.competition {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.menu-logo.small,
.nav-logo.small,
.dropdown-logo.small {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.team-logo-medium,
.menu-logo.medium,
.nav-logo.medium,
.dropdown-logo.medium {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Standard menu logo size (default) */
.menu-logo,
.nav-logo,
.dropdown-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .team-logo-medium,
    .menu-logo.medium,
    .nav-logo.medium,
    .dropdown-logo.medium {
        width: 20px;
        height: 20px;
    }
    
    .menu-logo.competition,
    .menu-logo.small,
    .nav-logo.competition,
    .nav-logo.small,
    .dropdown-logo.competition,
    .dropdown-logo.small,
    .menu-logo,
    .nav-logo,
    .dropdown-logo {
        width: 16px;
        height: 16px;
    }
}

/* Active dropdown item styling */
.dropdown-item.active {
    background-color: var(--team-primary) !important;
    color: white !important;
}

.dropdown-item.active:hover,
.dropdown-item.active:focus {
    background-color: var(--team-secondary) !important;
    color: white !important;
}

/* Fix for notification and user dropdown content */
.notification-menu,
.user-dropdown-menu {
    min-height: 150px !important;
    overflow: visible !important;
}

.notification-menu .dropdown-item,
.user-dropdown-menu .dropdown-item {
    white-space: normal !important;
    word-wrap: break-word !important;
    padding: 0.5rem 1rem !important;
}

/* Ensure dropdown menu has proper sizing */
.dropdown-menu {
    min-height: 50px !important;
    padding: 0.5rem 0 !important;
}

/* Fix notification dropdown specific styling */
.notification-menu {
    padding: 0.75rem 0 !important;
}

.notification-menu .dropdown-item {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #e9ecef;
}

.notification-menu .dropdown-item:last-child {
    border-bottom: none;
}

/* Dark theme specific styling for tables */
[data-bs-theme=dark] table {
    color: #e0e0e0;
}

[data-bs-theme=dark] .table {
    --bs-table-color: #e0e0e0;
    --bs-table-striped-color: #e0e0e0;
    --bs-table-active-color: #fff;
    --bs-table-hover-color: #fff;
    --bs-table-bg: #1e1e1e;
    --bs-table-striped-bg: #252525;
    --bs-table-hover-bg: #2c2c2c;
    --bs-table-active-bg: #2c2c2c;
    --bs-table-border-color: #333;
}

[data-bs-theme=dark] .stats-tabs .nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Dark theme button styling */
[data-bs-theme=dark] .btn-light,
[data-bs-theme=dark] .btn-outline-light {
    color: #e0e0e0;
    border-color: #444;
    background-color: #333;
}

[data-bs-theme=dark] .btn-light:hover,
[data-bs-theme=dark] .btn-outline-light:hover {
    color: #fff;
    background-color: #444;
    border-color: #555;
}

/* Navbar toggles stay transparent in dark mode, matching light mode appearance */
[data-bs-theme=dark] .navbar .btn-outline-light {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

[data-bs-theme=dark] .navbar .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

[data-bs-theme=dark] .cta-button,
[data-bs-theme=dark] .compact-button {
    background-color: #333;
    color: #fff;
    border: 1px solid #444;
}

[data-bs-theme=dark] .cta-button:hover,
[data-bs-theme=dark] .compact-button:hover {
    background-color: var(--team-primary);
    color: #fff;
    border-color: var(--team-primary);
}

/* Form controls in dark theme */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select {
    background-color: #333;
    border-color: #444;
    color: #e0e0e0;
}

[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
    background-color: #3a3a3a;
    border-color: var(--team-primary);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgba(var(--team-primary-rgb), 0.25);
}

/* Focus states for dark theme */
[data-bs-theme=dark] .btn:focus,
[data-bs-theme=dark] .form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--team-primary-rgb), 0.25);
}

/* ===== Dark Theme - News Styles ===== */
[data-bs-theme=dark] .featured-news-section {
    background: transparent;
}

[data-bs-theme=dark] .hover-bg-light:hover {
    background-color: #2a2a2a !important;
}

[data-bs-theme=dark] .featured-hero-card,
[data-bs-theme=dark] .featured-sidebar-item {
    background-color: #1e1e1e;
    border-color: #2c2c2c;
}

[data-bs-theme=dark] .featured-hero-card:hover,
[data-bs-theme=dark] .featured-sidebar-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme=dark] .card .card-footer.bg-transparent {
    border-top-color: #2c2c2c;
}

/* ===== Helper Classes ===== */
.text-team-primary {
    color: var(--team-primary) !important;
}

.text-team-secondary {
    color: var(--team-secondary) !important;
}

.bg-team-primary {
    background-color: var(--team-primary) !important;
    color: white !important;
}

.bg-team-secondary {
    background-color: var(--team-secondary) !important;
    color: white !important;
}

.team-gradient {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%) !important;
    color: white !important;
}

.border-team-primary {
    border-color: var(--team-primary) !important;
}

.border-team-secondary {
    border-color: var(--team-secondary) !important;
}

/* Print styles */
@media print {
    .navbar-sticky,
    .sidebar-column,
    #back-to-top,
    .no-print {
        display: none !important;
    }
    
    body {
        padding-top: 0 !important;
    }
    
    .container, 
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .hero-header {
        background: none !important;
        color: #000 !important;
        padding: 0 !important;
    }
    
    .hero-content-inner {
        max-width: 100% !important;
    }
    
    .match-card,
    .section-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    .stats-tabs .nav-tabs {
        display: none !important;
    }
    
    .stats-tabs .tab-content > .tab-pane {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Fix for iOS Safari viewport issues */
@supports (-webkit-touch-callout: none) {
    .team-gradient-bg {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    #hero-container {
        width: 100%;
    }
    
    .hero-content-inner {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Notification System Styles */
.notification-dropdown .dropdown-menu {
    width: 350px;
    max-height: 500px;
    overflow-y: auto;
    border: none;
    border-radius: 0.5rem;
}

.notification-dropdown .dropdown-toggle::after {
    display: none;
}

.notification-dropdown > .nav-link {
    padding: 0.25rem 0.45rem;
    line-height: 1;
}

.notification-dropdown > .nav-link .fa-bell {
    font-size: 0.9rem;
}

.notification-menu .notification-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.notification-menu .notification-header-title {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    margin: 0;
    text-align: left;
    white-space: nowrap;
}

.notification-menu .notification-header-title i {
    margin-right: 0 !important;
    flex: 0 0 auto;
}

/* Keep notification dropdown primary actions/icons consistent with admin palette */
.notification-menu .text-primary {
    color: var(--team-primary) !important;
}

.notification-menu .btn-primary {
    background-color: var(--team-primary);
    border-color: var(--team-primary);
}

.notification-menu .btn-primary:hover,
.notification-menu .btn-primary:focus {
    background-color: var(--team-secondary);
    border-color: var(--team-secondary);
}

.notification-menu .badge.bg-primary {
    background-color: var(--team-primary) !important;
}

.notification-badge {
    font-size: 0.62rem;
    min-width: 1rem;
    padding: 0.2em 0.36em;
    transform: translate(-100%, 25%) !important;
}

/* Animation for new notification indicators */
@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

.notification-badge.animate__pulse {
    animation: pulse 2s infinite;
}

.notification-dropdown .notification-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Hover effects for notification items */
.notification-dropdown .dropdown-item {
    transition: background-color 0.2s ease;
    border-left: 3px solid transparent;
}

.notification-dropdown .dropdown-item:not(.is-read) {
    border-left-color: var(--bs-primary);
}

.notification-dropdown .dropdown-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Notification list page styles */
.list-group-item.bg-light-hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    border-left: 3px solid var(--bs-primary);
}

/* Improve spacing on notification dropdowns */
.notification-scrollable {
    max-height: 350px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.notification-scrollable::-webkit-scrollbar {
    width: 6px;
}

.notification-scrollable::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.notification-scrollable::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* Default Tabs */
.default-tabs {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-bottom: 6px;
}

.default-tabs::-webkit-scrollbar {
    height: 5px;
}

.default-tabs::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 10px;
}

.default-tabs .nav-item .nav-link {
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 5px 5px 0 0;
    font-weight: 500;
    padding: 8px 12px;
    margin-right: 3px;
    white-space: nowrap;
    transition: all 0.2s;
}

.default-tabs .nav-item .nav-link:hover {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

.default-tabs .nav-item .nav-link.active {
    color: var(--team-primary);
    background-color: var(--bs-body-bg);
    border-color: var(--team-primary) var(--bs-border-color) var(--bs-body-bg);
    border-top-width: 3px;
    margin-bottom: -6px;
    position: relative;
    z-index: 1;
}

.default-tabs .nav-item .nav-link.active:after {
    display: none;
}

@media (max-width: 767px) {
    .default-tabs .nav-item .nav-link {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/* ===== Live Match Indicator Styles ===== */
.live-indicator {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%);
    animation: pulse-live 2s infinite;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.live-indicator::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 3s infinite;
}

.live-indicator i {
    animation: rotate-ball 2s infinite ease-in-out;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

@keyframes pulse-live {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes rotate-ball {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Hover effect for live indicator */
.live-indicator:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.live-indicator:hover i {
    animation: rotate-ball 0.5s infinite ease-in-out;
}

/* Countdown expired state */
.countdown-expired {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Live countdown state */
.countdown-live .live-indicator {
    margin: 0 auto;
    display: inline-block;
}

/* ===== Enhanced Mega Menu Styles ===== */
/* Position static for mega menu to break out of normal dropdown constraints */
.dropdown.position-static .dropdown-menu {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 100% !important;
    margin-top: 0 !important;
    width: auto !important;
    min-width: 800px !important;
    max-width: 1200px !important;
}

/* Fix regular dropdown positioning */
.navbar .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    z-index: 1020 !important;
    min-width: 200px;
}

/* Ensure proper navbar item positioning */
.navbar .nav-item.dropdown {
    position: relative !important;
}

/* Override Bootstrap's dropdown positioning */
.navbar .dropdown-toggle::after {
    margin-left: 0.5rem;
}

/* Ensure dropdowns don't interfere with each other */
.navbar .nav-item.dropdown:not(.position-static) {
    position: relative;
}

.navbar .nav-item.dropdown.position-static {
    position: static !important;
}

.navbar .nav-item.dropdown.position-static .mega-menu-container {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1050;
}

/* Fix any Bootstrap popper.js conflicts */
.navbar .dropdown-menu[data-bs-popper] {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    transform: none !important;
}

/* ===== MODERN MEGA MENU ===== */

/* Mega menu container styling */
.mega-menu-container {
    border: none;
    border-radius: 14px;
    background: var(--bs-body-bg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.07);
    animation: mega-menu-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    margin-left: 0 !important;
    margin-right: auto !important;
    min-width: 900px;
    max-width: 1200px;
    width: 1150px;
    border-top: 3px solid var(--team-primary);
}

/* Dark theme mega menu */
[data-bs-theme="dark"] .mega-menu-container {
    background: #1a1f2e;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
    color: var(--bs-body-color);
    border-top-color: var(--team-primary);
}

/* Mega menu header */
.mega-menu-header {
    background: linear-gradient(135deg, var(--team-primary) 0%, color-mix(in srgb, var(--team-primary) 65%, #000) 100%);
    position: relative;
    overflow: hidden;
    padding: 14px 20px !important;
}

.mega-menu-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.mega-menu-header h6 {
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 2;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
}

.mega-menu-header p {
    position: relative;
    z-index: 2;
    font-size: 0.78rem;
    opacity: 0.82;
}

.mega-menu-header .btn-light {
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
    border: none;
    background: rgba(255,255,255,0.18);
    color: #fff;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
    position: relative;
    z-index: 2;
}

.mega-menu-header .btn-light:hover {
    background: rgba(255,255,255,0.30);
    color: #fff;
}

/* Mega menu content area */
.mega-menu-content {
    background: transparent;
    min-height: 180px;
    padding: 16px !important;
}

/* Menu column styling */
.menu-column {
    height: 100%;
    background: transparent;
    border-radius: 10px;
    padding: 12px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .menu-column {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255,255,255,0.03);
}

.menu-column:hover {
    background: var(--bs-tertiary-bg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

[data-bs-theme="dark"] .menu-column:hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Menu column titles — accent-bar style */
.menu-column-title {
    font-size: 0.72rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.menu-column-title .col-accent {
    display: inline-block;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Menu column content */
.menu-column-content {
    font-size: 0.85rem;
    min-height: 180px;
    overflow: hidden;
}

/* Prevent top-edge clipping on hover for cards in dynamic menu columns */
.menu-column-content[data-dynamic-menu] {
    overflow: visible;
    padding-top: 1px;
}

/* Menu columns for wider content */
.mega-menu-content .col-md-4 .menu-column {
    min-width: 280px;
}

/* Quick Access section */
.mega-menu-content .col-12 .menu-column-content {
    min-height: auto;
    overflow: visible;
    padding-top: 1px;
}

.mega-menu-content .col-12 .quick-link-item {
    margin-bottom: 0;
}

/* Loading state for menu columns */
.menu-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #6c757d;
    font-size: 0.8rem;
}

.menu-loading i {
    margin-right: 8px;
}

/* Quick link items */
.quick-link-item {
    transition: transform 0.18s ease;
    margin-bottom: 6px !important;
}

.quick-link-item:hover {
    transform: translateY(-1px);
}

.quick-link-item .d-flex {
    transition: background 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 10px !important;
    padding: 8px 10px !important;
    font-size: 0.8rem;
}

[data-bs-theme="dark"] .quick-link-item .d-flex {
    border-color: rgba(255,255,255,0.08);
}

/* Icon circle for quick access */
.quick-link-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}

/* Quick link hover effects */
.quick-link-item .hover-bg-primary:hover {
    background: rgba(var(--team-primary-rgb), 0.08) !important;
    border-color: rgba(var(--team-primary-rgb), 0.25) !important;
    box-shadow: 0 2px 8px rgba(var(--team-primary-rgb), 0.12) !important;
}

.quick-link-item .hover-bg-success:hover {
    background: rgba(25, 135, 84, 0.08) !important;
    border-color: rgba(25, 135, 84, 0.25) !important;
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.12) !important;
}

.quick-link-item .hover-bg-warning:hover {
    background: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.12) !important;
}

.quick-link-item .hover-bg-info:hover {
    background: rgba(13, 202, 240, 0.08) !important;
    border-color: rgba(13, 202, 240, 0.25) !important;
    box-shadow: 0 2px 8px rgba(13, 202, 240, 0.12) !important;
}

/* Transition utility */
.transition-all {
    transition: all 0.2s ease;
}

/* Mega menu footer */
.mega-menu-footer {
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color-translucent);
    padding: 8px 16px !important;
    min-height: 42px;
}

[data-bs-theme="dark"] .mega-menu-footer {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255, 255, 255, 0.07);
}

.mega-menu-footer a {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color 0.18s ease;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid transparent;
}

.mega-menu-footer a:hover {
    color: var(--team-primary);
    background: rgba(var(--team-primary-rgb), 0.07);
    border-color: rgba(var(--team-primary-rgb), 0.18);
}

.mega-menu-footer .gap-3 {
    gap: 0.4rem !important;
}

.mega-menu-footer .d-flex.align-items-center {
    min-height: 36px;
}

/* Sync pulse dot */
.sync-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    flex-shrink: 0;
    animation: sync-pulse 2.4s ease-in-out infinite;
}

@keyframes sync-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.75); }
}

/* Dynamic content within mega menu */
.mega-menu-container .dropdown-item {
    border: none;
    border-radius: 6px;
    margin-bottom: 3px;
    padding: 6px 10px;
    font-size: 0.8rem;
    transition: background 0.18s ease, color 0.18s ease;
    background: transparent;
    line-height: 1.3;
}

/* Modern match cards in mega menu */
.match-card {
    border-radius: 8px !important;
    border: 1px solid var(--bs-border-color-translucent) !important;
    background: var(--bs-body-bg) !important;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: hidden;
    position: relative;
}

[data-bs-theme="dark"] .match-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

.match-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
    border-color: var(--bs-border-color) !important;
}

.match-card-result-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0;
}

.match-card-result-bar.result-win   { background: #22c55e; }
.match-card-result-bar.result-draw  { background: #94a3b8; }
.match-card-result-bar.result-loss  { background: #ef4444; }

/* Prevent score clipping in Match Hub recent-results cards */
.mega-match-row {
    min-width: 0;
}

.mega-match-meta {
    min-width: 0;
}

.mega-match-opponent {
    min-width: 0;
}

.mega-match-opponent-name {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-match-score-wrap {
    min-width: 3.2rem;
    flex-shrink: 0;
}

.mega-match-score {
    white-space: nowrap;
}

/* Modern player cards in mega menu */
.player-card {
    border-radius: 8px !important;
    border: 1px solid var(--bs-border-color-translucent) !important;
    background: var(--bs-body-bg) !important;
    transition: box-shadow 0.18s ease;
}

[data-bs-theme="dark"] .player-card {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

.player-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}

.player-rank-badge {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(var(--team-primary-rgb), 0.12);
    color: var(--team-primary);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.player-rank-badge.rank-1 {
    background: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
}

.player-rank-badge.rank-2 {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
}

.player-rank-badge.rank-3 {
    background: rgba(180, 83, 9, 0.15);
    color: #b45309;
}

.stat-pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    line-height: 1.6;
}

.quick-link-item .fw-bold {
    font-size: 0.8rem;
    line-height: 1.2;
}

.quick-link-item .text-muted {
    font-size: 0.7rem;
    line-height: 1.1;
}

/* Compact loading states */
.menu-loading {
    font-size: 0.8rem;
    padding: 8px;
    text-align: center;
}

.mega-menu-container .dropdown-item:hover {
    background: rgba(var(--team-primary-rgb), 0.1);
    color: var(--team-primary);
}

.mega-menu-container .dropdown-item.disabled {
    color: #6c757d;
    background: transparent;
    transform: none;
}

.mega-menu-container .dropdown-item:last-child {
    margin-bottom: 0;
}

/* Responsive mega menu */
@media (max-width: 991px) {
    .mega-menu-container {
        min-width: 90vw !important;
        max-width: 95vw !important;
        left: 2.5vw !important;
        right: 2.5vw !important;
    }
    
    .mega-menu-content .row {
        flex-direction: column;
    }
    
    .mega-menu-content .col-md-3 {
        margin-bottom: 20px;
    }
    
    .mega-menu-content .col-md-3:last-child {
        margin-bottom: 0;
    }
    
    .menu-column {
        padding: 12px;
    }
    
    .mega-menu-header .row {
        flex-direction: column;
        text-align: center;
    }
    
    .mega-menu-header .col-md-4 {
        margin-top: 10px;
    }
}

@media (max-width: 576px) {
    .mega-menu-container {
        min-width: 95vw !important;
        max-width: 98vw !important;
        left: 1vw !important;
        right: 1vw !important;
    }
    
    .mega-menu-header {
        padding: 15px !important;
    }
    
    .mega-menu-content {
        padding: 15px !important;
    }
    
    .mega-menu-footer {
        padding: 10px !important;
    }
    
    .mega-menu-footer .row {
        flex-direction: column;
        text-align: center;
    }
    
    .mega-menu-footer .col-md-6:first-child {
        margin-bottom: 10px;
    }
}

/* ===== Mobile Navigation Styles ===== */
@media (max-width: 1199.98px) {
    #main-nav {
        height: var(--navbar-height);
        padding: 0;
        z-index: 1060 !important;
    }

    /* Force consistent 1rem gutter — beats Bootstrap's .container-fluid regardless of load order */
    #main-nav .nav-width {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #main-nav .navbar-brand {
        flex-shrink: 0;
        margin-left: 0.4rem;
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 130px);
    }

    #main-nav .navbar-brand:after {
        display: none;
    }

    #mobile-menu-toggle {
        border: 0;
        box-shadow: none;
        color: #fff;
        padding: 0;
        font-size: 1.15rem;
        flex-shrink: 0;
    }

    #mobile-menu-toggle:focus {
        box-shadow: none;
    }

    #navbarContent.mobile-drawer-menu {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        bottom: 0;
        width: min(86vw, 360px);
        background: linear-gradient(180deg, var(--team-primary) 0%, var(--team-secondary) 100%);
        display: block !important;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        overflow-y: auto;
        overflow-x: visible;
        padding: 0.6rem 0.85rem 1rem;
        z-index: 1065;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
        pointer-events: auto;
    }

    #navbarContent.mobile-drawer-menu.show {
        transform: translateX(0);
    }

    #mobile-nav-backdrop {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
        z-index: 1050;
    }

    body.mobile-nav-open {
        overflow: hidden;
    }

    body.mobile-nav-open #mobile-nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    #navbarContent .navbar-nav {
        width: 100%;
        margin-right: 0 !important;
    }

    #navbarContent .nav-item {
        margin: 0;
    }

    #navbarContent .navbar-nav > .nav-item > .nav-link {
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        padding: 0.8rem 0.3rem;
    }

    #navbarContent .navbar-nav > .nav-item > .nav-link i {
        width: 20px;
        text-align: center;
    }

    #navbarContent .navbar-nav > .nav-item:last-child > .nav-link {
        border-bottom: 0;
    }

    #navbarContent .navbar-nav .dropdown-menu,
    #navbarContent .navbar-nav .mega-menu-container {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 0 0.55rem 0;
        border: 0;
        border-radius: 8px;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.16);
    }

    #navbarContent .dropdown-item {
        color: #fff !important;
        white-space: normal !important;
        padding: 0.55rem 0.75rem !important;
    }

    #navbarContent .dropdown-item:hover,
    #navbarContent .dropdown-item:focus {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
    }

    #navbarContent .mega-menu-header p,
    #navbarContent .mega-menu-footer,
    #navbarContent .quick-link-item .text-muted {
        display: none;
    }

    /* ── Mega menu inside mobile drawer: dark-compatible styles ── */
    #navbarContent .mega-menu-content {
        padding: 8px !important;
    }

    #navbarContent .menu-column {
        background: rgba(0, 0, 0, 0.22) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    #navbarContent .menu-column:hover {
        background: rgba(0, 0, 0, 0.32) !important;
        box-shadow: none !important;
    }

    #navbarContent .menu-column-title {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Match & player cards – semi-transparent white instead of body-bg */
    #navbarContent .match-card,
    #navbarContent .player-card {
        background: rgba(255, 255, 255, 0.11) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    #navbarContent .match-card:hover,
    #navbarContent .player-card:hover {
        background: rgba(255, 255, 255, 0.18) !important;
        box-shadow: none !important;
    }

    /* Force white text inside cards */
    #navbarContent .match-card a,
    #navbarContent .match-card .link-body-emphasis,
    #navbarContent .match-card .fw-semibold,
    #navbarContent .match-card .fw-bold,
    #navbarContent .player-card a,
    #navbarContent .player-card .link-body-emphasis,
    #navbarContent .player-card .fw-semibold,
    #navbarContent .player-card .fw-bold {
        color: #fff !important;
    }

    #navbarContent .match-card .text-secondary,
    #navbarContent .player-card .text-secondary,
    #navbarContent .match-card .text-muted,
    #navbarContent .player-card .text-muted {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Keep result / stat colours legible on dark */
    #navbarContent .match-card .text-success { color: #4ade80 !important; }
    #navbarContent .match-card .text-danger  { color: #f87171 !important; }

    /* Empty-state and loading messages inside columns */
    #navbarContent .menu-column-content .menu-loading,
    #navbarContent .menu-column-content > .text-muted {
        color: rgba(255, 255, 255, 0.55) !important;
    }

    /* Restore row direction for nested grids inside menu columns (quick-links etc.)
       The @media (max-width: 991px) rule sets .mega-menu-content .row to column,
       which breaks the col-6 quick-links grid. */
    #navbarContent .menu-column-content .row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    /* Quick Access – compact 2-up grid on mobile */
    #navbarContent .quick-link-item .d-flex {
        padding: 6px 8px !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        gap: 7px !important;
    }

    #navbarContent .quick-link-item .d-flex:hover {
        background: rgba(255, 255, 255, 0.16) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
        box-shadow: none !important;
    }

    #navbarContent .quick-link-icon {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.75rem !important;
        flex-shrink: 0;
    }

    #navbarContent .quick-link-item .fw-bold {
        font-size: 0.78rem !important;
        color: #fff !important;
        line-height: 1.2;
    }

    #navbarContent .quick-link-item {
        margin-bottom: 0 !important;
    }

    #navbarContent .filter-controls {
        display: flex !important;
        flex-wrap: wrap;
        --mobile-control-gap: 1.55rem;
        gap: var(--mobile-control-gap);
        align-items: flex-start;
        position: relative;
        --mobile-control-height: 38px;
        --mobile-control-radius: 6px;
        --mobile-dropdown-gap: 3px;
        --mobile-section-gap: 0.4rem;
        width: 100%;
        margin-top: 0 !important;
        padding-top: var(--mobile-section-gap);
        border-top: 0;
    }

    #navbarContent .filter-controls .me-2,
    #navbarContent .filter-controls .ms-2,
    #navbarContent .filter-controls .dropdown,
    #navbarContent .filter-controls .select-with-icon {
        width: 100%;
        margin: 0 !important;
    }

    #navbarContent .filter-controls .auth-controls {
        display: flex !important;
        gap: var(--mobile-control-gap);
        width: calc((((100% - (2 * var(--mobile-control-gap))) / 3) * 2) + var(--mobile-control-gap));
        flex: 0 0 calc((((100% - (2 * var(--mobile-control-gap))) / 3) * 2) + var(--mobile-control-gap));
        min-width: 0;
    }

    #navbarContent .filter-controls .auth-controls .btn {
        flex: 1 1 0;
        margin: 0 !important;
    }

    #navbarContent .filter-controls .form-select,
    #navbarContent .filter-controls .btn,
    #navbarContent .filter-controls .theme-toggle {
        width: 100%;
        height: var(--mobile-control-height);
        min-height: var(--mobile-control-height);
        border-radius: var(--mobile-control-radius);
        box-sizing: border-box;
    }

    #navbarContent .filter-controls .notification-dropdown,
    #navbarContent .filter-controls .user-account-dropdown,
    #navbarContent .filter-controls .mobile-account-theme {
        width: calc((100% - 1.1rem) / 3) !important;
        flex: 0 0 calc((100% - 1.1rem) / 3);
        min-width: 0;
        margin: 0 !important;
        display: flex !important;
    }

    #navbarContent .filter-controls .notification-dropdown,
    #navbarContent .filter-controls .user-account-dropdown {
        position: relative;
    }

    #navbarContent .filter-controls .user-account-dropdown {
        position: static;
    }

    #navbarContent .filter-controls .notification-dropdown > .nav-link,
    #navbarContent .filter-controls .user-dropdown-btn,
    #navbarContent .filter-controls .mobile-account-theme,
    #navbarContent .filter-controls .auth-controls .btn {
        height: var(--mobile-control-height);
        min-height: var(--mobile-control-height);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: var(--mobile-control-radius);
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.35rem 0.5rem;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #navbarContent .filter-controls .notification-dropdown > .nav-link i,
    #navbarContent .filter-controls .user-dropdown-btn i,
    #navbarContent .filter-controls .mobile-account-theme i,
    #navbarContent .filter-controls .auth-controls .btn i {
        font-size: 0.95rem;
        line-height: 1;
    }

    #navbarContent .filter-controls > .mobile-account-theme {
        width: calc((100% - 1.1rem) / 3) !important;
        flex: 0 0 calc((100% - 1.1rem) / 3) !important;
        margin-left: 0 !important;
    }

    #navbarContent .filter-controls .notification-dropdown > .nav-link::after {
        display: none;
    }

    #navbarContent .filter-controls .user-dropdown-btn .d-none.d-md-inline {
        display: none !important;
    }

    #navbarContent .filter-controls .notification-menu,
    #navbarContent .filter-controls .user-dropdown-menu {
        position: absolute !important;
        top: calc(100% + var(--mobile-dropdown-gap)) !important;
        z-index: 1070 !important;
        max-width: min(320px, calc(100vw - 2rem)) !important;
        display: none;
    }

    #navbarContent .filter-controls .notification-menu .notification-header-title {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.45rem;
        text-align: left;
        white-space: nowrap;
    }

    #navbarContent .filter-controls .notification-menu .notification-header-title i {
        margin-right: 0 !important;
        flex: 0 0 auto;
    }

    #navbarContent .filter-controls .notification-menu .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        white-space: nowrap;
        width: 100% !important;
    }

    #navbarContent .filter-controls .notification-menu .btn i {
        margin-right: 0 !important;
        flex: 0 0 auto;
    }

    #navbarContent .filter-controls .notification-menu.show,
    #navbarContent .filter-controls .user-dropdown-menu.show {
        display: block !important;
    }

    #navbarContent .filter-controls .notification-menu {
        left: 0 !important;
        right: auto !important;
        width: min(320px, calc(100vw - 2rem)) !important;
        max-width: calc(100vw - 2rem) !important;
    }

    #navbarContent .filter-controls .notification-menu .dropdown-item,
    #navbarContent .filter-controls .notification-menu .dropdown-item i,
    #navbarContent .filter-controls .notification-menu .dropdown-item .fas,
    #navbarContent .filter-controls .notification-menu .dropdown-item .far,
    #navbarContent .filter-controls .notification-menu .dropdown-item .fab,
    #navbarContent .filter-controls .notification-menu .dropdown-header,
    #navbarContent .filter-controls .notification-menu .text-muted,
    #navbarContent .filter-controls .notification-menu .small {
        color: #1f2937 !important;
    }

    #navbarContent .filter-controls .notification-menu .dropdown-item:hover,
    #navbarContent .filter-controls .notification-menu .dropdown-item:focus {
        background: #f3f4f6 !important;
        color: #111827 !important;
    }

    #navbarContent .filter-controls .user-dropdown-menu {
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        top: calc(100% + var(--mobile-dropdown-gap)) !important;
        bottom: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.92rem;
        line-height: 1.35;
        color: #1f2937 !important;
        background-color: transparent !important;
    }

    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item i,
    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item .fas,
    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item .far,
    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item .fab {
        flex: 0 0 16px;
        text-align: center;
    }

    #navbarContent .filter-controls .user-dropdown-menu a,
    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item,
    #navbarContent .filter-controls .user-dropdown-menu i,
    #navbarContent .filter-controls .user-dropdown-menu .fas,
    #navbarContent .filter-controls .user-dropdown-menu .far,
    #navbarContent .filter-controls .user-dropdown-menu .fab {
        color: #1f2937 !important;
    }

    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item:hover,
    #navbarContent .filter-controls .user-dropdown-menu .dropdown-item:focus {
        background: #f3f4f6 !important;
        color: #111827 !important;
    }

    #navbarContent .filter-controls .user-dropdown-menu .small {
        font-size: 0.82rem !important;
    }

    #navbarContent .filter-controls .user-dropdown-menu .text-muted {
        color: #4b5563 !important;
    }
}

/* Animation keyframes */
@keyframes mega-menu-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mega-menu-slide-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Ensure mega menu doesn't break normal dropdowns */
.dropdown:not(.position-static) .dropdown-menu {
    position: absolute;
    transform: translate3d(0px, 100%, 0px);
}

/* ===== Player Avatar Styles for Dynamic Menus ===== */
.player-avatar {
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    object-fit: cover;
    object-position: center 25%;
    background-color: #f8f9fa;
    border-radius: 50%;
}

/* Face focus for different image orientations */
.player-avatar.portrait {
    object-position: center 20%;
}

.player-avatar.landscape {
    object-position: center 30%;
}

/* Enhanced focus for larger avatars */
.player-avatar[style*="48px"] {
    object-position: center 22%;
}

.player-avatar[style*="32px"] {
    object-position: center 25%;
}

.player-avatar[style*="24px"] {
    object-position: center 28%;
}

.player-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
    border: 2px solid #007bff;
}

.player-avatar-placeholder {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    transition: all 0.3s ease;
}

.player-avatar-placeholder:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

/* Player card enhancements in mega menu */
.mega-menu-container .player-card {
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

.mega-menu-container .player-card:hover {
    transform: translateY(-2px);
    border-color: var(--team-primary);
    box-shadow: 0 4px 10px rgba(var(--team-primary-rgb), 0.12);
}

[data-bs-theme="dark"] .mega-menu-container .player-card {
    background: #2d3748 !important;
    border-color: #4a5568;
}

[data-bs-theme="dark"] .mega-menu-container .player-card:hover {
    border-color: var(--team-primary);
    box-shadow: 0 2px 8px rgba(var(--team-primary-rgb), 0.2);
}

/* Match card enhancements in mega menu */
.mega-menu-container .match-card {
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

.mega-menu-container .match-card:hover {
    transform: translateY(-2px);
    border-color: var(--team-primary);
    box-shadow: 0 4px 10px rgba(var(--team-primary-rgb), 0.12);
}

[data-bs-theme="dark"] .mega-menu-container .match-card {
    background: #2d3748 !important;
    border-color: #4a5568;
}

[data-bs-theme="dark"] .mega-menu-container .match-card:hover {
    border-color: #0d6efd;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
}

/* Improve image loading states */
.player-avatar,
.player-avatar-placeholder {
    position: relative;
    overflow: hidden;
}

/* News item hover effect */
.hover-bg-light:hover {
    background-color: #f8f9fa !important;
    transition: background-color 0.2s ease;
}

/* ===== Enhanced Featured News Styles ===== */
.featured-news-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    padding: 0;
}

.section-title {
    color: var(--team-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.featured-hero-card {
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-hero-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1px 5px rgba(0,0,0,0.15) !important;
}

.hero-featured-img {
    height: 320px;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.featured-hero-card:hover .hero-featured-img {
    transform: scale(1.05);
}

.bg-gradient {
    background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-secondary) 100%);
}

.hover-primary:hover {
    color: var(--team-primary) !important;
    transition: color 0.2s ease;
}

.featured-sidebar-item {
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-sidebar-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 5px rgba(0,0,0,0.15) !important;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .featured-news-section {
        padding: 0;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .hero-featured-img {
        height: 200px;
    }
    
    .featured-hero-card:hover {
        transform: none;
    }
    
    .featured-sidebar-item:hover {
        transform: none;
    }
    
}

@media (max-width: 576px) {
    .section-title {
        font-size: 1.3rem;
    }
    
    .badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.5rem;
    }
    
}

.player-avatar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.player-avatar:hover::before {
    transform: translateX(100%);
}

/* ===============================================
   Theme Settings - Navigation Styles
   =============================================== */

/* Navigation Style: Pill */
.nav-style-pill .navbar-nav .nav-link {
    border-radius: 50px;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0 0.25rem;
}

.nav-style-pill .navbar-nav .nav-link:hover,
.nav-style-pill .navbar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Navigation Style: Underline */
.nav-style-underline .navbar-nav .nav-link {
    border-bottom: 3px solid transparent;
    padding-bottom: 0.75rem;
}

.nav-style-underline .navbar-nav .nav-link:hover,
.nav-style-underline .navbar-nav .nav-link.active {
    border-bottom-color: var(--team-primary, #fff);
}

/* Navigation Style: Separated */
.nav-style-separated .navbar-nav .nav-item:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    padding-right: 0.75rem;
}

.nav-style-separated .navbar-nav .nav-item {
    padding-left: 0.75rem;
}

/* ===============================================
   Theme Settings - Header Styles
   =============================================== */

/* Header Style: Centered */
.header-centered .site-branding {
    text-align: center;
}

.header-centered img {
    display: block;
    margin: 0 auto;
}

/* Header Style: Minimal */
.header-minimal {
    border-bottom: none !important;
    padding: 0.5rem 0 !important;
}

.header-minimal .site-title {
    font-size: 1.5rem;
}

/* Header Style: Modern */
.header-modern {
    background: linear-gradient(135deg, var(--team-primary, #B01B1D) 0%, var(--team-secondary, #8B1518) 100%);
    color: white;
}

.header-modern .site-title {
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===============================================
   Theme Settings - Sticky Sidebar
   =============================================== */

/* Ensure sticky sidebar works properly */
.sticky-sidebar {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 60px; /* Default fallback if inline style not applied */
    align-self: flex-start; /* Prevents sidebar from stretching */
    z-index: 100;
}

/* Adjust top position when sticky header is enabled */
.sticky-top ~ main .sticky-sidebar {
    top: 65px; /* Account for sticky header height */
}

/* Prevent sidebar from being cut off */
#leftSidebar[data-sidebar-column],
#rightSidebar {
    overflow: visible;
}

/* Smooth scrolling for sticky elements */
.sticky-sidebar {
    transition: top 0.3s ease;
}

/* Mobile: disable sticky behavior on small screens */
@media (max-width: 991px) {
    .sticky-sidebar {
        position: relative !important;
        top: auto !important;
    }
}

/* ---- Comment bubble style (feed / match / news) ---- */
.comment-item {
    display: flex;
    margin-bottom: 10px;
    gap: 8px;
}
.comment-item:last-child {
    margin-bottom: 0;
}
/* Replies: subtle indent, no heavy border */
.comment-reply {
    margin-left: 40px !important;
    margin-top: 4px;
    margin-bottom: 6px;
}
.comment-bubble {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    padding: 8px 12px;
    border-radius: 18px;
    flex: 1;
}
/* Tighter bubble for replies */
.comment-reply .comment-bubble {
    background: var(--bs-secondary-bg);
    border-radius: 14px;
}
.comment-author {
    font-weight: 600;
    font-size: 13px;
}
/* Inline @mention badge inside the bubble */
.comment-reply-mention {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    color: var(--bs-secondary-color);
    margin-left: 6px;
    vertical-align: middle;
}
.comment-reply-mention i {
    font-size: 10px;
}
.comment-text {
    font-size: 14px;
    word-wrap: break-word;
    margin-top: 1px;
}
.comment-actions {
    font-size: 12px;
    color: var(--bs-secondary-color);
    margin-top: 4px;
    display: flex;
    gap: 12px;
    align-items: center;
}
.comment-actions a {
    color: var(--bs-secondary-color);
    text-decoration: none;
}
.comment-actions a:hover {
    text-decoration: underline;
}