:root {
    /* Backgrounds — glass surfaces */
    --bg-primary: #f0f4f3;
    --bg-surface: rgba(255, 255, 255, 0.7);
    --bg-elevated: rgba(255, 255, 255, 0.85);
    --bg-input: rgba(255, 255, 255, 0.9);
    --bg-hover: rgba(255, 255, 255, 0.5);
    --bg-solid: #ffffff;

    /* Text */
    --text-primary: #0f1a14;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;

    /* Brand — modernized emerald */
    --brand-primary: #059669;
    --brand-primary-light: #10b981;
    --brand-hover: #047857;
    --brand-gradient: linear-gradient(135deg, #047857 0%, #059669 40%, #10b981 100%);
    --brand-text: #047857;
    --brand-celtic: #1b5e20;
    --brand-accent: #f59e0b;
    --brand-accent-light: #fbbf24;
    --brand-accent-dark: #d97706;

    /* Semantic colours */
    --grade-a-bg: rgba(16, 185, 129, 0.12);
    --grade-a-text: #059669;
    --grade-b-bg: rgba(59, 130, 246, 0.12);
    --grade-b-text: #2563eb;
    --color-success: #10b981;
    --color-info: #3b82f6;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-warning-border: rgba(245, 158, 11, 0.3);
    --color-warning-row: rgba(245, 158, 11, 0.06);

    /* Borders — glass edges */
    --border: rgba(0, 0, 0, 0.08);
    --border-light: rgba(0, 0, 0, 0.05);
    --border-medium: rgba(0, 0, 0, 0.12);
    --border-table: rgba(0, 0, 0, 0.04);

    /* Shadows — softer, larger blur */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);

    /* Glass effect */
    --glass-blur: blur(12px);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: 1px solid rgba(255, 255, 255, 0.2);

    /* Popup surfaces — solid, opaque, never affected by club branding */
    --popup-bg: #ffffff;
    --popup-border: 1px solid rgba(0, 0, 0, 0.12);
    --popup-text: #1f2937;
    --popup-text-secondary: #6b7280;
    --popup-hover: #f3f4f6;
    --popup-divider: rgba(0, 0, 0, 0.08);
    --popup-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Border radius — larger, softer */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Font sizes (type scale) */
    --text-xs: 0.7rem;
    --text-sm: 0.8rem;
    --text-base: 0.9rem;
    --text-lg: 1.05rem;
    --text-xl: 1.3rem;
    --text-2xl: 1.8rem;

    /* Spacing scale (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* Pitch */
    --pitch-grass-1: #3a8f3c;
    --pitch-grass-2: #349436;
    --pitch-line: rgba(255,255,255,0.45);
    --pitch-line-2: rgba(255,255,255,0.35);
    --pitch-border: rgba(255,255,255,0.5);
    --badge-bg: rgba(255,255,255,0.95);
    --badge-border: rgba(255,255,255,0.6);
    --swap-bg: #fff9c4;
    --swap-border: #f9a825;
    --bar-track: rgba(0,0,0,0.06);
    --subs-bg: rgba(255,255,255,0.5);
    --suggestion-match-bg: rgba(16, 185, 129, 0.1);
    --suggestion-match-text: #059669;
    --suggestion-tag-bg: rgba(0,0,0,0.04);
    --avail-badge-bg: rgba(0,0,0,0.06);
    --th-bg: rgba(255,255,255,0.5);

    /* Missing variable definitions */
    --brand-primary-bg: rgba(5, 150, 105, 0.08);
    --brand-secondary-bg: rgba(245, 158, 11, 0.1);
    --brand-tertiary-bg: rgba(139, 92, 246, 0.1);
    --accent: #059669;
    --bg-muted: #e5e7eb;
    --danger: #ef4444;

    /* Transitions */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
}

[data-theme="dark"] {
    --bg-primary: #0a0f0d;
    --bg-surface: rgba(255, 255, 255, 0.05);
    --bg-elevated: rgba(255, 255, 255, 0.08);
    --bg-input: rgba(255, 255, 255, 0.08);
    --bg-hover: rgba(255, 255, 255, 0.1);
    --bg-solid: #1a1f1d;
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    --text-muted: #4b5563;
    --text-inverse: #0f1a14;
    --brand-primary: #10b981;
    --brand-primary-light: #34d399;
    --brand-hover: #059669;
    --brand-gradient: linear-gradient(135deg, #047857 0%, #059669 40%, #10b981 100%);
    --brand-text: #6ee7b7;
    --brand-accent: #fbbf24;
    --brand-accent-light: #fcd34d;
    --brand-accent-dark: #f59e0b;
    --grade-a-bg: rgba(16, 185, 129, 0.15);
    --grade-a-text: #34d399;
    --grade-b-bg: rgba(59, 130, 246, 0.15);
    --grade-b-text: #60a5fa;
    --color-success: #34d399;
    --color-info: #60a5fa;
    --color-error: #f87171;
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(251, 191, 36, 0.1);
    --color-warning-border: rgba(251, 191, 36, 0.2);
    --color-warning-row: rgba(251, 191, 36, 0.06);
    --border: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.06);
    --border-medium: rgba(255, 255, 255, 0.15);
    --border-table: rgba(255, 255, 255, 0.06);
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);

    /* Popup surfaces — solid dark */
    --popup-bg: #1e2422;
    --popup-border: 1px solid rgba(255, 255, 255, 0.12);
    --popup-text: #e5e7eb;
    --popup-text-secondary: #9ca3af;
    --popup-hover: #2a302e;
    --popup-divider: rgba(255, 255, 255, 0.1);
    --popup-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
    --pitch-grass-1: #2d7a2f;
    --pitch-grass-2: #267128;
    --badge-bg: rgba(40,40,40,0.95);
    --badge-border: rgba(80,80,80,0.6);
    --swap-bg: rgba(251, 191, 36, 0.12);
    --swap-border: rgba(251, 191, 36, 0.3);
    --bar-track: rgba(255,255,255,0.1);
    --subs-bg: rgba(255,255,255,0.05);
    --suggestion-match-bg: rgba(16, 185, 129, 0.15);
    --suggestion-match-text: #34d399;
    --suggestion-tag-bg: rgba(255,255,255,0.08);
    --avail-badge-bg: rgba(255,255,255,0.1);
    --th-bg: rgba(255,255,255,0.05);
    --brand-primary-bg: rgba(16, 185, 129, 0.1);
    --brand-secondary-bg: rgba(251, 191, 36, 0.1);
    --brand-tertiary-bg: rgba(139, 92, 246, 0.12);
    --accent: #10b981;
    --bg-muted: #374151;
    --danger: #f87171;
}

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

/* Screen-reader only (accessible labels) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lucide icon defaults */
[data-lucide] {
    width: 1em;
    height: 1em;
    stroke-width: 2;
    vertical-align: -0.125em;
    display: inline-block;
}
.stat-icon [data-lucide] { width: 1.5rem; height: 1.5rem; }
.btn [data-lucide] { margin-right: 0.3em; }

/* Global focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--brand-primary-light);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand-primary-light);
    outline-offset: 2px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    background-image:
        radial-gradient(at 20% 80%, rgba(5, 150, 105, 0.06) 0%, transparent 50%),
        radial-gradient(at 80% 20%, rgba(59, 130, 246, 0.04) 0%, transparent 50%);
    background-attachment: fixed;
    color: var(--text-primary);
    min-height: 100vh;
}

/* Passcode Gate */
.passcode-gate {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #059669 0%, #047857 50%, #065f46 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 0;
    overflow: hidden;
}

.passcode-gate.hidden { display: none; }

.passcode-card {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem 2rem;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,255,255,0.1);
    animation: cardSlideIn 0.4s ease-out;
}

@keyframes cardSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

[data-theme="dark"] .passcode-card {
    background: #1a1a1a;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.08);
}

.passcode-logo-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #059669, #10b981);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.4);
}

.passcode-logo-icon svg {
    stroke: white;
}

.passcode-logo {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}

.passcode-subtitle {
    font-size: var(--text-base);
    color: var(--text-tertiary);
    margin-bottom: 1.75rem;
}

.passcode-terms {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 1.5rem;
    line-height: 1.5;
}

.passcode-terms a {
    color: var(--text-tertiary);
    text-decoration: underline;
}

.signup-heading {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.signup-subtitle {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-bottom: 1.25rem;
}

/* Google Sign-in Button */
.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 500;
    color: #3c4043;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.btn-google:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

[data-theme="dark"] .btn-google {
    background: #2a2a2a;
    border-color: #404040;
    color: #e0e0e0;
}

[data-theme="dark"] .btn-google:hover {
    background: #333;
}

.btn-full {
    width: 100%;
}

#passcode-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    outline: none;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

#passcode-input:focus { border-color: var(--brand-primary); }

.passcode-error {
    color: var(--color-error);
    font-size: var(--text-sm);
    margin-top: 0.75rem;
}

.passcode-error.hidden { display: none; }

.passcode-footer {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 1.5rem;
}

#app-container.hidden { display: none; }

.hidden { display: none !important; }

header {
    background: var(--header-bg, rgba(5, 150, 105, 0.9));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--text-inverse);
    padding: 1rem;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

[data-theme="dark"] header {
    color: var(--text-primary);
}

header h1 {
    font-size: 1.4rem;
    transition: opacity var(--transition-fast);
    margin: 0;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

/* Header brand — club logo + name */
.header-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}
.header-brand:hover { opacity: 0.8; }
.header-brand h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-logo {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,0.15);
    color: var(--text-inverse);
}
[data-theme="dark"] .header-logo { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.header-logo svg { width: 18px; height: 18px; }
.header-logo.has-logo {
    background: white;
    padding: 2px;
}
.header-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.theme-toggle {
    background: rgba(255,255,255,0.15);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background var(--transition-fast);
    color: inherit;
}

.theme-toggle:hover {
    background: rgba(255,255,255,0.25);
}

.subtitle {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    opacity: 1;
    margin-bottom: 0.75rem;
}

nav {
    display: inline-flex;
    gap: 2px;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-full);
    padding: 4px;
}

.nav-btn {
    background: transparent;
    color: inherit;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nav-btn.active {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

main {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

.tab-content {
    display: none;
    padding-top: 1rem;
    animation: tab-fade-in var(--transition-normal) ease-out;
}

.tab-content.active {
    display: block;
}

@keyframes tab-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.toolbar-right {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.btn {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    cursor: pointer;
    font-weight: 500;
    transition: all var(--transition-fast) ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--brand-gradient);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

[data-theme="dark"] .btn-primary {
    color: #fff;
}

.btn-primary:hover {
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
}

.btn-secondary {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: var(--glass-border);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--bg-hover);
}

.btn-danger {
    background: var(--color-error);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.btn-danger:hover {
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);
}

.btn-large {
    padding: 0.75rem 2rem;
    font-size: 1rem;
}

/* Button loading state */
.btn.btn-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spinner-rotate 0.6s linear infinite;
}

.import-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* Search & Filters */
.search-filter-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    align-items: center;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 180px;
    max-width: 300px;
}

.search-input {
    width: 100%;
    padding: 0.45rem 0.75rem 0.45rem 2rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

.search-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-sm);
    opacity: 0.4;
    pointer-events: none;
}

.filter-group {
    display: flex;
    gap: 2px;
    background: var(--border-light);
    border-radius: var(--radius-full);
    padding: 3px;
}

.filter-chip {
    padding: 0.3rem 0.6rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.filter-chip:hover {
    background: rgba(0,0,0,0.05);
}

[data-theme="dark"] .filter-chip:hover {
    background: rgba(255,255,255,0.08);
}

.filter-chip.active {
    background: var(--brand-primary);
    color: white;
}

.player-counts {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

/* Player List */
.player-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-row {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.player-row:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Player modal header row */
.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.modal-header-row h2 {
    margin: 0;
}

.modal-header-actions {
    display: flex;
    gap: 0.5rem;
}

.player-row-birthday {
    background: linear-gradient(135deg, #fff8e1 0%, #ffe0b2 50%, #fff8e1 100%);
    border: 1px solid #ffe082;
}

[data-theme="dark"] .player-row-birthday {
    background: linear-gradient(135deg, #2a2218 0%, #3a2a18 50%, #2a2218 100%);
    border: 1px solid #5d4037;
}

.player-row .grade-badge {
    font-size: var(--text-xs);
    font-weight: 700;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.grade-a {
    background: var(--grade-a-bg);
    color: var(--grade-a-text);
}

.grade-b {
    background: var(--grade-b-bg);
    color: var(--grade-b-text);
}

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

.player-row .player-name {
    font-weight: 600;
    font-size: var(--text-base);
}

.player-row .player-positions {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.inline-positions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.inline-pos-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    white-space: nowrap;
}

.inline-pos-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
}

.inline-primary {
    font-size: var(--text-xs);
    padding: 2px 4px;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-primary);
}

.player-row .player-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.player-actions .btn {
    padding: 0.35rem 0.65rem;
    font-size: var(--text-sm);
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
    padding: 1rem;
    overscroll-behavior: contain;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: var(--popup-bg);
    border: var(--popup-border);
    color: var(--popup-text);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--popup-shadow);
    animation: modal-scale-in var(--transition-normal) ease-out;
}

@keyframes modal-scale-in {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-content h2 {
    margin-bottom: 1rem;
    color: var(--popup-text);
}

/* Ensure all popup surfaces use stable text colours independent of club branding */
.modal-content label,
.modal-content p,
.modal-content .form-group,
.confirm-box,
.profile-panel-content,
.profile-panel-content h2,
.profile-panel-content h3,
.profile-panel-content .profile-label,
.profile-panel-content .profile-value,
.profile-panel-content .profile-section-title {
    color: var(--popup-text);
}
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.profile-stat-tile {
    text-align: center;
    padding: 0.75rem 0.25rem;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.profile-stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--popup-text);
    line-height: 1.2;
}
.profile-stat-label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--popup-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}
@media (max-width: 480px) {
    .profile-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
.discipline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
}
.discipline-yellow { background: #f5c542; color: #333; }
.discipline-red { background: #d9534f; }
.modal-content .form-group label { color: var(--popup-text-secondary); }
.profile-panel-content .profile-label { color: var(--popup-text-secondary); }

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: var(--text-base);
}

.form-row {
    display: flex;
    gap: 1rem;
}
.form-row .form-group {
    flex: 1;
}
.form-section-label {
    font-weight: 700;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 1.2rem 0 0.5rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border-light);
}
/* --- Toggle group & form extras --- */
.toggle-group {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.toggle-btn {
    flex: 1;
    padding: 0.5rem 1rem;
    border: none;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.toggle-btn.active {
    background: var(--brand-primary, #059669);
    color: white;
}
.form-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}
.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.colour-picker-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.colour-picker-row input[type="color"] {
    width: 40px;
    height: 40px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 2px;
    background: none;
}
.colour-swatches {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.colour-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.1s;
}
.colour-swatch:hover { transform: scale(1.15); }
.colour-swatch.active { border-color: var(--text-primary); }

.grading-toggle-row { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); }
.grading-toggle-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand-primary, #059669); }
.grading-presets { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-top: 0.5rem; }
.grading-presets .toggle-btn { font-size: var(--text-xs); padding: 0.35rem 0.6rem; }
.grading-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.grade-pill { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 0.2rem 0.5rem; font-size: var(--text-xs); font-weight: 500; }
.grade-pill-remove { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 0.9rem; padding: 0; line-height: 1; }
.grade-pill-remove:hover { color: var(--danger); }
.grading-custom-input { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.grading-custom-input input { flex: 1; padding: 0.35rem 0.5rem; font-size: var(--text-sm); }

.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    line-height: 1.5;
}
.form-group textarea {
    resize: vertical;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background: var(--bg-input);
    color: var(--text-primary);
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.checkbox-label {
    font-weight: 400 !important;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--text-base);
}

.modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

/* Mode Config */
.mode-config {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Matchday sub-tabs */
.matchday-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 1rem;
}
.matchday-subtab {
    padding: 0.6rem 1.25rem;
    border: none;
    background: none;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
}
.matchday-subtab:hover { color: var(--text-primary); }
.matchday-subtab.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}
[data-theme="dark"] .matchday-subtab.active {
    color: var(--color-success);
    border-bottom-color: var(--color-success);
}
.squads-header-actions {
    display: flex;
    gap: 0.5rem;
}

.mode-toggle {
    display: flex;
    background: var(--border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.mode-btn {
    padding: 0.4rem 1rem;
    border: none;
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.mode-btn.active {
    background: var(--brand-primary);
    color: white;
}

[data-theme="dark"] .mode-btn.active {
    color: var(--text-primary);
}

.team-config {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--text-sm);
    font-weight: 500;
}

.team-config.hidden {
    display: none;
}

.team-config select {
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    font-size: var(--text-sm);
    margin-left: 0.25rem;
    background: var(--bg-input);
    color: var(--text-primary);
}

.avail-count-badge {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--avail-badge-bg);
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-md);
    vertical-align: middle;
}

/* Match Day - Availability */
.availability-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.availability-columns h3 {
    font-size: var(--text-base);
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.avail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: var(--text-base);
}

.avail-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* Squads */
.squads-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.squad-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    animation: card-pop-in var(--transition-normal) ease-out;
}

@keyframes card-pop-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.squad-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    padding: 0 0.25rem;
}

.squad-card-header h3 {
    font-size: var(--text-base);
    font-weight: 700;
}

