/*
 * sectors.css — Design System Settore-Aware
 *
 * Ogni settore sportivo gestito dal sistema ha una palette distinta per
 * distinguere visivamente le manifestazioni nelle liste e le pagine di
 * dettaglio. Questo è il sistema che abilita la differenziazione "a colpo
 * d'occhio" senza bisogno di leggere il testo.
 *
 * I settori attivi oggi:
 *   - Nuoto (azzurro/blu — tonalità 'deep' esistente)
 *   - Sincro (magenta/rosa — nuova palette 'sync')
 *   - Pallanuoto (predisposta, non ancora attivata)
 *
 * USO:
 *   - Badge: classe `badge-sector-<code>` (già esistente in tables.css)
 *   - Card lista: classe `.event-card--sector-<code>` su elemento card
 *   - Pagina dettaglio: `<body data-sector="<code>">` o wrapper con attributo
 *   - Icona: template tag `{% sector_icon event.sector.code %}`
 *
 * ACCESSIBILITÀ:
 *   - Il colore è rinforzo, non unico canale: icone + badge testuale sempre
 *     presenti (importante per daltonici).
 *   - Contrasto badge testo/sfondo ≥ 4.5:1 (WCAG AA).
 */

:root,
[data-theme="corsia"] {
    /* ── Sincro (magenta) — scala allineata al restyling Corsia ── */
    --sync-50: #FBF0F5;
    --sync-100: #F8E3EE;
    --sync-200: #F0C4DA;
    --sync-300: #E394BC;
    --sync-400: #D2609A;
    --sync-500: #C0437F;
    --sync-600: #B0306B;
    --sync-700: #962A5C;
    --sync-800: #7D1F4B;
    --sync-900: #5E1739;

    /* ── Settore Nuoto (petrolio, docs/restyling/01 §3) ── */
    --sector-nuoto-fill: #D7ECEA;
    --sector-nuoto-border: #1A8A8F;
    --sector-nuoto-text: #0A4F57;
    --sector-nuoto-accent: #0E6E78;

    /* ── Settore Sincro (magenta) ──────────────────── */
    --sector-sincro-fill: #F8E3EE;
    --sector-sincro-border: #C0437F;
    --sector-sincro-text: #7D1F4B;
    --sector-sincro-accent: #B0306B;

    /* ── Settore Pallanuoto (predisposto, non attivo) ──
       Quando si aggiunge il modulo pallanuoto, decommentare e aggiungere
       le classi corrispondenti (stesso pattern di nuoto/sincro).

       --sector-pallanuoto-fill: #FBEFD9;
       --sector-pallanuoto-border: #D69A3A;
       --sector-pallanuoto-text: #7A4F12;
       --sector-pallanuoto-accent: #B7791F;
    */

    /* ── Settore Fallback (sconosciuto o multi-settore) */
    --sector-default-fill: var(--c-surface-alt);
    --sector-default-border: var(--c-line-strong);
    --sector-default-text: var(--c-ink-muted);
    --sector-default-accent: var(--c-ink-muted);
}

[data-theme="notturna"] {
    --sector-nuoto-fill: #10262B;
    --sector-nuoto-border: #4FD1E8;
    --sector-nuoto-text: #9BE7F2;
    --sector-nuoto-accent: #4FD1E8;
    --sector-sincro-fill: #2A1520;
    --sector-sincro-border: #FF7AB8;
    --sector-sincro-text: #FFC0DC;
    --sector-sincro-accent: #FF7AB8;
}

/* ================================================================
 * Card manifestazione con bordo sinistro colorato per settore
 * (Uso: classe `event-card--sector-<code>` sul contenitore card)
 * ================================================================ */

.event-card--sector-nuoto {
    border-left: 4px solid var(--sector-nuoto-border);
}

.event-card--sector-sincro {
    border-left: 4px solid var(--sector-sincro-border);
}

.event-card--sector-default {
    border-left: 4px solid var(--sector-default-border);
}

