/* ==========================================================================
   Theme overrides — passaggio a un look più "SaaS / dashboard professional".
   Caricato DOPO style.css nel layout. Non toccare il tema base: tutto qui.

   Stack:
   - Inter come body font (caratteristiche tipografiche da dashboard moderne)
   - 13px base (più densità di informazione, classico per admin pro)
   - JetBrains Mono per il monospace (numeri/orari nelle tabelle)
   - tabular-nums sulle tabelle e nei badge numerici
   ========================================================================== */

:root {
    --bs-body-font-family: "Inter", "Inter var", -apple-system, BlinkMacSystemFont,
                           "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
                           "Apple Color Emoji", "Segoe UI Emoji";
    --bs-body-font-size: 0.875rem;           /* 14px — pro ma leggibile */
    --bs-body-line-height: 1.5;
    --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular,
                         "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

html, body {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    font-feature-settings: "cv11", "ss01", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
}

/* Heading: tighter tracking, peso 600 (non 700) per look meno aggressivo */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-body-font-family);
    font-weight: 600;
    letter-spacing: -0.015em;
}
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1.0625rem; }
h4, .h4 { font-size: 0.9375rem; }
h5, .h5 { font-size: 0.875rem; }
h6, .h6 { font-size: 0.8125rem; }

/* Page title nel layout (.page-title o titoli dashboard) */
.page-titles h2,
.page-titles h3,
.page-titles h4,
.dz-head h1, .dz-head h2 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* Tabelle: numeri allineati e font leggermente più piccolo */
.table {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}
.table thead th {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;            /* 12px header tipico delle dashboard pro */
    color: rgba(11, 16, 32, 0.55);
}
[data-theme-version="dark"] .table thead th {
    color: rgba(245, 246, 255, 0.55);
}
.table td, .table th {
    vertical-align: middle;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* Form: label e input più contenuti */
.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    margin-bottom: 0.35rem;
    color: rgba(11, 16, 32, 0.7);
}
[data-theme-version="dark"] .form-label {
    color: rgba(245, 246, 255, 0.7);
}
.form-control,
.form-select {
    font-size: 0.875rem;
}

/* Bottoni: meno "tondeggianti", peso medio anziché bold */
.btn {
    font-weight: 500;
    letter-spacing: 0;
    font-size: 0.875rem;
}
.btn-sm {
    font-size: 0.8125rem;
}

/* Badge: tabular-nums e leggermente più sobri */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

/* Card header e titoli sezione: meno chiassosi */
.card-header {
    font-weight: 600;
    font-size: 0.875rem;
}

/* ==========================================================================
   Sidebar — densità "SaaS pro": riduce padding, dimezza margini fra le voci,
   icone più piccole, sotto-voci più compatte. Lo stesso markup è usato per
   superadmin / manager (palestra) / coach / personal, quindi questi override
   sono globali.
   ========================================================================== */

