/**
 * Simracing.Fan — Events (single + sections + archive)
 *
 * Design: hero pieno con overlay scuro per leggibilità del titolo,
 * info card sticky a destra (desktop), tab navigation orizzontale.
 * Mobile-first: layout 1 colonna, info card sopra il content, scroll orizzontale tab.
 * Dark mode via body.buddyx-dark-theme.
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

.sf-event,
.sf-events-archive {
    --sfe-bg-page:        #f7f8fa;
    --sfe-bg-card:        #ffffff;
    --sfe-bg-elevated:    #ffffff;
    --sfe-bg-hover:       rgba(0,0,0,0.04);
    --sfe-bg-active:      rgba(91,159,230,0.12);
    --sfe-text-primary:   #1c1e21;
    --sfe-text-secondary: #65676b;
    --sfe-text-muted:     #8a8d91;
    --sfe-border:         #e4e6eb;
    --sfe-border-strong:  #d0d2d6;
    --sfe-link:           #1877f2;
    --sfe-accent:         #ff3030;
    --sfe-accent-hover:   #d92020;
    --sfe-success:        #1a8754;
    --sfe-warning:        #b45309;
    --sfe-radius:         10px;
    --sfe-radius-sm:      6px;
    --sfe-shadow:         0 1px 2px rgba(0,0,0,0.06);
}

body.buddyx-dark-theme .sf-event,
body.buddyx-dark-theme .sf-events-archive {
    --sfe-bg-page:        #1a1a1a;
    --sfe-bg-card:        #232323;
    --sfe-bg-elevated:    #2a2a2a;
    --sfe-bg-hover:       rgba(255,255,255,0.06);
    --sfe-bg-active:      rgba(91,159,230,0.18);
    --sfe-text-primary:   #e8e8e8;
    --sfe-text-secondary: #b3b3b3;
    --sfe-text-muted:     #8a8a8a;
    --sfe-border:         #2e2e2e;
    --sfe-border-strong:  #3a3a3a;
    --sfe-link:           #5b9fe6;
    --sfe-success:        #4ade80;
    --sfe-warning:        #fbbf24;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.sf-event {
    margin: 0 auto;
    max-width: 1200px;
}

.sf-event-hero {
    position: relative;
    border-radius: var(--sfe-radius);
    overflow: hidden;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #1c1e21, #3a3a3a);
    min-height: 320px;
}

.sf-event-hero-cover {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.sf-event-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.55;
}

.sf-event-hero-cover--placeholder {
    background: linear-gradient(135deg, #2c2e35 0%, #44464d 100%);
}

.sf-event-hero-overlay {
    position: relative;
    z-index: 2;
    padding: 30px 24px;
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
}

.sf-event-hero-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sf-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255,255,255,0.15);
    color: #fff;
    backdrop-filter: blur(4px);
}

.sf-event-badge--sim       { background: rgba(91,159,230,0.85); }
.sf-event-badge--cat       { background: rgba(255,255,255,0.18); }
.sf-event-badge--upcoming  { background: rgba(245,158,11,0.85); }
.sf-event-badge--live      { background: rgba(220,38,38,0.92); animation: sf-event-pulse 1.6s ease-in-out infinite; }
.sf-event-badge--completed { background: rgba(75,85,99,0.85); }
.sf-event-badge--ongoing   { background: rgba(91,159,230,0.85); }

.sf-event-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: sf-event-pulse 1.2s ease-in-out infinite;
}

@keyframes sf-event-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.sf-event-title {
    margin: 0;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.sf-event-subtitle {
    margin: 0;
    color: rgba(255,255,255,0.92);
    font-size: 16px;
    line-height: 1.4;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    max-width: 720px;
}

.sf-event-countdown {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.sf-event-countdown-item {
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
    min-width: 60px;
    color: #fff;
}

.sf-event-countdown-item span {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.sf-event-countdown-item em {
    display: block;
    font-style: normal;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.75);
    margin-top: 4px;
}

.sf-event-hero-actions {
    margin-top: 8px;
}

/* ==========================================================================
   Layout: main + sidebar
   ========================================================================== */

