/* ============================================================
   Registration Form — Dark Mode
   Single source of truth: all rules scoped to html.dark-mode
   Activated exclusively by dark-mode.js (time-based + OS pref).
   Never uses @media (prefers-color-scheme) or [data-theme="dark"]
   so every component flips together.
   ============================================================ */

/* ---- CSS variable overrides ---- */
html.dark-mode {
    --primary: #2563eb;
    --primary-container: #1e40af;
    --on-primary-container: #dbeafe;
    --secondary: #0891b2;

    --surface: #111827;
    --surface-container: #1f2937;
    --surface-high: #374151;
    --on-surface: #f9fafb;
    --on-surface-variant: #d1d5db;
    --outline: #4b5563;

    --success-container: #064e3b;
    --on-success-container: #a7f3d0;
    --error-container: #7f1d1d;
    --warning-container: #78350f;
    --on-warning-container: #fde68a;
    --info-container: #1e3a8a;
    --on-info-container: #bfdbfe;
    /* PayPal brand stays the same in dark mode — required for brand recognition */

    --glass-bg: rgba(17, 24, 39, 0.95);
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* ---- Page & container ---- */
html.dark-mode body {
    background: #0f172a;
    color: var(--on-surface);
}

html.dark-mode .registration-container {
    background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #374151 100%);
    background-image:
        radial-gradient(at 47% 33%, rgba(37, 99, 235, 0.05) 0, transparent 59%),
        radial-gradient(at 82% 65%, rgba(8, 145, 178, 0.03) 0, transparent 55%),
        radial-gradient(at 25% 75%, rgba(5, 150, 105, 0.02) 0, transparent 40%),
        linear-gradient(125deg, rgba(37, 99, 235, 0.02) 0%, rgba(8, 145, 178, 0.02) 100%);
}

/* Themed registration pages (theme-*) ship their own header/progress; do not override. */
html.dark-mode .registration-container:not([class*="theme-"]) .registration-header {
    background: rgba(17, 24, 39, 0.95) !important;
    border-bottom-color: rgba(75, 85, 99, 0.3) !important;
    color: var(--on-surface) !important;
}

html.dark-mode .header-title,
html.dark-mode .event-name {
    color: var(--on-surface) !important;
}

/* ---- Form main area ---- */
html.dark-mode .form-main {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(31, 41, 55, 0.9) 100%) !important;
    border: 1px solid rgba(75, 85, 99, 0.2) !important;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.4),
        0 10px 10px -5px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(75, 85, 99, 0.1) !important;
}

html.dark-mode .form-main::after {
    background: radial-gradient(circle, rgba(75, 85, 99, 0.05) 0%, transparent 70%) !important;
}

html.dark-mode .form-section {
    background: var(--surface-container);
    border-color: var(--outline);
    color: var(--on-surface);
}

html.dark-mode .form-section h3,
html.dark-mode .form-section label,
html.dark-mode .form-section .form-label {
    color: var(--on-surface);
}

html.dark-mode .form-section:hover {
    background: var(--surface-high);
}

