/* ========================================
   BACKSEAT GAMER DESIGN SYSTEM
   Colors extracted from brand logo
   ======================================== */

:root {
    /* === Brand Colors (V2 Design System) === */
    --color-primary: #8b5cf6;           /* Purple - primary accent */
    --color-primary-dark: #7c3aed;      /* Darker purple for hover states */
    --color-primary-light: #a78bfa;     /* Lighter purple for backgrounds */

    --color-accent-cyan: #06B6D4;       /* Cyan - secondary accent (limited use) */
    --color-accent-orange: #f97316;     /* Orange - dates and highlights only */
    --color-accent-orange-dark: #ea580c; /* Darker orange for hover */

    /* === Dark Theme (V2 - Darker, Flatter) === */
    --color-bg-dark: #000000;           /* Black background */
    --color-surface-dark: #18181b;      /* Dark surface for cards */
    --color-surface-hover: #1f1f23;     /* Subtle hover state */

    --color-text-dark: #1F2937;         /* Dark text (for light backgrounds) */
    --color-text-light: #fafafa;        /* Primary text - near white */
    --color-text-muted: #a1a1aa;        /* Muted/tertiary text (WCAG AA compliant) */
    --color-text-white: #FFFFFF;        /* Pure white */

    /* === Alias tokens for consistency === */
    --color-surface: var(--color-surface-dark);        /* Default surface color */
    --color-surface-secondary: #000000;                /* Secondary surface */
    --color-surface-tertiary: #000000;                 /* Tertiary surface */

    --color-border: #27272a;                            /* Default border - subtle */
    --color-border-light: #3f3f46;                      /* Lighter border */
    --color-border-dark: #18181b;                       /* Darker border */
    --color-border-focus: var(--color-primary);         /* Focused input border */

    --color-text: var(--color-text-light);              /* Default text color */
    --color-text-primary: var(--color-text-light);      /* Primary text */
    --color-text-secondary: #a1a1aa;                    /* Secondary text - new value */

    /* === Semantic Colors === */
    --color-success: #22c55e;           /* Green (green-500, matches STYLE-BIBLE.md) */
    --color-error: #EF4444;             /* Red */
    --color-danger: var(--color-error); /* Alias for error (used in confirmations/destructive actions) */
    --color-error-dark: #DC2626;        /* Darker red for hover */
    --color-success-dark: #16a34a;      /* Green-600 for hover */
    --color-warning: #F59E0B;           /* Amber */
    --color-info: #3B82F6;              /* Blue */

    /* === Collectible Rarity Tiers === */
    --color-rarity-common: #a1a1aa;
    --color-rarity-uncommon: #22c55e;
    --color-rarity-rare: #3b82f6;
    --color-rarity-epic: #8b5cf6;
    --color-rarity-legendary: #f59e0b;
    /* RGB channels for rgba() usage */
    --color-rarity-common-rgb: 161, 161, 170;
    --color-rarity-uncommon-rgb: 34, 197, 94;
    --color-rarity-rare-rgb: 59, 130, 246;
    --color-rarity-epic-rgb: 139, 92, 246;
    --color-rarity-legendary-rgb: 245, 158, 11;

    /* === Gradients (V2 - Flat fallbacks) === */
    --gradient-primary: var(--color-primary);           /* Flat purple fallback */
    --gradient-purple: var(--color-primary);            /* Flat purple fallback */
    --gradient-surface: var(--color-surface-dark);      /* Flat surface fallback */

    /* === Typography (V2 - Inter only) === */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */
    --font-size-6xl: 3.75rem;     /* 60px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* === Spacing (4px base unit) === */
    --spacing-0-5: 0.125rem; /* 2px */
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-1-5: 0.375rem; /* 6px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */

    /* === Border Radius (V2 - Consistent 8px base) === */
    --radius-xs: 4px;       /* Extra small - skeleton lines */
    --radius-sm: 6px;       /* Small elements */
    --radius-md: 8px;       /* Default - cards, inputs */
    --radius-lg: 8px;       /* Same as md for consistency */
    --radius-xl: 12px;      /* Large elements */
    --radius-full: 9999px;  /* Fully rounded */

    /* === Shadows (V2 - Minimal, no colored glows) === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 12px 24px rgba(0, 0, 0, 0.25);
    --shadow-purple: none;  /* Removed - V2 uses no colored shadows */
    --shadow-orange: none;  /* Removed - V2 uses no colored shadows */

    /* === Transitions (V2 - Faster, more subtle) === */
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 250ms ease;

    /* === Component-Specific Tokens === */
    /* Inputs */
    --input-bg: var(--color-surface-dark);
    --input-border: var(--color-border);
    --input-border-focus: var(--color-primary);
    --input-text: var(--color-text-light);
    --input-placeholder: var(--color-text-muted);

    /* Cards */
    --card-bg: var(--color-surface-dark);
    --card-border: var(--color-border);
    --card-shadow: var(--shadow-md);

    /* Modals & Overlays (V2 - Darker backdrop) */
    --modal-backdrop: rgba(13, 13, 15, 0.85);
    --modal-bg: var(--color-surface-dark);
    --overlay-bg: rgba(13, 13, 15, 0.85);
}

/* ========================================
   GLOBAL RESET & BASE STYLES
   ======================================== */

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

html, body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-light);
    background: var(--color-bg-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-text-white);
}

/* ========================================
   BUTTON SYSTEM
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

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

/* Primary Button - Purple (V2) */
.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-white);
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
}

.btn-primary:active:not(:disabled) {
    background: var(--color-primary-dark);
}

/* Secondary Button - Surface with border (V2) */
.btn-secondary {
    background: var(--color-surface-dark);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
}

/* Outline Button (V2) */
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

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

/* Ghost Button */
.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--color-surface-hover);
    color: var(--color-text-light);
}