.sf-event-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
}

.sf-event-main {
    min-width: 0;
}

.sf-event-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 1024px) {
    .sf-event-layout {
        grid-template-columns: 1fr;
    }
    .sf-event-sidebar { order: -1; }
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.sf-event-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--sfe-border);
    margin-bottom: 18px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
}
.sf-event-tabs::-webkit-scrollbar { display: none; }

.sf-event-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    color: var(--sfe-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.12s, border-color 0.12s;
    white-space: nowrap;
    min-height: 44px;
}

.sf-event-tab:hover,
.sf-event-tab:focus {
    color: var(--sfe-text-primary);
    text-decoration: none;
}

.sf-event-tab.is-active {
    color: var(--sfe-text-primary);
    border-bottom-color: var(--sfe-accent);
    font-weight: 600;
}

.sf-event-tab-icon {
    font-size: 16px;
}

.sf-event-manage-btn {
    margin-left: auto;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--sfe-border);
    color: var(--sfe-text-secondary);
    padding: 6px 12px;
    border-radius: var(--sfe-radius-sm);
    cursor: pointer;
    font-size: 13px;
    align-self: center;
}
.sf-event-manage-btn:hover {
    background: var(--sfe-bg-hover);
    color: var(--sfe-text-primary);
}

/* ==========================================================================
   Content area
   ========================================================================== */

.sf-event-content {
    background: var(--sfe-bg-card);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius);
    padding: 22px;
    color: var(--sfe-text-primary);
    line-height: 1.55;
}

.sf-event-empty {
    color: var(--sfe-text-muted);
    text-align: center;
    padding: 30px 16px;
    margin: 0;
    font-style: italic;
}

.sf-event-overview-content + .sf-event-overview-blocks { margin-top: 24px; }
.sf-event-block { margin-bottom: 20px; }
.sf-event-block-title {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--sfe-text-primary);
}
.sf-event-block-media img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sfe-radius-sm);
    margin-bottom: 8px;
}

/* ==========================================================================
   Schedule (rounds)
   ========================================================================== */

.sf-event-rounds {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-event-round {
    display: grid;
    grid-template-columns: 60px 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: var(--sfe-bg-elevated);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius-sm);
    transition: border-color 0.12s ease;
}
.sf-event-round:hover { border-color: var(--sfe-link); }

.sf-event-round-num {
    font-weight: 800;
    color: var(--sfe-accent);
    font-size: 18px;
    text-align: center;
}

.sf-event-round-title {
    color: var(--sfe-text-primary);
    text-decoration: none;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-event-round-title:hover { text-decoration: underline; }

.sf-event-round-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--sfe-text-secondary);
    font-size: 13px;
    text-align: right;
}

.sf-event-status-mini {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sf-event-status-mini--upcoming  { background: rgba(245,158,11,0.15); color: var(--sfe-warning); }
.sf-event-status-mini--live      { background: rgba(220,38,38,0.15); color: var(--sfe-accent); }
.sf-event-status-mini--completed { background: rgba(107,114,128,0.15); color: var(--sfe-text-muted); }
.sf-event-status-mini--ongoing   { background: rgba(91,159,230,0.15); color: var(--sfe-link); }

@media (max-width: 640px) {
    .sf-event-round {
        grid-template-columns: 40px 1fr;
        grid-template-areas:
            "num title"
            "num meta"
            "num status";
        gap: 4px 12px;
    }
    .sf-event-round-num   { grid-area: num; align-self: start; padding-top: 4px; }
    .sf-event-round-title { grid-area: title; }
    .sf-event-round-meta  { grid-area: meta; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .sf-event-round .sf-event-status-mini { grid-area: status; justify-self: start; }
}

/* ==========================================================================
   Sidebar info card
   ========================================================================== */

.sf-event-info-card,
.sf-event-related {
    background: var(--sfe-bg-card);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius);
    padding: 18px;
    color: var(--sfe-text-primary);
}

.sf-event-info-card {
    position: sticky;
    top: 80px;
}

.sf-event-info-title {
    margin: 0 0 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sfe-text-muted);
    border-bottom: 1px solid var(--sfe-border);
    padding-bottom: 8px;
}

