/* ========================================
   BRAND CUSTOMIZATION SECTION
   Modifica questa sezione per personalizzare per ogni cliente
   ======================================== */

:root {
    /* ========================================
       BRAND COLORS - Modifica questi per ogni cliente
       ======================================== */
    --brand-primary: #FF6B35;        /* Colore principale (arancione KeepLive) */
    --brand-primary-hover: #ff5520;  /* Hover del colore principale */
    --brand-primary-light: #ffb89d;  /* Versione chiara */
    --brand-primary-lighter: #fff5f2; /* Versione molto chiara per sfondi */
    --brand-primary-dark: #8b3619;   /* Versione scura */

    --brand-secondary: #1a1a1a;      /* Colore secondario (nero) */
    --brand-secondary-light: #6b6b6b;
    --brand-white: #ffffff;
    --brand-gray: #f3f4f6;
    --brand-gray-dark: #4b5563;

    /* Boulder Colors (evita arancione brand e blu categoria) */
    --boulder-b1: #16a34a;           /* Verde scuro */
    --boulder-b2: #8b5cf6;           /* Viola */
    --boulder-b3: #f59e0b;           /* Ambra/Arancio caldo */
    --boulder-b4: #06b6d4;           /* Ciano */

    /* Category Colors (M/F) */
    --brand-male: #3b82f6;           /* Blu */
    --brand-female: #ec4899;         /* Rosa */

    /* ========================================
       THEME COLORS - Per supporto tema chiaro/scuro
       ======================================== */

    /* Status Colors */
    --status-success: #22c55e;       /* Verde - connesso/ok */
    --status-error: #ef4444;         /* Rosso - errore/disconnesso */
    --status-warning: #f59e0b;       /* Giallo - attenzione */
    --status-info: #3b82f6;          /* Blu - informazione */

    /* Background Colors */
    --bg-primary: #ffffff;           /* Sfondo principale */
    --bg-secondary: #f8f9fa;         /* Sfondo secondario (modal body) */
    --bg-tertiary: #f3f4f6;          /* Sfondo terziario (card, panel) */
    --bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d1810 50%, #3d2010 100%);

    /* Text Colors */
    --text-primary: #1a1a1a;         /* Testo principale */
    --text-secondary: #4b5563;       /* Testo secondario */
    --text-tertiary: #6b6b6b;        /* Testo terziario/muted */
    --text-placeholder: rgba(0, 0, 0, 0.4);
    --text-on-primary: #ffffff;      /* Testo su sfondo brand-primary */
    --text-on-dark: #ffffff;         /* Testo su sfondo scuro */

    /* Border Colors */
    --border-light: #e5e7eb;         /* Bordo chiaro */
    --border-medium: #d1d5db;        /* Bordo medio */
    --border-subtle: rgba(0, 0, 0, 0.08);  /* Bordo sottile */
    --border-input: rgba(0, 0, 0, 0.15);   /* Bordo input */

    /* Overlay Colors */
    --overlay-dark-light: rgba(0, 0, 0, 0.15);
    --overlay-dark-medium: rgba(0, 0, 0, 0.3);
    --overlay-dark-heavy: rgba(0, 0, 0, 0.7);
    --overlay-light-subtle: rgba(255, 255, 255, 0.1);
    --overlay-light-medium: rgba(255, 255, 255, 0.2);
    --overlay-light-strong: rgba(255, 255, 255, 0.8);

    /* Interactive States */
    --btn-disabled-bg: #e5e5e5;
    --btn-disabled-text: #999999;
    --btn-disabled-border: #cccccc;
    --input-focus-shadow: rgba(255, 107, 53, 0.15);

    /* Success/Selection Colors */
    --success-bg: #dcfce7;
    --success-border: #22c55e;
    --success-text: #16a34a;

    /* Danger Colors */
    --danger-color: #dc3545;
    --danger-hover: #c82333;

    /* ========================================
       SIZING & LAYOUT
       ======================================== */

    /* Logo & Header Sizing */
    --logo-height: 60px;
    --header-title-size: 22px;

    /* Border Radius - 0 per squadrato, aumenta per arrotondato */
    --border-radius: 0;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 12px;

    /* Shadows */
    --shadow-primary: 0 4px 20px rgba(255, 107, 53, 0.3);
    --shadow-secondary: 0 4px 20px rgba(255, 107, 53, 0.2);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ========================================
   DARK THEME
   Applied when html has class 'dark-theme'
   ======================================== */

html.dark-theme {
    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2d2d2d;
    --bg-gradient: linear-gradient(135deg, #0d0d0d 0%, #1a1510 50%, #241810 100%);

    /* Text Colors */
    --text-primary: #f0f0f0;
    --text-secondary: #b0b0b0;
    --text-tertiary: #909090;
    --text-placeholder: rgba(255, 255, 255, 0.4);
    --text-on-dark: #f0f0f0;

    /* Border Colors */
    --border-light: #3d3d3d;
    --border-medium: #4d4d4d;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-input: rgba(255, 255, 255, 0.15);

    /* Brand Colors - Adjusted for dark backgrounds */
    /* NOTA: --brand-white NON viene sovrascritto per mantenere il testo bianco sui pulsanti */
    --brand-gray: #2d2d2d;
    --brand-gray-dark: #a0a0a0;
    --brand-primary-lighter: rgba(255, 107, 53, 0.15);
    --brand-secondary: #f0f0f0;
    --brand-secondary-light: #4a4a4a;

    /* Interactive States */
    --btn-disabled-bg: #3d3d3d;
    --btn-disabled-text: #666666;
    --btn-disabled-border: #4d4d4d;
    --input-focus-shadow: rgba(255, 107, 53, 0.25);

    /* Success Colors */
    --success-bg: rgba(34, 197, 94, 0.15);
    --success-border: #4ade80;
    --success-text: #4ade80;

    /* Danger Colors */
    --danger-color: #f87171;
    --danger-hover: #ef4444;

    /* Overlays */
    --overlay-dark-light: rgba(0, 0, 0, 0.3);
    --overlay-dark-medium: rgba(0, 0, 0, 0.5);
    --overlay-dark-heavy: rgba(0, 0, 0, 0.85);
    --overlay-light-subtle: rgba(255, 255, 255, 0.05);
    --overlay-light-medium: rgba(255, 255, 255, 0.1);
    --overlay-light-strong: rgba(255, 255, 255, 0.2);

    /* Shadows - More subtle on dark backgrounds */
    --shadow-primary: 0 4px 20px rgba(255, 107, 53, 0.2);
    --shadow-secondary: 0 4px 20px rgba(255, 107, 53, 0.15);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ----------------------------------------
   Dark Theme - Component Overrides
   ---------------------------------------- */

/* Header - sfondo scuro */
html.dark-theme .header {
    background: var(--bg-secondary);
    box-shadow: none;
}

/* Header Buttons - sfondo scuro */
html.dark-theme .header-btn {
    background: var(--bg-tertiary);
}

html.dark-theme .header-btn:hover {
    background: var(--border-light);
}

html.dark-theme .header-lang-select {
    background: var(--bg-tertiary);
    color: var(--brand-primary);
}
html.dark-theme .header-lang-select:hover {
    background: var(--brand-primary);
    color: var(--brand-white);
}
html.dark-theme .header-lang-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Panel - sfondo scuro */
html.dark-theme .panel {
    background: var(--bg-secondary);
}

/* Discipline Selector */
html.dark-theme .discipline-selector {
    background: var(--bg-secondary);
}

html.dark-theme .discipline-buttons button {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

html.dark-theme .discipline-buttons button:not(.btn-disabled):not(:disabled):hover {
    background: var(--border-light);
}

html.dark-theme .discipline-buttons button.btn-enabled {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

html.dark-theme .discipline-buttons button.btn-active {
    background: var(--brand-primary);
    color: #ffffff;
    border-color: var(--brand-primary);
}

/* Paraclimbing Category Items */
html.dark-theme .para-cat-item,
html.dark-theme .para-cat-available {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

html.dark-theme .para-cat-available .cat-name {
    color: var(--text-primary);
}

html.dark-theme .para-cat-list {
    background: var(--bg-primary);
}

html.dark-theme .para-cat-list.available {
    background: rgba(255, 107, 53, 0.08);
}

html.dark-theme .para-cat-column-header {
    background: #4d4d4d;
    color: #ffffff;
}

html.dark-theme .para-cat-column.display-sx .para-cat-column-header,
html.dark-theme .para-cat-column-header.sx {
    background: var(--brand-primary);
    color: white;
}

html.dark-theme .para-cat-actions {
    border-top-color: var(--border-light);
}

html.dark-theme .cat-arrow-parete {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-secondary);
}

html.dark-theme .cat-arrow-parete:hover {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}

/* Rounds Modal - Paraclimbing pareti */
html.dark-theme .para-parete-item {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

html.dark-theme .para-parete-display button {
    background: var(--bg-primary);
    border-color: var(--border-light);
    color: var(--text-secondary);
}

html.dark-theme .para-parete-display button.active-sx {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}

html.dark-theme .para-parete-display button:hover {
    background: var(--border-light);
    color: var(--text-primary);
}

html.dark-theme .para-parete-row label {
    color: var(--text-secondary);
}

html.dark-theme .para-parete-row input,
html.dark-theme .para-pareti-header input {
    background: var(--bg-primary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

html.dark-theme .para-pareti-order {
    border-top-color: var(--border-light);
}

html.dark-theme .para-order-item {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

html.dark-theme .para-order-item .order-buttons button {
    background: var(--bg-primary);
    border-color: var(--border-light);
    color: var(--text-secondary);
}

html.dark-theme .para-order-item .order-buttons button:hover:not(:disabled) {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}

html.dark-theme .para-order-item .order-buttons button:disabled {
    opacity: 0.2;
}

html.dark-theme .para-order-empty {
    color: var(--text-tertiary);
}

/* Ordine pareti headers - colori espliciti in dark */
html.dark-theme .para-order-header.dx {
    background: #3b82f6;
}

/* Pulsanti SX/DX pareti - colore esplicito DX in dark */
html.dark-theme .para-parete-display button.active-dx {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Colonna header DX nel modal categorie */
html.dark-theme .para-cat-column.display-dx .para-cat-column-header,
html.dark-theme .para-cat-column-header.dx {
    background: #3b82f6;
}

/* Step Tot Config */
html.dark-theme .step-tot-config {
    background: rgba(255, 107, 53, 0.08);
    border-left-color: var(--brand-primary);
}

html.dark-theme .step-tot-row input {
    background: var(--bg-primary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

html.dark-theme .step-tot-row label {
    color: var(--text-primary);
}

/* Modal */
html.dark-theme .modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}

html.dark-theme .modal-header {
    border-bottom-color: var(--border-light);
}

html.dark-theme .modal-footer {
    border-top-color: var(--border-light);
}

/* Form Inputs */
html.dark-theme .form-input,
html.dark-theme .form-select,
html.dark-theme .settings-input,
html.dark-theme .settings-select,
html.dark-theme input[type="text"],
html.dark-theme input[type="number"],
html.dark-theme input[type="password"],
html.dark-theme input[type="email"],
html.dark-theme select,
html.dark-theme textarea {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-input);
}

html.dark-theme .form-input:focus,
html.dark-theme .form-select:focus,
html.dark-theme .settings-input:focus,
html.dark-theme .settings-select:focus,
html.dark-theme input:focus,
html.dark-theme select:focus,
html.dark-theme textarea:focus {
    border-color: var(--brand-primary);
    background: var(--bg-secondary);
}

html.dark-theme .form-input::placeholder,
html.dark-theme input::placeholder,
html.dark-theme textarea::placeholder {
    color: var(--text-placeholder);
}

/* Settings Groups */
html.dark-theme .settings-group {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

/* Info Boxes */
html.dark-theme .info-box {
    background: rgba(255, 107, 53, 0.1);
    border-color: var(--brand-primary);
}

/* User Info in Header */
html.dark-theme .user-info {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Header Buttons - Icon color adjustment */
html.dark-theme .header-btn:not(.event-btn):not(.regia-btn):not(.theme-toggle) img {
    filter: brightness(0) saturate(100%) invert(55%) sepia(100%) saturate(500%) hue-rotate(340deg) brightness(100%);
}

html.dark-theme .header-btn:not(.event-btn):not(.regia-btn):not(.theme-toggle):hover img {
    filter: brightness(0) saturate(100%) invert(100%);
}

/* Status Button */
html.dark-theme .status-btn.connected {
    border-color: var(--status-success);
}

html.dark-theme .status-btn:not(.connected) {
    border-color: var(--status-error);
}

/* Role Badges */
html.dark-theme .badge-admin {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
}

html.dark-theme .badge-manager {
    background: rgba(37, 99, 235, 0.2);
    color: #60a5fa;
}

html.dark-theme .badge-operatore {
    background: rgba(22, 163, 74, 0.2);
    color: #4ade80;
}

/* Buttons - Secondary */
html.dark-theme .btn-secondary {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

html.dark-theme .btn-secondary:hover {
    background: var(--border-light);
}

/* Panel Content */
html.dark-theme .panel-content {
    background: var(--bg-secondary);
}

/* Tabs */
html.dark-theme .tab-btn {
    color: var(--text-secondary);
}

html.dark-theme .tab-btn:hover {
    background: var(--bg-tertiary);
}

html.dark-theme .tab-btn.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

/* Control Groups */
html.dark-theme .control-group {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

html.dark-theme .control-group h4 {
    color: var(--text-primary);
}

/* Collapsible */
html.dark-theme .collapsible-header {
    background: var(--bg-tertiary);
}

html.dark-theme .collapsible-header:hover {
    background: var(--border-light);
}

html.dark-theme .collapsible-content {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

/* Cards in Lobby */
html.dark-theme .item-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-light);
}

html.dark-theme .item-card:hover {
    border-color: var(--brand-primary);
    background: rgba(255, 255, 255, 0.08);
}

/* Scrollbars (WebKit) */
html.dark-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark-theme ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

html.dark-theme ::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 4px;
}

html.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Lobby - Tabs */
html.dark-theme .lobby-tab {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

html.dark-theme .lobby-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

html.dark-theme .lobby-tab.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
}

/* Lobby - Header Actions */
html.dark-theme .btn-header-action {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

html.dark-theme .btn-header-action:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Lobby - Event Filters */
html.dark-theme .event-filters {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

/* Lobby - Selectable Lists */
html.dark-theme .selectable-list {
    border-color: var(--border-light);
}

html.dark-theme .selectable-item {
    border-bottom-color: var(--border-subtle);
}

html.dark-theme .selectable-item:hover {
    background: var(--bg-tertiary);
}

html.dark-theme .selectable-item.selected {
    background: rgba(255, 107, 53, 0.15);
    border-color: var(--brand-primary);
}

/* Lobby - Item Links */
html.dark-theme .item-link {
    background: var(--bg-tertiary);
    border-color: var(--border-subtle);
}

html.dark-theme .item-link:hover {
    background: var(--border-light);
    border-color: var(--brand-primary);
}

/* Lobby - Loading Overlay */
html.dark-theme .loading-overlay {
    background: rgba(26, 26, 26, 0.85);
}

/* Lobby - Activity Log */
html.dark-theme .log-item {
    border-bottom-color: var(--border-subtle);
}

html.dark-theme .log-item:hover {
    background: var(--bg-tertiary);
}

/* Lobby - Theme Card */
html.dark-theme .theme-card {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.3);
}

/* Lobby - Preview buttons: mantieni colori originali blu */
html.dark-theme .item-link-preview,
html.dark-theme .item-link-preview-main,
html.dark-theme .item-link-preview.blue,
html.dark-theme .item-link.preview {
    /* Non sovrascrivere - mantieni blu originale */
}

/* Lobby - Control button nelle card: mantieni arancione */
html.dark-theme .item-link.control {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
}

html.dark-theme .item-link.control:hover {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

/* Buttons - Fix colori nel dark theme */
html.dark-theme .btn-danger {
    background: #2d2d2d;
    color: #ffffff;
}

html.dark-theme .btn-danger:hover {
    background: #3d3d3d;
}

html.dark-theme .btn-danger-dim {
    background: #3d3d3d;
    color: #a0a0a0;
}

html.dark-theme .btn-danger-dim:hover {
    background: #4d4d4d;
}

/* btn-success mantiene arancione con testo bianco */
html.dark-theme .btn-success {
    background: var(--brand-primary);
    color: #ffffff;
}

html.dark-theme .btn-success-dim {
    background: rgba(255, 107, 53, 0.2);
    color: var(--brand-primary);
}

/* btn-active e btn-enabled nel dark theme */
html.dark-theme .btn-active {
    background: var(--brand-primary);
    color: #ffffff;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.3);
}

/* Buttons Disabled - Scuri nel dark theme */
html.dark-theme .btn-primary:disabled,
html.dark-theme .btn-secondary:disabled,
html.dark-theme .btn-active:disabled,
html.dark-theme button:disabled,
html.dark-theme .btn-disabled {
    background: #1a1a1a !important;
    border-color: #2d2d2d !important;
    color: #555555 !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Logo dark/light mode */
.logo-dark { display: none; }
html.dark-theme .logo-light { display: none; }
html.dark-theme .logo-dark { display: inline; }

/* Header lang select - bordi arancioni coerenti in dark */
html.dark-theme .header-lang-select {
    border-color: var(--brand-primary);
}

/* Header secondary - meno acceso con trasparenza */
html.dark-theme .header-secondary {
    background: rgba(255, 107, 53, 0.12);
}

html.dark-theme .header-secondary .event-title {
    color: var(--text-primary);
}

html.dark-theme .header-secondary .event-title::before {
    background: var(--brand-primary);
    box-shadow: 0 0 6px rgba(255, 107, 53, 0.5);
}

html.dark-theme .header-secondary .header-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--brand-primary);
}

html.dark-theme .header-secondary .header-btn:hover {
    background: rgba(255, 107, 53, 0.2);
    border-color: var(--brand-primary);
}

html.dark-theme .header-secondary .header-btn img {
    filter: brightness(0) saturate(100%) invert(55%) sepia(100%) saturate(500%) hue-rotate(340deg) brightness(100%);
}

/* Panel subtitle - border molto piu' trasparente */
html.dark-theme .panel-subtitle {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Preview button (occhio) - arancione se selezionato */
html.dark-theme .btn-settings-flat.btn-preview-active {
    background: rgba(255, 107, 53, 0.15);
    border-color: var(--brand-primary);
}

html.dark-theme .btn-settings-flat.btn-preview-active:hover {
    background: rgba(255, 107, 53, 0.25);
    border-color: var(--brand-primary);
}

html.dark-theme .btn-settings-flat.btn-preview-active img {
    filter: brightness(0) saturate(100%) invert(55%) sepia(100%) saturate(500%) hue-rotate(340deg) brightness(100%);
}

/* Mode buttons (startlist/classifica) - arancione se on-air */
html.dark-theme .btn-settings-flat.btn-mode-active {
    background: rgba(255, 107, 53, 0.15);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

html.dark-theme .btn-settings-flat.btn-mode-active:hover {
    background: rgba(255, 107, 53, 0.25);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

html.dark-theme .btn-settings-flat.btn-mode-active img {
    filter: brightness(0) saturate(100%) invert(55%) sepia(100%) saturate(500%) hue-rotate(340deg) brightness(100%);
}

/* btn-settings-flat - bordi trasparenti, icona bianca, hover arancione */
html.dark-theme .btn-settings-flat {
    background: var(--bg-tertiary);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}

html.dark-theme .btn-settings-flat img {
    filter: brightness(0) invert(1);
}

html.dark-theme .btn-settings-flat:hover {
    background: rgba(255, 107, 53, 0.15);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

html.dark-theme .btn-settings-flat:hover img {
    filter: brightness(0) saturate(100%) invert(55%) sepia(100%) saturate(500%) hue-rotate(340deg) brightness(100%);
}

/* B1-B4 boulder - mantieni colori light anche in dark mode */
html.dark-theme .btn-boulder-b1.btn-active {
    background: var(--boulder-b1);
    border-color: var(--boulder-b1);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3);
    color: #ffffff;
}
html.dark-theme .btn-boulder-b2.btn-active {
    background: var(--boulder-b2);
    border-color: var(--boulder-b2);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
    color: #ffffff;
}
html.dark-theme .btn-boulder-b3.btn-active {
    background: var(--boulder-b3);
    border-color: var(--boulder-b3);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
    color: #ffffff;
}
html.dark-theme .btn-boulder-b4.btn-active {
    background: var(--boulder-b4);
    border-color: var(--boulder-b4);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.3);
    color: #ffffff;
}

/* B1-B4 hover - colori del blocco piu' chiari */
html.dark-theme .btn-boulder-b1:hover {
    background: rgba(22, 163, 74, 0.25);
    border-color: var(--boulder-b1);
}
html.dark-theme .btn-boulder-b2:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: var(--boulder-b2);
}
html.dark-theme .btn-boulder-b3:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: var(--boulder-b3);
}
html.dark-theme .btn-boulder-b4:hover {
    background: rgba(6, 182, 212, 0.25);
    border-color: var(--boulder-b4);
}

/* B1-B4 active + hover - colore pieno piu' chiaro */
html.dark-theme .btn-boulder-b1.btn-active:hover {
    background: #15803d;
}
html.dark-theme .btn-boulder-b2.btn-active:hover {
    background: #7c3aed;
}
html.dark-theme .btn-boulder-b3.btn-active:hover {
    background: #d97706;
}
html.dark-theme .btn-boulder-b4.btn-active:hover {
    background: #0891b2;
}

/* ----------------------------------------
   Theme Toggle Button
   ---------------------------------------- */

.theme-toggle {
    position: relative;
    cursor: pointer;
}

.theme-toggle .theme-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Light theme: show sun icon */
.theme-toggle .icon-sun {
    display: block;
}

.theme-toggle .icon-moon {
    display: none;
}

/* Dark theme: show moon icon */
html.dark-theme .theme-toggle .icon-sun {
    display: none;
}

html.dark-theme .theme-toggle .icon-moon {
    display: block;
}

/* Hover animation */
.theme-toggle:hover .theme-icon {
    transform: rotate(15deg) scale(1.1);
}

/* ----------------------------------------
   Theme Transition Animation
   ---------------------------------------- */

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease,
                filter 0.3s ease !important;
}

/* ========================================
   RESET & BASE
   ======================================== */

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

body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
    background: var(--bg-gradient); 
    min-height: 100vh; 
    padding: 10px; 
}

.container { 
    max-width: 1400px; 
    margin: 0 auto; 
}

/* ========================================
   HEADER
   ======================================== */

.header { 
    background: var(--brand-white); 
    padding: 15px 20px; 
    border-radius: var(--border-radius); 
    box-shadow: var(--shadow-primary); 
    margin-bottom: 15px; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    align-items: center; 
    gap: 15px; 
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo {
    height: var(--logo-height);
    width: auto;
}

.header h1 {
    font-size: var(--header-title-size);
    color: var(--brand-secondary);
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}

/* Header Title Block (titolo + versione) */
.header-title-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--logo-height);
}

.header-title-block h1 {
    font-size: 20px;
    line-height: 1.2;
}

.header-version {
    font-size: 12px;
    color: var(--brand-gray-dark);
    font-weight: 500;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

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

.header-buttons {
    display: flex;
    gap: 8px;
}

.header-btn {
    width: 45px;
    height: 45px;
    min-width: 45px;
    max-width: 45px;
    background: var(--brand-white);
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
}
.header-btn img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(100%) saturate(500%) hue-rotate(340deg); /* colore brand-primary */
    transition: filter 0.2s ease;
}

.header-btn:hover {
    background: var(--brand-primary);
    color: var(--brand-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}
.header-btn:hover img {
    filter: brightness(0) invert(1);
}

/* Language Selector (same style as header-btn) */
.header-lang-select {
    width: 52px;
    height: 45px;
    min-width: 52px;
    background: var(--brand-white);
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 0 4px;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.2s;
}
.header-lang-select:hover {
    background: var(--brand-primary);
    color: var(--brand-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}
.header-lang-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

/* Event Button (calendar with event name) */
.header-btn.event-btn {
    width: auto;
    min-width: 45px;
    max-width: none;
    padding: 0 6px;
    gap: 6px;
}

.header-btn.event-btn img {
    flex-shrink: 0;
}

.event-btn-text {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 45px;
}

.header-btn.event-btn.has-event {
    background: var(--brand-primary-lighter);
}

.header-btn.event-btn.has-event .event-btn-text {
    color: var(--brand-secondary);
}

.header-btn.event-btn:hover {
    background: var(--brand-primary);
}

.header-btn.event-btn:hover .event-btn-text {
    color: var(--brand-white);
}

/* Status Button (square with colored border) */
.header-btn.status-btn {
    cursor: default;
    pointer-events: none;
    border-color: #22c55e;
}

.header-btn.status-btn img {
    filter: brightness(0) saturate(100%) invert(61%) sepia(69%) saturate(459%) hue-rotate(93deg) brightness(95%) contrast(92%);
}

.header-btn.status-btn.disconnected {
    border-color: #ef4444;
}

.header-btn.status-btn.disconnected img {
    filter: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(1752%) hue-rotate(336deg) brightness(94%) contrast(97%);
}

/* SSE connesso - verde */
.header-btn.status-btn.sse {
    border-color: #22c55e;
}

.header-btn.status-btn.sse img {
    filter: brightness(0) saturate(100%) invert(61%) sepia(79%) saturate(426%) hue-rotate(93deg) brightness(93%) contrast(89%);
}

/* Fallback polling - arancione */
.header-btn.status-btn.fallback {
    border-color: #f59e0b;
}

.header-btn.status-btn.fallback img {
    filter: brightness(0) saturate(100%) invert(67%) sepia(64%) saturate(588%) hue-rotate(358deg) brightness(103%) contrast(96%);
}

/* Regia Button (link to lobby) */
.header-btn.regia-btn {
    width: auto;
    min-width: 45px;
    max-width: none;
    padding: 0 16px;
    text-decoration: none;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.header-btn.regia-btn .regia-btn-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-white);
    white-space: nowrap;
    line-height: 41px;
}

.header-btn.regia-btn:hover {
    background: var(--brand-secondary);
    border-color: var(--brand-secondary);
}

/* User Info */
.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    margin-right: 8px;
}

.user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
}

.user-role {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.user-role.badge-admin {
    background: #dc2626;
    color: white;
}

.user-role.badge-manager {
    background: #2563eb;
    color: white;
}

.user-role.badge-operatore {
    background: #16a34a;
    color: white;
}

/* ========================================
   HEADER SECONDARIO (Evento + Settings)
   ======================================== */

.header-secondary {
    background: var(--brand-primary);
    border: none;
    padding: 12px 20px;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.header-secondary-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.header-secondary-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-secondary .event-title {
    font-size: 15px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-secondary .event-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.header-secondary .header-btn {
    background: rgba(0, 0, 0, 0.15);
    border: 2px solid white;
    color: white;
}

.header-secondary .header-btn img {
    filter: brightness(0) invert(1);
}

.header-secondary .header-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
}

/* ========================================
   MODAL
   ======================================== */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    background: #f8f9fa;
    max-width: 800px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
    border-radius: 12px;
    border: none;
}

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

.modal-header {
    padding: 16px 20px;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--brand-primary);
    z-index: 10;
}

.modal-header h2 {
    margin: 0;
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.2s;
    padding: 0;
    min-width: 32px;
    max-width: 32px;
    flex-shrink: 0;
    line-height: 1;
}

.modal-close:hover {
    background: transparent;
    color: white;
}

.modal-body {
    padding: 20px;
}

.modal-body h3 {
    color: var(--brand-secondary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 14px;
    font-weight: 600;
}

.api-content-section,
.settings-content-section {
    display: none;
}

.boulder-coming-soon {
    color: var(--brand-gray-dark);
    font-style: italic;
}

/* ========================================
   COLLAPSIBLE SECTIONS
   ======================================== */

.collapsible { 
    overflow: hidden; 
}

.collapsible-header { 
    padding: 15px; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    user-select: none; 
    transition: background .2s; 
}

.collapsible-header:hover { 
    background: rgba(0,0,0,.02); 
}

.collapsible-header h2 { 
    margin: 0; 
    color: var(--brand-secondary); 
}

.collapse-icon { 
    font-size: 14px; 
    transition: transform .3s; 
    color: var(--brand-primary); 
}

.collapsible-header.active .collapse-icon { 
    transform: rotate(180deg); 
}

.collapsible-content {
    padding: 0 20px 20px 20px;
    max-height: 400px;
    overflow-y: auto;
    transition: max-height 0.3s ease-out;
}

/* Intro modal accordion */
.intro-accordion {
    border: 1px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
}

.intro-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    user-select: none;
    transition: background 0.15s;
}

.intro-accordion-header:hover {
    background: var(--border-light);
}

.intro-accordion-header.active {
    border-bottom: 1px solid var(--border-light);
}

.intro-accordion-icon {
    font-size: 10px;
    color: var(--text-tertiary);
    transition: transform 0.2s;
}

.intro-accordion-header.active .intro-accordion-icon {
    transform: rotate(180deg);
}

.intro-accordion-body {
    padding: 0 12px 12px;
}

/* ========================================
   DISCIPLINE SELECTOR
   ======================================== */

.discipline-selector { 
    background: var(--brand-white); 
    padding: 20px; 
    border-radius: var(--border-radius); 
    margin-bottom: 15px; 
    box-shadow: var(--shadow-secondary); 
}

.discipline-selector h2 { 
    font-size: 18px; 
    margin-bottom: 15px; 
    color: var(--brand-secondary); 
}

.discipline-buttons { 
    display: flex; 
    gap: 10px; 
    flex-wrap: wrap; 
}

.discipline-buttons button {
    flex: 1;
    min-width: 120px;
}

/* Disciplina abilitata ma non selezionata */
.discipline-buttons button.btn-enabled {
    background: var(--brand-white);
    color: var(--brand-primary);
    border: 2px solid var(--brand-primary);
    font-weight: 600;
}

.discipline-buttons button.btn-enabled:hover {
    background: var(--brand-primary-lighter);
}

/* Disciplina disabilitata */
.discipline-buttons button.btn-disabled,
.discipline-buttons button:disabled {
    background: #e5e5e5 !important;
    color: #999 !important;
    cursor: not-allowed;
    opacity: 0.6;
    border: 2px solid #ccc !important;
}

.discipline-buttons button.btn-disabled:hover,
.discipline-buttons button:disabled:hover {
    background: #e5e5e5 !important;
    transform: none;
    cursor: not-allowed;
}

html.dark-theme .discipline-buttons button.btn-disabled:hover,
html.dark-theme .discipline-buttons button:disabled:hover {
    background: var(--bg-tertiary) !important;
}

/* ========================================
   LAYOUT CONTAINERS
   ======================================== */

.layout-container { 
    display: none; 
}

.layout-container.active { 
    display: block; 
}

.grid-speed, .grid-lead, .grid-boulder {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* ========================================
   PANELS
   ======================================== */

.panel { 
    background: var(--brand-white); 
    border-radius: var(--border-radius); 
    padding: 20px; 
    box-shadow: var(--shadow-secondary); 
}

.panel-full { 
    grid-column: 1 / -1; 
}

.panel h2 {
    font-size: clamp(16px, 4vw, 18px);
    margin-bottom: 15px;
    color: var(--brand-secondary);
    border-bottom: 2px solid var(--brand-primary);
    padding-bottom: 10px;
}

/* Sottotitoli pannello per sezioni interne */
.panel-subtitle {
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 600;
    color: var(--brand-gray-dark);
    margin: 15px 0 8px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #e5e7eb;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-subtitle:first-of-type {
    margin-top: 10px;
}

/* ========================================
   BUTTONS
   ======================================== */

.button-group { 
    display: flex; 
    gap: 8px; 
    margin-bottom: 12px; 
    flex-wrap: wrap; 
}

button {
    /* Flex behavior - i pulsanti normali crescono */
    flex: 1 1 auto;
    min-width: 100px;

    /* Altezza fissa uniforme per tutti */
    height: 45px;

    /* Padding orizzontale, verticale gestito da height */
    padding: 0 clamp(15px, 4vw, 20px);

    /* Stile base */
    border: none;
    border-radius: var(--border-radius);
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    text-transform: uppercase;
    letter-spacing: .5px;
    -webkit-tap-highlight-color: transparent;

    /* Allineamento contenuto */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

button:active {
    transform: scale(.95);
}

button:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

button:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* ========================================
   BUTTON STANDARD
   ======================================== */

/*
 * STANDARD PULSANTI:
 *
 * 1. ALTEZZA UNIFORME: Tutti i pulsanti hanno height: 45px
 *
 * 2. DUE TIPOLOGIE:
 *    - Pulsanti NORMALI (con testo): flex: 1 1 auto, crescono per riempire spazio
 *    - Pulsanti QUADRATI (con icone): width: 45px, flex: 0 0 auto, non crescono
 *
 * 3. CLASSI:
 *    - .btn-square: per pulsanti quadrati (frecce, icone, simboli)
 *    - .btn-settings-flat: pulsante settings con bordo
 *    - .btn-flex-none: utility per non far crescere un pulsante
 *    - .btn-flex-grow: utility per far crescere un pulsante
 *
 * 4. RESPONSIVE: Usa clamp() per font-size e min-width adattabili
 *
 * 5. STATI:
 *    - :hover: translateY(-1px) + shadow
 *    - :active: scale(.95)
 *    - :disabled: opacity .5, no transform
 */

/* Button Styles */
.btn-primary { 
    background: var(--brand-primary); 
    color: var(--brand-white); 
}

.btn-primary:hover {
    background: var(--brand-primary-hover);
}

.btn-secondary { 
    background: var(--brand-gray); 
    color: var(--brand-secondary); 
}

.btn-success { 
    background: var(--brand-primary); 
    color: var(--brand-white); 
    font-weight: 700; 
}

.btn-success-dim { 
    background: var(--brand-primary-light); 
    color: var(--brand-primary-dark); 
}

.btn-danger { 
    background: var(--brand-secondary); 
    color: var(--brand-white); 
    font-weight: 700; 
}

.btn-danger-dim { 
    background: var(--brand-secondary-light); 
    color: #e0e0e0; 
}

.btn-square {
    /* Pulsanti quadrati: icone, frecce, simboli */
    flex: 0 0 auto; /* Non cresce, non si restringe */
    width: 45px; /* Stessa altezza dei pulsanti normali */
    min-width: 45px;
    padding: 0; /* No padding per icone */
}

/* Utilità per gestire flex nei button-group */
.btn-flex-none {
    flex: 0 0 auto; /* Non cresce né si restringe */
}

.btn-flex-grow {
    flex: 1 1 auto; /* Cresce per riempire spazio */
}

.btn-active {
    background: var(--brand-primary);
    color: var(--brand-white);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.3); 
    font-weight: 700; 
}

.btn-warning { 
    background: var(--brand-secondary); 
    color: var(--brand-primary); 
    border: 2px solid var(--brand-primary);
}

/* ========================================
   INFO BOXES
   ======================================== */

.info-box { 
    background: var(--brand-primary-lighter); 
    padding: 12px; 
    border-radius: var(--border-radius); 
    margin-bottom: 12px; 
    border-left: 4px solid var(--brand-primary);
}

.info-box h3 { 
    font-size: clamp(12px, 3vw, 14px); 
    color: var(--brand-primary-dark); 
    margin-bottom: 5px; 
}

.info-box p { 
    font-size: clamp(16px, 4vw, 20px); 
    font-weight: 600; 
    color: var(--brand-secondary); 
}

/* ========================================
   SHORTCUTS BOX
   ======================================== */

.shortcuts { 
    background: var(--brand-primary-lighter); 
    border-left: 4px solid var(--brand-primary); 
    padding: 10px 12px; 
    border-radius: var(--border-radius); 
    font-size: 12px; 
    line-height: 1.6; 
    color: var(--brand-primary-dark); 
    margin-top: 12px; 
}

.shortcuts strong { 
    color: var(--brand-primary); 
    font-weight: 700; 
}

.shortcuts-title { 
    font-weight: 700; 
    color: var(--brand-secondary); 
    margin-bottom: 5px; 
    display: flex; 
    align-items: center; 
    gap: 5px; 
}

/* ========================================
   NAVIGATION
   ======================================== */

.nav-buttons { 
    display: flex; 
    gap: 8px; 
    align-items: center; 
}

.nav-buttons button { 
    flex: 0 0 auto; 
    min-width: 50px; 
    width: 50px; 
    height: 50px; 
    padding: 0; 
    font-size: clamp(20px, 5vw, 24px); 
}

.nav-buttons .position {
    flex: 1;
    text-align: center;
    font-size: clamp(20px, 5vw, 24px);
    font-weight: 700;
    color: var(--brand-primary);
}

.nav-buttons .position small {
    font-size: 0.65em;
    font-weight: 500;
    color: #999;
    opacity: 0.85;
}

/* Auto-advance turno button */
.btn-turno-auto {
    flex: 0 0 auto;
    width: 45px;
    height: 45px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    background: var(--bg-secondary, #f3f4f6);
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-turno-auto img {
    filter: brightness(0) saturate(100%) invert(50%);
    transition: filter 0.15s ease;
}

.btn-turno-auto:hover {
    border-color: var(--brand-primary);
}

.btn-turno-auto:hover img {
    filter: brightness(0) saturate(100%) invert(50%) sepia(98%) saturate(1200%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.btn-turno-auto.btn-turno-auto-active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-turno-auto.btn-turno-auto-active img {
    filter: brightness(0) invert(1);
}

html.dark-theme .btn-turno-auto {
    background: var(--bg-tertiary);
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-theme .btn-turno-auto img {
    filter: brightness(0) invert(1) opacity(0.6);
}

html.dark-theme .btn-turno-auto:hover {
    border-color: var(--brand-primary);
}

html.dark-theme .btn-turno-auto:hover img {
    filter: brightness(0) saturate(100%) invert(50%) sepia(98%) saturate(1200%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

html.dark-theme .btn-turno-auto.btn-turno-auto-active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

html.dark-theme .btn-turno-auto.btn-turno-auto-active img {
    filter: brightness(0) invert(1);
}

/* ========================================
   ATHLETE PREVIEW
   ======================================== */

.athlete-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.athlete-preview { 
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%); 
    padding: 15px; 
    border-radius: var(--border-radius); 
    color: var(--brand-white); 
}

.athlete-preview-header {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 5px;
}

.athlete-preview-header.right {
    text-align: right;
}

.athlete-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.athlete-info.reverse {
    flex-direction: row-reverse;
}

.athlete-bib {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 12px;
    border-radius: var(--border-radius);
    font-size: 24px;
    font-weight: bold;
    min-width: 50px;
    text-align: center;
}

.athlete-details {
    flex: 1;
}

.athlete-details.right {
    text-align: right;
}

.athlete-name {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.athlete-country {
    font-size: 14px;
    opacity: 0.8;
}

.athlete-time {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px;
    border-radius: var(--border-radius);
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

/* Lead Stats */
.lead-stats {
    display: flex;
    gap: 10px;
}

.lead-stat {
    flex: 1;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px;
    border-radius: var(--border-radius);
    text-align: center;
}

.lead-stat-label {
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 3px;
}

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

/* Boulder Stats (same as Lead) */
.boulder-stats {
    display: flex;
    gap: 10px;
}

.boulder-stat {
    flex: 1;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px;
    border-radius: var(--border-radius);
    text-align: center;
}

.boulder-stat-label {
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 3px;
}

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

/* Boulder Block Colors */
.btn-boulder-b1.btn-active {
    background: var(--boulder-b1);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.3);
}
.btn-boulder-b2.btn-active {
    background: var(--boulder-b2);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}
.btn-boulder-b3.btn-active {
    background: var(--boulder-b3);
    color: white;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}
.btn-boulder-b4.btn-active {
    background: var(--boulder-b4);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.3);
}

/* Boulder preview header colors */
.athlete-preview.boulder-b1 {
    background: linear-gradient(135deg, var(--boulder-b1) 0%, #15803d 100%);
}
.athlete-preview.boulder-b2 {
    background: linear-gradient(135deg, var(--boulder-b2) 0%, #7c3aed 100%);
}
.athlete-preview.boulder-b3 {
    background: linear-gradient(135deg, var(--boulder-b3) 0%, #d97706 100%);
}
.athlete-preview.boulder-b4 {
    background: linear-gradient(135deg, var(--boulder-b4) 0%, #0891b2 100%);
}

/* ========================================
   PARACLIMBING
   ======================================== */

.grid-paraclimbing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Paraclimbing Stats (same as Lead) */
.para-stats {
    display: flex;
    gap: 10px;
}

.para-stat {
    flex: 1;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px;
    border-radius: var(--border-radius);
    text-align: center;
}

.para-stat-label {
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 3px;
}

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

/* Paraclimbing Section Labels */
.para-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-gray-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    margin-top: 10px;
}

.para-section-label:first-of-type {
    margin-top: 0;
}

.para-category-nav button {
    flex: 1;
    min-width: unset;
    padding: 8px;
}

/* Paraclimbing Category Badges */
.para-cat-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--brand-primary);
    color: var(--brand-white);
    font-size: 12px;
    font-weight: 600;
    margin: 2px;
    border-radius: 3px;
    transition: all 0.2s;
}

.para-cat-badge.active {
    background: var(--brand-secondary);
    box-shadow: 0 0 0 2px var(--brand-primary);
}

.para-cat-badge.sx {
    background: var(--brand-male);
    box-shadow: 0 0 0 2px var(--brand-male);
}

.para-cat-badge.dx {
    background: var(--brand-female);
    box-shadow: 0 0 0 2px var(--brand-female);
}

.para-cat-badge:hover {
    transform: scale(1.05);
    cursor: pointer;
}

/* Paraclimbing Categories Config in Rounds Tab */
.para-categories-config {
    margin-top: 15px;
    padding: 12px;
    background: var(--brand-primary-lighter);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--brand-primary);
}

.para-categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.no-categories {
    color: var(--brand-gray-dark);
    font-style: italic;
    font-size: 13px;
}

/* Paraclimbing Assignment Grid */
.para-assign-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.para-assign-column {
    display: flex;
    flex-direction: column;
}

.para-assign-header {
    padding: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    color: var(--brand-white);
}

.para-assign-header.sx {
    background: var(--brand-male);
}

.para-assign-header.dx {
    background: var(--brand-female);
}

.para-assign-header.available {
    background: var(--brand-gray-dark);
}

.para-assign-list {
    flex: 1;
    min-height: 80px;
    padding: 8px;
    background: var(--brand-gray);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.para-assign-actions {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.para-assign-actions button {
    flex: 1;
    padding: 5px 8px;
    font-size: 11px;
    min-width: unset;
}

/* Paraclimbing Category Item in assigned lists */
.para-cat-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: var(--brand-white);
    border: 2px solid var(--brand-primary);
    color: var(--brand-gray-dark);
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}

.para-cat-item.sx {
    border-color: var(--brand-male);
    background: rgba(59, 130, 246, 0.1);
}

.para-cat-item.dx {
    border-color: var(--brand-female);
    background: rgba(236, 72, 153, 0.1);
}

.para-cat-item .cat-name {
    flex: 1;
    color: var(--brand-gray-dark);
}

.para-cat-item .cat-actions {
    display: flex;
    gap: 3px;
}

.para-cat-item .cat-btn {
    background: var(--brand-gray);
    border: none;
    color: var(--brand-gray-dark);
    width: 20px;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.para-cat-item.sx .cat-btn {
    background: rgba(59, 130, 246, 0.2);
    color: var(--brand-male);
}

.para-cat-item.dx .cat-btn {
    background: rgba(236, 72, 153, 0.2);
    color: var(--brand-female);
}

.para-cat-item .cat-btn:hover {
    background: var(--brand-gray-dark);
    color: white;
}

/* Paraclimbing Available Category with arrows */
.para-cat-available {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    background: var(--brand-white);
    border: 1px solid var(--brand-gray-dark);
    border-radius: 3px;
}

.para-cat-available .cat-name {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-gray-dark);
}

.para-cat-available .cat-arrow {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.2s;
}

.para-cat-available .cat-arrow-sx {
    color: var(--brand-male);
}

.para-cat-available .cat-arrow-sx:hover {
    background: var(--brand-male);
    color: white;
}

.para-cat-available .cat-arrow-dx {
    color: var(--brand-female);
}

.para-cat-available .cat-arrow-dx:hover {
    background: var(--brand-female);
    color: white;
}

/* Paraclimbing Assigned Categories Display (legacy) */
.para-assigned-display {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 28px;
    padding: 5px;
    background: var(--brand-gray);
    border-radius: var(--border-radius);
}

/* Paraclimbing Category Actions (legacy) */
.para-category-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.para-category-actions button {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    min-width: unset;
}

/* ========================================
   SETTINGS
   ======================================== */

.settings-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 15px; 
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-secondary);
    margin-bottom: 6px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 14px;
    color: var(--brand-secondary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

/* ========================================
   API WIDGET
   ======================================== */

/* API Companion Modal - URL Cards */
.api-urls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.api-url-card {
    background: var(--bg-tertiary, #f3f4f6);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--border-radius-md);
    padding: 10px 12px;
}

.api-url-card--sse {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.06);
}

.api-url-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #4b5563);
    margin-bottom: 6px;
}

.api-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.api-url-box {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #4ade80;
    background: #0d1117;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    word-break: break-all;
    user-select: all;
    line-height: 1.4;
}

.btn-copy-url {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: var(--brand-primary);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s;
    flex: 0 0 auto;
}

.btn-copy-url:hover {
    background: var(--brand-primary-hover);
    transform: scale(1.05);
}

.btn-copy-url img {
    filter: brightness(0) invert(1);
}

/* Legend */
.api-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    background: var(--bg-tertiary, #f3f4f6);
    border-radius: var(--border-radius);
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--text-secondary, #4b5563);
}

.api-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.api-legend-note {
    margin-left: auto;
    opacity: 0.7;
    font-style: italic;
}

.api-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.api-dot--action { background: var(--brand-primary); }
.api-dot--sse { background: #3b82f6; }

/* Discipline Tabs */
.api-disc-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-light, #e5e7eb);
    padding-bottom: 0;
}

.api-disc-tab {
    padding: 8px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #4b5563);
    cursor: pointer;
    transition: all 0.2s;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.api-disc-tab:hover {
    color: var(--text-primary, #1a1a1a);
    background: var(--bg-tertiary, #f3f4f6);
}

.api-disc-tab.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

/* Section Headers in tables */
.api-table-section {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #4b5563);
    margin: 16px 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.api-table-section:first-child {
    margin-top: 0;
}

/* API Tables */
.api-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    margin-bottom: 4px;
}

.api-table thead th {
    background: var(--bg-tertiary, #f3f4f6);
    color: var(--text-secondary, #4b5563);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 5px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
}

.api-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
    color: var(--text-primary, #1a1a1a);
    vertical-align: middle;
}

.api-table tbody tr:hover {
    background: rgba(255, 107, 53, 0.04);
}

.api-table td:first-child {
    color: var(--brand-primary);
    font-weight: 500;
}

.api-table td:nth-child(2),
.api-table td:nth-child(4) {
    color: #3b82f6;
}

.api-table td:nth-child(3),
.api-table td:nth-child(5) {
    color: var(--text-secondary, #4b5563);
    font-size: 11px;
}

.api-table td:last-child {
    color: #a78bfa;
}

.api-table code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.api-no-sse {
    color: var(--text-secondary, #4b5563) !important;
    opacity: 0.5;
    font-style: italic;
    font-size: 11px;
}

/* Compact table (action-only, no SSE columns) */
.api-table--compact td {
    color: var(--brand-primary);
    font-size: 11px;
    padding: 4px 8px;
}

.api-table--compact td:empty {
    background: transparent;
}

/* Dark mode adjustments for API modal */
html.dark-theme .api-url-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-light);
}

html.dark-theme .api-url-card--sse {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.3);
}

html.dark-theme .api-url-box {
    background: #0d1117;
    border-color: rgba(255, 255, 255, 0.1);
}

html.dark-theme .api-legend {
    background: rgba(255, 255, 255, 0.04);
}

html.dark-theme .api-table thead th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border-bottom-color: var(--border-light);
}

html.dark-theme .api-table td {
    border-bottom-color: var(--border-light);
}

html.dark-theme .api-table tbody tr:hover {
    background: rgba(255, 107, 53, 0.06);
}

html.dark-theme .api-table-section {
    border-bottom-color: var(--border-light);
}

html.dark-theme .api-disc-tabs {
    border-bottom-color: var(--border-light);
}

html.dark-theme .api-disc-tab:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ========================================
   DEBUG OUTPUT
   ======================================== */

#debug-output {
    background: #f0f0f0;
    padding: 10px;
    margin-top: 10px;
    font-family: monospace;
    font-size: 12px;
    display: none;
    border-radius: var(--border-radius);
}

/* ========================================
   RESPONSIVE - TABLET
   ======================================== */

@media (max-width: 768px) {
    .grid-speed, .grid-lead, .grid-boulder, .grid-paraclimbing {
        grid-template-columns: 1fr;
    }
    
    .athlete-preview-grid {
        grid-template-columns: 1fr;
    }
    
    .header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-left {
        width: 100%;
    }
    
    .header-right {
        width: 100%;
        justify-content: space-between;
    }
    
    .logo {
        height: 50px;
    }
    
    .header h1 {
        font-size: 18px;
    }
    
    .header-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        max-width: 40px;
        font-size: 18px;
    }

    .header-lang-select {
        width: 46px;
        height: 40px;
        min-width: 46px;
        font-size: 12px;
    }

    .header-btn.event-btn {
        width: auto;
        min-width: 40px;
        max-width: none;
    }
    
    .modal-content {
        max-height: 90vh;
    }
    
    .shortcuts { 
        font-size: 11px; 
    }
    
    .athlete-preview { 
        font-size: 13px; 
        padding: 12px; 
    }
    
    body { 
        padding: 5px; 
    }
    
    .panel { 
        padding: 15px; 
    }
    
    .header { 
        padding: 12px 15px; 
    }
    
    .discipline-selector, .panel { 
        margin-bottom: 10px; 
    }
    
    button { 
        padding: 10px 12px; 
        font-size: 13px; 
    }
    
    .nav-buttons .position { 
        font-size: 18px; 
    }
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

/* ========================================
   EVENT MODAL
   ======================================== */

.modal-large {
    max-width: 700px;
    width: 95%;
}

.event-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--brand-gray);
    padding-bottom: 10px;
}

.event-tab {
    flex: 1;
    padding: 10px 15px;
    background: var(--brand-gray);
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    min-width: unset;
}

.event-tab.active {
    background: var(--brand-primary);
    color: var(--brand-white);
}

.event-tab:hover:not(.active) {
    background: var(--brand-primary-light);
}

.event-tab-content {
    display: none;
}

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

.event-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--brand-gray);
    margin-bottom: 8px;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s;
    border-left: 4px solid transparent;
}

.event-item:hover {
    background: var(--brand-primary-lighter);
    border-left-color: var(--brand-primary);
}

.event-item.active {
    background: var(--brand-primary-lighter);
    border-left-color: var(--brand-primary);
}

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

.event-item-name {
    font-weight: 700;
    color: var(--brand-secondary);
    margin-bottom: 3px;
}

.event-item-meta {
    font-size: 12px;
    color: var(--brand-gray-dark);
}

.event-item-actions {
    display: flex;
    gap: 5px;
}

.event-item-actions button {
    padding: 5px 10px;
    min-width: unset;
    font-size: 12px;
}

.event-loading, .no-event-message, .preview-placeholder {
    text-align: center;
    padding: 30px;
    color: var(--brand-gray-dark);
}

.event-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 15px;
    border-top: 1px solid var(--brand-gray);
}

/* Import Header */
.import-header {
    margin-bottom: 15px;
}

.btn-back {
    min-width: unset;
    padding: 8px 15px;
}

/* Create Event Form */
.create-event-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Event Filters */
.event-filters {
    grid-template-columns: 1fr 1fr auto;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-light);
}

.event-filters .form-group {
    margin-bottom: 0;
}

.filter-checkbox-group {
    display: flex;
    align-items: flex-end;
    padding-bottom: 2px;
}

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--brand-primary);
}

.checkbox-label span {
    color: var(--text-primary);
}

.events-count {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-tertiary);
}

.event-preview {
    background: var(--brand-gray);
    padding: 15px;
    border-radius: var(--border-radius);
    min-height: 100px;
}

.event-preview h4 {
    margin-bottom: 10px;
    color: var(--brand-secondary);
}

.event-preview .discipline-badge {
    display: inline-block;
    padding: 3px 8px;
    background: var(--brand-primary);
    color: var(--brand-white);
    font-size: 11px;
    font-weight: 600;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}

/* Rounds Tab */
.rounds-discipline {
    margin-bottom: 20px;
}

.rounds-discipline h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--brand-secondary);
}

.rounds-discipline h4 .badge {
    background: var(--brand-primary);
    color: var(--brand-white);
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 3px;
}

.rounds-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.round-btn {
    padding: 8px 15px;
    min-width: unset;
}

.round-btn.active {
    background: var(--brand-primary);
    color: var(--brand-white);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.3);
}

/* Step Tot Config */
.step-tot-config {
    margin-top: 15px;
    padding: 12px;
    background: var(--brand-primary-lighter);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--brand-primary);
}

.step-tot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.step-tot-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-secondary);
}

.step-tot-row input {
    width: 70px;
    padding: 6px 10px;
    border: 2px solid var(--brand-gray);
    border-radius: var(--border-radius);
    font-size: 14px;
    text-align: center;
}

.step-tot-row input:focus {
    outline: none;
    border-color: var(--brand-primary);
}

/* Paraclimbing Step Tot Grid */
.para-step-tot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.para-step-tot-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.para-step-tot-item label {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-secondary);
    min-width: 40px;
}

.para-step-tot-item input {
    width: 55px;
    padding: 5px 8px;
    border: 2px solid var(--brand-gray);
    border-radius: var(--border-radius);
    font-size: 13px;
    text-align: center;
}

.para-step-tot-item input:focus {
    outline: none;
    border-color: var(--brand-primary);
}

/* ========================================
   RESPONSIVE - MOBILE (continued)
   ======================================== */

/* ========================================
   PARACLIMBING CATEGORIES MODAL
   ======================================== */

#para-categories-modal .modal-content {
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

#para-categories-modal .modal-header {
    padding: 15px;
    flex-shrink: 0;
}

#para-categories-modal .modal-header h2 {
    font-size: 18px;
}