/* Voci di primo livello: tracking neutro + scala tipografica */
.deznav .metismenu > li > a {
    font-size: 0.75rem !important;   /* 12px — denso */
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

/* Spacing fra le voci: era 5px verticali, ora 0 */
.deznav .metismenu > li {
    margin: 0;
}

/* Padding del link: era 0.625rem 1.875rem (10/30), portato a 0.35rem 1rem
   (~5.5px verticali, 16px orizzontali). Riga più bassa, meno aria a sinistra. */
.deznav .metismenu a {
    padding: 0.35rem 1rem !important;
}

/* Icona davanti alla voce: rimpicciolita ulteriormente */
.deznav .metismenu > li > a > i {
    font-size: 0.9rem !important;   /* ~14.4px */
    width: 1.25rem !important;
    height: 1.25rem !important;
    line-height: 1.25rem !important;
    margin-right: 6px !important;
}

/* Sotto-voci (figli di .has-arrow) */
.deznav .metismenu ul {
    padding: 2px 0;                /* era 5px 0 */
}
.deznav .metismenu ul a {
    font-size: 0.75rem !important;            /* 12px — coerente col primo livello */
    padding: 0.3rem 0 0.3rem 2.25rem !important;
    line-height: 1.25;
}
@media only screen and (max-width: 90rem) {
    .deznav .metismenu ul a {
        padding-left: 2.1rem !important;
        font-size: 0.75rem !important;
    }
}

/* Freccia collassabile: rifatta più piccola e allineata col nuovo padding */
.deznav .metismenu .has-arrow:after {
    right: 1.125rem;
    width: 6px;
    height: 6px;
}

/* Sezione attiva: pallino sinistro più sottile (estetica pro) */
.deznav .metismenu > li.mm-active > a {
    font-weight: 600;
}

/* Brand/header sidebar: riduciamo il padding del logo per allineare col body
   senza alterare il --dz-header-height del tema */
.nav-header {
    padding: 0 1.125rem;
}

/* Header bar: brand title coerente */
.brand-title {
    font-family: var(--bs-body-font-family);
    letter-spacing: -0.02em;
}

/* Codice / mono: JetBrains Mono ovunque (slot orari, codici, hash) */
code, kbd, pre, samp,
.font-monospace,
[style*="monospace"] {
    font-family: var(--bs-font-monospace) !important;
    font-feature-settings: "zero", "ss02";
}

/* Modal title più sobrio */
.modal-title {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

/* Small text: usa il small del browser (12px) ma tabular per i numeri */
small, .small {
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   BRAND — ConnexWellness
   ==========================================================================
   Palette dal brand kit (docs/ConnexWellness-Brand-Kit): cyan #22E7F2 su
   nero #111. È la costruzione del logo — tile nero, segno neon — e qui
   diventa una regola di sistema:

     • il NERO riempie   → bottoni primari, chip pieni, testo forte
     • il CYAN accenna   → barra del menu attivo, bordi, focus, badge, grafici

   Il motivo non è estetico: #22E7F2 su bianco fa 1.7:1 di contrasto. Come
   riempimento di un bottone o come testo su fondo chiaro è illeggibile. Dove
   serve il cyan *scritto* c'è `--cw-cyan-ink`, la stessa tinta virata scura
   fino a passare il livello AA. Nel tema scuro il rapporto si inverte e il
   cyan torna protagonista, come nel logo neon.

   Tutto passa dalle variabili Bootstrap, così le utility (.text-primary,
   .bg-primary-subtle, i badge, i link) seguono da sole.
   ========================================================================== */

/* Il selettore non e' solo `:root`: il tema definisce la palette in
   `:root, [data-bs-theme=light]` e lo switcher scrive `data-bs-theme` sul
   `<body>`. Quella dichiarazione sta quindi sull'elemento stesso e vince sul
   valore ereditato da `<html>`: con il solo `:root` le variabili qui sotto
   restavano scavalcate e tutto cio' che usa `var(--bs-primary)` — campanella,
   avatar, icone dell'header — continuava a uscire blu. */
:root,
[data-bs-theme="light"],
[data-theme-version="light"],
body {
    /* Colori del brand */
    --cw-cyan:        #22E7F2;
    --cw-cyan-rgb:    34, 231, 242;
    --cw-cyan-bright: #5CF0F8;
    --cw-cyan-ink:    #08808C;   /* cyan leggibile come testo su fondo chiaro (4.7:1) */
    --cw-cyan-soft:   rgba(34, 231, 242, 0.14);
    --cw-ink:         #111111;
    --cw-ink-rgb:     17, 17, 17;
    --cw-ink-deep:    #0D0D0D;
    --cw-ink-soft:    #2A2F33;

    /* ── Remap Bootstrap: il primario è l'inchiostro ─────────────────── */
    --bs-primary:              var(--cw-ink);
    --bs-primary-rgb:          var(--cw-ink-rgb);
    --bs-primary-text-emphasis: var(--cw-cyan-ink);
    --bs-primary-bg-subtle:    var(--cw-cyan-soft);
    --bs-primary-border-subtle: rgba(34, 231, 242, 0.35);

    /* Secondario: neutro, non più viola */
    --bs-secondary:            #5A6469;
    --bs-secondary-rgb:        90, 100, 105;

    /* Info = il cyan del brand: nelle view `bg-info`/`text-info` sono già
       usati per le evidenziazioni, e così diventano l'accento del brand. */
    --bs-info:                 var(--cw-cyan);
    --bs-info-rgb:             var(--cw-cyan-rgb);
    --bs-info-text-emphasis:   var(--cw-cyan-ink);
    --bs-info-bg-subtle:       var(--cw-cyan-soft);
    --bs-info-border-subtle:   rgba(34, 231, 242, 0.35);

    /* Semantici armonizzati col cyan */
    --bs-success:              #12B886;
    --bs-success-rgb:          18, 184, 134;
    --bs-warning:              #F59F0A;
    --bs-warning-rgb:          245, 159, 10;
    --bs-danger:               #E5484D;
    --bs-danger-rgb:           229, 72, 77;

    /* Link: cyan scuro, leggibile */
    --bs-link-color:           var(--cw-cyan-ink);
    --bs-link-color-rgb:       6, 112, 123;
    --bs-link-hover-color:     #045560;
    --bs-link-hover-color-rgb: 4, 85, 96;

    --bs-focus-ring-color:     rgba(var(--cw-cyan-rgb), 0.35);
}

[data-bs-theme="dark"],
[data-theme-version="dark"] {
    /* Sul fondo scuro il cyan può fare tutto: riempire, scrivere, brillare. */
    --bs-primary:              var(--cw-cyan);
    --bs-primary-rgb:          var(--cw-cyan-rgb);
    --bs-primary-text-emphasis: var(--cw-cyan-bright);
    --bs-primary-bg-subtle:    rgba(34, 231, 242, 0.16);
    --bs-primary-border-subtle: rgba(34, 231, 242, 0.40);

    --bs-link-color:           var(--cw-cyan);
    --bs-link-color-rgb:       var(--cw-cyan-rgb);
    --bs-link-hover-color:     var(--cw-cyan-bright);
    --bs-link-hover-color-rgb: 92, 240, 248;

    --bs-success:              #2ED9A5;
    --bs-success-rgb:          46, 217, 165;
    --bs-warning:              #FFB224;
    --bs-warning-rgb:          255, 178, 36;
    --bs-danger:               #FF5A5F;
    --bs-danger-rgb:           255, 90, 95;
}

/* ── Bottoni ─────────────────────────────────────────────────────────────
   Il tema scrive i colori a mano dentro ogni `.btn-*` (non via var), quindi
   qui vanno riscritti uno per uno. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cw-ink);
    --bs-btn-border-color: var(--cw-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-focus-shadow-rgb: var(--cw-cyan-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cw-ink);
    --bs-btn-disabled-border-color: var(--cw-ink);
}
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5A6469;
    --bs-btn-border-color: #5A6469;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #474F53;
    --bs-btn-hover-border-color: #474F53;
    --bs-btn-focus-shadow-rgb: 90, 100, 105;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #474F53;
    --bs-btn-active-border-color: #474F53;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5A6469;
    --bs-btn-disabled-border-color: #5A6469;
}
/* Info = cyan: il testo sopra è SEMPRE scuro, mai bianco. */
.btn-info {
    --bs-btn-color: var(--cw-ink);
    --bs-btn-bg: var(--cw-cyan);
    --bs-btn-border-color: var(--cw-cyan);
    --bs-btn-hover-color: var(--cw-ink);
    --bs-btn-hover-bg: var(--cw-cyan-bright);
    --bs-btn-hover-border-color: var(--cw-cyan-bright);
    --bs-btn-focus-shadow-rgb: var(--cw-cyan-rgb);
    --bs-btn-active-color: var(--cw-ink);
    --bs-btn-active-bg: var(--cw-cyan-bright);
    --bs-btn-active-border-color: var(--cw-cyan-bright);
    --bs-btn-disabled-color: var(--cw-ink);
    --bs-btn-disabled-bg: var(--cw-cyan);
    --bs-btn-disabled-border-color: var(--cw-cyan);
}
.btn-success {
    --bs-btn-bg: #12B886; --bs-btn-border-color: #12B886;
    --bs-btn-hover-bg: #0E9A71; --bs-btn-hover-border-color: #0E9A71;
    --bs-btn-active-bg: #0E9A71; --bs-btn-active-border-color: #0E9A71;
    --bs-btn-disabled-bg: #12B886; --bs-btn-disabled-border-color: #12B886;
    --bs-btn-focus-shadow-rgb: 18, 184, 134;
}
.btn-warning {
    --bs-btn-color: var(--cw-ink); --bs-btn-hover-color: var(--cw-ink); --bs-btn-active-color: var(--cw-ink);
    --bs-btn-bg: #F59F0A; --bs-btn-border-color: #F59F0A;
    --bs-btn-hover-bg: #D98A05; --bs-btn-hover-border-color: #D98A05;
    --bs-btn-active-bg: #D98A05; --bs-btn-active-border-color: #D98A05;
    --bs-btn-disabled-bg: #F59F0A; --bs-btn-disabled-border-color: #F59F0A;
    --bs-btn-focus-shadow-rgb: 245, 159, 10;
}
.btn-danger {
    --bs-btn-bg: #E5484D; --bs-btn-border-color: #E5484D;
    --bs-btn-hover-bg: #CC3A3F; --bs-btn-hover-border-color: #CC3A3F;
    --bs-btn-active-bg: #CC3A3F; --bs-btn-active-border-color: #CC3A3F;
    --bs-btn-disabled-bg: #E5484D; --bs-btn-disabled-border-color: #E5484D;
    --bs-btn-focus-shadow-rgb: 229, 72, 77;
}
.btn-outline-primary {
    --bs-btn-color: var(--cw-ink);
    --bs-btn-border-color: rgba(var(--cw-ink-rgb), 0.25);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cw-ink);
    --bs-btn-hover-border-color: var(--cw-ink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cw-ink);
    --bs-btn-active-border-color: var(--cw-ink);
    --bs-btn-focus-shadow-rgb: var(--cw-cyan-rgb);
}
.btn-outline-info {
    --bs-btn-color: var(--cw-cyan-ink);
    --bs-btn-border-color: rgba(var(--cw-cyan-rgb), 0.55);
    --bs-btn-hover-color: var(--cw-ink);
    --bs-btn-hover-bg: var(--cw-cyan);
    --bs-btn-hover-border-color: var(--cw-cyan);
    --bs-btn-active-color: var(--cw-ink);
    --bs-btn-active-bg: var(--cw-cyan);
    --bs-btn-focus-shadow-rgb: var(--cw-cyan-rgb);
}
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: var(--cw-ink-deep);
    --bs-btn-bg: var(--cw-cyan);
    --bs-btn-border-color: var(--cw-cyan);
    --bs-btn-hover-color: var(--cw-ink-deep);
    --bs-btn-hover-bg: var(--cw-cyan-bright);
    --bs-btn-hover-border-color: var(--cw-cyan-bright);
    --bs-btn-active-color: var(--cw-ink-deep);
    --bs-btn-active-bg: var(--cw-cyan-bright);
    --bs-btn-disabled-color: var(--cw-ink-deep);
    --bs-btn-disabled-bg: var(--cw-cyan);
    --bs-btn-disabled-border-color: var(--cw-cyan);
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--cw-cyan);
    --bs-btn-border-color: rgba(var(--cw-cyan-rgb), 0.5);
    --bs-btn-hover-color: var(--cw-ink-deep);
    --bs-btn-hover-bg: var(--cw-cyan);
    --bs-btn-hover-border-color: var(--cw-cyan);
    --bs-btn-active-color: var(--cw-ink-deep);
    --bs-btn-active-bg: var(--cw-cyan);
}

