/* Prevent white flash on dark theme load - AGGRESSIVE */
html {
    background-color: #f5f5f7 !important;
}

    html.theme-dark-loading,
    html.theme-dark {
        background-color: #0f172a !important;
        color: #f1f5f9 !important;
    }

        html.theme-dark-loading body,
        html.theme-dark body {
            background-color: #0f172a !important;
            color: #f1f5f9 !important;
        }

    html.theme-dark-sidebar {
        background-color: #f5f5f7 !important;
    }

    /* Apply dark theme CSS variables to html and body elements immediately */
    html.theme-dark,
    html[data-bs-theme="dark"],
    body.theme-dark,
    html.theme-dark body {
        --bg-color: #0f172a;
        --card-bg: #1e293b;
        --text-primary: #f1f5f9;
        --text-secondary: #94a3b8;
        --border-color: #334155;
        --light-gray: #1e293b;
        --primary-blue: #60a5fa;
        --sidebar-bg: #2d3748;
        --sidebar-border: #1a202c;
        --sidebar-text: #a0aec0;
        --sidebar-text-hover: #ffffff;
        --sidebar-item-hover-bg: #3d4757;
        --sidebar-item-active-bg: #877cf2;
        --bg-secondary: #1e293b;
    }

    html.theme-dark-sidebar,
    body.theme-dark-sidebar,
    html.theme-dark-sidebar body {
        --sidebar-bg: #2d3748;
        --sidebar-border: #1a202c;
        --sidebar-text: #a0aec0;
        --sidebar-text-hover: #ffffff;
        --sidebar-item-hover-bg: #3d4757;
        --sidebar-item-active-bg: #877cf2;
        --text-primary: #1e293b;
    }

:root {
    --primary-color: #8b5cf6;
    --primary-blue: #3b82f6;
    --sidebar-width-collapsed: 90px;
    --sidebar-width-expanded: 250px;
    --light-gray: #f5f5f7;
    --bg-secondary: #f8fafc;
    --border-color: #e5e7eb;
    --bg-color: #f5f5f7;
    --card-bg: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #6b7280;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    /* Bootstrap primary color variables */
    --bs-primary: #877cf2;
    --bs-primary-rgb: 135, 124, 242;
    --bs-menu-active-color: #ffffff;
    /* Light Sidebar - White background for light mode */
    --sidebar-bg: #ffffff;
    --sidebar-border: #e5e7eb;
    --sidebar-text: #4a5568;
    --sidebar-text-hover: #1a202c;
    --sidebar-item-hover-bg: #f7fafc;
    --sidebar-item-active-bg: #edf2f7;
    /* Shadow variables */
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* My Tournaments — role accent colours */
    --myt-role-1: #7c3aed;
    --myt-role-2: #2563eb;
    --myt-role-3: #d97706;
    --myt-role-4: #059669;
}

/* ── Live Auction Glass‑morphism Enhancements ── */
/* Design tokens */
:root {
    --gradient-start: #8b5cf6;
    --gradient-end:   #6366f1;
    --glass-bg:       rgba(255,255,255,0.12);
    --glass-shadow:   0 8px 32px rgba(0,0,0,0.25);
}

/* Card glass effect for public auction view */
.ta-card-public {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--glass-shadow);
    border: 1px solid rgba(255,255,255,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ta-card-public:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.35);
}
/* Live badge static gradient */
.ta-pill-live {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: #fff;
}

/* Dark mode tweak – keep readability */
body.theme-dark .ta-card-public {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
}

/* Theme: Light with Dark Sidebar */
body.theme-dark-sidebar {
    --bg-color: #f5f5f7;
    --light-gray: #f5f5f7;
    /* Dark Sidebar */
    --sidebar-bg: #2d3748;
    --sidebar-border: #1a202c;
    --sidebar-text: #a0aec0;
    --sidebar-text-hover: #ffffff;
    --sidebar-item-hover-bg: #3d4757;
    --sidebar-item-active-bg: #877cf2;
}

/* Theme: Full Dark Mode */
body.theme-dark {
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border-color: #334155;
    --light-gray: #1e293b;
    --primary-blue: #60a5fa;
    /* Dark Sidebar - same as default */
    --sidebar-bg: #2d3748;
    --sidebar-border: #1a202c;
    --sidebar-text: #a0aec0;
    --sidebar-text-hover: #ffffff;
    --sidebar-item-hover-bg: #3d4757;
    --sidebar-item-active-bg: #877cf2;
    --bg-secondary: #1e293b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Mobile Touch Optimizations & Fast Click ── */
button,
a,
input,
select,
textarea,
.btn,
.sidebar-item,
.mobile-menu-item,
.mobile-more-item,
.jp-back-btn,
.focused-back-btn,
.oa-back-btn,
.ar-hero-back-btn,
.page-back-btn,
.myt-back-btn,
.theme-toggle-btn,
.header-icon-btn,
.logout-btn,
[role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    transition: none;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    /* Enable smooth transitions after page load */
    body.transitions-enabled {
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* Theme specific adjustments */
    body.theme-dark .top-header {
        background-color: #1e293b;
        border-bottom-color: #334155;
    }

/* Sidebar */
.sidebar {
    position: fixed;
    left: 0;
    top: 61px;
    width: var(--sidebar-width-expanded);
    height: calc(100vh - 61px);
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    z-index: 1000 !important;
    transition: all 0.3s ease;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 3px;
    }

    .sidebar:hover::-webkit-scrollbar-thumb {
        background: #cbd5e1;
    }

        .sidebar:hover::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

body.theme-dark-sidebar .sidebar:hover::-webkit-scrollbar-thumb,
body.theme-dark .sidebar:hover::-webkit-scrollbar-thumb {
    background: #475569;
}

    body.theme-dark-sidebar .sidebar:hover::-webkit-scrollbar-thumb:hover,
    body.theme-dark .sidebar:hover::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }

.sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}

/* Sidebar Navigation */
.sidebar-nav {
    padding: 10px 0 20px 0;
}

.nav-section {
    margin-bottom: 10px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
    margin: 1px 6px;
    border-radius: 8px;
}

.sidebar.collapsed .sidebar-item {
    flex-direction: column;
    padding: 6px 4px;
    margin: 1px 6px;
    text-align: center;
    justify-content: center;
}

.sidebar-item:hover {
    background-color: var(--sidebar-item-hover-bg);
    color: var(--sidebar-text-hover);
}

/* Active state for EXPANDED sidebar only */
.sidebar:not(.collapsed) .sidebar-item.active {
    background: linear-gradient(270deg, rgba(var(--bs-primary-rgb), 0.7) 0%, var(--bs-primary) 100%);
    box-shadow: 0 .125rem .375rem 0 rgba(var(--bs-primary-rgb), 0.3);
    color: #ffffff;
}

/* Dark theme active menu with gradient and shadow - EXPANDED only */
body.theme-dark-sidebar .sidebar:not(.collapsed) .sidebar-item.active,
body.theme-dark .sidebar:not(.collapsed) .sidebar-item.active {
    background: linear-gradient(270deg, rgba(var(--bs-primary-rgb), 0.7) 0%, var(--bs-primary) 100%);
    box-shadow: 0 .125rem .375rem 0 rgba(var(--bs-primary-rgb), 0.3);
    color: #ffffff;
}

/* Active state for COLLAPSED sidebar (tile view) - text and icon color only */
.sidebar.collapsed .sidebar-item.active,
.sidebar.collapsed .sidebar-item.active:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--bs-primary) !important;
}

    .sidebar.collapsed .sidebar-item.active i,
    .sidebar.collapsed .sidebar-item.active:hover i {
        color: var(--bs-primary) !important;
    }

body.theme-dark-sidebar .sidebar.collapsed .sidebar-item.active,
body.theme-dark .sidebar.collapsed .sidebar-item.active,
body.theme-dark-sidebar .sidebar.collapsed .sidebar-item.active:hover,
body.theme-dark .sidebar.collapsed .sidebar-item.active:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--bs-primary) !important;
}

    body.theme-dark-sidebar .sidebar.collapsed .sidebar-item.active i,
    body.theme-dark .sidebar.collapsed .sidebar-item.active i,
    body.theme-dark-sidebar .sidebar.collapsed .sidebar-item.active:hover i,
    body.theme-dark .sidebar.collapsed .sidebar-item.active:hover i {
        color: var(--bs-primary) !important;
    }

.sidebar-item i {
    font-size: 20px;
    min-width: 24px;
    text-align: center;
}

.sidebar.collapsed .sidebar-item i {
    font-size: 23px;
}

.sidebar-item span {
    margin-left: 12px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.sidebar.collapsed .sidebar-item span {
    margin-left: 0;
    margin-top: 5px;
    font-size: 12px;
    opacity: 1;
}

/* Simple z-index fix */
.modal-backdrop {
    z-index: 1050 !important;
}

.modal {
    z-index: 1060 !important;
}
/* Flatpickr Date Picker Styles */
.flatpickr-calendar {
    z-index: 9999 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--card-bg) !important;
    font-family: inherit !important;
}
.flatpickr-months { background: var(--card-bg) !important; border-radius: 12px 12px 0 0; }
.flatpickr-months .flatpickr-month { background: var(--card-bg) !important; color: var(--text-primary) !important; fill: var(--text-primary) !important; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { fill: var(--text-secondary) !important; color: var(--text-secondary) !important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--primary-blue) !important; }
.flatpickr-weekdays { background: var(--card-bg) !important; }
.flatpickr-weekday { background: var(--card-bg) !important; color: var(--text-secondary) !important; font-weight: 600; }
.flatpickr-days { border-left: none !important; border-right: none !important; }
.dayContainer { border-right: none !important; }
.flatpickr-day { color: var(--text-primary) !important; border-radius: 8px !important; }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus { background: #7c3aed !important; border-color: #7c3aed !important; color: #fff !important; }
.flatpickr-day.today { border-color: #7c3aed !important; }
.flatpickr-day.today:hover { background: #ede9fe !important; }
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--text-secondary) !important; opacity: 0.45 !important; }
.flatpickr-day.flatpickr-disabled { opacity: 0.3 !important; }
.flatpickr-current-month { color: var(--text-primary) !important; }
.flatpickr-current-month input.cur-year { color: var(--text-primary) !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: none !important;
}
.numInputWrapper span { border-color: var(--border-color) !important; }
.numInputWrapper span:hover { background: var(--bg-secondary) !important; }
.bid-datepicker-clear {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px;
    border: none;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    background: var(--card-bg);
    color: #7c3aed;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.bid-datepicker-clear:hover,
.bid-datepicker-clear:focus { background: var(--bg-secondary); }

/* ── Flatpickr Time Picker (Redesign matching reference) ──────── */
.flatpickr-calendar.hasTime.noCalendar {
    width: auto !important;
    min-width: 250px !important;
    max-width: 280px !important;
    padding: 22px 24px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .flatpickr-calendar.hasTime.noCalendar,
.dark .flatpickr-calendar.hasTime.noCalendar {
    background: #1e1e2d !important;
    border-color: #2b2b40 !important;
    box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.4) !important;
}

.flatpickr-calendar.hasTime.noCalendar .bid-datepicker-clear {
    display: none !important;
}

.flatpickr-calendar.hasTime.noCalendar .flatpickr-time {
    height: auto !important;
    max-height: none !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.flatpickr-calendar.hasTime.noCalendar .numInputWrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 60px !important;
    height: 110px !important;
    padding: 24px 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
}

.flatpickr-calendar.hasTime.noCalendar .numInputWrapper input.numInput {
    width: 56px !important;
    height: 52px !important;
    background: #f1f3f5 !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-align: center !important;
    padding: 0 !important;
    line-height: 52px !important;
    display: block !important;
    margin: 0 !important;
    box-shadow: none !important;
}

[data-theme="dark"] .flatpickr-calendar.hasTime.noCalendar .numInputWrapper input.numInput,
.dark .flatpickr-calendar.hasTime.noCalendar .numInputWrapper input.numInput {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}

.flatpickr-calendar.hasTime.noCalendar .numInputWrapper span.arrowUp,
.flatpickr-calendar.hasTime.noCalendar .numInputWrapper span.arrowDown {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    width: 36px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.flatpickr-calendar.hasTime.noCalendar .numInputWrapper span.arrowUp {
    top: 0px !important;
}

.flatpickr-calendar.hasTime.noCalendar .numInputWrapper span.arrowDown {
    bottom: 0px !important;
    top: auto !important;
}

.flatpickr-calendar.hasTime.noCalendar .numInputWrapper span.arrowUp:after {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-top: 3px solid #1e293b !important;
    border-left: 3px solid #1e293b !important;
    transform: rotate(45deg) !important;
    border-right: none !important;
    border-bottom: none !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
}

.flatpickr-calendar.hasTime.noCalendar .numInputWrapper span.arrowDown:after {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-bottom: 3px solid #1e293b !important;
    border-right: 3px solid #1e293b !important;
    transform: rotate(45deg) !important;
    border-left: none !important;
    border-top: none !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
}

[data-theme="dark"] .flatpickr-calendar.hasTime.noCalendar .numInputWrapper span.arrowUp:after,
[data-theme="dark"] .flatpickr-calendar.hasTime.noCalendar .numInputWrapper span.arrowDown:after,
.dark .flatpickr-calendar.hasTime.noCalendar .numInputWrapper span.arrowUp:after,
.dark .flatpickr-calendar.hasTime.noCalendar .numInputWrapper span.arrowDown:after {
    border-color: #cbd5e1 !important;
}

.flatpickr-calendar.hasTime.noCalendar .numInputWrapper span.arrowUp:hover:after,
.flatpickr-calendar.hasTime.noCalendar .numInputWrapper span.arrowDown:hover:after {
    border-color: #009688 !important;
}

.flatpickr-calendar.hasTime.noCalendar .flatpickr-time-separator {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 52px !important;
    height: 52px !important;
    width: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

[data-theme="dark"] .flatpickr-calendar.hasTime.noCalendar .flatpickr-time-separator,
.dark .flatpickr-calendar.hasTime.noCalendar .flatpickr-time-separator {
    color: #cbd5e1 !important;
}

.flatpickr-calendar.hasTime.noCalendar .flatpickr-am-pm {
    background: #009688 !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    height: 48px !important;
    width: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: none !important;
    text-align: center !important;
    margin-left: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 150, 136, 0.25) !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.5px !important;
}

.flatpickr-calendar.hasTime.noCalendar .flatpickr-am-pm:hover {
    background: #00897b !important;
    box-shadow: 0 4px 10px rgba(0, 150, 136, 0.35) !important;
    transform: translateY(-1px) !important;
}

.flatpickr-calendar.hasTime.noCalendar.arrowTop:before {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.flatpickr-calendar.hasTime.noCalendar.arrowTop:after {
    border-bottom-color: #ffffff !important;
}

[data-theme="dark"] .flatpickr-calendar.hasTime.noCalendar.arrowTop:after,
.dark .flatpickr-calendar.hasTime.noCalendar.arrowTop:after {
    border-bottom-color: #1e1e2d !important;
}

.tempus-dominus-widget .active {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
}

/* ── Global Page Loader ─────────────────────────────────────── */
.loader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.loader-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Top shimmer bar */
.loader-overlay::before {
    content: '';
    position: fixed;
    top: 0;
    left: -100%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-blue), #8b5cf6, transparent);
    border-radius: 0 0 4px 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10000;
    pointer-events: none;
}

.loader-overlay.active::before {
    opacity: 1;
    animation: loader-shimmer 1.4s ease-in-out infinite;
}

@keyframes loader-shimmer {
    0%   { left: -60%; }
    100% { left: 110%; }
}

/* Card */
.loader-overlay .loader-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 36px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.05);
    transform: scale(0.92) translateY(6px);
    transition: transform 0.15s ease;
}

.loader-overlay.active .loader-content {
    transform: scale(1) translateY(0);
}

/* Dual-ring counter-rotating spinner */
.loader-spinner {
    width: 52px;
    height: 52px;
    position: relative;
    flex-shrink: 0;
}

.loader-spinner::before,
.loader-spinner::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
}

.loader-spinner::before {
    inset: 0;
    border: 3.5px solid rgba(59, 130, 246, 0.15);
    border-top-color: var(--primary-blue);
    animation: spin 0.85s linear infinite;
}

.loader-spinner::after {
    inset: 10px;
    border: 3px solid rgba(139, 92, 246, 0.12);
    border-top-color: #8b5cf6;
    animation: spin 0.65s linear infinite reverse;
}

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

.loader-overlay .loader-text {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.loader-dots {
    display: inline-block;
    width: 18px;
    text-align: left;
}

.loader-dots::after {
    content: '';
    animation: dots 1.4s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20%  { content: ''; }
    40%      { content: '.'; }
    60%      { content: '..'; }
    80%, 100% { content: '...'; }
}

/* Tablet & mobile */
@media (max-width: 640px) {
    .loader-overlay .loader-content {
        padding: 28px 38px;
        border-radius: 16px;
        gap: 16px;
    }

    .loader-spinner {
        width: 44px;
        height: 44px;
    }

    .loader-spinner::after {
        inset: 9px;
    }

    .loader-overlay .loader-text {
        font-size: 13px;
    }
}

/* Fullscreen content-area helper class
   When .content-fullscreen is applied to body, hide navigation UI and expand #content-area
*/
.content-fullscreen .sidebar-wrapper,
.content-fullscreen .top-header,
.content-fullscreen .desktop-footer,
.content-fullscreen .mobile-footer-menu,
.content-fullscreen .mobile-header-bar,
.content-fullscreen .breadcrumb-section {
    display: none !important;
}

.content-fullscreen #content-area {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    overflow: auto !important;
    background: var(--bg-color) !important;
}

.content-fullscreen .sidebar-overlay {
    display: none !important;
}

/* ── Focused mode: chrome-less page (My Registrations → Auction Result / Team Squad).
   Hides sidebar / header / footer / breadcrumb on both desktop and mobile, leaving
   only the back-button top bar + content. ─────────────────────────────────────── */
.focused-mode .sidebar-wrapper,
.focused-mode .top-header,
.focused-mode .desktop-footer,
.focused-mode .mobile-footer-menu,
.focused-mode .mobile-header-bar,
.focused-mode .breadcrumb-section {
    display: none !important;
}
.focused-mode .main-wrapper {
    margin-left: 0 !important;
    margin-top: 0 !important;   /* header is hidden — reclaim its reserved space */
    padding-bottom: 0 !important;
}
.focused-topbar {
    position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: center;
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: var(--card-bg, #fff);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.focused-back-btn {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    text-decoration: none; cursor: pointer;
    color: var(--text-primary, #1e293b);
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    transition: background .15s, border-color .15s, transform .1s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.focused-back-btn:hover { background: var(--sidebar-item-hover-bg, #e5e7eb); }
.focused-back-btn:active { transform: scale(0.92); }
.focused-back-btn i { font-size: 18px; line-height: 1; }
.focused-title {
    position: absolute; left: 50%; transform: translateX(-50%);
    max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 16px; font-weight: 600; color: var(--text-primary, #1e293b);
    pointer-events: none;
}
/* Optional right-side badge (e.g. LIVE status) — layout/position only; the
   view supplies its own color/pill class via ViewData["FocusedBadgeClass"]. */
.focused-badge { margin-left: auto; flex-shrink: 0; white-space: nowrap; }

/* ── Mobile-only focused top bar (Edit Profile / Update Player Status) ──────────
   The back-button top bar shows only on phones/small tablets; desktop keeps the
   normal page (sidebar/header + title/subtitle). body.focused-mode-mobile is toggled
   by _Layout's syncFocusedMode() whenever a .js-focused-page fragment is showing, and
   every effect below is gated to ≤768px so desktop is completely unaffected. This is
   separate from the layout's full-screen `.focused-mode` (LiveAuction etc.). */
.focused-topbar.js-focused-page { display: none; }

@media (max-width: 768px) {
    .focused-topbar.js-focused-page { display: flex; }

    .focused-mode-mobile .sidebar-wrapper,
    .focused-mode-mobile .top-header,
    .focused-mode-mobile .desktop-footer,
    .focused-mode-mobile .mobile-footer-menu,
    .focused-mode-mobile .mobile-header-bar,
    .focused-mode-mobile .breadcrumb-section {
        display: none !important;
    }
    .focused-mode-mobile .main-wrapper {
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* The mobile top bar already names the page, so hide the in-page header
       (title + subtitle) below it to avoid duplication. */
    .focused-mode-mobile .content-area > .page-header { display: none; }
    /* Pull the top bar out of .content-area's 10px mobile padding so it sits flush. */
    .focused-mode-mobile .content-area > .focused-topbar.js-focused-page {
        margin: -10px -10px 10px;
    }
}

/* image-preview */

.image-preview-profile {
    width: 120px;
    height: 160px; /* ✅ 120 × (4/3) = 160px — matches 3:4 ratio */
    border-radius: 12px;
    background: var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
    overflow: hidden;
    position: relative;
}

    .image-preview-profile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top; /* ✅ keeps face visible, not cropped at top */
    }

.image-preview {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    background: var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
    overflow: hidden;
    position: relative;
}

    .image-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.image-preview-icon {
    color: var(--text-muted);
    font-size: 32px;
}

/* Landscape variant of .image-preview, sized for the 1200×630 (1.9:1)
   social-share banner — same look, just wide instead of square. */
.image-preview-banner {
    width: 220px;
    height: 116px;
    border-radius: 12px;
    background: var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border-color);
    overflow: hidden;
    position: relative;
}

    .image-preview-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.image-gradient {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 30px 0 15px;
}

/* Dark Mode */
[data-bs-theme="dark"] body {
    background: #0f172a;
}

[data-bs-theme="dark"] .section-title {
    color: #f1f5f9;
}

[data-bs-theme="dark"] .custom-alert.error {
    background: #450a0a;
    border-left-color: #dc2626;
    color: #fca5a5;
}

[data-bs-theme="dark"] .custom-alert.success {
    background: #052e16;
    border-left-color: #16a34a;
    color: #86efac;
}

[data-bs-theme="dark"] .custom-alert.warning {
    background: #451a03;
    border-left-color: #d97706;
    color: #fcd34d;
}

[data-bs-theme="dark"] .custom-alert.info {
    background: #172554;
    border-left-color: #2563eb;
    color: #93c5fd;
}
/* Disable body scroll when overlay is active */
body.no-scroll {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

.hidden {
    display: none;
}

/* Modern Tournament Cards */
.tournament-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
}

.tournament-card-modern {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .tournament-card-modern:hover {
        box-shadow: var(--shadow-lg);
    }

    .tournament-card-modern[data-status="completed"] {
        display: none;
    }

    .tournament-card-modern.show-all {
        display: flex;
    }

.tournament-card-header {
    position: relative;
    padding: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.tournament-logo {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

.tournament-header-content {
    flex: 1;
    min-width: 0;
}

.tournament-modern-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
    padding-top: 10px;
}

/* Tournament Status Badge */
.tournament-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .tournament-status-badge.live {
        background-color: #dc2626;
        color: #ffffff;
    }

    .tournament-status-badge.upcoming {
        background-color: #2563eb;
        color: #ffffff;
    }

    .tournament-status-badge.completed {
        background-color: #16a34a;
        color: #ffffff;
    }

/* Tournament Card Body */
.tournament-card-body {
    padding: 16px;
}

/* Tournament Date Range */
.tournament-date-range {
    margin-bottom: 12px;
}

.date-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 400;
}

    .date-item i {
        color: var(--text-secondary);
    }

/* Tournament Stats Row */
.tournament-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

    .stat-item i {
        color: var(--bs-primary);
        flex-shrink: 0;
    }

.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 2px;
}

.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 500;
}

/* Tournament Contact Info */
.tournament-contact-info {
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 6px;
}

    .contact-row:last-child {
        margin-bottom: 0;
    }

    .contact-row i {
        color: var(--primary-blue);
        flex-shrink: 0;
    }

/* Tournament Auction Info */
.tournament-auction-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background-color: var(--bg-color);
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text-secondary);
}

    .tournament-auction-info i {
        color: var(--text-secondary);
    }

.tournament-card-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    margin: 0 -1.25rem -1.25rem -1.25rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    justify-content: flex-end;
}

.btn-action-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background-color: transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-action-icon:hover {
        background-color: var(--primary-blue);
        color: white;
        border-color: var(--primary-blue);
    }

    .btn-action-icon.danger {
        border-color: #ef4444;
        color: #ef4444;
    }

        .btn-action-icon.danger:hover {
            background-color: #ef4444;
            color: white;
        }

/* Loading State */
.submit-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

    .submit-btn.loading::after {
        content: '';
        width: 16px;
        height: 16px;
        border: 2px solid white;
        border-top-color: transparent;
        border-radius: 50%;
        display: inline-block;
        margin-left: 8px;
        animation: spin 0.6s linear infinite;
    }

.btn-purple.loading {
    pointer-events: none;
    opacity: 0.7;
}

    .btn-purple.loading::after {
        content: '';
        width: 16px;
        height: 16px;
        border: 2px solid white;
        border-top-color: transparent;
        border-radius: 50%;
        display: inline-block;
        margin-left: 8px;
        animation: spin 0.6s linear infinite;
    }



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



/* Phone Input */
.phone-group {
    display: flex;
    gap: 0;
}

.country-code {
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-right: none;
    border-radius: 10px 0 0 10px;
    color: #1e293b;
    padding: 9px 12px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    min-width: 50px;
}

.phone-group .form-control {
    border-radius: 0 10px 10px 0;
    flex: 1;
}

.phone-group.phone-readonly .country-code {
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
    border-color: var(--border-color, #e5e7eb);
    opacity: 0.8;
}

/* Sidebar Overlay for Mobile */
.sidebar-overlay {
    position: fixed;
    top: 61px;
    left: 0;
    width: 100%;
    height: calc(100vh - 61px);
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1040; /* keep overlay under sidebar */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: none;
    pointer-events: none; /* prevent blocking clicks when hidden */
    backdrop-filter: blur(2px);
}

@media (max-width: 768px) {
    .sidebar-overlay {
        display: block;
    }
}

/* Ensure sidebar appears above overlay on mobile so menu remains clickable */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 61px; /* header height */
        left: 0;
        height: calc(100vh - 61px);
        z-index: 1065; /* above overlay (1055) */
        overflow-y: auto;
    }

        .sidebar.show {
            z-index: 1065;
        }
}