#para-categories-modal .modal-body {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.para-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.para-cat-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.para-cat-column-header {
    padding: 8px 10px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    color: var(--brand-white);
    background: var(--brand-gray-dark);
    flex-shrink: 0;
}

.para-cat-column-header.sx {
    background: var(--brand-primary);
}

.para-cat-column-header.dx {
    background: var(--brand-secondary);
}

/* Colonna pareti con display assegnato */
.para-cat-column.display-sx .para-cat-column-header {
    background: var(--brand-primary);
}

.para-cat-column.display-dx .para-cat-column-header {
    background: var(--brand-secondary);
}

.parete-display-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
}

.parete-display-badge.display-sx {
    background: rgba(255, 255, 255, 0.3);
}

.parete-display-badge.display-dx {
    background: rgba(255, 255, 255, 0.3);
}

.para-cat-list {
    padding: 8px;
    background: var(--brand-gray);
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.para-cat-list.available {
    background: var(--brand-primary-lighter);
}

.para-cat-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid var(--brand-gray);
    flex-shrink: 0;
}

.para-cat-actions button {
    flex: 1;
    min-width: 0;
    padding: 10px 15px;
    font-size: 13px;
}

/* Category items */
.para-cat-available {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: var(--brand-white);
    border: 1px solid var(--brand-gray-dark);
    border-radius: 3px;
    flex-shrink: 0;
}