.team-formation-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: var(--glass-border);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.team-formation-row label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.formation-input {
    width: 44px;
    padding: 0.35rem 0.25rem;
    text-align: center;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.formation-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--brand-primary-light);
}
.formation-input.pending {
    border-color: var(--color-warning);
    background: rgba(251, 191, 36, 0.1);
}
.formation-total {
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
}
.formation-valid {
    color: var(--color-success);
    background: rgba(16, 185, 129, 0.1);
}
.formation-invalid {
    color: var(--color-error);
    background: rgba(239, 68, 68, 0.1);
}
.formation-apply-btn {
    display: none;
    padding: 0.3rem 0.6rem;
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--color-success);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    margin-left: auto;
}
.formation-apply-btn:hover {
    background: var(--color-success-dark, #059669);
    transform: scale(1.02);
}
.formation-apply-btn.show {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.formation-apply-btn svg {
    width: 14px;
    height: 14px;
}

.squad-header-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.squad-header-actions .btn-icon {
    background: var(--glass-bg);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

.squad-header-actions .btn-icon svg,
.squad-header-actions .btn-icon [data-lucide] {
    width: 1rem !important;
    height: 1rem !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* Ensure WhatsApp icon is visible on green background */
.squad-header-actions .whatsapp-btn svg {
    stroke: white !important;
}

.squad-header-actions .btn-icon:hover {
    background: var(--bg-hover);
}

.date-input {
    font-size: var(--text-sm);
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    max-width: 210px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    line-height: 1.4;
}

/* Shared date/time input polish */
input[type="date"],
input[type="datetime-local"] {
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    min-height: 38px;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.5;
    padding: 2px;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.8;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
}

.btn-icon:hover {
    transform: none;
}

/* Football Pitch */
.pitch {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    overflow: hidden;
    background:
        repeating-linear-gradient(
            180deg,
            var(--pitch-grass-1) 0px, var(--pitch-grass-1) 28px,
            var(--pitch-grass-2) 28px, var(--pitch-grass-2) 56px
        );
    border: 3px solid var(--pitch-border);
}

/* Fullscreen pitch modal */
.pitch-modal .pitch-modal-content {
    max-width: 600px;
    width: 95vw;
    max-height: 95vh;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
}
.pitch-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.pitch-modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
}
.pitch-expanded {
    aspect-ratio: 3 / 4;
    min-height: 360px;
}
.pitch-expanded .pitch-badge-circle {
    width: 52px;
    height: 52px;
    font-size: 0.8rem;
}
.pitch-expanded .pitch-badge-pos {
    font-size: 0.7rem;
}
/* Modal roster list */
.modal-roster {
    margin-top: 1rem;
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
}
.modal-roster-label {
    font-weight: 700;
    font-size: var(--text-sm);
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}
.roster-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}
.roster-row:hover {
    background: var(--bg-surface);
}
.roster-row.selected-swap {
    background: rgba(var(--brand-primary-rgb, 79,70,229), 0.15);
    outline: 2px solid var(--brand-primary);
}
.roster-row.roster-sub {
    opacity: 0.7;
}
.roster-pos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 22px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.roster-pos-gk  { background: #e6a817; }
.roster-pos-def { background: #2d7dd2; }
.roster-pos-mid { background: #45a049; }
.roster-pos-str { background: #d9534f; }
.roster-pos-sub { background: var(--text-muted); }
.roster-name {
    flex: 1;
    font-weight: 600;
    font-size: var(--text-sm);
}
.roster-positions {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Pitch line markings */
.pitch::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent calc(50% - 1px), var(--pitch-line) calc(50% - 1px), var(--pitch-line) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(180deg, transparent 4%, var(--pitch-line-2) 4%, var(--pitch-line-2) 4.5%, transparent 4.5%),
        linear-gradient(180deg, transparent 82%, var(--pitch-line-2) 82%, var(--pitch-line-2) 82.5%, transparent 82.5%);
    pointer-events: none;
    z-index: 1;
}

/* Centre circle */
.pitch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28%;
    aspect-ratio: 1;
    border: 2px solid var(--pitch-line-2);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.pitch-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.pitch-lines::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18%;
    width: 64%;
    height: 18%;
    border: 2px solid var(--pitch-line-2);
    border-top: none;
    border-radius: 0 0 4px 4px;
}

.pitch-lines::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18%;
    width: 64%;
    height: 18%;
    border: 2px solid var(--pitch-line-2);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

/* Position rows on pitch */
.pitch-row {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6%;
    z-index: 2;
    pointer-events: none;
}

.pitch-row-str { top: 6%; }
.pitch-row-mid { top: 35%; }
.pitch-row-def { top: 62%; }
.pitch-row-gk  { top: 84%; }

.pitch-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    transition: transform var(--transition-fast);
}

.pitch-badge:active {
    transform: scale(0.93);
}

.pitch-badge-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--badge-bg);
    color: var(--text-primary);
    font-size: 0.62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    border: 2px solid var(--badge-border);
    padding: 2px;
    word-break: break-word;
    overflow: hidden;
}

.pitch-badge-pos {
    font-size: 0.55rem;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    margin-top: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pitch-badge.selected-swap .pitch-badge-circle {
    background: var(--swap-bg);
    border-color: var(--swap-border);
    box-shadow: 0 0 0 3px rgba(249,168,37,0.5), 0 2px 6px rgba(0,0,0,0.25);
}

.pitch-badge-empty {
    cursor: pointer;
}
.pitch-badge-empty .pitch-badge-circle {
    background: rgba(255,255,255,0.25);
    border: 2px dashed rgba(255,255,255,0.5);
    box-shadow: none;
    color: rgba(255,255,255,0.6);
    font-size: var(--text-xs);
    transition: border-color 0.15s, background 0.15s;
}
.pitch-badge-empty:hover .pitch-badge-circle {
    border-color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.35);
}

/* Subs section */
.subs-section {
    margin-top: 0.6rem;
    padding: 0.5rem;
    background: var(--subs-bg);
    border-radius: var(--radius-sm);
}

.subs-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.subs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--bg-surface);
    padding: 0.3rem 0.55rem;
    border-radius: 20px;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.sub-badge:active {
    background: var(--bg-hover);
}

.sub-badge .sub-pos {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 600;
}

.sub-badge.selected-swap {
    background: var(--swap-bg);
    border-color: var(--swap-border);
}

/* Drag and drop states */
.pitch-badge.dragging,
.sub-badge.dragging {
    opacity: 0.35;
}

.pitch-badge.drag-over .pitch-badge-circle,
.sub-badge.drag-over {
    outline: 3px solid var(--swap-border);
    outline-offset: 2px;
    background: var(--swap-bg);
}

.pitch-badge[draggable="true"],
.sub-badge[draggable="true"] {
    cursor: grab;
}

.pitch-badge[draggable="true"]:active,
.sub-badge[draggable="true"]:active {
    cursor: grabbing;
}

/* Suggestions panel */
.suggestions-section {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--color-warning-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-warning-border);
}

.suggestions-label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-warning);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.suggestion-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

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

.suggestion-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.suggestion-info strong {
    font-size: var(--text-sm);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-meta {
    font-size: 0.68rem;
    color: var(--text-tertiary);
}

.suggestion-for {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-tertiary);
    background: var(--suggestion-tag-bg);
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.suggestion-for.suggestion-match {
    background: var(--suggestion-match-bg);
    color: var(--suggestion-match-text);
}

.btn-small {
    padding: 0.2rem 0.5rem;
    font-size: var(--text-xs);
    flex-shrink: 0;
}

/* Pitch drop target highlight */
.pitch.drag-over-pitch {
    outline: 3px dashed rgba(255,255,255,0.7);
    outline-offset: -3px;
}

/* Touch drag clone */
.touch-drag-clone {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.85;
    transform: scale(1.1);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.swap-hint {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

.commit-bar {
    margin-top: 1.25rem;
    text-align: center;
}

.squads-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

#availability-section h2 {
    margin-bottom: 0.75rem;
}

/* Team list fallback (hide, pitch replaces it) */
.team-list {
    display: none;
}

/* Analytics Panel */
.analytics-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.analytics-panel:empty {
    display: none;
}

.analytics-panel h3 {
    font-size: var(--text-base);
    margin-bottom: 0.6rem;
    color: var(--text-primary);
}

.pos-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.pos-bar-label {
    width: 75px;
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
}

.pos-bar-track {
    flex: 1;
    height: 22px;
    background: var(--bar-track);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}

.pos-bar-fill-a, .pos-bar-fill-b, .pos-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    color: white;
    font-weight: 600;
    min-width: 0;
    transition: width 0.3s;
}
.pos-bar-fill-a { background: var(--color-success); }
.pos-bar-fill-b { background: var(--color-info); }

.pos-bar-count {
    width: 30px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.analytics-legend {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}

.legend-dot.a { background: var(--color-success); }
.legend-dot.b { background: var(--color-info); }

.analytics-warning {
    color: var(--color-error);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-top: 0.5rem;
}

.analytics-warning-amber {
    color: var(--color-warning);
    font-size: var(--text-sm);
    margin-top: 0.3rem;
}

/* Squad balance table */
.balance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin-top: 0.5rem;
}

.balance-table th,
.balance-table td {
    padding: 0.35rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border-table);
}

.balance-table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
}

.balance-table td:first-child,
.balance-table th:first-child {
    text-align: left;
}

.balance-table .warning-cell {
    color: var(--color-error);
    font-weight: 600;
}

.avail-summary {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* History Tab */
.history-subtitle {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

.section-gap {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.appearance-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.appearance-table th,
.appearance-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-table);
    font-size: var(--text-sm);
}

.appearance-table th {
    background: var(--th-bg);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.appearance-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

.appearance-table th.sortable:hover {
    background: var(--border-light);
}

.sort-arrow {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: var(--text-xs);
    opacity: 0.5;
}

.sortable:hover .sort-arrow {
    opacity: 1;
}

.appearance-bar-track {
    height: 16px;
    background: var(--bar-track);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}

.appearance-bar-fill {
    height: 100%;
    background: var(--color-success);
    border-radius: 3px;
    transition: width 0.3s;
}

.appearance-low {
    background: var(--color-warning-row);
}

.appearance-low td {
    color: var(--color-warning);
}

.match-history-card {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.match-history-info {
    font-size: var(--text-sm);
}

.match-history-info strong {
    font-size: var(--text-base);
}

.match-history-info .match-meta {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.match-history-actions {
    display: flex;
    gap: 0.4rem;
}

/* Confirm dialog */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    padding: 1rem;
}

.confirm-box {
    background: var(--popup-bg);
    border: var(--popup-border);
    color: var(--popup-text);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    max-width: 340px;
    text-align: center;
    box-shadow: var(--popup-shadow);
    animation: modal-scale-in var(--transition-normal) ease-out;
}

.confirm-box p {
    margin-bottom: 1rem;
    color: var(--popup-text);
}

.confirm-box .btn {
    margin: 0 0.25rem;
}

#load-previous {
    max-width: 180px;
    font-size: var(--text-sm);
    background: var(--bg-input);
    color: var(--text-primary);
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 80px;
    right: 1rem;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    background: var(--popup-bg);
    border: var(--popup-border);
    color: var(--popup-text);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--popup-shadow);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 260px;
    max-width: 380px;
    pointer-events: auto;
    animation: toast-in var(--transition-normal) ease-out;
    border-left: 4px solid var(--color-info);
}

.toast-success { border-left-color: var(--color-success); }
.toast-error { border-left-color: var(--color-error); }
.toast-warning { border-left-color: var(--color-warning); }

.toast-icon { font-size: 1.1rem; flex-shrink: 0; }
.toast-message { flex: 1; font-size: 0.82rem; }

.toast-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.toast-close:hover { opacity: 1; transform: none; box-shadow: none; }

@keyframes toast-in {
    from { transform: translateX(calc(100% + 1rem)); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast.toast-out {
    animation: toast-out var(--transition-normal) ease-in forwards;
}

@keyframes toast-out {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(calc(100% + 1rem)); opacity: 0; }
}

/* Loading spinner */
.spinner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 450;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-light);
    border-top-color: var(--brand-primary-light);
    border-radius: 50%;
    animation: spinner-rotate 0.7s linear infinite;
}

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

/* Spin animation for icons */
.spin {
    animation: spinner-rotate 1s linear infinite;
}

/* Print styles */
@media print {
    header, .toolbar, .theme-toggle, .modal, .toast-container,
    .spinner-overlay, .search-filter-bar, .commit-bar, .swap-hint,
    .suggestions-section, .player-actions, .inline-positions,
    .match-history-actions, .squad-header-actions .btn-icon,
    .mode-config, #availability-section, .filter-chips,
    .passcode-gate, .squads-header .btn, .btn { display: none !important; }

    body { background: white; color: black; font-size: 11pt; }
    main { max-width: 100%; padding: 0; margin: 0; }

    .squads-grid { display: block; }
    .squad-card {
        page-break-inside: avoid;
        margin-bottom: 1.5rem;
        border: 2px solid #333;
        box-shadow: none;
        background: white;
    }
    .squad-card-header h3 {
        font-size: 13pt;
        font-weight: bold;
        color: black;
    }
    .pitch {
        background: repeating-linear-gradient(180deg, #ddd 0px, #ddd 28px, #eee 28px, #eee 56px) !important;
        border: 2px solid #333;
    }
    .pitch-badge-circle {
        background: white !important;
        border: 2px solid #333 !important;
        box-shadow: none !important;
        color: black !important;
    }
    .pitch-badge-pos { color: black !important; text-shadow: none !important; }
    .subs-section { background: #f5f5f5; border: 1px solid #333; }
    .sub-badge { border: 1px solid #333; background: white; color: black; }
    .appearance-table, .balance-table { border: 1px solid #333; }
    .appearance-table th, .appearance-table td,
    .balance-table th, .balance-table td { border: 1px solid #999; padding: 0.4rem; color: black; }
    .squads-header { display: block; }
    .squads-header h2 { color: black; }
}

@media (max-width: 768px) {
    .inline-positions { display: none; }
    .search-box { max-width: none; }
}

@media (max-width: 600px) {
    .header-actions { gap: 0.35rem; }
    .header-actions .btn-small { padding: 0.5rem 0.6rem; font-size: 0.8rem; min-height: 44px; }
    .theme-toggle { width: 44px; height: 44px; font-size: 1.1rem; }
    .squad-selector-wrapper { margin-right: 0; }
    .squad-selector-trigger { padding: 0.5rem 0.6rem; font-size: 0.8rem; min-height: 44px; }
    .btn, .btn-small, .mode-btn, .filter-chip { min-height: 44px; }
    .nav-btn { min-height: 44px; padding: 0.5rem 0.75rem; }
    .squads-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    .availability-columns {
        grid-template-columns: 1fr;
    }
    .squad-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
    .date-input {
        max-width: 100%;
    }
    .balance-table {
        font-size: var(--text-xs);
    }
    .balance-table th,
    .balance-table td {
        padding: 0.25rem 0.3rem;
    }
    .pitch-badge-circle {
        width: 48px;
        height: 48px;
        font-size: 0.68rem;
    }
    .search-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-group {
        justify-content: center;
    }
    /* Player row: wrap actions to second line */
    .player-row {
        flex-wrap: wrap;
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
    }
    .player-row .player-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    /* Squad card header: full-width date input */
    .date-input {
        width: 100%;
    }
    .squad-header-actions {
        flex-wrap: wrap;
        width: 100%;
    }
    /* Squads grid: remove max-width constraint */
    .squads-grid {
        max-width: none;
    }
}

@media (max-width: 400px) {
    .squad-selector-trigger {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pitch-badge-circle {
        width: 40px;
        height: 40px;
        font-size: 0.58rem;
    }
}

/* =========================================================================
   AUTH & NEW UI STYLES
   ========================================================================= */

/* Auth divider */
.auth-divider {
    text-align: center;
    margin: 1rem 0;
    position: relative;
}
.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-light);
}
.auth-divider span {
    background: var(--bg-surface);
    padding: 0 0.75rem;
    position: relative;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Squad selector dropdown */
.squad-selector-wrapper {
    position: relative;
    margin-right: 0.5rem;
}
.squad-selector-trigger {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
    font-size: var(--text-sm);
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.squad-selector-trigger:hover {
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    border-color: var(--brand-primary);
}
.breadcrumb-club {
    color: var(--text-muted);
    font-weight: 400;
}
.breadcrumb-sep {
    color: var(--text-muted);
    font-size: 1rem;
    margin: 0 0.1rem;
}
.breadcrumb-squad {
    font-weight: 600;
    color: var(--brand-primary);
}
.breadcrumb-arrow {
    font-size: 0.55rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
    transition: transform 0.2s;
}
.squad-dropdown.open + .squad-selector-trigger .breadcrumb-arrow,
.squad-dropdown.open ~ .breadcrumb-arrow {
    transform: rotate(180deg);
}

/* Dropdown menu */
.squad-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--popup-bg);
    border: var(--popup-border);
    color: var(--popup-text);
    border-radius: var(--radius-md);
    box-shadow: var(--popup-shadow);
    z-index: 200;
    overflow: hidden;
    animation: dropdown-in 0.15s ease-out;
}
.squad-dropdown.open {
    display: block;
}
@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.squad-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--popup-text);
    transition: background 0.1s;
}
.squad-dropdown-item:hover {
    background: var(--popup-hover);
}
.squad-dropdown-item.active {
    background: var(--popup-hover);
    font-weight: 600;
}
.squad-dropdown-item.active .dropdown-check {
    color: var(--brand-primary);
    margin-left: auto;
}
.squad-dropdown-clubhouse {
    font-weight: 600;
    color: var(--brand-primary);
}
.squad-dropdown-divider {
    height: 1px;
    background: var(--popup-divider);
    margin: 0;
}
.squad-dropdown-loading {
    padding: 0.75rem 1rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.dropdown-icon {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
}

/* Account Avatar Menu */
.account-avatar-wrapper {
    position: relative;
}
.account-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: white;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
    line-height: 1;
    letter-spacing: 0.02em;
}
.account-avatar:hover {
    background: rgba(255,255,255,0.3);
}
.account-avatar [data-lucide] {
    width: 18px;
    height: 18px;
}
.account-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: var(--popup-bg);
    border: var(--popup-border);
    color: var(--popup-text);
    border-radius: var(--radius-md);
    box-shadow: var(--popup-shadow);
    z-index: 1000;
    overflow: hidden;
    animation: dropdown-in 0.15s ease-out;
}
.account-menu.open {
    display: block;
}
.account-menu-header {
    padding: 1rem;
    border-bottom: 1px solid var(--popup-divider);
}
.account-menu-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--popup-text);
    margin-bottom: 0.15rem;
}
.account-menu-email {
    font-size: 0.75rem;
    color: var(--popup-text-secondary);
    margin-bottom: 0.5rem;
    word-break: break-all;
}
.account-menu-role {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
}
.account-menu-role.role-admin { background: #e8f5e9; color: #2e7d32; }
.account-menu-role.role-manager { background: #e3f2fd; color: #1565c0; }
.account-menu-role.role-viewer { background: #eceff1; color: #546e7f; }
.account-menu-role.role-parent { background: #f3e5f5; color: #6a1b9a; }
.account-menu-divider {
    height: 1px;
    background: var(--popup-divider);
    margin: 0;
}
.account-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--popup-text);
    transition: background 0.1s;
    border: none;
    background: none;
    width: 100%;
    font-family: inherit;
    text-align: left;
}
.account-menu-item:hover {
    background: var(--popup-hover);
}
.account-menu-item [data-lucide] {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.account-menu-item.danger {
    color: var(--danger);
}
.account-menu-item.danger [data-lucide] {
    color: var(--danger);
}
/* Dark mode toggle row */
.account-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.account-menu-toggle [data-lucide] {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.account-menu-toggle .toggle-label {
    flex: 1;
}
.toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--border-light);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    padding: 0;
    flex-shrink: 0;
}
.toggle-switch.active {
    background: var(--brand-primary);
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch.active::after {
    transform: translateX(16px);
}

/* Player Picker (searchable player selector) */
.player-picker-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}
.player-picker-squad {
    flex: 0 0 auto;
    min-width: 120px;
    max-width: 160px;
}
.player-picker-search-wrap {
    flex: 1;
    position: relative;
}
.player-picker-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
}
.player-picker-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}
.player-picker-results {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 100;
}
.player-picker-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background 0.1s;
}
.player-picker-item:hover {
    background: var(--bg-elevated);
}
.player-picker-item-name {
    font-weight: 500;
    color: var(--text-primary);
}
.player-picker-item-squad {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 0.5rem;
}
.player-picker-empty {
    padding: 0.6rem 0.75rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
}
.player-picker-selected {
    margin-top: 0.5rem;
}
.player-picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.player-picker-chip small {
    color: var(--text-muted);
    font-weight: 400;
}
.player-picker-remove {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    padding: 0 0.15rem;
    transition: color 0.1s;
}
.player-picker-remove:hover {
    color: var(--danger);
}