.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* enable clicks to close overlay */
}

/* When sidebar is visible on mobile, limit overlay to the area to the right of the sidebar
   so the sidebar remains interactive and the overlay does not cover menu items. */
@media (max-width: 768px) {
    .sidebar-overlay.show {
        left: var(--sidebar-width-expanded);
        width: calc(100% - var(--sidebar-width-expanded));
        /* keep overlay under sidebar */
        z-index: 1040;
    }

    /* If the sidebar is collapsed/tile width on mobile, adjust accordingly */
    .sidebar.collapsed + .sidebar-overlay.show,
    .sidebar.show + .sidebar-overlay.show {
        left: var(--sidebar-width-expanded);
        width: calc(100% - var(--sidebar-width-expanded));
    }
}

/* Main Content */
.main-wrapper {
    margin-left: var(--sidebar-width-expanded);
    margin-top: 61px;
    transition: margin-left 0.3s ease;
    padding-bottom: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .main-wrapper.collapsed {
        margin-left: var(--sidebar-width-collapsed);
    }

/* Top Header */
.top-header {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 61px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    gap: 10px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    will-change: transform;
}

.header-left {
    display: flex;
    align-items: center;
    height: 100%;
}

.menu-toggle-header {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 15px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

    .menu-toggle-header:hover {
        background-color: transparent;
    }

    .menu-toggle-header:focus {
        outline: none;
        box-shadow: none;
    }

    .menu-toggle-header:active {
        background-color: transparent;
    }

body.theme-dark .menu-toggle-header,
body.theme-dark-sidebar .menu-toggle-header {
    color: var(--text-secondary);
}

    body.theme-dark .menu-toggle-header:hover,
    body.theme-dark-sidebar .menu-toggle-header:hover {
        background-color: rgba(255, 255, 255, 0.05);
        color: var(--bs-primary);
    }

/* Mobile: Gray by default, Purple when sidebar is shown */
@media (max-width: 768px) {
    /* Gray by default when sidebar is closed */
    .menu-toggle-header {
        color: var(--text-secondary) !important;
    }

        .menu-toggle-header:hover {
            color: var(--text-secondary) !important;
        }

    body.theme-dark .menu-toggle-header,
    body.theme-dark-sidebar .menu-toggle-header {
        color: var(--text-secondary) !important;
    }

    /* Purple when sidebar is open (body has .sidebar-open class) */
    body.sidebar-open .menu-toggle-header,
    body.sidebar-open .menu-toggle-header:hover {
        color: var(--bs-primary) !important;
    }

    body.theme-dark.sidebar-open .menu-toggle-header,
    body.theme-dark-sidebar.sidebar-open .menu-toggle-header,
    body.theme-dark.sidebar-open .menu-toggle-header:hover,
    body.theme-dark-sidebar.sidebar-open .menu-toggle-header:hover {
        color: var(--bs-primary) !important;
    }
}

/* Tablet: Gray when sidebar is hidden (.hide class) */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-wrapper.hide .menu-toggle-header {
        color: var(--text-secondary) !important;
    }

        .main-wrapper.hide .menu-toggle-header:hover {
            color: var(--text-secondary) !important;
        }

    body.theme-dark .main-wrapper.hide .menu-toggle-header,
    body.theme-dark-sidebar .main-wrapper.hide .menu-toggle-header {
        color: var(--text-secondary) !important;
    }

    /* Purple when sidebar is shown */
    .main-wrapper:not(.hide) .menu-toggle-header {
        color: var(--bs-primary) !important;
    }
}

/* Desktop: Gray by default */
@media (min-width: 1025px) {
    .menu-toggle-header {
        color: var(--text-secondary) !important;
    }

        .menu-toggle-header:hover {
            color: var(--text-secondary) !important;
            background-color: transparent;
        }

    body.theme-dark .menu-toggle-header,
    body.theme-dark-sidebar .menu-toggle-header {
        color: var(--text-secondary) !important;
    }

    body.theme-dark .main-wrapper.collapsed .menu-toggle-header,
    body.theme-dark-sidebar .main-wrapper.collapsed .menu-toggle-header {
        color: var(--text-secondary) !important;
    }

        body.theme-dark .main-wrapper.collapsed .menu-toggle-header:hover,
        body.theme-dark-sidebar .main-wrapper.collapsed .menu-toggle-header:hover {
            color: var(--text-secondary) !important;
        }
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 15px 0 10px;
    height: 100%;
}

.header-logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
    flex-shrink: 0;
}

.header-logo-text-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

.header-logo-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
}

.header-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: none;
    border-radius: 6px;
    margin-right: 10px;
    height: 38px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 35px;
}

/* Desktop padding increase */
@media (min-width: 768px) {
    .header-dropdown {
        padding: 10px 20px;
        padding-right: 40px;
    }
}

.header-dropdown:focus {
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border-color: #d1d5db;
}

/* Dark theme dropdown styles */
body.theme-dark .header-dropdown {
    background-color: #2d3748;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #e2e8f0;
}

    body.theme-dark .header-dropdown:focus {
        outline: none;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
        border-color: rgba(255, 255, 255, 0.2);
    }

.header-dropdown i {
    font-size: 14px;
    color: var(--text-secondary);
}

.header-icon-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s;
    font-size: 15px;
    padding: 0;
    line-height: 1;
    position: relative;
}

    .header-icon-btn:hover {
        background-color: var(--light-gray);
        color: var(--text-primary);
    }

/* Consolidated theme styles for icon buttons */
body.theme-dark .header-icon-btn,
body.theme-dark .mobile-menu-toggle,
body.theme-dark .mobile-search-toggle {
    background-color: transparent;
    color: var(--text-secondary);
}

    body.theme-dark .header-icon-btn:hover,
    body.theme-dark .mobile-menu-toggle:hover,
    body.theme-dark .mobile-search-toggle:hover {
        background-color: rgba(59, 130, 246, 0.15);
        color: var(--primary-blue);
    }

/* Hide search toggle buttons */
#searchToggleBtn,
#searchToggleBtnMobile {
    display: none !important;
}

.logout-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    display: none; /* Hidden on desktop */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s;
    font-size: 18px;
    padding: 0;
    line-height: 1;
    position: relative;
}

    .logout-btn:hover {
        background-color: var(--light-gray);
        color: var(--text-primary);
    }

body.theme-dark .logout-btn {
    background-color: transparent;
    color: var(--text-secondary);
}

    body.theme-dark .logout-btn:hover {
        background-color: rgba(239, 68, 68, 0.15);
        color: #ef4444;
    }

.mobile-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s;
    font-size: 20px;
    padding: 0;
    position: relative;
    z-index: 1001;
}

    .mobile-menu-toggle:hover {
        background-color: var(--light-gray);
        color: var(--text-primary);
    }

.mobile-header-bar {
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 15px;
    display: none;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .mobile-header-bar.show {
        display: block !important;
    }

.mobile-header-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 8px;
    flex-wrap: wrap;
}

.mobile-header-bar .header-dropdown {
    margin-right: 0;
    font-size: 13px;
    padding: 6px 12px;
    height: 34px;
    padding-right: 30px;
}

.mobile-header-bar .header-icon-btn {
    width: 34px;
    height: 34px;
    font-size: 16px;
}

.mobile-header-bar .dark-mode-toggle {
    width: 34px;
    height: 34px;
    font-size: 16px;
}

.mobile-header-bar .notification-icon {
    width: 34px;
    height: 34px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-header-bar .admin-info {
    gap: 8px;
    display: flex;
    align-items: center;
}

.mobile-header-bar .admin-avatar {
    width: 34px;
    height: 34px;
}

.page-title-header {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 30px;
    display: none;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

/* Show page title on large desktop screens */
@media (min-width: 1200px) {
    .page-title-header {
        display: block;
    }
}

/* Dark theme support */
body.theme-dark .page-title-header,
body.theme-dark-sidebar .page-title-header {
    color: var(--text-primary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 24px;
}

.theme-switcher {
    position: relative;
    display: inline-block;
}

.theme-toggle-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50% !important;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s;
    font-size: 16px;
    padding: 0;
    line-height: 1;
    overflow: hidden;
}

    .theme-toggle-btn:hover {
        background-color: var(--light-gray);
        color: var(--primary-blue);
    }

body.theme-dark .theme-toggle-btn,
body.theme-dark-sidebar .theme-toggle-btn {
    background-color: transparent;
    border-radius: 50% !important;
}

    body.theme-dark .theme-toggle-btn:hover {
        background-color: rgba(251, 191, 36, 0.15);
        color: #fbbf24;
    }

    body.theme-dark-sidebar .theme-toggle-btn:hover {
        background-color: rgba(59, 130, 246, 0.15);
        color: var(--primary-blue);
    }

.theme-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 1002;
    overflow: hidden;
    min-width: 200px;
}

    .theme-dropdown.show {
        display: block;
    }

.theme-option {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 1px solid var(--border-color);
}

    .theme-option:last-child {
        border-bottom: none;
    }

    .theme-option:hover {
        background-color: var(--bg-color);
    }

    .theme-option.active {
        background-color: rgba(139, 92, 246, 0.12);
    }

body.theme-dark .theme-option.active {
    background-color: rgba(139, 92, 246, 0.18);
}

.theme-option i {
    font-size: 18px;
    color: var(--text-secondary);
    width: 24px;
    text-align: center;
}

.theme-option.active i {
    color: #8b5cf6;
}

body.theme-dark .theme-option.active i {
    color: #a78bfa;
}

.theme-option-text {
    flex: 1;
}

.theme-option-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.theme-option-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

.theme-option-check {
    font-size: 16px;
    color: #8b5cf6;
    display: none;
}

body.theme-dark .theme-option-check {
    color: #a78bfa;
}

.theme-option.active .theme-option-check {
    display: block;
}

/* Keep old dark-mode-toggle for backwards compatibility */
.dark-mode-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    border: none;
    outline: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 16px;
    padding: 0;
    line-height: 1;
}

    .dark-mode-toggle:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .dark-mode-toggle:active {
        outline: none !important;
        box-shadow: none !important;
    }

/* Light mode - default state (dark mode OFF) */
body:not(.theme-dark):not(.dark-mode) .dark-mode-toggle {
    background-color: var(--light-gray) !important;
    color: var(--text-secondary) !important;
}

    body:not(.theme-dark):not(.dark-mode) .dark-mode-toggle:hover {
        background-color: rgba(139, 92, 246, 0.08) !important;
        color: #8b5cf6 !important;
    }

/* Dark mode active - purple stays visible (dark mode ON) */
body.theme-dark .dark-mode-toggle,
body.dark-mode .dark-mode-toggle {
    background-color: rgba(139, 92, 246, 0.15) !important;
    color: #a78bfa !important;
}

    body.theme-dark .dark-mode-toggle:hover,
    body.dark-mode .dark-mode-toggle:hover {
        background-color: rgba(139, 92, 246, 0.25) !important;
        color: #c4b5fd !important;
    }

.notification-icon {
    position: relative;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

    .notification-icon:hover {
        color: var(--primary-blue);
        background-color: var(--light-gray);
    }

body.theme-dark .notification-icon {
    background-color: transparent;
}

    body.theme-dark .notification-icon:hover {
        background-color: rgba(59, 130, 246, 0.15);
        color: var(--primary-blue);
    }

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: #ef4444;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card-bg);
}

.notification-dropdown {
    position: fixed;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 1002;
    overflow: hidden;
}

    .notification-dropdown.show {
        display: block;
    }

.notification-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .notification-header h3 {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

.mark-all-read {
    font-size: 12px;
    color: var(--primary-blue);
    cursor: pointer;
    text-decoration: none;
}

    .mark-all-read:hover {
        text-decoration: underline;
    }

.notification-list {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s;
}

    /* Modern scrollbar design - show on hover */
    .notification-list:hover {
        scrollbar-color: rgba(59, 130, 246, 0.5) transparent;
    }

    /* Webkit browsers (Chrome, Safari, Edge) */
    .notification-list::-webkit-scrollbar {
        width: 6px;
    }

    .notification-list::-webkit-scrollbar-track {
        background: transparent;
    }

    .notification-list::-webkit-scrollbar-thumb {
        background-color: transparent;
        border-radius: 10px;
        transition: background-color 0.3s;
    }

    .notification-list:hover::-webkit-scrollbar-thumb {
        background-color: rgba(59, 130, 246, 0.5);
    }

    .notification-list::-webkit-scrollbar-thumb:hover {
        background-color: rgba(59, 130, 246, 0.8);
    }

/* Dark theme scrollbar */
body.theme-dark .notification-list:hover {
    scrollbar-color: rgba(96, 165, 250, 0.6) transparent;
}

    body.theme-dark .notification-list:hover::-webkit-scrollbar-thumb {
        background-color: rgba(96, 165, 250, 0.6);
    }

body.theme-dark .notification-list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(96, 165, 250, 0.9);
}

.notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    gap: 12px;
}

    .notification-item:hover {
        background-color: var(--bg-color);
    }

    .notification-item.unread {
        background-color: #eff6ff;
    }

body.theme-dark .notification-item.unread {
    background-color: #1e3a8a20;
}

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

.notification-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

    .notification-icon-wrapper.info {
        background-color: #dbeafe;
        color: #3b82f6;
    }

    .notification-icon-wrapper.success {
        background-color: #d1fae5;
        color: #10b981;
    }

    .notification-icon-wrapper.warning {
        background-color: #fed7aa;
        color: #f59e0b;
    }

body.theme-dark .notification-icon-wrapper.info {
    background-color: #1e3a8a30;
    color: #60a5fa;
}

body.theme-dark .notification-icon-wrapper.success {
    background-color: #05563030;
    color: #34d399;
}

body.theme-dark .notification-icon-wrapper.warning {
    background-color: #78350f30;
    color: #fbbf24;
}

.notification-content {
    flex: 1;
}

.notification-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.notification-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.notification-time {
    font-size: 12px;
    color: var(--text-secondary);
}

.notification-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.view-all-notifications {
    font-size: 13px;
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
}

    .view-all-notifications:hover {
        text-decoration: underline;
    }

.user-dropdown {
    position: fixed;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 1002;
    overflow: hidden;
}

    .user-dropdown.show {
        display: block;
    }

.user-dropdown-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #ffc107;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 18px;
    overflow: hidden;
    border: 2px solid var(--border-color);
}

    .user-dropdown-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.user-dropdown-info {
    flex: 1;
}

.user-dropdown-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.user-dropdown-email {
    font-size: 13px;
    color: var(--text-secondary);
}

.user-dropdown-menu {
    padding: 4px 0;
}

.user-dropdown-item {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.3s;
    cursor: pointer;
}

    .user-dropdown-item:hover {
        background-color: var(--bg-color);
    }

    .user-dropdown-item i {
        font-size: 16px;
        color: var(--text-secondary);
        width: 18px;
    }

    .user-dropdown-item span {
        font-size: 16px;
    }

.user-dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 6px 0;
}

.user-dropdown-item.danger {
    color: #ef4444;
}

    .user-dropdown-item.danger i {
        color: #ef4444;
    }

    .user-dropdown-item.danger:hover {
        background-color: #fee2e2;
    }

body.theme-dark .user-dropdown-item.danger:hover {
    background-color: #7f1d1d30;
}

/* Dropdown Positioning - Desktop */
@media (min-width: 769px) {
    .notification-dropdown {
        top: 65px;
        right: 80px;
        width: 380px;
    }

    .user-dropdown {
        top: 65px;
        right: 20px;
        width: 260px;
    }
}

/* Dropdown Positioning - Mobile */
@media (max-width: 768px) {
    .notification-dropdown {
        position: fixed;
        left: 16px !important;
        right: 16px !important;
        transform: none;
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        z-index: 9999;
    }

    .user-dropdown {
        position: fixed;
        transform: none;
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        z-index: 9999;
        width: 260px;
    }

    .notification-dropdown {
        width: calc(100vw - 32px) !important;
        max-width: 100% !important;
    }

    .user-dropdown {
        width: calc(100vw - 32px) !important;
        max-width: 320px !important;
    }

    /* Reduce size in mobile */
    .user-dropdown-menu {
        padding: 4px 0;
    }

    .user-dropdown-item {
        padding: 6px 12px;
        gap: 8px;
    }

        .user-dropdown-item i {
            font-size: 14px;
            width: 16px;
        }

        .user-dropdown-item span {
            font-size: 14px;
        }

    .user-dropdown-divider {
        margin: 4px 0;
    }
}

.mobile-search-toggle {
    display: none; /* Hidden on desktop - search box is always visible */
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s;
    font-size: 16px;
    padding: 0;
    line-height: 1;
}

    .mobile-search-toggle:hover {
        background-color: var(--light-gray);
        color: var(--text-primary);
    }

.admin-info {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.admin-text {
    text-align: right;
    display: none; /* Hidden - user requested to remove username */
}

.admin-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.admin-role {
    font-size: 12px;
    color: var(--text-secondary);
}

.admin-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffc107;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    overflow: hidden;
    border: 2px solid var(--border-color);
}

    .admin-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Breadcrumb */
.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.breadcrumb-section {
    padding: 6px 24px;
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 61px;
    z-index: 998;
    transition: all 0.3s;
}

    .breadcrumb-section.scrolled {
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

body.theme-dark .breadcrumb-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    body.theme-dark .breadcrumb-section.scrolled {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

.breadcrumb-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
}

    .breadcrumb-item a:hover {
        color: var(--primary-blue);
    }

.breadcrumb-item.active {
    color: var(--text-primary);
}


/* Back button — modern, responsive across mobile / tablet / desktop */
.breadcrumb-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Desktop default: 32 px, circular, ghost style */
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

    .breadcrumb-back-btn i {
        font-size: 16px;
        display: flex;
        line-height: 1;
        pointer-events: none;
    }

    /* Desktop hover — reveal subtle background */
    .breadcrumb-back-btn:hover {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--primary-blue);
        box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    }

    /* Desktop / all — active press */
    .breadcrumb-back-btn:active {
        transform: scale(.88);
        background: rgba(59, 130, 246, .10);
        border-color: var(--primary-blue);
        color: var(--primary-blue);
        box-shadow: none;
    }

    .breadcrumb-back-btn:focus-visible {
        outline: 2px solid var(--primary-blue);
        outline-offset: 2px;
    }

/* Dark mode — base */
body.theme-dark .breadcrumb-back-btn {
    color: var(--text-secondary);
    background: transparent;
    border-color: transparent;
}

    body.theme-dark .breadcrumb-back-btn:hover {
        background: rgba(255, 255, 255, .07);
        border-color: rgba(255, 255, 255, .14);
        color: var(--primary-blue);
        box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    }

    body.theme-dark .breadcrumb-back-btn:active {
        background: rgba(96, 165, 250, .14);
        border-color: var(--primary-blue);
        color: var(--primary-blue);
    }

/* Page-header back button — same visible-bordered-circle look as the public
   live-auction page's own back button (.mlv-back-btn in MobileLiveView),
   made theme-aware since (unlike that standalone public page) this is used
   on normal in-app pages that support dark mode. Stays visibly bordered at
   rest, unlike .breadcrumb-back-btn's invisible-until-hover ghost style.
   Mobile-only by design (matches the reference's own mobile-width origin) —
   hidden on tablet/desktop, where the sidebar nav already covers "back". */
