:root {
    color-scheme: light;
    --app-shell-max: none;
    --app-card-bg: var(--panel, #ffffff);
    --app-card-border: var(--border, #e7ecf3);
    --app-card-dark-bg: #111827;
    --app-card-dark-border: #243041;
    --app-card-radius: 24px;
    --app-card-shadow: var(--shadow, 0 12px 32px rgba(16, 24, 40, 0.08));
    --app-card-accent-height: 4px;
    --app-page-bg:
        radial-gradient(circle at top left, rgba(var(--club-primary-rgb, 75, 107, 251), .17), transparent 35rem),
        radial-gradient(circle at 85% 15%, rgba(var(--club-secondary-rgb, 34, 197, 94), .14), transparent 28rem),
        linear-gradient(135deg, #f8fafc 0%, #eef4ff 48%, #fff7ed 100%);
    --app-page-bg-dark:
        radial-gradient(circle at top left, rgba(var(--club-primary-rgb, 75, 107, 251), .22), transparent 35rem),
        radial-gradient(circle at 85% 15%, rgba(var(--club-secondary-rgb, 34, 197, 94), .18), transparent 28rem),
        linear-gradient(135deg, #020617 0%, #0f172a 55%, #111827 100%);
}

html.dark-mode {
    color-scheme: dark;
}

body,
.card,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.modal-content,
.table,
.alert,
.navbar,
.badge,
.list-group-item,
.accordion-item {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.page-wide-shell,
.app-shell,
:where(body:not(.login-page)) > .container-sm,
:where(body:not(.login-page)) > .container-md,
:where(body:not(.login-page)) > .container-lg,
:where(body:not(.login-page)) > .container-xl,
:where(body:not(.login-page)) > .container-xxl,
:where(body:not(.login-page)) > .container-fluid,
:where(body:not(.login-page)) > .container {
    width: 100% !important;
    max-width: var(--app-shell-max) !important;
    margin-inline: auto !important;
}

:where(body:not(.login-page)) :is(.card:not(.postit-card), .hero-card, .toolbar-card, .panel-card, .surface-card, .mini-card, .community-shell, .community-card, .team-news-card, .cockpit-hero, .cockpit-card, .month-card, .manage-teams-dark-surface, .team-edit-surface) {
    position: relative;
    background:
        linear-gradient(90deg, var(--club-primary, #4b6bfb) 0%, var(--club-secondary, #22c55e) 100%) top left / 100% var(--app-card-accent-height) no-repeat,
        var(--app-card-bg) !important;
    border: 1px solid var(--app-card-border) !important;
    border-radius: var(--app-card-radius) !important;
    box-shadow: var(--app-card-shadow) !important;
}

:where(body:not(.login-page)) :is(.card:not(.postit-card), .hero-card, .toolbar-card, .panel-card, .surface-card, .mini-card, .community-shell, .community-card, .team-news-card, .cockpit-hero, .cockpit-card, .month-card, .manage-teams-dark-surface, .team-edit-surface)::before {
    content: "" !important;
    position: absolute;
    inset: -1px;
    z-index: 2;
    border-radius: inherit;
    background:
        linear-gradient(90deg, var(--club-primary, #4b6bfb) 0%, var(--club-secondary, #22c55e) 100%)
        top left / 100% calc(var(--app-card-accent-height) + 1px) no-repeat;
    pointer-events: none;
}

@media (max-width: 767px) {
    :where(body:not(.login-page)) :is(.card:not(.postit-card), .hero-card, .toolbar-card, .panel-card, .surface-card, .mini-card, .community-shell, .community-card, .team-news-card, .cockpit-hero, .cockpit-card, .month-card, .manage-teams-dark-surface, .team-edit-surface) {
        border-radius: 18px !important;
    }
}

@media (max-width: 575px) {
    :where(body:not(.login-page)) :is(.card:not(.postit-card), .hero-card, .toolbar-card, .panel-card, .surface-card, .mini-card, .community-shell, .community-card, .team-news-card, .cockpit-hero, .cockpit-card, .month-card, .manage-teams-dark-surface, .team-edit-surface) {
        border-radius: 20px !important;
    }
}

body:not(.login-page) {
    --bs-primary: var(--club-primary);
    --bs-primary-rgb: var(--club-primary-rgb);
    --bs-link-color: var(--club-primary);
    --bs-link-hover-color: var(--club-primary-deep);
    min-height: 100vh;
    background: var(--app-page-bg) !important;
}

body:not(.login-page) .btn-primary {
    --bs-btn-bg: var(--club-primary) !important;
    --bs-btn-border-color: var(--club-primary) !important;
    --bs-btn-color: var(--club-primary-contrast) !important;
    --bs-btn-hover-bg: var(--club-primary-deep) !important;
    --bs-btn-hover-border-color: var(--club-primary-deep) !important;
    --bs-btn-hover-color: var(--club-primary-contrast) !important;
    --bs-btn-focus-shadow-rgb: var(--club-primary-rgb) !important;
    --bs-btn-active-bg: var(--club-primary-deep) !important;
    --bs-btn-active-border-color: var(--club-primary-deep) !important;
    --bs-btn-active-color: var(--club-primary-contrast) !important;
    --bs-btn-disabled-bg: var(--club-primary) !important;
    --bs-btn-disabled-border-color: var(--club-primary) !important;
    --bs-btn-disabled-color: var(--club-primary-contrast) !important;
    background: var(--club-primary) !important;
    border-color: var(--club-primary) !important;
    color: var(--club-primary-contrast) !important;
}

body:not(.login-page) .btn-primary:hover,
body:not(.login-page) .btn-primary:focus,
body:not(.login-page) .btn-primary:active,
body:not(.login-page) .btn-primary.active,
body:not(.login-page) .show > .btn-primary.dropdown-toggle {
    background: var(--club-primary-deep) !important;
    border-color: var(--club-primary-deep) !important;
    color: var(--club-primary-contrast) !important;
}

body:not(.login-page) .btn-primary:focus,
body:not(.login-page) .btn-primary:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(var(--club-primary-rgb), 0.25) !important;
}

body:not(.login-page) .btn-primary:disabled,
body:not(.login-page) .btn-primary.disabled {
    background: var(--club-primary) !important;
    border-color: var(--club-primary) !important;
    color: var(--club-primary-contrast) !important;
    opacity: .65;
}

body:not(.login-page) .btn-outline-primary {
    --bs-btn-color: var(--club-primary) !important;
    --bs-btn-border-color: rgba(var(--club-primary-rgb), 0.45) !important;
    --bs-btn-hover-bg: var(--club-primary) !important;
    --bs-btn-hover-border-color: var(--club-primary) !important;
    --bs-btn-hover-color: var(--club-primary-contrast) !important;
    --bs-btn-focus-shadow-rgb: var(--club-primary-rgb) !important;
    --bs-btn-active-bg: var(--club-primary) !important;
    --bs-btn-active-border-color: var(--club-primary) !important;
    --bs-btn-active-color: var(--club-primary-contrast) !important;
    color: var(--club-primary) !important;
    border-color: rgba(var(--club-primary-rgb), 0.45) !important;
}

body:not(.login-page) .btn-outline-primary:hover,
body:not(.login-page) .btn-outline-primary:focus,
body:not(.login-page) .btn-outline-primary:active,
body:not(.login-page) .btn-outline-primary.active,
body:not(.login-page) .btn-check:checked + .btn-outline-primary,
body:not(.login-page) .show > .btn-outline-primary.dropdown-toggle {
    background: var(--club-primary) !important;
    border-color: var(--club-primary) !important;
    color: var(--club-primary-contrast) !important;
}

body:not(.login-page) .btn-outline-primary:focus,
body:not(.login-page) .btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(var(--club-primary-rgb), 0.22) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--club-primary-rgb), 0.55);
    box-shadow: 0 0 0 .25rem rgba(var(--club-primary-rgb), 0.18);
}

.theme-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1085;
    min-width: 132px;
    min-height: 48px;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .theme-fab {
        right: .75rem;
        bottom: .75rem;
        min-width: 120px;
        min-height: 44px;
        font-size: .95rem;
    }
}

html.dark-mode body:not(.login-page),
body.dark-mode:not(.login-page) {
    background-color: #0b1220 !important;
    color: #e5e7eb;
}

html.dark-mode body:not(.login-page),
body.dark-mode:not(.login-page),
html.dark-mode body.bg-body-tertiary:not(.login-page),
body.dark-mode.bg-body-tertiary:not(.login-page) {
    background: var(--app-page-bg-dark) !important;
}

html.dark-mode .card:not(.postit-card),
html.dark-mode .hero-card,
html.dark-mode .toolbar-card,
html.dark-mode .panel-card,
html.dark-mode .surface-card,
html.dark-mode .mini-card,
html.dark-mode .community-shell,
html.dark-mode .community-card,
html.dark-mode .team-news-card,
html.dark-mode .cockpit-hero,
html.dark-mode .cockpit-card,
html.dark-mode .month-card,
html.dark-mode .manage-teams-dark-surface,
html.dark-mode .team-edit-surface,
html.dark-mode .modal-content,
html.dark-mode .dropdown-menu,
html.dark-mode .list-group-item,
html.dark-mode .accordion-item,
body.dark-mode .card:not(.postit-card),
body.dark-mode .hero-card,
body.dark-mode .toolbar-card,
body.dark-mode .panel-card,
body.dark-mode .surface-card,
body.dark-mode .mini-card,
body.dark-mode .community-shell,
body.dark-mode .community-card,
body.dark-mode .team-news-card,
body.dark-mode .cockpit-hero,
body.dark-mode .cockpit-card,
body.dark-mode .month-card,
body.dark-mode .manage-teams-dark-surface,
body.dark-mode .team-edit-surface,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .list-group-item,
body.dark-mode .accordion-item {
    background:
        linear-gradient(90deg, var(--club-primary, #4b6bfb) 0%, var(--club-secondary, #22c55e) 100%) top left / 100% var(--app-card-accent-height) no-repeat,
        var(--app-card-dark-bg) !important;
    color: #e5e7eb;
    border-color: var(--app-card-dark-border) !important;
}

html.dark-mode .modal-content,
html.dark-mode .dropdown-menu,
html.dark-mode .list-group-item,
html.dark-mode .accordion-item,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .list-group-item,
body.dark-mode .accordion-item {
    background: var(--app-card-dark-bg) !important;
}

html.dark-mode .table,
body.dark-mode .table {
    --bs-table-bg: #111827;
    --bs-table-color: #e5e7eb;
    --bs-table-border-color: #243041;
    --bs-table-striped-bg: #0f172a;
    --bs-table-striped-color: #e5e7eb;
    --bs-table-hover-bg: #172033;
    --bs-table-hover-color: #f3f4f6;
}

html.dark-mode .table-light,
body.dark-mode .table-light {
    --bs-table-bg: #172033;
    --bs-table-color: #f3f4f6;
    --bs-table-border-color: #243041;
}

html.dark-mode .form-control,
html.dark-mode .form-select,
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #0f172a;
    color: #e5e7eb;
    border-color: #243041;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #0f172a;
    color: #f3f4f6;
    border-color: rgba(var(--club-primary-rgb), 0.65);
    box-shadow: 0 0 0 .25rem rgba(var(--club-primary-rgb), 0.2);
}

html.dark-mode .form-check-input,
body.dark-mode .form-check-input {
    background-color: #0f172a;
    border-color: #475467;
}

.form-check-input[type="checkbox"] {
    width: 1.15em;
    height: 1.15em;
    border: 2px solid rgba(var(--club-primary-rgb), .65);
    background-color: var(--bs-body-bg);
    cursor: pointer;
}

.form-check-input[type="checkbox"]:checked {
    background-color: var(--club-primary) !important;
    border-color: var(--club-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    background-size: .82em .82em;
}

.form-check-input[type="checkbox"]:focus {
    border-color: var(--club-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--club-primary-rgb), .22);
}

.form-check-input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .55;
}

html.dark-mode .form-check-input[type="checkbox"],
body.dark-mode .form-check-input[type="checkbox"] {
    background-color: #0f172a;
    border-color: rgba(var(--club-primary-rgb), .75);
}

html.dark-mode .form-check-input[type="checkbox"]:checked,
body.dark-mode .form-check-input[type="checkbox"]:checked {
    background-color: var(--club-primary) !important;
    border-color: var(--club-primary) !important;
}

.form-switch .form-check-input[type="checkbox"] {
    width: 2em;
    height: 1em;
    border-width: 1px;
    border-radius: 2em;
    background-image: var(--bs-form-switch-bg);
    background-position: left center;
    background-size: contain;
}

.form-switch .form-check-input[type="checkbox"]:checked {
    background-image: var(--bs-form-switch-bg) !important;
    background-position: right center;
}

html.dark-mode .text-secondary,
html.dark-mode .text-muted,
html.dark-mode .form-text,
body.dark-mode .text-secondary,
body.dark-mode .text-muted,
body.dark-mode .form-text {
    color: #98a2b3 !important;
}

html.dark-mode a,
body.dark-mode a {
    color: #9ec5fe;
}

html.dark-mode .btn-outline-secondary,
html.dark-mode .btn-outline-dark,
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-dark,
body.dark-mode .btn-outline-dark {
    color: #e5e7eb;
    border-color: #475467;
}

html.dark-mode .btn-outline-secondary:hover,
html.dark-mode .btn-outline-dark:hover,
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-dark:hover,
body.dark-mode .btn-outline-dark:hover {
    background-color: #1f2937;
    color: #f3f4f6;
    border-color: #667085;
}

html.dark-mode .btn-outline-primary,
body.dark-mode .btn-outline-primary {
    color: var(--club-primary);
    border-color: rgba(var(--club-primary-rgb), 0.45);
}

html.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:hover {
    background-color: var(--club-primary);
    color: var(--club-primary-contrast);
    border-color: var(--club-primary);
}

html.dark-mode .btn-outline-light,
body.dark-mode .btn-outline-light {
    color: #f3f4f6;
    border-color: #98a2b3;
}

html.dark-mode .alert-info,
body.dark-mode .alert-info {
    background-color: #082f49;
    border-color: #0c4a6e;
    color: #e0f2fe;
}

html.dark-mode .alert-success,
body.dark-mode .alert-success {
    background-color: #052e16;
    border-color: #166534;
    color: #dcfce7;
}

html.dark-mode .alert-danger,
body.dark-mode .alert-danger {
    background-color: #450a0a;
    border-color: #7f1d1d;
    color: #fee2e2;
}

html.dark-mode .badge.text-bg-light,
body.dark-mode .badge.text-bg-light {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
}

html.dark-mode .bg-light,
html.dark-mode .list-group-item.bg-light,
html.dark-mode .form-check.bg-light,
body.dark-mode .bg-light,
body.dark-mode .list-group-item.bg-light,
body.dark-mode .form-check.bg-light {
    background-color: #172033 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

html.dark-mode .bg-light *,
body.dark-mode .bg-light * {
    color: inherit !important;
}

html.dark-mode .btn-close,
body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%);
}

html.dark-mode .shadow-sm,
html.dark-mode .shadow,
body.dark-mode .shadow-sm,
body.dark-mode .shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.35) !important;
}

html.dark-mode .hero-card,
html.dark-mode .toolbar-card,
html.dark-mode .panel-card,
html.dark-mode .glass,
html.dark-mode .stats-card,
html.dark-mode .metric-card,
body.dark-mode .hero-card,
body.dark-mode .toolbar-card,
body.dark-mode .panel-card,
body.dark-mode .glass,
body.dark-mode .stats-card,
body.dark-mode .metric-card {
    background-color: #111827 !important;
    color: #e5e7eb;
    border-color: #243041 !important;
}

html.dark-mode .hero-card .text-secondary,
html.dark-mode .toolbar-card .text-secondary,
html.dark-mode .panel-card .text-secondary,
html.dark-mode .glass .text-secondary,
body.dark-mode .hero-card .text-secondary,
body.dark-mode .toolbar-card .text-secondary,
body.dark-mode .panel-card .text-secondary,
body.dark-mode .glass .text-secondary {
    color: #98a2b3 !important;
}


html.dark-mode .form-select option,
html.dark-mode .form-select optgroup,
body.dark-mode .form-select option,
body.dark-mode .form-select optgroup {
    background-color: #0f172a;
    color: #e5e7eb;
}

html.dark-mode .set-pill,
body.dark-mode .set-pill {
    background-color: #172033;
    border-color: #243041;
    color: #e5e7eb;
}

html.dark-mode .set-pill small,
body.dark-mode .set-pill small {
    color: #98a2b3;
}

html.dark-mode .set-pill.active,
body.dark-mode .set-pill.active {
    background-color: #1d4ed8;
    border-color: #60a5fa;
    color: #eff6ff;
}

html.dark-mode .set-pill.active small,
body.dark-mode .set-pill.active small {
    color: #dbeafe;
}