/* Club Dashboard */
#club-dashboard {
    min-height: 100vh;
    background: var(--bg-primary);
}
.club-dashboard-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

/* Hero banner */
.dashboard-hero {
    background: var(--brand-gradient);
    padding: 2.5rem 2rem 2rem;
    margin-bottom: 1.5rem;
}
.dashboard-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.dashboard-hero-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.dashboard-crest {
    font-size: 2.5rem;
    line-height: 1;
    background: rgba(255,255,255,0.15);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dashboard-club-name {
    color: #fff;
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
}
.dashboard-welcome {
    color: rgba(255,255,255,0.85);
    margin: 0.15rem 0 0;
    font-size: var(--text-base);
}
.dashboard-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.dashboard-hero .btn-secondary {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}
.dashboard-hero .btn-secondary:hover {
    background: rgba(255,255,255,0.25);
}
.dashboard-hero .theme-toggle {
    color: #fff;
}

/* Stats row */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.dashboard-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    text-align: center;
}
.dashboard-stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--brand-primary);
    line-height: 1.2;
}
[data-theme="dark"] .dashboard-stat-number {
    color: var(--color-success);
}
.dashboard-stat-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

/* Toolbar & section title */
.dashboard-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.dashboard-section-title {
    color: var(--text-secondary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem 0;
    font-weight: 600;
}

/* Squad cards */
.squad-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}
.dashboard-squad-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    overflow: hidden;
}
.dashboard-squad-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-color: var(--brand-primary);
}
[data-theme="dark"] .dashboard-squad-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.squad-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--brand-gradient);
    color: white;
}
.dashboard-squad-card h3 {
    margin: 0;
    color: white;
    font-size: 1.15rem;
    font-weight: 700;
}
.squad-card-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.squad-card-stat {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.2);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-md);
    font-weight: 500;
}
.squad-card-chevron {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.6);
    font-weight: 300;
    line-height: 1;
}
.squad-card-meta {
    color: rgba(255,255,255,0.65);
    font-size: var(--text-xs);
    margin: 0.25rem 0 0;
}
.squad-card-actions {
    padding: 0.75rem 1.5rem;
    display: flex;
    gap: 0.5rem;
    background: var(--bg-surface);
}

/* Footer */
.dashboard-footer {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-xs);
    margin-top: 3rem;
    padding: 1rem 0;
}

/* Mobile */
@media (max-width: 600px) {
    .dashboard-hero { padding: 1.5rem 1rem; }
    .dashboard-crest { width: 44px; height: 44px; font-size: 1.8rem; }
    .dashboard-club-name { font-size: 1.3rem; }
    .dashboard-stats { grid-template-columns: 1fr; }
    .club-dashboard-content { padding: 0 1rem 1.5rem; }
}

/* Create Club Wizard */
/* Onboarding Wizard */
.onboarding-wizard {
    max-width: 520px;
    margin: 2rem auto;
    padding: 1rem;
}
.wizard-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}
.wizard-progress {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.wizard-progress-step {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--border-light);
    transition: background 0.3s;
    cursor: default;
}
.wizard-progress-step.completed {
    background: var(--brand-primary);
    cursor: pointer;
}
.wizard-progress-step.current {
    background: var(--brand-primary-light, var(--brand-primary));
}
.wizard-step-label {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-bottom: 1.5rem;
}
.wizard-step-title {
    text-align: center;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.wizard-step-desc {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-bottom: 1.5rem;
}
.wizard-card .form-group {
    text-align: left;
}
.wizard-logo-area {
    text-align: center;
    margin-bottom: 1rem;
}
.wizard-logo-preview {
    width: 120px;
    height: 120px;
    margin: 0 auto 0.75rem;
    border: 2px dashed var(--border-medium);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
.wizard-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wizard-logo-preview .placeholder-text {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}
.wizard-logo-preview .remove-logo {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--color-error);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wizard-colour-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
.wizard-colour-row .form-group {
    flex: 1;
}
.wizard-colour-row input[type="color"] {
    width: 100%;
    height: 48px;
}
.wizard-colour-preview {
    height: 48px;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
}
.wizard-squad-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
    cursor: pointer;
    color: var(--brand-primary);
    font-weight: 600;
    font-size: var(--text-sm);
}
.wizard-squad-2 {
    animation: wizardSlideDown 0.3s ease;
}
@keyframes wizardSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.wizard-invite-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.wizard-invite-row {
    display: flex;
    gap: 0.5rem;
    align-items: end;
}
.wizard-invite-row .form-group {
    flex: 2;
    margin-bottom: 0;
}
.wizard-invite-row .form-group.role-group {
    flex: 1;
}
.wizard-invite-row .remove-invite {
    padding: 0.5rem 0.65rem;
    background: var(--color-error);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-bottom: 0;
    flex-shrink: 0;
}
.wizard-add-invite {
    width: 100%;
    background: none;
    color: var(--brand-primary);
    border: 2px dashed var(--border-medium);
    padding: 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-sm);
    transition: border-color 0.2s;
}
.wizard-add-invite:hover {
    border-color: var(--brand-primary);
}
.wizard-nav {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.wizard-nav .btn {
    flex: 1;
}
.wizard-nav .btn-back {
    flex: 0 0 auto;
    min-width: 80px;
}
.wizard-skip {
    display: block;
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    margin-top: 0.75rem;
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: none;
}
.wizard-skip:hover {
    color: var(--text-secondary);
    text-decoration: underline;
}
@media (max-width: 600px) {
    .onboarding-wizard { margin: 1rem auto; padding: 0.5rem; }
    .wizard-card { padding: 1.25rem 1rem; }
    .wizard-invite-row { flex-direction: column; }
    .wizard-invite-row .remove-invite { align-self: flex-end; }
}

/* Users table */
.users-toolbar {
    margin-bottom: 1rem;
}
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.users-table th,
.users-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-table);
}
.users-table th {
    background: var(--bg-elevated);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
}
.users-table tr:last-child td {
    border-bottom: none;
}
.role-select {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-medium);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 600;
}
.status-active {
    background: var(--grade-a-bg);
    color: var(--grade-a-text);
}
.status-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

/* Role badges */
.role-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}
.role-admin { background: #dbeafe; color: #1e40af; }
.role-manager { background: #d1fae5; color: #065f46; }
.role-viewer { background: #f3f4f6; color: #374151; }
.role-parent { background: #fef3c7; color: #92400e; }

/* Compliance badges & summary */
.compliance-summary {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.compliance-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    min-width: 100px;
}
.compliance-num {
    font-size: 1.75rem;
    font-weight: 700;
}
.compliance-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.compliance-good { background: rgba(16, 185, 129, 0.1); }
.compliance-good .compliance-num { color: #059669; }
.compliance-warning { background: rgba(245, 158, 11, 0.1); }
.compliance-warning .compliance-num { color: #d97706; }
.compliance-danger { background: rgba(239, 68, 68, 0.1); }
.compliance-danger .compliance-num { color: #dc2626; }

.compliance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.compliance-badge i { width: 18px; height: 18px; }
.compliance-badge.compliance-good { background: rgba(16, 185, 129, 0.15); color: #059669; }
.compliance-badge.compliance-warning { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.compliance-badge.compliance-danger { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.compliance-badge.compliance-na { background: var(--bg-hover); color: var(--text-muted); font-size: 0.7rem; width: auto; height: auto; padding: 0.2rem 0.5rem; border-radius: 4px; }

/* Member profile view */
.member-profile {
    max-width: 900px;
}
.member-profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.member-profile-header h2 {
    margin: 0;
    flex: 1;
}
.member-profile-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.member-profile-section h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 1.1rem;
}
.member-profile-section h3 i {
    width: 20px;
    height: 20px;
    color: var(--brand-primary);
}
.section-header-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.section-header-with-action h3 {
    margin: 0;
}
.member-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.member-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.member-info-item label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.member-info-item span {
    font-size: 0.95rem;
}
.member-role-select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    width: auto;
}
.btn-link {
    background: none;
    border: none;
    color: var(--brand-primary);
    padding: 0;
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
}
.btn-link:hover {
    color: var(--brand-hover);
}

/* Credentials checklist */
.credentials-checklist {
    margin-bottom: 1.5rem;
}
.credentials-checklist h4 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.credential-check-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}
.credential-check-item i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.credential-check-item .cred-name {
    font-weight: 500;
    flex: 1;
}
.credential-check-item .cred-status {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.credential-check-item.cred-valid {
    background: rgba(16, 185, 129, 0.08);
}
.credential-check-item.cred-valid i { color: #059669; }
.credential-check-item.cred-expiring {
    background: rgba(245, 158, 11, 0.08);
}
.credential-check-item.cred-expiring i { color: #d97706; }
.credential-check-item.cred-expired,
.credential-check-item.cred-missing {
    background: rgba(239, 68, 68, 0.08);
}
.credential-check-item.cred-expired i,
.credential-check-item.cred-missing i { color: #dc2626; }

/* Credentials table */
.credentials-list h4 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.credentials-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.credentials-table th,
.credentials-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.credentials-table th {
    background: var(--bg-hover);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.credentials-table tr:last-child td {
    border-bottom: none;
}
.cred-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.cred-badge.cred-valid { background: #d1fae5; color: #065f46; }
.cred-badge.cred-expiring { background: #fef3c7; color: #92400e; }
.cred-badge.cred-expired { background: #fee2e2; color: #991b1b; }

@media (max-width: 600px) {
    .compliance-summary {
        flex-direction: column;
    }
    .compliance-stat {
        flex-direction: row;
        justify-content: space-between;
        padding: 0.75rem 1rem;
    }
    .member-info-grid {
        grid-template-columns: 1fr;
    }
    .credentials-table {
        font-size: 0.85rem;
    }
    .credentials-table th:last-child,
    .credentials-table td:last-child {
        text-align: right;
    }
}

/* Audit table */
.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.audit-table th,
.audit-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-table);
}
.audit-table th {
    background: var(--bg-elevated);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
}
.audit-table tr:last-child td {
    border-bottom: none;
}
.audit-action-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: var(--text-xs);
    background: var(--grade-b-bg);
    color: var(--grade-b-text);
}
.audit-detail {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Responsive tables */
@media (max-width: 768px) {
    .users-table,
    .audit-table {
        display: block;
        overflow-x: auto;
    }
}

/* ---- Player Profile Panel ---- */
.profile-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    pointer-events: none;
}
.profile-panel.open {
    pointer-events: auto;
}
.profile-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.3s;
}
.profile-panel.open .profile-panel-backdrop {
    opacity: 1;
}
.profile-panel-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100%;
    background: var(--popup-bg);
    border-left: var(--popup-border);
    color: var(--popup-text);
    box-shadow: -4px 0 24px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 1.5rem;
}
.profile-panel.open .profile-panel-content {
    transform: translateX(0);
}
.profile-panel-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.profile-edit-top-btn {
    margin-right: auto;
    background: var(--brand-primary);
    color: #fff;
    border: none;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: opacity 0.15s;
}
.profile-edit-top-btn:hover {
    opacity: 0.85;
}
.profile-close-btn {
    background: var(--bg-input);
    border: 1px solid var(--border);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.profile-close-btn:hover {
    background: var(--color-error);
    color: #fff;
    border-color: var(--color-error);
}
.profile-hero {
    text-align: center;
    margin-bottom: 1.5rem;
}
.profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    cursor: default;
    border: 3px solid var(--border-light);
    transition: box-shadow 0.2s;
}
.profile-avatar:hover {
    box-shadow: 0 0 0 3px var(--brand-primary-light);
}
.profile-avatar .profile-upload-hint {
    display: none;
}
.profile-name {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
    color: var(--text-primary);
}
.profile-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-light);
}
.profile-section:last-of-type {
    border-bottom: none;
}
.profile-section-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-text);
    margin: 0 0 0.75rem;
    font-weight: 700;
}

/* Profile tabs */
.profile-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-light);
    margin: 0 -1.25rem 1rem;
    padding: 0 1.25rem;
}
.profile-tab {
    flex: 1;
    padding: 0.6rem 0.5rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--popup-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    text-align: center;
}
.profile-tab:hover {
    color: var(--popup-text);
}
.profile-tab.active {
    color: var(--brand-primary, var(--popup-text));
    border-bottom-color: var(--brand-primary, var(--popup-text));
}
.profile-tab-content {
    display: none;
}
.profile-tab-content.active {
    display: block;
}

/* Squads popup */
.profile-squads-popup {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 10;
    background: var(--popup-bg);
    border: var(--popup-border);
    border-radius: var(--radius-md);
    box-shadow: var(--popup-shadow);
    padding: 0.5rem 0;
    min-width: 200px;
    max-width: 280px;
}
.profile-squads-popup-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--popup-text-secondary);
    padding: 0.25rem 0.75rem 0.5rem;
    border-bottom: 1px solid var(--popup-divider);
}
.profile-squads-popup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
}
.profile-squads-popup-row + .profile-squads-popup-row {
    border-top: 1px solid var(--popup-divider);
}
.profile-squads-popup-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--popup-text);
}
.profile-squads-popup-date {
    font-size: var(--text-xs);
    color: var(--popup-text-secondary);
    white-space: nowrap;
}

.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border-light);
}
.profile-row:last-child {
    border-bottom: none;
}
.profile-label {
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
}
.profile-value {
    font-weight: 600;
    text-align: right;
    font-size: 0.88rem;
    color: var(--text-primary);
}
.profile-value a {
    color: var(--brand-text);
    text-decoration: none;
    font-weight: 600;
}
.profile-value a:hover {
    text-decoration: underline;
}
.profile-medical {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: 1.5;
}
.profile-actions {
    margin-top: 1.5rem;
    text-align: center;
}
.profile-actions .btn {
    width: 100%;
}

/* Profile membership cards */
.profile-membership-summary {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.profile-membership-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 3px solid #ff9800;
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
}
.profile-membership-card.paid { border-left-color: #4caf50; }
.profile-membership-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.profile-membership-name { font-weight: 600; font-size: var(--text-sm); }
.profile-membership-amount { font-weight: 700; color: var(--brand-primary); font-size: var(--text-sm); }
.profile-membership-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
}
.profile-membership-detail { font-size: var(--text-xs); color: var(--text-tertiary); }
.pill-unpaid { background: #fff3e0; color: #e65100; }
[data-theme="dark"] .pill-unpaid { background: #2a2218; color: #ff7043; }

/* Mobile: full screen profile */
@media (max-width: 600px) {
    .profile-panel-content {
        width: 100%;
    }
}

/* Profile avatar photo */
.profile-avatar.has-photo {
    padding: 0;
    overflow: hidden;
}
.profile-avatar.clickable {
    cursor: pointer;
    position: relative;
}
.profile-avatar-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    text-align: center;
    font-size: 1rem;
    padding: 0.2rem 0;
    border-radius: 0 0 50% 50%;
    opacity: 0;
    transition: opacity 0.2s;
}
.profile-avatar.clickable:hover .profile-avatar-overlay {
    opacity: 1;
}
.profile-photo-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin: -0.4rem 0 0.5rem;
}
.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.profile-avatar.uploading {
    opacity: 0.5;
    animation: pulse 1s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.3; }
}

/* Player list thumbnails */
.player-thumb-wrap {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}
.player-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.player-thumb-initials {
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: 700;
}

/* ---- Development Notes ---- */
.dev-note-form {
    margin-bottom: 1rem;
}
.dev-note-form-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.dev-note-date,
.dev-note-category {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    min-height: 36px;
}
.dev-note-date { flex: 1; }
.dev-note-category { flex: 1; }
.dev-note-textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-family: inherit;
    background: var(--bg-input);
    color: var(--text-primary);
    resize: vertical;
    margin-bottom: 0.5rem;
}
.dev-note-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}
.dev-note-empty {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    text-align: center;
    padding: 1rem 0;
}
.dev-note-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.dev-note-item {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    background: var(--bg-surface);
}
.dev-note-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.dev-note-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.dev-note-meta {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    flex: 1;
}
.dev-note-delete {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}
.dev-note-delete:hover {
    color: var(--danger);
}
.dev-note-content {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-primary);
}

/* ---- Generation Mode Toggle ---- */
.gen-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: fit-content;
}
.gen-mode-btn {
    padding: 0.35rem 0.75rem;
    border: none;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.gen-mode-btn.active {
    background: var(--brand-primary);
    color: #fff;
}
.gen-mode-btn:not(.active):hover {
    background: var(--bg-hover);
}

.bygrade-selectors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.bygrade-selectors label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-sm);
    font-weight: 500;
}
.bygrade-selectors select {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    background: var(--bg-surface);
}

.gen-total-indicator {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
    padding: 0.25rem 0;
}