.sf-event-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--sfe-border);
    font-size: 13px;
}
.sf-event-info-row:last-child { border-bottom: none; }

.sf-event-info-label { color: var(--sfe-text-muted); flex-shrink: 0; }
.sf-event-info-value { color: var(--sfe-text-primary); font-weight: 500; text-align: right; }
.sf-event-info-link  { color: var(--sfe-link); text-decoration: none; }
.sf-event-info-link:hover { text-decoration: underline; }

.sf-event-info-cta {
    margin-top: 14px;
}

.sf-event-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 16px;
    border-radius: var(--sfe-radius-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: background 0.12s ease;
}

.sf-event-cta--primary {
    background: var(--sfe-accent);
    color: #fff;
}
.sf-event-cta--primary:hover {
    background: var(--sfe-accent-hover);
    color: #fff;
    text-decoration: none;
}

.sf-event-cta--disabled {
    background: var(--sfe-bg-hover);
    color: var(--sfe-text-muted);
    cursor: not-allowed;
}

/* Related events */
.sf-event-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sf-event-related-item a {
    display: flex;
    gap: 10px;
    padding: 6px;
    border-radius: var(--sfe-radius-sm);
    text-decoration: none;
    color: inherit;
}
.sf-event-related-item a:hover { background: var(--sfe-bg-hover); }
.sf-event-related-thumb img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
}
.sf-event-related-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sf-event-related-title {
    color: var(--sfe-text-primary);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sf-event-related-meta { font-size: 11px; }

/* ==========================================================================
   Manage panel + form helpers
   ========================================================================== */

.sf-event-manage-panel {
    margin-top: 18px;
    padding: 20px;
    background: var(--sfe-bg-card);
    border: 2px solid var(--sfe-accent);
    border-radius: var(--sfe-radius);
}

.sf-event-manage-panel h3 {
    margin: 0 0 12px;
}

.sf-event-manage-sections {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sf-event-manage-section label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    cursor: pointer;
    border-radius: var(--sfe-radius-sm);
}
.sf-event-manage-section label:hover { background: var(--sfe-bg-hover); }

.sf-event-manage-section.is-locked,
.sf-event-manage-section.is-auto {
    padding: 8px;
    color: var(--sfe-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sf-event-manage-section-name { font-weight: 500; color: var(--sfe-text-primary); }
.sf-event-manage-section-note {
    margin-left: auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sfe-text-muted);
}

.sf-event-btn-primary,
.sf-event-btn-secondary {
    padding: 8px 18px;
    border-radius: var(--sfe-radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    transition: all 0.12s;
}

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

.sf-event-btn-secondary {
    background: transparent;
    color: var(--sfe-text-secondary);
    border-color: var(--sfe-border-strong);
}
.sf-event-btn-secondary:hover {
    background: var(--sfe-bg-hover);
    color: var(--sfe-text-primary);
}

/* ==========================================================================
   Rules / Results — WYSIWYG render + edit form
   ========================================================================== */

.sf-event-rules-textarea {
    width: 100%;
    padding: 12px;
    background: var(--sfe-bg-card);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius-sm);
    color: var(--sfe-text-primary);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.sf-event-rules,
.sf-event-results {
    line-height: 1.6;
}

.sf-event-rules-actions {
    display: flex;
    gap: 8px;
}

/* ==========================================================================
   Chat / Complaints stream
   ========================================================================== */

.sf-event-chat-form {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--sfe-bg-page);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius);
}

.sf-event-chat-form textarea,
.sf-event-chat-form input[type="text"],
.sf-event-chat-form select {
    width: 100%;
    padding: 10px 12px;
    background: var(--sfe-bg-card);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius-sm);
    color: var(--sfe-text-primary);
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}
.sf-event-chat-form textarea { resize: vertical; min-height: 70px; }