/* Danger Button */
.btn-danger {
    background: var(--color-error);
    color: var(--color-text-white);
}

.btn-danger:hover:not(:disabled) {
    background: var(--color-error-dark);
}

/* Button Sizes */
.btn-sm {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
}

.btn-xl {
    padding: var(--spacing-5) var(--spacing-10);
    font-size: var(--font-size-xl);
}

/* Button Group - Split Button Pattern */
.btn-group {
    display: inline-flex;
    gap: 0;
}

.btn-group > .btn:not(:last-child),
.btn-group > .dropdown:not(:last-child) .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child),
.btn-group > .dropdown:not(:first-child) .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

/* ========================================
   CARD SYSTEM
   ======================================== */

/* V2 Card System - Flat, minimal */
.card {
    background: var(--color-surface-dark);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    border: 1px solid var(--color-border);
    transition: border-color var(--transition-base);
    position: relative;
}

.card:hover {
    border-color: var(--color-primary);
}

.card-interactive {
    cursor: pointer;
}

/* ========================================
   FORM SYSTEM
   ======================================== */

.form-group {
    margin-bottom: var(--spacing-5);
}

.form-label {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* V2 Form Control - 1px border, no background change on focus */
.form-control {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-white) !important;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-base);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-surface-dark);
    box-shadow: none;
}

.form-control:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6; /* Make placeholder even more muted */
}

/* Ensure all form inputs have white text */
input.form-control,
textarea.form-control,
select.form-control {
    color: var(--color-text-white) !important;
    -webkit-text-fill-color: var(--color-text-white);
}

/* Fix autofill background color issue */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
input.form-control:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--color-text-white) !important;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--color-surface-dark);
}

/* Firefox autofill */
input.form-control:-moz-autofill,
input.form-control:-moz-autofill-preview {
    filter: none;
    background-color: var(--color-surface-dark) !important;
    color: var(--color-text-white) !important;
}

/* Disabled and readonly inputs - V2 style */
.form-control:disabled,
.form-control[readonly] {
    background: var(--color-bg-dark) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-muted) !important;
    -webkit-text-fill-color: var(--color-text-muted) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Date and time picker icons - make visible on dark background */
input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="time"].form-control::-webkit-calendar-picker-indicator {
    filter: invert(100%) brightness(90%) !important;
    opacity: 1 !important;
    cursor: pointer;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator:hover,
input[type="time"].form-control::-webkit-calendar-picker-indicator:hover {
    filter: invert(100%) brightness(100%) !important;
    opacity: 1 !important;
}

.form-control.textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right var(--spacing-3) center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: var(--spacing-10);
}

.form-error {
    display: block;
    margin-top: var(--spacing-1);
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

.form-hint {
    display: block;
    margin-top: var(--spacing-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.form-container {
    background: var(--gradient-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-10);
    border: 2px solid rgba(139, 92, 246, 0.1);
}

.form-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    border: 1px solid var(--color-border);
}

.form-section h2 {
    font-size: 1.375rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
}

/* Form helper elements */
.community-context-badge {
    padding: var(--spacing-4);
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.personal-event-notice {
    padding: var(--spacing-4);
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.personal-event-notice p {
    margin: var(--spacing-2) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.info-box {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--color-surface-dark);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-5);
}

.form-actions {
    display: flex;
    gap: var(--spacing-4);
    justify-content: flex-end;
    margin-top: var(--spacing-10);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-surface-hover);
}

/* Profile Container - Simple max-width wrapper for profile/edit pages */
.profile-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    padding-bottom: var(--spacing-8);
}


.section-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    cursor: pointer;
    font-weight: var(--font-weight-normal) !important;
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.checkbox-label span {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* Application question items (used in community create/edit) */
.question-item {
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-surface-dark);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.question-input-group {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

.question-input-group .form-control {
    flex: 1;
}

.question-checkbox {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.question-checkbox label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
}

/* Button with spinner */
.btn .spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* ========================================
   PAGE LAYOUTS
   ======================================== */

/* Page wrapper */
.page-wrapper {
    min-height: 100vh;
}

.page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-8);
}

.page-content-sm {
    max-width: 800px;
}

.page-content-lg {
    max-width: 1400px;
}

/* ========================================
   HERO BANNER SYSTEM
   ======================================== */

/* V2 Hero Banner - Flat, dark background */
.hero-banner {
    background: var(--color-surface-dark);
    padding: var(--spacing-10) var(--spacing-8);
    position: relative;
    border-bottom: 1px solid var(--color-border);
}

/* Negative margins for full-bleed heroes inside padded containers */
.hero-banner-fullbleed {
    margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) var(--spacing-8);
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content-sm {
    max-width: 800px;
}

.hero-content-lg {
    max-width: 1400px;
}

.hero-text h1 {
    font-size: var(--font-size-5xl);
    color: var(--color-text-white);
    margin-bottom: var(--spacing-2);
    font-weight: 900;
}

.hero-text-sm h1 {
    font-size: var(--font-size-4xl);
}

.hero-text p {
    font-size: var(--font-size-xl);
    color: rgba(255, 255, 255, 0.9);
}

.hero-text-sm p {
    font-size: var(--font-size-lg);
}

/* Hero responsive */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        gap: var(--spacing-6);
        text-align: center;
    }

    .hero-text h1 {
        font-size: var(--font-size-3xl);
    }
}

/* Old .page-header component removed — replaced by .page-header-v2 */

/* ========================================
   AUTH PAGE SYSTEM
   ======================================== */