.para-cat-available .cat-name {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-gray-dark);
}

.para-cat-available .cat-arrow {
    background: none;
    border: none;
    font-size: 12px;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 3px;
    transition: all 0.2s;
    flex-shrink: 0;
    min-width: 0;
}

.para-cat-available .cat-arrows {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cat-arrow-parete {
    background: var(--brand-gray);
    border: 1px solid #ddd;
    font-size: 10px;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 3px;
    transition: all 0.2s;
    min-width: 0;
}

.cat-arrow-parete:hover {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}

.para-cat-item .cat-btn.remove {
    background: #ef4444;
    color: white;
    border: none;
}

.para-cat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    background: var(--brand-white);
    border: 2px solid var(--brand-primary);
    font-size: 12px;
    font-weight: 600;
    border-radius: 3px;
    flex-shrink: 0;
}

.para-cat-item .cat-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.para-cat-item .cat-actions {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.para-cat-item .cat-btn {
    width: 20px;
    height: 20px;
    font-size: 10px;
    padding: 0;
    min-width: 0;
}

/* Responsive modal - mobile */
@media (max-width: 480px) {
    #para-categories-modal .modal-content {
        max-height: 90vh;
    }

    #para-categories-modal .modal-header h2 {
        font-size: 16px;
    }

    .para-categories-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .para-cat-column {
        max-height: 150px;
    }

    .para-cat-actions {
        flex-direction: column;
        gap: 8px;
    }
}