/* ── Testo e utility ────────────────────────────────────────────────────
   `.text-primary` colora icone e etichette: lì il nero sparirebbe nel testo
   normale, quindi scrive in cyan scuro. È la regola "nero riempie, cyan
   scrive" applicata alle utility. */
.text-primary,
.text-info {
    color: var(--cw-cyan-ink) !important;
}
[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .text-info {
    color: var(--cw-cyan) !important;
}

/* Chip pieni: sul cyan il testo va scuro, sempre. */
.badge.bg-info,
.badge.bg-primary.text-dark,
.bg-info {
    color: var(--cw-ink) !important;
}
.badge.bg-primary {
    background-color: var(--cw-ink) !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .badge.bg-primary {
    background-color: var(--cw-cyan) !important;
    color: var(--cw-ink-deep) !important;
}
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ── Chip dei dati (elenco utenti del superadmin) ───────────────────────
   Il tema impone `.badge { --bs-badge-color: #fff }`, quindi un
   `bg-warning` nasce con testo bianco su giallo: 1.6:1, illeggibile. Le
   utility di Bootstrap qui non bastano perché il colore lo decide una
   variabile del tema, non la cascata — la stessa ragione per cui i
   `.btn-*` del tema vanno riscritti a mano.

   Due livelli, e la differenza deve saltare all'occhio: grigio per i dati
   personali dell'utente, ambra per i movimenti contabili, che sono della
   palestra e non si cancellano. */
.badge-dato,
.badge-dato-contabile {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    border: 1px solid transparent;
}
.badge-dato {
    background: rgba(16, 19, 20, 0.05);
    color: #4a5257;
    border-color: rgba(16, 19, 20, 0.08);
}
.badge-dato-contabile {
    background: #FFF4D6;
    color: #7A5200;               /* 7.2:1 sul fondo ambra */
    border-color: #F0D48A;
}
[data-bs-theme="dark"] .badge-dato {
    background: rgba(255, 255, 255, 0.07);
    color: #c9d1d4;
    border-color: rgba(255, 255, 255, 0.10);
}
[data-bs-theme="dark"] .badge-dato-contabile {
    background: rgba(240, 180, 40, 0.16);
    color: #F5C863;
    border-color: rgba(240, 180, 40, 0.35);
}
/* Cliccabile: dietro c'è il dettaglio di verso quale palestra. */
button.badge-dato-contabile {
    cursor: pointer;
}
button.badge-dato-contabile:hover {
    background: #FCE9B5;
}

/* ── Sidebar: la voce attiva è cyan ─────────────────────────────────────
   La barretta laterale (`a:before`) e il fondo tenue sono l'unico punto di
   colore forte del menu: il testo resta scuro per leggibilità. */
[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li > a:before {
    background: var(--cw-cyan);
}
[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li.mm-active > a,
[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li:hover > a {
    color: var(--cw-ink);
    background: var(--cw-cyan-soft);
}
[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li.mm-active > a i,
[data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li:hover > a i {
    color: var(--cw-cyan-ink);
}
.deznav .metismenu > li.mm-active > a,
.deznav .metismenu ul a:hover,
.deznav .metismenu ul a:focus,
.deznav .metismenu ul a.mm-active {
    color: var(--cw-cyan-ink);
}
[data-bs-theme="dark"] .deznav .metismenu > li.mm-active > a i,
[data-bs-theme="dark"] .deznav .metismenu ul a.mm-active {
    color: var(--cw-cyan);
}
[data-bs-theme="dark"][data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li.mm-active > a,
[data-bs-theme="dark"][data-sidebar-style="full"][data-layout="vertical"] .deznav .metismenu > li:hover > a {
    color: #fff;
    background: rgba(var(--cw-cyan-rgb), 0.12);
}

/* ── Form ───────────────────────────────────────────────────────────────
   Il focus è l'unico momento in cui il cyan compare da solo: è un bordo,
   non un testo, quindi il contrasto basso non è un problema. */
.form-control:focus,
.form-select:focus,
.dataTables_wrapper input:focus {
    border-color: var(--cw-cyan);
    box-shadow: 0 0 0 3px rgba(var(--cw-cyan-rgb), 0.25);
}
.form-check-input:checked {
    background-color: var(--cw-ink);
    border-color: var(--cw-ink);
}
.form-check-input:focus {
    border-color: var(--cw-cyan);
    box-shadow: 0 0 0 3px rgba(var(--cw-cyan-rgb), 0.25);
}
/* Switch acceso: cyan pieno — è un indicatore, non un testo. */
.form-check.form-switch .form-check-input:checked {
    background-color: var(--cw-cyan);
    border-color: var(--cw-cyan);
}
[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--cw-cyan);
    border-color: var(--cw-cyan);
}

/* ── Navigazione a schede ────────────────────────────────────────────── */
.nav-tabs .nav-link.active {
    color: var(--cw-ink);
    border-bottom-color: var(--cw-cyan);
    font-weight: 600;
}
.nav-tabs .nav-link:hover {
    border-bottom-color: rgba(var(--cw-cyan-rgb), 0.5);
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    color: #fff;
    border-bottom-color: var(--cw-cyan);
}
.nav-pills .nav-link.active,
.page-item.active .page-link {
    background-color: var(--cw-ink);
    border-color: var(--cw-ink);
    color: #fff;
}
[data-bs-theme="dark"] .nav-pills .nav-link.active,
[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: var(--cw-cyan);
    border-color: var(--cw-cyan);
    color: var(--cw-ink-deep);
}

/* ── Progress, spinner, selezione ───────────────────────────────────── */
.progress-bar {
    background-color: var(--cw-cyan);
}
.spinner-border,
.sk-three-bounce .sk-child {
    color: var(--cw-cyan);
    background-color: currentColor;
}
::selection {
    background: rgba(var(--cw-cyan-rgb), 0.30);
}

/* ── Logo nell'intestazione della sidebar ───────────────────────────── */
.nav-header .brand-logo .logo-abbr {
    border-radius: 0.9rem;
}
.nav-header .brand-title {
    color: var(--cw-ink) !important;
    font-weight: 700;
}
/* Il wordmark E' il logo: qui va il cyan del brand, non la variante scura
   usata per il testo funzionale. Le linee guida sul contrasto escludono
   esplicitamente i logotipi, e la variante scura sul nome letto vira al verde. */
.cw-accent,
.nav-header .brand-title .cw-accent {
    color: var(--cw-cyan);
}
[data-bs-theme="dark"] .nav-header .brand-title {
    color: #fff !important;
}


/* Titolo di pagina nell'header: il tema usa un carattere display che accanto a
   Inter sembra di un'altra applicazione. */
.header .dashboard_bar {
    font-family: var(--bs-body-font-family);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--cw-ink);
}
[data-bs-theme="dark"] .header .dashboard_bar { color: #fff; }

/* ── Bottoni "outline" ───────────────────────────────────────────────────
   Anche questi hanno i colori scritti a mano nel tema: senza riscriverli
   restano il viola e il blu del tema d'origine. */
.btn-outline-secondary {
    --bs-btn-color: #5A6469;
    --bs-btn-border-color: rgba(var(--cw-ink-rgb), 0.22);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5A6469;
    --bs-btn-hover-border-color: #5A6469;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5A6469;
    --bs-btn-active-border-color: #5A6469;
    --bs-btn-disabled-color: #5A6469;
    --bs-btn-disabled-border-color: rgba(var(--cw-ink-rgb), 0.22);
    --bs-btn-focus-shadow-rgb: 90, 100, 105;
}
.btn-outline-success {
    --bs-btn-color: #0A7A5A;
    --bs-btn-border-color: rgba(18, 184, 134, 0.55);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #12B886;
    --bs-btn-hover-border-color: #12B886;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #12B886;
    --bs-btn-disabled-color: #0A7A5A;
    --bs-btn-disabled-border-color: rgba(18, 184, 134, 0.55);
    --bs-btn-focus-shadow-rgb: 18, 184, 134;
}
.btn-outline-warning {
    --bs-btn-color: #8A5A00;
    --bs-btn-border-color: rgba(245, 159, 10, 0.55);
    --bs-btn-hover-color: var(--cw-ink);
    --bs-btn-hover-bg: #F59F0A;
    --bs-btn-hover-border-color: #F59F0A;
    --bs-btn-active-color: var(--cw-ink);
    --bs-btn-active-bg: #F59F0A;
    --bs-btn-disabled-color: #8A5A00;
    --bs-btn-disabled-border-color: rgba(245, 159, 10, 0.55);
    --bs-btn-focus-shadow-rgb: 245, 159, 10;
}
.btn-outline-danger {
    --bs-btn-color: #C0343A;
    --bs-btn-border-color: rgba(229, 72, 77, 0.55);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #E5484D;
    --bs-btn-hover-border-color: #E5484D;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #E5484D;
    --bs-btn-disabled-color: #C0343A;
    --bs-btn-disabled-border-color: rgba(229, 72, 77, 0.55);
    --bs-btn-focus-shadow-rgb: 229, 72, 77;
}
.btn-outline-dark {
    --bs-btn-color: var(--cw-ink);
    --bs-btn-border-color: rgba(var(--cw-ink-rgb), 0.25);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cw-ink);
    --bs-btn-hover-border-color: var(--cw-ink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cw-ink);
    --bs-btn-focus-shadow-rgb: var(--cw-cyan-rgb);
}
/* `.btn-light`/`.btn-dark`: usati per le azioni neutre nelle tabelle. */
.btn-dark {
    --bs-btn-bg: var(--cw-ink);
    --bs-btn-border-color: var(--cw-ink);
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-active-bg: #000;
    --bs-btn-focus-shadow-rgb: var(--cw-cyan-rgb);
}
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: rgba(255, 255, 255, 0.85);
    --bs-btn-border-color: rgba(255, 255, 255, 0.25);
    --bs-btn-hover-color: var(--cw-ink-deep);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.9);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.9);
}

/* ── Menu utente nell'header ─────────────────────────────────────────────
   Il tema fissa `width: 12.5rem` sul dropdown del profilo. Le voci hanno
   `white-space: nowrap`, quindi una etichetta lunga ("Mostra setup primi
   passi") sfonda il riquadro e finisce fuori dallo schermo, perche' il menu
   e' ancorato a destra e cresce verso l'esterno. Larghezza al contenuto, con
   un tetto che tiene comunque dentro la finestra. */
.header-right .header-profile .dropdown-menu {
    width: auto;
    min-width: 17rem;                                /* la voce piu' lunga sta su una riga */
    max-width: min(22rem, calc(100vw - 1.5rem));     /* ma non esce mai dallo schermo */
}
.header-right .header-profile .dropdown-menu .dropdown-item {
    white-space: normal;
}