.auth-page {
    min-height: 100vh;
    background: var(--color-bg-dark);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.auth-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Ken Burns photo slideshow background for auth pages */
.auth-photos {
    position: absolute;
    inset: -10%;
}

.auth-bg-photo {
    position: absolute;
    inset: 0;
    width: 120%;
    height: 120%;
    object-fit: cover;
    opacity: 0;
    animation: auth-kenburns-left 108s infinite;
    animation-delay: calc(var(--i) * 18s);
}

.auth-bg-photo:nth-child(even) {
    animation-name: auth-kenburns-right;
}

@keyframes auth-kenburns-left {
    0%   { opacity: 0; transform: translate(0, 0); }
    5%   { opacity: 1; }
    15%  { opacity: 1; }
    20%  { opacity: 0; transform: translate(-15%, -3%); }
    100% { opacity: 0; transform: translate(-15%, -3%); }
}

@keyframes auth-kenburns-right {
    0%   { opacity: 0; transform: translate(-15%, -3%); }
    5%   { opacity: 1; }
    15%  { opacity: 1; }
    20%  { opacity: 0; transform: translate(0, 0); }
    100% { opacity: 0; transform: translate(0, 0); }
}

.auth-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, var(--color-bg-dark) 0%, transparent 30%, transparent 70%, var(--color-bg-dark) 100%),
        color-mix(in srgb, var(--color-bg-dark) 82%, transparent);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .auth-bg-photo {
        animation: none;
        opacity: 0;
    }

    .auth-bg-photo:first-child {
        opacity: 1;
        transform: none;
    }
}

.auth-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8) var(--spacing-6);
    position: relative;
    z-index: 1;
}

/* V2 Auth Card - Flat design */
.auth-card {
    width: 100%;
    max-width: 450px;
    background: var(--color-surface-dark);
    border-radius: var(--radius-md);
    padding: var(--spacing-10) var(--spacing-8);
    border: 1px solid var(--color-border);
    position: relative;
}

.auth-header {
    margin-bottom: var(--spacing-8);
    text-align: center;
}

.auth-header h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-2);
    color: var(--color-text-white);
}

.auth-header p {
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

.auth-form {
    margin-bottom: var(--spacing-6);
}

.auth-footer {
    text-align: center;
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-surface-hover);
}

.auth-footer p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.auth-footer a {
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: color var(--transition-base);
}

.auth-footer a:hover {
    color: var(--color-primary-light);
}

/* OAuth Buttons */
.oauth-buttons {
    margin-bottom: var(--spacing-4);
}

.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.google-icon {
    width: 20px;
    height: 20px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

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

/* Password Toggle Button */
.password-toggle-btn {
    position: absolute;
    right: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background var(--transition-base);
}

.password-toggle-btn:hover {
    background: var(--color-surface-hover);
}

/* Password Strength Indicator */
.password-strength {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.strength-bar {
    height: 4px;
    border-radius: 2px;
    transition: all var(--transition-base);
    width: 100%;
}

.strength-weak {
    background: var(--color-error);
    width: 33%;
}

.strength-medium {
    background: var(--color-warning);
    width: 66%;
}

.strength-strong {
    background: var(--color-success);
    width: 100%;
}

/* ========================================
   SKELETON LOADERS
   ======================================== */

.skeleton-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Skeleton base animation */
@keyframes skeleton-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton-line,
.skeleton-avatar,
.skeleton-badge,
.skeleton-card,
.skeleton-event-card,
.skeleton-community-card,
.skeleton-list-item {
    background: linear-gradient(
        90deg,
        var(--color-surface) 0%,
        var(--color-surface-hover) 50%,
        var(--color-surface) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* Skeleton line variants */
.skeleton-line {
    height: 1rem;
    width: 100%;
    margin-bottom: var(--spacing-2);
}

.skeleton-line.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--spacing-3);
}

.skeleton-line.skeleton-text {
    height: 1rem;
    width: 100%;
}

.skeleton-line.short {
    width: 75%;
}

/* Skeleton avatar */
.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
}

.skeleton-avatar.large {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
}

/* Skeleton badge */
.skeleton-badge {
    width: 60px;
    height: 24px;
    border-radius: var(--radius-sm);
}

/* Skeleton card */
.skeleton-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    border: 1px solid var(--color-border);
}

/* Skeleton event card */
.skeleton-event-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    border: 1px solid var(--color-border);
}

.skeleton-event-header {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.skeleton-content {
    flex: 1;
}

.skeleton-footer {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
}

/* Skeleton community card */
.skeleton-community-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Skeleton list item */
.skeleton-list-item {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    border: 1px solid var(--color-border);
    display: flex;
    gap: var(--spacing-4);
    align-items: center;
}

/* ========================================
   STAT CARDS
   ======================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-6);
    max-width: 1200px;
    margin: var(--spacing-8) auto;
}

/* V2 Stat Card - Flat design */
.stat-card {
    background: var(--color-surface-dark);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    border: 1px solid var(--color-border);
    transition: border-color var(--transition-base);
    position: relative;
}

/* Color accent via left border */
.stat-card.purple { border-left: 3px solid var(--color-primary); }
.stat-card.cyan { border-left: 3px solid var(--color-accent-cyan); }
.stat-card.orange { border-left: 3px solid var(--color-accent-orange); }
.stat-card.green { border-left: 3px solid var(--color-success); }

.stat-card:hover {
    border-color: var(--color-border-light);
}

.stat-card.purple:hover { border-left-color: var(--color-primary); }
.stat-card.cyan:hover { border-left-color: var(--color-accent-cyan); }
.stat-card.orange:hover { border-left-color: var(--color-accent-orange); }
.stat-card.green:hover { border-left-color: var(--color-success); }

.stat-icon {
    font-size: 3rem;
    line-height: 1;
}

.stat-value {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-white);
    line-height: 1;
    margin-bottom: var(--spacing-1);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    letter-spacing: 0.3px;
}

/* ========================================
   SECTION COMPONENT
   ======================================== */

.section {
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-5);  /* Tighter spacing between sections */
}

/* V2 Background variants - Flat colors */
.section.bg-surface {
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
}