.sf-event-chat-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.sf-event-chat-attach {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sfe-text-secondary);
    font-size: 13px;
    cursor: pointer;
}
.sf-event-chat-attach input[type="file"] { display: none; }
.sf-event-chat-attach span { padding: 6px 10px; border-radius: var(--sfe-radius-sm); }
.sf-event-chat-attach:hover span { background: var(--sfe-bg-hover); color: var(--sfe-text-primary); }

.sf-event-form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sfe-text-secondary);
    margin: 8px 0 4px;
}

.sf-event-chat-stream {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sf-event-chat-item {
    display: flex;
    gap: 12px;
    padding: 10px 8px;
    border-radius: var(--sfe-radius-sm);
    transition: background 0.12s ease;
}
.sf-event-chat-item:hover { background: var(--sfe-bg-hover); }

.sf-event-chat-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
}

.sf-event-chat-body { flex: 1 1 auto; min-width: 0; }
.sf-event-chat-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.sf-event-chat-author { font-weight: 600; color: var(--sfe-text-primary); font-size: 14px; }
.sf-event-chat-time   { font-size: 12px; color: var(--sfe-text-muted); }
.sf-event-chat-content { color: var(--sfe-text-primary); font-size: 14px; line-height: 1.5; word-wrap: break-word; }

.sf-event-chat-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--sfe-bg-hover);
    color: var(--sfe-text-muted);
}
.sf-event-chat-tag--complaint { background: rgba(220,38,38,0.15); color: var(--sfe-accent); }

.sf-event-chat-attachment img { margin-top: 6px; max-width: 100%; height: auto; border-radius: var(--sfe-radius-sm); }

.sf-event-chat-login {
    padding: 12px;
    background: var(--sfe-bg-page);
    border-radius: var(--sfe-radius-sm);
    color: var(--sfe-text-secondary);
    font-size: 13px;
    text-align: center;
}

/* ==========================================================================
   Media grid
   ========================================================================== */

.sf-event-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.sf-event-media-item {
    display: block;
    overflow: hidden;
    border-radius: var(--sfe-radius-sm);
    background: var(--sfe-bg-page);
    aspect-ratio: 1 / 1;
    position: relative;
}

.sf-event-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}
.sf-event-media-item:hover img { transform: scale(1.04); }

/* ==========================================================================
   Mobile (≤ 640px)
   ========================================================================== */

@media (max-width: 640px) {
    .sf-event-hero-overlay {
        padding: 20px 16px;
        min-height: 280px;
    }
    .sf-event-title { font-size: 24px; }
    .sf-event-subtitle { font-size: 14px; }
    .sf-event-countdown { gap: 6px; }
    .sf-event-countdown-item { padding: 6px 8px; min-width: 50px; }
    .sf-event-countdown-item span { font-size: 18px; }

    .sf-event-content { padding: 16px; }
    .sf-event-info-card { position: static; }
}

/* ==========================================================================
   Team tab + roles
   ========================================================================== */

.sf-event-team-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.sf-event-team-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--sfe-bg-elevated);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius-sm);
    align-items: center;
}

.sf-event-team-card.is-open-slot {
    background: transparent;
    border-style: dashed;
    border-color: var(--sfe-border-strong);
}

.sf-event-team-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--sfe-bg-page);
    border-radius: 50%;
    flex-shrink: 0;
}

.sf-event-team-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.sf-event-team-role {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sfe-text-muted);
}
.sf-event-team-name {
    font-weight: 600;
    color: var(--sfe-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-event-team-name--open { color: var(--sfe-text-muted); font-style: italic; font-weight: 400; }

.sf-event-team-user {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sf-event-team-user img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
}

.sf-event-team-apply { margin-top: 4px; align-self: flex-start; }

/* Apply modal */
.sf-event-apply-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}
.sf-event-apply-modal[hidden] { display: none; }
.sf-event-apply-modal-content {
    background: var(--sfe-bg-card);
    color: var(--sfe-text-primary);
    border-radius: var(--sfe-radius);
    padding: 22px;
    max-width: 480px;
    width: 100%;
}
.sf-event-apply-modal-content h4 { margin: 0 0 12px; }
.sf-event-apply-modal-content select,
.sf-event-apply-modal-content textarea,
.sf-event-apply-modal-content input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    background: var(--sfe-bg-page);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius-sm);
    color: var(--sfe-text-primary);
    font-family: inherit;
    box-sizing: border-box;
}
.sf-event-apply-actions { display: flex; gap: 8px; margin-top: 12px; }