.page-back-btn {
    display: none;
    align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    color: var(--text-primary, #0f172a);
    text-decoration: none; font-size: 16px; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.page-back-btn:hover { background: var(--bg-secondary, #e5e7eb); }
.page-back-btn i { font-size: 16px; line-height: 1; }
.page-header-title-row { display: flex; align-items: center; gap: 10px; }
@media (max-width: 768px) {
    .page-back-btn { display: inline-flex; }
}

/* Content Area */
.content-area {
    padding: 15px;
}

/* Light content background, both mobile and desktop — light theme only, dark
   theme keeps its own --bg-color so this doesn't show up as a bright box. */
body:not(.theme-dark):not(.theme-dark-sidebar) .content-area {
    background-color: #F4F5FA;
}

.page-header {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.page-title {
    font-size: 25px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.3px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.page-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin-top: 5px;
    margin-bottom: 0;
    line-height: 1.5;
    transition: color 0.3s ease;
}

/* Responsive page title and subtitle */
@media (max-width: 768px) {
    .page-title {
        font-size: 24px;
        margin: 0 0 12px 0;
    }

    .page-subtitle {
        font-size: 14px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .page-title {
        font-size: 26px;
        margin: 0 0 16px 0;
    }
}

/* Dark theme support */
body.theme-dark .page-title,
body.theme-dark-sidebar .page-title {
    color: var(--text-primary);
}

body.theme-dark .page-subtitle,
body.theme-dark-sidebar .page-subtitle {
    color: var(--text-secondary);
}

/* Purple Gradient Button Styles */
.btn-purple {
    background: #8b5cf6;
    color: white;
    border: none;
    padding: 7px 20px;
    border-radius: 6px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .btn-purple:hover {
        background: #7c3aed;
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
        color: white;
    }

    .btn-purple i {
        font-size: 16px;
    }

.btn-success {
    background: #10b981;
}

    .btn-success:hover {
        background: #059669;
    }

body.theme-dark .btn-purple {
    background: #8b5cf6;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

    body.theme-dark .btn-purple:hover {
        background: #7c3aed;
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
    }

/* Default Button Styles */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .btn-group-vertical .btn {
        padding: 12px;
    }

.btn-default {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-default:hover {
        background-color: var(--light-gray);
        color: var(--text-primary);
    }

/* Content Card Styles */
.content-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.content-card-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.content-card-text {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}

/* Form Card */
.form-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--shadow);
}

/* Form Actions — sticky at bottom of form-card */
.form-actions {
    position: sticky;
    bottom: 0;
    z-index: 100;
    background-color: var(--card-bg);
    margin-top: 24px;
    margin-left: -32px;
    margin-right: -32px;
    margin-bottom: -32px;
    padding: 16px 32px;
    border-top: 1px solid var(--border-color);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    box-shadow: 0 -8px 24px -4px rgba(0, 0, 0, 0.08);
}

/* Save sits right of Cancel and carries a little more width than its label needs,
   so the primary action reads as the wider target on every form. */
.form-actions button[type="submit"] {
    min-width: 120px;
    justify-content: center;
}

html.theme-dark .form-actions {
    box-shadow: 0 -8px 24px -4px rgba(0, 0, 0, 0.4);
}

.form-section {
    margin-bottom: 32px;
}

    .form-section:last-child {
        margin-bottom: 0;
    }

.form-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.form-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: block;
}

    .form-label .required {
        color: var(--error-color);
        margin-left: 4px;
    }

.form-control, .form-select {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 8px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.3s;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
        outline: none;
    }

/* Stats Cards */
.stats-row {
    margin-bottom: 14px;
}

.stat-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 14px 16px;
    border: 0.5px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 19px;
    flex-shrink: 0;
}

/* .stat-icon colour variants — reusable wherever a .stat-card needs to tell
   several tiles apart at a glance (e.g. the Tournament Dashboard summary row). */
.stat-icon-green  { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.stat-icon-blue   { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.stat-icon-orange { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.stat-icon-pink   { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); }
.stat-icon-teal   { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }

.stat-content {
    flex: 1;
    min-width: 0;
}

.stat-card .stat-value {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-card .stat-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* DataTable Container */
.table-container {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 16px 20px;
    border: 0.5px solid var(--border-color);
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
}

.table-title {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

    .table-title i {
        color: #8b5cf6;
    }
/* Table Styling */
.table {
    width: 100% !important;
}

    .table thead th {
        background: var(--bg-secondary);
        color: var(--text-secondary);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.3px;
        padding: 9px 8px;
        border-bottom: 0.5px solid var(--border-color);
    }

    .table tbody td {
        padding: 8px 8px;
        vertical-align: middle;
        font-size: 14px;
        color: var(--text-primary);
    }

    .table tbody tr {
        border-bottom: 0.5px solid var(--border-color);
        transition: background 0.15s;
    }

        .table tbody tr:hover {
            background: var(--bg-secondary);
        }

/* Player Image */
.player-image-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #e2e8f0;
}

.player-name-text {
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

/* Role Badge */
.role-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.role-batsman {
    background: #dbeafe;
    color: #1e40af;
}

.role-bowler {
    background: #dcfce7;
    color: #15803d;
}

.role-allrounder {
    background: #fef3c7;
    color: #92400e;
}

.role-wicketkeeper {
    background: #fce7f3;
    color: #9f1239;
}

/* Table Screenshot / No-image placeholder */
.table-image {
    width: 44px;
    height: 59px;
    border-radius: 8px;
    object-fit: cover;
    object-position: center top;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: transform 0.18s, border-color 0.18s;
    flex-shrink: 0;
}

    .table-image:hover {
        transform: scale(1.06);
        border-color: #8b5cf6;
    }

.table-noimage-preview {
    width: 44px;
    height: 59px;
    border-radius: 8px;
    background: var(--light-gray);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 18px;
}

/* Base */
.preview-image {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

    /* Player photo — 3:4 portrait */
    .preview-image.preview-portrait {
        aspect-ratio: 3 / 4;
        object-position: center top;
    }

    /* Logo / club badge — square */
    .preview-image.preview-square {
        aspect-ratio: 1 / 1;
        object-position: center center;
    }


/* Modal */
.modal-content {
    border-radius: 16px;
    border: none;
    background: var(--card-bg);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 24px;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
    max-height: 100vh;
    overflow-y: auto;
}

    .modal-body::-webkit-scrollbar {
        width: 6px;
    }

    .modal-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .modal-body::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 3px;
    }

.player-search-box {
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
}

.phone-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-bg);
    padding: 12px 16px;
    transition: all 0.2s ease;
}

    .phone-input-wrapper:focus-within {
        border-color: var(--primary-blue);
        background: var(--card-bg);
    }

.phone-prefix {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 12px;
    white-space: nowrap;
}

.player-search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 16px;
    outline: none;
    padding: 0;
}

    .player-search-input::placeholder {
        color: var(--text-secondary);
        font-size: 14px;
    }

.players-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.player-select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.2s ease;
    background: var(--card-bg);
}

    .player-select-item:hover {
        background: var(--light-gray);
        border-color: var(--primary-blue);
    }

.player-select-info {
    flex: 1;
    min-width: 0;
}

.player-select-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.player-select-role {
    font-size: 13px;
    color: var(--text-secondary);
}

.player-select-phone {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .player-select-phone i {
        font-size: 12px;
    }

.join-player-btn {
    padding: 10px 20px;
    background: #10b981;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

    .join-player-btn:hover {
        background: #059669;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .join-player-btn i {
        font-size: 14px;
    }

/* ── Unified player search modal (psp) ───────────────────── */
.psp-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.psp-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 11px 14px;
    background: var(--card-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 0;
}

    .psp-input-wrap:focus-within {
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.psp-search-icon {
    color: var(--text-secondary);
    font-size: 15px;
    flex-shrink: 0;
}

.psp-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
    outline: none;
    min-width: 0;
}

    .psp-input::placeholder {
        color: var(--text-secondary);
        font-size: 14px;
    }

.psp-search-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 20px;
    background: var(--primary-blue, #3b82f6);
    color: #fff;
    border: 1.5px solid transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}

    .psp-search-btn:hover {
        background: var(--primary-blue-dark, #2563eb);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .psp-search-btn:active {
        transform: translateY(0);
        box-shadow: none;
    }

    .psp-search-btn i {
        font-size: 13px;
    }

@media (max-width: 380px) {
    .psp-search-row {
        flex-direction: column;
    }

    .psp-search-btn {
        width: 100%;
        justify-content: center;
    }
}

.psp-result-count {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.psp-avatar-placeholder {
    width: 50px;
    height: 67px;
    border-radius: 8px;
    background: var(--light-gray, #f1f5f9);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.psp-no-photo {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 600;
    background: #fef9c3;
    color: #a16207;
    border: 1px solid #fde68a;
    vertical-align: middle;
}
.psp-no-photo i { font-size: 10px; }

.psp-status-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    max-width: 100px;
    flex-shrink: 0;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    display: inline-block;
}

/* ── end psp ─────────────────────────────────────────────── */

.no-players-found {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

    .no-players-found i {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.3;
    }

.confetti {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 10px;
    background: #fbbf24;
    animation: confetti-fall 3s linear;
    pointer-events: none;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}


/* Desktop Footer */
.desktop-footer {
    background-color: var(--card-bg);
    border-top: 1px solid var(--border-color);
    padding: 12px 20px 12px 20px;
    text-align: left;
    font-size: 13px;
    color: var(--text-secondary);
    margin-left: var(--sidebar-width-expanded);
    margin-top: 0;
    transition: margin-left 0.3s ease;
}

    .desktop-footer.collapsed {
        margin-left: var(--sidebar-width-collapsed);
    }

/* Mobile Footer Menu */
.mobile-footer-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background-color: var(--sidebar-bg);
    border-top: 1px solid var(--sidebar-border);
    box-shadow: 0 -2px 10px rgba(0,0,0,.06);
    padding: 0 0 env(safe-area-inset-bottom);
    display: none;
    /* Must outrank .mobile-more-backdrop (1055): .mobile-more-sheet is a child of this
       nav, and a fixed+z-index ancestor traps its descendants' stacking order, so the
       sheet's own z-index can't out-rank a backdrop that's a true sibling of this nav. */
    z-index: 1057;
}

/* Dark background for mobile menu in dark-sidebar theme */
body.theme-dark-sidebar .mobile-footer-menu {
    background-color: var(--sidebar-bg);
    border-top: 1px solid var(--sidebar-border);
    box-shadow: 0 -2px 10px rgba(0,0,0,.25);
}

/* Dark background for mobile menu in dark theme */
body.theme-dark .mobile-footer-menu {
    background-color: var(--sidebar-bg);
    border-top: 1px solid var(--sidebar-border);
    box-shadow: 0 -2px 10px rgba(0,0,0,.25);
}

.mobile-menu-items {
    display: flex;
    align-items: stretch;
    height: 64px;
}

.mobile-menu-item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: all 0.3s;
    border-radius: 8px;
    background: none;
    border: none;
}

/* Light theme - use sidebar text colors */
body:not(.theme-dark):not(.theme-dark-sidebar) .mobile-menu-item {
    color: var(--sidebar-text);
}

    body:not(.theme-dark):not(.theme-dark-sidebar) .mobile-menu-item.active {
        color: var(--bs-primary);
    }

    body:not(.theme-dark):not(.theme-dark-sidebar) .mobile-menu-item:not(.active):hover {
        background-color: var(--sidebar-item-hover-bg);
    }

/* Dark theme - use sidebar text colors */
body.theme-dark .mobile-menu-item {
    color: var(--sidebar-text);
}

    body.theme-dark .mobile-menu-item.active {
        color: var(--bs-primary);
    }

    body.theme-dark .mobile-menu-item:not(.active):hover {
        background-color: var(--sidebar-item-hover-bg);
    }

/* Dark sidebar theme - use sidebar text colors */
body.theme-dark-sidebar .mobile-menu-item {
    color: var(--sidebar-text);
}

    body.theme-dark-sidebar .mobile-menu-item.active {
        color: var(--bs-primary);
    }

    body.theme-dark-sidebar .mobile-menu-item:not(.active):hover {
        background-color: var(--sidebar-item-hover-bg);
    }

.mobile-menu-item i {
    font-size: 19px;
    line-height: 1;
}

.mobile-menu-item span {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* More button (5th tab) shares all .mobile-menu-item styling; active state mirrors
   other items but is driven by whether a child of its sheet is the current route */
.mobile-menu-more-btn { cursor: pointer; }

/* ── More bottom sheet ── */
.mobile-more-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1055;
}
.mobile-more-backdrop.show { display: block; }

.mobile-more-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    background: var(--sidebar-bg);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(0,0,0,.18);
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    z-index: 1056;
    max-height: 65vh;
    overflow-y: auto;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .22s ease, opacity .22s ease, visibility .22s;
    display: none;
}
.mobile-footer-menu ~ .mobile-more-sheet.show,
.mobile-more-sheet.show {
    display: block;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mobile-more-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--sidebar-border);
    border-radius: 2px;
    margin: 2px auto 10px;
}

.mobile-more-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 10px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.mobile-more-item i { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; }
.mobile-more-item.active { color: var(--bs-primary); }
.mobile-more-item:not(.active):hover { background-color: var(--sidebar-item-hover-bg); }

/* Responsive Design */
@media (max-width: 768px) {
    /* Fix for mobile browsers when keyboard opens */
    .top-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    /* Sidebar toggle is hidden on mobile — navigation happens via the bottom
       mobile-footer-menu instead, so the top-left hamburger is redundant. */
    .menu-toggle-header {
        display: none !important;
    }

    .admin-text {
        display: none;
    }

    .mobile-search-toggle {
        display: flex;
    }

    .header-right .header-dropdown,
    .header-right .header-icon-btn,
    .header-right .notification-icon,
    .header-right .admin-info,
    .header-right .logout-btn {
        display: none;
    }

    .header-right .dark-mode-toggle {
        display: flex;
    }

    /* Logout takes the 3-dots' spot on mobile — the secondary "more options"
       row it used to open only ever surfaced the user name + a logout button,
       both already reachable via the always-visible avatar's dropdown. */
    .header-right .logout-btn {
        display: flex;
    }

    .mobile-menu-toggle {
        display: none;
    }

    .mobile-footer-menu {
        display: block;
    }

    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width-collapsed);
        padding-bottom: max(80px, calc(65px + env(safe-area-inset-bottom)));
    }

        .sidebar.show {
            transform: translateX(0);
        }

    .main-wrapper,
    .main-wrapper.collapsed {
        margin-left: 0;
        padding-bottom: 70px;
    }

    .desktop-footer {
        display: none;
    }

    /* Override tablet tile styles for mobile - show full menu */
    .sidebar .sidebar-item,
    .sidebar.collapsed .sidebar-item {
        flex-direction: column !important;
        padding: 10px 6px !important;
        margin: 1px 6px !important;
        text-align: center !important;
        justify-content: center !important;
    }

        .sidebar .sidebar-item span,
        .sidebar.collapsed .sidebar-item span {
            margin-left: 0 !important;
            margin-top: 4px !important;
            font-size: 11px !important;
            opacity: 1 !important;
            display: block !important;
        }

        .sidebar .sidebar-item i {
            font-size: 20px !important;
        }

        .sidebar .sidebar-item.active::before,
        .sidebar.collapsed .sidebar-item.active::before {
            display: none !important;
        }

        /* Remove background from active items in mobile tile view */
        .sidebar .sidebar-item.active,
        .sidebar.collapsed .sidebar-item.active,
        .sidebar .sidebar-item.active:hover,
        .sidebar.collapsed .sidebar-item.active:hover {
            background: transparent !important;
            background-color: transparent !important;
            box-shadow: none !important;
            color: var(--bs-primary) !important;
        }

            .sidebar .sidebar-item.active i,
            .sidebar.collapsed .sidebar-item.active i,
            .sidebar .sidebar-item.active:hover i,
            .sidebar.collapsed .sidebar-item.active:hover i {
                color: var(--bs-primary) !important;
            }

    body.theme-dark-sidebar .sidebar .sidebar-item.active,
    body.theme-dark .sidebar .sidebar-item.active,
    body.theme-dark-sidebar .sidebar.collapsed .sidebar-item.active,
    body.theme-dark .sidebar.collapsed .sidebar-item.active,
    body.theme-dark-sidebar .sidebar .sidebar-item.active:hover,
    body.theme-dark .sidebar .sidebar-item.active:hover,
    body.theme-dark-sidebar .sidebar.collapsed .sidebar-item.active:hover,
    body.theme-dark .sidebar.collapsed .sidebar-item.active:hover {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        color: var(--bs-primary) !important;
    }

        body.theme-dark-sidebar .sidebar .sidebar-item.active i,
        body.theme-dark .sidebar .sidebar-item.active i,
        body.theme-dark-sidebar .sidebar.collapsed .sidebar-item.active i,
        body.theme-dark .sidebar.collapsed .sidebar-item.active i,
        body.theme-dark-sidebar .sidebar .sidebar-item.active:hover i,
        body.theme-dark .sidebar .sidebar-item.active:hover i,
        body.theme-dark-sidebar .sidebar.collapsed .sidebar-item.active:hover i,
        body.theme-dark .sidebar.collapsed .sidebar-item.active:hover i {
            color: var(--bs-primary) !important;
        }

    /* Mobile — larger touch target, always-visible pill */
    .breadcrumb-back-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-primary);
        box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
        margin-right: 2px;
    }

        .breadcrumb-back-btn i {
            font-size: 18px;
        }

    .breadcrumb-section {
        display: none;
    }


    .custom-breadcrumb {
        font-size: 13px;
    }

    .notification-dropdown,
    .user-dropdown {
        position: fixed;
        top: 72px;
        left: auto;
        right: 16px;
        transform: none;
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        z-index: 9999;
    }

    .notification-dropdown {
        width: calc(100% - 32px);
        max-width: 380px;
    }

    .user-dropdown {
        width: calc(100% - 32px);
        max-width: 280px;
    }
}

/* Tablet back button — slightly larger touch target, visible border */
@media (min-width: 769px) and (max-width: 1024px) {
    .breadcrumb-back-btn {
        width: 36px;
        height: 36px;
        background: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-secondary);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    }

        .breadcrumb-back-btn i {
            font-size: 17px;
        }
}

/* Tablet view - Show sidebar in collapsed/tile mode by default, toggle hide/show */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: var(--sidebar-width-collapsed);
        transform: translateX(0);
        transition: transform 0.3s ease;
        padding-bottom: max(80px, calc(65px + env(safe-area-inset-bottom)));
    }

        .sidebar.hide {
            transform: translateX(-100%);
        }

    .sidebar-nav {
        padding-bottom: 20px;
    }

    .main-wrapper {
        margin-left: var(--sidebar-width-collapsed);
        transition: margin-left 0.3s ease;
        padding-bottom: 70px;
    }

        .main-wrapper.hide {
            margin-left: 0;
        }

    /* Show footer menu on tablet */
    .mobile-footer-menu {
        display: block;
    }

    /* Show menu toggle button on tablet */
    .menu-toggle-header {
        display: flex !important;
    }

    .desktop-footer {
        display: none;
    }

    /* Keep sidebar in tile/collapsed design in tablet view */
    .sidebar-item {
        flex-direction: column;
        padding: 10px 6px;
        margin: 1px 6px;
        text-align: center;
        justify-content: center;
    }

        .sidebar-item span {
            margin-left: 0;
            margin-top: 4px;
            font-size: 11px;
            opacity: 1;
        }

        .sidebar-item.active::before {
            display: none;
        }

        /* Remove background from active items in tablet tile view */
        .sidebar-item.active,
        .sidebar-item.active:hover {
            background: transparent !important;
            background-color: transparent !important;
            box-shadow: none !important;
            color: var(--bs-primary) !important;
        }

            .sidebar-item.active i,
            .sidebar-item.active:hover i {
                color: var(--bs-primary) !important;
            }

    body.theme-dark-sidebar .sidebar-item.active,
    body.theme-dark .sidebar-item.active,
    body.theme-dark-sidebar .sidebar-item.active:hover,
    body.theme-dark .sidebar-item.active:hover {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        color: var(--bs-primary) !important;
    }

        body.theme-dark-sidebar .sidebar-item.active i,
        body.theme-dark .sidebar-item.active i,
        body.theme-dark-sidebar .sidebar-item.active:hover i,
        body.theme-dark .sidebar-item.active:hover i {
            color: var(--bs-primary) !important;
        }
}

/* Tablet Portrait - Explicit tile menu support */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    .sidebar {
        width: var(--sidebar-width-collapsed);
    }

    .sidebar-item {
        flex-direction: column !important;
        padding: 10px 6px !important;
        margin: 1px 6px !important;
        text-align: center !important;
        justify-content: center !important;
    }

        .sidebar-item span {
            margin-left: 0 !important;
            margin-top: 4px !important;
            font-size: 11px !important;
            opacity: 1 !important;
        }

        .sidebar-item i {
            font-size: 20px !important;
        }

        .sidebar-item.active::before {
            display: none !important;
        }

        /* Remove background from active items in tablet portrait tile view */
        .sidebar-item.active,
        .sidebar-item.active:hover {
            background: transparent !important;
            background-color: transparent !important;
            box-shadow: none !important;
            color: var(--bs-primary) !important;
        }

            .sidebar-item.active i,
            .sidebar-item.active:hover i {
                color: var(--bs-primary) !important;
            }

    body.theme-dark-sidebar .sidebar-item.active,
    body.theme-dark .sidebar-item.active,
    body.theme-dark-sidebar .sidebar-item.active:hover,
    body.theme-dark .sidebar-item.active:hover {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        color: var(--bs-primary) !important;
    }

        body.theme-dark-sidebar .sidebar-item.active i,
        body.theme-dark .sidebar-item.active i,
        body.theme-dark-sidebar .sidebar-item.active:hover i,
        body.theme-dark .sidebar-item.active:hover i {
            color: var(--bs-primary) !important;
        }
}

/* Tablet Landscape (Wide) - Explicit tile menu support */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .sidebar {
        width: var(--sidebar-width-collapsed);
    }

    .sidebar-item {
        flex-direction: column !important;
        padding: 10px 6px !important;
        margin: 1px 6px !important;
        text-align: center !important;
        justify-content: center !important;
    }

        .sidebar-item span {
            margin-left: 0 !important;
            margin-top: 4px !important;
            font-size: 11px !important;
            opacity: 1 !important;
        }

        .sidebar-item i {
            font-size: 20px !important;
        }

        .sidebar-item.active::before {
            display: none !important;
        }

        /* Remove background from active items in tablet landscape tile view */
        .sidebar-item.active,
        .sidebar-item.active:hover {
            background: transparent !important;
            background-color: transparent !important;
            box-shadow: none !important;
            color: var(--bs-primary) !important;
        }

            .sidebar-item.active i,
            .sidebar-item.active:hover i {
                color: var(--bs-primary) !important;
            }

    body.theme-dark-sidebar .sidebar-item.active,
    body.theme-dark .sidebar-item.active,
    body.theme-dark-sidebar .sidebar-item.active:hover,
    body.theme-dark .sidebar-item.active:hover {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        color: var(--bs-primary) !important;
    }

        body.theme-dark-sidebar .sidebar-item.active i,
        body.theme-dark .sidebar-item.active i,
        body.theme-dark-sidebar .sidebar-item.active:hover i,
        body.theme-dark .sidebar-item.active:hover i {
            color: var(--bs-primary) !important;
        }
}

/* Content Card Styles */
.content-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.content-card-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.content-card-text {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}

/* Settings Page Specific Styles */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.settings-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary);
    display: block;
    position: relative;
    overflow: hidden;
}

    .settings-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        border-color: var(--primary-blue);
    }

body.theme-dark .settings-card:hover,
body.theme-dark-sidebar .settings-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.settings-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--card-accent), var(--card-accent-light));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.settings-card:hover::before {
    transform: scaleX(1);
}

.settings-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 16px;
    background: var(--card-accent-bg);
    color: var(--card-accent);
    transition: all 0.3s ease;
}

.settings-card:hover .settings-card-icon {
    transform: scale(1.1) rotate(5deg);
}

.settings-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.settings-card-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0;
}

.settings-card-arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 20px;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s ease;
}

.settings-card:hover .settings-card-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--primary-blue);
}

/* Settings Card Color Variants */
.settings-card.blue {
    --card-accent: #3b82f6;
    --card-accent-light: #60a5fa;
    --card-accent-bg: #eff6ff;
}

/* profile */

.profile-container {
    /* max-width: 1000px; */
    margin: 0 auto;
}

.card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    /* Plain Bootstrap .card has no theme-aware background of its own — without
       this it stays white in dark mode on every page that uses the bare class
       (no other override in place already wins, e.g. .profile-header's own
       gradient, via normal cascade/specificity). Fallbacks match Bootstrap's
       own defaults exactly, so light mode is pixel-identical to before. */
    background-color: var(--card-bg, #fff);
    color: var(--text-primary, #212529);
}

.profile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px;
    text-align: center;
    border-radius: 20px 20px 0 0;
}

.profile-avatar {
    width: 200px;
    height: 200px;
    border-radius: 20px;
    border: 5px solid white;
    object-fit: cover;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.badge-custom {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(10px);
}

.stats-grid {
    background: white;
    padding: 30px 40px;
    border-radius: 0 0 20px 20px;
}

.stat-item {
    text-align: center;
    padding: 15px;
}

.stat-item .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #8b5cf6;
}

.stat-item .stat-label {
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
}

.info-section {
    padding: 30px 40px;
}

.info-row {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

    .info-row:last-child {
        border-bottom: none;
    }

.info-label {
    font-weight: 600;
    color: #64748b;
    min-width: 140px;
    font-size: 14px;
}

.info-value {
    color: #1e293b;
    font-weight: 500;
}

.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .section-title i {
        color: #8b5cf6;
        font-size: 20px;
    }

/* Empty State Styles */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px 10px;
    min-height: 100px;
}

.empty-state-icon {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
}

    .empty-state-icon::before {
        content: '';
        position: absolute;
        width: 140px;
        height: 140px;
        border: 2px dashed var(--border-color);
        border-radius: 50%;
        animation: rotate 20s linear infinite;
    }

    .empty-state-icon i {
        font-size: 3.5rem;
        color: var(--primary-color);
        opacity: 0.8;
    }