.section.bg-gradient {
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
}

/* Padding variants - MUCH tighter than before */
.section.p-none {
    padding: 0;
}

.section.p-small {
    padding: var(--spacing-4);  /* 16px - minimal */
}

.section.p-medium {
    padding: var(--spacing-5);  /* 20px - compact (default) */
}

.section.p-large {
    padding: var(--spacing-6);  /* 24px - still reasonable, not 48px! */
}

/* Responsive: Reduce padding on mobile */
@media (max-width: 768px) {
    .section.p-small {
        padding: var(--spacing-3);  /* 12px */
    }

    .section.p-medium {
        padding: var(--spacing-4);  /* 16px */
    }

    .section.p-large {
        padding: var(--spacing-5);  /* 20px */
    }
}

/* ========================================
   EVENT CARD COMPONENT
   ======================================== */

.event-card {
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-5);
    transition: all var(--transition-base);
    position: relative;  /* CRITICAL: Allows dropdown to position absolutely relative to card */
    overflow: visible !important;  /* CRITICAL: Prevents dropdown from being clipped */
}

.event-card:hover {
    border-color: var(--color-primary);
}

.event-card-interactive {
    cursor: pointer;
}

.event-card-interactive:hover {
    /* V2: No transform or shadow - just border color change inherited from .event-card:hover */
}

.event-badge {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
}

.event-content {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-4);
}

.event-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-white);
    margin-bottom: var(--spacing-2);
}

.event-description {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-3);
    line-height: 1.5;
}

.event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-top: var(--spacing-3);
}

.event-meta .meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.event-meta .attendee-count {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-white);
}

.event-footer {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
    flex-wrap: wrap;
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
    position: relative;  /* CRITICAL: Allows dropdown to escape footer */
    overflow: visible !important;  /* CRITICAL: Prevents dropdown from being clipped */
}

/* Event card chevron - tap affordance for clickable cards */
.event-chevron {
    position: absolute;
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
    transition: opacity var(--transition-base);
}

.event-card:hover .event-chevron {
    opacity: 0.7;
}

/* ========================================
   GAME CARD COMPONENT
   ======================================== */

.game-card {
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.game-card:hover {
    border-color: var(--color-primary);
}

.game-card-interactive {
    cursor: pointer;
}

.game-card-interactive:hover {
    /* V2: No transform or shadow - just border color change inherited from .game-card:hover */
}

.game-thumbnail {
    width: 100%;
    height: 180px;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.game-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.game-thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    opacity: 0.6;
}

.game-content {
    padding: var(--spacing-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.game-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.game-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-white);
    margin: 0;
    flex: 1;
    line-height: 1.3;
}

.game-year {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
}

.game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-top: auto; /* Push meta to bottom when there's no image */
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.game-footer {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
    justify-content: flex-end;
    padding: var(--spacing-3) var(--spacing-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* ========================================
   SECTION HEADERS
   ======================================== */

.section-header {
    margin-top: var(--spacing-8);  /* Add breathing room from top of page (32px) */
    margin-bottom: var(--spacing-4);  /* Tighter spacing - was spacing-6 */
}

/* When section-header is the first child, parent padding provides top spacing */
.section-header:first-child {
    margin-top: 0;
}

.section-header h2 {
    font-size: var(--font-size-xl);  /* Smaller - was 3xl (30px), now xl (20px) */
    color: var(--color-text-white);
    margin-bottom: var(--spacing-1);  /* Tighter - was spacing-2 */
    font-weight: var(--font-weight-bold);
}

.section-header p {
    font-size: var(--font-size-sm);  /* Smaller - was base (16px), now sm (14px) */
    color: var(--color-text-muted);
}

/* Responsive: Reduce top margin on mobile */
@media (max-width: 768px) {
    .section-header {
        margin-top: var(--spacing-6);  /* Tighter on mobile (24px) */
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

.container-sm {
    max-width: 800px;
}

.container-lg {
    max-width: 1400px;
}

/* Text */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-muted { color: var(--color-text-muted); }
.text-white { color: var(--color-text-white); }
.text-primary { color: var(--color-primary); }
.text-cyan { color: var(--color-accent-cyan); }
.text-orange { color: var(--color-accent-orange); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-error); }

/* Spacing utilities */
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-16 { margin-top: var(--spacing-16); }

.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }

/* Gradients */
.gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-surface-hover);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

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

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-8) var(--spacing-8);
    color: var(--color-text-light);
}

.empty-state-icon {
    font-size: 5rem;
    margin-bottom: var(--spacing-4);
    opacity: 0.5;
}

/* Error State */
.error-state {
    text-align: center;
    padding: var(--spacing-3) var(--spacing-6);
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
    color: var(--color-error);
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.badge-primary { background: var(--color-primary); color: white; }
.badge-success { background: var(--color-success); color: white; }
.badge-error { background: var(--color-error); color: white; }
.badge-warning { background: var(--color-warning); color: white; }
.badge-info { background: var(--color-info); color: white; }

/* Divider */
.divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-10) 0;
}

/* Section Layout Utilities (used across Events, Communities pages) */
.section-wrapper {
    margin-bottom: var(--spacing-8);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-white);
    margin-bottom: var(--spacing-6);
}

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

/* Width Utilities */
.w-full {
    width: 100%;
}

/* Shared utility classes - moved from component-level styles */
.error-message {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-1);
}

.loading-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding: var(--spacing-2) 0;
}

.spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   ICON UTILITIES (Heroicons)
   ======================================== */

/* Icon Sizes */
.icon-xs {
    width: 0.75rem;     /* 12px */
    height: 0.75rem;
}

.icon-sm {
    width: 1rem;        /* 16px */
    height: 1rem;
}

.icon-md {
    width: 1.5rem;      /* 24px */
    height: 1.5rem;
}