/* ========================================
   RESPONSIVE - MOBILE (continued)
   ======================================== */

@media (max-width: 480px) {
    .logo {
        height: 40px;
    }
    
    .header h1 { 
        font-size: 14px; 
    }
    
    .status { 
        font-size: 12px; 
    }
    
    .panel h2 { 
        font-size: 14px; 
    }
    
    button { 
        font-size: 12px; 
        padding: 8px 10px; 
        min-width: 80px; 
    }
    
    .nav-buttons button { 
        width: 40px; 
        height: 40px; 
        font-size: 18px; 
    }
    
    .athlete-preview { 
        padding: 10px; 
    }
    
    .athlete-bib {
        font-size: 16px;
        padding: 5px 8px;
        min-width: 35px;
    }
    
    .athlete-name {
        font-size: 12px;
    }
    
    .athlete-country {
        font-size: 10px;
    }
    
    .athlete-time {
        font-size: 13px;
        padding: 5px;
    }
    
    .lead-stat-value {
        font-size: 14px;
    }
}

/* ========================================
   PARACLIMBING PARETI CONFIGURATION
   ======================================== */

.para-pareti-config {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.para-pareti-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.para-pareti-header label {
    font-weight: 600;
    color: var(--brand-secondary);
}

.para-pareti-header input {
    width: 60px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-size: 14px;
    text-align: center;
}

.para-pareti-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.para-parete-item {
    background: var(--brand-gray);
    border: 1px solid #e5e7eb;
    border-radius: var(--border-radius);
    padding: 12px;
}

.para-parete-header {
    font-weight: 700;
    color: var(--brand-primary);
    margin-bottom: 10px;
    font-size: 14px;
    text-transform: uppercase;
}

.para-parete-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.para-parete-row label {
    font-size: 12px;
    color: var(--brand-secondary-light);
}

.para-parete-row input {
    flex: 1;
    max-width: 70px;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-size: 13px;
    text-align: center;
}

.para-parete-display {
    margin-top: 8px;
    display: flex;
    gap: 2px;
}

.para-parete-display button {
    flex: 1;
    min-width: 0;
    padding: 6px 2px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
}

.para-parete-display button:hover {
    background: var(--brand-gray);
}

.para-parete-display button.active-sx {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}

.para-parete-display button.active-dx {
    background: var(--brand-secondary);
    color: white;
    border-color: var(--brand-secondary);
}

/* .active-none rimosso - ora ci sono solo SX e DX come toggle */

.para-cat-count {
    font-weight: 400;
    font-size: 11px;
    color: var(--brand-secondary-light);
    text-transform: none;
}

/* Ordine Pareti */
.para-pareti-order {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e5e7eb;
}

.para-order-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.para-order-header {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 12px;
    color: white;
    text-align: center;
    border-radius: var(--border-radius);
}

.para-order-header.sx {
    background: var(--brand-primary);
}

.para-order-header.dx {
    background: var(--brand-secondary);
}

.para-order-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.para-order-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--brand-gray);
    border-radius: var(--border-radius);
}