.sf-event-team-applications-title { margin-top: 20px; }

.sf-event-team-applications {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-event-team-application {
    padding: 10px;
    background: var(--sfe-bg-page);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius-sm);
}
.sf-event-team-app-user   { font-weight: 600; }
.sf-event-team-app-role   { color: var(--sfe-link); font-weight: 500; }
.sf-event-team-app-message { margin-top: 4px; color: var(--sfe-text-secondary); font-size: 13px; }
.sf-event-team-app-actions { margin-top: 8px; display: flex; gap: 6px; }

/* ==========================================================================
   Manage roles form
   ========================================================================== */

.sf-event-manage-roles-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.sf-event-manage-role-row {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 100px 1fr;
    gap: 6px;
    align-items: center;
}
.sf-event-manage-role-row select,
.sf-event-manage-role-row input {
    padding: 6px 8px;
    background: var(--sfe-bg-page);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius-sm);
    color: var(--sfe-text-primary);
    font-family: inherit;
    font-size: 13px;
}
@media (max-width: 640px) {
    .sf-event-manage-role-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Participants
   ========================================================================== */

.sf-event-participants {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.sf-event-class-title {
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--sfe-border);
    color: var(--sfe-text-primary);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sf-event-class-count {
    background: var(--sfe-bg-page);
    color: var(--sfe-text-muted);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    margin-left: 8px;
    font-weight: 500;
}

.sf-event-participants-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sf-event-participant {
    display: grid;
    grid-template-columns: 50px 36px 1fr auto;
    gap: 10px;
    padding: 8px;
    align-items: center;
    border-radius: var(--sfe-radius-sm);
}
.sf-event-participant:hover { background: var(--sfe-bg-hover); }

.sf-event-participant-num {
    font-weight: 800;
    color: var(--sfe-accent);
    text-align: center;
    font-size: 16px;
}
.sf-event-participant-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: block;
}
.sf-event-participant-name { font-weight: 500; }
.sf-event-participant-car {
    color: var(--sfe-text-secondary);
    font-size: 13px;
    text-align: right;
}

.sf-event-join-form {
    margin-top: 18px;
    padding: 14px;
    background: var(--sfe-bg-page);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sf-event-join-form input[type="text"],
.sf-event-join-form select {
    width: 100%;
    padding: 10px 12px;
    background: var(--sfe-bg-card);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius-sm);
    color: var(--sfe-text-primary);
    font-family: inherit;
    box-sizing: border-box;
}

.sf-event-participant-self {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(91,159,230,0.08);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

@media (max-width: 640px) {
    .sf-event-participant {
        grid-template-columns: 40px 32px 1fr;
        grid-template-areas:
            "num avatar name"
            "num avatar car";
        gap: 4px 8px;
    }
    .sf-event-participant-num    { grid-area: num; }
    .sf-event-participant-avatar { grid-area: avatar; }
    .sf-event-participant-name   { grid-area: name; }
    .sf-event-participant-car    { grid-area: car; text-align: left; font-size: 12px; }
}

/* ==========================================================================
   Archive (events)
   ========================================================================== */

.sf-events-archive {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 16px;
}

.sf-events-archive-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.sf-events-archive-title {
    margin: 0;
    color: var(--sfe-text-primary);
}

.sf-events-archive-search {
    display: flex;
    gap: 6px;
}
.sf-events-archive-search input[type="search"] {
    padding: 8px 12px;
    background: var(--sfe-bg-card);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius-sm);
    color: var(--sfe-text-primary);
    font-size: 14px;
}

.sf-events-archive-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
}