.icon-lg {
    width: 2rem;        /* 32px */
    height: 2rem;
}

.icon-xl {
    width: 2.5rem;      /* 40px */
    height: 2.5rem;
}

.icon-2xl {
    width: 3rem;        /* 48px */
    height: 3rem;
}

.icon-3xl {
    width: 4rem;        /* 64px */
    height: 4rem;
}

/* Icon Colors */
.icon-primary { color: var(--color-primary); }
.icon-success { color: var(--color-success); }
.icon-error { color: var(--color-error); }
.icon-warning { color: var(--color-warning); }
.icon-info { color: var(--color-info); }
.icon-muted { color: var(--color-text-muted); }
.icon-white { color: var(--color-text-white); }
.icon-cyan { color: var(--color-accent-cyan); }
.icon-orange { color: var(--color-accent-orange); }

/* Icon Inline Utility - for inline icons with text */
.icon-inline {
    display: inline;
    vertical-align: middle;
    margin-right: var(--spacing-1);
}

/* Icon in button alignment */
.btn svg {
    flex-shrink: 0;
}

/* ========================================
   FOCUS INDICATORS (Accessibility)
   ======================================== */

/* Focus visible for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remove focus outline on mouse click */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   MOBILE POLISH ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    /* Auth card: More padding on mobile */
    .auth-card {
        padding: var(--spacing-10) var(--spacing-6); /* Increased from spacing-8 to spacing-6 sides */
    }

    /* Auth form fields: More vertical spacing */
    .auth-form .form-group {
        margin-bottom: var(--spacing-5); /* Increased from spacing-4 to spacing-5 */
    }

    /* Events create button: Slightly narrower for visual balance */
    .page-wrapper .page-content .hero-banner + .page-content .btn-primary {
        max-width: 90%;
        margin: 0 auto;
    }

    /* Pricing savings badge: More prominent */
    .savings {
        font-size: var(--font-size-base); /* Increased from font-size-sm */
        padding: var(--spacing-3) var(--spacing-5); /* Increased padding */
    }
}

/* ========================================
   DROPDOWN COMPONENT
   Contextual menus with click-outside-to-close
   ======================================== */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
}

.dropdown-toggle span {
    letter-spacing: 0.3px;
}

/* Invisible full-screen overlay that catches clicks outside the menu */
.dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.dropdown-menu {
    display: block; /* Override Bootstrap's display:none — our menu is conditionally rendered */
    position: absolute;
    top: calc(100% + var(--spacing-2));
    right: 0;
    min-width: 200px;
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    padding: var(--spacing-2) 0;
    z-index: 1000;
    animation: dropdownFadeIn 0.12s ease-out;
}

.dropdown-menu-admin {
    border: 2px solid var(--color-warning);
}

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

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    padding: var(--spacing-2) var(--spacing-4);
    min-height: 44px;
    background: transparent;
    border: none;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-base);
    white-space: nowrap;
}

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

.dropdown-item:active {
    background: var(--color-surface);
}

.dropdown-item .icon-sm {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.dropdown-item:hover .icon-sm {
    color: var(--color-text-light);
}

.dropdown-item-danger {
    color: var(--color-error);
}

.dropdown-item-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.dropdown-item-danger .icon-sm,
.dropdown-item-danger:hover .icon-sm {
    color: var(--color-error);
}

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

/* ========================================
   ALERT MESSAGES
   ======================================== */

.alert {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.alert-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-error);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.alert-info {
    background: rgba(59, 130, 246, 0.15);
    color: var(--color-info);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .dropdown-menu {
        min-width: 160px;
        right: auto;
        left: 0;
    }

    .btn-sm {
        min-height: 44px;
    }
}

/* ========================================
   V2 PAGE HEADER (Simple)
   Clean header for internal pages
   ======================================== */

.page-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.page-header-text {
    flex: 1;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-1);
}

.page-subtitle {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Page header action buttons (right-aligned) */
.page-header-actions-v2 {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Variant: Feed header (stacked with filters) */
.feed-header {
    padding-top: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

.feed-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-1);
}

.feed-subtitle {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0;
}

.feed-filters {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

/* View toggle - primary tab bar (Your X / Discover)
   Used by Events and Communities pages */
.view-toggle {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

/* Show/hide past link */
.show-past-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    margin-top: var(--spacing-6);
    padding: var(--spacing-2) 0;
    transition: color var(--transition-base);
    background: none;
    border: none;
}

.show-past-link:hover {
    color: var(--color-primary);
}

.show-past-link .icon-sm {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ========================================
   V2 SECTION TITLES & DIVIDERS
   ======================================== */

.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

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

/* V2 Section Header with "View all" link */
.section-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-4);
}

.section-header-v2 h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin: 0;
}

.view-all-v2 {
    font-size: 0.875rem;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s;
}

.view-all-v2:hover {
    color: var(--color-primary-light);
}

/* ========================================
   V2 EMPTY STATE WITH QUICK ACTIONS
   ======================================== */

.empty-feed {
    padding: var(--spacing-8) 0;
}

.empty-feed-header {
    text-align: center;
    margin-bottom: var(--spacing-8);
}

.empty-feed-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-4);
}

.empty-feed-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-2);
}

.empty-feed-header p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

/* Quick Actions List */
.quick-actions-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.03em;
    margin-bottom: var(--spacing-4);
}

.quick-actions-list {
    display: flex;
    flex-direction: column;
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text-light);
    transition: background 0.15s;
}

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

.quick-action-item:hover {
    background: var(--color-surface-hover);
    margin: 0 calc(var(--spacing-4) * -1);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    border-radius: var(--radius-md);
}

.quick-action-icon {
    width: 40px;
    height: 40px;
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

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

.quick-action-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text-light);
}