.empty-state-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.empty-state-description {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 500px;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.empty-state-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Compact Empty State */
.empty-state-compact {
    padding: 2rem 1rem;
    min-height: 250px;
}

    .empty-state-compact .empty-state-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 1rem;
    }

        .empty-state-compact .empty-state-icon::before {
            width: 100px;
            height: 100px;
        }

        .empty-state-compact .empty-state-icon i {
            font-size: 2.5rem;
        }

    .empty-state-compact .empty-state-title {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .empty-state-compact .empty-state-description {
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }



body.theme-dark .settings-card.blue,
body.theme-dark-sidebar .settings-card.blue {
    --card-accent-bg: rgba(59, 130, 246, 0.1);
}

.settings-card.green {
    --card-accent: #10b981;
    --card-accent-light: #34d399;
    --card-accent-bg: #d1fae5;
}

body.theme-dark .settings-card.green,
body.theme-dark-sidebar .settings-card.green {
    --card-accent-bg: rgba(16, 185, 129, 0.1);
}

.settings-card.purple {
    --card-accent: #8b5cf6;
    --card-accent-light: #a78bfa;
    --card-accent-bg: #ede9fe;
}

body.theme-dark .settings-card.purple,
body.theme-dark-sidebar .settings-card.purple {
    --card-accent-bg: rgba(139, 92, 246, 0.1);
}

.settings-card.orange {
    --card-accent: #f59e0b;
    --card-accent-light: #fbbf24;
    --card-accent-bg: #fef3c7;
}

body.theme-dark .settings-card.orange,
body.theme-dark-sidebar .settings-card.orange {
    --card-accent-bg: rgba(245, 158, 11, 0.1);
}

.settings-card.red {
    --card-accent: #ef4444;
    --card-accent-light: #f87171;
    --card-accent-bg: #fee2e2;
}

body.theme-dark .settings-card.red,
body.theme-dark-sidebar .settings-card.red {
    --card-accent-bg: rgba(239, 68, 68, 0.1);
}

.settings-card.indigo {
    --card-accent: #6366f1;
    --card-accent-light: #818cf8;
    --card-accent-bg: #e0e7ff;
}

body.theme-dark .settings-card.indigo,
body.theme-dark-sidebar .settings-card.indigo {
    --card-accent-bg: rgba(99, 102, 241, 0.1);
}

.settings-card.pink {
    --card-accent: #ec4899;
    --card-accent-light: #f472b6;
    --card-accent-bg: #fce7f3;
}

body.theme-dark .settings-card.pink,
body.theme-dark-sidebar .settings-card.pink {
    --card-accent-bg: rgba(236, 72, 153, 0.1);
}

.settings-card.teal {
    --card-accent: #14b8a6;
    --card-accent-light: #2dd4bf;
    --card-accent-bg: #ccfbf1;
}

body.theme-dark .settings-card.teal,
body.theme-dark-sidebar .settings-card.teal {
    --card-accent-bg: rgba(20, 184, 166, 0.1);
}

.settings-card.cyan {
    --card-accent: #06b6d4;
    --card-accent-light: #22d3ee;
    --card-accent-bg: #cffafe;
}

body.theme-dark .settings-card.cyan,
body.theme-dark-sidebar .settings-card.cyan {
    --card-accent-bg: rgba(6, 182, 212, 0.1);
}

.settings-card.amber {
    --card-accent: #d97706;
    --card-accent-light: #f59e0b;
    --card-accent-bg: #fef3c7;
}

body.theme-dark .settings-card.amber,
body.theme-dark-sidebar .settings-card.amber {
    --card-accent-bg: rgba(217, 119, 6, 0.1);
}

.settings-card.emerald {
    --card-accent: #059669;
    --card-accent-light: #10b981;
    --card-accent-bg: #d1fae5;
}

body.theme-dark .settings-card.emerald,
body.theme-dark-sidebar .settings-card.emerald {
    --card-accent-bg: rgba(5, 150, 105, 0.1);
}

.settings-card.violet {
    --card-accent: #7c3aed;
    --card-accent-light: #8b5cf6;
    --card-accent-bg: #ede9fe;
}

body.theme-dark .settings-card.violet,
body.theme-dark-sidebar .settings-card.violet {
    --card-accent-bg: rgba(124, 58, 237, 0.1);
}

/* Settings Responsive */
@media (max-width: 1400px) {
    .settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .settings-card {
        padding: 20px;
    }

    .settings-card-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .profile-header,
    .stats-grid,
    .info-section {
        padding: 25px;
    }

    .stat-item {
        padding: 10px;
    }

    .stat-value {
        font-size: 24px;
    }

    .info-row {
        flex-direction: column;
        gap: 5px;
    }

    .info-label {
        min-width: auto;
    }
}

@media (max-width: 992px) {

    .top-bar {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
}
/* ========================================
   JOINED CLUB CARDS CSS
   Copy this to your theme-styles.css
   ======================================== */

/* Club Cards Grid */
.clubs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.club-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

    .club-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

[data-theme="dark"] .club-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Club Header */
.club-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.club-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 6px;
}

.club-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.edit-club-btn {
    background: var(--primary-blue);
    color: white;
}

    .edit-club-btn:hover {
        background: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

.delete-club-btn {
    background: #ef4444;
    color: white;
}

    .delete-club-btn:hover {
        background: #dc2626;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    }

/* Club Cards */
/* ─── Club Card Header ─────────────────────────── */
.club-card-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
}

/* ─── Club Logo ────────────────────────────────── */
.club-logo {
    width: 64px; /* ✅ single definition — removed duplicate 80px */
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

/* ─── Club Info ────────────────────────────────── */
.club-info {
    flex: 1;
    min-width: 0; /* ✅ removed padding-right: 80px — no reason for it */
}

/* ─── Club Name ────────────────────────────────── */
.club-name {
    font-size: 18px;
    font-weight: 600; /* ✅ single consistent weight */
    color: var(--text-primary);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

/* ─── Club Detail Items ────────────────────────── */
.club-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.club-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

    .club-detail-item i {
        font-size: 14px;
        width: 16px;
        flex-shrink: 0;
        color: var(--primary-blue);
    }

    .club-detail-item span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ─── Club Card Actions ────────────────────────── */
.club-card-actions {
    padding: 0.75rem 1rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    background-color: var(--light-gray);
}

/* Icon Player Section */
.icon-player-section {
    margin-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.icon-player-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.icon-player-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-player-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.player-avatar {
    width: 50px;
    height: 67px; /* ✅ 50 × (4/3) = 66.6 → round to 67px */
    border-radius: 8px;
    object-fit: cover;
    object-position: center top;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.icon-player-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border: 2px solid var(--card-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .icon-player-badge i {
        font-size: 10px;
        color: white;
    }

.icon-player-info {
    flex: 1;
    min-width: 0;
}

.icon-player-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.change-btn {
    padding: 8px 16px;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

    .change-btn:hover {
        background: #2563eb;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .change-btn i {
        font-size: 14px;
    }

.add-icon-player-btn {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

    .add-icon-player-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
    }

    .add-icon-player-btn i {
        font-size: 16px;
    }

.icon-player-card.no-player {
    display: none;
}

/* Club Members Section */
.club-members-section {
    margin-top: 16px;
}

.club-members-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.club-members-label {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.members-count {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.club-members-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--light-gray);
    border-radius: 10px;
    transition: all 0.2s ease;
}

    .member-item:hover {
        background: var(--border-color);
    }

.member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.member-info {
    flex: 1;
    min-width: 0;
}

.member-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-phone {
    font-size: 11px;
    color: var(--text-secondary);
}

.remove-member-btn {
    padding: 6px 10px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .remove-member-btn:hover {
        background: #dc2626;
        transform: scale(1.05);
    }

.add-member-btn {
    width: 100%;
    padding: 10px 16px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

    .add-member-btn:hover {
        background: #059669;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .add-member-btn i {
        font-size: 14px;
    }

.no-members-msg {
    text-align: center;
    padding: 16px;
    color: var(--text-secondary);
    font-size: 13px;
    background: var(--light-gray);
    border-radius: 10px;
    margin-bottom: 12px;
}

/* Responsive - Club Cards */
@media (max-width: 992px) {
    .clubs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .clubs-grid {
        grid-template-columns: 1fr;
    }
}

/* Overlay Background */
.sold-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}

/* Announcement Card */
.sold-card {
    position: relative;
    background: linear-gradient(145deg, #060d1a 0%, #0d1f3c 55%, #152d52 100%);
    border-radius: 24px;
    text-align: center;
    color: white;
    box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.07);
    max-width: 440px;
    width: 100%;
    overflow: hidden;
    animation: soldAnimation .5s cubic-bezier(.34,1.56,.64,1);
}

/* Card content area */
.sold-card-body {
    padding: 38px 44px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Event label */
.sold-event-label {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 10px;
}

/* Icon */
.sold-icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 12px;
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
}

/* Player Name */
.player-name {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.15;
    text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

/* Club Name */
.club-name {
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Price Badge */
.price-badge {
    display: inline-block;
    background: rgba(251,191,36,0.12);
    border: 2px solid #fbbf24;
    color: #fcd34d;
    padding: 8px 26px;
    font-weight: 800;
    border-radius: 50px;
    margin-top: 14px;
    font-size: 1.15rem;
    letter-spacing: .5px;
}

/* Unsold sub-message */
.unsold-msg {
    font-size: .88rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
    margin-top: 10px;
}

/* Button */
.next-btn {
    margin-top: 22px;
    padding: 10px 30px;
    font-size: .9rem;
    font-weight: 700;
    border-radius: 50px;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: white !important;
    transition: background .15s !important;
}
.next-btn:hover { background: rgba(255,255,255,0.2) !important; }

/* Actions row: Next Player + Pause, side by side */
.sold-actions-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.sold-actions-row .next-btn { margin-top: 0; }

/* Pause — holds the popup open, blocking the close/next-player controls
   until resumed (e.g. while double-checking a sale before moving on). */
.pause-btn {
    padding: 10px 20px;
    font-size: .9rem;
    font-weight: 700;
    border-radius: 50px;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: rgba(255,255,255,0.75) !important;
    transition: background .15s, border-color .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pause-btn:hover { background: rgba(255,255,255,0.1) !important; }
.pause-btn.paused {
    background: rgba(251,191,36,0.15) !important;
    border-color: #fbbf24 !important;
    color: #fcd34d !important;
}

.close-btn:disabled,
.next-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sponsor footer strip */
.sold-card-footer {
    background: rgba(0,0,0,0.28);
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 14px 24px 16px;
    text-align: left;
}

.popup-sp-label {
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    margin-bottom: 10px;
    text-align: left;
}

#popup-sponsor-slot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.popup-sp-logo-box {
    width: 46px; height: 46px;
    background: #fff;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding: 4px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    flex-shrink: 0;
}
.popup-sp-logo-box img { width: 100%; height: 100%; object-fit: contain; }

.popup-sp-info { text-align: left; }

.popup-sp-name {
    font-size: .92rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.popup-sp-badge {
    display: inline-block;
    font-size: .58rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 50px;
    background: rgba(139,92,246,.22);
    border: 1px solid rgba(139,92,246,.38);
    color: rgba(255,255,255,0.8);
    margin-top: 4px;
    letter-spacing: .4px;
}

/* Title (kept for backwards compat) */
.sold-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* Animation */
@keyframes soldAnimation {
    from { transform: scale(.82) translateY(-18px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.player-display-content {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
}



/* Right Side - Controls */
.controls-container {
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Stats Horizontal Layout */
.stats-horizontal {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stats-horizontal .stat-card {
    background-color: var(--bg-secondary);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    text-align: center;
    flex: 1;
    min-width: 70px;
}

.stats-horizontal .stat-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stats-horizontal .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
}

.stats-horizontal .stat-value.sold {
    color: var(--success);
}

.stats-horizontal .stat-value.unsold {
    color: var(--danger);
}

.stats-horizontal .stat-value.total {
    color: var(--primary-blue);
}

.stats-horizontal .stat-value.amount {
    color: var(--warning);
}

/* Card Styles */
.bid-card {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: var(--shadow);
}

.bid-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
}


/* Player Card Loading Overlay */
.player-card-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 16px;
}

    .player-card-loader.active {
        display: flex;
    }

.player-card-loader .loader-content {
    text-align: center;
    color: white;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transform: none;
    transition: none;
    gap: 0;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

.player-card-loader .loader-text {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1rem;
    color: white;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* =====================================================
   BOOTSTRAP 5 MOBILE-FRIENDLY IMPROVEMENTS
   ===================================================== */

/* --------------------------------------------------
   Touch-friendly minimum tap target (44 × 44 px)
   -------------------------------------------------- */
@media (max-width: 768px) {
    .btn,
    .btn-purple,
    .btn-default,
    .sidebar-item,
    .mobile-menu-item,
    .theme-toggle-btn,
    .menu-toggle-header,
    .mobile-menu-toggle,
    .fullscreen-toggle,
    .logout-btn,
    .admin-info,
    .header-icon-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Form controls — large enough for comfortable mobile input */
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px; /* prevents iOS auto-zoom on focus */
        padding: 10px 12px;
    }

    /* Taller sidebar items for easier tapping on mobile */
    .sidebar .sidebar-item,
    .sidebar.collapsed .sidebar-item {
        min-height: 56px !important;
    }

    /* Mobile footer menu items */
    .mobile-menu-item {
        min-height: 52px;
        padding: 4px 2px;
    }

    /* Hide fullscreen toggle on mobile — not useful on small screens */
    .fullscreen-toggle {
        display: none !important;
    }

    /* Show user avatar directly in header (no 3-dots required) */
    .header-right .admin-info {
        display: flex !important;
        gap: 0;
    }

    /* Hide name/phone text but keep avatar */
    .header-right .admin-text {
        display: none !important;
    }

    /* Compact content area padding on mobile */
    .content-area {
        padding: 10px;
    }

    /* Page header stacks on mobile */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Form card — reduce padding on small screens */
    .form-card {
        padding: 16px;
        border-radius: 12px;
    }

    .form-card .form-actions {
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: -16px;
        padding: 12px 16px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    /* Content card — reduce padding */
    .content-card {
        padding: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Shared status badges  (used on Clubs, Sponsors, and any list page)
   ═══════════════════════════════════════════════════════════════════════════ */
.badge-active   { background: rgba(34,197,94,.12)  !important; color: #15803d !important; }
.badge-inactive { background: rgba(148,163,184,.12) !important; color: #64748b !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Joined Clubs page  (.jc-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Custom tokens (purple palette + gradient stops) */
.jc-scope {
    --jc-purple:      #6d28d9;
    --jc-purple-soft: rgba(109,40,217,.07);
    --jc-logo-bg1:    #3730a3;
    --jc-logo-bg2:    #6d28d9;
    --jc-av-bg1:      #4c1d95;
    --jc-av-bg2:      #6d28d9;
    --jc-add-dash:    rgba(109,40,217,.30);
}
body.theme-dark .jc-scope,
body.theme-dark-sidebar .jc-scope {
    --jc-purple-soft: rgba(109,40,217,.12);
    --jc-logo-bg1:    #2e1065;
    --jc-logo-bg2:    #5b21b6;
    --jc-av-bg1:      #3b0764;
    --jc-av-bg2:      #5b21b6;
    --jc-add-dash:    rgba(168,85,247,.35);
}

/* Grid — 3 cols desktop, 2 tablet, 1 mobile; align-items:start prevents height matching */
.jc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 12px;
    row-gap: 16px;
    align-items: start;
}
@media (max-width: 1024px) { .jc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  640px) { .jc-grid { grid-template-columns: 1fr; row-gap: 12px; } }

/* Card */
.jc-card {
    background: var(--card-bg);
    border: 0.5px solid var(--border-color) !important;
    border-radius: 14px !important;
    transition: box-shadow .18s, transform .18s;
}
.jc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.08); }
body.theme-dark .jc-card:hover,
body.theme-dark-sidebar .jc-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.30); }

/* Club logo container */
.jc-logo {
    width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(145deg, var(--jc-logo-bg1), var(--jc-logo-bg2));
    border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.jc-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-logo-init { font-size: 17px; font-weight: 800; color: #fff; line-height: 1; user-select: none; letter-spacing: .3px; }

/* Club info text */
.jc-club-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.jc-contact-row { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; color: var(--text-secondary); }
.jc-contact-row span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.jc-contact-row .ti, .jc-contact-row .bi { font-size: 12px; opacity: .65; }

/* Icon action buttons (edit / delete) — shared with .bp-action-btn; the single
   definition lives in the Design System section (search "bp-action-btn"). */

/* Card footer strip */
.jc-footer {
    border-top: 0.5px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
}

/* Footer stats variant: icon-player / representative counts + action row, stacked */
.jc-footer-stats { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }

.jc-stat-row { display: flex; align-items: center; justify-content: flex-start; gap: 16px; }
.jc-stat { display: flex; align-items: center; gap: 8px; }
.jc-stat-icon {
    width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
    background: var(--jc-purple-soft); color: var(--jc-purple);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.jc-stat-icon-warn { background: rgba(239,68,68,.10); color: #ef4444; }
.jc-stat-text { display: flex; flex-direction: column; line-height: 1.2; }
.jc-stat-num { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.jc-stat-num-warn { color: #dc2626; }
.jc-stat-label { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.jc-stat-divider { width: 1px; align-self: stretch; background: var(--border-color); }

.jc-manage-row { display: flex; gap: 8px; }
.jc-manage-row .jc-manage-toggle { flex: 1; }

/* Disabled "All Clubs Added" header button — soft green to signal completion */
.jc-btn-limit-done {
    background: rgba(34,197,94,.12);
    color: #15803d;
    border: 1px solid rgba(34,197,94,.25);
    font-size: 14px; font-weight: 600;
    opacity: 1 !important;
    cursor: default;
}
.jc-btn-limit-done:disabled { opacity: 1 !important; }

/* Manage toggle */
.jc-manage-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--jc-purple);
    background: var(--card-bg); border: 1.5px solid var(--jc-purple);
    border-radius: 6px; padding: 7px 12px;
    cursor: pointer; transition: background .13s, border-color .13s;
    white-space: nowrap;
}
.jc-manage-toggle:hover { background: var(--jc-purple-soft); }

/* Expandable manage panel */
.jc-manage-panel { border-top: 0.5px solid var(--border-color); }

.jc-manage-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    padding: 8px 10px 6px 14px;
    border-bottom: 0.5px solid var(--border-color);
    background: var(--jc-purple-soft);
}
.jc-manage-header-title { font-size: 13px; font-weight: 700; color: var(--jc-purple); margin-bottom: 1px; }
.jc-manage-header-sub   { font-size: 11px; color: var(--text-secondary); }

.jc-manage-close {
    width: 26px; height: 26px; border-radius: 6px; border: none; flex-shrink: 0; padding: 0;
    background: transparent; color: var(--jc-purple); opacity: .75;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 15px; transition: background .14s, opacity .14s;
}
.jc-manage-close:hover { background: rgba(109,40,217,.14); opacity: 1; }

.jc-section { border-top: 0.5px solid var(--border-color); background: var(--bg-secondary); }
.jc-section:first-child { border-top: none; }

.jc-section-icon {
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(0,0,0,.05);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.theme-dark .jc-section-icon,
body.theme-dark-sidebar .jc-section-icon { background: rgba(255,255,255,.05); }
.jc-section-icon .ti, .jc-section-icon .bi { font-size: 15px; color: var(--text-secondary); }

/* Count pill — extends Bootstrap .badge.rounded-pill */
.jc-count-pill {
    width: 28px; height: 28px; padding: 0; flex-shrink: 0;
    background: var(--jc-purple-soft); color: var(--jc-purple);
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* Member avatar */
.jc-av {
    width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(135deg, var(--jc-av-bg1), var(--jc-av-bg2));
    display: flex; align-items: center; justify-content: center;
}
.jc-av img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.jc-av-init { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.90); line-height: 1; user-select: none; }

/* Small star overlay on avatar */
.jc-star {
    position: absolute; top: -2px; right: -2px;
    width: 14px; height: 14px; border-radius: 50%;
    background: #f59e0b;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--card-bg);
}
.jc-star .ti, .jc-star .bi { font-size: 7px; color: #fff; line-height: 1; }

/* Danger remove button */
.jc-remove-btn {
    width: 28px; height: 28px; border-radius: 7px; border: none; flex-shrink: 0; padding: 0;
    background: rgba(239,68,68,.08); color: var(--error-color);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; transition: background .14s, color .14s;
}
.jc-remove-btn:hover { background: var(--error-color); color: #fff; }

/* Dashed "Add" button */
.jc-add-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 9px 14px; border-radius: 9px;
    border: 1.5px dashed var(--jc-add-dash);
    color: var(--jc-purple); background: transparent;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.jc-add-btn:hover { background: var(--jc-purple-soft); border-color: var(--jc-purple); }
.jc-add-btn .ti, .jc-add-btn .bi { font-size: 16px; }

/* "N more clubs required" info notice */
.jc-info-msg {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 500; color: #92400e;
    background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.25);
    border-radius: 20px; padding: 3px 10px; margin-top: 5px;
}
.jc-info-msg .ti, .jc-info-msg .bi { font-size: 13px; color: #d97706; }

/* Empty state icon box */
.jc-empty-icon {
    width: 92px; height: 92px; border-radius: 24px;
    background: var(--jc-purple-soft);
    display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
}
.jc-empty-icon .ti, .jc-empty-icon .bi { font-size: 44px; color: var(--jc-purple); }

/* --------------------------------------------------
   Responsive form grid using Bootstrap row/col
   -------------------------------------------------- */
.form-row-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .form-row-responsive > * {
        flex: 1 1 260px; /* wraps when viewport is too narrow */
        min-width: 0;
    }

/* --------------------------------------------------
   Dark mode — Bootstrap form controls
   -------------------------------------------------- */
body.theme-dark .form-control,
body.theme-dark .form-select {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

    body.theme-dark .form-control:focus,
    body.theme-dark .form-select:focus {
        background-color: var(--card-bg);
        border-color: var(--bs-primary);
        color: var(--text-primary);
        box-shadow: 0 0 0 3px rgba(135, 124, 242, 0.2);
    }

    body.theme-dark .form-control::placeholder {
        color: var(--text-secondary);
        opacity: 0.7;
    }

body.theme-dark .form-label {
    color: var(--text-primary);
}

body.theme-dark .form-text,
body.theme-dark .text-muted {
    color: var(--text-secondary) !important;
}

body.theme-dark .input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

body.theme-dark .table,
body.theme-dark-sidebar .table {
    /* Override Bootstrap CSS vars so --bs-table-bg doesn't resolve to white */
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-bg: var(--bg-secondary);
    --bs-table-striped-bg: var(--bg-secondary);
    color: var(--text-primary);
}

body.theme-dark .table thead th,
body.theme-dark-sidebar .table thead th {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

body.theme-dark .table tbody td,
body.theme-dark-sidebar .table tbody td {
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.theme-dark .table tbody tr,
body.theme-dark-sidebar .table tbody tr {
    background-color: transparent;
}

body.theme-dark .table tbody tr:hover,
body.theme-dark-sidebar .table tbody tr:hover {
    background-color: var(--bg-secondary);
}

/* DataTables scroll wrapper — dark mode */
body.theme-dark .dataTables_wrapper,
body.theme-dark .dataTables_scroll,
body.theme-dark .dataTables_scrollHead,
body.theme-dark .dataTables_scrollHeadInner,
body.theme-dark .dataTables_scrollBody,
body.theme-dark-sidebar .dataTables_wrapper,
body.theme-dark-sidebar .dataTables_scroll,
body.theme-dark-sidebar .dataTables_scrollHead,
body.theme-dark-sidebar .dataTables_scrollHeadInner,
body.theme-dark-sidebar .dataTables_scrollBody {
    background-color: var(--card-bg) !important;
    color: var(--text-primary);
}

body.theme-dark .dataTables_info,
body.theme-dark .dataTables_paginate .paginate_button,
body.theme-dark-sidebar .dataTables_info,
body.theme-dark-sidebar .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
}

body.theme-dark .dataTables_paginate .paginate_button.current,
body.theme-dark-sidebar .dataTables_paginate .paginate_button.current {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.theme-dark .dataTables_paginate .paginate_button:hover,
body.theme-dark-sidebar .dataTables_paginate .paginate_button:hover {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.theme-dark .modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

body.theme-dark .modal-header {
    border-color: var(--border-color);
}

body.theme-dark .modal-footer {
    border-color: var(--border-color);
}

/* --------------------------------------------------
   Dark sidebar — same form control overrides
   -------------------------------------------------- */
body.theme-dark-sidebar .form-control,
body.theme-dark-sidebar .form-select {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

    body.theme-dark-sidebar .form-control:focus,
    body.theme-dark-sidebar .form-select:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 3px rgba(135, 124, 242, 0.2);
    }

/* --------------------------------------------------
   Tablet layout tweaks (769 – 1024 px)
   -------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    .form-control,
    .form-select {
        min-height: 40px;
    }

    .btn,
    .btn-purple {
        min-height: 40px;
    }

    .content-area {
        padding: 12px;
    }
}

/* --------------------------------------------------
   Bootstrap navbar — ensure proper z-index layering
   -------------------------------------------------- */
.navbar {
    z-index: 1030;
}

/* --------------------------------------------------
   Responsive tournament grid — collapse on small screens
   -------------------------------------------------- */
@media (max-width: 576px) {
    .tournament-grid-modern {
        grid-template-columns: 1fr;
    }

    .tournament-stats-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .stat-value {
        font-size: 18px;
    }

    .stat-label {
        font-size: 11px;
    }
}

/* --------------------------------------------------
   Responsive table — horizontal scroll on mobile
   -------------------------------------------------- */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------
   Button group — stack vertically on xs screens
   -------------------------------------------------- */
@media (max-width: 480px) {
    .btn-group-responsive {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

        .btn-group-responsive .btn,
        .btn-group-responsive .btn-purple {
            width: 100%;
            justify-content: center;
        }
}

/* --------------------------------------------------
   Theme dropdown — ensure it stays on-screen on mobile
   -------------------------------------------------- */
@media (max-width: 480px) {
    .theme-dropdown {
        right: 0;
        left: auto;
        min-width: 180px;
    }
}

/* --------------------------------------------------
   User dropdown — full-width on very small screens
   -------------------------------------------------- */
@media (max-width: 380px) {
    .user-dropdown {
        width: calc(100vw - 16px) !important;
        right: 8px !important;
        left: 8px !important;
    }
}

/* ══════════════════════════════════════════════════════
   My Tournaments page  (.myt-*)
   Desktop design applied to all breakpoints.
   Colours reference existing CSS custom properties.
══════════════════════════════════════════════════════ */

/* ── Page header ─────────────────────────────── */
.myt-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 12px;
    flex-wrap: wrap;
}
.myt-header h1 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px;
    line-height: 1.2;
}
.myt-header p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}
.myt-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary-blue);
    background: rgba(59, 130, 246, .08);
    border: 1.5px solid rgba(59, 130, 246, .18);
    white-space: nowrap;
    flex-shrink: 0;
}
.myt-count-pill i { font-size: 11px; }

/* ── Filter panel ────────────────────────────── */
.myt-filters {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow);
}

/* Search */
.myt-search {
    position: relative;
    width: 100%;
}
.myt-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}
#myt-search-input {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 40px 0 40px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13.5px;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#myt-search-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
    background: var(--card-bg);
}
#myt-search-input::placeholder {
    color: var(--text-secondary);
    opacity: .7;
}
.myt-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    transition: color .12s ease, background .12s ease;
}
.myt-search-clear.visible { display: flex; }
.myt-search-clear:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, .07);
}

/* Chip row — mobile: horizontal scroll; desktop: wraps */
.myt-chip-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}
.myt-chip-row::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
    .myt-chip-row { flex-wrap: wrap; overflow-x: visible; }
}
.myt-chip-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 40px;
}
.myt-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: 100px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
    transition: border-color .13s ease, color .13s ease,
                background .13s ease, box-shadow .13s ease;
}
.myt-chip i { font-size: 10px; }
.myt-chip:hover:not(.active) {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: rgba(59, 130, 246, .05);
}
.myt-chip.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(59, 130, 246, .28);
}
.myt-chip-n {
    font-size: 9.5px;
    font-weight: 700;
    padding: 1.5px 5px;
    border-radius: 100px;
    background: rgba(0, 0, 0, .08);
    line-height: 1.6;
    letter-spacing: 0;
}
.myt-chip.active .myt-chip-n { background: rgba(255, 255, 255, .22); }

/* Completed-mode bar (replaces chip rows) */
.myt-completed-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.myt-completed-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #047857;
}
.myt-completed-label i { font-size: 13px; color: #10b981; }
.myt-completed-count {
    background: rgba(16, 185, 129, .12);
    color: #047857;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 100px;
}
.myt-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-color);
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
    white-space: nowrap;
}
.myt-back-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
    background: var(--card-bg);
}
.myt-back-btn i { font-size: 11px; }

/* Needs Attention chip — amber accent when active */
.myt-chip-attn { border-color: rgba(245, 158, 11, .30); color: #b45309; }
.myt-chip-attn .myt-chip-n { background: rgba(245, 158, 11, .12); color: #b45309; }
.myt-chip-attn.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: #f59e0b;
    color: #fff;
}
.myt-chip-attn.active .myt-chip-n { background: rgba(255,255,255,.22); color: #fff; }

/* ── Result summary ──────────────────────────── */
.myt-summary {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding: 0 2px;
}
.myt-summary i    { color: var(--primary-blue); font-size: 12px; }
.myt-summary strong { color: var(--text-primary); font-weight: 700; }

/* ── Card grid — 3 col desktop, 2 col tablet, 1 col mobile ── */
.myt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 991px) {
    .myt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .myt-grid { grid-template-columns: 1fr; }
}

/* ── Card ────────────────────────────────────── */
.myt-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: transform .16s cubic-bezier(.25, .46, .45, .94),
                box-shadow  .16s cubic-bezier(.25, .46, .45, .94);
}
/* Role-coloured top accent (inset shadow = no layout impact) */
.myt-card[data-role="1"] { box-shadow: inset 0 3px 0 var(--myt-role-1), 0 1px 3px rgba(0,0,0,.06); }
.myt-card[data-role="2"] { box-shadow: inset 0 3px 0 var(--myt-role-2), 0 1px 3px rgba(0,0,0,.06); }
.myt-card[data-role="3"] { box-shadow: inset 0 3px 0 var(--myt-role-3), 0 1px 3px rgba(0,0,0,.06); }
.myt-card[data-role="4"] { box-shadow: inset 0 3px 0 var(--myt-role-4), 0 1px 3px rgba(0,0,0,.06); }

.myt-card[data-role="1"]:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 var(--myt-role-1), 0 8px 24px rgba(124, 58, 237, .12); }
.myt-card[data-role="2"]:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 var(--myt-role-2), 0 8px 24px rgba(37,  99, 235, .12); }
.myt-card[data-role="3"]:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 var(--myt-role-3), 0 8px 24px rgba(217, 119,  6, .10); }
.myt-card[data-role="4"]:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 var(--myt-role-4), 0 8px 24px rgba(5,  150, 105, .10); }

/* State-based accents — override role accent; placed after role rules so specificity wins */
.myt-card[data-state="attention"] { box-shadow: inset 0 3px 0 #f59e0b, 0 1px 3px rgba(0,0,0,.06); border-color: rgba(245,158,11,.22); }
.myt-card[data-state="active"]    { box-shadow: inset 0 3px 0 #3b82f6, 0 1px 3px rgba(0,0,0,.06); }
.myt-card[data-state="ready"]     { box-shadow: inset 0 3px 0 #10b981, 0 1px 3px rgba(0,0,0,.06); }

.myt-card[data-state="attention"]:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 #f59e0b, 0 8px 24px rgba(245,158,11,.18); border-color: rgba(245,158,11,.35); }
.myt-card[data-state="active"]:hover    { transform: translateY(-2px); box-shadow: inset 0 3px 0 #3b82f6, 0 8px 24px rgba(59,130,246,.15); }
.myt-card[data-state="ready"]:hover     { transform: translateY(-2px); box-shadow: inset 0 3px 0 #10b981, 0 8px 24px rgba(16,185,129,.15); }

/* Card body */
.myt-card-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 20px 14px;
    flex: 1;
}
.myt-logo {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    margin-top: 1px;
}
.myt-info { flex: 1; min-width: 0; }

/* Name + share row */
.myt-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}
.myt-name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0;
    flex: 1;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Share button ────────────────────────────── */
.myt-share-wrap { position: relative; flex-shrink: 0; }
.myt-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.myt-share-btn:hover,
.myt-share-btn.open {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: rgba(59, 130, 246, .06);
}
.myt-share-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 11px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .13);
    min-width: 176px;
    z-index: 200;
    padding: 4px;
}
.myt-share-menu.open { display: block; }
.myt-share-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 7px;
    text-align: left;
    white-space: nowrap;
    transition: background .11s ease, color .11s ease;
}
.myt-share-opt:hover {
    background: var(--bg-secondary);
    color: var(--primary-blue);
}
.myt-share-opt i { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
.myt-share-opt.disabled { opacity: .4; cursor: default; pointer-events: none; }

/* ── Badges ──────────────────────────────────── */
.myt-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}
.myt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    line-height: 1;
}
.myt-badge i { font-size: 9px; }

/* Status badges — soft tinted */
.myt-s-upcoming   { background: rgba(100, 116, 139, .09); color: #64748b; }
.myt-s-inprogress { background: rgba(245, 158,  11, .11); color: #b45309; }
.myt-s-completed  { background: rgba( 16, 185, 129, .11); color: #047857; }

/* Role badges — solid fill, white text (uses --myt-role-* vars) */
.myt-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.myt-role-badge i { font-size: 10px; }
.myt-r-1 { background: var(--myt-role-1); color: #fff; }
.myt-r-2 { background: var(--myt-role-2); color: #fff; }
.myt-r-3 { background: var(--myt-role-3); color: #fff; }
.myt-r-4 { background: var(--myt-role-4); color: #fff; }

/* Auction badges */
.myt-a-1 { background: rgba(107, 114, 128, .09); color: #6b7280; }
.myt-a-2 { background: rgba( 59, 130, 246, .11); color: #2563eb; }
.myt-a-3 { background: rgba( 16, 185, 129, .11); color: #047857; }

/* Not-verified warning badge */
.myt-unverified {
    background: rgba(245, 158, 11, .13);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, .30);
    font-weight: 700;
}

/* Disabled open-tournament button */
.myt-open-disabled {
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary, #94a3b8);
    border: 1px solid var(--border-color, #e2e8f0);
    cursor: not-allowed;
    opacity: .65;
    pointer-events: none;
}
/* Wrapper carries the tooltip since pointer-events is none on the button */
.myt-open-disabled-wrap {
    display: block;
    cursor: not-allowed;
}

/* Inline alert message below badges */
.myt-alert-msg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: #b45309;
    background: rgba(245, 158, 11, .07);
    border: 1px solid rgba(245, 158, 11, .20);
    border-radius: 7px;
    padding: 5px 9px;
    margin: 6px 0 8px;
    line-height: 1.4;
}
.myt-alert-msg i { font-size: 11px; flex-shrink: 0; }

/* Stacked footer for unverified cards */
.myt-footer-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Verify Tournament secondary button */
.myt-verify-btn {
    background: rgba(245, 158, 11, .09);
    color: #b45309;
    border: 1.5px solid rgba(245, 158, 11, .35);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.myt-verify-btn:hover {
    background: rgba(245, 158, 11, .16);
    border-color: rgba(245, 158, 11, .55);
    color: #92400e;
}
.myt-verify-btn i { font-size: 14px; }

/* Date */
.myt-date {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}
.myt-date i { font-size: 11px; opacity: .55; flex-shrink: 0; }

/* ── Card footer ─────────────────────────────── */
.myt-card-sep {
    height: 1px;
    background: var(--border-color);
    margin: 0 16px;
    opacity: .55;
}
.myt-card-footer { padding: 12px 20px 16px; }
/* Open btn uses Bootstrap btn btn-primary w-100; just add radius + arrow slide */
.myt-open-btn { border-radius: 9px; font-size: 13px; }
.myt-open-btn i { font-size: 16px; transition: transform .14s ease; }
.myt-open-btn:hover i { transform: translateX(3px); }

/* ── Toast ───────────────────────────────────── */
.myt-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1e293b;
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}
.myt-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.myt-toast i { font-size: 13px; }

/* ── Empty state — uses existing .empty-state* classes; only toggle needed ── */
/* default hidden; .visible shows it (JS toggles this class for filter empty) */
.myt-empty         { display: none; }
.myt-empty.visible { display: flex; }

/* ── Dark mode overrides ─────────────────────── */
body.theme-dark .myt-filters,
body.theme-dark .myt-card {
    border-color: var(--border-color);
}
body.theme-dark #myt-search-input {
    border-color: var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
}
body.theme-dark #myt-search-input:focus {
    background: var(--card-bg);
}
body.theme-dark .myt-chip {
    border-color: var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
body.theme-dark .myt-share-btn {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
body.theme-dark .myt-share-menu {
    background: var(--card-bg);
    border-color: var(--border-color);
}
body.theme-dark .myt-alert-msg {
    background: rgba(245, 158, 11, .08);
    border-color: rgba(245, 158, 11, .18);
}
body.theme-dark .myt-verify-btn {
    background: rgba(245, 158, 11, .08);
    border-color: rgba(245, 158, 11, .25);
}
body.theme-dark .myt-open-disabled {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
body.theme-dark .myt-back-btn {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
body.theme-dark .myt-back-btn:hover {
    background: var(--card-bg);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════
   Shared ft-* components — Tournament card list UI
   ═══════════════════════════════════════════════════════════ */

/* ── Malayalam + multilingual name support ────────────────── */
.ft-name, .ft-sub {
    font-family: 'Noto Sans Malayalam', 'Inter', -apple-system,
                 BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Filter panel ─────────────────────────────────────────── */
.ft-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    display: flex; flex-direction: column; gap: 10px;
}

/* Search row */
.ft-search-row  { display: flex; gap: 8px; align-items: center; }
.ft-search-wrap {
    position: relative; flex: 1; min-width: 0;
    display: flex; align-items: center;
    border: 1.5px solid var(--border-color); border-radius: 9px;
    background: var(--bg-secondary);
    transition: border-color .15s, box-shadow .15s;
    overflow: hidden;
}
.ft-search-wrap:focus-within {
    border-color: var(--primary-blue);
    outline: 3px solid rgba(59,130,246,.09); outline-offset: 0px;
    background: var(--card-bg);
}
.ft-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-secondary); font-size: 13px; pointer-events: none;
}
.ft-search {
    flex: 1; min-width: 0; height: 38px;
    border: none; border-radius: 9px;
    background: transparent; color: var(--text-primary);
    padding: 0 6px 0 36px; font-size: 13.5px;
}
.ft-search:focus { outline: none; background: transparent; }
.ft-search::placeholder { color: var(--text-secondary); opacity: .7; }
.ft-search-clear {
    flex-shrink: 0;
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 12px; padding: 3px 4px;
    display: none; align-items: center; justify-content: center;
    border-radius: 50%; transition: color .13s, background .13s;
}
.ft-search-clear:hover { color: var(--text-primary); background: rgba(0,0,0,.07); }
.ft-search-clear.visible { display: flex; }
.ft-search-btn {
    flex-shrink: 0; align-self: stretch;
    padding: 0 14px; margin: 0;
    display: inline-flex; align-items: center; gap: 5px;
    border: none; border-left: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 0;
    background: var(--bg-secondary, #f8fafc); color: var(--text-primary, #334155);
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s; white-space: nowrap;
}
.ft-search-btn:hover { background: var(--border-color, #f1f5f9); border-left-color: var(--text-secondary, #cbd5e1); }

/* Chips — matches .jp-filters container: one scrolling row, never wrapped. */
.ft-chips-scroll {
    display: flex; gap: 8px; flex-wrap: nowrap; align-items: center;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 2px 0 6px;
    min-width: 0; touch-action: pan-x;
}
.ft-chips-scroll::-webkit-scrollbar { display: none; }
.ft-chips-scroll > .bp-filter-pill { flex-shrink: 0; }
/* Advanced filter toggle button — shared by filter panels */
.ft-filter-btn {
    height: 38px; padding: 0 14px; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    border: 1.5px solid var(--border-color); border-radius: 9px;
    background: var(--bg-secondary); color: var(--text-secondary);
    font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s;
}
.ft-filter-btn:hover  { border-color: var(--primary-blue); color: var(--primary-blue); }
.ft-filter-btn.active { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.ft-adv.collapsed { display: none; }
.bp-mobile-filter-scroll {
    display: flex; gap: 6px; overflow-x: auto; align-items: center;
    scrollbar-width: none; -ms-overflow-style: none;
    min-width: 0; touch-action: pan-x;
}
.bp-mobile-filter-scroll::-webkit-scrollbar { display: none; }
.ft-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 11px; border-radius: 100px; white-space: nowrap;
    font-size: 12px; font-weight: 600; cursor: pointer;
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary); color: var(--text-secondary);
    transition: all .15s;
}
.ft-chip:hover  { border-color: var(--primary-blue); color: var(--primary-blue); }
.ft-chip.active { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.ft-chip-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 16px; padding: 0 4px;
    border-radius: 100px; font-size: 10px; font-weight: 700;
    background: rgba(0,0,0,.08); color: inherit;
}
.ft-chip.active .ft-chip-n { background: rgba(255,255,255,.25); }

/* ── Tournament row grid ───────────────────────────────────── */
.ft-row {
    display: grid;
    grid-template-columns: 50px 1fr 180px 162px auto;
    grid-template-areas: "logo info badges date-stats action";
    column-gap: 12px;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 14px;
    transition: border-color .15s, box-shadow .15s;
    position: relative;
}
.ft-row:hover {
    border-color: rgba(99,102,241,.25);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Named grid areas */
.ft-logo           { grid-area: logo; }
.ft-col-info       { grid-area: info;       min-width: 0; }
.ft-col-badges     { grid-area: badges;     display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; overflow: hidden; }
.ft-col-date-stats { grid-area: date-stats; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ft-col-action     { grid-area: action;     display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 44px; gap: 6px; }

/* Logo */
.ft-logo {
    width: 50px; height: 50px; border-radius: 9px;
    object-fit: cover; border: 1px solid var(--border-color);
    background: var(--bg-secondary); display: block;
}
.ft-logo-wrap {
    width: 68px; height: 68px; border-radius: 12px;
    overflow: hidden; background: #ffffff !important;
    border: 1px solid var(--border-color, #e2e8f0);
    flex-shrink: 0; position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 2px;
}
.ft-logo-wrap .ft-logo {
    width: 100%; height: 100%; max-width: 100%; max-height: 100%;
    object-fit: contain; border: none !important;
    background: transparent !important; border-radius: 9px;
}
html.theme-dark .ft-logo-wrap,
body.theme-dark .ft-logo-wrap,
body.theme-dark-sidebar .ft-logo-wrap,
.theme-dark .ft-logo-wrap {
    background: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Info column */
.ft-name {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: 2px; line-height: 1.35;
}
.ft-sub {
    display: block;
    font-size: 13px; color: #64748b; margin-top: 2px;
    line-height: 1.5; word-break: break-word;
}
.ft-sub i { font-size: 11px; opacity: .65; margin-right: 3px; }
.ft-sub-sep { opacity: .35; margin: 0 3px; }
.ft-phone {
    color: var(--text-secondary); text-decoration: none;
    display: inline-flex; align-items: center; gap: 3px;
    transition: color .13s;
}
.ft-phone:hover { color: var(--primary-blue); }

/* Status / reg badges */
.ft-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 6px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    border: none;
}
.ft-tag i { font-size: 10px; }
.ft-tag-regopen    { background: #dcfce7; color: #15803d; }
.ft-tag-regclosed  { background: #fee2e2; color: #dc2626; }
.ft-tag-upcoming   { background: #ede9fe; color: #7c3aed; }
.ft-tag-inprogress { background: #dbeafe; color: #1d4ed8; }
.ft-tag-completed  { background: #f1f5f9; color: #64748b; }
.ft-tag-warn       { background: #fff7ed; color: #c2410c; }

/* Auction status colors — same palette as Tournaments' bp-badge-* classes
   (bp-badge-warning/success/purple/neutral), so the same status reads as the
   same color on both pages. Kept as .ft-tag variants (not .bp-badge) so the size
   matches the tournament-status badge it sits next to on this card. */
.ft-tag-auction-pending   { background: #fef3c7; color: #b45309; }
.ft-tag-auction-progress  { background: #dcfce7; color: #15803d; }
.ft-tag-auction-completed { background: #ede9fe; color: #5b21b6; }
.ft-tag-auction-none      { background: #f1f5f9; color: #64748b; }

/* Dates */
.ft-date-line {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
    white-space: nowrap;
}
.ft-date-line i { font-size: 11px; opacity: .55; flex-shrink: 0; }

/* Inline stat: 4 Clubs · 8 Players */
.ft-stat-inline {
    display: flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 500; color: #4b5563;
    flex-wrap: nowrap;
}
.ft-stat-inline i { font-size: 10px; color: #374151; }
.ft-stat-dot { color: #9ca3af; margin: 0 -3px; }
.ft-stat-sep { color: #9ca3af; margin: 0 1px; font-weight: 400; }

/* Role-based left accent on row */
.ft-row.myt-r-1 { box-shadow: inset 3px 0 0 #7c3aed; border-left-color: transparent; }
.ft-row.myt-r-2 { box-shadow: inset 3px 0 0 #1d4ed8; border-left-color: transparent; }
.ft-row.myt-r-3 { box-shadow: inset 3px 0 0 #15803d; border-left-color: transparent; }
.ft-row.myt-r-4 { box-shadow: inset 3px 0 0 #d97706; border-left-color: transparent; }
/* Auction-configured warning: orange left accent */
.ft-row.ft-warn-row { box-shadow: inset 3px 0 0 #f97316; border-left-color: transparent; }

/* Action column icon row — in-flow at top of action column (rightmost grid column = top-right of card) */
.ft-action-icons {
    display: flex; gap: 5px; align-items: center;
}

/* Share dropdown */
.ft-share-wrap { position: relative; }
.ft-share-btn, .ft-note-btn {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1.5px solid rgba(29,78,216,.3);
    background: rgba(219,234,254,.4); color: #1d4ed8;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 13px; transition: all .15s; flex-shrink: 0; padding: 0;
}
.ft-share-btn:hover { border-color: #1d4ed8; background: rgba(219,234,254,.7); color: #1e40af; }
.ft-note-btn:hover  { border-color: #f59e0b; color: #f59e0b; }
.ft-share-btn.danger { border-color: rgba(239,68,68,.3); color: #ef4444; }
.ft-share-btn.danger:hover { border-color: #ef4444; background: rgba(239,68,68,.07); }
.ft-share-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.ft-share-btn:disabled:hover { border-color: rgba(29,78,216,.3); background: rgba(219,234,254,.4); color: #1d4ed8; }
.ft-share-menu {
    display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
    background: var(--card-bg); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 150px;
}
.ft-share-menu.open { display: block; }
.ft-share-opt {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 7px 10px; background: none; border: none;
    border-radius: 7px; font-size: 13px; color: var(--text-primary);
    cursor: pointer; white-space: nowrap; transition: background .13s;
}
.ft-share-opt:hover { background: var(--bg-secondary); }

/* Tournament Code form input — force uppercase display */
.tc-input { text-transform: uppercase; }
.tc-input::placeholder { text-transform: none; }

/* Tournament Code badge in card list */
.ft-code-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
    color: #7c3aed; background: rgba(124,58,237,0.08);
    border: 1px solid rgba(124,58,237,0.2);
    border-radius: 6px; padding: 1px 7px;
    white-space: nowrap;
}

/* Note modal */
.ft-note-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 1050;
    background: rgba(0,0,0,.45); align-items: center; justify-content: center;
    padding: 20px;
}
.ft-note-modal-overlay.open { display: flex; }
.ft-note-modal-card {
    background: var(--card-bg); border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.22);
    width: 100%; max-width: 420px;
    animation: ftNoteIn .18s ease;
}
@keyframes ftNoteIn {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}
.ft-note-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 700; font-size: 14px; color: #d97706; gap: 8px;
}
.ft-note-modal-head span { display: flex; align-items: center; gap: 7px; }
.ft-note-modal-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 16px; padding: 2px 4px;
    border-radius: 6px; line-height: 1;
}
.ft-note-modal-close:hover { color: var(--text-primary); background: var(--bg-secondary); }
.ft-note-modal-body {
    padding: 16px 18px 20px;
    font-size: 14px; color: var(--text-primary);
    line-height: 1.7; white-space: pre-wrap; word-break: break-word;
    max-height: 60vh; overflow-y: auto;
}

/* Action buttons */
.ft-cta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 14px; border-radius: 9px; white-space: nowrap;
    font-size: 12.5px; font-weight: 600; text-decoration: none;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: #fff; border: none; cursor: pointer;
    box-shadow: 0 2px 8px rgba(124,58,237,.35);
    transition: transform .15s, box-shadow .15s;
}
.ft-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(124,58,237,.45); }
.ft-cta i { font-size: 14px; }

/* Club Rep row — which club, club-scoped player stats, "Club Players" link.
   Used by Tournaments.cshtml (UserRole==3 rows). */
.mcr-club-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
    background: rgba(13,148,136,.10); color: #0d9488;
    border: 1px solid rgba(13,148,136,.25);
}
.mcr-stat { font-size: 11.5px; color: var(--text-secondary); }
.mcr-stat strong { color: var(--text-primary); font-weight: 600; }
.mcr-btn-players {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    background: rgba(13,148,136,.08); color: #0d9488;
    border: 1.5px solid rgba(13,148,136,.25);
    transition: background .15s, border-color .15s;
}
.mcr-btn-players:hover { background: rgba(13,148,136,.15); border-color: rgba(13,148,136,.45); }
@media (max-width: 768px) {
    #mt-list .ft-col-action .mcr-btn-players { flex: 1 1 0; min-width: 0; justify-content: center; }
}
/* All non-Register CTA states — unified light grey */
.ft-cta-regopen,
.ft-cta-closed,
.ft-cta-ended,
.ft-cta-registered,
.ft-cta-full,
.ft-cta-rejected,
.ft-cta-cancelled {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 12px; border-radius: 9px; white-space: nowrap;
    font-size: 12px; font-weight: 600;
    background: var(--bg-secondary); color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
}

/* Toast */
.ft-toast {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(12px);
    background: #1e293b; color: #f8fafc; border-radius: 10px;
    padding: 9px 18px; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    opacity: 0; pointer-events: none;
    /* Above .share-modal-overlay (z-index: 10000) — Copy Link/etc. inside the
       Share Tournament modal don't close it, so this toast has to render on
       top of that modal's backdrop, not behind it, to be visible at all. */
    z-index: 10050;
    transition: opacity .2s, transform .2s; white-space: nowrap;
}
.ft-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Share modal actions ──────────────────────────────────────
   The Share Tournament modal's action-button design, defined once here and
   reused verbatim by the Share Auction and Share Club modals so all three
   share dialogs present the same green WhatsApp primary button and outlined
   secondary row. */
.stm-actions { display: flex; flex-direction: column; gap: 10px; }
.stm-btn-whatsapp {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #25d366; color: #fff; border: none; border-radius: 12px;
    padding: 12px 16px; font-weight: 600; font-size: .95rem;
    transition: background .15s;
}
.stm-btn-whatsapp:hover { background: #1fb958; color: #fff; }
.stm-actions-row { display: flex; gap: 10px; }
.stm-btn-secondary {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--bs-body-bg, #fff);
    border: 1.5px solid var(--bs-border-color, #e2e8f0);
    color: var(--bs-body-color, #374151);
    border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: .88rem;
    transition: all .15s;
    /* Also applied to <a> ("Open in new tab") in the Auction/Club modals. */
    text-decoration: none;
}
.stm-btn-secondary:hover { border-color: #8b5cf6; color: #7c3aed; text-decoration: none; }

@media (max-width: 576px) {
    .stm-actions-row { flex-direction: column; }
}

/* ── Responsive breakpoints ────────────────────────────────── */
@media (max-width: 1100px) {
    .ft-row {
        grid-template-columns: 48px 1fr 170px 150px auto;
        column-gap: 10px;
    }
}

@media (max-width: 900px) {
    .ft-row {
        grid-template-columns: 46px 1fr 158px 138px auto;
        grid-template-areas: "logo info badges date-stats action";
        column-gap: 8px;
    }
}

@media (max-width: 700px) {
    .ft-panel { padding: 10px 12px; }
    .ft-row {
        grid-template-columns: 44px 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "logo        info"
            ".           badges"
            ".           date-stats"
            "action      action";
        column-gap: 10px;
        row-gap: 4px;
        align-items: start;
        padding: 8px 12px;
    }
    .ft-logo { width: 44px; height: 44px; border-radius: 8px; }
    .ft-col-badges     { flex-direction: row; flex-wrap: wrap; gap: 3px; padding-top: 2px; }
    .ft-col-date-stats { flex-direction: column; gap: 3px; padding-top: 2px; }
    .ft-stat-inline    { font-size: 11px; }
    .ft-col-action { flex-direction: row; min-height: auto; align-items: center; justify-content: flex-start; gap: 8px; }
    .ft-action-icons { order: 2; flex-shrink: 0; }
    .ft-share-btn, .ft-note-btn { order: 0; width: 34px; height: 34px; font-size: 14px; }
    .ft-cta, .ft-cta-regopen, .ft-cta-closed, .ft-cta-ended, .ft-cta-registered, .ft-cta-full, .ft-cta-rejected, .ft-cta-cancelled { order: 1; flex: 1; justify-content: center; padding: 6px 12px; }
    .ft-tag, .myt-role-badge { padding: 3px 7px; font-size: 11px; }
    .ft-tag i, .myt-role-badge i { font-size: 9px; }
    .ft-name {
        white-space: normal; font-size: 13.5px; line-height: 1.35;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ft-sub { font-size: 12.5px; }
}

@media (max-width: 520px) {
    .ft-row {
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "logo        info"
            "badges      badges"
            "date-stats  date-stats"
            "action      action";
        column-gap: 10px;
        row-gap: 4px;
        padding: 8px 12px;
    }
    .ft-logo { width: 40px; height: 40px; border-radius: 8px; }
    .ft-col-badges     { flex-direction: row; flex-wrap: wrap; gap: 3px; }
    .ft-col-date-stats { flex-direction: column; gap: 3px; }
    .ft-stat-inline    { font-size: 11px; flex-wrap: wrap; }
    .ft-tag, .myt-role-badge { padding: 3px 7px; font-size: 11px; }
    .ft-tag i, .myt-role-badge i { font-size: 9px; }
    .ft-col-action {
        flex-direction: row; align-items: center; min-height: auto;
        justify-content: flex-start; gap: 8px;
    }
    .ft-action-icons { order: 2; flex-shrink: 0; }
    .ft-share-btn, .ft-note-btn { width: 34px; height: 34px; font-size: 14px; }
    .ft-cta, .ft-cta-closed, .ft-cta-ended, .ft-cta-regopen, .ft-cta-registered, .ft-cta-full, .ft-cta-rejected, .ft-cta-cancelled {
        order: 1; flex: 1; justify-content: center;
        padding: 5px 12px; font-size: 12px;
    }
    .ft-name {
        white-space: normal; font-size: 13px; line-height: 1.35;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .ft-sub { font-size: 12px; }
    /* Search row stacking on small mobile */
    .ft-search-row { flex-wrap: wrap; gap: 6px; }
    .ft-search-wrap { flex: 0 0 100%; order: 0; }
    .ft-sport-inline { flex: 1 !important; min-width: 0 !important; order: 1; }
    /* Badge and pill sizing for mobile */
    .bp-badge { font-size: 12px; padding: 3px 8px; gap: 4px; }
    .bp-filter-pill { height: 32px; padding: 0 12px; font-size: 12px; }
    .bp-filter-pill-n, .bp-filter-pill-count { min-width: 16px; height: 16px; font-size: 10px; }
}

/* ── Touch-friendly filter pills ≤768px (overrides the 520px reduction above) ── */
@media (max-width: 768px) {
    .bp-filter-pill {
        height: 40px; padding: 0 14px; border-radius: 17px;
        font-size: 12px; font-weight: 600; gap: 5px;
        flex-shrink: 0;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    .bp-filter-pill-n, .bp-filter-pill-count { min-width: 18px; height: 18px; font-size: 11px; }
}

/* Spacing between filter panel and tournament list */
#myt-list, #mt-list, #ft-list, #myr-list { margin-top: 16px; }

/* ── Pagination bar ─────────────────────────────────────────── */
.ft-pagbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 12px; flex-wrap: wrap;
}
.ft-pagbar-info { font-size: 12.5px; color: var(--text-secondary); }
.ft-pag-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px;
    border: 1.5px solid var(--border-color); background: var(--bg-secondary);
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
    text-decoration: none; cursor: pointer; transition: all .15s;
}
.ft-pag-btn:hover { border-color: var(--primary-blue); color: var(--primary-blue); }
.ft-pag-btn.active {
    background: var(--primary-blue); border-color: var(--primary-blue);
    color: #fff; font-weight: 700;
}


/* Sport filter select — Bootstrap form-select with filter-panel sizing */
.ft-sport-filter {
    height: 38px !important; padding-top: 0 !important; padding-bottom: 0 !important;
    font-size: 13px !important;
}
.ft-sport-filter.active { border-color: var(--bs-primary) !important; }

/* ── Advanced filter row (sport + date inputs) ──────────────── */
.ft-adv {
    border-top: 1px solid var(--border-color); padding-top: 10px;
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.ft-sport-inline {
    height: 38px; padding: 0 10px; border-radius: 9px;
    border: 1.5px solid var(--border-color); background: var(--bg-secondary);
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
    cursor: pointer; min-width: 130px; appearance: auto;
    transition: border-color .15s;
}
.ft-sport-inline:focus { outline: none; border-color: var(--primary-blue); color: var(--text-primary); }
.ft-sport-inline.active { border-color: var(--primary-blue); color: var(--text-primary); }
.ft-date-wrap {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 10px; border-radius: 9px;
    border: 1.5px solid var(--border-color); background: var(--bg-secondary);
    font-size: 12px; color: var(--text-secondary);
    transition: border-color .15s;
}
.ft-date-wrap:focus-within { border-color: var(--primary-blue); }
.ft-date-input {
    background: none; border: none; outline: none;
    font-size: 13px; color: var(--text-primary); width: 120px; cursor: pointer;
}
@media (max-width: 520px) {
    .ft-date-input { width: 100px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   Joined Players page  (jp-*)
   ═══════════════════════════════════════════════════════════════ */
@keyframes jp-spin { to { transform:rotate(360deg); } }
@keyframes jp-bar  { 0%{left:-40%;width:40%} 60%{left:60%;width:60%} 100%{left:110%;width:10%} }

/* HTMX loading bar */
.jp-loading-bar {
    position:fixed; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,#a78bfa,#6d28d9);
    z-index:9999; pointer-events:none; overflow:hidden; display:none;
}
.jp-loading-bar.htmx-request { display:block; }
.jp-loading-bar::after {
    content:''; position:absolute; top:0; height:100%;
    background:rgba(255,255,255,0.5);
    animation:jp-bar 1.2s ease infinite;
}
button.htmx-request { opacity:.6 !important; pointer-events:none !important; }
button.htmx-request i { animation:jp-spin 0.8s linear infinite; display:inline-block; }

/* ── Joined Players Container & Header Card ── */
.jp-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 4px 0 24px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.jp-header-card {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    padding: 16px 22px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.jp-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}
/* Theme switcher for chrome-less pages, where the layout header is hidden. */
.jp-header-theme-btn {
    margin-left: auto;
}
.jp-back-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 50%;
    background: var(--card-bg, #ffffff);
    color: var(--text-primary, #1e293b) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1.5px solid var(--border-color, #e2e8f0);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
.jp-back-btn:hover {
    background: var(--bg-secondary, #f1f5f9);
    border-color: #877cf2;
    color: #877cf2 !important;
    transform: scale(1.04);
}
.jp-back-btn:active {
    transform: scale(0.92) !important;
}
.jp-logo-box {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--card-bg, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 0;
}
.jp-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    margin: 0;
    display: block;
}
.jp-header-text {
    min-width: 0;
}
.jp-header-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0 0 4px 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
    word-break: break-word;
}
.jp-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}
.jp-header-meta-item {
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 450;
}
.jp-header-meta-item i {
    font-size: 13.5px;
    color: #94a3b8;
}
.jp-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.jp-btn-hdr-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--card-bg, #ffffff);
    color: #4f46e5;
    border: 1.5px solid #6366f1;
    border-radius: 10px;
    padding: 7px 16px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    height: 38px;
}
.jp-btn-hdr-outline:hover {
    background: #eef2ff;
    color: #4338ca;
    border-color: #4f46e5;
}
.jp-btn-hdr-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 7px 18px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
    height: 38px;
}
.jp-btn-hdr-solid:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

/* Page Title & Subtitle */
.jp-title-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.jp-title-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.jp-page-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    margin: 0 0 4px 0;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.jp-page-subtitle {
    font-size: 13.5px;
    color: var(--text-secondary, #64748b);
    margin: 0;
    font-weight: 450;
}

/* Stats */
.jp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; align-items:stretch; }
.jp-stat {
    background:var(--card-bg, #ffffff); border:1px solid var(--border-color, #e2e8f0); border-radius:16px;
    padding:16px 18px;
    transition:transform 0.15s ease,box-shadow 0.15s ease,border-color 0.15s ease;
    display:flex; flex-direction:column; justify-content:space-between;
    box-shadow:0 1px 3px rgba(0,0,0,0.03);
}
.jp-stat[data-filter] { cursor:pointer; }
.jp-stat:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(99,102,241,0.08); }
.jp-stat.jp-stat-active { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,0.14), 0 4px 16px rgba(99,102,241,0.08); }
.jp-stat-top { display:flex; align-items:center; gap:14px; }
.jp-si {
    width:46px; height:46px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; color:#fff;
    background:linear-gradient(135deg,#818cf8,#6366f1);
    box-shadow:0 4px 12px rgba(99,102,241,0.25);
}
.jp-si.red    { background:linear-gradient(135deg,#f87171,#ef4444); box-shadow:0 4px 12px rgba(239,68,68,0.25); }
.jp-si.amber  { background:linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow:0 4px 12px rgba(245,158,11,0.25); }
.jp-si.orange { background:linear-gradient(135deg,#fb923c,#ea580c); box-shadow:0 4px 12px rgba(234,88,12,0.25); }
.jp-si.green  { background:linear-gradient(135deg,#4ade80,#16a34a); box-shadow:0 4px 12px rgba(22,163,74,0.25); }
.jp-si.blue   { background:linear-gradient(135deg,#38bdf8,#0369a1); box-shadow:0 4px 12px rgba(3,105,161,0.25); }
.jp-stat-info { min-width:0; }
.jp-sv { font-size:1.55rem; font-weight:800; color:var(--text-primary, #0f172a); line-height:1.15; }
.jp-stat-max { font-size:13.5px; font-weight:600; color:var(--text-secondary, #94a3b8); margin-left:2px; }
.jp-sl { font-size:12.5px; font-weight:500; color:var(--text-secondary, #64748b); margin-top:2px; }
.jp-prog-wrap { height:4px; border-radius:99px; background:#e0e7ff; overflow:hidden; margin-top:10px; }
.jp-prog-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#818cf8,#6366f1); }
.jp-prog-label { font-size:11.5px; font-weight:600; color:#64748b; margin-top:4px; }

/* Filter chips — same single scrolling row as .ft-chips-scroll */
.jp-filters {
    display:flex; gap:8px; flex-wrap:nowrap; align-items:center;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none; touch-action:pan-x;
    padding:2px 0 6px; margin-bottom:16px;
}
.jp-filters::-webkit-scrollbar { display:none; }
.jp-filters > .bp-filter-pill { flex-shrink:0; }
.jp-chip {
    display:inline-flex; align-items:center; gap:5px;
    height:34px; padding:0 14px; border-radius:17px;
    font-size:14px; font-weight:600;
    border:1px solid var(--border-color); background:var(--card-bg);
    color:var(--text-secondary); cursor:pointer;
    transition:all 0.2s; user-select:none; white-space:nowrap; flex-shrink:0;
    text-transform:capitalize;
}
.jp-chip:hover  { border-color:#8b5cf6; color:#8b5cf6; }
.jp-chip.active { background:linear-gradient(135deg,#8b5cf6,#6d28d9); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(124,58,237,0.25); }
.jp-chip .jp-cn {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    font-size:12px; font-weight:700;
    background:var(--bg-secondary); color:var(--text-primary); flex-shrink:0;
}
.jp-chip.active .jp-cn { background:rgba(255,255,255,0.22); color:#fff; }

/* Toolbar */
.jp-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; margin-bottom:20px; }
.jp-sw { position:relative; flex:1 1 0; min-width:0; }
.jp-sw .bi-search {
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--text-secondary, #94a3b8); font-size:14px; pointer-events:none;
}
.jp-sinp {
    width:100%; height:42px; padding:0 14px 0 42px;
    border-radius:10px; border:1.5px solid var(--border-color, #e2e8f0);
    background:var(--card-bg, #ffffff); color:var(--text-primary, #0f172a);
    font-size:13.5px; outline:none; transition:border-color 0.15s,box-shadow 0.15s;
}
.jp-sinp:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,0.12); }
.jp-sinp::placeholder { color:var(--text-secondary, #94a3b8); opacity:.8; }
.jp-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border-radius: 9px;
    border: 1.5px solid #a5b4fc;
    background: var(--card-bg, #ffffff);
    color: #6366f1;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.jp-btn-outline:hover {
    background: #f5f3ff;
    color: #4f46e5;
    border-color: #6366f1;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.12);
}
.jp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 18px;
    border-radius: 9px;
    border: none;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
    color: #ffffff !important;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(99, 102, 241, 0.32);
}
.jp-btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%);
    color: #ffffff !important;
    box-shadow: 0 5px 16px rgba(99, 102, 241, 0.42);
    transform: translateY(-1px);
}

/* Badges */
.jp-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 10px; border-radius:7px;
    font-size:13px; font-weight:600; white-space:nowrap; text-transform:capitalize;
}
.jp-bs  { background:rgba(16,185,129,0.1);  color:#10b981; border:1px solid rgba(16,185,129,0.2); }
.jp-bw  { background:rgba(245,158,11,0.1);  color:#d97706; border:1px solid rgba(245,158,11,0.2); }
.jp-bd  { background:rgba(239,68,68,0.1);   color:#ef4444; border:1px solid rgba(239,68,68,0.2); }
.jp-bgy { background:var(--bg-secondary);   color:var(--text-secondary); border:1px solid var(--border-color); }
.jp-icon-badge {
    display:inline-flex; align-items:center; gap:3px;
    font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px;
    background:rgba(245,158,11,0.15); color:#b45309; border:1px solid rgba(245,158,11,0.3);
    vertical-align:middle; margin-left:5px; white-space:nowrap; line-height:1.4;
}
.jp-photo-wrap { position:relative; display:inline-flex; flex-shrink:0; }
.jp-img-icon-badge {
    position:absolute; top:-5px; right:-5px;
    width:20px; height:20px; border-radius:50%;
    background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff;
    font-size:10px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 6px rgba(217,119,6,0.45); border:2px solid #fff; line-height:1;
    z-index:1;
}

/* ═══════════════════════════════════════════════════════════════
   BidPlayer Design System — Common Badges (bp-badge)
   Single source of truth for status badge colors & shape.
   ═══════════════════════════════════════════════════════════════ */
.bp-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 10px; border-radius:6px;
    font-size:13px; font-weight:600; white-space:nowrap;
    border:none;
}
.bp-badge-success { background:#dcfce7; color:#15803d; }
.bp-badge-warning { background:#fcf4d4; color:#d97706; }
.bp-badge-warning i, .bp-badge-warning .bi { color:#d97706; }
.bp-badge-danger  { background:#fee2e2; color:#dc2626; }
.bp-badge-info    { background:#dbeafe; color:#1d4ed8; }
.bp-badge-neutral { background:#f1f5f9; color:#64748b; }
.bp-badge-purple  { background:#ede9fe; color:#5b21b6; }
.bp-badge-gold    { background:#fef9c3; color:#854d0e; }
.bp-badge-orange  { background:#fff7ed; color:#c2410c; }

/* Dark theme — bp-badge-warning only (the requested variant); other bp-badge
   colors are unchanged in dark mode for now. */
body.theme-dark .bp-badge-warning,
body.theme-dark-sidebar .bp-badge-warning {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}
body.theme-dark .bp-badge-warning i, body.theme-dark .bp-badge-warning .bi,
body.theme-dark-sidebar .bp-badge-warning i, body.theme-dark-sidebar .bp-badge-warning .bi {
    color: #f59e0b;
}

/* Toast card styling lives in the single "Modern Toastr Overrides" block
   further down this file (search for that heading) — a second, competing
   toast redesign used to live here too (its own icon technique alongside
   that block's own icon), and having both active at once rendered two
   icons on every toast. Removed in favour of that one system; its own
   background-color/text-color rules were patched instead to stay white/
   dark-text regardless of theme (see "must check in warning" fix there). */

/* ═══════════════════════════════════════════════════════════════
   BidPlayer Design System — Action Button (bp-action-btn)
   Small square icon-only button for secondary actions (edit, delete, toggle).

   Neutral at rest — plain card background with a hairline border, the colour
   carried by the icon alone; the soft tint appears only on hover. The Joined
   Clubs buttons (.jc-action-btn) are the same control, so both name sets share
   one definition here rather than each keeping its own copy.
   ═══════════════════════════════════════════════════════════════ */
.bp-action-btn,
.jc-action-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:6px; flex-shrink:0;
    border:0.5px solid var(--border-color); background:var(--card-bg);
    color:var(--text-secondary); font-size:15px; padding:0;
    cursor:pointer; transition:background .14s, border-color .14s, color .14s;
}
/* Edit — purple */
.bp-action-btn-edit,
.jc-action-btn.jc-edit          { color:#6d28d9; }
.bp-action-btn-edit:hover,
.jc-action-btn.jc-edit:hover    { background:rgba(109,40,217,.07); border-color:rgba(109,40,217,.2); }
/* Delete — red */
.bp-action-btn-danger,
.jc-action-btn.jc-del           { color:var(--error-color); }
.bp-action-btn-danger:hover,
.jc-action-btn.jc-del:hover     { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.2); }
/* Auction / toggle-on — emerald, indicates "currently active" */
.bp-action-btn-auction,
.bp-action-btn-toggle-on        { color:#059669; }
.bp-action-btn-auction:hover,
.bp-action-btn-toggle-on:hover  { background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.25); }
/* Unvariant button (e.g. toggle when inactive) picks up the neutral purple hover */
.bp-action-btn:not([class*="bp-action-btn-"]):hover {
    color:#8b5cf6; background:rgba(139,92,246,.06); border-color:rgba(139,92,246,.2);
}
body.theme-dark .bp-action-btn-edit:hover,
body.theme-dark-sidebar .bp-action-btn-edit:hover,
body.theme-dark .jc-action-btn.jc-edit:hover,
body.theme-dark-sidebar .jc-action-btn.jc-edit:hover { background:rgba(109,40,217,.18); }

/* ═══════════════════════════════════════════════════════════════
   BidPlayer Design System — Primary CTA Button (bp-primary-btn)
   Purple gradient button for the main call-to-action per card.
   ═══════════════════════════════════════════════════════════════ */
.bp-primary-btn {
    display:inline-flex; align-items:center; gap:4px;
    padding:7px 14px; border-radius:9px; white-space:nowrap;
    font-size:12.5px; font-weight:600; text-decoration:none;
    background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 100%);
    color:#fff; border:none; cursor:pointer;
    box-shadow:0 2px 8px rgba(124,58,237,.35);
    transition:transform .15s,box-shadow .15s;
}
.bp-primary-btn:hover { color:#fff; transform:translateY(-1px); box-shadow:0 4px 14px rgba(124,58,237,.45); }
.bp-primary-btn i { font-size:14px; }

/* ═══════════════════════════════════════════════════════════════
   BidPlayer Design System — Common Filter Pill (bp-filter-pill)
   Single source of truth for filter/status chip style.
   Purple active state matches BidPlayer primary brand.
   ═══════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────────────
   BidPlayer Design System — Common Filter Pill (bp-filter-pill)
   Single source of truth for filter/status chip style.
   Purple active state matches BidPlayer primary brand.
   ───────────────────────────────────────────────────────────────────────────── */
.bp-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    border: 1.5px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #ffffff);
    color: var(--text-secondary, #475569);
    cursor: pointer;
    transition: all 0.15s ease;
}
.bp-filter-pill i {
    font-size: 13.5px;
}
.bp-filter-pill:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
}
.bp-filter-pill.active {
    background: linear-gradient(135deg, #877cf2 0%, #6d28d9 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
}
.bp-filter-pill.active i {
    color: #ffffff !important;
}

.bp-filter-pill-n,
.bp-filter-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 9.5px;
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-primary, #1e293b);
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.bp-filter-pill.active .bp-filter-pill-n,
.bp-filter-pill.active .bp-filter-pill-count {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

/* Color variants — tint count badge to reflect semantic meaning (inactive only).
   Active state always wins via higher specificity of .bp-filter-pill.active rule above. */
.bp-filter-pill-success .bp-filter-pill-n,
.bp-filter-pill-success .bp-filter-pill-count {
    background: rgba(21, 128, 61, 0.12);
    color: #15803d;
}
.bp-filter-pill-warning .bp-filter-pill-n,
.bp-filter-pill-warning .bp-filter-pill-count {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}
.bp-filter-pill-danger .bp-filter-pill-n,
.bp-filter-pill-danger .bp-filter-pill-count {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}
.bp-filter-pill-info .bp-filter-pill-n,
.bp-filter-pill-info .bp-filter-pill-count {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}
.bp-filter-pill-neutral .bp-filter-pill-n,
.bp-filter-pill-neutral .bp-filter-pill-count {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}
.bp-filter-pill-purple .bp-filter-pill-n,
.bp-filter-pill-purple .bp-filter-pill-count {
    background: rgba(124, 58, 237, 0.12);
    color: #6d28d9;
}

/* Dark mode for pills */
html.theme-dark .bp-filter-pill,
body.theme-dark .bp-filter-pill,
body.theme-dark-sidebar .bp-filter-pill {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}
html.theme-dark .bp-filter-pill-n,
body.theme-dark .bp-filter-pill-n,
body.theme-dark-sidebar .bp-filter-pill-n {
    background: #334155;
    color: #cbd5e1;
}

html.theme-dark .bp-filter-pill-success .bp-filter-pill-n,
body.theme-dark .bp-filter-pill-success .bp-filter-pill-n,
body.theme-dark-sidebar .bp-filter-pill-success .bp-filter-pill-n {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}
html.theme-dark .bp-filter-pill-warning .bp-filter-pill-n,
body.theme-dark .bp-filter-pill-warning .bp-filter-pill-n,
body.theme-dark-sidebar .bp-filter-pill-warning .bp-filter-pill-n {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}
html.theme-dark .bp-filter-pill-info .bp-filter-pill-n,
body.theme-dark .bp-filter-pill-info .bp-filter-pill-n,
body.theme-dark-sidebar .bp-filter-pill-info .bp-filter-pill-n {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}
html.theme-dark .bp-filter-pill-neutral .bp-filter-pill-n,
body.theme-dark .bp-filter-pill-neutral .bp-filter-pill-n,
body.theme-dark-sidebar .bp-filter-pill-neutral .bp-filter-pill-n {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}
html.theme-dark .bp-filter-pill-danger .bp-filter-pill-n,
body.theme-dark .bp-filter-pill-danger .bp-filter-pill-n,
body.theme-dark-sidebar .bp-filter-pill-danger .bp-filter-pill-n {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}
html.theme-dark .bp-filter-pill-purple .bp-filter-pill-n,
body.theme-dark .bp-filter-pill-purple .bp-filter-pill-n,
body.theme-dark-sidebar .bp-filter-pill-purple .bp-filter-pill-n {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BidPlayer Design System - Common Search Toolbar & Filter Popover (.bp-*)
   Unified, reusable filter toolbar for all list pages.
   ───────────────────────────────────────────────────────────────────────────── */
.bp-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    position: relative;
}

.bp-search-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.bp-search-input,
.ft-search {
    width: 100%;
    height: 44px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 0 38px 0 38px;
    font-size: 14px;
    color: var(--text-primary, #1e293b);
    transition: all 0.2s ease;
}

.bp-search-input:focus,
.ft-search:focus {
    border-color: var(--bs-primary, #877cf2);
    box-shadow: 0 0 0 3px rgba(135, 124, 242, 0.15);
    outline: none;
}

.bp-search-icon,
.ft-search-icon {
    position: absolute;
    left: 14px;
    font-size: 15px;
    color: var(--text-secondary, #94a3b8);
    pointer-events: none;
}

.bp-search-clear,
.ft-search-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    display: none;
    font-size: 16px;
}
.bp-search-clear.visible,
.ft-search-clear.visible { display: flex; align-items: center; }

/* Filter trigger button */
.bp-filter-trigger-wrap {
    position: relative;
}

.bp-filter-btn {
    height: 44px;
    padding: 0 16px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    color: var(--text-primary, #1e293b);
    font-size: 13.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bp-filter-btn:hover,
.bp-filter-btn.active {
    border-color: var(--bs-primary, #877cf2);
    color: var(--bs-primary, #877cf2);
}

.bp-filter-badge {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* Reusable Filter Popover Card */
.bp-filter-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 400px;
    max-width: calc(100vw - 32px);
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 1050;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: bpFadeIn 0.18s ease-out;
    box-sizing: border-box;
}

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

.bp-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.bp-popover-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0;
}

.bp-popover-clear {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bs-primary, #877cf2);
    text-decoration: none;
    cursor: pointer;
}
.bp-popover-clear:hover {
    text-decoration: underline;
}

.bp-popover-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bp-popover-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 10px;
}

.bp-popover-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin: 0;
}

.bp-popover-label i {
    font-size: 15px;
    color: var(--text-secondary, #94a3b8);
}

.bp-popover-control {
    width: 100%;
    height: 38px;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 9px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    outline: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.bp-popover-control:focus {
    border-color: var(--bs-primary, #877cf2);
    box-shadow: 0 0 0 2px rgba(135, 124, 242, 0.15);
}

.bp-custom-date-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-top: -4px;
    padding-left: 120px;
    box-sizing: border-box;
}

.bp-custom-date-wrap .ft-date-wrap {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
}

.bp-custom-date-wrap .ft-date-wrap i {
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
    flex-shrink: 0;
}

.bp-custom-date-wrap .ft-date-input {
    width: 100%;
    min-width: 0;
    flex: 1;
    font-size: 12.5px;
    padding: 0;
}

.bp-popover-actions {
    display: flex;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.bp-popover-apply-btn {
    flex: 1;
    height: 38px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    border: none;
    color: #ffffff;
    cursor: pointer;
    transition: opacity 0.15s;
}
.bp-popover-apply-btn:hover {
    opacity: 0.92;
}

.bp-popover-reset-btn {
    flex: 0 0 85px;
    height: 38px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.15s;
}
.bp-popover-reset-btn:hover {
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-primary, #1e293b);
}

/* Dark mode for Filter Popover */
html.theme-dark .bp-filter-popover,
body.theme-dark .bp-filter-popover,
body.theme-dark-sidebar .bp-filter-popover {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
html.theme-dark .bp-popover-control,
body.theme-dark .bp-popover-control,
body.theme-dark-sidebar .bp-popover-control {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}
html.theme-dark .bp-custom-date-wrap .ft-date-wrap,
body.theme-dark .bp-custom-date-wrap .ft-date-wrap,
body.theme-dark-sidebar .bp-custom-date-wrap .ft-date-wrap {
    background: #0f172a;
    border-color: #334155;
}
html.theme-dark .bp-custom-date-wrap .ft-date-input,
body.theme-dark .bp-custom-date-wrap .ft-date-input,
body.theme-dark-sidebar .bp-custom-date-wrap .ft-date-input {
    color: #f1f5f9;
}
html.theme-dark .bp-popover-reset-btn,
body.theme-dark .bp-popover-reset-btn,
body.theme-dark-sidebar .bp-popover-reset-btn {
    border-color: #334155;
    color: #94a3b8;
}
html.theme-dark .bp-popover-reset-btn:hover,
body.theme-dark .bp-popover-reset-btn:hover,
body.theme-dark-sidebar .bp-popover-reset-btn:hover {
    background: #334155;
    color: #f1f5f9;
}

@media (max-width: 768px) {
    .bp-search-row {
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
    }
    .bp-search-wrap {
        flex: 1;
        min-width: 0;
    }
    .bp-search-input {
        height: 40px;
        font-size: 13.5px;
        padding: 0 32px 0 34px;
        text-overflow: ellipsis;
    }
    .bp-search-icon {
        left: 11px;
        font-size: 14px;
    }
    .bp-filter-trigger-wrap {
        flex: 0 0 auto;
    }
    .bp-filter-btn {
        height: 40px;
        padding: 0 12px;
        font-size: 13px;
        gap: 6px;
        white-space: nowrap;
    }
    .bp-filter-popover {
        right: 0;
        left: auto;
        width: 360px;
        max-width: calc(100vw - 32px);
    }
    .bp-custom-date-wrap {
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .bp-search-row {
        gap: 6px;
    }
    .bp-search-input {
        font-size: 13px;
        padding: 0 28px 0 32px;
    }
    .bp-search-icon {
        left: 10px;
        font-size: 13px;
    }
    .bp-filter-btn {
        padding: 0 10px;
        font-size: 12.5px;
        gap: 5px;
    }
    .bp-filter-btn #mt-filter-chev,
    .bp-filter-btn .bi-chevron-down {
        display: none;
    }
    .bp-popover-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .bp-custom-date-wrap {
        padding-left: 0;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Desktop table */
.jp-table-wrap {
    background:var(--card-bg); border:1px solid var(--border-color);
    border-radius:16px; overflow:visible;
}
.jp-thead, .jp-row {
    display:grid;
    grid-template-columns:2fr 1fr 0.9fr 1.1fr 1.2fr 1.2fr 90px;
    align-items:center; padding:0 16px;
}
.jp-has-actions .jp-thead,
.jp-has-actions .jp-row { grid-template-columns:2fr 1fr 0.9fr 1.1fr 1.2fr 1.2fr 90px 145px; }
/* Club rep view: no Payment Status / Screenshot columns (and no Actions —
   mutually exclusive with .jp-has-actions, since both derive from the same
   admin-permission check) */
.jp-no-payment .jp-thead,
.jp-no-payment .jp-row { grid-template-columns:2fr 1fr 0.9fr 1.1fr 1.2fr; }
.jp-thead { background:var(--bg-secondary); border-bottom:1px solid var(--border-color); border-top-left-radius:15px; border-top-right-radius:15px; }
.jp-th {
    font-size:13px; font-weight:700; text-transform:capitalize;
    letter-spacing:0.2px; color:var(--text-secondary); padding:10px 8px;
}
.jp-row { border-bottom:1px solid var(--border-color); transition:background 0.15s; min-height:88px; }
.jp-row:last-child { border-bottom:none; border-bottom-left-radius:15px; border-bottom-right-radius:15px; }
.jp-row:hover { background:rgba(139,92,246,0.025); }

/* Player/Payment status badges: lighter tint, borderless, matching the same
   treatment applied to Tournaments / Find Tournaments / My Registrations,
   so status badges read consistently across the app. Scoped to #jp-cards only —
   .bp-badge itself is untouched for any other consumer. */
#jp-cards .bp-badge {
    padding: 5px 11px;
    border-radius: 6px;
    font-weight: 600;
}
#jp-cards .bp-badge-success { background: rgba(21,128,61,.10);   color: #15803d; }
/* .bp-badge-warning ("Submitted" here, "Auction Pending" on Tournaments/My
   Club Tournaments) intentionally has no #jp-cards-scoped override — it
   reuses the shared base .bp-badge-warning colors above so every "warning"
   badge across the app stays in sync from one definition. */
#jp-cards .bp-badge-danger  { background: rgba(220,38,38,.10);   color: #dc2626; }
#jp-cards .bp-badge-neutral { background: rgba(100,116,139,.10); color: #64748b; }
#jp-cards .bp-badge-purple  { background: rgba(91,33,182,.10);   color: #5b21b6; }
#jp-cards .bp-badge-gold    { background: rgba(133,77,14,.10);   color: #854d0e; }

/* Desktop cells */
.jp-cell { padding:7px 8px; }
.jp-c-player { display:flex; align-items:center; gap:10px; }
.jp-c-player img {
    width:56px; height:74px; border-radius:8px; object-fit:cover;
    object-position:center top; border:2px solid var(--border-color);
    flex-shrink:0; cursor:pointer; display:block;
    transition:border-color 0.2s;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.jp-c-player img:hover { border-color:#8b5cf6; }
.jp-c-player-ph {
    width:56px; height:74px; border-radius:8px; flex-shrink:0;
    background:var(--bg-secondary); border:2px solid var(--border-color);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-secondary); font-size:18px;
}
.jp-c-player-name {
    font-weight:700; font-size:15px; color:var(--text-primary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:capitalize;
}
.jp-c-loc {
    display:flex; align-items:center; gap:5px; font-size:14px; font-weight:500; color:var(--text-secondary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:capitalize;
}
.jp-c-role {
    font-size:14px; font-weight:500; color:var(--text-secondary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:capitalize;
}
.jp-c-phone { display:flex; align-items:center; gap:5px; font-size:14px; font-weight:500; color:var(--text-secondary); white-space:nowrap; }
.jp-c-null { color:var(--text-secondary); opacity:.4; }

/* Desktop payment thumbnail */
.jp-pay-thumb {
    position:relative; width:60px; height:60px;
    border-radius:7px; overflow:hidden;
    border:1.5px solid var(--border-color); background:var(--bg-secondary);
    cursor:pointer; transition:border-color 0.2s; flex-shrink:0;
}
.jp-pay-thumb:hover { border-color:#8b5cf6; }
.jp-pay-thumb img { width:100%; height:100%; object-fit:contain; padding:2px; box-sizing:border-box; display:block; }
.jp-pay-zoom {
    position:absolute; inset:0; background:rgba(124,58,237,0.5); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.2s;
}
.jp-pay-zoom i { color:#fff; font-size:14px; }
.jp-pay-thumb:hover .jp-pay-zoom { opacity:1; }
.jp-pay-none {
    width:45px; height:60px; border-radius:8px; flex-shrink:0;
    background:var(--bg-secondary); border:1.5px solid var(--border-color);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; color:var(--text-secondary);
}
.jp-pay-none i    { font-size:14px; opacity:.4; }
.jp-pay-none span { font-size:10px; font-weight:600; opacity:.6; text-transform:capitalize; text-align:center; line-height:1.2; }

/* Screenshot and Actions column centering */
.jp-th-center { text-align:center; }
.jp-c-ss      { display:flex; align-items:center; justify-content:center; }
.jp-c-actions { display:flex; align-items:center; justify-content:center; gap:8px; }

/* Desktop action button: Cancel */
.jp-btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid rgba(239, 68, 68, 0.4);
    background: var(--card-bg, #ffffff);
    color: #ef4444;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    line-height: 1;
}
.jp-btn-cancel:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: #ef4444;
    color: #dc2626;
    transform: translateY(-1px);
}
.jp-btn-cancel i {
    font-size: 13px;
}

/* Desktop action icons — standard action-icon size reused across list pages
   (Tournaments/Find Tournaments as well as this one), so it's changed once
   here rather than duplicated per page. */
.jp-act-icon {
    width:34px; height:34px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1.5px solid var(--border-color); background:var(--card-bg);
    color:var(--text-secondary); cursor:pointer; font-size:15px;
    transition:all 0.2s; flex-shrink:0; line-height:1;
}
.jp-act-icon:hover { border-color:#8b5cf6; color:#8b5cf6; background:rgba(139,92,246,0.05); }
.jp-act-ok        { border-color:#10b981; color:#10b981; }
.jp-act-ok:hover  { background:rgba(16,185,129,0.08); border-color:#10b981; }
.jp-act-rej       { border-color:#ef4444; color:#ef4444; }
.jp-act-rej:hover { background:rgba(239,68,68,0.08); border-color:#ef4444; }

/* Dropdown menu for Joined Players actions */
.jp-more-btn {
    color: var(--text-secondary);
}
.jp-more-btn:hover,
.jp-more-btn[aria-expanded="true"] {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}
.jp-dropdown-menu {
    font-size: 13.5px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #ffffff);
    padding: 6px;
    min-width: 175px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 1050;
}
.jp-dropdown-menu .dropdown-item {
    border-radius: 8px;
    color: var(--text-primary, #0f172a);
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.jp-dropdown-menu .dropdown-item:hover {
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-primary, #0f172a);
}
.jp-dropdown-menu .dropdown-item i {
    font-size: 15px;
}

/* Mobile-only elements hidden on desktop */
.jp-mob-head,.jp-mob-status-row,.jp-mob-screenshot-row,.jp-mob-action-row { display:none; }

/* ── Mobile layout adjustments ─────────────────────────── */
@media (max-width:991px) {
    .jp-header-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .jp-header-left {
        flex: 0 0 auto;
    }
    .jp-header-actions {
        flex-wrap: wrap;
    }
    .jp-stats { grid-template-columns:repeat(2,1fr); gap:12px; }
    .jp-stat  { padding:14px 16px; border-radius:14px; }
    .jp-si    { width:40px; height:40px; border-radius:10px; font-size:18px; }
    .jp-sv    { font-size:1.4rem; }
    .jp-sl    { font-size:12px; }
    .jp-chip  { font-size:13px; height:32px; padding:0 12px; }

    .jp-table-wrap {
        background:transparent; border:none; border-radius:0;
        overflow:visible; display:flex; flex-direction:column; gap:12px;
    }
    .jp-thead { display:none; }

    .jp-row {
        display:block; background:var(--card-bg);
        border:1px solid var(--border-color); border-radius:14px;
        overflow:hidden; padding:0; min-height:unset; min-width:unset;
        width:100%;
    }
    .jp-row:hover { background:var(--card-bg); }
    .jp-cell { display:none !important; }

    /* Card header */
    .jp-mob-head {
        display:flex; align-items:flex-start; gap:14px;
        padding:12px 14px; border-bottom:1px solid var(--border-color);
    }
    .jp-mob-photo img, .jp-mob-photo-ph {
        width:60px; height:80px; border-radius:10px;
        object-fit:cover; object-position:center top;
        border:2px solid var(--border-color); flex-shrink:0; display:block;
        cursor:pointer; transition:border-color 0.2s;
        backface-visibility:hidden; -webkit-backface-visibility:hidden;
    }
    .jp-mob-photo img:hover { border-color:#8b5cf6; }
    .jp-mob-photo-ph {
        background:var(--bg-secondary);
        display:flex; align-items:center; justify-content:center;
        color:var(--text-secondary); font-size:22px;
    }
    .jp-mob-info { flex:1 1 0; min-width:0; }
    .jp-mob-name {
        font-weight:700; font-size:15px; color:var(--text-primary);
        line-height:1.3; margin-bottom:3px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:capitalize;
    }
    .jp-mob-meta { display:flex; flex-direction:column; gap:3px; }
    .jp-mob-meta span {
        font-size:13px; color:var(--text-secondary);
        display:flex; align-items:center; gap:5px;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:capitalize;
    }
    .jp-mob-meta i { font-size:11px; color:#8b5cf6; flex-shrink:0; }

    /* Status row */
    .jp-mob-status-row {
        display:grid; grid-template-columns:1fr 1fr; gap:10px;
        padding:10px 14px; border-bottom:1px solid var(--border-color);
    }
    .jp-no-payment .jp-mob-status-row { grid-template-columns:1fr; }
    .jp-mob-status-item { display:flex; flex-direction:column; gap:4px; }
    .jp-mob-status-lbl { font-size:13px; font-weight:600; color:var(--text-secondary); opacity:.9; text-transform:capitalize; }

    /* Payment screenshot in card header */
    .jp-mob-pay-thumb {
        position:relative; width:60px; height:60px;
        border-radius:8px; overflow:hidden;
        border:1.5px solid var(--border-color); background:var(--bg-secondary);
        cursor:pointer; transition:border-color 0.2s; flex-shrink:0;
    }
    .jp-mob-pay-thumb:hover { border-color:#8b5cf6; }
    .jp-mob-pay-thumb img { width:100%; height:100%; object-fit:contain; padding:2px; box-sizing:border-box; display:block; }
    .jp-mob-pay-zoom {
        position:absolute; inset:0; background:rgba(124,58,237,0.45); backdrop-filter:blur(2px);
        display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.2s;
    }
    .jp-mob-pay-zoom i { color:#fff; font-size:14px; }
    .jp-mob-pay-thumb:hover .jp-mob-pay-zoom { opacity:1; }
    .jp-mob-pay-none {
        width:60px; height:80px; border-radius:8px; flex-shrink:0;
        background:var(--bg-secondary); border:1.5px solid var(--border-color);
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:2px; color:var(--text-secondary);
    }
    .jp-mob-pay-none i { font-size:14px; opacity:.4; }
    .jp-mob-pay-none span { font-size:10px; font-weight:600; opacity:.6; text-transform:capitalize; text-align:center; line-height:1.2; }

    /* Action buttons */
    .jp-mob-action-row { display:flex; align-items:center; gap:8px; padding:14px 14px 10px; }
    .jp-mob-act {
        flex:1; height:38px; border-radius:9px;
        border:1.5px solid var(--border-color); background:var(--card-bg);
        color:var(--text-secondary); font-size:14px; font-weight:600;
        cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
        gap:6px; transition:all 0.2s; white-space:nowrap; text-transform:capitalize;
    }
    .jp-mob-act:hover      { border-color:#8b5cf6; color:#8b5cf6; }
    .jp-mob-act-ok         { border-color:rgba(16,185,129,0.5); color:#10b981; }
    .jp-mob-act-ok:hover   { background:rgba(16,185,129,0.08); border-color:#10b981; color:#10b981; }
    .jp-mob-act-rej        { border-color:rgba(239,68,68,0.5); color:#ef4444; }
    .jp-mob-act-rej:hover  { background:rgba(239,68,68,0.08); border-color:#ef4444; color:#ef4444; }
    .jp-mob-more-btn       { width:38px; height:38px; flex:0 0 38px; padding:0; font-size:16px; }
    .jp-mob-more-btn:hover,
    .jp-mob-more-btn[aria-expanded="true"] { border-color:#8b5cf6; color:#8b5cf6; background:rgba(139,92,246,0.05); }
}

@media (max-width:767px) {
    .focused-mode .content-area,
    .td-container,
    .jp-container {
        padding-top: 0 !important;
    }
    .jp-header-card {
        position: sticky;
        top: 0;
        z-index: 1020;
        margin: -10px -10px 16px -10px;
        padding: 12px 14px;
        padding-top: max(12px, env(safe-area-inset-top));
        border-radius: 0;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid var(--border-color, #e2e8f0);
        background: var(--card-bg, #ffffff);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        gap: 12px;
    }
    html.theme-dark .jp-header-card {
        background: var(--card-bg, #1e293b);
        border-bottom-color: var(--border-color, #334155);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    .jp-back-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 19px;
    }
    /* One 36px row rather than a stacked grid: this header is sticky above a
       scrolling list, so the grid cost it ~80px of viewport. Overflow scrolls
       sideways like the filter pill strips. */
    .jp-header-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 2px 0 4px;
    }
    .jp-header-actions::-webkit-scrollbar { display: none; }
    .jp-btn-hdr-outline,
    .jp-btn-hdr-solid {
        flex: 0 0 auto;
        font-size: 12.5px;
        padding: 8px 12px;
        height: 36px;
    }
}

@media (max-width:576px) {
    .jp-header-left {
        gap: 10px;
    }
    .jp-logo-box {
        width: 46px;
        height: 46px;
        border-radius: 11px;
    }
    .jp-header-title {
        font-size: 1.1rem;
    }
    .jp-header-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }
    .jp-page-title {
        font-size: 1.3rem;
    }
    .jp-stats { gap:8px; }
    .jp-stat  { padding:12px 14px; border-radius:12px; }
    .jp-si    { width:36px; height:36px; border-radius:9px; font-size:16px; }
    .jp-sv    { font-size:1.3rem; }
    .jp-sl    { font-size:11.5px; }

    .jp-toolbar { flex-wrap:wrap; gap:8px; margin-bottom:14px; }
    .jp-sw      { flex:0 0 100%; }
    .jp-sinp    { height:40px; font-size:13px; }
    .jp-btn-outline, .jp-btn-primary { flex:1; height:40px; font-size:13px; padding:0 12px; justify-content:center; }

    .jp-mob-head { padding:11px 12px; gap:12px; }
    .jp-mob-photo img, .jp-mob-photo-ph { width:54px; height:72px; border-radius:9px; }
    .jp-mob-photo-ph { font-size:20px; }
    .jp-mob-pay-thumb { width:48px; height:48px; border-radius:7px; }
    .jp-mob-pay-none  { width:48px; height:64px; border-radius:7px; }
    .jp-mob-pay-none span { font-size:9px; }
    .jp-mob-name      { font-size:14px; }
    .jp-mob-meta span { font-size:12px; }
    .jp-mob-status-row { padding:9px 12px; gap:8px; }
    .jp-mob-action-row { padding:9px 12px; gap:6px; }
    .jp-mob-act { height:36px; font-size:13px; border-radius:8px; }
}

/* ── Dark Theme Overrides for Joined Players ── */
html.theme-dark .jp-header-card,
html.theme-dark .jp-stat {
    background: var(--card-bg, #1e293b);
    border-color: var(--border-color, #334155);
}
html.theme-dark .jp-back-btn {
    background: #0f172a;
    border: 1.5px solid #334155;
    color: #f8fafc !important;
    box-shadow: none;
}
html.theme-dark .jp-back-btn:hover {
    background: #334155;
    border-color: #6366f1;
    color: #ffffff !important;
    box-shadow: none;
    transform: scale(1.05);
}
html.theme-dark .jp-logo-box {
    background: #0f172a;
    border-color: #334155;
}
html.theme-dark .jp-header-title,
html.theme-dark .jp-page-title,
html.theme-dark .jp-sv {
    color: #f8fafc;
}
html.theme-dark .jp-btn-hdr-outline,
html.theme-dark .jp-btn-outline {
    background: #1e293b;
    color: #818cf8;
    border-color: #6366f1;
}
html.theme-dark .jp-btn-hdr-outline:hover,
html.theme-dark .jp-btn-outline:hover {
    background: #312e81;
    color: #c7d2fe;
}
html.theme-dark .jp-prog-wrap {
    background: #334155;
}

/* ── Shared Tournament Hero Header ──────────────────────────────────────
   Used by ~/Views/Shared/_TournamentHeroHeader.cshtml — the public live
   auction page and both registration-link pages share this exact header so
   a visitor sees the same design everywhere. The logo box intentionally
   matches .jp-logo-box's light, bordered, object-fit:cover look even though
   the surrounding card is a dark gradient. */
.ar-hero-card {
    background: linear-gradient(135deg, #090d16 0%, #111827 50%, #1e293b 100%);
    border-radius: 16px;
    padding: 16px 22px;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    margin: 4px 0 16px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    width: 100%;
}
.ar-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #6366f1, #a855f7, #ec4899);
}
.ar-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ar-hero-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}
.ar-hero-back-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
    cursor: pointer;
}
.ar-hero-back-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateX(-3px);
}
/* Logo box — matches .jp-logo-box (Tournament Detail's header logo): light
   bordered rounded-square, image fills the box via object-fit:cover, no
   inner padding — clean edge-to-edge logo display. */
.ar-hero-logo {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    padding: 0;
    font-size: 22px;
    color: #fbbf24;
}
.ar-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    margin: 0;
    display: block;
}
.ar-hero-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.ar-hero-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 850;
    margin: 0;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ar-hero-season {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 750;
    color: #93c5fa;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
}
.ar-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 2px;
}
.ar-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.ar-hero-meta-item i {
    color: #60a5fa;
}
.ar-hero-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ar-status-badge {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.ar-status-badge.status-live {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.35);
}
.ar-status-badge.status-completed {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    border: 1px solid rgba(203, 213, 225, 0.25);
}
.ar-status-badge.status-active,
.ar-status-badge.status-pending {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.35);
}
.mlv-hero-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.ar-status-badge.status-live .mlv-hero-status-dot {
    background: #4ade80;
    animation: taPulse 1.4s infinite;
}
.ar-status-badge.status-completed .mlv-hero-status-dot {
    background: #cbd5e1;
}
.ar-status-badge.status-active .mlv-hero-status-dot,
.ar-status-badge.status-pending .mlv-hero-status-dot {
    background: #fbbf24;
}
@keyframes taPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.75); }
}
@media (max-width: 768px) {
    .ar-hero-card { padding: 10px 12px; border-radius: 14px; margin: 2px 0 8px; }
    .ar-hero-inner { gap: 8px; flex-wrap: nowrap; }
    .ar-hero-left { gap: 8px; min-width: 0; }
    .ar-hero-back-btn { width: 32px; height: 32px; font-size: 15px; }
    .ar-hero-logo { width: 38px; height: 38px; border-radius: 9px; }
    .ar-hero-title { font-size: 14px; }
    .ar-hero-season { font-size: 10.5px; }
    .ar-hero-meta { font-size: 10.5px; gap: 8px; }
    .ar-hero-meta-item:nth-child(n+2) { display: none; }
    .ar-status-badge { padding: 4px 8px; font-size: 10px; }
}

/* Footer / Pagination */
.jp-footer {
    display:flex; align-items:center; justify-content:space-between;
    margin-top:20px; flex-wrap:wrap; gap:12px;
    border-top:1px solid var(--border-color); padding-top:16px;
}
.jp-info-txt { font-size:13px; color:var(--text-secondary); font-weight:500; }
.jp-pag { display:flex; gap:5px; align-items:center; }
.jp-pb {
    width:34px; height:34px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border-color); background:var(--card-bg);
    cursor:pointer; font-size:13px; font-weight:600;
    color:var(--text-primary); transition:all 0.2s;
}
.jp-pb:hover  { border-color:#8b5cf6; color:#8b5cf6; }
.jp-pb.active { background:linear-gradient(135deg,#8b5cf6,#6d28d9); border-color:transparent; color:#fff; box-shadow:0 4px 10px rgba(124,58,237,0.25); }
.jp-pb.off    { opacity:.35; pointer-events:none; }

/* Empty state */
.jp-empty {
    text-align:center; padding:60px 24px; color:var(--text-secondary);
    background:var(--card-bg); border:1px solid var(--border-color);
    border-radius:16px; margin-bottom:20px;
}
.jp-empty i { font-size:44px; display:block; margin-bottom:10px; color:#8b5cf6; opacity:.6; }
.jp-empty p { font-size:15px; font-weight:500; margin:0; }

/* Modal */
.jp-modal-content {
    background:var(--card-bg); color:var(--text-primary);
    border:1px solid var(--border-color); border-radius:20px; overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.22);
}
.jp-modal-content .modal-header { border-bottom:1px solid var(--border-color); padding:16px 20px; }
.jp-modal-content .modal-title  { font-weight:700; color:var(--text-primary); }
.jp-modal-content .modal-body   { padding:16px; }
.jp-modal-content .btn-close    { opacity:.6; transition:opacity 0.2s; }
.jp-modal-content .btn-close:hover { opacity:1; }
html.theme-dark .jp-modal-content .btn-close,
body.theme-dark  .jp-modal-content .btn-close { filter:invert(1) grayscale(1) brightness(2); }

/* Tournament note — voice typing */
.tn-field-wrap { position: relative; }
.tn-field-wrap textarea { padding-right: 44px; }
.tn-voice-btn {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-color, #d1d5db);
    background: var(--card-bg, #fff);
    color: var(--text-secondary, #6b7280);
    font-size: 14px; transition: all 0.2s; z-index: 1;
}
.tn-voice-btn:hover { border-color: #8b5cf6; color: #8b5cf6; background: rgba(139,92,246,0.06); }
.tn-voice-btn.recording {
    border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.08);
    animation: tn-pulse 1s ease-in-out infinite;
}
@keyframes tn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
    50%       { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
.tn-voice-status { font-size: 12px; color: var(--text-secondary, #6b7280); margin-top: 4px; min-height: 18px; }

/* ── Sample Note Modal ───────────────────────────────────────────────── */
.sn-dialog { --bs-modal-border-radius: 14px; }
.sn-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.1);
}

/* Header */
.sn-header {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    border-bottom: none;
    padding: 16px 20px;
}
.sn-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    margin: 0;
}
.sn-close { filter: invert(1) grayscale(1); opacity: .85; }
.sn-close:hover { opacity: 1; }

/* Body */
.sn-body { padding: 0; background: var(--card-bg, #fff); }

/* Mobile tab strip */
.sn-tabs {
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
    padding: 0;
    gap: 0;
}
.sn-tab-btn {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    padding: 11px 8px;
    margin-bottom: -2px;
    background: transparent !important;
    transition: color .15s, border-color .15s;
}
.sn-tab-btn.active,
.sn-tab-btn:focus { color: #7c3aed !important; border-bottom-color: #7c3aed !important; }

/* Mobile pane padding */
.sn-pane { padding: 20px 18px 24px; }

/* Desktop two-column */
.sn-desktop { border-top: none; }
.sn-col { padding: 24px 22px 28px; }
.sn-col-right { border-left: 1px solid var(--border-color, #e5e7eb); }

/* Section heading (both layouts) */
.sn-lang-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: 14px;
}
.sn-lang-heading::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 13px;
    background: linear-gradient(180deg, #8b5cf6, #6d28d9);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Instruction list */
.sn-list {
    padding-left: 22px;
    margin: 0 0 10px;
}
.sn-list li {
    font-size: 14px;
    color: var(--text-primary, #1f2937);
    line-height: 1.75;
    margin-bottom: 5px;
}
.sn-list li:last-child { margin-bottom: 0; }

/* Closing line */
.sn-closing {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    font-style: italic;
    margin: 12px 0 0;
}

/* Footer */
.sn-footer {
    background: var(--bg-secondary, #f9fafb);
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding: 12px 20px;
    gap: 8px;
    flex-wrap: wrap;
}
@media (max-width: 767.98px) {
    .sn-footer { padding: 10px 14px; }
    .sn-footer .btn { font-size: 13px; padding: 7px 12px; }
}

/* ── Readonly phone field — disabled appearance ─────────────────────── */
/* Excludes date/time pickers: flatpickr marks those readonly to block typing, but they stay clickable and must not look disabled. */
input.form-control[readonly]:not(.bid-datepicker):not(.bid-datepicker-alt):not(.bid-timepicker) {
    background-color: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
    border-color: var(--border-color, #e5e7eb);
    cursor: not-allowed;
    user-select: none;
    opacity: 0.8;
}

input.bid-datepicker[readonly],
input.bid-datepicker-alt[readonly],
input.bid-timepicker[readonly] {
    cursor: pointer;
    background-color: var(--card-bg, #ffffff);
    color: var(--text-primary, #111827);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sponsors list page (.sponsor-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.sponsor-img-thumb {
    width: 44px; height: 44px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bs-light, #f8f9fa);
    padding: 2px;
}
.sponsor-img-placeholder {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: var(--bs-light, #f8f9fa);
    border: 1px solid var(--border-color, #e2e8f0);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary, #94a3b8);
    font-size: .9rem;
}
.sponsor-banner-thumb {
    width: 88px; height: 29px;
    border-radius: 4px;
    object-fit: contain;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bs-light, #f8f9fa);
}
.sponsor-msg-cell {
    max-width: 200px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: .82rem;
    color: var(--text-secondary, #6b7280);
}
/* Drag handle for SortableJS */
.drag-handle { cursor: grab; color: var(--text-secondary, #94a3b8); padding: 0 6px; font-size: 1rem; }
.drag-handle:active { cursor: grabbing; }
.sortable-ghost  { opacity: .4; background: var(--bg-secondary, #f8fafc); }
.sortable-chosen { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* ═══════════════════════════════════════════════════════════════
   Modern Toastr Overrides — app-wide (every page using showToast()),
   both mobile and desktop. White card, a pastel icon badge (light tint
   circle + type-colored glyph), neutral dark title / gray message, and
   a matching colored bar flush along the bottom edge. Purely
   presentational — no trigger/timing logic.
   ═══════════════════════════════════════════════════════════════ */
#toast-container > div {
    opacity: 1;
    /* Hardcoded white (not var(--card-bg)) — the card must stay white for
       every message type, including warning, regardless of light/dark theme. */
    background-color: #fff !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
    padding: 14px 44px 14px 58px !important;
    margin-bottom: 12px;
    border-radius: 14px;
    background-repeat: no-repeat, no-repeat;
    width: fit-content;
    min-width: 280px;
    max-width: 420px;
    position: relative !important;
    overflow: hidden; /* clips the bottom accent bar to the card's rounded corners */
}

    #toast-container > div:hover {
        box-shadow: 0 20px 46px rgba(15, 23, 42, 0.2);
        opacity: 1;
    }

.toast-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: #1F2937 !important;
}

.toast-message {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 3px; /* only creates a gap when a title is present above it */
    color: #1F2937 !important;
}

#toast-container > div .toast-close-button,
.toast-close-button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 12px !important;
    left: auto !important;
    float: none !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: color 0.15s ease, transform 0.15s ease;
}

#toast-container > div .toast-close-button:hover,
.toast-close-button:hover {
    color: #dc2626 !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.toast-progress {
    height: 4px;
    bottom: 0;
    opacity: 1;
}

/* Each type: a pastel icon badge (light tint circle + type-colored glyph) and a
   matching bottom accent bar. Card background, title/message and close icon
   stay neutral across all types (set above).
   !important on background-image: toastr.min.css sets its own built-in PNG
   icon on these same selectors with !important — without matching it here,
   that base64 glyph silently wins over our SVG badge every time. */
#toast-container > .toast-success {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"),
        radial-gradient(circle closest-side, #dcfce7 100%, transparent 100%) !important;
    background-position: 22px center, 14px center !important;
    background-size: 15px 15px, 30px 30px !important;
}
    #toast-container > .toast-success .toast-progress { background-color: #22c55e; }

#toast-container > .toast-error {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"),
        radial-gradient(circle closest-side, #fee2e2 100%, transparent 100%) !important;
    background-position: 22px center, 14px center !important;
    background-size: 15px 15px, 30px 30px !important;
}
    #toast-container > .toast-error .toast-progress { background-color: #ef4444; }

#toast-container > .toast-info {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E"),
        radial-gradient(circle closest-side, #dbeafe 100%, transparent 100%) !important;
    background-position: 22px center, 14px center !important;
    background-size: 15px 15px, 30px 30px !important;
}
    #toast-container > .toast-info .toast-progress { background-color: #3b82f6; }

#toast-container > .toast-warning {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E"),
        radial-gradient(circle closest-side, #fef3c7 100%, transparent 100%) !important;
    background-position: 22px center, 14px center !important;
    background-size: 15px 15px, 30px 30px !important;
}
    #toast-container > .toast-warning .toast-progress { background-color: #f59e0b; }

/* Dark theme — only the card surface + title/message need adapting; the pastel
   icon badges and bottom accent bar colors already read fine on a dark card. */
body.theme-dark .toast-title,
body.theme-dark-sidebar .toast-title { color: #f9fafb; }
body.theme-dark .toast-message,
body.theme-dark-sidebar .toast-message { color: #d1d5db; }

/* Mobile — calc(100vw - 32px), centered instead of a narrow box pinned to a corner */
@media (max-width: 576px) {
    #toast-container {
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
    }

    #toast-container > div {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 14px 44px 14px 56px !important;
        box-sizing: border-box !important;
    }

    #toast-container > div .toast-close-button {
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Live-auction indicator  (.has-live-auction on the Auction menu item)
   Applied by _GeneralMenu / _GeneralMobileMenu when _Layout's AuctionMenuStatus
   reports an auction live or scheduled for today.

   A green icon plus a dot rather than a restyle of the item itself: the item
   already carries active/hover/dark-theme background rules, and tinting it
   would fight all three. Green matches the "Live" pill on the auctions list
   (#16a34a on #dcfce7).
   ═══════════════════════════════════════════════════════════════════════════ */
/* Icon tint only while the item is NOT the current page: the per-theme
   `.sidebar-item.active i` rules set their colour with !important, and the active
   purple is the stronger "you are here" signal anyway. The dot below is a
   background, so those colour rules never touch it — it stays green either way,
   which is what actually carries the live state. */
.sidebar-item.has-live-auction i,
.mobile-menu-item.has-live-auction i {
    color: #16a34a;
}

.mobile-menu-item.has-live-auction {
    position: relative; /* .sidebar-item already has it */
}

.sidebar-item.has-live-auction::after,
.mobile-menu-item.has-live-auction::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    animation: bpLiveAuctionPulse 1.4s ease-in-out infinite;
}

/* Sidebar rows are horizontal, so the dot goes at the trailing edge. */
.sidebar-item.has-live-auction::after {
    right: 12px;
    top: 50%;
    margin-top: -4px;
}

/* Collapsed sidebar shows the icon only and centres it — park the dot on the
   icon's top-right instead of an edge that is no longer where the label was. */
.sidebar.collapsed .sidebar-item.has-live-auction::after {
    right: 50%;
    top: 6px;
    margin-top: 0;
    margin-right: -12px;
}

/* Bottom-nav tabs stack icon over label, so the dot sits above-right of the
   icon. Not inside the <span>: that label is clipped with text-overflow, which
   would cut the dot off. */
.mobile-menu-item.has-live-auction::after {
    top: 6px;
    left: 50%;
    margin-left: 7px;
}

@keyframes bpLiveAuctionPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-item.has-live-auction::after,
    .mobile-menu-item.has-live-auction::after {
        animation: none;
    }
}

/* ── Connection-lost banner (shared: /auction/liveview, /onlineauction/start) ──
   Above every overlay in the app, including the Sold/Unsold popup
   (.sold-overlay, 9999) and the Reset confirmation (.reset-overlay, 9998),
   which are full-viewport and would otherwise completely hide it: a
   sold/unsold popup can sit open indefinitely with auto-advance off, and a
   dropped connection is exactly as urgent while one is open as at any other
   time. 10060 clears the highest other z-index in the app (.ft-toast, 10050)
   with headroom; it deliberately does not chase the one-off 2147483647 used
   by #content-area's unrelated fullscreen-table mode. */
.bp-conn-banner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 10060;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    color: #92400e;
    font-weight: 700;
    font-size: 12.5px;
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.bp-conn-banner.show { display: flex; }

.bp-conn-banner__btn {
    flex-shrink: 0;
    background: #92400e;
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 8px;
    min-height: 32px;
    cursor: pointer;
}

.bp-conn-banner__btn:hover { background: #7c350c; }

@media (max-width: 480px) {
    .bp-conn-banner__text { font-size: 12px; }
}

[data-bs-theme="dark"] .bp-conn-banner,
.theme-dark .bp-conn-banner {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

[data-bs-theme="dark"] .bp-conn-banner__btn,
.theme-dark .bp-conn-banner__btn {
    background: #fbbf24;
    color: #1e293b;
}

/* Connection lost: block the actions that write to the auction. Set by
   connection-banner.js alongside the banner itself. Done in CSS rather than
   by setting btn.disabled because #btnSold/#btnUnsold are re-rendered by
   every htmx swap of #auction-room, and #mlvPlaceBidBtn is recomputed by
   mlvUpdateBidButtonState() on each broadcast - either would quietly undo a
   JS flag, whereas a rule keyed off <body> keeps applying to whatever markup
   is currently in the DOM. The server still validates every one of these
   actions; this only stops the user acting on a page it can't vouch for.

   !important because this has to beat whatever each page already says about
   these buttons - MobileLiveView's own #mlvPlaceBidBtn:disabled block sets
   opacity back to 1, and Bootstrap styles .btn:disabled - and a safety
   override is not something a later stylesheet should be able to win. */
body.bp-conn-lost #mlvPlaceBidBtn,
body.bp-conn-lost #btnSold,
body.bp-conn-lost #btnUnsold {
    pointer-events: none !important;
    opacity: 0.45 !important;
    filter: grayscale(1) !important;
    cursor: not-allowed !important;
}

/* ═══ Universal Confirmation Modal (Mobile-Friendly Yes / No) ═══ */
.bp-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.bp-confirm-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.bp-confirm-dialog {
    background: var(--card-bg, #ffffff);
    color: var(--text-primary, #0f172a);
    width: 100%;
    max-width: 380px;
    border-radius: 20px;
    padding: 24px 22px 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border-color, rgba(0, 0, 0, 0.08));
    text-align: center;
    transform: scale(0.92) translateY(10px);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.bp-confirm-backdrop.show .bp-confirm-dialog {
    transform: scale(1) translateY(0);
}

.bp-confirm-icon-wrap {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.bp-confirm-icon-primary {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.bp-confirm-icon-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.bp-confirm-icon-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.bp-confirm-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.2px;
}

.bp-confirm-body {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-secondary, #64748b);
    margin-bottom: 22px;
    word-break: break-word;
    padding: 0 4px;
}

.bp-confirm-actions {
    display: flex;
    gap: 12px;
}

.bp-confirm-btn {
    flex: 1;
    height: 44px;
    border-radius: 11px;
    font-size: 14.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.bp-confirm-btn:active {
    transform: scale(0.97);
}

.bp-confirm-btn-no {
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-secondary, #475569);
    border: 1.5px solid var(--border-color, #e2e8f0);
}

.bp-confirm-btn-no:hover {
    background: var(--border-color, #e2e8f0);
    color: var(--text-primary, #0f172a);
}

.bp-confirm-btn-yes {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

.bp-confirm-btn-yes:hover {
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.45);
}

.bp-confirm-btn-danger {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

.bp-confirm-btn-danger:hover {
    background: #dc2626;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.45);
}

body.bp-confirm-open {
    overflow: hidden;
}

/* Dark mode tweaks */
[data-bs-theme="dark"] .bp-confirm-dialog,
.theme-dark .bp-confirm-dialog {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px #334155;
}

[data-bs-theme="dark"] .bp-confirm-btn-no,
.theme-dark .bp-confirm-btn-no {
    background: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}

[data-bs-theme="dark"] .bp-confirm-btn-no:hover,
.theme-dark .bp-confirm-btn-no:hover {
    background: #334155;
    color: #f1f5f9;
}