/* =========================================================================
   TestAmmissione — Override Metronic 9 (Tailwind/shadcn theme)
   -------------------------------------------------------------------------
   Stile pulito e moderno (ispirato ad AMBOSS) con i colori del brand.
   Chrome scuro `#060f1e` = stesso colore della navbar di testammissione.com.
   Caricato per ULTIMO in header_new.blade.php → vince su Metronic.
   ========================================================================= */

:root, .demo1, body {
    --ta-dark:   #060f1e;   /* navy scurissimo della home (navbar) */
    --ta-navy:   #14365c;
    --ta-blue:   #1d5d8c;
    --ta-blue-2: #3f86c4;
    --ta-cyan:   #4dd2e1;   /* accento luminoso (mockup dashboard) */
    --ta-red:    #b23b3b;
    --ta-gold:   #c9962a;

    --primary: #1d5d8c;
    --primary-foreground: #ffffff;
}

/* ============================ TOP BAR (header) ============================ */
/* Prima usava lo stesso navy quasi-nero (--ta-dark) della sidebar — pochissimo
   contrasto tra le due barre. Qui si usa --ta-navy/--ta-blue (stessa palette,
   più chiari/più blu) così l'header si distingue nettamente dalla sidebar. */
.kt-header {
    background: linear-gradient(180deg, rgba(20,54,92,.97), rgba(29,93,140,.92)) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 0 !important;
    border-bottom: 1px solid rgba(196,214,232,.10) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .22) !important;
}
/* bagliore sottile in stile mockup, dietro al contenuto dell'header */
.kt-header::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(40% 160% at 8% 0%, rgba(77,210,225,.10), transparent 60%);
}
.kt-header > * { position: relative; z-index: 1; }
.kt-header, .kt-header a, .kt-header .kt-menu-title, .kt-header button { color: #dbe6f5 !important; }

/* nel template TUTTE le voci header hanno .active → niente pillole, solo testo */
.kt-header .kt-menu-item,
.kt-header .kt-menu-item.active,
.kt-header .kt-menu-item.here,
.kt-header .kt-menu-link,
.kt-header .kt-menu-item.active > .kt-menu-link,
.kt-header .kt-menu-item.here  > .kt-menu-link,
.kt-header .kt-menu-link.active {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
.kt-header .kt-menu-link { color: rgba(255,255,255,.80) !important; font-weight: 500 !important; border-radius: 8px !important; }
.kt-header .kt-menu-link:hover,
.kt-header a:hover { color: #ffffff !important; background: rgba(255,255,255,.10) !important; }
.kt-header svg { color: #cfe0f2 !important; }
.kt-header svg:hover { color: #ffffff !important; }
.kt-header input {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
}
.kt-header input::placeholder { color: rgba(255,255,255,.6) !important; }

/* ====================== AREA LOGO (sidebar-header) ======================= */
.kt-sidebar-header {
    background: linear-gradient(180deg, rgba(8,20,38,.99), rgba(6,15,30,.96)) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(196,214,232,.10) !important;
}
.kt-sidebar-header img { filter: brightness(0) invert(1); }   /* logo in bianco */
.kt-sidebar-header .default-logo { filter: none; }   /* nuovo logo: colori originali (cuore rosso) */
.kt-sidebar-header button, .kt-sidebar-header svg { color: #ffffff !important; }
.kt-header .kt-btn,
.kt-sidebar-header .kt-btn { background: transparent !important; border-color: transparent !important; color: #dbe6f5 !important; }
.kt-header .kt-btn:hover,
.kt-sidebar-header .kt-btn:hover { background: rgba(255,255,255,.12) !important; color: #ffffff !important; }

/* icone/pulsanti header: bordati, bagliore ciano in hover (stile mockup) */
.kt-header .kt-btn { border: 1px solid rgba(196,214,232,.14) !important; background: rgba(255,255,255,.02) !important; }
.kt-header .kt-btn:hover {
    border-color: var(--ta-cyan) !important;
    color: var(--ta-cyan) !important;
    background: rgba(77,210,225,.08) !important;
}
.kt-header .kt-btn:hover i,
.kt-header .kt-btn:hover svg { color: var(--ta-cyan) !important; }

/* ==================== SIDEBAR (scura come la home) ====================== */
.kt-sidebar {
    background: linear-gradient(180deg, rgba(8,20,38,.99), rgba(6,15,30,.96)) !important;
    border-inline-end: 1px solid rgba(196,214,232,.10) !important;
    /* NB: .kt-sidebar è già "fixed" via Tailwind (per restare fissa durante lo
       scroll) — NON toccare position qui, altrimenti la si sovrascrive e la
       sidebar scorre via col resto della pagina. "fixed" è già un contesto di
       posizionamento valido per lo ::before qui sotto. */
}
.kt-sidebar::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(60% 40% at 0% 0%, rgba(77,210,225,.07), transparent 60%);
}
.kt-sidebar > * { position: relative; z-index: 1; }
.kt-sidebar .kt-menu-link {
    border-radius: 10px !important;
    color: rgba(255,255,255,.78) !important;
    font-weight: 500 !important;
    transition: background-color .12s, color .12s, box-shadow .12s;
}
.kt-sidebar .kt-menu-title { color: rgba(255,255,255,.80) !important; }
.kt-sidebar .kt-menu-link:hover { background-color: rgba(255,255,255,.07) !important; }
.kt-sidebar .kt-menu-link:hover .kt-menu-title { color: #ffffff !important; }
.kt-sidebar .kt-menu-link:hover .kt-menu-icon { color: #ffffff !important; }
.kt-sidebar .kt-menu-icon { color: rgba(255,255,255,.50) !important; }
.kt-menu-heading { color: rgba(138,169,201,.62) !important; letter-spacing: .12em !important; }
.kt-sidebar .kt-menu-arrow, .kt-sidebar .kt-menu-bullet { color: rgba(255,255,255,.45) !important; }

/* voce FOGLIA attiva = bagliore ciano a sinistra (stile mockup), testo bianco */
.kt-sidebar .kt-menu-item:not(.kt-menu-item-accordion) { position: relative; }
.kt-sidebar .kt-menu-item:not(.kt-menu-item-accordion).here  > .kt-menu-link,
.kt-sidebar .kt-menu-item:not(.kt-menu-item-accordion).active > .kt-menu-link,
.kt-sidebar .kt-menu-link.active {
    background: linear-gradient(90deg, rgba(77,210,225,.16), rgba(77,210,225,.02)) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.kt-sidebar .kt-menu-item:not(.kt-menu-item-accordion).here::before,
.kt-sidebar .kt-menu-item:not(.kt-menu-item-accordion).active::before {
    content: ""; position: absolute; left: 2px; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ta-cyan);
    box-shadow: 0 0 12px 1px rgba(77,210,225,.75);
}
.kt-sidebar .kt-menu-item:not(.kt-menu-item-accordion).here  > .kt-menu-link .kt-menu-icon,
.kt-sidebar .kt-menu-item:not(.kt-menu-item-accordion).active > .kt-menu-link .kt-menu-icon,
.kt-sidebar .kt-menu-link.active .kt-menu-icon { color: var(--ta-cyan) !important; }
.kt-sidebar .kt-menu-item:not(.kt-menu-item-accordion).here  > .kt-menu-link,
.kt-sidebar .kt-menu-item:not(.kt-menu-item-accordion).here  > .kt-menu-link *,
.kt-sidebar .kt-menu-item:not(.kt-menu-item-accordion).active > .kt-menu-link,
.kt-sidebar .kt-menu-item:not(.kt-menu-item-accordion).active > .kt-menu-link *,
.kt-sidebar .kt-menu-link.active,
.kt-sidebar .kt-menu-link.active * { color: #ffffff !important; }

/* genitore accordion attivo = solo testo azzurro, niente pillola */
.kt-sidebar .kt-menu-item-accordion.here  > .kt-menu-link,
.kt-sidebar .kt-menu-item-accordion.active > .kt-menu-link,
.kt-sidebar .kt-menu-item-accordion.show  > .kt-menu-link {
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.kt-sidebar .kt-menu-item-accordion.here  > .kt-menu-link .kt-menu-title,
.kt-sidebar .kt-menu-item-accordion.show  > .kt-menu-link .kt-menu-title,
.kt-sidebar .kt-menu-item-accordion.here  > .kt-menu-link .kt-menu-icon,
.kt-sidebar .kt-menu-item-accordion.show  > .kt-menu-link .kt-menu-icon { color: #7fb2d9 !important; }

/* ========================= CARD & BADGE (contenuto) ===================== */
.kt-card:not(.bg-transparent):not(.shadow-none) {
    border: 1px solid #e9edf3 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(22, 42, 82, .04), 0 10px 26px rgba(22, 42, 82, .06) !important;
}
.kt-card-title { font-weight: 600 !important; color: #1a2233 !important; letter-spacing: -.01em; }
/* Dark mode: il colore sopra (#1a2233, navy scuro) è pensato per card
   bianche — su una card scura (tema dark) il titolo diventava quasi
   invisibile. Il bordo chiaro delle card va anche lui scurito. */
.dark .kt-card-title { color: var(--foreground) !important; }
.dark .kt-card:not(.bg-transparent):not(.shadow-none) { border-color: var(--border) !important; }

/* Badge soft (pill tenui). NB: escludere .size-2 — i pallini-legenda delle
   statistiche usano kt-badge-* solo come colore pieno di sfondo. */
.kt-badge-success:not(.size-2)     { background: #e7f6ee !important; color: #1a7d4b !important; border: 1px solid #cdead9 !important; }
.kt-badge-warning:not(.size-2)     { background: #fdf4e2 !important; color: #99690e !important; border: 1px solid #f0e0b8 !important; }
.kt-badge-danger:not(.size-2),
.kt-badge-destructive:not(.size-2) { background: #fdecee !important; color: #b02a37 !important; border: 1px solid #f6cdd2 !important; }
.kt-badge-primary:not(.size-2)     { background: #e9f1f9 !important; color: #1d5d8c !important; border: 1px solid #cfe0ef !important; }

/* sidebar più ariosa e pulita (stile AMBOSS) */
.kt-sidebar .kt-menu-link { padding: 9px 12px !important; gap: 11px !important; }
.kt-sidebar .kt-menu-item { margin-bottom: 2px !important; }
.kt-sidebar .kt-menu-icon { font-size: 18px !important; width: 20px !important; display: flex; justify-content: center; }
.kt-sidebar .kt-menu-title { font-size: 14px !important; }
.kt-menu-heading { font-size: 11px !important; margin-bottom: 4px !important; }

/* separatore sottile sopra i titoli di sezione (stile AMBOSS) */
.kt-sidebar .kt-menu-heading { position: relative; padding-top: 16px !important; margin-top: 12px !important; }
.kt-sidebar .kt-menu-heading::before {
    content: ""; position: absolute; top: 0; left: 12px; right: 12px;
    height: 1px; background: rgba(255,255,255,.08);
}

/* blocco nome + ruolo accanto all'avatar (header, stile AMBOSS) */
.ta-userinfo { display: flex !important; flex-direction: column; text-align: start; }
@media (max-width: 767px) { .ta-userinfo { display: none !important; } }

/* pulsante collassa-sidebar rimosso (desktop + mobile) */
#sidebar_toggle { display: none !important; }

/* --------------------------- DARK MODE TOGGLE --------------------------- */
/* Lo switch (.kt-switch) usava var(--input), grigio chiarissimo in light
   mode, e una "pallina" bianca con ombra quasi impercettibile — su un pannello
   già bianco (il dropdown profilo) risultava praticamente invisibile. Bordo
   sempre visibile sulla pista + anello sulla pallina per un contrasto reale
   in entrambe le modalità. */
.kt-switch { border: 1px solid rgba(0,0,0,.16) !important; }
.kt-switch:before { box-shadow: 0 0 0 1px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.25) !important; }
.kt-switch:checked, .kt-switch[aria-checked='true'] { border-color: transparent !important; }
.dark .kt-switch { border-color: rgba(255,255,255,.22) !important; }

/* =========================================================================
   FASE 2 — Bottoni, liste, dropdown, tabs, simulatore (brand-wide)
   ========================================================================= */

/* ------------------------------ BOTTONI M9 ------------------------------ */
.kt-btn { border-radius: 8px !important; font-weight: 500; }

/* CTA pieni: kt-btn-mono è il bottone "Inizia/Rivedi" delle card quiz/lezioni */
.kt-btn-mono,
.kt-btn-primary {
    background-color: var(--ta-blue) !important;
    border-color: var(--ta-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 2px 6px rgba(20,54,92,.22);
}
.kt-btn-mono:hover,
.kt-btn-primary:hover { background-color: #2670a3 !important; border-color: #2670a3 !important; }
.kt-btn-mono:active,
.kt-btn-primary:active { background-color: var(--ta-primary-700, #14365c) !important; }

/* outline: hover con accento brand */
.kt-btn-outline:hover { border-color: var(--ta-blue) !important; color: var(--ta-blue) !important; }

/* outline+primary combinati (es. "Inizia" nella pagina Database): restano outline blu */
.kt-btn-outline.kt-btn-primary {
    background: transparent !important;
    color: var(--ta-blue) !important;
    border-color: var(--ta-blue) !important;
    box-shadow: none;
}
.kt-btn-outline.kt-btn-primary:hover { background: #e9f1f9 !important; }

/* warning → oro brand */
.kt-btn-warning { background-color: var(--ta-gold) !important; border-color: var(--ta-gold) !important; color: #ffffff !important; }
.kt-btn-warning:hover { background-color: #b3841f !important; }

/* pericolo → rosso brand */
.kt-btn-danger,
.kt-btn-destructive {
    background-color: var(--ta-red) !important;
    border-color: var(--ta-red) !important;
    color: #ffffff !important;
}
.kt-btn-danger:hover,
.kt-btn-destructive:hover { background-color: #9b3333 !important; border-color: #9b3333 !important; }
.kt-btn-outline.kt-btn-destructive { background: transparent !important; color: var(--ta-red) !important; }
.kt-btn-outline.kt-btn-destructive:hover { background: #fdecee !important; }

/* --------------------- BOTTONI LEGACY (Bootstrap/M8) -------------------- */
.btn.btn-primary {
    background-color: var(--ta-blue) !important;
    border-color: var(--ta-blue) !important;
    color: #ffffff !important;
}
.btn.btn-primary:hover { background-color: #2670a3 !important; }
.btn.btn-danger { background-color: var(--ta-red) !important; border-color: var(--ta-red) !important; }
.btn.btn-danger:hover { background-color: #9b3333 !important; }
.btn.btn-link { color: var(--ta-blue) !important; }

/* --------------------------- AVATAR HEADER ------------------------------ */
/* anello avatar: da verde acceso a ciano (accento mockup) */
img.border-green-500 { border-color: var(--ta-cyan) !important; }

/* badge piano (seconda riga di .ta-userinfo, es. "Pro") in oro, come nel mockup */
.ta-userinfo span:last-child {
    color: var(--ta-gold) !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 800 !important;
}

/* --------------- SCROLLBAR SIDEBAR: nascosta ma scroll attivo ------------ */
/* stesso pattern del mockup (.side-nav): niente barra visibile, si scorre lo
   stesso se il contenuto dovesse eccedere l'altezza disponibile. */
.kt-sidebar [data-kt-scrollable="true"],
#sidebar_scrollable {
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge legacy */
}
.kt-sidebar [data-kt-scrollable="true"]::-webkit-scrollbar,
#sidebar_scrollable::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* --------------------------- DROPDOWN / MENU ----------------------------- */
.kt-dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid #e9edf3 !important;
    box-shadow: 0 6px 16px rgba(8,20,40,.10), 0 14px 40px rgba(8,20,40,.14) !important;
}
.kt-dropdown-menu-link:hover,
.kt-dropdown-menu-toggle:hover { background: #f3f7fc !important; }

/* Il menu profilo (dropdown a tendina) è annidato nel DOM dentro .kt-header
   (la barra scura in alto) pur apparendo staccato/su sfondo bianco — le
   regole sopra (.kt-header a/button/.kt-menu-title { color:#dbe6f5 }),
   pensate per il testo chiaro sulla barra scura, finivano applicate anche
   qui rendendo il testo del menu quasi illeggibile su sfondo bianco. */
.kt-header .kt-dropdown-menu a,
.kt-header .kt-dropdown-menu button,
.kt-header .kt-dropdown-menu .kt-menu-title { color: var(--foreground) !important; }

/* ------------------------------- TABS ----------------------------------- */
.kt-tabs .kt-tab-toggle.active,
.kt-tab-toggle.active { color: var(--ta-blue) !important; border-color: var(--ta-blue) !important; }

/* --------------------------- DATATABLE / LISTE --------------------------- */
.kt-table th { color: #5b6779 !important; }
.kt-datatable-pagination .active,
.kt-datatable-pagination button[aria-current="page"] {
    background: var(--ta-blue) !important;
    color: #ffffff !important;
    border-color: var(--ta-blue) !important;
    border-radius: 8px !important;
}

/* =========================================================================
   SIMULATORE & RISULTATI — sostituzione del blu Metronic #1b84ff
   (le pagine definiscono <style> inline; qui vinciamo con !important)
   ========================================================================= */
.simulation-scrubber,
.results-progress { background: rgba(29, 93, 140, .12) !important; }

.simulation-scrubber-fill,
.results-progress-fill,
.results-percentile-fill { background: var(--ta-blue) !important; }

.simulation-scrubber-thumb,
.results-progress-thumb { border-color: var(--ta-blue) !important; }

.simulation-scrubber-badge,
.results-progress-badge {
    background: var(--ta-blue) !important;
    box-shadow: 0 4px 10px rgba(29, 93, 140, .25) !important;
}

.answer-option:hover {
    border-color: var(--ta-blue) !important;
    box-shadow: 0 0 0 3px rgba(29, 93, 140, .08) !important;
}
.answer-option.is-selected {
    border-color: var(--ta-blue) !important;
    background: rgba(29, 93, 140, .06) !important;
    box-shadow: 0 0 0 3px rgba(29, 93, 140, .10) !important;
}

.question-comment-box {
    border-color: rgba(29, 93, 140, .14) !important;
    background: rgba(29, 93, 140, .05) !important;
}

.simulation-loading-box {
    border-color: rgba(29, 93, 140, .18) !important;
    background: rgba(29, 93, 140, .06) !important;
}
.simulation-loading-spinner {
    border-color: rgba(29, 93, 140, .18) !important;
    border-top-color: var(--ta-blue) !important;
}

.results-percentile-row.is-current {
    border-color: rgba(29, 93, 140, .14) !important;
    background: rgba(29, 93, 140, .05) !important;
}
.results-percentile-row.is-current .results-percentile-fill { background: var(--ta-blue-2) !important; }

.results-normalized-kicker {
    color: var(--ta-blue) !important;
    border-color: rgba(29, 93, 140, .30) !important;
    background: rgba(29, 93, 140, .08) !important;
}