.quick-action-desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.quick-action-arrow {
    width: 20px;
    height: 20px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* ========================================
   V2 EVENT LIST ITEMS
   ======================================== */

.events-list-v2 {
    display: flex;
    flex-direction: column;
}

.event-item-v2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
    padding: var(--spacing-5) 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text-light);
    transition: background 0.15s;
}

.event-item-v2:first-child {
    padding-top: 0;
}

.event-item-v2:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.event-item-v2:hover {
    background: var(--color-surface-hover);
    margin: 0 calc(var(--spacing-4) * -1);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    border-radius: var(--radius-md);
}

.event-item-v2:first-child:hover {
    padding-top: var(--spacing-4);
    margin-top: calc(var(--spacing-4) * -1);
}

/* Event items with actions (Your Events section) */
.event-item-with-actions {
    padding: var(--spacing-5) 0;
}

.event-item-with-actions .event-item-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
    flex: 1;
    text-decoration: none;
    color: var(--color-text-light);
}

.event-actions-v2 {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-shrink: 0;
}

/* V2 Date Badge - Orange month, white day */
.event-date-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    flex-shrink: 0;
    text-align: center;
}

.event-date-v2 .month {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-accent-orange);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-date-v2 .day {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-light);
    line-height: 1;
}

/* V2 Event Info */
.event-info-v2 {
    flex: 1;
    min-width: 0;
}

.event-info-v2 h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-1);
    color: var(--color-text-light);
}

.event-meta-v2 {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-1);
}

.event-meta-v2 .separator {
    margin: 0 var(--spacing-2);
    color: var(--color-text-muted);
}

.event-stats-v2 {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.event-stats-v2 .separator {
    margin: 0 var(--spacing-2);
}

.event-stats-v2 .community {
    color: var(--color-primary);
}

/* V2 Arrow Icon */
.event-arrow-v2 {
    color: var(--color-text-muted);
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* V2 Filter Inputs - page-specific filter styles are in each page's <style> block */

/* Mobile responsive */
@media (max-width: 768px) {
    .page-header-v2 {
        flex-direction: column;
        gap: var(--spacing-4);
    }

    .page-header-actions-v2 {
        width: 100%;
        flex-wrap: wrap;
    }

    .event-item-v2:hover {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .event-item-v2:first-child:hover {
        padding-top: 0;
        margin-top: 0;
    }

    .event-actions-v2 {
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }

}

/* ========================================
   NOT FOUND PAGE
   Shared between Routes.razor and NotFound.razor
   ======================================== */

.not-found-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}

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

.icon-not-found {
    width: 64px;
    height: 64px;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.not-found-content h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.not-found-content p {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

.btn-back-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: background 0.15s;
}

.btn-back-home:hover {
    background: var(--color-primary-dark);
    color: white;
}

/* ==============================================
   ACHIEVEMENT CARDS
   ============================================== */

.achievements-stats {
    display: flex;
    gap: var(--spacing-6);
    align-items: center;
    margin-bottom: var(--spacing-6);
}

.achievements-stats-progress {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
}

.achievements-stats-progress span {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-lg);
}

.achievements-stats-bar {
    flex: 1;
    height: 8px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
    max-width: 300px;
}

.achievements-stats-bar-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-4);
}

.achievement-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s;
}

.achievement-card:hover {
    border-color: var(--color-border-light);
}

.achievement-card--earned:hover {
    filter: brightness(1.05);
}

/* Rarity border for earned achievements — 1px all-around per V2 (R4: no thick left borders) */
.achievement-card--earned[data-rarity="Common"] { border-color: rgba(var(--color-rarity-common-rgb), 0.4); }
.achievement-card--earned[data-rarity="Uncommon"] { border-color: rgba(var(--color-rarity-uncommon-rgb), 0.4); }
.achievement-card--earned[data-rarity="Rare"] { border-color: rgba(var(--color-rarity-rare-rgb), 0.4); }
.achievement-card--earned[data-rarity="Epic"] { border-color: rgba(var(--color-rarity-epic-rgb), 0.5); }
.achievement-card--earned[data-rarity="Legendary"] { border-color: rgba(var(--color-rarity-legendary-rgb), 0.5); }

/* Locked (available but not earned) */
.achievement-card--locked {
    opacity: 0.7;
}

.achievement-card--locked:hover {
    opacity: 0.85;
}

.achievement-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.achievement-card__icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.achievement-card__icon--locked img {
    filter: grayscale(1) opacity(0.4);
}

.achievement-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.achievement-card__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.achievement-card__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
}

.achievement-card__rarity {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 6px;
}

/* Reuse rarity colours from toast */
.achievement-card__rarity--common { background: rgba(var(--color-rarity-common-rgb), 0.15); color: var(--color-rarity-common); }
.achievement-card__rarity--uncommon { background: rgba(var(--color-rarity-uncommon-rgb), 0.15); color: var(--color-rarity-uncommon); }
.achievement-card__rarity--rare { background: rgba(var(--color-rarity-rare-rgb), 0.15); color: var(--color-rarity-rare); }
.achievement-card__rarity--epic { background: rgba(var(--color-rarity-epic-rgb), 0.15); color: var(--color-rarity-epic); }
.achievement-card__rarity--legendary { background: rgba(var(--color-rarity-legendary-rgb), 0.15); color: var(--color-rarity-legendary); }