.para-order-item .order-num {
    font-weight: 700;
    color: var(--brand-primary);
    min-width: 20px;
}

.para-order-item .order-parete {
    flex: 1;
    font-weight: 600;
}

.para-order-item .order-buttons {
    display: flex;
    gap: 2px;
}

.para-order-item .order-buttons button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    font-size: 10px;
    border-radius: 3px;
    transition: all 0.2s;
}

.para-order-item .order-buttons button:hover:not(:disabled) {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}

.para-order-item .order-buttons button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.para-order-empty {
    padding: 10px;
    text-align: center;
    color: #999;
    font-size: 12px;
    font-style: italic;
}

/* ========================================
   CLASSDX SETTINGS
   ======================================== */

/* Pulsante settings (icona ingranaggio) - stile flat come header */
.btn-settings {
    flex: 0 0 auto !important;
    min-width: auto !important;
    width: auto;
    aspect-ratio: 1;
    padding: clamp(12px, 3vw, 15px);
    font-size: 22px;
    background: var(--brand-white);
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-settings:hover {
    background: var(--brand-primary);
    color: var(--brand-white);
    border-color: var(--brand-primary);
}

/* Pulsante settings flat grigio */
.btn-settings-flat {
    /* Pulsante settings: quadrato con icona o testo */
    position: relative;
    flex: 0 0 auto;
    min-width: 45px;
    width: 45px;
    height: 45px;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    background: var(--brand-gray);
    border: 1px solid #d1d5db;
    color: var(--brand-gray-dark);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-settings-flat:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: var(--brand-secondary);
}

.btn-settings-flat.btn-preview-active {
    background: #dcfce7;
    border-color: #22c55e;
}

.btn-settings-flat.btn-preview-active:hover {
    background: #bbf7d0;
    border-color: #16a34a;
}

/* Mode buttons (startlist/classifica) - arancione se on-air */
.btn-settings-flat.btn-mode-active {
    background: #fff3ed;
    border-color: #ff6b35;
    color: #ff6b35;
}

.btn-settings-flat.btn-mode-active:hover {
    background: #ffe4d6;
    border-color: #e55a2b;
    color: #e55a2b;
}

.btn-settings-flat.btn-mode-active img {
    filter: brightness(0) saturate(100%) invert(55%) sepia(100%) saturate(500%) hue-rotate(340deg) brightness(100%);
}

/* Gruppo pulsanti CLASSDX con settings a sinistra */
.classdx-controls {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.classdx-controls .btn-secondary,
.classdx-controls .btn-active {
    flex: 1;
}

/* Modal small */
.modal-small {
    max-width: 450px;
}

/* Settings form */
.settings-group {
    margin-bottom: 16px;
}

.settings-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--brand-secondary);
    font-size: 12px;
}