/* ---- Settings Tab ---- */
.settings-subnav {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0 1rem;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 1rem;
    overflow-x: auto;
}
.settings-subnav-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.settings-subnav-btn:hover { border-color: var(--text-tertiary); }
.settings-subnav-btn.active {
    background: var(--brand-primary, #059669);
    color: white;
    border-color: var(--brand-primary, #059669);
}
.settings-general-panel {
    max-width: 480px;
}
.settings-general-panel h2 { margin: 0 0 1rem; }
.settings-save-row {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}
.settings-help {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin: 0 0 0.75rem;
}
.settings-grade-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.settings-grade-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}
.settings-grade-item .btn-danger {
    padding: 0.15rem 0.5rem;
    font-size: 1rem;
    line-height: 1;
}
.settings-no-grades {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    font-style: italic;
    margin: 0.5rem 0;
}
.settings-add-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.settings-format-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    background: var(--bg-input);
    color: var(--text-primary);
    margin-top: 0.25rem;
}
.settings-grade-input {
    flex: 1;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    background: var(--bg-input);
    color: var(--text-primary);
}
.settings-presets {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.settings-presets-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Notification Settings */
.settings-notifications-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.settings-notification-section {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.settings-notification-category {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

.settings-notification-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-notification-item {
    padding: 0.75rem;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
}

.settings-notification-item.platform-disabled {
    opacity: 0.6;
}

.settings-notification-item .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.settings-notification-item .notification-name {
    font-weight: 500;
    color: var(--text-primary);
}

.settings-notification-item .notification-desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 0 1.5rem;
    line-height: 1.4;
}

.settings-notification-item .notification-platform-note {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-left: 1.5rem;
    font-style: italic;
}

.settings-notifications-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.settings-notifications-actions .settings-save-status {
    font-size: var(--text-sm);
}

.settings-notifications-actions .settings-save-status.success {
    color: var(--success);
}

.settings-notifications-actions .settings-save-status.error {
    color: var(--danger);
}

/* Attendance Tracker */
.attendance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.attendance-header h3 { margin: 0; color: var(--text-primary); font-size: 1rem; }
.attendance-empty {
    color: var(--text-muted);
    font-size: var(--text-sm);
    padding: 0.5rem 0;
}
.attendance-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.attendance-card.attendance-closed { opacity: 0.7; }
.attendance-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}
.attendance-card-header strong { font-size: 0.95rem; }
.attendance-date { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
.attendance-status-badge {
    font-size: var(--text-xs);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-transform: uppercase;
}
.attendance-status-badge.attendance-open { background: var(--grade-a-bg); color: var(--grade-a-text); }
.attendance-status-badge.attendance-closed { background: var(--bg-elevated); color: var(--text-muted); }
.attendance-stats {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.attendance-stat {
    font-size: var(--text-sm);
    font-weight: 500;
}
.attendance-stat.available { color: var(--color-success); }
.attendance-stat.unavailable { color: var(--color-error); }
.attendance-stat.pending { color: var(--text-muted); }
.attendance-progress {
    height: 4px;
    background: var(--bar-track);
    border-radius: 2px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.attendance-progress-bar {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 2px;
    transition: width 0.3s;
}
.attendance-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

#attendance-section { margin-bottom: 1.25rem; }

/* Player name hover in list */
.player-name[data-profile-id] {
    color: var(--accent);
    transition: opacity 0.15s;
}
.player-name[data-profile-id]:hover {
    opacity: 0.75;
}

/* --- Guardian Cards (player modal) --- */
.guardian-card {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.guardian-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.guardian-card-header .checkbox-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
}
/* btn-icon base defined above — guardian remove variant */

/* Profile panel guardian cards */
.profile-guardian-card {
    background: var(--bg-input);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}
.guardian-primary-badge {
    display: inline-block;
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.4rem;
    vertical-align: middle;
}
.invite-guardian-btn {
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* --- Parent Portal --- */
.parent-portal {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
}
.parent-portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.parent-portal-header h1 {
    font-size: 1.3rem;
    margin: 0;
}
.parent-portal-header p {
    margin: 0.15rem 0 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.parent-portal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1rem;
}
.parent-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 0.6rem 0;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.parent-tab.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

/* Parent player cards */
.parent-player-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.parent-player-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.parent-player-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.parent-player-initials {
    color: #fff;
    font-weight: 600;
    font-size: var(--text-base);
}
.parent-player-info { flex: 1; min-width: 0; }
.parent-player-name {
    font-weight: 600;
    font-size: var(--text-base);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.parent-player-meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.parent-player-stats {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-top: 0.2rem;
}

/* Parent attendance cards */
.parent-attendance-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}
.parent-attendance-header {
    margin-bottom: 0.5rem;
}
.parent-attendance-header strong {
    display: block;
    font-size: var(--text-base);
}
.parent-attendance-meta {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.parent-attendance-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-top: 1px solid var(--border);
}
.parent-attendance-player-name {
    font-weight: 500;
    font-size: var(--text-base);
}
.parent-attendance-btns {
    display: flex;
    gap: 0.4rem;
}
.parent-avail-btn.active { font-weight: 600; }
.btn-success {
    background: var(--brand-primary) !important;
    color: #fff !important;
    border-color: var(--brand-primary) !important;
}
.btn-danger.active {
    background: var(--color-error) !important;
    color: #fff !important;
    border-color: var(--color-error) !important;
}

/* Parent Payments */
.parent-payments-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.25rem 0 0.5rem;
}
.parent-payments-heading:first-child {
    margin-top: 0;
}
.parent-payment-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    gap: 1rem;
}
.parent-payment-card.paid {
    opacity: 0.7;
}
.parent-payment-info {
    flex: 1;
    min-width: 0;
}
.parent-payment-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}
.parent-payment-player {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.parent-payment-player [data-lucide] {
    width: 12px;
    height: 12px;
}
.parent-payment-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}
.parent-payment-amount {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}
.parent-payment-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.parent-payment-status.paid {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
.parent-payment-status.paid [data-lucide] {
    width: 12px;
    height: 12px;
}
.parent-payment-status.unpaid {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
.parent-payments-note {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: 0.75rem;
    font-style: italic;
}

/* =========================================================================
   LOGIN PAGE LAYOUT
   ========================================================================= */
.login-page-layout {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 100vh;
}

.login-hero-side {
    flex: 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.login-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.08) 0%, transparent 40%),
        radial-gradient(circle at 40% 40%, rgba(255,255,255,0.05) 0%, transparent 30%);
    pointer-events: none;
}

.login-hero-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.03) 0%, transparent 70%);
    transform: rotate(-15deg);
}

.login-hero-content {
    max-width: 480px;
    position: relative;
    z-index: 1;
    animation: heroFadeIn 0.6s ease-out;
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.login-hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    color: rgba(255,255,255,0.95);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255,255,255,0.2);
}

.login-hero-logo {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.75rem;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

.login-hero-tagline {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2.5rem;
    line-height: 1.5;
    max-width: 400px;
}

.login-hero-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
}

.login-hero-features li {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    padding: 0.6rem 0;
    line-height: 1.4;
}

.login-hero-features li svg {
    flex-shrink: 0;
    opacity: 0.85;
}

.login-hero-stats {
    display: flex;
    gap: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.login-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.login-hero-stat .stat-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
}

.login-hero-stat .stat-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Trusted clubs strip */
.login-trusted-strip {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.trusted-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.trusted-logos {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.trusted-logo {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.2s, background 0.2s;
}

.trusted-logo:hover {
    transform: scale(1.1);
    background: rgba(255,255,255,0.15);
}

.trusted-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

/* Testimonial */
.login-testimonial {
    margin-top: 2rem;
    padding: 1.25rem;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    border-left: 3px solid rgba(255,255,255,0.3);
}

.login-testimonial blockquote {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
    font-style: italic;
    line-height: 1.5;
    margin: 0 0 0.75rem 0;
}

.login-testimonial blockquote::before {
    content: '"';
    font-size: 1.5rem;
    color: rgba(255,255,255,0.4);
    margin-right: 0.25rem;
}

.testimonial-author {
    font-size: 0.85rem;
}

.testimonial-author #testimonial-name {
    color: #fff;
    font-weight: 600;
}

.testimonial-author #testimonial-role {
    color: rgba(255,255,255,0.6);
}

.testimonial-author #testimonial-role::before {
    content: ' · ';
}

/* Trust messages */
.login-trust-messages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.trust-message {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.trust-message svg {
    width: 14px;
    height: 14px;
    color: var(--color-success);
}

/* Count-up animation */
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-number.animate {
    animation: countUp 0.5s ease-out forwards;
}

.login-card-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(255,255,255,0.03);
}

/* Form styling for login */
.passcode-card .form-group {
    margin-bottom: 1rem;
    text-align: left;
}

.passcode-card .form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.passcode-card .form-group input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-size: var(--text-base);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.passcode-card .form-group input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-light);
}

.passcode-card .form-group input::placeholder {
    color: var(--text-muted);
}

.passcode-card .btn-primary {
    margin-top: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: var(--text-base);
    font-weight: 600;
}

.passcode-footer {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-top: 1.25rem;
}

.passcode-footer a {
    color: var(--brand-primary);
    font-weight: 500;
    text-decoration: none;
}

.passcode-footer a:hover {
    text-decoration: underline;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.auth-divider span {
    padding: 0 0.75rem;
}

.passcode-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
    font-size: var(--text-sm);
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-sm);
    margin-top: 1rem;
    text-align: center;
}

@media (max-width: 900px) {
    .login-page-layout {
        flex-direction: column;
    }
    .login-hero-side {
        padding: 2.5rem 1.5rem 2rem;
        flex: none;
    }
    .login-hero-logo {
        font-size: 2.25rem;
    }
    .login-hero-tagline {
        font-size: 1.05rem;
        margin-bottom: 1.5rem;
    }
    .login-hero-features {
        margin-bottom: 1.5rem;
    }
    .login-hero-features li {
        font-size: 0.9rem;
        padding: 0.4rem 0;
    }
    .login-hero-stats {
        gap: 1.5rem;
    }
    .login-hero-stat .stat-number {
        font-size: 1.25rem;
    }
    .login-card-side {
        padding: 0 1rem 2rem;
        background: transparent;
    }
    .passcode-card {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .login-hero-side {
        padding: 2rem 1.25rem 1.5rem;
    }
    .login-hero-badge {
        font-size: 0.65rem;
        padding: 0.35rem 0.7rem;
    }
    .login-hero-logo {
        font-size: 1.75rem;
    }
    .login-hero-tagline {
        font-size: 0.95rem;
    }
    .login-hero-features {
        display: none;
    }
    .login-hero-stats {
        justify-content: space-between;
        gap: 0;
    }
    .passcode-card {
        padding: 2rem 1.5rem 1.75rem;
        border-radius: 1rem;
    }
}

/* =========================================================================
   CLUB HOUSE
   ========================================================================= */
.clubhouse-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.clubhouse-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.clubhouse-title {
    font-size: 1.5rem;
    margin: 0;
    color: var(--text-primary);
}

.clubhouse-welcome {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin: 0.25rem 0 0;
}

.clubhouse-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.clubhouse-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.clubhouse-club-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.clubhouse-club-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    border-color: var(--brand-primary);
}

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

.clubhouse-card-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.clubhouse-card-crest {
    font-size: 2rem;
    width: 48px;
    height: 48px;
    background: var(--bg-elevated);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clubhouse-card-info h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.clubhouse-role-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-md);
    margin-right: 0.5rem;
}