.achievement-card__description {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.achievement-card__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.achievement-card__criteria {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Progress bar for stat-based achievements */
.achievement-progress {
    margin-top: var(--spacing-1);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.achievement-progress__bar {
    height: 6px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.achievement-progress__fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

.achievement-progress__fill--common { background: var(--color-rarity-common); }
.achievement-progress__fill--uncommon { background: var(--color-rarity-uncommon); }
.achievement-progress__fill--rare { background: var(--color-rarity-rare); }
.achievement-progress__fill--epic { background: var(--color-rarity-epic); }
.achievement-progress__fill--legendary { background: var(--color-rarity-legendary); }

.achievement-progress__text {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

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

    .achievements-stats {
        flex-wrap: wrap;
        gap: var(--spacing-3);
    }
}

/* Achievement toast container — global overlay (unscoped, lives in MainLayout)
   pointer-events: none lets clicks through to page; individual toasts set pointer-events: auto */
.achievement-toast-container {
    position: fixed;
    top: 80px;
    right: var(--spacing-6);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

@media (max-width: 768px) {
    .achievement-toast-container {
        top: 64px;
        right: var(--spacing-4);
        left: var(--spacing-4);
    }
}

/* ========================================
   NOTIFICATION BELL & DROPDOWN
   ======================================== */

.notification-bell-container {
    position: relative;
}

.notification-bell-trigger {
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--color-text-secondary);
}

.notification-bell-trigger:hover {
    color: var(--color-text-light);
    border-color: var(--color-border);
    background: rgba(255, 255, 255, 0.05);
}

.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--color-error);
    color: var(--color-text-light);
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 999px;
    padding: 0 4px;
    pointer-events: none;
}

/* Notification dropdown panel */
.notification-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    animation: notificationFadeIn 0.15s ease;
}

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

.notification-dropdown-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-light);
}

.notification-mark-all {
    background: transparent;
    border: none;
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s;
}

.notification-mark-all:hover {
    background: rgba(139, 92, 246, 0.1);
}

/* Scrollable notification list */
.notification-dropdown-list {
    flex: 1;
    overflow-y: auto;
    max-height: 360px;
}

/* Empty state */
.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Individual notification item */
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    color: inherit;
}

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

.notification-item.unread {
    background: rgba(139, 92, 246, 0.04);
}

.notification-item.unread:hover {
    background: rgba(139, 92, 246, 0.08);
}

.notification-item-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.notification-item-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
}

.notification-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.notification-item-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-light);
    line-height: 1.3;
}

.notification-item.unread .notification-item-title {
    font-weight: 600;
}

.notification-item-message {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-item-time {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-top: 0.125rem;
}

.notification-item-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    margin-top: 0.375rem;
}

/* Footer link */
.notification-dropdown-footer {
    display: block;
    text-align: center;
    padding: 0.75rem 1rem;
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    border-top: 1px solid var(--color-border);
    transition: background 0.15s;
}

.notification-dropdown-footer:hover {
    background: rgba(139, 92, 246, 0.05);
}

/* Backdrop for closing dropdown when clicking outside */
.notification-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

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

/* Mobile notification bell in bottom nav */
.mobile-notification-bell {
    position: relative;
    display: inline-flex;
}

.mobile-notification-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--color-error);
    color: var(--color-text-light);
    font-size: 0.5625rem;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 999px;
    padding: 0 3px;
    pointer-events: none;
}

/* Responsive: mobile dropdown takes full width */
@media (max-width: 768px) {
    .notification-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        animation: notificationSlideUp 0.25s ease-out;
    }

    .notification-backdrop {
        background: var(--overlay-bg);
    }
}

@keyframes notificationSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ========================================
   LEGAL PAGES (Privacy, Terms)
   ======================================== */

.legal-page {
    min-height: 100vh;
    background: var(--color-bg-dark);
    color: var(--color-text-secondary);
}

.legal-container {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-12) var(--spacing-6) var(--spacing-16);
}

.legal-container h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-2) 0;
}

.legal-updated {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-8) 0;
}

.legal-section {
    margin-bottom: var(--spacing-8);
}

.legal-section h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-3) 0;
}

.legal-section h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
    margin: var(--spacing-4) 0 var(--spacing-2) 0;
}

.legal-section p {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    margin: 0 0 var(--spacing-3) 0;
}

.legal-section ul {
    font-size: var(--font-size-sm);
    line-height: 1.7;
    margin: 0 0 var(--spacing-3) 0;
    padding-left: var(--spacing-6);
}

.legal-section li {
    margin-bottom: var(--spacing-1);
}

.legal-section a {
    color: var(--color-primary);
    text-decoration: none;
}

.legal-section a:hover {
    text-decoration: underline;
}

.cookie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    margin: var(--spacing-3) 0 var(--spacing-4);
    display: block;
    overflow-x: auto;
}

.cookie-table th,
.cookie-table td {
    text-align: left;
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.cookie-table th {
    color: var(--color-text-light);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.cookie-table td {
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.cookie-table code {
    font-size: var(--font-size-xs);
    background: var(--color-bg-light);
    padding: 0.125rem var(--spacing-1);
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
}

@media (max-width: 768px) {
    .legal-container {
        padding: var(--spacing-8) var(--spacing-4) var(--spacing-12);
    }

    .cookie-table th,
    .cookie-table td {
        padding: var(--spacing-2);
        font-size: var(--font-size-xs);
    }
}

/* ========================================
   Heart Button
   Used on activity feed items and dashboard events
   ======================================== */

.activity-footer {
    margin-top: var(--spacing-2);
}

.heart-button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 2px var(--spacing-2);
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    transition: color 0.15s;
    line-height: 1;
}

.heart-button:hover:not(:disabled) {
    color: var(--color-error);
}

.heart-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.heart-button.hearted {
    color: var(--color-error);
}

.heart-count {
    font-weight: var(--font-weight-medium);
    min-width: 12px;
}

/* ========================================
   Date Polls
   Poll cards, voting grid, and form styles
   ======================================== */

/* Poll card in community list */
.date-polls-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.date-poll-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-base);
}

.date-poll-card:hover {
    border-color: var(--color-primary);
}

.date-poll-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-2);
}

.date-poll-title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.date-poll-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Voting grid on detail page */
.poll-options-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.poll-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base);
}

.poll-option-row.is-winner {
    border-color: var(--color-success);
    background: rgba(34, 197, 94, 0.05);
}