.sf-events-archive-filters {
    color: var(--sfe-text-primary);
}

.sf-events-archive-filters-details summary {
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    color: var(--sfe-text-muted);
    padding: 6px 0;
    list-style: none;
}
.sf-events-archive-filters-details summary::-webkit-details-marker { display: none; }

.sf-events-archive-filter-group { margin: 14px 0; }
.sf-events-archive-filter-title {
    margin: 0 0 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sfe-text-muted);
}
.sf-events-archive-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sf-events-archive-filter-link {
    display: block;
    padding: 6px 10px;
    color: var(--sfe-text-secondary);
    text-decoration: none;
    border-radius: var(--sfe-radius-sm);
    font-size: 14px;
}
.sf-events-archive-filter-link:hover { background: var(--sfe-bg-hover); color: var(--sfe-text-primary); }
.sf-events-archive-filter-link.is-active {
    background: var(--sfe-bg-active);
    color: var(--sfe-text-primary);
    font-weight: 600;
}

.sf-events-archive-clear {
    display: inline-block;
    margin-top: 12px;
}

.sf-events-archive-count {
    color: var(--sfe-text-muted);
    font-size: 13px;
    margin: 0 0 14px;
}

.sf-events-archive-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.sf-events-archive-card {
    background: var(--sfe-bg-card);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sf-events-archive-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.sf-events-archive-card-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #2c2e35 0%, #44464d 100%);
}
.sf-events-archive-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sf-events-archive-card-cover .sf-event-status-mini {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.65);
    color: #fff;
}

.sf-events-archive-card-fav {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
}
.sf-events-archive-card-cover .sf-event-status-mini--upcoming  { background: rgba(245,158,11,0.92); }
.sf-events-archive-card-cover .sf-event-status-mini--live      { background: rgba(220,38,38,0.92); color: #fff; }
.sf-events-archive-card-cover .sf-event-status-mini--completed { background: rgba(75,85,99,0.85); }

.sf-events-archive-card-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2c2e35, #44464d);
}

.sf-events-archive-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}

.sf-events-archive-card-meta {
    display: flex;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sfe-text-muted);
}
.sf-events-archive-card-sim,
.sf-events-archive-card-type {
    background: var(--sfe-bg-page);
    padding: 2px 8px;
    border-radius: 999px;
}

.sf-events-archive-card-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    color: var(--sfe-text-primary);
}
.sf-events-archive-card-title a {
    color: inherit;
    text-decoration: none;
}
.sf-events-archive-card-title a:hover { text-decoration: underline; }

.sf-events-archive-card-date {
    color: var(--sfe-text-secondary);
    font-size: 13px;
}

.sf-events-archive-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--sfe-border);
    font-size: 12px;
    color: var(--sfe-text-secondary);
}

.sf-events-archive-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--sfe-text-muted);
    background: var(--sfe-bg-card);
    border: 1px dashed var(--sfe-border);
    border-radius: var(--sfe-radius);
}

.sf-events-archive-pagination {
    margin-top: 20px;
    text-align: center;
}
.sf-events-archive-pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 2px;
    color: var(--sfe-text-secondary);
    border: 1px solid var(--sfe-border);
    border-radius: var(--sfe-radius-sm);
    text-decoration: none;
}
.sf-events-archive-pagination .page-numbers.current {
    background: var(--sfe-accent);
    border-color: var(--sfe-accent);
    color: #fff;
}

@media (max-width: 768px) {
    .sf-events-archive-layout {
        grid-template-columns: 1fr;
    }
    .sf-events-archive-filters-details { border: 1px solid var(--sfe-border); border-radius: var(--sfe-radius-sm); padding: 8px 12px; background: var(--sfe-bg-card); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .sf-event-badge--live,
    .sf-event-live-dot,
    .sf-event-media-item img,
    .sf-event-tab,
    .sf-event-round {
        animation: none !important;
        transition: none !important;
    }
}