.settings-input,
.settings-select {
    width: 100%;
    padding: 10px 14px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 14px;
    color: var(--brand-secondary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.settings-input:focus,
.settings-select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}

.settings-buttons {
    justify-content: center;
}

.settings-buttons button {
    flex: 1;
    max-width: 120px;
}

.settings-actions {
    margin-top: 25px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Logo Upload Container */
.logo-upload-container {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-md);
    border: 1px dashed var(--border-medium);
}

.logo-preview {
    width: 120px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.logo-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-placeholder {
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: center;
}

.logo-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-small {
    padding: 6px 12px;
    font-size: 11px;
}

/* ========================================
   SPONSORS UPLOAD (multiple logos)
   ======================================== */
.sponsors-upload-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-md);
    border: 1px dashed var(--border-medium);
}

.sponsors-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    flex-wrap: wrap;
}

.sponsor-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: white;
    border-radius: var(--border-radius-sm);
}

.sponsor-item .sponsor-logo-wrapper {
    width: 90px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sponsor-item img {
    max-width: 90px;
    max-height: 45px;
    object-fit: contain;
}

.sponsor-item .sponsor-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.sponsor-item .sponsor-move {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
}

.sponsor-item .sponsor-move:hover {
    background: var(--border-light);
}

.sponsor-item .sponsor-move:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.sponsor-item .sponsor-remove {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    border-radius: 50%;
    background: var(--status-error);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    padding: 0;
}

.sponsor-item .sponsor-remove:hover {
    background: #dc2626;
}

.sponsor-position-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    line-height: 1.4;
}