.poll-option-date {
    flex: 1;
    min-width: 0;
}

.poll-option-date-day {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

.poll-option-date-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.poll-option-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

.poll-option-votes {
    display: flex;
    gap: var(--spacing-2);
}

.poll-vote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-text-muted);
}

.poll-vote-btn:hover:not(:disabled) {
    border-color: var(--color-text-muted);
}

.poll-vote-btn.vote-yes.active {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

.poll-vote-btn.vote-maybe.active {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: white;
}

.poll-vote-btn.vote-no.active {
    background: var(--color-error);
    border-color: var(--color-error);
    color: white;
}

.poll-vote-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.poll-option-counts {
    display: flex;
    gap: var(--spacing-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.poll-count-yes { color: var(--color-success); }
.poll-count-maybe { color: var(--color-warning); }
.poll-count-no { color: var(--color-error); }

.poll-voters-row {
    display: flex;
    gap: 4px;
    margin-top: var(--spacing-2);
    flex-wrap: wrap;
}

/* Non-member / sign-in prompt */
.poll-sign-in-prompt {
    text-align: center;
    padding: var(--spacing-6) 0;
}

.poll-sign-in-prompt p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-3);
}

/* Save votes bar */
.poll-vote-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) 0;
    position: sticky;
    bottom: 0;
    background: var(--color-bg-dark);
    border-top: 1px solid var(--color-border);
    z-index: 10;
}

/* Date option form rows (create/add option) */
.date-option-form-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--spacing-3);
    align-items: end;
    padding: var(--spacing-3);
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.date-option-form-row .form-group {
    margin-bottom: 0;
}

.date-option-remove {
    padding-bottom: 2px;
}

.date-options-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

/* Poll header */
.poll-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

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

.poll-header-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--spacing-2);
}

.poll-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-top: var(--spacing-3);
}

/* Responsive: stack option rows on mobile */
@media (max-width: 640px) {
    .poll-option-row {
        flex-direction: column;
        align-items: stretch;
    }

    .poll-option-right {
        align-items: center;
    }

    .poll-option-votes {
        justify-content: center;
    }

    .date-option-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================
   Game Picker / Autocomplete
   Search, select, and quick-create games
   ======================================== */

.game-picker {
    width: 100%;
    position: relative;
}

.game-picker-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.game-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 420px;
    overflow-y: auto;
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    margin-top: var(--spacing-1);
}

.game-picker-result {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    width: 100%;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-base);
}

.game-picker-result:last-child {
    border-bottom: none;
}

.game-picker-result:hover,
.game-picker-result--active {
    background: var(--color-surface-hover);
    border-left-color: var(--color-primary);
}

.game-picker-thumbnail {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.game-picker-thumbnail-placeholder {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    color: var(--color-text-muted);
}

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

.game-picker-title {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-picker-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.game-picker-meta .separator {
    opacity: 0.5;
}

.game-picker-meta .bgg-rating {
    color: var(--color-warning, #fbbf24);
}

/* Loading state inside dropdown */
.game-picker-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-6);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Empty / no results state */
.game-picker-empty {
    padding: var(--spacing-6);
    text-align: center;
}

.game-picker-empty-icon {
    margin-bottom: var(--spacing-2);
    color: var(--color-text-muted);
    opacity: 0.5;
}

.game-picker-empty-text {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-sm);
}

.game-picker-add-custom {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}

.game-picker-add-custom:hover {
    background: rgba(139, 92, 246, 0.1);
}

.game-picker-add-custom:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Selected/locked game display */
.game-picker-locked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3);
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-2);
}

.game-picker-locked-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex: 1;
    min-width: 0;
}

.game-picker-locked-thumbnail {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.game-picker-locked-thumbnail-placeholder {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.game-picker-locked-info {
    flex: 1;
    min-width: 0;
}

.game-picker-locked-title {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-picker-locked-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Error state inside dropdown */
.game-picker-error {
    padding: var(--spacing-6);
    text-align: center;
}

.game-picker-error-text {
    color: var(--color-error);
    margin-bottom: var(--spacing-3);
}

/* Game Picker — Inline Create Form */
.game-picker-create-form {
    padding: var(--spacing-4);
}

.game-picker-create-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
}

.game-picker-create-title-display {
    margin-bottom: var(--spacing-3);
}

.game-picker-create-title-value {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-surface-raised);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.game-picker-create-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.game-picker-create-row .form-control {
    font-size: 0.875rem;
    padding: var(--spacing-2) var(--spacing-3);
}

.game-picker-create-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
}

/* ========================================
   AI Discovery Log Viewer
   Terminal-style output for CLI process streaming
   ======================================== */

.log-viewer {
    background: #0d1117;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: #c9d1d9;
    max-height: 500px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.log-viewer .log-line {
    padding: 1px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-viewer .log-line--tool {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.log-viewer .log-line--system {
    color: var(--color-text-muted);
    font-style: italic;
}

.log-viewer .log-line--error {
    color: var(--color-error);
}

/* Discovery results table */
.discovery-results-table {
    width: 100%;
    border-collapse: collapse;
}

.discovery-results-table th,
.discovery-results-table td {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.discovery-results-table th {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.discovery-results-table tr:hover td {
    background: var(--color-surface-dark);
}

.discovery-results-table .source-badge {
    display: inline-block;
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: var(--color-surface-dark);
    color: var(--color-text-muted);
    margin-right: var(--spacing-1);
    margin-bottom: var(--spacing-1);
}

.discovery-results-table .source-badge--bgg {
    background: rgba(255, 102, 0, 0.15);
    color: #ff6600;
}

.discovery-results-table .source-badge--wikidata {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.discovery-results-table .source-badge--publisher {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.discovery-image-preview {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--color-border);
}

.discovery-select-all {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 2px solid var(--color-border);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}