/* Light Theme (default) */
:root {
    --bg-color: #e8eaed;
    --bg-secondary: #dfe1e5;
    --text-color: #212529;
    --text-muted: #6c757d;
    --border-color: #cfd2d6;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --navbar-bg: #2c3e50;
    --link-color: #2196F3;
    --bg-hover: rgba(0,0,0,0.05);
    --text-primary: #212529;
    --text-secondary: #666;
    --accent-color: #2196F3;
    --sidebar-bg: #37474f;
    --sidebar-bg-end: #263238;

    /* Premium tile tokens — used by club/news cards and map popups */
    --tile-bg: #ffffff;
    --tile-border: #e3e5e8;
    --tile-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    --tile-shadow-hover: 0 18px 36px rgba(15, 23, 42, 0.12);
    --tile-hover-ring: rgba(33, 150, 243, 0.18);
    --tile-title: #0f172a;
    --tile-muted: #475569;
    --tile-subtle: #64748b;
    --tile-divider: rgba(15, 23, 42, 0.08);
    --tile-chip-bg: rgba(15, 23, 42, 0.04);
    --tile-chip-border: rgba(15, 23, 42, 0.08);
    --tile-chip-hover-bg: rgba(15, 23, 42, 0.07);
    --tile-placeholder-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    --tile-logo-bg: #f1f5f9;
    --tile-logo-border: rgba(15, 23, 42, 0.08);

    /* Shell metrics — single source for pages that must size themselves against the
       chrome (e.g. the full-bleed map). --bottom-nav-height is the height of
       .bottom-nav (mobile only); --shell-bottom-pad is what MainLayout reserves
       below <main> for it; --content-pad-x is the horizontal padding on
       article.content, which full-bleed pages cancel with a negative margin. */
    --bottom-nav-height: 56px;
    --shell-bottom-pad: 64px;
    --content-pad-x: 1.5rem;
}

@media (max-width: 767.98px) {
    :root {
        --content-pad-x: 0.75rem;
    }
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-color: #1a1a2e;
    --bg-secondary: #16213e;
    --text-color: #e4e4e4;
    --text-muted: #a0a0a0;
    --border-color: #3a3a5c;
    --card-bg: #1e2a38;
    --input-bg: #0f3460;
    --navbar-bg: #0f3460;
    --link-color: #64b5f6;
    --bg-hover: rgba(255,255,255,0.1);
    --text-primary: #e4e4e4;
    --text-secondary: #a0a0a0;
    --accent-color: #42a5f5;
    --sidebar-bg: #111927;
    --sidebar-bg-end: #0a0f18;

    /* Override Bootstrap CSS variables so components using --bs-* adapt to dark mode */
    --bs-body-bg: #1a1a2e;
    --bs-body-color: #e4e4e4;
    --bs-card-bg: #1e2a38;
    --bs-border-color: #3a3a5c;
    --bs-secondary-bg: #16213e;
    --bs-tertiary-bg: #16213e;

    /* Premium tile tokens — deep dark gradient in dark mode */
    --tile-bg: linear-gradient(180deg, #0f1419 0%, #0a0d11 100%);
    --tile-border: rgba(255, 255, 255, 0.05);
    --tile-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    --tile-shadow-hover: 0 20px 44px rgba(0, 0, 0, 0.6);
    --tile-hover-ring: rgba(66, 165, 245, 0.2);
    --tile-title: #ffffff;
    --tile-muted: #9ca3af;
    --tile-subtle: #8b92a0;
    --tile-divider: rgba(255, 255, 255, 0.06);
    --tile-chip-bg: rgba(255, 255, 255, 0.04);
    --tile-chip-border: rgba(255, 255, 255, 0.05);
    --tile-chip-hover-bg: rgba(255, 255, 255, 0.08);
    --tile-placeholder-bg: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
    --tile-logo-bg: #1a1f26;
    --tile-logo-border: rgba(255, 255, 255, 0.06);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

a, .btn-link {
    color: var(--link-color);
}

.btn-primary {
    color: #fff;
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-primary:hover {
    background-color: #1976D2;
    border-color: #1976D2;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
    transition: opacity 0.18s ease;
}

/* Page-transition mask. During Blazor enhanced navigation the previous page's DOM
   (e.g. the home hero) stays painted until the destination HTML is fetched and
   morphed in. We hide the routed content INSTANTLY on nav start (transition: none)
   so the stale page never lingers/dissolves on screen — the consistent neutral page
   background shows through instead. When the class is removed on 'enhancedload', the
   default .content rule re-applies and the new page eases in. */
body.nav-transitioning .content {
    opacity: 0;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .content {
        transition: none;
    }

    body.nav-transitioning .content {
        opacity: 1;
    }
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Dark mode overrides for Bootstrap components */
[data-theme="dark"] .card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg);
    border-color: #4dabf7;
    color: var(--text-color);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-secondary) !important;
}

.bg-subtle {
    background-color: #f8f9fa;
    color: #212529;
}

[data-theme="dark"] .bg-subtle {
    background-color: var(--bg-secondary);
    color: var(--text-color);
}

[data-theme="dark"] .table {
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .table-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
}

[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-color);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(13, 202, 240, 0.15);
    border-color: rgba(13, 202, 240, 0.3);
    color: #6edff6;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffda6a;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.3);
    color: #ea868f;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.3);
    color: #75b798;
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-muted);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
    color: var(--text-color);
}

[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] hr {
    border-color: var(--border-color);
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--link-color, #6ea8fe);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-secondary, #a0aec0);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-secondary, #a0aec0);
}

/* Theme toggle button */
.theme-toggle {
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

/* Sidebar dark mode */
[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-end) 100%);
}

[data-theme="dark"] .top-row {
    background-color: var(--bg-secondary);
}

/* Event card image styles */
.event-card-img {
    height: 220px;
    width: 100%;
    object-fit: cover;
}

.event-detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--bg-secondary);
}

.carousel-item img {
    object-fit: cover !important;
    background-color: #000;
}

/* =============================================
   Car Show Event Cards - Image Overlay Style
   ============================================= */
.event-overlay-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    background: #1a1a1a;
    contain: content;
}

.event-overlay-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 1;
}

.event-overlay-card .card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.event-overlay-card:hover .card-img {
    transform: scale(1.05);
}

.event-overlay-card .card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.05) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    border-radius: 12px;
}