.sponsor-badge-main {
    background: var(--status-info, #3b82f6);
    color: white;
}

.sponsor-badge-technical {
    background: var(--text-tertiary, #9ca3af);
    color: white;
}

.settings-actions .btn-primary {
    min-width: 100px;
}

/* Modal button overrides */
.modal-body .btn-secondary {
    background: var(--brand-gray);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--brand-secondary);
}

.modal-body .btn-secondary:hover {
    background: #e9ecef;
    border-color: rgba(0, 0, 0, 0.15);
}

/* Modal medium size */
.modal-medium {
    max-width: 600px;
}

/* Shortcuts Modal Table */
.shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.shortcuts-table thead th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    border-bottom: 2px solid var(--brand-primary);
}

.shortcuts-table tbody td {
    padding: 6px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

.shortcuts-table tbody tr:last-child td {
    border-bottom: none;
}

.shortcuts-table-section td {
    font-weight: 700;
    color: var(--brand-primary) !important;
    padding-top: 14px !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(255, 107, 53, 0.15) !important;
}

.shortcuts-table kbd {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: var(--brand-secondary);
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    min-width: 24px;
    text-align: center;
}

html.dark-theme .shortcuts-table tbody td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

html.dark-theme .shortcuts-table kbd {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* Intro settings modal - padded settings groups */
#intro-settings-modal .settings-group {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px 16px;
}

/* Progress bar generazione AI */
.progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--brand-primary);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Para CLASSDX categories selector */
.para-classdx-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: var(--border-radius);
}