.clubhouse-squad-count {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.clubhouse-card-chevron {
    font-size: 1.5rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.clubhouse-create-btn {
    width: 100%;
}

/* =========================================================================
   WELCOME ONBOARDING
   ========================================================================= */
.welcome-onboarding {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.welcome-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.welcome-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-text);
    margin-bottom: 0.5rem;
}

.welcome-card h2 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.welcome-desc {
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.welcome-btn {
    width: 100%;
    margin-bottom: 1.5rem;
}

.welcome-divider {
    height: 1px;
    background: var(--border-light);
    margin-bottom: 1.5rem;
}

.welcome-invited {
    text-align: left;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.welcome-invited h3 {
    font-size: var(--text-base);
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.welcome-invited p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.welcome-signout {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* =========================================================================
   BREADCRUMB: Club House link
   ========================================================================= */
.breadcrumb-clubhouse {
    color: var(--text-muted);
    font-weight: 400;
    cursor: pointer;
    transition: color 0.15s;
}

.breadcrumb-clubhouse:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

/* =========================================================================
   CLUB SETTINGS PAGE
   ========================================================================= */
/* =========================================================================
   CLUB SETTINGS V2
   ========================================================================= */
.cs-container-v2 {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.5rem 2.5rem;
}

.cs-section-v2 {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.cs-section-header-v2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.cs-section-header-v2 h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

.cs-section-icon {
    font-size: 1.3rem;
}

/* Logo area V2 */
.cs-logo-area-v2 {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.cs-logo-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-size: 2rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.cs-logo-avatar:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(27,94,32,0.15);
}

.cs-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.cs-logo-placeholder {
    font-size: 2rem;
}

.cs-logo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    text-align: center;
    font-size: 0.85rem;
    padding: 0.15rem 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.cs-logo-avatar:hover .cs-logo-overlay { opacity: 1; }

.cs-logo-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cs-logo-hint {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin: 0;
}

/* Form grid */
.cs-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cs-span-full { grid-column: 1 / -1; }

.cs-colour-input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
    cursor: pointer;
}

/* Contact cards V2 */
.cs-contact-card-v2 {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s;
}

.cs-contact-card-v2:hover { border-color: var(--brand-primary); }

.cs-contact-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.cs-contact-role {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-weight: 500;
}

.cs-remove-contact-v2 {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    line-height: 1;
}

.cs-remove-contact-v2:hover { color: var(--color-error); background: rgba(198,40,40,0.08); }

.cs-contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.cs-contact-fields input {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    background: var(--bg-input);
    color: var(--text-primary);
}

.cs-contact-fields input:first-child { grid-column: 1 / -1; }

.cs-empty-state {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--text-tertiary);
}

.cs-empty-state p { margin: 0 0 0.25rem; font-size: var(--text-sm); }
.cs-empty-hint { font-size: var(--text-xs); }

/* Actions bar */
.cs-actions-v2 {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 0.5rem;
}
.cs-status-group {
    padding: 1rem;
    background: var(--card-bg, #f8f9fa);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border, #e0e0e0);
}
.cs-status-group:last-child { margin-bottom: 0; }
.cs-status-heading {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}
.cs-status-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cs-status-item {
    font-size: 0.88rem;
    color: var(--text-secondary, #666);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.cs-status-item[data-goto-tab]:hover {
    background: var(--bg-hover);
}
.cs-status-item.done .cs-status-check { color: #2e7d32; }
.cs-status-item.pending .cs-status-check { color: #bbb; }
.cs-status-action {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--brand-primary);
    font-weight: 500;
}
.cs-status-detail {
    font-size: 0.88rem;
    color: var(--text-secondary, #666);
    margin: 0 0 0.75rem;
}
.cs-status-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .cs-container-v2 { padding: 0 1rem 2rem; }
    .cs-form-grid { grid-template-columns: 1fr; }
    .cs-span-full { grid-column: auto; }
    .cs-logo-area-v2 { flex-direction: column; text-align: center; }
    .cs-contact-fields { grid-template-columns: 1fr; }
}

/* Profile completion banner */
.club-profile-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.club-profile-banner-text {
    font-size: var(--text-sm);
    color: var(--text-primary);
    flex: 1;
    min-width: 200px;
}

.club-profile-banner-actions {
    display: flex;
    gap: 0.5rem;
}

/* Dashboard crest with logo */
.dashboard-crest.has-logo {
    padding: 0;
    overflow: hidden;
}

.dashboard-crest-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Club House crest with logo */
.clubhouse-card-crest.has-logo {
    padding: 0;
    overflow: hidden;
}

.clubhouse-crest-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Parent portal logo */
.parent-portal-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Colour picker inputs */
input[type="color"] {
    width: 100%;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    cursor: pointer;
}

@media (max-width: 600px) {
    .cs-container {
        padding: 1rem;
    }
    .club-profile-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .clubhouse-header-actions { gap: 0.35rem; }
    .clubhouse-header-actions .btn-small { padding: 0.5rem 0.6rem; font-size: 0.8rem; min-height: 44px; }
    .clubhouse-header-actions .theme-toggle { width: 44px; height: 44px; font-size: 1.1rem; }
}

/* =========================================================================
   STRIPE CONNECT & PAYMENTS
   ========================================================================= */
.dashboard-stripe-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

/* --- Connected state --- */
.stripe-connected-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.stripe-connected-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stripe-connected-title h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
}

.stripe-subtitle {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.stripe-icon {
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--grade-a-bg);
}

[data-theme="dark"] .stripe-icon {
    background: #1b3a1e;
}

.stripe-status-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    white-space: nowrap;
}

.stripe-connected { background: #e8f5e9; color: #2e7d32; }
.stripe-pending { background: #fff3e0; color: #e65100; }
.stripe-not-connected { background: #eceff1; color: #546e7a; }

[data-theme="dark"] .stripe-connected { background: #1b3a1e; color: #66bb6a; }
[data-theme="dark"] .stripe-pending { background: #2a2218; color: #ff7043; }
[data-theme="dark"] .stripe-not-connected { background: #1e2428; color: #90a4ae; }

/* Quick action cards */
.stripe-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.stripe-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1rem 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    text-align: center;
}

.stripe-action-card:hover {
    background: var(--bg-hover);
    border-color: var(--brand-primary);
    transform: translateY(-1px);
}

.stripe-action-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.stripe-action-label {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.stripe-action-desc {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* --- Not connected / setup state --- */
.stripe-setup-layout {
    display: flex;
    justify-content: center;
}

.stripe-setup-content {
    text-align: center;
    max-width: 420px;
    padding: 1rem 0;
}

.stripe-setup-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.stripe-setup-content h3 {
    margin: 0 0 0.5rem;
    font-size: var(--text-lg);
}

.stripe-setup-desc {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.stripe-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
    display: inline-block;
}

.stripe-features-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.stripe-feature-check {
    color: var(--color-success);
    font-weight: 700;
    font-size: var(--text-base);
    flex-shrink: 0;
}

.stripe-setup-hint {
    margin: 0.75rem 0 0;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

@media (max-width: 600px) {
    .stripe-quick-actions {
        grid-template-columns: 1fr;
    }
    .stripe-connected-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* Membership cards */
.mm-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mm-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
}

.mm-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mm-card-price {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--brand-primary);
}

.mm-card-desc {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

.mm-card-status {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

.mm-card-status.active { background: #e8f5e9; color: #2e7d32; }
.mm-card-status.inactive { background: #ffebee; color: #c62828; }

[data-theme="dark"] .mm-card-status.active { background: #1b3a1e; color: #66bb6a; }
[data-theme="dark"] .mm-card-status.inactive { background: #2a1a1a; color: #ef5350; }

.mm-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Payments table */
.pv-table-wrap {
    overflow-x: auto;
}

.pv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.pv-table th, .pv-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.pv-table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.payment-status-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

.status-completed { background: #e8f5e9; color: #2e7d32; }
.status-pending { background: #fff3e0; color: #e65100; }
.status-unknown { background: #eceff1; color: #546e7a; }

[data-theme="dark"] .status-completed { background: #1b3a1e; color: #66bb6a; }
[data-theme="dark"] .status-pending { background: #2a2218; color: #ff7043; }
[data-theme="dark"] .status-unknown { background: #1e2428; color: #90a4ae; }

.pv-source-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}
.source-stripe { background: #e3f2fd; color: #1565c0; }
.source-manual { background: #f3e5f5; color: #6a1b9a; }
[data-theme="dark"] .source-stripe { background: #0d2137; color: #64b5f6; }
[data-theme="dark"] .source-manual { background: #2a1a30; color: #ba68c8; }

.pv-method-label {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-left: 0.35rem;
}

@media (max-width: 600px) {
    .pv-table thead { display: none; }
    .pv-table, .pv-table tbody, .pv-table tr, .pv-table td { display: block; width: 100%; }
    .pv-table tr {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }
    .pv-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.3rem 0;
        border: none;
    }
    .pv-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        margin-right: 0.75rem;
        flex-shrink: 0;
    }
}

@media (max-width: 600px) {
    .mm-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* Membership cards V2 */
.mm-card-v2 {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    transition: border-color 0.15s;
}
.mm-card-v2:hover { border-color: var(--brand-primary); }

.mm-card-v2-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.mm-card-v2-info { flex: 1; min-width: 0; }
.mm-card-v2-name { font-weight: 700; font-size: var(--text-base); margin-bottom: 0.15rem; }
.mm-card-v2-desc { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: 0.25rem; }
.mm-card-v2-price { font-size: var(--text-lg); font-weight: 700; color: var(--brand-primary); }

.mm-card-v2-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.mm-card-v2-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mm-status-pill {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}
.pill-active { background: #e8f5e9; color: #2e7d32; }
.pill-inactive { background: #ffebee; color: #c62828; }
[data-theme="dark"] .pill-active { background: #1b3a1e; color: #66bb6a; }
[data-theme="dark"] .pill-inactive { background: #2a1a1a; color: #ef5350; }

@media (max-width: 600px) {
    .mm-card-v2-top { flex-direction: column; }
    .mm-card-v2-bottom { flex-direction: column; align-items: flex-start; }
    .mm-card-v2-actions { width: 100%; }
    .mm-card-v2-actions .btn { flex: 1; text-align: center; }
}

/* Assignment modal */
.assign-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1rem;
}
.assign-tab {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background: none;
    border: none;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.assign-tab:hover { color: var(--text-primary); }
.assign-tab.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

.assign-panel { max-height: 320px; overflow-y: auto; }
.assign-squad-group { margin-bottom: 0.75rem; }
.assign-squad-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}
.assign-player-list { display: flex; flex-direction: column; gap: 0; }
.assign-player-label, .assign-squad-label { padding: 0.35rem 0; }

/* Membership detail — progress bar */
.md-progress-section { margin-bottom: 1.25rem; }
.md-progress-bar {
    height: 10px;
    background: var(--bg-muted, #e0e0e0);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.35rem;
}
.md-progress-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.md-progress-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
}
[data-theme="dark"] .md-progress-bar { background: #2a2a2a; }

/* =========================================================================
   DASHBOARD V2 — REDESIGNED LAYOUT
   ========================================================================= */

/* Hero */
.dashboard-hero-v2 {
    background: var(--brand-gradient);
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.dashboard-hero-v2-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}
.dashboard-hero-v2-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.dashboard-crest-v2 {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
}
.dashboard-crest-v2.has-logo {
    padding: 0;
    overflow: hidden;
    background: white;
}
.dashboard-crest-v2 .dashboard-crest-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.dashboard-club-name-v2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}
.dashboard-welcome-v2 {
    margin: 0.2rem 0 0;
    font-size: var(--text-base);
    color: rgba(255,255,255,0.85);
}
.dashboard-hero-v2-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.btn-hero {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    backdrop-filter: blur(10px);
}
.btn-hero:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-1px);
}

/* Content wrapper */
.club-dashboard-content-v2 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem 2.5rem;
}

/* Stats V2 */
.dashboard-stats-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.dashboard-stat-card-v2 {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s;
}
.dashboard-stat-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--brand-primary);
}
.stat-icon {
    font-size: 1.75rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--brand-primary);
    line-height: 1;
    margin-bottom: 0.15rem;
}
[data-theme="dark"] .stat-number { color: var(--color-success); }
.stat-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* Unified Alerts */
.dashboard-alerts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.dashboard-alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    animation: alertSlideIn 0.3s ease;
}
.dashboard-alert.alert-warning {
    background: #fff8e1;
    border-color: #ffe082;
}
.dashboard-alert.alert-info {
    background: #e3f2fd;
    border-color: #90caf9;
}
[data-theme="dark"] .dashboard-alert.alert-warning { background: #2a2218; border-color: #5d4037; }
[data-theme="dark"] .dashboard-alert.alert-info { background: #0d2638; border-color: #1565c0; }
.alert-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.alert-body { flex: 1; min-width: 0; }
.alert-title {
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}
.alert-message {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}
.alert-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}
.alert-dismiss {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    line-height: 1;
}
.alert-dismiss:hover { color: var(--text-primary); background: rgba(0,0,0,0.05); }
[data-theme="dark"] .alert-dismiss:hover { background: rgba(255,255,255,0.08); }

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

/* Payment Tools (when Stripe connected) */
.payment-tools-section { margin-bottom: 2rem; }
.payment-tools-title {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 600;
    margin: 0 0 0.75rem;
}
.payment-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.payment-tool-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.payment-tool-card:hover {
    border-color: var(--brand-primary);
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.payment-tool-icon { font-size: 1.5rem; line-height: 1; }
.payment-tool-label { font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); }
.payment-tool-desc { font-size: var(--text-xs); color: var(--text-tertiary); }

/* Toolbar V2 */
.dashboard-toolbar-v2 {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

/* Squads section header with toggle */
.squads-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.dashboard-section-title-v2 {
    color: var(--text-secondary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    font-weight: 600;
}
.squad-view-toggle {
    display: flex;
    background: var(--bg-primary);
    padding: 0.2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.squad-view-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 1.1rem;
    padding: 0.4rem 0.65rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    line-height: 1;
}
.squad-view-btn:hover { color: var(--text-primary); }
.squad-view-btn.active {
    background: var(--bg-surface);
    color: var(--brand-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Squad container — switches layout via data-view */
.squad-container {
    display: grid;
    gap: 1rem;
}
.squad-container[data-view="grid"] {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.squad-container[data-view="grid"] .squad-list-view { display: none; }
.squad-container[data-view="grid"] .squad-card-view { display: flex; flex-direction: column; }
.squad-container[data-view="list"] {
    grid-template-columns: 1fr;
}
.squad-container[data-view="list"] .squad-card-view { display: none; }
.squad-container[data-view="list"] .squad-list-view { display: flex; }

/* Card view */
.squad-card-view {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}
.squad-card-view:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-color: var(--brand-primary);
}
[data-theme="dark"] .squad-card-view:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.squad-card-header-v2 {
    background: var(--brand-gradient);
    color: white;
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.squad-card-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: white; }
.squad-card-subtitle { margin: 0.2rem 0 0; font-size: var(--text-xs); color: rgba(255,255,255,0.7); }
.squad-card-header-right { display: flex; align-items: center; gap: 0.75rem; }
.squad-card-count {
    font-size: var(--text-xs);
    font-weight: 600;
    color: white;
    background: rgba(255,255,255,0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}
.squad-card-arrow { font-size: 1.75rem; color: rgba(255,255,255,0.6); font-weight: 300; }
.squad-card-tags {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}
.squad-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.3;
    min-width: 1.4rem;
    text-align: center;
}
.squad-tag-icon {
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    padding: 0.2rem;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}
.squad-tag-icon [data-lucide] { width: 0.85rem; height: 0.85rem; }
.squad-tag-male {
    background: rgba(100,180,255,0.3);
    color: #cce5ff;
}
.squad-tag-female {
    background: rgba(255,130,180,0.3);
    color: #ffd6e7;
}
.squad-tag-age {
    background: rgba(255,255,255,0.25);
    color: white;
}

/* List view */
.squad-list-view {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    transition: all 0.15s;
    align-items: center;
}
.squad-list-view:hover {
    background: var(--bg-hover);
    border-color: var(--brand-primary);
}
.squad-list-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}
.squad-list-info { flex: 1; display: flex; align-items: center; gap: 0.75rem; }
.squad-list-name { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.squad-list-count {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    background: var(--bg-primary);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-weight: 500;
}
.squad-list-actions { display: flex; gap: 0.35rem; }
.squad-list-actions .btn-icon {
    font-size: 0.9rem;
    padding: 0.3rem 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
}
.squad-list-actions .btn-icon:hover { background: var(--bg-primary); color: var(--text-primary); }
.squad-list-arrow { font-size: 1.5rem; color: var(--text-tertiary); line-height: 1; }

/* Footer V2 */
/* --- Command Centre --- */
.command-centre-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.action-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border: none;
    background: var(--bg-surface);
}
.action-item:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.action-item [data-lucide] { width: 1rem; height: 1rem; flex-shrink: 0; }
.action-warning { background: #fff3cd; color: #856404; }
.action-info { background: #d1ecf1; color: #0c5460; }
.action-attention { background: #fce4ec; color: #b71c1c; }
.action-danger { background: #fee2e2; color: #b91c1c; }
.action-skeleton { opacity: 0.6; }
.action-skeleton span {
    background: var(--border);
    border-radius: 4px;
    display: inline-block;
    width: 100px;
    height: 14px;
    animation: skeleton-pulse 1.5s infinite;
}
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
[data-theme="dark"] .action-warning { background: #2a2218; color: #ffd54f; }
[data-theme="dark"] .action-info { background: #0d2137; color: #64b5f6; }
[data-theme="dark"] .action-attention { background: #2a1a1a; color: #ef5350; }
[data-theme="dark"] .action-danger { background: #2a1515; color: #f87171; }

.command-centre-section { margin-bottom: 2rem; }
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.admin-tools-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.fixtures-skeleton { display: flex; flex-direction: column; gap: 0.5rem; }
.skeleton-fixture-item {
    height: 3.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    animation: skeleton-pulse 1.5s infinite;
}

.dashboard-footer-v2,
.app-footer {
    margin-top: 3rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

/* --- Dashboard Main Content Wrapper (for mobile reorder) --- */
.dashboard-main-content {
    display: flex;
    flex-direction: column;
}

/* --- Stats Skeleton Loading --- */
.stat-skeleton {
    animation: skeleton-pulse 1.5s infinite;
}
.skeleton-circle {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--border);
}
.skeleton-line {
    border-radius: 4px;
    background: var(--border);
    height: 14px;
}
.skeleton-line.skeleton-number {
    width: 60px;
    height: 24px;
    margin-bottom: 0.3rem;
}
.skeleton-line.skeleton-label {
    width: 80px;
    height: 12px;
}

/* Stats color coding */
.stat-color-green .stat-number { color: var(--color-success); }
.stat-color-amber .stat-number { color: var(--color-warning); }
.stat-color-red .stat-number { color: var(--color-error); }
[data-theme="dark"] .stat-color-green .stat-number { color: #66bb6a; }
[data-theme="dark"] .stat-color-amber .stat-number { color: #ffa726; }
[data-theme="dark"] .stat-color-red .stat-number { color: #ef5350; }

/* =========================================================================
   DASHBOARD 2026 PREMIUM REDESIGN
   ========================================================================= */

/* --- Quick Actions Grid --- */
.dashboard-quick-actions {
    margin-bottom: 2rem;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.quick-action-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity 0.25s;
}

.quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: var(--brand-primary);
}

.quick-action-card:hover::before {
    opacity: 0.05;
}

.quick-action-card:active {
    transform: translateY(-2px);
}

.quick-action-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(5, 150, 105, 0.1);
    color: var(--brand-primary);
    transition: all 0.25s;
    position: relative;
    z-index: 1;
}

.quick-action-icon svg {
    width: 24px;
    height: 24px;
}

.quick-action-card:hover .quick-action-icon {
    background: var(--brand-primary);
    color: white;
    transform: scale(1.1);
}

.quick-action-label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .quick-action-icon {
    background: rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .quick-action-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* --- Enhanced Stat Cards --- */
.dashboard-stat-card-v2 {
    position: relative;
    overflow: hidden;
}

.dashboard-stat-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity 0.3s;
}

.dashboard-stat-card-v2:hover::before {
    opacity: 1;
}

.stat-number-gradient {
    font-size: 2rem;
    font-weight: 800;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.15rem;
}

[data-theme="dark"] .stat-number-gradient {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Animated counter effect */
.stat-animate {
    animation: statCountUp 0.6s ease-out forwards;
}

@keyframes statCountUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Color-coded stat icon borders */
.stat-color-green .stat-icon { border: 2px solid var(--color-success); }
.stat-color-amber .stat-icon { border: 2px solid var(--color-warning); }
.stat-color-red .stat-icon { border: 2px solid var(--color-error); }

/* --- Premium Fixture Cards --- */
.dashboard-fixture-card-v2 {
    display: flex;
    align-items: stretch;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0.75rem;
}

.dashboard-fixture-card-v2:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--brand-primary);
}

[data-theme="dark"] .dashboard-fixture-card-v2:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.fixture-card-accent {
    width: 4px;
    background: var(--brand-gradient);
    flex-shrink: 0;
}

.fixture-card-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    min-width: 60px;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-light);
}

.fixture-day {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.fixture-date-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-primary);
    line-height: 1;
}

[data-theme="dark"] .fixture-date-num {
    color: var(--color-success);
}

.fixture-card-body {
    flex: 1;
    padding: 1rem;
    min-width: 0;
}

.fixture-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.fixture-type-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    letter-spacing: 0.03em;
}

.fixture-type-badge.badge-match { background: #dbeafe; color: #1d4ed8; }
.fixture-type-badge.badge-training { background: #dcfce7; color: #15803d; }
.fixture-type-badge.badge-event { background: #fef3c7; color: #b45309; }

[data-theme="dark"] .fixture-type-badge.badge-match { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .fixture-type-badge.badge-training { background: #14412a; color: #86efac; }
[data-theme="dark"] .fixture-type-badge.badge-event { background: #422006; color: #fcd34d; }

.fixture-time {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

.fixture-card-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fixture-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin: 0;
    flex-wrap: wrap;
}

.fixture-card-meta svg {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
}

.fixture-squad-tag {
    background: var(--bg-primary);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 500;
}

.fixture-card-attendance {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.fixture-attendance-progress {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    max-width: 120px;
}

.fixture-attendance-bar {
    height: 100%;
    background: var(--brand-gradient);
    border-radius: 3px;
    transition: width 0.5s ease-out;
}

.fixture-attendance-bar.bar-good { background: var(--color-success); }
.fixture-attendance-bar.bar-moderate { background: var(--color-warning); }
.fixture-attendance-bar.bar-low { background: var(--color-error); }

.fixture-attendance-text {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.fixture-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    justify-content: center;
    border-left: 1px solid var(--border-light);
}

/* Today's fixtures get special treatment */
.dashboard-fixture-card-v2.fixture-today {
    border-color: var(--brand-primary);
    background: linear-gradient(135deg, var(--bg-surface) 0%, rgba(5, 150, 105, 0.05) 100%);
}

[data-theme="dark"] .dashboard-fixture-card-v2.fixture-today {
    background: linear-gradient(135deg, var(--bg-surface) 0%, rgba(16, 185, 129, 0.1) 100%);
}

.dashboard-fixture-card-v2.fixture-today .fixture-card-accent {
    background: var(--color-warning);
}

/* Staggered animation on load */
.dashboard-fixture-card-v2 {
    animation: fixtureSlideIn 0.3s ease-out forwards;
    opacity: 0;
}

.dashboard-fixture-card-v2:nth-child(1) { animation-delay: 0s; }
.dashboard-fixture-card-v2:nth-child(2) { animation-delay: 0.05s; }
.dashboard-fixture-card-v2:nth-child(3) { animation-delay: 0.1s; }
.dashboard-fixture-card-v2:nth-child(4) { animation-delay: 0.15s; }
.dashboard-fixture-card-v2:nth-child(5) { animation-delay: 0.2s; }
.dashboard-fixture-card-v2:nth-child(6) { animation-delay: 0.25s; }

@keyframes fixtureSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* --- Empty States --- */
.dashboard-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--bg-surface);
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(5, 150, 105, 0.1);
    color: var(--brand-primary);
    margin-bottom: 1rem;
    animation: emptyPulse 2s ease-in-out infinite;
}

.empty-state-icon svg {
    width: 36px;
    height: 36px;
}

[data-theme="dark"] .empty-state-icon {
    background: rgba(16, 185, 129, 0.15);
}

@keyframes emptyPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

.empty-state-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.empty-state-message {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
    max-width: 300px;
}

.empty-state-actions {
    display: flex;
    gap: 0.75rem;
}

/* --- Accessibility & Reduced Motion --- */
.quick-action-card:focus-visible,
.dashboard-fixture-card-v2:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-fixture-card-v2,
    .quick-action-card,
    .stat-animate,
    .empty-state-icon {
        animation: none !important;
        transition: none !important;
    }
    .dashboard-fixture-card-v2 {
        opacity: 1;
    }
}

/* --- Responsive: Quick Actions & Fixtures --- */
@media (max-width: 600px) {
    .quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
    .quick-action-card {
        padding: 1rem 0.5rem;
    }
    .quick-action-icon {
        width: 40px;
        height: 40px;
    }
    .quick-action-icon svg {
        width: 20px;
        height: 20px;
    }
    .quick-action-label {
        font-size: var(--text-xs);
    }

    .dashboard-fixture-card-v2 {
        flex-direction: column;
    }
    .fixture-card-accent {
        width: 100%;
        height: 3px;
    }
    .fixture-card-date {
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
    .fixture-card-actions {
        flex-direction: row;
        border-left: none;
        border-top: 1px solid var(--border-light);
        justify-content: flex-end;
    }
}

/* --- END DASHBOARD 2026 PREMIUM REDESIGN --- */

/* --- Attendance Mini Progress on Fixture Cards --- */
.dashboard-fixture-attendance {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.attendance-mini-bar {
    width: 60px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}
.attendance-mini-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}
.attendance-good .attendance-mini-fill { background: var(--color-success); }
.attendance-moderate .attendance-mini-fill { background: var(--color-warning); }
.attendance-low .attendance-mini-fill { background: var(--color-error); }
.attendance-mini-text {
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
}
.attendance-mini-text.attendance-good { color: var(--color-success); }
.attendance-mini-text.attendance-moderate { color: var(--color-warning); }
.attendance-mini-text.attendance-low { color: var(--color-error); }
[data-theme="dark"] .attendance-mini-text.attendance-good { color: #66bb6a; }
[data-theme="dark"] .attendance-mini-text.attendance-moderate { color: #ffa726; }
[data-theme="dark"] .attendance-mini-text.attendance-low { color: #ef5350; }

/* --- Quick Action Buttons on Fixture Cards --- */
.dashboard-fixture-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.35rem;
}
.btn-xs {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    line-height: 1.4;
    min-height: auto;
}

/* --- Getting Started Checklist --- */
.getting-started-checklist {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.gs-checklist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.gs-checklist-item:last-child { border-bottom: none; }
.gs-checklist-item:hover { background: var(--bg-hover); }
.gs-checklist-item.gs-done { opacity: 0.55; cursor: default; }
.gs-checklist-item.gs-done .gs-label { text-decoration: line-through; }
.gs-check {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.gs-checklist-item.gs-done .gs-check { color: var(--color-success); }
.gs-check [data-lucide] { width: 1.25rem; height: 1.25rem; }
.gs-label {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}
.gs-arrow { color: var(--text-muted); }
.gs-arrow [data-lucide] { width: 1rem; height: 1rem; }

/* --- Recent Activity Feed --- */
.recent-activity-list {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.activity-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border-light);
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    flex-shrink: 0;
}
.activity-icon [data-lucide] { width: 1rem; height: 1rem; }
.activity-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.activity-desc {
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.activity-time {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Single Squad Dashboard --- */
.dashboard-single-squad {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem 2.5rem;
}
.dashboard-enter-squad-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    background: var(--brand-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 1.5rem;
}
.dashboard-enter-squad-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.3);
}
.dashboard-enter-squad-btn [data-lucide] { width: 1.25rem; height: 1.25rem; }

/* --- Parent Portal V2 (unified with dashboard) --- */
.parent-portal-v2 {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem 2.5rem;
}
.parent-portal-tabs-v2 {
    display: flex;
    gap: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.25rem;
    margin-bottom: 1.5rem;
}
.parent-tab-v2 {
    flex: 1;
    background: none;
    border: none;
    padding: 0.6rem 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    text-align: center;
}
.parent-tab-v2.active {
    background: var(--bg-primary);
    color: var(--brand-primary);
    font-weight: 600;
}
.parent-tab-v2:hover:not(.active) {
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .dashboard-single-squad { padding: 0 1rem 2rem; }
    .dashboard-enter-squad-btn { font-size: 0.9rem; padding: 0.85rem; }
    .parent-portal-v2 { padding: 0 1rem 2rem; }
    .dashboard-fixture-actions { flex-wrap: wrap; }
}

/* Responsive */
@media (max-width: 600px) {
    .dashboard-hero-v2 { padding: 1.5rem 1rem; }
    .dashboard-hero-v2-inner { flex-direction: column; align-items: flex-start; }
    .dashboard-hero-v2-actions { width: 100%; justify-content: flex-end; gap: 0.35rem; flex-wrap: wrap; }
    .btn-hero { padding: 0.5rem 0.75rem; font-size: 0.82rem; min-height: 44px; }
    .dashboard-club-name-v2 { font-size: 1.35rem; }
    .club-dashboard-content-v2 { padding: 0 1rem 2rem; }
    /* Mobile: fixtures before stats, stats scroll horizontally */
    .dashboard-main-content { display: flex; flex-direction: column; }
    .dashboard-fixtures-wrapper { order: 1; }
    .dashboard-stats-section { order: 2; }
    .dashboard-stats-v2 {
        grid-template-columns: none;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0.75rem;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dashboard-stats-v2::-webkit-scrollbar { display: none; }
    .dashboard-stat-card-v2 {
        min-width: 160px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    .dashboard-alert { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .alert-actions { width: 100%; justify-content: flex-end; }
    .payment-tools-grid { grid-template-columns: 1fr; }
    .squad-container[data-view="grid"] { grid-template-columns: 1fr; }
    .squad-list-info { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* =========================================================================
   MOBILE: Forms, Modals & Remaining Fixes
   ========================================================================= */
@media (max-width: 600px) {
    /* Guardian form: stack side-by-side fields */
    .form-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    /* Parent portal header: wrap and stack */
    .parent-portal-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .parent-portal-header h1 {
        font-size: 1.1rem;
    }
    /* Login page: tighter padding on small screens */
    .login-hero-side {
        padding: 1.5rem 1rem 0.75rem;
    }
    .login-hero-logo {
        font-size: 1.5rem;
    }
    .login-card-side {
        padding: 0 0.75rem 1.5rem;
    }
    /* Settings modal: stack add-grade row */
    .settings-add-row {
        flex-wrap: wrap;
    }
    .settings-grade-input {
        min-width: 0;
    }
    /* Mode toggle: proper sizing */
    .mode-btn {
        padding: 0.5rem 0.65rem;
        font-size: var(--text-xs);
    }
    /* Match history cards: stack vertically */
    .match-history-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .match-history-actions {
        width: 100%;
        justify-content: flex-end;
    }
    /* Modal actions: wrap on small screens */
    .modal-actions,
    .modal-header-actions {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    /* Tables to card layout */
    .appearance-table thead,
    .users-table thead {
        display: none;
    }
    .appearance-table,
    .appearance-table tbody,
    .appearance-table tr,
    .appearance-table td,
    .users-table,
    .users-table tbody,
    .users-table tr,
    .users-table td {
        display: block;
        width: 100%;
    }
    .appearance-table tr,
    .users-table tr {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }
    .appearance-table td,
    .users-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.3rem 0;
        border: none;
    }
    .appearance-table td::before,
    .users-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--text-xs);
        color: var(--text-secondary);
        margin-right: 0.75rem;
        flex-shrink: 0;
    }
    .appearance-table td[data-label="Frequency"] {
        flex-direction: column;
        align-items: stretch;
    }
    .appearance-table td[data-label="Frequency"]::before {
        margin-bottom: 0.25rem;
    }
    .users-table td[data-label="Actions"] {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
}

/* =========================================================================
   SCROLLBAR — Slim glass-themed
   ========================================================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

/* --- Dark mode: role badges --- */
[data-theme="dark"] .account-menu-role.role-admin { background: #1b3a1e; color: #66bb6a; }
[data-theme="dark"] .account-menu-role.role-manager { background: #0d2137; color: #64b5f6; }
[data-theme="dark"] .account-menu-role.role-viewer { background: #1e2428; color: #90a4ae; }
[data-theme="dark"] .account-menu-role.role-parent { background: #2a1a30; color: #ba68c8; }

/* --- Dark mode: status check indicators --- */
[data-theme="dark"] .cs-status-item.done .cs-status-check { color: #66bb6a; }
[data-theme="dark"] .cs-status-item.pending .cs-status-check { color: #666; }
[data-theme="dark"] .cs-status-action { color: var(--brand-primary-light); }

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================================
   DASHBOARD TABS
   ========================================================================= */
.dashboard-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-surface);
    border-bottom: 2px solid var(--border);
    padding: 0 2.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.dash-tab {
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}
.dash-tab:hover { color: var(--text-primary); }
.dash-tab.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}
.dash-panel { display: none; padding-top: 1.25rem; }
.dash-panel.active { display: block; }

@media (max-width: 600px) {
    .dashboard-tabs { padding: 0 0.75rem; }
    .dash-tab { padding: 0.6rem 0.9rem; font-size: var(--text-xs); }
}

/* =========================================================================
   DASHBOARD ANALYTICS
   ========================================================================= */
.dashboard-analytics { margin: 1.5rem 0; }
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.analytics-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    min-height: 160px;
}
.analytics-card.skeleton-card {
    background: var(--bg-primary);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}
.analytics-card-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.analytics-donut-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.analytics-donut-svg {
    transform: rotate(-90deg);
}
.donut-centre-text {
    font-size: 1.25rem;
    font-weight: 700;
    fill: var(--text-primary);
    transform: rotate(90deg);
    transform-origin: center;
}
.analytics-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.analytics-subtitle {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.analytics-big-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.analytics-trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.analytics-trend [data-lucide] { width: 1rem; height: 1rem; }
.analytics-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.analytics-bar-label {
    width: 80px;
    font-size: var(--text-xs);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.analytics-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
}
.analytics-bar-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 4px;
    transition: width 0.6s ease;
}
.analytics-bar-count {
    width: 28px;
    text-align: right;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.analytics-mini-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.analytics-mini-tile {
    text-align: center;
    padding: 1rem 0.5rem;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
}
.mini-tile-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.mini-tile-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 0.35rem;
}
.analytics-empty {
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
    padding: 2rem 0;
}

@media (max-width: 600px) {
    .analytics-grid { grid-template-columns: 1fr; }
    .analytics-mini-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   FIXTURES / EVENTS
   ========================================================================= */
.fixtures-section-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-secondary);
    margin: 1.5rem 0 0.75rem;
}
.fixtures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.fixture-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.fixture-card:hover {
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--brand-primary);
}
.fixture-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.fixture-type-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    flex-shrink: 0;
}
.fixture-type-icon [data-lucide] { width: 1.25rem; height: 1.25rem; }
.fixture-card-title-group { flex: 1; min-width: 0; }
.fixture-card-title { font-weight: 600; color: var(--text-primary); margin-bottom: 0.15rem; }
.fixture-card-subtitle { font-size: var(--text-sm); color: var(--text-secondary); }
.fixture-club-badge {
    display: inline-block;
    font-size: var(--text-xs);
    padding: 0.1rem 0.4rem;
    background: var(--grade-b-bg);
    color: var(--grade-b-text);
    border-radius: 4px;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 0.25rem;
}
.fixture-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}
.fixture-card-date {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.fixture-card-date [data-lucide] { width: 0.9rem; height: 0.9rem; }

/* Status badges */
.fixture-status-badge {
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}
.status-upcoming { background: var(--grade-b-bg); color: var(--grade-b-text); }
.status-attendance_open { background: var(--color-warning-bg); color: var(--color-warning); }
.status-teams_selected { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.status-completed { background: var(--grade-a-bg); color: var(--grade-a-text); }
.status-cancelled { background: var(--bg-surface); color: var(--text-muted); }

.fixture-result-badge {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--brand-primary);
}

/* Detail modal */
.fixture-detail-modal { max-width: 600px; }
.fixture-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}
.fixture-detail-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}
.fixture-detail-title-row [data-lucide] { width: 1.5rem; height: 1.5rem; color: var(--brand-primary); }
.fixture-detail-title-row h2 { margin: 0; flex: 1; }
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}
.modal-close:hover { color: var(--text-primary); }
.fixture-detail-info {
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1.5rem;
}
.fixture-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
}
.fixture-detail-row:last-child { border-bottom: none; }
.fixture-detail-row .label { font-weight: 600; color: var(--text-secondary); }
.fixture-detail-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Create/Edit modal */
/* Venue type selector & badges */
.venue-type-selector { display: flex; gap: 0.5rem; }
.venue-type-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--border);
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.venue-type-btn.active {
    border-color: var(--accent);
    background: var(--accent-subtle);
    color: var(--accent);
}
.venue-type-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1em 0.45em;
    border-radius: var(--radius-xs, 4px);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    margin-left: 0.3rem;
}
.venue-type-home { background: #dcfce7; color: #166534; }
.venue-type-away { background: #fee2e2; color: #991b1b; }
.venue-type-neutral { background: #e0e7ff; color: #3730a3; }

.fixture-type-selector { display: flex; gap: 0.5rem; }
.fixture-type-btn {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid var(--border);
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
}
.fixture-type-btn [data-lucide] { width: 1.25rem; height: 1.25rem; }
.fixture-type-btn.active {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: white;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Filter chips */
.filter-group { display: flex; gap: 0.25rem; }
.filter-chip {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    border-radius: 20px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.filter-chip.active {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}

/* Dashboard fixtures */
.dashboard-fixtures-list {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.dashboard-fixture-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.dashboard-fixture-item:last-child { border-bottom: none; }
.dashboard-fixture-item:hover { background: var(--bg-hover); }
.dashboard-fixture-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    flex-shrink: 0;
}
.dashboard-fixture-icon [data-lucide] { width: 1.1rem; height: 1.1rem; }
.dashboard-fixture-info { flex: 1; min-width: 0; }
.dashboard-fixture-title { font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); }
.dashboard-fixture-meta { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 0.15rem; }
.dashboard-fixture-arrow { color: var(--text-muted); }
.dashboard-fixture-arrow [data-lucide] { width: 1rem; height: 1rem; }

/* Parent event cards */
.parent-event-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}
.parent-event-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.parent-event-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    flex-shrink: 0;
}
.parent-event-icon [data-lucide] { width: 1.1rem; height: 1.1rem; }
.parent-event-info { flex: 1; }
.parent-event-title { font-weight: 600; color: var(--text-primary); }
.parent-event-meta { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 0.15rem; }
.parent-event-attendance { border-top: 1px solid var(--border-light); padding-top: 0.75rem; margin-top: 0.75rem; }
.parent-event-result {
    margin-top: 0.5rem;
    font-weight: 700;
    color: var(--brand-primary);
    font-size: var(--text-sm);
}

/* Row-based list view */
.fixture-list {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.fixture-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.fixture-row:last-child { border-bottom: none; }
.fixture-row:hover { background: var(--bg-hover); }
.fixture-row-icon {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    flex-shrink: 0;
}
.fixture-row-icon [data-lucide] { width: 1rem; height: 1rem; }
.fixture-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.fixture-row-title {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fixture-row-detail {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fixture-row-date {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
.fixture-row-result {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--brand-primary);
    white-space: nowrap;
    flex-shrink: 0;
}
.fixture-row-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
}
.fixture-row-arrow [data-lucide] { width: 1rem; height: 1rem; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state p { margin: 0.5rem 0; }
.empty-hint { font-size: var(--text-sm); }

/* View toggle */
.view-toggle {
    display: inline-flex;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.view-toggle-btn {
    background: none;
    border: none;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    transition: all var(--transition-fast);
}
.view-toggle-btn [data-lucide] { width: 1.1rem; height: 1.1rem; }
.view-toggle-btn:hover { background: var(--bg-hover); }
.view-toggle-btn.active {
    background: var(--brand-primary);
    color: white;
}

/* Calendar */
.fixture-calendar { margin-top: 1rem; }
.calendar-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.calendar-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 180px;
    text-align: center;
}
.calendar-nav-btn { padding: 0.35rem 0.5rem; }
.calendar-nav-btn [data-lucide] { width: 1rem; height: 1rem; }
.calendar-today-btn { margin-left: auto; font-size: var(--text-sm); }
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.calendar-day-header {
    padding: 0.5rem;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
}
.calendar-day {
    min-height: 90px;
    padding: 0.35rem;
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    background: var(--bg-surface);
    vertical-align: top;
}
.calendar-day:nth-child(7n) { border-right: none; }
.calendar-day.other-month { opacity: 0.4; background: var(--bg-primary); }
.calendar-day.today { background: var(--brand-primary-bg); }
.calendar-day.today .calendar-day-number {
    background: var(--brand-primary);
    color: white;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
}
.calendar-day.has-events { background: var(--bg-elevated); }
.calendar-day.today.has-events { background: var(--brand-primary-bg); }
.calendar-day-number {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
}
.calendar-day-events { display: flex; flex-direction: column; gap: 2px; }
.calendar-event-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    overflow: hidden;
    white-space: nowrap;
}
.calendar-event-chip:hover { filter: brightness(0.9); transform: translateY(-1px); }
.chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.chip-time { opacity: 0.7; font-size: 0.6rem; flex-shrink: 0; }
.chip-label { overflow: hidden; text-overflow: ellipsis; }
.chip-match { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.chip-match .chip-dot { background: #3b82f6; }
.chip-training { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.chip-training .chip-dot { background: #10b981; }
.chip-custom { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.chip-custom .chip-dot { background: #f59e0b; }
.calendar-day.clickable:not(.has-events):hover {
    background: var(--bg-hover, rgba(0,0,0,0.03));
    cursor: pointer;
}
/* Recurrence UI */
.recurrence-days {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.recurrence-day-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.15s;
}
.recurrence-day-btn.active {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}
.recurrence-day-btn:hover:not(.active) {
    border-color: var(--brand-primary);
}
.recurrence-end-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.recurrence-end-options .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.calendar-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
    padding: 1.5rem 0 0.5rem;
    font-style: italic;
}

@media (max-width: 600px) {
    .fixtures-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .fixture-type-selector { flex-wrap: wrap; }
    .calendar-day { min-height: 60px; padding: 0.2rem; }
    .chip-label, .chip-time { display: none; }
    .calendar-event-chip { padding: 3px; justify-content: center; }
    .chip-dot { width: 8px; height: 8px; }
    .calendar-title { min-width: auto; font-size: var(--text-base); }
    .fixture-row-info { flex-direction: column; gap: 0.15rem; }
    .fixture-row-detail { white-space: normal; }
}

/* =========================================================================
   PLAYER MORE DROPDOWN
   ========================================================================= */
.player-more-wrapper { position: relative; display: inline-block; }
.more-btn { padding: 0.25rem 0.4rem; min-width: unset; }
.more-btn svg { width: 16px; height: 16px; }
.player-more-dropdown {
    display: none; position: absolute; right: 0; top: 100%; z-index: 50;
    background: var(--popup-bg); border: var(--popup-border); border-radius: 8px;
    box-shadow: var(--popup-shadow); min-width: 180px; padding: 0.25rem 0;
}
.player-more-dropdown.open { display: block; }
.player-more-item {
    display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem;
    border: none; background: none; color: var(--popup-text); font-size: 0.85rem;
    cursor: pointer; text-align: left;
}
.player-more-item:hover { background: var(--popup-hover); }
.player-more-item svg { width: 14px; height: 14px; }
.player-more-item.danger { color: var(--color-error); }
.player-more-divider { height: 1px; background: var(--popup-divider); margin: 0.25rem 0; }

/* =========================================================================
   SQUAD PICKER MODAL
   ========================================================================= */
.squad-picker-overlay {
    position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.squad-picker-card {
    background: var(--popup-bg); color: var(--popup-text); border: var(--popup-border);
    border-radius: 12px; padding: 1.5rem; width: 100%;
    max-width: 360px; max-height: 80vh; overflow-y: auto;
    box-shadow: var(--popup-shadow);
}
.squad-picker-card h3 { margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--popup-text); }
.squad-picker-loading { color: var(--popup-text-secondary); font-size: 0.85rem; }
.squad-picker-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.squad-picker-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem;
    border: var(--popup-border); border-radius: 8px; background: var(--popup-bg);
    color: var(--popup-text); font-size: 0.9rem; cursor: pointer; transition: background 0.15s;
}
.squad-picker-item:hover { background: var(--popup-hover); }
.squad-picker-item svg { width: 16px; height: 16px; }
.squad-picker-actions { display: flex; gap: 0.5rem; }
.squad-picker-actions .btn { flex: 1; }

/* Squad picker step 2 — position confirmation */
.squad-picker-step2 .form-group { margin-bottom: 0.75rem; }
.squad-picker-step2 .form-group label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--popup-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
.squad-picker-step2 .form-control { width: 100%; padding: 0.45rem 0.5rem; border: 1px solid var(--popup-divider); border-radius: 6px; background: var(--popup-bg); color: var(--popup-text); font-size: 0.9rem; }
.sp-positions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sp-pos-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; color: var(--popup-text); cursor: pointer; padding: 0.35rem 0.6rem; border: 1px solid var(--popup-divider); border-radius: 6px; transition: background 0.15s, border-color 0.15s; }
.sp-pos-label:has(input:checked) { background: var(--brand-primary-light, #e0f2fe); border-color: var(--brand-primary, #3b82f6); }
.sp-pos-label input { accent-color: var(--brand-primary, #3b82f6); }
.sp-prefill-hint { font-size: var(--text-xs); color: var(--popup-text-secondary); font-style: italic; margin-top: 0.25rem; }

/* =========================================================================
   SQUAD CARD MENU (Dashboard)
   ========================================================================= */
.squad-card-menu-wrapper { position: relative; }
.squad-card-menu-btn {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    padding: 0.25rem; border-radius: 4px;
}
.squad-card-menu-btn:hover { background: var(--bg-hover, rgba(0,0,0,0.05)); }
.squad-card-menu-btn svg { width: 18px; height: 18px; }
.squad-card-menu {
    display: none; position: absolute; right: 0; top: 100%; z-index: 50;
    background: var(--popup-bg); border: var(--popup-border); border-radius: 8px;
    box-shadow: var(--popup-shadow); min-width: 170px; padding: 0.25rem 0;
}
.squad-card-menu.open { display: block; }
.squad-card-menu-item {
    display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem;
    border: none; background: none; color: var(--popup-text); font-size: 0.85rem;
    cursor: pointer; text-align: left;
}
.squad-card-menu-item:hover { background: var(--popup-hover); }
.squad-card-menu-item svg { width: 14px; height: 14px; }
.squad-card-menu-item.danger { color: var(--color-error); }
.squad-card-menu-divider { height: 1px; background: var(--popup-divider); margin: 0.25rem 0; }

/* =========================================================================
   ARCHIVED SQUADS
   ========================================================================= */
.archived-squads-section { margin-top: 1rem; }
.archived-squads-toggle {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.75rem 1rem; border: none; background: var(--bg-card); border-radius: 8px;
    color: var(--text-muted); font-size: 0.9rem; cursor: pointer;
}
.archived-squads-toggle:hover { background: var(--bg-hover, rgba(0,0,0,0.05)); }
.archived-squads-toggle svg { width: 16px; height: 16px; }
.archived-squads-toggle.expanded svg:last-child { transform: rotate(180deg); }
.archived-squads-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem; padding: 0.75rem 0;
}
.squad-card-view.archived { opacity: 0.6; border-style: dashed; }
.squad-archived-badge {
    display: inline-block; font-size: 0.7rem; padding: 0.15rem 0.5rem;
    background: var(--border); border-radius: 4px; color: var(--text-muted);
}

/* =========================================================================
   PROFILE SQUAD ACTIONS
   ========================================================================= */
.profile-squad-actions {
    display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0;
}
.profile-squad-actions .btn { font-size: 0.8rem; }
.profile-squad-actions .btn svg { width: 14px; height: 14px; }

/* Squad history timeline in profile */
.profile-squad-timeline { display: flex; flex-direction: column; gap: 0.5rem; }
.profile-timeline-entry {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem;
    padding: 0.4rem 0; border-bottom: 1px solid var(--border);
}
.profile-timeline-entry:last-child { border-bottom: none; }
.profile-timeline-icon { color: var(--text-muted); }
.profile-timeline-icon svg { width: 14px; height: 14px; }
.profile-timeline-text { flex: 1; }
.profile-timeline-date { color: var(--text-muted); font-size: 0.8rem; }

/* =========================================================================
   LIVE MATCH MODE
   ========================================================================= */
.live-match-modal {
    z-index: 2000;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
}
.live-match-container {
    width: 100vw;
    max-width: 500px;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lm-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.lm-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    margin-right: 0.75rem;
}
.lm-match-info {
    font-weight: 700;
    font-size: var(--text-base);
    flex: 1;
}

/* Scrollable body */
.lm-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

/* Pre-match */
.lm-prematch {
    padding: 1.5rem 1rem;
    text-align: center;
}
.lm-vs {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}
.lm-venue {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin-bottom: 1rem;
}
.lm-kickoff-btn {
    margin-top: 1.5rem;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    background: #16a34a;
    border: none;
    color: #fff;
    border-radius: var(--radius-md);
    cursor: pointer;
}

/* Score bar */
.lm-score-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.lm-score-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 70px;
}
.lm-score-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lm-score-num {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
}
.lm-score-center {
    text-align: center;
}
.lm-timer {
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.lm-half-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: 600;
}
.lm-opp-score {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.lm-opp-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Action prompt */
.lm-action-prompt {
    text-align: center;
    padding: 0.6rem;
    background: #fef3c7;
    color: #92400e;
    font-weight: 600;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.lm-cancel-action {
    font-size: var(--text-xs);
    padding: 0.25rem 0.6rem;
}
.lm-skip-assist {
    font-size: var(--text-xs);
    padding: 0.25rem 0.6rem;
}

/* Pitch in live match */
.lm-pitch {
    margin: 0.75rem;
}
.lm-player {
    cursor: pointer;
}
.lm-has-card .pitch-badge-circle {
    box-shadow: 0 0 0 3px #f5c542;
}
.lm-sub-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}
.lm-subs {
    padding: 0 0.75rem 0.5rem;
}
.lm-subs-label {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}
.lm-subs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Action bar */
.lm-action-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.75rem;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-color);
    justify-content: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.lm-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-md);
    border: none;
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    min-width: 60px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.lm-action-btn svg { width: 22px; height: 22px; }
.lm-goal-btn { background: #16a34a; color: #fff; border-color: #16a34a; }
.lm-sub-btn { background: #2563eb; color: #fff; border-color: #2563eb; }
.lm-card-btn { background: #f5c542; color: #333; border-color: #f5c542; }
.lm-pause-btn { background: var(--bg-surface); }
.lm-end-btn { background: #dc2626; color: #fff; border-color: #dc2626; }
.lm-kickoff-btn2 {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

/* Event timeline */
.lm-timeline {
    padding: 0.5rem 0.75rem;
    max-height: 180px;
    overflow-y: auto;
}
.lm-timeline-full {
    max-height: none;
}
.lm-timeline-label {
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}
.lm-ev-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--text-sm);
}
.lm-ev-min {
    font-weight: 700;
    min-width: 30px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.lm-ev-icon {
    font-size: 1rem;
    min-width: 20px;
    text-align: center;
}
.lm-ev-goal { color: #16a34a; }
.lm-ev-opp-goal { color: #6b7280; }
.lm-ev-sub { color: #2563eb; }
.lm-ev-yellow { color: #f5c542; }
.lm-ev-red { color: #dc2626; }
.lm-ev-text {
    flex: 1;
    font-weight: 600;
}
.lm-ev-assist {
    font-weight: 400;
    color: var(--text-muted);
}
.lm-ev-del {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.3rem;
}
.lm-ev-del:hover { color: var(--color-error); }

/* Mobile compacting for live match */
@media (max-width: 480px) {
    .lm-header { padding: 0.35rem 0.5rem; }
    .lm-close-btn { font-size: 1.25rem; margin-right: 0.5rem; }
    .lm-match-info { font-size: var(--text-sm); }
    .lm-score-bar { padding: 0.35rem 0.5rem; }
    .lm-score-num { font-size: 1.5rem; }
    .lm-timer { font-size: 1.1rem; }
    .lm-score-team { min-width: 60px; }
    .lm-score-label { font-size: 0.65rem; max-width: 65px; }
    .lm-opp-btn { width: 24px; height: 24px; font-size: 0.85rem; }
    .lm-action-prompt { padding: 0.4rem; font-size: var(--text-xs); }
    .lm-action-bar { padding: 0.5rem; gap: 0.3rem; }
    .lm-action-btn { padding: 0.5rem 0.6rem; min-width: 52px; }
    .lm-action-btn svg { width: 18px; height: 18px; }
    .lm-pitch { margin: 0.5rem; }
    .lm-pitch .pitch-badge-circle { width: 38px; height: 38px; font-size: 0.55rem; }
}

/* Full-time */
.lm-fulltime {
    padding: 2rem 1rem;
    text-align: center;
}
.lm-ft-label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}
.lm-ft-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.lm-ft-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.lm-ft-team span:first-child {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}
.lm-ft-num {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
}
.lm-ft-dash {
    font-size: 2rem;
    color: var(--text-muted);
}
.lm-ft-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.5rem;
}

/* =========================================================================
   PRINT — Solid backgrounds, no blur
   ========================================================================= */
/* =========================================================================
   CLUB SETTINGS LAYOUT (Sidebar + Content)
   ========================================================================= */
.cs-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    min-height: 400px;
    padding: 1.5rem;
}

/* Desktop Sidebar */
.cs-sidebar {
    flex-shrink: 0;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-right: 1.5rem;
    border-right: 1px solid var(--border);
    position: sticky;
    top: 1rem;
    align-self: flex-start;
}

.cs-sidebar-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cs-sidebar-btn:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}
.cs-sidebar-btn.active {
    background: var(--brand-primary, #059669);
    color: white;
}
.cs-sidebar-btn i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Mobile Dropdown (hidden on desktop) */
.cs-mobile-nav {
    display: none;
    margin-bottom: 1rem;
}
.cs-tab-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}
.cs-tab-select:focus {
    outline: none;
    border-color: var(--brand-primary, #059669);
}

/* Content area */
.cs-content {
    flex: 1;
    min-width: 0;
}

/* Mobile: Stack layout, show dropdown, hide sidebar */
@media (max-width: 768px) {
    .cs-layout {
        flex-direction: column;
        gap: 0;
        padding: 1rem;
    }
    .cs-sidebar {
        display: none;
    }
    .cs-mobile-nav {
        display: block;
    }
    .cs-content {
        padding-top: 0;
    }
}

/* Position editor cards */
.cs-position-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: var(--bg-surface);
}
.cs-position-card input,
.cs-position-card select {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
}
.cs-position-card .cs-pos-name { flex: 1; min-width: 80px; }
.cs-position-card .cs-pos-cat { width: 70px; }

/* Position drag-to-reorder */
.cs-drag-handle {
    cursor: grab;
    color: var(--text-tertiary);
    padding: 0 0.15rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    touch-action: none;
}
.cs-drag-handle:active { cursor: grabbing; }
.cs-position-card.dragging { opacity: 0.35; }
.cs-position-card.drag-over {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 6%, var(--bg-surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}
.cs-touch-drag-clone {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.85;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    border-radius: 8px;
    background: var(--bg-surface);
    transform: rotate(1deg);
}

/* Branding live preview */
.cs-branding-preview {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-main);
    margin: 1rem 0;
    overflow: hidden;
}
.cs-preview-hero {
    flex: 1;
    min-height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    padding: 0.5rem 0.75rem;
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.cs-preview-card {
    flex: 1;
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
    border: 1px solid var(--border);
}
.cs-preview-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin: 0 auto 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-preview-card-icon i { width: 14px; height: 14px; color: #fff; }
.cs-preview-card-value { font-size: 1.1rem; font-weight: 700; }
.cs-preview-card-label { font-size: 0.65rem; color: var(--text-secondary); margin-top: 0.1rem; }
.cs-preview-btn {
    align-self: center;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: default;
    white-space: nowrap;
}

/* Season archive cards */
.cs-season-card {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    background: var(--bg-surface);
}
.cs-season-label { font-weight: 600; font-size: 0.95rem; }
.cs-season-dates { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.15rem; }
.cs-season-stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.cs-season-stats span {
    background: var(--bg-main);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-weight: 500;
}

/* Import players */
.cs-import-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}
.cs-import-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    border: 1px dashed var(--brand-primary);
    border-radius: 8px;
    color: var(--brand-primary);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}
.cs-import-label:hover { background: color-mix(in srgb, var(--brand-primary) 6%, transparent); }
.cs-import-preview { margin-top: 1rem; }
.cs-import-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}
.cs-import-table th {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    white-space: nowrap;
}
.cs-import-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
}
.cs-import-table tr.cs-import-row-error { background: #fef2f2; }
[data-theme="dark"] .cs-import-table tr.cs-import-row-error { background: #3b1111; }
.cs-import-options {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.cs-import-summary {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* Danger zone */
.cs-danger-zone {
    margin-top: 3rem;
    border: 1px solid var(--color-error);
    border-radius: 12px;
    padding: 1.5rem;
}
.cs-danger-zone h3 {
    color: var(--color-error);
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cs-danger-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
}
.cs-danger-action:last-child { border-bottom: none; }
.cs-danger-info { flex: 1; }
.cs-danger-info strong { font-size: 0.9rem; }
.cs-danger-info p { font-size: 0.8rem; color: var(--text-secondary); margin: 0.15rem 0 0; }
.btn-danger-outline {
    border: 1px solid var(--color-error);
    color: var(--color-error);
    background: transparent;
    padding: 0.45rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.btn-danger-outline:hover {
    background: var(--color-error);
    color: #fff;
}

/* Export cards */
.cs-export-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    background: var(--bg-surface);
}
.cs-export-info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
}
.cs-export-info i { flex-shrink: 0; margin-top: 2px; color: var(--text-secondary); }

/* Watermark preview */
.cs-watermark-preview {
    position: relative;
    margin: 1rem 0;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: white;
    min-height: 120px;
    overflow: hidden;
}
.cs-watermark-sample {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.06);
    white-space: nowrap;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.cs-watermark-footer {
    position: absolute;
    bottom: 0.5rem;
    right: 0.75rem;
    font-size: 0.7rem;
    color: #9ca3af;
}

@media (max-width: 600px) {
    .cs-position-card { flex-wrap: wrap; }
    .cs-export-card { flex-direction: column; align-items: stretch; }
    .cs-export-card .btn { width: 100%; }
    .cs-branding-preview { flex-direction: column; }
    .cs-danger-action { flex-direction: column; align-items: flex-start; }
    .cs-danger-action .btn-danger-outline { width: 100%; text-align: center; }
    .cs-import-table { font-size: 0.7rem; }
    .cs-import-table th, .cs-import-table td { padding: 0.25rem 0.3rem; }
}

/* Integration cards */
.cs-integration-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    background: var(--bg-surface);
}
.cs-integration-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
}
.cs-integration-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cs-integration-logo img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}
.cs-stripe-logo {
    background: #635bff;
    width: auto;
    padding: 0.5rem 0.75rem;
}
.stripe-wordmark {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    letter-spacing: -0.5px;
}
.cs-integration-info {
    flex: 1;
    min-width: 0;
}
.cs-integration-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-primary);
}
.cs-integration-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}
.cs-integration-status {
    flex-shrink: 0;
}
.cs-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}
.cs-status-badge i {
    width: 14px;
    height: 14px;
}
.cs-status-connected {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
.cs-status-disconnected {
    background: var(--bg-hover);
    color: var(--text-secondary);
}
.cs-status-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}
.cs-integration-body {
    padding: 1.25rem;
}
.cs-integration-disconnected {
    text-align: center;
    padding: 2rem 1.25rem;
}
.cs-integration-benefits {
    text-align: left;
    max-width: 320px;
    margin: 0 auto 1.5rem;
}
.cs-integration-benefits h4 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.cs-integration-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cs-integration-benefits li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.cs-integration-benefits li i {
    width: 16px;
    height: 16px;
    color: #10b981;
    flex-shrink: 0;
}
.cs-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}
.cs-integration-connected-info {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.cs-integration-connected-info p {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
}
.cs-integration-settings {
    margin-bottom: 1.25rem;
}
.cs-integration-settings h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.cs-integration-select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
}
.cs-integration-history {
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--bg-hover);
    border-radius: 8px;
}
.cs-integration-history h4 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.cs-integration-history p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0;
}
.cs-integration-history i {
    width: 14px;
    height: 14px;
}
.cs-integration-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.btn-danger-outline {
    background: transparent;
    border: 1px solid var(--color-error);
    color: var(--color-error);
}
.btn-danger-outline:hover {
    background: rgba(239, 68, 68, 0.1);
}
.cs-integration-coming-soon {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-hover);
    border-radius: 12px;
    margin-top: 1rem;
}
.cs-integration-coming-soon h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.cs-integration-coming-soon h4 i {
    color: var(--brand-accent, #f59e0b);
}
.cs-coming-soon-list {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
.cs-coming-soon-item {
    padding: 0.35rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .cs-integration-header {
        flex-wrap: wrap;
    }
    .cs-integration-status {
        width: 100%;
        margin-top: 0.5rem;
    }
    .cs-integration-actions {
        flex-direction: column;
    }
    .cs-integration-actions .btn {
        width: 100%;
    }
}

/* =========================================================================
   HELP CENTRE
   ========================================================================= */
.help-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1000;
    pointer-events: none;
}
.help-panel.open { pointer-events: auto; }

.help-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.3s;
}
.help-panel.open .help-backdrop { opacity: 1; }

.help-content {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 480px;
    max-width: 100%;
    background: var(--popup-bg);
    border-left: var(--popup-border);
    color: var(--popup-text);
    box-shadow: -4px 0 24px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.help-panel.open .help-content { transform: translateX(0); }

.help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.help-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.help-search-wrap {
    padding: 0.75rem 1.5rem;
    flex-shrink: 0;
}
.help-search {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
}
.help-search:focus { border-color: var(--accent); }

.help-categories {
    display: flex;
    gap: 0.4rem;
    padding: 0 1.5rem 0.75rem;
    overflow-x: auto;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
}
.help-cat-btn {
    flex-shrink: 0;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.help-cat-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.help-articles {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.5rem 1.5rem;
}

.help-group-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: 1rem 0 0.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}

.help-article {
    border-bottom: 1px solid var(--border);
}
.help-article-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 0;
    background: none;
    border: none;
    color: var(--popup-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    gap: 0.5rem;
}
.help-article-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
    color: var(--text-secondary);
}
.help-article.open .help-article-chevron { transform: rotate(180deg); }

.help-article-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    padding: 0;
}
.help-article.open .help-article-body {
    max-height: 2000px;
    padding: 0 0 1rem;
}
.help-article-body ol,
.help-article-body ul {
    padding-left: 1.25rem;
    margin: 0.4rem 0;
}
.help-article-body li { margin-bottom: 0.3rem; }
.help-article-body p { margin: 0.4rem 0; }
.help-article-body strong { color: var(--popup-text); }

.help-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@media (max-width: 520px) {
    .help-content { width: 100%; }
}

/* =========================================================================
   CREDENTIAL DOCUMENT UPLOAD
   ========================================================================= */
.cred-document-upload {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cred-existing-doc {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.cred-doc-preview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-surface);
    border: 1px dashed var(--border-medium);
    border-radius: var(--radius-sm);
}
.cred-doc-preview img {
    border: 1px solid var(--border);
}
.cred-file-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.cred-file-preview svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-primary);
}

/* =========================================================================
   EXPIRING CREDENTIALS DASHBOARD WIDGET
   ========================================================================= */
.expiring-creds-widget {
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}
.expiring-creds-widget h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
    color: var(--color-warning);
}
.expiring-creds-widget h3 svg {
    width: 1.25rem;
    height: 1.25rem;
}
.expiring-cred-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
}
.expiring-cred-item:last-child {
    border-bottom: none;
}
.expiring-cred-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.expiring-cred-name {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.expiring-cred-type {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.expiring-cred-date {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}
.expiring-cred-date.warning {
    background: var(--color-warning-bg);
    color: var(--brand-accent-dark);
}
.expiring-cred-date.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error);
}
.expiring-creds-footer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

/* =========================================================================
   TICKETING UI
   ========================================================================= */
.form-section-divider {
    border-top: 1px solid var(--border-light);
    margin: 1.25rem 0;
}

.ticket-types-modal {
    max-width: 500px;
}

.modal-header-with-close {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.modal-header-with-close h2 {
    margin: 0;
}

.ticket-types-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1rem 0;
}

.ticket-type-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    gap: 1rem;
}

.ticket-type-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    flex: 1;
}

.ticket-type-name {
    font-weight: 600;
    color: var(--text-primary);
}

.ticket-type-price {
    font-weight: 500;
    color: var(--brand-primary);
}

.ticket-type-capacity {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ticket-type-inactive {
    font-size: 0.75rem;
    background: var(--bg-hover);
    color: var(--text-muted);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

.ticket-type-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Ticket indicator on event cards */
.fixture-ticket-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    background: var(--brand-primary-light, rgba(5, 150, 105, 0.1));
    color: var(--brand-primary);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
}

.fixture-ticket-badge i {
    width: 12px;
    height: 12px;
}

/* Ticketing section in fixture detail */
.fixture-ticketing-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.fixture-ticketing-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.fixture-ticketing-section h4 i {
    width: 18px;
    height: 18px;
    color: var(--brand-primary);
}

.fixture-ticketing-section .btn {
    margin-right: 0.5rem;
}

/* Ticket sales modal */
.ticket-sales-modal {
    max-width: 550px;
}

.ticket-sales-modal h4 {
    margin: 1.25rem 0 0.75rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.ticket-sales-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0;
}

.ticket-stat {
    text-align: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.ticket-stat .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.ticket-stat .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.ticket-types-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ticket-type-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    gap: 1rem;
}

.ticket-type-summary-row .ticket-type-name {
    flex: 1;
    font-weight: 500;
}

.ticket-type-summary-row .ticket-type-sold {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.ticket-type-summary-row .ticket-type-revenue {
    font-weight: 600;
    color: var(--brand-primary);
}

.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.ticket-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.ticket-item.checked-in {
    border-left: 3px solid var(--brand-primary);
}

.ticket-item.refunded {
    opacity: 0.6;
    border-left: 3px solid var(--color-error);
}

.ticket-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ticket-item .ticket-buyer {
    font-weight: 500;
    color: var(--text-primary);
}

.ticket-item .ticket-type {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.ticket-item .ticket-price {
    font-weight: 500;
}

.ticket-item .ticket-status {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    text-transform: capitalize;
}

.ticket-item .ticket-status.status-valid {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.ticket-item .ticket-status.status-used {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.ticket-item .ticket-status.status-refunded {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.ticket-item.hidden {
    display: none;
}

/* Check-in progress bar */
.checkin-progress {
    margin: 1rem 0;
}

.checkin-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.checkin-progress-header h4 {
    margin: 0;
}

.checkin-progress-header span {
    font-weight: 600;
    color: var(--brand-primary);
}

.checkin-progress-bar {
    height: 8px;
    background: var(--bg-hover);
    border-radius: 4px;
    overflow: hidden;
}

.checkin-progress-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.btn-text {
    background: none;
    border: none;
    color: var(--brand-primary);
    cursor: pointer;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.btn-text:hover {
    text-decoration: underline;
}

/* Ticketing report */
.ticketing-report-section {
    margin-top: 2rem;
}

.ticketing-report-section h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.report-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.report-stat-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
}

.report-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: block;
}

.report-stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 0.25rem;
}

.report-events-table {
    width: 100%;
    border-collapse: collapse;
}

.report-events-table th,
.report-events-table td {
    text-align: left;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.report-events-table th {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.report-events-table td:last-child {
    text-align: right;
}

.report-events-table th:last-child {
    text-align: right;
}

.report-event-link {
    color: var(--brand-primary);
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}

.report-event-link:hover {
    text-decoration: underline;
}

.report-checkin-bar {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: var(--bg-hover);
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.report-checkin-bar-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 3px;
}

/* =========================================================================
   TICKET PURCHASE PAGE (PUBLIC)
   ========================================================================= */
.ticket-purchase-page {
    min-height: 100vh;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
}

.ticket-purchase-header {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark, #047857) 100%);
    color: white;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.ticket-club-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: white;
    border-radius: var(--radius-md);
    padding: 0.5rem;
}

.ticket-event-info {
    flex: 1;
}

.ticket-club-name {
    opacity: 0.9;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.25rem;
}

.ticket-event-info h1 {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 700;
}

.ticket-event-details {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.95rem;
    opacity: 0.95;
}

.ticket-event-details span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ticket-event-details i {
    width: 16px;
    height: 16px;
}

.ticket-purchase-body {
    flex: 1;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
}

.ticket-selection-section h2,
.ticket-summary-section h3,
.ticket-buyer-section h3 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.ticket-type-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.ticket-type-row.sold-out {
    opacity: 0.6;
}

.ticket-type-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.ticket-type-name {
    font-weight: 600;
    color: var(--text-primary);
}

.ticket-type-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ticket-type-price {
    font-weight: 700;
    color: var(--brand-primary);
    font-size: 1.1rem;
}

.ticket-qty-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qty-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.15s;
}

.qty-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--brand-primary);
}

.qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.qty-btn i {
    width: 16px;
    height: 16px;
}

.qty-value {
    min-width: 2rem;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.sold-out-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.ticket-summary-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 1.5rem 0;
}

.ticket-summary-items {
    margin-bottom: 0.75rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.95rem;
}

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

.ticket-summary-total {
    display: flex;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 2px solid var(--border);
    font-weight: 700;
    font-size: 1.15rem;
}

.ticket-summary-total span:last-child {
    color: var(--brand-primary);
}

.ticket-buyer-section {
    margin-top: 1.5rem;
}

.ticket-buyer-section .form-group {
    margin-bottom: 1rem;
}

.btn-large {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    margin-top: 1rem;
}

.btn-large i {
    margin-right: 0.5rem;
}

.ticket-purchase-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Ticket confirmation page */
.ticket-confirmation-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bg-primary);
}

.confirmation-content {
    text-align: center;
    max-width: 400px;
}

.confirmation-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirmation-icon.success {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.confirmation-icon i {
    width: 48px;
    height: 48px;
}

.confirmation-content h1 {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

.confirmation-content p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.confirmation-actions {
    margin-top: 2rem;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .ticket-purchase-header {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .ticket-club-logo {
        width: 60px;
        height: 60px;
    }

    .ticket-event-info h1 {
        font-size: 1.4rem;
    }

    .ticket-event-details {
        justify-content: center;
        gap: 1rem;
    }

    .ticket-type-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .ticket-qty-control {
        justify-content: center;
    }
}

/* =========================================================================
   DIGITAL TICKET VIEW
   ========================================================================= */
.digital-ticket-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-primary);
    padding: 1.5rem;
}

.ticket-view-nav {
    width: 100%;
    max-width: 400px;
    margin-bottom: 1rem;
}

.digital-ticket {
    width: 100%;
    max-width: 400px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.ticket-header {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark, #047857) 100%);
    color: white;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ticket-header .ticket-club-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: white;
    border-radius: var(--radius-sm);
    padding: 4px;
}

.ticket-header-info {
    flex: 1;
}

.ticket-header .ticket-club-name {
    font-size: 0.8rem;
    opacity: 0.9;
    display: block;
    margin-bottom: 0.25rem;
}

.ticket-event-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}

.ticket-details {
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
}

.ticket-detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.ticket-detail-row i {
    width: 16px;
    height: 16px;
    color: var(--brand-primary);
    flex-shrink: 0;
}

.ticket-type-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px dashed var(--border);
}

.ticket-type-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ticket-status-badge {
    padding: 0.3rem 0.75rem;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ticket-status-badge.status-valid {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.ticket-status-badge.status-used {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

.ticket-status-badge.status-invalid {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.ticket-qr-section {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.ticket-qr-container {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--radius-md);
    padding: 8px;
}

.ticket-qr-container canvas {
    border-radius: 4px;
}

.ticket-qr-code-text {
    font-family: monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
    word-break: break-all;
    text-align: center;
    margin: 0;
}

.ticket-holder-info {
    padding: 1rem 1.5rem;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
}

.ticket-holder-name {
    font-weight: 600;
    color: var(--text-primary);
}

.ticket-holder-email {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ticket-used-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    font-size: 0.85rem;
}

.ticket-used-info i {
    width: 16px;
    height: 16px;
}

.ticket-view-footer {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* =========================================================================
   MY TICKETS PAGE
   ========================================================================= */
.my-tickets-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.5rem;
}

.my-tickets-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.my-tickets-header h1 {
    margin: 0;
    flex: 1;
}

.tickets-section-title {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.my-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.my-tickets-list.past {
    opacity: 0.7;
}

.my-ticket-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    gap: 1rem;
}

.my-ticket-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1);
}

.ticket-card-main {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.ticket-card-event {
    font-weight: 600;
    color: var(--text-primary);
}

.ticket-card-type {
    font-size: 0.9rem;
    color: var(--brand-primary);
}

.ticket-card-date {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ticket-card-date i {
    width: 14px;
    height: 14px;
}

.ticket-card-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ticket-card-status i {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

/* =========================================================================
   TICKET SCANNER
   ========================================================================= */
.scanner-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 1.5rem;
}

.scanner-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.scanner-header h1 {
    margin: 0;
    flex: 1;
}

.scanner-event-selector {
    margin-bottom: 1rem;
}

.scanner-event-selector select {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.scanner-event-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.scanner-event-info strong {
    color: var(--text-primary);
}

.scanner-event-info span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.scanner-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.scanner-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-surface);
    border: none;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.scanner-tab:not(:last-child) {
    border-right: 1px solid var(--border);
}

.scanner-tab.active {
    background: var(--brand-primary);
    color: white;
}

.scanner-tab i {
    width: 18px;
    height: 18px;
}

.scanner-camera-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.scanner-reader {
    width: 100%;
    max-width: 400px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
    min-height: 300px;
}

.scanner-controls {
    display: flex;
    gap: 0.75rem;
}

.scanner-manual-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.scanner-manual-section .form-group {
    margin-bottom: 1rem;
}

/* Scan results */
.scanner-result {
    margin-top: 1.5rem;
}

.scan-processing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    color: var(--text-secondary);
    font-size: 1rem;
}

.scan-processing .spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.scan-result-card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.scan-result-card.scan-valid {
    background: rgba(16, 185, 129, 0.12);
    border: 2px solid #059669;
}

.scan-result-card.scan-invalid {
    background: rgba(239, 68, 68, 0.12);
    border: 2px solid #dc2626;
}

.scan-result-card.scan-duplicate {
    background: rgba(245, 158, 11, 0.12);
    border: 2px solid #d97706;
}

.scan-result-card.scan-error {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

.scan-result-icon {
    margin-bottom: 0.75rem;
}

.scan-result-icon i {
    width: 56px;
    height: 56px;
}

.scan-valid .scan-result-icon { color: #059669; }
.scan-invalid .scan-result-icon { color: #dc2626; }
.scan-duplicate .scan-result-icon { color: #d97706; }

.scan-result-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.scan-result-details {
    margin-top: 0.75rem;
}

.scan-result-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.scan-result-type {
    color: var(--text-secondary);
    margin: 0;
}

.scan-result-used {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
}

/* Scan history */
.scanner-history {
    margin-top: 2rem;
}

.scanner-history h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--text-secondary);
}

.scan-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    background: var(--brand-primary);
    color: white;
    border-radius: 99px;
    font-size: 0.8rem;
    padding: 0 0.5rem;
}

.scan-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.scan-history-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.scan-history-item.scan-success {
    background: rgba(16, 185, 129, 0.08);
    border-left: 3px solid #059669;
}

.scan-history-item.scan-fail {
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #dc2626;
}

.scan-history-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
}

.scan-history-name {
    font-weight: 500;
    color: var(--text-primary);
}

.scan-history-type {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.scan-history-status {
    font-size: 0.8rem;
    font-weight: 500;
}

.scan-success .scan-history-status { color: #059669; }
.scan-fail .scan-history-status { color: #dc2626; }

.scan-history-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Email lookup results */
.email-lookup-results {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.email-lookup-results h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.lookup-ticket-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
}

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

.lookup-ticket-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
}

.lookup-ticket-name {
    font-weight: 500;
    color: var(--text-primary);
}

.lookup-ticket-type {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* =========================================================================
   PERMISSIONS SECTION
   ========================================================================= */
.permissions-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.permissions-list .toggle-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    transition: background 0.2s;
}
.permissions-list .toggle-label:hover {
    background: var(--bg-hover);
}
.permissions-list .toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--brand-primary);
    flex-shrink: 0;
}
.permissions-list .toggle-text {
    flex: 1;
    line-height: 1.4;
}
.permissions-list .toggle-text strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}
.permissions-list .toggle-text .settings-help {
    margin: 0;
    font-size: 0.8rem;
}

/* =========================================================================
   DARK MODE — Ticketing, Scanner, Report overrides
   ========================================================================= */
[data-theme="dark"] .ticket-item .ticket-status.status-valid {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}
[data-theme="dark"] .ticket-item .ticket-status.status-used {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}
[data-theme="dark"] .ticket-item .ticket-status.status-refunded {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}
[data-theme="dark"] .ticket-status-badge.status-valid {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}
[data-theme="dark"] .ticket-status-badge.status-used {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}
[data-theme="dark"] .ticket-status-badge.status-invalid {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}
[data-theme="dark"] .scan-result-card.scan-valid {
    background: rgba(16, 185, 129, 0.15);
    border-color: #34d399;
}
[data-theme="dark"] .scan-result-card.scan-invalid {
    background: rgba(239, 68, 68, 0.15);
    border-color: #f87171;
}
[data-theme="dark"] .scan-result-card.scan-duplicate {
    background: rgba(245, 158, 11, 0.15);
    border-color: #fbbf24;
}
[data-theme="dark"] .scan-valid .scan-result-icon { color: #34d399; }
[data-theme="dark"] .scan-invalid .scan-result-icon { color: #f87171; }
[data-theme="dark"] .scan-duplicate .scan-result-icon { color: #fbbf24; }
[data-theme="dark"] .scan-history-item.scan-success {
    background: rgba(16, 185, 129, 0.1);
    border-left-color: #34d399;
}
[data-theme="dark"] .scan-history-item.scan-fail {
    background: rgba(239, 68, 68, 0.1);
    border-left-color: #f87171;
}
[data-theme="dark"] .scan-success .scan-history-status { color: #34d399; }
[data-theme="dark"] .scan-fail .scan-history-status { color: #f87171; }
[data-theme="dark"] .confirmation-icon.success {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}
[data-theme="dark"] .ticket-used-info {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}
[data-theme="dark"] .ticket-qr-container {
    background: #ffffff;
}
[data-theme="dark"] .my-ticket-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .fixture-ticket-badge {
    background: rgba(16, 185, 129, 0.15);
}
[data-theme="dark"] .scanner-reader {
    background: #111;
}

/* =========================================================================
   RESPONSIVE — Scanner mobile adjustments
   ========================================================================= */
@media (max-width: 600px) {
    .scanner-page {
        padding: 1rem;
    }

    .scanner-header h1 {
        font-size: 1.2rem;
    }

    .scanner-reader {
        min-height: 250px;
    }

    .scan-result-icon i {
        width: 40px;
        height: 40px;
    }

    .scan-result-card h3 {
        font-size: 1.05rem;
    }

    .scan-history-item {
        font-size: 0.85rem;
        padding: 0.5rem 0.6rem;
    }

    .ticket-sales-stats {
        grid-template-columns: 1fr;
    }

    .report-events-table th,
    .report-events-table td {
        padding: 0.5rem 0.3rem;
        font-size: 0.8rem;
    }

    .report-checkin-bar {
        width: 40px;
    }

    .my-tickets-header h1 {
        font-size: 1.3rem;
    }
}

@media print {
    * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    .modal, .toast-container, .confirm-overlay { display: none !important; }
    body { background: #fff !important; }
}

/* ========================================================================= */
/* Impersonation Banner                                                      */
/* ========================================================================= */
.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: #dc2626;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}
.impersonation-banner button {
    margin-left: 12px;
    padding: 4px 14px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.impersonation-banner button:hover {
    background: rgba(255,255,255,0.35);
}
body.impersonating {
    padding-top: 40px;
}

/* =========================================================================
   PLAYER PORTAL — Self-service view for player users
   ========================================================================= */
.player-portal-v2 {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem 2.5rem;
}
.player-portal-tabs-v2 {
    display: flex;
    gap: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.25rem;
    margin-bottom: 1.5rem;
}
.player-tab-v2 {
    flex: 1;
    background: none;
    border: none;
    padding: 0.6rem 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    text-align: center;
}
.player-tab-v2.active {
    background: var(--bg-primary);
    color: var(--brand-primary);
    font-weight: 600;
}
.player-tab-v2:hover:not(.active) {
    color: var(--text-secondary);
}

/* Player Profile Card */
.player-profile-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.player-profile-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.player-profile-avatar {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}
.player-profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.player-profile-initials {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-primary);
}
.player-profile-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.player-profile-avatar:hover .player-profile-avatar-overlay {
    opacity: 1;
}
.player-profile-avatar-overlay [data-lucide] {
    width: 24px;
    height: 24px;
    color: #fff;
}
.player-profile-info {
    flex: 1;
}
.player-profile-name {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}
.player-profile-squads {
    font-size: var(--text-sm);
    color: var(--brand-primary);
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.player-profile-positions {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.player-profile-details {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}
.player-profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-light);
}
.player-profile-row:last-child {
    border-bottom: none;
}
.profile-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}
.profile-label [data-lucide] {
    width: 16px;
    height: 16px;
}
.profile-value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    font-weight: 500;
}
.player-profile-help {
    margin-top: 1rem;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
}

/* Player Stats Tab */
.player-stats-summary {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.player-stat-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.5rem 2.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.player-stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--brand-primary);
    line-height: 1;
}
.player-stat-label {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.player-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.player-match-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.player-match-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.player-match-date {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-tertiary);
    min-width: 80px;
}
.player-match-info {
    flex: 1;
}
.player-match-title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}
.player-match-meta {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.player-no-data {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* Player Events/Upcoming */
.player-event-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.player-event-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.player-event-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.player-event-icon [data-lucide] {
    width: 18px;
    height: 18px;
    color: var(--brand-primary);
}
.player-event-info {
    flex: 1;
}
.player-event-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}
.player-event-meta {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 0.15rem;
}
.player-event-attendance {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.player-attendance-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.player-attendance-btns {
    display: flex;
    gap: 0.5rem;
}
.player-avail-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.player-avail-btn [data-lucide] {
    width: 14px;
    height: 14px;
}

/* Player Teams Tab */
.player-team-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}
.player-team-header {
    margin-bottom: 0.75rem;
}
.player-team-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}
.player-team-meta {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.player-team-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.player-team-roster {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.player-teammate {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
}
.player-teammate.is-me {
    background: var(--brand-subtle);
    border: 1px solid var(--brand-primary);
}
.teammate-name {
    color: var(--text-primary);
    font-weight: 500;
}
.teammate-pos {
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .player-portal-v2 { padding: 0 1rem 2rem; }
    .player-profile-header { flex-direction: column; text-align: center; }
    .player-profile-avatar { margin: 0 auto; }
    .player-stat-big { padding: 1rem 1.5rem; }
    .player-stat-number { font-size: 2.25rem; }
    .player-event-attendance { flex-direction: column; align-items: flex-start; }
}

/* Player invite row in modal */
#player-invite-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
}
.player-invite-status {
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.player-invite-status [data-lucide] {
    width: 16px;
    height: 16px;
}