/* ==========================================================================
   TEMA SCUDERIA FERRARI CLUB JESOLO — chiaro (sfcj) e scuro (sfcj-dark)
   Stessa grafica della landing e dell'app approvate: fondo bianco, nero, rosso
   del club come unico accento, titoli in Archivo largo maiuscolo, testo in Inter,
   angoli quasi squadrati e niente ombre decorative.
   La struttura (barra laterale chiara, voci, schede, campi) riusa le regole dei
   temi Fluent in MP-Shell-site-presentation.css, che includono anche sfcj e
   sfcj-dark; qui ci sono i colori e le differenze di marchio.
   Logo: sempre il file ufficiale, sempre su fondo bianco (Guidelines Logo SFC 2021).
   ========================================================================== */

[data-theme="sfcj"] {
    color-scheme: light;
    --sfcj-red: #c8101a;           /* rosso per pulsanti e link: 5,6:1 sul bianco */
    --sfcj-red-hover: #a50d15;
    --sfcj-red-active: #8f0a12;
    --sfcj-ink: #141414;
    --sfcj-display: "Archivo", "Arial Narrow", Arial, sans-serif;
    --sfcj-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --sidebar-bg: #ffffff;
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --primary-color: var(--sfcj-red);
    --primary-hover: var(--sfcj-red-hover);
    --primary-rgb: 200, 16, 26;
    --primary-subtle-bg: #fcedee;
    --primary-subtle-color: #8f0a12;
    --primary-subtle-border: #f3c2c5;
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-link-color: var(--sfcj-red);
    --bs-link-color-rgb: 200, 16, 26;
    --bs-link-hover-color: var(--sfcj-red-hover);
    --bs-form-check-input-checked-bg-color: var(--sfcj-red);
    --bs-form-check-input-checked-border-color: var(--sfcj-red);
    --bs-primary-bg-subtle: var(--primary-subtle-bg);
    --bs-primary-border-subtle: var(--primary-subtle-border);
    --bs-primary-text-emphasis: var(--primary-subtle-color);
    --bg-app: #f2f2f0;
    --border-color: #e2e2df;
    --text-muted: #555555;
    --card-bg: #ffffff;
    --text-main: #141414;
    --surface-page: #f2f2f0;
    --surface-card: #ffffff;
    --surface-muted: #f7f7f5;
    --text-primary: #141414;
    --text-secondary: #555555;
    --control-radius: 0.25rem;
    --control-focus-ring: 0 0 0 0.2rem rgba(200, 16, 26, 0.22);
    --transition-speed: .2s;
    --transition-curve: cubic-bezier(.33, 0, .1, 1);

    /* Variabili usate dalle regole condivise con Fluent */
    --fl-accent: linear-gradient(90deg, #c8101a 0%, #c8101a 100%);
    --fl-shadow: none;
    --fl-shadow-raised: 0 6px 18px rgba(0, 0, 0, .10);
    --fl-link: var(--sfcj-red);
    --fl-link-hover: var(--sfcj-red-hover);
    --fl-primary-active: var(--sfcj-red-active);
    --fl-nav-text: #2a2a2a;
    --fl-nav-hover: #f2f2f0;
    --fl-nav-active: #fcedee;
    --fl-topbar: #ffffff;
    --fl-item-hover: #f2f2f0;
    --fl-btn2-bg: #ffffff;
    --fl-btn2-border: #141414;
    --fl-btn2-hover-bg: #f2f2f0;
    --fl-btn2-hover-border: #141414;
    --fl-btn2-active-bg: #e2e2df;
    --fl-btn2-active-border: #141414;
    --fl-input-border: #8a8a8a;
    --fl-input-underline: #8a8a8a;
    --fl-tooltip-bg: #141414;
    --fl-tooltip-color: #ffffff;
    --fl-overlay: rgba(0, 0, 0, .35);
    --fl-scrollbar: rgba(0, 0, 0, .25);
}

[data-theme="sfcj-dark"] {
    color-scheme: dark;
    --sfcj-red: #c8101a;           /* pieno con testo bianco */
    --sfcj-red-hover: #d92a33;
    --sfcj-red-active: #a50d15;
    --sfcj-red-text: #ff6b71;      /* rosso per testi e link sul fondo scuro */
    --sfcj-ink: #f2f2f2;
    --sfcj-display: "Archivo", "Arial Narrow", Arial, sans-serif;
    --sfcj-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --sidebar-bg: #161618;
    --sidebar-width: 260px;
    --topbar-height: 60px;
    --primary-color: var(--sfcj-red);
    --primary-hover: var(--sfcj-red-hover);
    --primary-rgb: 200, 16, 26;
    --primary-subtle-bg: #3a1a1d;
    --primary-subtle-color: #ffb3b6;
    --primary-subtle-border: #6b2328;
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-link-color: var(--sfcj-red-text);
    --bs-link-hover-color: #ff9a9e;
    --bs-form-check-input-checked-bg-color: var(--sfcj-red);
    --bs-form-check-input-checked-border-color: var(--sfcj-red);
    --bs-body-bg: #1a1a1c;
    --bs-body-color: #f2f2f2;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-bg: #26262a;
    --bs-tertiary-bg: #202023;
    --bs-border-color: #2e2e31;
    --bg-app: #0f0f10;
    --border-color: #2e2e31;
    --text-muted: #b0b0b0;
    --card-bg: #1a1a1c;
    --text-main: #f2f2f2;
    --surface-page: #0f0f10;
    --surface-card: #1a1a1c;
    --surface-muted: #202023;
    --text-primary: #f2f2f2;
    --text-secondary: #b0b0b0;
    --control-radius: 0.25rem;
    --control-focus-ring: 0 0 0 0.2rem rgba(255, 107, 113, 0.3);
    --transition-speed: .2s;
    --transition-curve: cubic-bezier(.33, 0, .1, 1);

    --fl-accent: linear-gradient(90deg, #c8101a 0%, #c8101a 100%);
    --fl-shadow: none;
    --fl-shadow-raised: 0 6px 18px rgba(0, 0, 0, .5);
    --fl-link: var(--sfcj-red-text);
    --fl-link-hover: #ff9a9e;
    --fl-primary-active: var(--sfcj-red-active);
    --fl-nav-text: #d6d6d6;
    --fl-nav-hover: #232326;
    --fl-nav-active: #2a1a1c;
    --fl-topbar: #1a1a1c;
    --fl-item-hover: #26262a;
    --fl-btn2-bg: transparent;
    --fl-btn2-border: #d6d6d6;
    --fl-btn2-hover-bg: #26262a;
    --fl-btn2-hover-border: #ffffff;
    --fl-btn2-active-bg: #2e2e31;
    --fl-btn2-active-border: #ffffff;
    --fl-input-border: #6a6a70;
    --fl-input-underline: #6a6a70;
    --fl-tooltip-bg: #f2f2f2;
    --fl-tooltip-color: #141414;
    --fl-overlay: rgba(0, 0, 0, .6);
    --fl-scrollbar: rgba(255, 255, 255, .25);
}

/* ─── Caratteri ─── */
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) body { font-family: var(--sfcj-body); }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-family: var(--sfcj-display);
    font-stretch: 112%;
    font-weight: 700;
}
/* Titolo di pagina come nell'app: Archivo largo, maiuscolo */
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .page-title h1,
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .page-header h1 {
    font-stretch: 125%;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .sidebar-section-label {
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ─── Logo: sempre su fondo bianco, file ufficiale, proporzioni intatte ─── */
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .sidebar-brand-container {
    background: #ffffff;
    padding: 0.9rem 1rem;
    text-align: center !important;
}
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .coresuite-brand-picture { justify-content: center; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .sidebar-brand-container .coresuite-brand-logo {
    width: 100%;
    max-width: 224px;
    height: auto;
    max-height: none;
    object-fit: contain;
}

/* ─── Barra laterale e barra in alto ─── */
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar .nav-link,
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar .menu-group-toggle { border-radius: 0.25rem; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar a.nav-link.active,
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar a.nav-link[aria-current="page"] { font-weight: 600; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar a.nav-link.active::before,
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-sidebar a.nav-link[aria-current="page"]::before {
    top: 15%;
    bottom: 15%;
    width: 4px;
    border-radius: 0;
}
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-topbar::after { height: 3px; opacity: 1; }

/* ─── Schede, modali, menu: bordi netti, angoli piccoli ─── */
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) :is(.card, .mp-card, .login-card, .account-status-page) { border-radius: 0.375rem; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .card-header:first-child { border-radius: 0.375rem 0.375rem 0 0; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .card-footer:last-child { border-radius: 0 0 0.375rem 0.375rem; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) :is(.modal-content, .mp-modal) { border-radius: 0.375rem; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .dropdown-menu { border-radius: 0.375rem; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .badge { border-radius: 0.25rem; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .alert { border-radius: 0.375rem; }

/* ─── Pulsanti: rosso pieno o contorno nero, come nell'app ─── */
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .btn,
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-topbar .btn { border-radius: 0.25rem; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--sfcj-red);
    --bs-btn-border-color: var(--sfcj-red);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--sfcj-red-hover);
    --bs-btn-hover-border-color: var(--sfcj-red-hover);
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-bg: var(--sfcj-red);
    --bs-btn-disabled-border-color: var(--sfcj-red);
}
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) :is(.btn-secondary, .btn-outline-secondary, .btn-light) { border-width: 1.5px; }

/* ─── Campi: bordo pieno, fuoco rosso ─── */
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content :is(.form-control, .form-select) { border-radius: 0.25rem; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content :is(.form-control, .form-select):focus {
    border: 1px solid var(--fl-link);
    box-shadow: var(--control-focus-ring);
}
[data-theme="sfcj-dark"] .app-content :is(.form-control, .form-select) { background-color: #141416; }

/* ─── Tabelle: intestazioni in maiuscoletto come le etichette dell'app ─── */
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .app-content .table thead th {
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ─── Pagina di accesso ─── */
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .login-page {
    background: var(--bg-app);
    font-family: var(--sfcj-body);
}
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .login-card {
    background: var(--surface-card);
    color: var(--text-main);
    box-shadow: none;
    border: 1px solid var(--border-color);
}
.sfcj-login-logo {
    display: block;
    background: #ffffff;
    padding: 12px;
    margin: 0 -12px 20px;
}
.sfcj-login-logo img { display: block; width: 100%; height: auto; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .login-header h4 {
    font-family: var(--sfcj-display);
    font-stretch: 125%;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-main);
    letter-spacing: 0;
}
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .login-header h4 span { color: inherit; }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .login-card .form-floating > .form-control {
    border-color: var(--fl-input-border);
    border-radius: 0.25rem;
    color: var(--text-main);
    background: var(--surface-card);
}
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .login-card .form-floating > .form-control:focus {
    border-color: var(--fl-link);
    box-shadow: var(--control-focus-ring);
}
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .login-card .form-floating > label { color: var(--text-secondary); }
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .btn-login {
    background: var(--sfcj-red);
    border-radius: 0.25rem;
    font-family: var(--sfcj-display);
    font-stretch: 125%;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .btn-login:hover {
    background: var(--sfcj-red-hover);
    transform: none;
    box-shadow: none;
}
:is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .login-footer { color: var(--text-secondary); border-top-color: var(--border-color); }

@media (prefers-reduced-motion: reduce) {
    :is([data-theme="sfcj"], [data-theme="sfcj-dark"]) .animate-slide-up { animation: none !important; }
}