/* ---- Inputs ---- */
html.dark-mode .form-control,
html.dark-mode .form-input,
html.dark-mode .form-select,
html.dark-mode .form-textarea,
html.dark-mode select,
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="date"],
html.dark-mode input[type="number"],
html.dark-mode textarea {
    background: var(--surface) !important;
    border-color: var(--outline) !important;
    color: var(--on-surface) !important;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-input:focus,
html.dark-mode .form-select:focus,
html.dark-mode .form-textarea:focus {
    background: var(--surface) !important;
    border-color: var(--primary) !important;
}

html.dark-mode .form-control::placeholder,
html.dark-mode .form-input::placeholder,
html.dark-mode .form-textarea::placeholder {
    color: var(--on-surface-variant);
}

html.dark-mode .form-group label,
html.dark-mode .form-group .form-text {
    color: var(--on-surface);
}

html.dark-mode .form-group .form-text {
    color: var(--on-surface-variant);
}

/* ---- Checkbox items ---- */
html.dark-mode .checkbox-item {
    background: var(--surface);
    border-color: var(--outline);
    color: var(--on-surface);
}

html.dark-mode .checkbox-item:hover {
    background: var(--surface-container);
    border-color: var(--primary);
}

/* ---- Radio groups ---- */
html.dark-mode .radio-group label {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(71, 85, 105, 0.5);
    color: var(--on-surface);
}

html.dark-mode .radio-group label:hover {
    background: rgba(30, 41, 59, 1);
    border-color: var(--primary);
}

html.dark-mode .radio-group label:has(input:checked) {
    background: rgba(37, 99, 235, 0.15);
    border-color: var(--primary, #2563eb);
}

/* ---- Race type cards ---- */
html.dark-mode .form-group[data-field-type="race_type"] .radio-group label {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(71, 85, 105, 0.5);
    color: var(--on-surface, #f9fafb);
}

html.dark-mode .form-group[data-field-type="race_type"] .radio-group label:has(input:checked) {
    background: rgba(37, 99, 235, 0.15);
    border-color: var(--primary, #2563eb);
}

html.dark-mode .form-group[data-field-type="race_type"] .race-card-price {
    color: #60a5fa;
}

html.dark-mode .form-group[data-field-type="race_type"] .race-card-desc {
    color: #9ca3af;
}

html.dark-mode .form-group[data-field-type="race_type"] .radio-group label[data-race="21km"]:has(input:checked) {
    background: rgba(220, 38, 38, 0.12);
}

html.dark-mode .form-group[data-field-type="race_type"] .radio-group label[data-race="10km"]:has(input:checked) {
    background: rgba(37, 99, 235, 0.12);
}

html.dark-mode .form-group[data-field-type="race_type"] .radio-group label[data-race="5km"]:has(input:checked) {
    background: rgba(22, 163, 74, 0.12);
}

/* ---- Sidebar ---- */
html.dark-mode .event-sidebar {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

html.dark-mode .event-info-compact,
html.dark-mode .event-info-card {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    color: var(--on-surface);
}

html.dark-mode .event-info-header h3,
html.dark-mode .event-description {
    color: var(--on-surface);
}

html.dark-mode .quick-detail,
html.dark-mode .detail-item {
    background: var(--surface-container);
    border-color: var(--outline);
    color: var(--on-surface-variant);
}

html.dark-mode .quick-detail:hover,
html.dark-mode .detail-item:hover {
    background: var(--surface-high);
}

html.dark-mode .detail-icon,
html.dark-mode .header-badge,
html.dark-mode .summary-icon {
    background: var(--surface-high) !important;
    color: var(--on-surface-variant) !important;
}

/* Payment summary + element dark-mode styling moved to payment.css (TASK-205) —
 * it is the single source for the payment section, light and dark. */

/* ---- Payment elements (Stripe) ---- */
html.dark-mode .StripeElement {
    background: var(--surface) !important;
    border-color: var(--outline) !important;
    color: var(--on-surface) !important;
}

html.dark-mode .StripeElement--focus {
    border-color: var(--primary) !important;
}

/* ---- Buttons ---- */
html.dark-mode .btn-outline {
    background: transparent;
    border-color: var(--outline);
    color: var(--on-surface);
}

html.dark-mode .btn-outline:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

/* ---- Event details (sidebar details list) ---- */
html.dark-mode .event-detail {
    background: var(--surface-container);
    border-color: var(--outline);
    color: var(--on-surface);
}

html.dark-mode .event-detail:hover {
    background: var(--surface-high);
}

/* ---- Kit section ---- */
html.dark-mode .kit-gara-section {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

html.dark-mode .kit-item {
    background: var(--surface-container);
    border-color: var(--outline);
    color: var(--on-surface);
}

html.dark-mode .kit-item:hover {
    background: var(--surface-high);
}

html.dark-mode .kit-item-name {
    color: var(--on-surface);
}

html.dark-mode .kit-item-description {
    color: var(--on-surface-variant);
}

/* ---- Progress steps ---- */
html.dark-mode .step-number {
    background: rgba(30, 41, 59, 0.8) !important;
    color: #64748b !important;
    border-color: rgba(71, 85, 105, 0.5) !important;
}

html.dark-mode .progress-step.active .step-number {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #fff !important;
    border-color: #3b82f6 !important;
}

html.dark-mode .progress-step.completed .step-number {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #fff !important;
    border-color: #10b981 !important;
}

html.dark-mode .progress-step .step-label {
    color: var(--on-surface-variant);
}

html.dark-mode .progress-step.active .step-label {
    color: var(--primary);
}

html.dark-mode .registration-container:not([class*="theme-"]) .progress-container {
    background: var(--surface-container) !important;
    border-color: var(--outline) !important;
}

/* ---- Loading overlay ---- */
html.dark-mode .loading-overlay {
    background: rgba(15, 23, 42, 0.9);
}

/* ---- Form navigation ---- */
html.dark-mode .form-navigation {
    border-top-color: var(--outline);
}

/* ---- Group registration toggle ---- */
html.dark-mode .group-registration-toggle {
    background: linear-gradient(135deg, #0c4a6e 0%, #164e63 100%) !important;
    border-color: #0e7490 !important;
    color: #e0f2fe !important;
}

html.dark-mode .group-registration-toggle h5 {
    color: #e0f2fe !important;
}

html.dark-mode .group-registration-toggle small {
    color: #94a3b8 !important;
}

/* ---- task-202: group CTA section dark-mode polish ---------------------
 * The group section uses var(--theme-*) but Bootstrap's .alert + .btn-outline
 * classes override at higher specificity in light blue, leaving cards that
 * look "white" inside the dark form. Force-override here. */
html.dark-mode .group-cta {
    background: var(--theme-surface, #111827) !important;
    border-color: var(--theme-border, #1e2d40) !important;
    color: var(--theme-text, #f1f5f9) !important;
}

html.dark-mode .group-cta__summary,
html.dark-mode .group-cta__title,
html.dark-mode .group-cta__hint,
html.dark-mode .group-cta__hint-soft {
    color: var(--theme-text, #f1f5f9) !important;
}

html.dark-mode .group-cta__hint {
    color: var(--theme-muted, #94a3b8) !important;
}

/* Bootstrap .alert wins specificity for the family banner — force-override */
html.dark-mode .group-cta__family-banner.alert,
html.dark-mode .group-cta__family-banner {
    background: rgba(56, 189, 248, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.30) !important;
    color: var(--theme-text, #e0f2fe) !important;
}

html.dark-mode .group-cta__family-banner .bi,
html.dark-mode .group-cta__family-banner i {
    color: #38bdf8 !important;
}

html.dark-mode .group-cta__counter,
html.dark-mode .group-cta__counter span,
html.dark-mode .group-cta__counter strong {
    color: var(--theme-text, #f1f5f9) !important;
}

html.dark-mode .group-cta__counter .text-muted,
html.dark-mode .group-cta__counter small {
    color: var(--theme-muted, #94a3b8) !important;
}

/* "Copia dati" outline button — Bootstrap's .btn-outline-secondary defaults
   to white bg/grey border which screams in dark mode. */
html.dark-mode #copy-organizer-btn,
html.dark-mode .group-cta__actions #copy-organizer-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--theme-border, #334155) !important;
    color: var(--theme-muted, #cbd5e1) !important;
}

html.dark-mode #copy-organizer-btn:hover,
html.dark-mode .group-cta__actions #copy-organizer-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--theme-accent, #38bdf8) !important;
    color: var(--theme-text, #f1f5f9) !important;
}

html.dark-mode .group-cta__empty {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px dashed var(--theme-border, #334155) !important;
    color: var(--theme-muted, #94a3b8) !important;
}

html.dark-mode .group-cta__empty .bi {
    color: var(--theme-muted, #6b7280) !important;
}

html.dark-mode .group-cta__total-bar {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--theme-border, #334155) !important;
    color: var(--theme-text, #f1f5f9) !important;
}

/* Browser-native date input: Chrome/Safari render the input chrome
   independently from CSS. color-scheme tells them to use the dark widget. */
html.dark-mode input[type="date"],
html.dark-mode input[type="time"],
html.dark-mode input[type="datetime-local"] {
    color-scheme: dark;
}

/* ---- Group participant cards ---- */
html.dark-mode .group-participant-card {
    background: var(--surface, #1e293b);
    border-color: var(--outline, #334155);
}

html.dark-mode .participant-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-color: var(--outline, #334155);
}

html.dark-mode .participant-header h5 {
    color: var(--on-surface, #f9fafb);
}

html.dark-mode .participant-body .form-label {
    color: var(--on-surface-variant, #d1d5db);
}

html.dark-mode .group-total-bar {
    background: var(--surface, #1e293b) !important;
    border-color: var(--outline, #334155) !important;
}

/* ---- Theme-modern dark overrides ---- */
html.dark-mode .theme-modern {
    --theme-bg:       #0a0f1a;
    --theme-surface:  #111827;
    --theme-text:     #f1f5f9;
    --theme-muted:    #94a3b8;
    --theme-border:   #1e2d40;
    --theme-input-bg: #0f1929;
    --theme-primary:  #0b1220;
    /* task-201: --theme-accent must stay visible on the dark surfaces — the
     * compliance block, group cards, and add-participant button all use
     * --theme-accent as the highlight colour. Without this override they
     * fell through to --theme-primary (#0b1220 ≈ black) and became invisible. */
    --theme-accent:        #38bdf8;
    --theme-accent-hover:  #0ea5e9;
}

html.dark-mode .theme-modern .registration-header {
    background: var(--theme-primary) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .theme-modern .header-title {
    color: rgba(255, 255, 255, 0.55) !important;
}

html.dark-mode .theme-modern .event-name {
    color: #ffffff !important;
}

html.dark-mode .theme-modern .progress-container {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.dark-mode .theme-modern .form-group input,
html.dark-mode .theme-modern .form-group select,
html.dark-mode .theme-modern .form-group textarea {
    background: #0f1929;
    color: #f1f5f9;
    border-color: #1e2d40;
}

html.dark-mode .theme-modern .form-group input:focus,
html.dark-mode .theme-modern .form-group select:focus,
html.dark-mode .theme-modern .form-group textarea:focus {
    background: #111827;
}

html.dark-mode .theme-modern .event-info-card,
html.dark-mode .theme-modern .form-section.active {
    background: #111827;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

html.dark-mode .theme-modern .progress-steps {
    background: #111827;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.14);
}

html.dark-mode .theme-modern .ssl-badge,
html.dark-mode .theme-modern .security-badge {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.06);
}

html.dark-mode .theme-modern .payment-summary,
html.dark-mode .theme-modern .order-summary {
    background: #0f1929;
    border-color: #1e2d40;
}