.event-overlay-card .card-title {
    font-family: 'Impact', 'Arial Black', 'Helvetica Neue', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.1;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

.event-overlay-card .card-meta {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-overlay-card .btn-tickets {
    background-color: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    align-self: flex-end;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}

.event-overlay-card .btn-tickets:hover {
    background-color: #1976D2;
    color: #fff;
}

.event-overlay-card .card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.event-overlay-card .card-badges {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.event-overlay-card .card-badges .badge {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.event-overlay-card .overlay-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
}

.event-overlay-card .no-image-placeholder {
width: 100%;
aspect-ratio: 16 / 9;
display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #37474f 0%, #546e7a 100%);
    color: rgba(255,255,255,0.5);
    font-size: 3rem;
}

/* Cancelled overlay */
.event-overlay-card.cancelled .card-img {
    filter: grayscale(70%) brightness(0.6);
}

.event-overlay-card.cancelled .card-title {
    text-decoration: line-through;
    opacity: 0.7;
}

/* Content moderation warning styles */
.content-warning {
    border-left: 4px solid #ffc107;
    background-color: rgba(255, 193, 7, 0.1);
}

[data-theme="dark"] .content-warning {
    background-color: rgba(255, 193, 7, 0.15);
}

.flagged-content {
    border-left: 4px solid #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}

[data-theme="dark"] .flagged-content {
    background-color: rgba(220, 53, 69, 0.15);
}

/* Bootstrap Icons for sidebar toggle */
.bi-chevron-left::before {
    content: "\f284";
}

.bi-chevron-right::before {
    content: "\f285";
}

/* Map icon for nav menu - global style to ensure visibility */
.bi-map-nav-menu {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    margin-right: 0.75rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 50 44'%3E%3Cpath d='M40.5 6.5c-3.6 0-6.5 2.9-6.5 6.5 0 4.3 6.5 11 6.5 11s6.5-6.7 6.5-11c0-3.6-2.9-6.5-6.5-6.5zm0 9c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zM0 37l14-6V7L0 13v24zm16-6l12 6V13l-12-6v24zm14 6l14-6V7l-14 6v24z'/%3E%3C/svg%3E");
}

/* ============================================
   SIDEBAR COLLAPSED STATE - Global Styles
   ============================================ */

/* Sidebar width when collapsed */
.sidebar-collapsed .sidebar {
    width: 70px !important;
}

/* Hide nav text and brand text when collapsed */
.sidebar-collapsed .nav-text,
.sidebar-collapsed .brand-text {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
}

/* Remove margin from icons when collapsed */
.sidebar-collapsed .sidebar .bi,
.sidebar-collapsed .sidebar [class*="-nav-menu"],
.sidebar-collapsed .sidebar svg {
    margin-right: 0 !important;
}

/* Center nav items when collapsed */
.sidebar-collapsed .nav-item {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.sidebar-collapsed .nav-link,
.sidebar-collapsed .sidebar .nav-link {
    justify-content: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Center brand when collapsed */
.sidebar-collapsed .navbar-brand {
    justify-content: center !important;
}

.sidebar-collapsed .top-row .container-fluid {
    justify-content: center !important;
}

/* Hide brand icon text, only show icon */
.sidebar-collapsed .brand-icon {
    margin-right: 0 !important;
}

/* Center toggle arrow when collapsed */
.sidebar-collapsed .sidebar-toggle-wrapper .sidebar-toggle {
    justify-content: center !important;
}

/* ============================================
   SIDEBAR TOGGLE - Bottom of sidebar nav
   ============================================ */
@media (min-width: 768px) {
    .sidebar .nav-scrollable {
        display: flex !important;
        flex-direction: column;
        height: calc(100vh - 3.5rem);
    }
}

.sidebar .sidebar-nav {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.sidebar .sidebar-toggle-wrapper {
    flex-shrink: 0;
    padding: 0.75rem 0.75rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.sidebar .sidebar-toggle-wrapper .sidebar-toggle {
    color: #b0bec5;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem;
    border-radius: 4px;
    border: none;
    background: none;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar .sidebar-toggle-wrapper .sidebar-toggle:hover {
    background-color: rgba(255,255,255,0.08);
    color: #ffffff;
}

.sidebar .sidebar-toggle-wrapper .sidebar-toggle i {
    font-size: 1.2rem;
}

/* Back to Top Button */
.btn-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1050;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.btn-back-to-top.visible {
    opacity: 0.8;
    pointer-events: auto;
}

.btn-back-to-top:hover {
    opacity: 1;
}

/* Infinite Scroll Sentinel */
.infinite-scroll-sentinel {
    min-height: 1px;
}

/* ============================================
   Rich Text Editor Styles
   ============================================ */
.rich-text-editor-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    overflow: hidden;
}

.rich-text-editor-wrapper .ql-toolbar {
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    background-color: var(--bg-secondary);
}

.rich-text-editor-wrapper .ql-container {
    border: none !important;
    font-size: 1rem;
    font-family: inherit;
    display: flex;
    flex-direction: column;
}

.rich-text-editor-wrapper .ql-editor {
    background-color: var(--input-bg, #fff);
    color: var(--text-color);
    min-height: var(--editor-min-height, 150px);
    flex: 1;
}

.rich-text-editor-wrapper .ql-editor.ql-blank::before {
    color: var(--text-muted);
    font-style: italic;
}

[data-theme="dark"] .rich-text-editor-wrapper .ql-toolbar {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .rich-text-editor-wrapper .ql-toolbar .ql-stroke {
    stroke: var(--text-color);
}

[data-theme="dark"] .rich-text-editor-wrapper .ql-toolbar .ql-fill {
    fill: var(--text-color);
}

[data-theme="dark"] .rich-text-editor-wrapper .ql-toolbar .ql-picker-label {
    color: var(--text-color);
}

[data-theme="dark"] .rich-text-editor-wrapper .ql-toolbar .ql-picker-options {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .rich-text-editor-wrapper .ql-toolbar button:hover .ql-stroke,
[data-theme="dark"] .rich-text-editor-wrapper .ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--accent-color);
}

[data-theme="dark"] .rich-text-editor-wrapper .ql-toolbar button:hover .ql-fill,
[data-theme="dark"] .rich-text-editor-wrapper .ql-toolbar button.ql-active .ql-fill {
    fill: var(--accent-color);
}

[data-theme="dark"] .rich-text-editor-wrapper .ql-snow .ql-tooltip {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .rich-text-editor-wrapper .ql-snow .ql-tooltip input[type="text"] {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Rich text rendered content */
.rich-text-content h1,
.rich-text-content h2,
.rich-text-content h3 {
    margin-top: 0.5em;
    margin-bottom: 0.3em;
}

.rich-text-content ul,
.rich-text-content ol {
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}

.rich-text-content blockquote {
    border-left: 4px solid var(--accent-color);
    padding-left: 1em;
    margin: 0.5em 0;
    color: var(--text-muted);
}

.rich-text-content a {
    color: var(--link-color);
}

.rich-text-content iframe {
    max-width: 100%;
    border-radius: 0.375rem;
}

.rich-text-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
}

/* ============================================
   Image Drop Zone Styles
   ============================================ */
.image-drop-zone {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    background-color: var(--input-bg, #fff);
    min-height: 160px;
}

.image-drop-zone.dragging {
    border-color: var(--accent-color);
    background-color: rgba(33, 150, 243, 0.08);
    transform: scale(1.01);
}

.image-drop-zone.has-files {
    border-style: solid;
    padding: 1rem;
    text-align: left;
}

.drop-zone-icon {
    font-size: 3rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.5rem;
}

.drop-zone-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.25rem;
}

.drop-zone-subtext {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.drop-zone-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0;
}

.drop-zone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    z-index: 10;
}

[data-theme="dark"] .drop-zone-overlay {
    background: rgba(26,26,46,0.85);
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.preview-item {
    position: relative;
    border-radius: 0.375rem;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--bg-secondary);
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.preview-actions {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.preview-item:hover .preview-actions {
    opacity: 1;
}

.preview-actions .btn {
    padding: 2px 6px;
    font-size: 0.75rem;
    line-height: 1;
}

/* ============================================
   Image Crop Modal
   ============================================ */
.crop-container {
    max-height: 60vh;
    overflow: hidden;
    background: #000;
    border-radius: 0.375rem;
}

.crop-container img {
    max-width: 100%;
    display: block;
}

/* Cropper.js v2 replaces the <img> with a <cropper-canvas> sibling and hides the original. The
   element's own shadow styles give it display:block with min-height:100px and no height, so
   without an explicit height here the whole cropper renders as a 100px sliver. v1 needed none of
   this because the <img> itself set the height. */
.crop-container cropper-canvas {
    display: block;
    width: 100%;
    height: 60vh;
    max-height: 60vh;
}

/* v2 draws its own shade element inside a shadow root, so the old .cropper-modal dark-mode
   override has nothing to target and has been removed rather than left to rot. */

/* ============================================
   Lightbox Styles
   ============================================ */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: pointer;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-content img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.375rem;
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.lightbox-close:hover {
    opacity: 1;
}

/* ============================================
   Improved Carousel Styles
   ============================================ */
.carousel-counter {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    z-index: 5;
}

.carousel-fullscreen-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
    transition: background 0.2s;
}

.carousel-fullscreen-btn:hover {
    background: rgba(0,0,0,0.8);
}

.event-carousel-wrapper {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
}

.event-carousel-wrapper .carousel-item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: none;
}

.thumbnail-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scrollbar-width: thin;
}

.thumbnail-strip::-webkit-scrollbar {
    height: 4px;
}

.thumbnail-strip::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 2px;
}

.thumbnail-item {
    flex-shrink: 0;
    width: 72px;
    height: 54px;
    border-radius: 0.25rem;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.thumbnail-item:hover,
.thumbnail-item.active {
    opacity: 1;
    border-color: var(--accent-color);
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================
   Custom fifths grid unit (col-lg-2-4)
   Bootstrap 5 has no 5-per-row column. The analytics
   dashboards (EventAnalytics / EventFunnelAnalytics)
   render 5 metric cards per row on large screens.
   Below lg the markup falls back to col-6 (2/row) and
   col-md-4 (3/row), so this only affects desktop widths.
   ============================================ */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* ============================================
   Mobile Layout Improvements
   ============================================ */

/* --- Global mobile spacing & touch targets --- */
@media (max-width: 767.98px) {
    /* Reduce content padding on mobile */
    .content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Larger touch targets for all buttons */
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: 0.35rem 0.75rem;
    }

    /* Form controls touch sizing */
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 1rem;
    }

    /* Badge touch targets */
    .badge {
        padding: 0.4em 0.65em;
        font-size: 0.75rem;
    }

    /* Cards: tighter padding */
    .card-body {
        padding: 1rem;
    }

    /* Container override */
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* --- Home page: Event cards mobile grid --- */
@media (max-width: 767.98px) {
    /* Full-width single column cards */
    .row.g-4 > [class*="col-md-6"],
    .row.g-4 > [class*="col-md-4"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Cards: compact on mobile */
    .event-overlay-card .card-img-overlay {
        padding: 1rem;
    }

    .event-overlay-card .card-title {
        font-size: 1.2rem;
    }

    .event-overlay-card .card-meta {
        font-size: 0.75rem;
    }

    .event-overlay-card .btn-tickets {
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
        min-height: 44px;
    }

    /* Search/filter row stacking */
    .card-body .row.g-3 > [class*="col-md"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* --- Full-card tap link (entire card clickable) --- */
.event-overlay-card-link {
    display: block;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.event-overlay-card-link:hover,
.event-overlay-card-link:focus {
    color: inherit;
    text-decoration: none;
}

/* --- Filter toggle & collapsible panel --- */
.filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 20px;
    padding: 0.4rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.filter-toggle-btn .badge {
    font-size: 0.7rem;
    padding: 0.2em 0.5em;
    border-radius: 10px;
}

.filter-panel {
    animation: filterSlideDown 0.2s ease-out;
}

@keyframes filterSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Featured Carousel --- */
.featured-carousel-wrapper {
    position: relative;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.featured-carousel {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
}

.featured-carousel::-webkit-scrollbar {
    display: none;
}

.featured-carousel-card {
    flex: 0 0 calc(33.333% - 0.667rem);
    max-width: calc(33.333% - 0.667rem);
    scroll-snap-align: start;
    display: flex;
}

.featured-carousel-card > * {
    width: 100%;
}

/* Adjust card width based on total card count */
.fc-count-1 .featured-carousel-card {
    flex: 0 1 560px;
    max-width: 560px;
}

.fc-count-2 .featured-carousel-card {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
}

.featured-carousel-dots {
    display: none;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.featured-carousel-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.4;
    border: none;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.featured-carousel-dots .dot.active {
    background: var(--accent-color);
    opacity: 1;
}

/* Feature explanation cards (fallback when no featured events) */
.feature-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    width: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.feature-card-icon {
    font-size: 2.5rem;
    color: var(--bs-primary);
    margin-bottom: 1rem;
}

.feature-card h5 {
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
}

@media (max-width: 767.98px) {
    .featured-carousel {
        gap: 0;
        overflow: hidden;
        position: relative;
        justify-content: flex-start;
    }

    .featured-carousel-card,
    .fc-count-1 .featured-carousel-card,
    .fc-count-2 .featured-carousel-card {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    /* Only active card visible; others stacked behind */
    .featured-carousel-card.fc-hidden {
        display: none;
    }

    .featured-carousel-card.fc-active {
        display: flex;
    }

    /* Slide-in from right (next) */
    .featured-carousel-card.fc-slide-in-right {
        display: flex;
        animation: fcSlideInRight 0.4s ease forwards;
    }

    /* Slide-out to left (next) */
    .featured-carousel-card.fc-slide-out-left {
        display: flex;
        animation: fcSlideOutLeft 0.4s ease forwards;
    }

    /* Slide-in from left (prev) */
    .featured-carousel-card.fc-slide-in-left {
        display: flex;
        animation: fcSlideInLeft 0.4s ease forwards;
    }

    /* Slide-out to right (prev) */
    .featured-carousel-card.fc-slide-out-right {
        display: flex;
        animation: fcSlideOutRight 0.4s ease forwards;
    }

    .featured-carousel-dots {
        display: flex;
    }

    .feature-card {
        height: 180px;
        min-height: 180px;
        padding: 1.5rem 1rem;
    }
}

@keyframes fcSlideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes fcSlideOutLeft {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX(-100%); opacity: 0; }
}

@keyframes fcSlideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

@keyframes fcSlideOutRight {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

/* --- Event Detail page mobile --- */
@media (max-width: 767.98px) {
    /* Stack columns */
    .container > .row > .col-md-8,
    .container > .row > .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Event title smaller on mobile */
    .container h1 {
        font-size: 1.5rem;
    }

    /* Action buttons: full width on mobile */
    .event-action-buttons {
        flex-direction: column;
    }

    .event-action-buttons .btn {
        flex: 1 1 100%;
    }

    .event-action-buttons .ms-auto {
        margin-left: 0 !important;
    }
}

/* =====================================================================
   Flatpickr Dark Mode Overrides
   ===================================================================== */
[data-theme="dark"] .flatpickr-calendar {
    background: #16213e;
    border-color: #3a3a5c;
}
[data-theme="dark"] .flatpickr-day {
    color: #e4e4e4;
}
[data-theme="dark"] .flatpickr-day:hover {
    background: #0f3460;
}
[data-theme="dark"] .flatpickr-day.selected {
    background: #1b6ec2;
    border-color: #1b6ec2;
}
[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-current-month input.cur-year {
    background: #16213e;
    color: #e4e4e4;
}
[data-theme="dark"] .flatpickr-weekdays,
[data-theme="dark"] span.flatpickr-weekday {
    background: #16213e;
    color: #a0a0a0;
}
[data-theme="dark"] .flatpickr-day.flatpickr-disabled {
    color: #6c757d;
}
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: #e4e4e4;
}

/* =====================================================================
   Mapbox GL Orphan Cleanup
   ===================================================================== */
body > div.mapboxgl-popup,
body > div.mapboxgl-map {
    display: none !important;
}

/* Prevent pull-to-refresh and overscroll when interacting with maps */
.mapboxgl-map {
    touch-action: none;
    overscroll-behavior: contain;
}

/* =====================================================================
   Mapbox Popup - Dark Premium Design
   ===================================================================== */
.mapboxgl-popup-content {
    padding: 0 !important;
    background: var(--tile-bg) !important;
    border: 1px solid var(--tile-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--tile-shadow-hover), var(--tile-shadow) !important;
    overflow: hidden;
    color: var(--tile-title);
}

.mapboxgl-popup-tip {
    display: none !important;
}

.mapboxgl-popup-close-button {
    color: var(--tile-subtle) !important;
    font-size: 22px !important;
    width: 28px !important;
    height: 28px !important;
    right: 6px !important;
    top: 6px !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    background: var(--tile-chip-bg) !important;
    border: 1px solid var(--tile-chip-border) !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mapboxgl-popup-close-button:hover {
    background: rgba(33, 150, 243, 0.14) !important;
    color: var(--accent-color) !important;
    border-color: rgba(33, 150, 243, 0.35) !important;
}

.map-popup {
    min-width: 240px;
    max-width: 280px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.map-popup-img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.map-popup-body {
    padding: 0.9rem 1rem 1rem;
}

.map-popup-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tile-title);
    margin-bottom: 0.55rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.map-popup-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--tile-muted);
    margin-bottom: 0.35rem;
    line-height: 1.35;
}
.map-popup-meta svg {
    flex-shrink: 0;
    color: var(--accent-color);
    opacity: 0.95;
}
.map-popup-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.map-popup-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.45rem 0.85rem;
    background: linear-gradient(180deg, #2196F3 0%, #1976D2 100%);
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.map-popup-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(33, 150, 243, 0.45);
    filter: brightness(1.08);
    color: #fff !important;
}

/* Popup action row: primary view-event button + ghost directions button side by side */
.map-popup-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.map-popup-btn--ghost {
    background: var(--tile-chip-bg);
    color: var(--tile-title) !important;
    border: 1px solid var(--tile-chip-border);
    box-shadow: none;
}
.map-popup-btn--ghost:hover {
    background: var(--tile-chip-hover-bg);
    color: var(--tile-title) !important;
    box-shadow: none;
    filter: none;
}

/* Hide footer on fullscreen map page. This is the ONLY mechanism — MapView.razor.css
   used to also push it away with margin-bottom:-100px; that duplicate is gone. */
article:has(.mapview-fullscreen) ~ footer {
    display: none;
}

/* The map sizes itself to the viewport, so the shell must not add padding under it. */
article:has(.mapview-fullscreen) {
    padding-bottom: 0;
}

    /* Social actions - horizontal scroll */
    .btn-group:has(.dropdown) {
        flex-shrink: 0;
    }

    /* Carousel full bleed on mobile */
    .event-carousel-wrapper {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        border-radius: 0;
    }

    .event-carousel-wrapper .carousel-inner {
        border-radius: 0 !important;
    }

    .event-detail-img {
        /* handled by container */
    }

    .event-carousel-wrapper .carousel-item img {
        aspect-ratio: 16 / 9;
    }

    /* Thumbnail strip scroll */
    .thumbnail-strip {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Comment textarea larger tap area */
    .card textarea.form-control {
        min-height: 60px;
    }

    /* Side-by-side detail fields stack */
    .card-body .row > .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.75rem;
    }
}

/* --- Create/Edit Event form mobile --- */
@media (max-width: 767.98px) {
    /* Full width form */
    .row > .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Coordinate inputs stack */
    .row > .col-md-6:has(input[type="number"]) {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Category checkboxes full width */
    .row > .col-md-6:has(.form-check) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Image drop zone compact */
    .image-drop-zone {
        padding: 1.25rem;
        min-height: 120px;
    }

    .drop-zone-icon {
        font-size: 2rem;
    }

    .preview-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 0.5rem;
    }

    /* Rich text editor compact toolbar */
    .rich-text-editor-wrapper .ql-toolbar {
        padding: 4px !important;
    }

    .rich-text-editor-wrapper .ql-toolbar .ql-formats {
        margin-right: 4px !important;
    }
}

/* --- Profile page mobile --- */
@media (max-width: 767.98px) {
    .container > .row > .col-md-4,
    .container > .row > .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Profile avatar sizing */
    .profile-avatar {
        width: 100px !important;
        height: 100px !important;
    }
}

/* A row-action dropdown inside .table-responsive is cut off by its own scroll container.
   Bootstrap sets overflow-x:auto, and CSS cannot express "scroll sideways but overflow freely
   downwards" — a non-visible value on one axis forces the other to auto — so the menu is clipped
   vertically. Verified in the browser: .table-responsive computes to auto/auto, not auto/visible.

   Popper cannot escape it either, because Bootstrap's Dropdown exposes no positioning-strategy
   option, so releasing the container is the available fix. Scoped to the moment a menu is
   actually open, so the table still scrolls horizontally the rest of the time. Browsers without
   :has() simply keep today's behaviour. */
.table-responsive:has(.dropdown-menu.show) {
    overflow: visible;
}

/* --- Admin page mobile --- */
@media (max-width: 767.98px) {
    /* Tables horizontal scroll */
    .table-responsive,
    .card-body:has(> .table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        min-width: 600px;
    }

    /* Admin tab pills scrollable */
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-item,
    .nav-pills .nav-item {
        flex-shrink: 0;
    }

    /* Admin nav tabs — touch target sizing */
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        min-height: 44px;
        padding: 0.625rem 1rem;
        display: inline-flex;
        align-items: center;
    }
}

/* --- Lightbox mobile --- */
@media (max-width: 767.98px) {
    .lightbox-content {
        max-width: 100vw;
        max-height: 100vh;
        padding: 0;
    }

    .lightbox-content img {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .lightbox-close {
        top: 0.5rem;
        right: 0.5rem;
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
    }
}

/* --- Hide carousel indicator dots on mobile, keep arrows --- */
@media (max-width: 767.98px) {
    .carousel-indicators {
        display: none !important;
    }
}

/* --- Responsive event images --- */
.event-card-img,
.event-overlay-card .card-img {
    max-width: 100%;
    height: auto;
}

.event-overlay-card .card-img {
    /* Restore overlay card fixed height */
    height: 100%;
    object-fit: cover;
}

.event-card-img {
    /* Restore card image fixed height */
    height: 220px;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .event-detail-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .carousel-item img {
        max-width: 100%;
        object-fit: cover;
    }
}

/* --- Image crop modal mobile --- */
@media (max-width: 767.98px) {
    .modal-dialog.modal-crop {
        margin: 0;
        max-width: 100%;
        width: 100%;
        height: 100%;
    }

    .modal-dialog.modal-crop .modal-content {
        height: 100%;
        border: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-dialog.modal-crop .modal-body {
        flex: 1;
        overflow: auto;
    }

    .crop-container {
        max-height: calc(100vh - 180px);
    }

    .crop-container cropper-canvas {
        height: calc(100vh - 180px);
        max-height: calc(100vh - 180px);
    }

    /* Aspect ratio buttons wrap */
    .btn-group.btn-group-sm {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* General modals: near-fullscreen on mobile */
    .modal-dialog.modal-dialog-centered {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
}

/* --- Back to top: mobile position (above 56px bottom nav) --- */
@media (max-width: 767.98px) {
    .btn-back-to-top {
        bottom: calc(56px + 1rem);
        right: 1rem;
        width: 48px;
        height: 48px;
    }
}

/* --- Touch swipe hint for carousel --- */
.swipe-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 0.25rem 0;
    opacity: 0.7;
}

@media (min-width: 768px) {
    .swipe-hint {
        display: none;
    }
}

/* --- Mobile event navigation bar --- */
.swipe-nav-hint {
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}

/* --- PWA install prompt --- */
.pwa-install-prompt {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--header-bg, #1a1d23);
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1rem;
}

@media (max-width: 767.98px) {
    .pwa-install-prompt {
        bottom: 56px;
        bottom: calc(56px + env(safe-area-inset-bottom));
    }

    .pwa-install-prompt .btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* --- Mobile bottom safe area (for devices with home indicator) --- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 767.98px) {
        .content {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }

        .btn-back-to-top {
            bottom: calc(56px + 1rem + env(safe-area-inset-bottom));
        }
    }
}

/* Override Bootstrap's :root { scroll-behavior: smooth } so navigation scroll resets
   are instant. Explicit JS smooth scrolls (back-to-top, scrollIntoView) still work
   because they pass behavior:'smooth' on the call itself. */
html,
:root {
    scroll-behavior: auto !important;
}

/* --- Reduced motion for users with vestibular disorders (WCAG) --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Touch device: show actions that are hover-only on desktop --- */
@media (hover: none) {
    .preview-actions {
        opacity: 1;
    }

    /* MB2-M1: Enlarge preview crop/delete buttons for touch targets */
    .preview-actions .btn {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }

    .event-overlay-card:hover {
        transform: none;
    }

    .event-overlay-card:hover .card-img {
        transform: none;
    }

    /* MOB-v13-009: feature-card hover disabled on touch */
    .feature-card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* --- Mobile footer link touch targets --- */
@media (max-width: 767.98px) {
    footer a {
        display: inline-block;
        min-height: 44px;
        padding: 8px 0;
        line-height: 28px;
    }
}

/* --- Print stylesheet --- */
@media print {
    .sidebar,
    .top-row,
    .navbar,
    .cookie-consent-banner,
    .pwa-install-prompt,
    .btn-back-to-top,
    #blazor-error-ui,
    footer {
        display: none !important;
    }

    main {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .bottom-nav,
    .mobile-action-bar {
        display: none !important;
    }

    .more-backdrop,
    .more-panel {
        display: none !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
        break-inside: avoid;
    }
}

/* --- Pagination touch targets on mobile (MB2-H5) --- */
@media (max-width: 767.98px) {
    .pagination .page-link {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- MB2-M3: Thumbnail strip items larger on mobile for touch --- */
@media (max-width: 575.98px) {
    .thumbnail-item {
        width: 80px;
        height: 60px;
    }
}

/* --- MB2-M7: CSS contain on repeated card elements --- */
.club-card,
.news-card,
.event-overlay-card {
    contain: layout style;
}

/* --- MB2-L4: ClubPage banner shorter on narrow phones --- */
.club-banner {
    height: 200px;
}

@media (max-width: 575.98px) {
    .club-banner {
        max-height: 140px;
    }
}

.article-carousel-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* --- MB2-L5: Home feed toggle compact on very narrow screens --- */
@media (max-width: 360px) {
    .btn-group .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}

/* --- MB2-M6: Profile avatar proper CSS class --- */
.profile-avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.profile-avatar-placeholder {
    width: 150px;
    height: 150px;
}

/* --- Club page accent theming ---
   The club owner's accent color (or Bootstrap primary as fallback) brands the whole page:
   active tab, tab hover, links, and section-header accents. Applied only where accent-as-
   border / accent-as-text stays readable (never as a button fill, to avoid low contrast on
   light accent colors — consistent with how the header already uses the raw color). */
.club-page-root {
    --club-accent: var(--bs-primary);
}
.club-page-root .nav-tabs .nav-link.active {
    color: var(--club-accent);
    border-bottom-color: var(--club-accent);
    box-shadow: inset 0 -2px 0 0 var(--club-accent);
}
.club-page-root .nav-tabs .nav-link:hover {
    color: var(--club-accent);
}
.club-page-root .club-section-title {
    border-left: 3px solid var(--club-accent);
    padding-left: 0.6rem;
}
.club-page-root .club-accent-text {
    color: var(--club-accent);
}
.club-page-root .club-accent-btn {
    background-color: var(--club-accent);
    border-color: var(--club-accent);
    color: #fff;
}
.club-page-root .club-accent-btn:hover {
    filter: brightness(0.92);
    color: #fff;
}
.club-page-root .club-accent-outline-btn {
    border-color: var(--club-accent);
    color: var(--club-accent);
}
.club-page-root .club-accent-outline-btn:hover {
    background-color: var(--club-accent);
    border-color: var(--club-accent);
    color: #fff;
}

/* Club pinned announcement — accent-tinted banner */
.club-page-root .club-pinned-announcement {
    border-left: 4px solid var(--club-accent);
    background: color-mix(in srgb, var(--club-accent) 8%, transparent);
    border-radius: 0;
    color: var(--text-color, inherit);
}
.club-page-root .club-pinned-announcement .bi-megaphone-fill {
    color: var(--club-accent);
}

/* Club featured event hero card */
.club-page-root .club-featured-event {
    border: 1px solid var(--club-accent);
    color: var(--text-color, inherit);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.club-page-root .club-featured-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.club-featured-img {
    width: 100%;
    height: 100%;
    min-height: 160px;
    object-fit: cover;
}

/* Defense-in-depth against author-supplied About markup escaping its card: establish a
   containing block for any positioned descendant and force descendants static, so even if a
   positioning class slipped past the sanitizer it cannot become a full-viewport overlay. Scoped
   to the rendered About (.club-about), NOT the live Quill editor, whose tooltips need positioning. */
.club-page-root .club-about {
    contain: layout;
}
.club-page-root .club-about * {
    position: static !important;
}

/* Club facts: a responsive grid of key-fact tiles (value big, label muted below). */
.club-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}
.club-fact-tile {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: 3px solid var(--club-accent);
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
}
.club-fact-value {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
}
.club-fact-label {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Club sponsors / partners: a responsive row of logo tiles. Logos sit on a neutral tile so
   transparent/dark logos stay legible in both themes; muted until hovered to keep them subtle. */
.club-sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}
.club-sponsor-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 64px;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
a.club-sponsor-tile { opacity: 0.85; }
a.club-sponsor-tile:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.club-sponsor-tile img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Richer About blocks: simple tables (e.g. a meeting schedule) rendered from the
   sanitized About HTML get readable borders and spacing. */
.club-page-root table {
    border-collapse: collapse;
    margin: 0.5rem 0 1rem;
    width: auto;
    max-width: 100%;
}
.club-page-root th,
.club-page-root td {
    border: 1px solid var(--bs-border-color, #dee2e6);
    padding: 0.4rem 0.6rem;
    text-align: left;
}
.club-page-root thead th {
    background: color-mix(in srgb, var(--club-accent) 12%, transparent);
}
.club-page-root caption {
    caption-side: top;
    font-weight: 600;
    padding-bottom: 0.25rem;
}

/* --- Club banner layout presets (premium perk) ---
   Applied to .club-header as .club-preset-{standard|compact|hero}. "standard" keeps the
   default look; "compact" tightens the banner for a low-key header; "hero" gives a taller,
   more dramatic banner with a larger club name. Only rendered when the club is entitled
   (subscription active, PaymentsExempt, or the subscription model is not yet enforced) —
   the server falls the class back to "standard" otherwise, so these styles are purely visual. */
.club-preset-compact .club-banner {
    height: 130px;
}
.club-preset-compact .club-banner h2 {
    font-size: 1.4rem;
}
.club-preset-hero .club-banner {
    height: 320px;
}
.club-preset-hero .club-banner h2 {
    font-size: 2.4rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
@media (max-width: 575.98px) {
    .club-preset-compact .club-banner {
        max-height: 110px;
    }
    .club-preset-hero .club-banner {
        max-height: 220px;
    }
}

/* --- Club gallery --- */
.club-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}
.club-gallery-item {
    position: relative;
    margin: 0;
}
.club-gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.club-gallery-item figcaption {
    margin-top: 0.25rem;
}
.club-gallery-open {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}
.club-gallery-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.club-gallery-item:hover .club-gallery-actions,
.club-gallery-actions:focus-within {
    opacity: 1;
}
.club-empty-state .bi {
    opacity: 0.5;
}

/* --- Guide pages (/guide + persona guides) --- */
.guide-page {
    max-width: 800px;
}
.guide-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.guide-hub-card {
    display: block;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    color: var(--text-color, #212529);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.guide-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    color: var(--text-color, #212529);
}
.guide-hub-card i {
    font-size: 1.6rem;
    color: var(--accent-color, #2196F3);
}
.guide-hub-card h5 {
    margin: 0.4rem 0 0.2rem;
}
.guide-sections .guide-section + .guide-section {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-color, #dee2e6);
}
.guide-section-icon {
    font-size: 1.4rem;
    color: var(--accent-color, #2196F3);
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.guide-cta-card {
    border-left: 4px solid var(--accent-color, #2196F3);
    border-radius: 0;
}
/* Guide cards in the featured carousel — linked, so lock text colors against <a>
   inheritance and give them the same visual language as the guide hub cards. */
.feature-card-link {
    cursor: pointer;
    color: var(--text-color, #212529);
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    justify-content: flex-start;
    text-align: left;
    align-items: flex-start;
    padding: 1.5rem 1.5rem 1.25rem;
    gap: 0.25rem;
}
.feature-card-link .feature-card-icon {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(33, 150, 243, 0.12);
    color: var(--accent-color, #2196F3);
}
.feature-card-link h5 {
    color: var(--text-color, #212529);
}
.feature-card-more {
    margin-top: auto;
    padding-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-color, #2196F3);
}
.featured-carousel-card:hover .feature-card-link {
    border-color: var(--accent-color, #2196F3);
}

/* Profile header banner — subtle theme-aware gradient behind the avatar/name block */
.profile-header-banner {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-color));
    border: 1px solid var(--border-color);
}

/* Achievement badge chips (profile) — fixed metallic tiers, readable in both themes */
.achievement-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    cursor: default;
}
.achievement-chip.tier-bronze { background: linear-gradient(135deg, #a05a2c, #7a4520); }
.achievement-chip.tier-silver { background: linear-gradient(135deg, #7d8a97, #5c6773); }
.achievement-chip.tier-gold   { background: linear-gradient(135deg, #c9a227, #8f7418); }
.achievement-chip-img { width: 18px; height: 18px; object-fit: contain; }

/* Club-awarded badge chips — background comes from the template's validated hex color */
.club-badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    cursor: default;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   MB3 Mobile Responsive Fixes
   ========================================================================== */

/* --- MBI-4: Safe area insets for notch/dynamic island devices --- */
body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* --- MOB-v12-006: Prevent native pull-to-refresh conflict on mobile --- */
@media (max-width: 767.98px) {
    body {
        overscroll-behavior-y: contain;
    }
}

/* --- MB3-M1: Image crop modal — use modal-lg only on tablets+ --- */
@media (min-width: 576px) {
    .modal-crop {
        max-width: 800px;
    }
}

/* --- MOB-v10-004: Checkbox/radio touch targets on mobile --- */
@media (max-width: 767.98px) {
    .form-check-input {
        width: 1.25em;
        height: 1.25em;
    }

    .form-check {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 0.5em;
    }

    .form-check-label {
        padding-top: 0.125em;
    }
}

/* --- MB3-M4: Prevent iOS auto-zoom on input focus --- */
@media (max-width: 575.98px) {
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

/* --- MB3-M5: Action button rows wrap on small screens --- */
@media (max-width: 575.98px) {
    .btn-group {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .d-flex > .btn + .btn {
        margin-left: 0;
    }
}

/* --- MB3-L3: Smaller headings on mobile to prevent layout shift --- */
@media (max-width: 575.98px) {
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.15rem; }
}

/* --- MB3-L4: Slightly larger article padding on mobile for thumb comfort --- */
@media (max-width: 575.98px) {
    .card-body {
        padding: 1rem;
    }
}

/* --- MB3-L2: Reduced data mode — respect Save-Data preference --- */
@media (prefers-reduced-data: reduce) {
    .featured-carousel-wrapper,
    .carousel-indicators,
    .bi::before {
        /* Keep icons but disable carousel auto-transitions */
    }

    .card-img-top,
    .event-image,
    .profile-avatar,
    img[src^="data:image"] {
        image-rendering: pixelated;
    }

    /* Disable background images and decorative shadows */
    .hero-banner,
    .featured-carousel-wrapper {
        background-image: none !important;
    }

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

    /* Reduce animation/transition overhead */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* MBI-21: Reduced data mode — Save-Data header/API class-based rules */
.save-data img:not(.essential-img) {
    image-rendering: pixelated;
}

.save-data .card-img-top {
    max-height: 120px;
}

/* Hide carousels in data saver mode — heavy image payload */
.save-data .featured-carousel,
.save-data .carousel {
    display: none !important;
}

/* Compact text fallback for featured section when carousel is hidden */
.save-data .featured-fallback {
    display: block !important;
}

/* Disable all animations and transitions to reduce rendering cost */
.save-data *,
.save-data *::before,
.save-data *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
}

.save-data .event-detail-img {
    max-height: 200px;
}

/* Disable background images and decorative shadows */
.save-data .hero-banner,
.save-data .featured-carousel-wrapper {
    background-image: none !important;
}

.save-data .card {
    box-shadow: none !important;
}

/* MB2-L3: Breadcrumb touch targets for mobile */
@media (max-width: 575.98px) {
    .breadcrumb-item a,
    .breadcrumb-item.active {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        padding: 0 0.25rem;
    }
}

/* --- MOB-v13-006: OLED dark background for PWA standalone splash --- */
@media (display-mode: standalone) {
    [data-theme="dark"] {
        background-color: #000;
    }
}

/* --- MOB-v13-010: Prevent white flash on dark mode page load --- */
[data-theme="dark"] {
    color-scheme: dark;
}

/* MBI-19: OLED dark mode — true black for battery savings */
@media (prefers-color-scheme: dark) {
    [data-theme="dark"] body,
    [data-theme="dark"] .sidebar,
    [data-theme="dark"] .offcanvas {
        background-color: #000 !important;
    }
    
    [data-theme="dark"] .card,
    [data-theme="dark"] .modal-content {
        background-color: #0a0a0a !important;
    }

    /* MOB-v10-003: OLED coverage for bottom-nav, more-panel, dropdowns, list items */
    [data-theme="dark"] .bottom-nav {
        background-color: #000 !important;
    }

    [data-theme="dark"] .more-panel {
        background-color: #0a0a0a !important;
    }

    [data-theme="dark"] .dropdown-menu {
        background-color: #0a0a0a !important;
    }

    [data-theme="dark"] .list-group-item {
        background-color: #0a0a0a !important;
    }

    /* MOB-v11-001: OLED coverage for action bars, search overlay, PTR, forms, tables, alerts */
    [data-theme="dark"] .mobile-action-bar {
        background-color: #000 !important;
    }

    [data-theme="dark"] .mobile-search-overlay,
    [data-theme="dark"] .mobile-search-header {
        background-color: #000 !important;
    }

    [data-theme="dark"] .ptr-indicator {
        background-color: #0a0a0a !important;
    }

    [data-theme="dark"] .form-control,
    [data-theme="dark"] .form-select {
        background-color: #0d0d1a !important;
    }

    [data-theme="dark"] .table {
        --bs-table-bg: #000;
    }

    [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
        --bs-table-accent-bg: #0a0a0a;
    }

    [data-theme="dark"] .alert-info,
    [data-theme="dark"] .alert-warning,
    [data-theme="dark"] .alert-danger,
    [data-theme="dark"] .alert-success {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }

    [data-theme="dark"] .flatpickr-calendar {
        background: #0a0a0a !important;
    }

    /* MOB-v12-008: OLED root variable for PWA install prompt */
    [data-theme="dark"] {
        --header-bg: #000;
    }
}

/* MBI-23: High contrast mode support */
@media (prefers-contrast: more) {
    .card {
        border-width: 2px !important;
        border-color: currentColor !important;
    }
    
    .btn {
        border-width: 2px !important;
        font-weight: 600 !important;
    }
    
    a {
        text-decoration: underline !important;
    }
    
    .text-muted {
        opacity: 0.85 !important;
    }

    .badge {
        border: 1px solid currentColor;
    }

    /* MOB-v12-007: Form control borders for high contrast */
    .form-control,
    .form-select {
        border-width: 2px !important;
    }
}

/* MBI-16: Skeleton loading shimmer */
.skeleton {
    background: linear-gradient(90deg, var(--bs-secondary-bg) 25%, var(--bs-tertiary-bg) 50%, var(--bs-secondary-bg) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.25rem;
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5rem;
    width: 80%;
}

.skeleton-title {
    height: 1.5em;
    margin-bottom: 0.75rem;
    width: 60%;
}

.skeleton-img {
    height: 200px;
    width: 100%;
}

.skeleton-avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
    }
}

/* MB3-L1: Image blur-up placeholder backgrounds */
.card-img,
.card-img-top,
.event-detail-img,
.event-overlay-card img,
img[loading="lazy"] {
    background: linear-gradient(135deg, var(--bs-secondary-bg) 0%, var(--bs-tertiary-bg) 100%);
    transition: opacity 0.3s ease;
}

.no-image-placeholder {
    background: linear-gradient(135deg, var(--bs-secondary-bg) 0%, var(--bs-tertiary-bg) 50%, var(--bs-secondary-bg) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    color: var(--bs-secondary-color);
    font-size: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .card-img,
    .card-img-top,
    .event-detail-img,
    .event-overlay-card img,
    img[loading="lazy"] {
        transition: none;
    }
}

/* MBI-10: Pull-to-refresh indicator */
.ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50px);
    z-index: 1060;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    pointer-events: none;
}

.ptr-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--border-color, #dee2e6);
    border-top-color: #2196F3;
    border-radius: 50%;
}

.ptr-indicator.ptr-ready .ptr-spinner,
.ptr-indicator.ptr-refreshing .ptr-spinner {
    animation: ptr-spin 0.6s linear infinite;
}

@keyframes ptr-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ptr-indicator {
        transition: none;
    }
    .ptr-indicator.ptr-ready .ptr-spinner,
    .ptr-indicator.ptr-refreshing .ptr-spinner {
        animation: none;
    }
}

/* MBI-1: Sticky mobile action bar */
.mobile-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding-bottom: env(safe-area-inset-bottom);
}

/* MBI-9: Raise overlays above bottom nav on mobile */
@media (max-width: 767.98px) {
    .mobile-action-bar {
        bottom: 56px;
        bottom: calc(56px + env(safe-area-inset-bottom));
    }
}

/* MBI-22: Chart horizontal scroll hint */
.chart-container {
    position: relative;
}
.chart-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to left, var(--bs-body-bg, white), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.chart-container.is-scrollable::after {
    opacity: 1;
}

/* MBI-22: Mobile analytics chart improvements */
@media (max-width: 767.98px) {
    /* Make chart containers horizontally scrollable when bars are too narrow */
    .chart-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Set a minimum width for each bar column to prevent too-thin bars */
    .chart-container .d-flex.align-items-end > div {
        min-width: 18px !important;
    }

    /* Make charts taller on mobile for better readability */
    .chart-container .d-flex.align-items-end {
        height: 120px !important;
    }

    /* Slightly larger bar count labels */
    .chart-container small {
        font-size: 0.65rem;
    }

    /* Make stat card numbers slightly smaller to prevent overflow */
    .card-body h2 {
        font-size: 1.5rem;
    }
    .card-body h3 {
        font-size: 1.3rem;
    }

    /* Improve table readability on mobile */
    .table-responsive table {
        font-size: 0.85rem;
    }

    /* Progress bars need wider min-width */
    .progress {
        min-height: 8px;
    }
}

/* --- MOB-v13-001: btn-close touch targets on mobile --- */
@media (max-width: 767.98px) {
    .btn-close {
        width: 44px;
        height: 44px;
        padding: 0.75rem;
        background-size: 0.75em;
    }
}

/* --- MOB-v13-002: Carousel prev/next control touch targets on mobile --- */
@media (max-width: 767.98px) {
    .carousel-control-prev,
    .carousel-control-next {
        width: 15%;
        min-width: 44px;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 2rem;
        height: 2rem;
    }
}

/* --- MOB-v13-003: Form switch touch targets on mobile --- */
@media (max-width: 767.98px) {
    .form-switch .form-check-input {
        width: 2.5em;
        height: 1.5em;
    }

    .form-switch {
        min-height: 44px;
        padding-left: 3em;
    }
}

/* --- MOB-v13-004: Focus-visible styles for touch devices --- */
*:focus-visible {
    outline: 2px solid var(--accent-color, #2196F3);
    outline-offset: 2px;
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(33, 150, 243, 0.35);
}

/* --- MOB-v13-005: Dropdown items touch targets on mobile --- */
@media (max-width: 767.98px) {
    .dropdown-item {
        min-height: 44px;
        padding: 0.625rem 1rem;
        display: flex;
        align-items: center;
    }
}

/* --- MOB-v13-008: touch-action on scrollable containers --- */
.thumbnail-strip {
    touch-action: pan-x;
}

.nav-tabs,
.nav-pills {
    touch-action: pan-x;
}

.chart-container {
    touch-action: pan-x pan-y;
}

/* --- MOB-v16-001: Admin table inline action button spacing --- */
@media (max-width: 767.98px) {
    .table td .btn + .btn {
        margin-left: 4px;
    }

    .table td .btn.btn-sm {
        padding: 0.35rem 0.5rem;
    }
}

/* --- MOB-v16-002: Profile interactive stat counter touch targets --- */
@media (max-width: 767.98px) {
    [role="button"][tabindex="0"] {
        min-height: 44px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

/* MBI-11: Mobile search overlay */
.mobile-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: var(--bs-body-bg, white);
    display: flex;
    flex-direction: column;
}

.mobile-search-header {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, white);
}

.mobile-search-body {
    flex: 1;
    overflow-y: auto;
}

/* MBI-12: Admin tab bar horizontal scroll on mobile (12 tabs overflow on 375px) */
@media (max-width: 767.98px) {
    .admin-tab-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        padding-bottom: 4px;
    }
    .admin-tab-list::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
}