.para-classdx-category-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background-color: white;
    border: 2px solid #ddd;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.para-classdx-category-item:hover {
    border-color: var(--brand-primary);
}

.para-classdx-category-item.selected {
    background-color: #e8f5e9;
    border-color: var(--success-color);
}

.para-classdx-category-item input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.para-classdx-category-label {
    flex: 1;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
}

.settings-note {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
    font-style: italic;
}

/* ========== BRIDGE FORWARDING ========== */

.modal-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.bridge-connection-status {
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.status-indicator {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-indicator.status-active {
    background: #dcfce7;
    color: #166534;
}

.status-indicator.status-inactive {
    background: #f3f4f6;
    color: #6b7280;
}

.status-indicator.status-loading {
    background: #fef3c7;
    color: #92400e;
}

.status-indicator.status-error {
    background: #fee2e2;
    color: #991b1b;
}

.status-indicator.status-warning-indicator {
    background: #fef3c7;
    color: #92400e;
}

.bridge-status-indicator {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.bridge-status-indicator.status-offline {
    background: var(--status-error);
    box-shadow: 0 0 4px var(--status-error);
}

.bridge-status-indicator.status-no-serial {
    background: var(--status-warning);
    box-shadow: 0 0 4px var(--status-warning);
}

.bridge-status-indicator.status-connected {
    background: var(--status-success);
    box-shadow: 0 0 4px var(--status-success);
}

.bridge-status-indicator.status-simulating {
    background: var(--brand-primary);
    box-shadow: 0 0 4px var(--brand-primary);
}

/* ========== TIMER CONTROLS ========== */

.timer-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

.timer-status {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    font-family: 'Gotham Narrow', monospace;
}

.timer-status.connected {
    color: #22c55e;
}

.timer-status.disconnected {
    color: #ef4444;
}

.timer-status.hidden {
    display: none;
}

.timer-time {
    font-family: 'Gotham Narrow', monospace;
    font-variant-numeric: tabular-nums;
}

.timer-reaction {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-left: 4px;
}

.timer-reaction.hidden {
    display: none;
}

.timer-winner {
    font-size: 11px;
    font-weight: 900;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.2);
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 4px;
}

.timer-winner.hidden {
    display: none;
}

/* Timer status states - control panel Speed */
#speed-timer-status-sx,
#speed-timer-status-dx {
    transition: color 0.15s ease, background-color 0.15s ease;
    padding: 2px 6px;
    border-radius: 3px;
}

#speed-timer-status-sx.running,
#speed-timer-status-dx.running {
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.15);
}

#speed-timer-status-sx.stopped,
#speed-timer-status-dx.stopped {
    color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.15);
}

#speed-timer-status-sx.false-start,
#speed-timer-status-dx.false-start {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.2);
}

#speed-timer-status-sx.winner,
#speed-timer-status-dx.winner {
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.25);
    font-weight: 700;
}

/* ========================================
   THEME SELECTOR MODAL
   ======================================== */

.theme-current-display {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-light);
}

.theme-current-display .theme-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.theme-current-display .theme-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.theme-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.theme-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}

.theme-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--brand-primary);
}

.theme-item.active {
    background: var(--brand-primary-lighter);
    border-color: var(--brand-primary);
}

.theme-item-info {
    flex: 1;
}

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

.theme-item-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.theme-item-federation {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-primary);
    text-transform: uppercase;
    padding: 2px 8px;
    background: var(--brand-primary-lighter);
    border-radius: 4px;
    margin-left: 12px;
}

.theme-item-check {
    width: 24px;
    height: 24px;
    margin-left: 12px;
    border-radius: 50%;
    background: var(--status-success);
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.theme-item.active .theme-item-check {
    display: flex;
}

/* ═══════════════════════════════════════════════════════════════════
   DNS OFFSET MODAL + BADGE (v1.8.4)
   ═══════════════════════════════════════════════════════════════════ */

/* Badge arancione sul bottone settings quando offset attivo */
.offset-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-primary, #ff6b35);
}

/* Modal offset content */
.offset-modal-desc {
    font-size: 13px;
    color: var(--text-secondary, #666);
    margin: 0 0 20px 0;
    line-height: 1.4;
}
.offset-modal-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.offset-modal-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary, #f5f5f5);
    border-radius: 8px;
    border: 1px solid var(--border-color, #e0e0e0);
}
.offset-modal-label {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--text-primary, #333);
}
.offset-modal-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}
.offset-modal-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
    font-weight: bold;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
.offset-modal-value {
    min-width: 44px;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary, #333);
}
.offset-modal-value.offset-active {
    color: var(--brand-primary, #ff6b35);
}
.offset-modal-actions {
    margin-top: 20px;
    text-align: center;
}
.offset-modal-actions .btn-secondary {
    min-width: 120px;
    font-size: 13px;
    letter-spacing: 0.5px;
}

/* Dark mode */
html.dark-theme .offset-modal-desc {
    color: rgba(255, 255, 255, 0.5);
}
html.dark-theme .offset-modal-group {
    background: var(--bg-tertiary, #2a2a2a);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark-theme .offset-modal-label {
    color: rgba(255, 255, 255, 0.85);
}
html.dark-theme .offset-modal-value {
    color: rgba(255, 255, 255, 0.9);
}


/* ========================================
   RECORDING SYSTEM
   ======================================== */

/* REC button header — pulsing red circle */
#rec-btn.rec-active #rec-icon circle {
    animation: rec-pulse 1.2s ease-in-out infinite;
}

@keyframes rec-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.rec-timer {
    font-size: 11px;
    font-weight: 700;
    color: #c1272d;
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

html.dark-theme .rec-timer {
    color: #ff6b6b;
}

/* REC modal — active recording banner */
.rec-active-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(193, 39, 45, 0.08);
    border: 1px solid rgba(193, 39, 45, 0.25);
    border-radius: 10px;
}

.rec-active-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c1272d;
    animation: rec-pulse 1.2s ease-in-out infinite;
}

.rec-active-label {
    font-size: 13px;
    font-weight: 700;
    color: #c1272d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rec-modal-timer {
    font-size: 22px;
    font-weight: 700;
    color: #c1272d;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

html.dark-theme .rec-active-banner {
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.25);
}

html.dark-theme .rec-active-label,
html.dark-theme .rec-active-dot,
html.dark-theme .rec-modal-timer {
    color: #ff6b6b;
}

/* Recordings list */
.recordings-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.recording-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 10px 14px;
}

.recording-row .recording-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recording-date {
    font-weight: 600;
    font-size: 13px;
}

.recording-meta {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
}

.recording-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.recording-actions .btn-sm {
    flex: 0 0 auto;
    min-width: 0;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    border: none;
}

.recording-actions .btn-danger {
    background: transparent;
    color: #c1272d;
    border: 1px solid #c1272d;
}

.recording-actions .btn-danger:hover {
    background: #c1272d;
    color: #fff;
}

html.dark-theme .recording-row {
    background: var(--bg-tertiary, #2a2a2a);
    border-color: rgba(255, 255, 255, 0.08);
}