/* ================================================================
 * Righe tabella lista manifestazioni con indicatore settore
 * (applicato come border-left sulla prima cella per compatibilità
 * cross-browser; i <tr> con border-left non si comportano bene)
 * ================================================================ */

.event-row--sector-nuoto td:first-child {
    border-left: 4px solid var(--sector-nuoto-border);
    padding-left: 10px;
}

.event-row--sector-sincro td:first-child {
    border-left: 4px solid var(--sector-sincro-border);
    padding-left: 10px;
}

.event-row--sector-default td:first-child {
    border-left: 4px solid var(--sector-default-border);
    padding-left: 10px;
}

/* Leggero tint di fondo quando la riga è hoverata — rinforza
   la percezione del settore */
.event-row--sector-nuoto:hover {
    background: var(--sector-nuoto-fill);
}

.event-row--sector-sincro:hover {
    background: var(--sector-sincro-fill);
}

/* ================================================================
 * Icona settore inline (usata prima del nome manifestazione)
 * Il template tag `{% sector_icon %}` aggiunge la classe .sector-icon
 * con il colore corretto per settore.
 * ================================================================ */

.sector-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    vertical-align: middle;
}

.sector-icon--nuoto {
    color: var(--sector-nuoto-accent);
}

.sector-icon--sincro {
    color: var(--sector-sincro-accent);
}

.sector-icon--default {
    color: var(--sector-default-accent);
}

.sector-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Wrapper per nome evento + icona settore + eventuali badge inline */
.event-name-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.event-name-wrapper .event-name-link {
    font-weight: 500;
}

/* ================================================================
 * Accent page-header quando `[data-sector="<code>"]` è sull'antenato
 * (pagina dettaglio evento)
 * ================================================================ */

[data-sector="nuoto"] .page-header {
    border-bottom: 3px solid var(--sector-nuoto-border);
    padding-bottom: 12px;
}

[data-sector="sincro"] .page-header {
    border-bottom: 3px solid var(--sector-sincro-border);
    padding-bottom: 12px;
}

[data-sector="nuoto"] .page-header h1::before,
[data-sector="sincro"] .page-header h1::before {
    display: inline-block;
    margin-right: 10px;
    width: 28px;
    height: 28px;
    vertical-align: -6px;
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Fondale di sfumatura leggerissima in alto alla pagina dettaglio,
   per comunicare il settore senza essere invasivi */
[data-sector="nuoto"] .hub-head {
    box-shadow: inset 0 4px 0 var(--sector-nuoto-border);
}

[data-sector="sincro"] .hub-head {
    box-shadow: inset 0 4px 0 var(--sector-sincro-border);
}

/* ================================================================
 * Badge settore (override per usare le nuove variabili —
 * le classi badge-sector-nuoto/sincro erano già definite in
 * tables.css ma usando colori 'aqua' e 'deep' che non erano
 * distinti abbastanza.
 * ================================================================ */

.badge-sector-nuoto {
    background: var(--sector-nuoto-fill);
    color: var(--sector-nuoto-text);
    font-weight: 500;
}

.badge-sector-sincro {
    background: var(--sector-sincro-fill);
    color: var(--sector-sincro-text);
    font-weight: 500;
}

/* ================================================================
 * Responsive: mantieni la differenziazione anche su mobile
 * (riduci solo le dimensioni icona)
 * ================================================================ */

@media (max-width: 768px) {
    .sector-icon {
        width: 18px;
        height: 18px;
    }

    [data-sector="nuoto"] .page-header h1::before,
    [data-sector="sincro"] .page-header h1::before {
        width: 22px;
        height: 22px;
        vertical-align: -4px;
    }
}

/* ================================================================
 * Dark mode friendly (se mai attivato)
 * ================================================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --sector-nuoto-fill: rgba(14, 165, 233, 0.12);
        --sector-sincro-fill: rgba(236, 72, 153, 0.12);
        --sector-default-fill: rgba(100, 116, 139, 0.15);
    }
}