/* ==========================================================================
   Gestionale ASD Centro Taekwondo Firenze — Palette & Custom Styles
   ========================================================================== */

/*
 * PALETTE TAEKWONDO
 *
 * Ispirazione: dobok bianco, cintura nera, hogu rosso/blu (sparring),
 * professionalità sportiva, FITA blue.
 *
 * Primary   → Blu navy profondo (autorità, professionalità)
 * Accent    → Colore vivace del tema (varia per tema)
 * Success   → Verde certificato valido
 * Warning   → Ambra certificato in scadenza
 * Danger    → Rosso certificato scaduto
 * Sidebar   → Sfondo scuro profondo
 * Surface   → Superficie chiara con gradiente mesh
 */

:root {
    /* ── Tema default: B — Indigo moderno ───────────────── */
    --tkd-navy:         #3730a3;
    --tkd-navy-light:   #4338ca;
    --tkd-navy-dark:    #312e81;
    --tkd-accent:       #818cf8;
    --tkd-accent-light: #a5b4fc;
    --tkd-gold:         #f59e0b;

    /* ── Colori semantici (invarianti tra temi) ─────────── */
    --tkd-red:          #c62828;
    --tkd-red-light:    #e53935;
    --tkd-blue-hogu:    #1565c0;

    /* ── Override Bootstrap / AdminLTE ───────────────────── */
    --bs-primary:       #3730a3;
    --bs-primary-rgb:   55, 48, 163;

    /* ── Superfici ──────────────────────────────────────── */
    --tkd-surface:      #f9fafb;
    --tkd-surface-card: #ffffff;
    --tkd-border:       #e5e7eb;

    /* ── Sidebar ────────────────────────────────────────── */
    --tkd-sidebar-bg:       #312e81;
    --tkd-sidebar-hover:    #3730a3;
    --tkd-sidebar-active:   #3730a3;
    --tkd-sidebar-text:     #c7d2fe;
    --tkd-sidebar-text-act: #ffffff;

    /* ── Topbar ─────────────────────────────────────────── */
    --tkd-topbar-bg:    #ffffff;
    --tkd-topbar-border:#e5e7eb;

    /* ── Stato certificati (semaforo — invarianti) ───────── */
    --tkd-cert-valido:    #2e7d32;
    --tkd-cert-scadenza:  #f57f17;
    --tkd-cert-scaduto:   #c62828;
    --tkd-cert-mancante:  #9e9e9e;

    /* ── Sfondo — gradiente mesh (fixed, visibile sotto le card glass) ── */
    --tkd-bg-gradient:
        radial-gradient(ellipse at 18% 32%, rgba(99, 102, 241, 0.24) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 12%, rgba(165, 180, 252, 0.20) 0%, transparent 50%),
        radial-gradient(ellipse at 55% 82%, rgba(55, 48, 163, 0.16) 0%, transparent 48%);
}

/* ── Tema A — Navy raffinato ────────────────────────────────────────────── */
[data-tema="A"] {
    --tkd-navy:         #1e3a5f;
    --tkd-navy-light:   #274d82;
    --tkd-navy-dark:    #132840;
    --tkd-accent:       #4a9fd5;
    --tkd-accent-light: #6bb5e8;
    --tkd-gold:         #f9a825;
    --bs-primary:       #1e3a5f;
    --bs-primary-rgb:   30, 58, 95;
    --tkd-surface:      #f4f6f9;
    --tkd-border:       #dee2e6;
    --tkd-sidebar-bg:       #132840;
    --tkd-sidebar-hover:    #1e3a5f;
    --tkd-sidebar-active:   #1e3a5f;
    --tkd-sidebar-text:     #ced4da;
    --tkd-bg-gradient:
        radial-gradient(ellipse at 15% 35%, rgba(30, 58, 95, 0.24) 0%, transparent 58%),
        radial-gradient(ellipse at 80% 12%, rgba(74, 159, 213, 0.20) 0%, transparent 52%),
        radial-gradient(ellipse at 52% 80%, rgba(19, 40, 64, 0.16) 0%, transparent 48%);
}

/* ── Tema B — Indigo moderno (default) ──────────────────────────────────── */
[data-tema="B"] {
    --tkd-navy:         #3730a3;
    --tkd-navy-light:   #4338ca;
    --tkd-navy-dark:    #312e81;
    --tkd-accent:       #818cf8;
    --tkd-accent-light: #a5b4fc;
    --tkd-gold:         #f59e0b;
    --bs-primary:       #3730a3;
    --bs-primary-rgb:   55, 48, 163;
    --tkd-surface:      #f9fafb;
    --tkd-border:       #e5e7eb;
    --tkd-sidebar-bg:       #312e81;
    --tkd-sidebar-hover:    #3730a3;
    --tkd-sidebar-active:   #3730a3;
    --tkd-sidebar-text:     #c7d2fe;
    --tkd-bg-gradient:
        radial-gradient(ellipse at 18% 32%, rgba(99, 102, 241, 0.24) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 12%, rgba(165, 180, 252, 0.20) 0%, transparent 50%),
        radial-gradient(ellipse at 55% 82%, rgba(55, 48, 163, 0.16) 0%, transparent 48%);
}

/* ── Tema C — Slate + Verde ─────────────────────────────────────────────── */
[data-tema="C"] {
    --tkd-navy:         #1e293b;
    --tkd-navy-light:   #334155;
    --tkd-navy-dark:    #0f172a;
    --tkd-accent:       #22c55e;
    --tkd-accent-light: #4ade80;
    --tkd-gold:         #f59e0b;
    --bs-primary:       #1e293b;
    --bs-primary-rgb:   30, 41, 59;
    --tkd-surface:      #f1f5f9;
    --tkd-border:       #cbd5e1;
    --tkd-sidebar-bg:       #0f172a;
    --tkd-sidebar-hover:    #1e293b;
    --tkd-sidebar-active:   #1e293b;
    --tkd-sidebar-text:     #94a3b8;
    --tkd-bg-gradient:
        radial-gradient(ellipse at 22% 38%, rgba(30, 41, 59, 0.22) 0%, transparent 58%),
        radial-gradient(ellipse at 78% 14%, rgba(34, 197, 94, 0.22) 0%, transparent 52%),
        radial-gradient(ellipse at 48% 80%, rgba(15, 23, 42, 0.16) 0%, transparent 50%);
}

/* ── Tema E — Viola + Lime ──────────────────────────────────────────────── */
[data-tema="E"] {
    --tkd-navy:         #7c3aed;
    --tkd-navy-light:   #8b5cf6;
    --tkd-navy-dark:    #6d28d9;
    --tkd-accent:       #84cc16;
    --tkd-accent-light: #a3e635;
    --tkd-gold:         #f59e0b;
    --bs-primary:       #7c3aed;
    --bs-primary-rgb:   124, 58, 237;
    --tkd-surface:      #faf5ff;
    --tkd-border:       #ede9fe;
    --tkd-sidebar-bg:       #4c1d95;
    --tkd-sidebar-hover:    #6d28d9;
    --tkd-sidebar-active:   #6d28d9;
    --tkd-sidebar-text:     #ddd6fe;
    --tkd-bg-gradient:
        radial-gradient(ellipse at 20% 35%, rgba(124, 58, 237, 0.22) 0%, transparent 56%),
        radial-gradient(ellipse at 80% 15%, rgba(132, 204, 22, 0.20) 0%, transparent 52%),
        radial-gradient(ellipse at 50% 82%, rgba(109, 40, 217, 0.16) 0%, transparent 50%);
}

/* ── Tema F — Rosa + Ciano ──────────────────────────────────────────────── */
[data-tema="F"] {
    --tkd-navy:         #be185d;
    --tkd-navy-light:   #db2777;
    --tkd-navy-dark:    #9d174d;
    --tkd-accent:       #06b6d4;
    --tkd-accent-light: #22d3ee;
    --tkd-gold:         #f59e0b;
    --bs-primary:       #be185d;
    --bs-primary-rgb:   190, 24, 93;
    --tkd-surface:      #fdf2f8;
    --tkd-border:       #fce7f3;
    --tkd-sidebar-bg:       #831843;
    --tkd-sidebar-hover:    #9d174d;
    --tkd-sidebar-active:   #9d174d;
    --tkd-sidebar-text:     #fbcfe8;
    --tkd-bg-gradient:
        radial-gradient(ellipse at 18% 35%, rgba(190, 24, 93, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 14%, rgba(6, 182, 212, 0.22) 0%, transparent 52%),
        radial-gradient(ellipse at 52% 80%, rgba(157, 23, 77, 0.16) 0%, transparent 50%);
}

/* ── Tema D — Teal profondo ─────────────────────────────────────────────── */
[data-tema="D"] {
    --tkd-navy:         #0f4c5c;
    --tkd-navy-light:   #155e75;
    --tkd-navy-dark:    #083344;
    --tkd-accent:       #38bdf8;
    --tkd-accent-light: #7dd3fc;
    --tkd-gold:         #f59e0b;
    --bs-primary:       #0f4c5c;
    --bs-primary-rgb:   15, 76, 92;
    --tkd-surface:      #f0f9ff;
    --tkd-border:       #bae6fd;
    --tkd-sidebar-bg:       #083344;
    --tkd-sidebar-hover:    #0f4c5c;
    --tkd-sidebar-active:   #0f4c5c;
    --tkd-sidebar-text:     #7dd3fc;
    --tkd-bg-gradient:
        radial-gradient(ellipse at 20% 30%, rgba(15, 76, 92, 0.24) 0%, transparent 58%),
        radial-gradient(ellipse at 80% 15%, rgba(56, 189, 248, 0.23) 0%, transparent 52%),
        radial-gradient(ellipse at 55% 80%, rgba(8, 51, 68, 0.16) 0%, transparent 48%);
}

/* ==========================================================================
   AVATAR UTENTE — cerchio con iniziali (fallback se nessuna foto)
   ========================================================================== */

.avatar-initials {
    width: var(--av-size, 32px);
    height: var(--av-size, 32px);
    border-radius: 50%;
    background: var(--tkd-navy, #1b2a4a);
    color: #fff;
    font-weight: 700;
    font-size: calc(var(--av-size, 32px) * 0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* Nel user-header del dropdown (sfondo già colorato) */
.user-header .avatar-initials {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ==========================================================================
   TEMI PRO (G–L) — palette premium, selezionabili in futuro a pagamento
   ========================================================================== */

/* ── Tema G — Navy + Ambra ──────────────────────────────────────────────── */
[data-tema="G"] {
    --tkd-navy:         #1a2744;
    --tkd-navy-light:   #243460;
    --tkd-navy-dark:    #111d38;
    --tkd-accent:       #f4c060;
    --tkd-accent-light: #f9d88a;
    --tkd-gold:         #e8a020;
    --bs-primary:       #1a2744;
    --bs-primary-rgb:   26, 39, 68;
    --tkd-surface:      #eef0f5;
    --tkd-surface-card: #ffffff;
    --tkd-border:       #dee2e6;
    --tkd-sidebar-bg:       #111d38;
    --tkd-sidebar-hover:    #1a2744;
    --tkd-sidebar-active:   #1a2744;
    --tkd-sidebar-text:     #c8d5e8;
    --tkd-sidebar-text-act: #ffffff;
    --tkd-bg-gradient:
        radial-gradient(ellipse at 15% 35%, rgba(26, 39, 68, 0.26) 0%, transparent 58%),
        radial-gradient(ellipse at 82% 12%, rgba(232, 160, 32, 0.20) 0%, transparent 52%),
        radial-gradient(ellipse at 50% 82%, rgba(17, 29, 56, 0.16) 0%, transparent 48%);
}

/* ── Tema H — Forest + Lime ─────────────────────────────────────────────── */
[data-tema="H"] {
    --tkd-navy:         #1e3a2f;
    --tkd-navy-light:   #2d5440;
    --tkd-navy-dark:    #152b22;
    --tkd-accent:       #a8d56e;
    --tkd-accent-light: #c2e89a;
    --tkd-gold:         #7ab648;
    --bs-primary:       #1e3a2f;
    --bs-primary-rgb:   30, 58, 47;
    --tkd-surface:      #f0f4ec;
    --tkd-surface-card: #ffffff;
    --tkd-border:       #d8e4d4;
    --tkd-sidebar-bg:       #152b22;
    --tkd-sidebar-hover:    #1e3a2f;
    --tkd-sidebar-active:   #1e3a2f;
    --tkd-sidebar-text:     #b8d4b8;
    --tkd-sidebar-text-act: #ffffff;
    --tkd-bg-gradient:
        radial-gradient(ellipse at 18% 38%, rgba(30, 58, 47, 0.26) 0%, transparent 58%),
        radial-gradient(ellipse at 80% 14%, rgba(122, 182, 72, 0.22) 0%, transparent 52%),
        radial-gradient(ellipse at 52% 80%, rgba(21, 43, 34, 0.16) 0%, transparent 48%);
}

/* ── Tema I — Slate + Corallo ───────────────────────────────────────────── */
[data-tema="I"] {
    --tkd-navy:         #2d3748;
    --tkd-navy-light:   #3d4a5e;
    --tkd-navy-dark:    #1a2230;
    --tkd-accent:       #f08080;
    --tkd-accent-light: #f5a8a8;
    --tkd-gold:         #e05252;
    --bs-primary:       #2d3748;
    --bs-primary-rgb:   45, 55, 72;
    --tkd-surface:      #f0f2f5;
    --tkd-surface-card: #ffffff;
    --tkd-border:       #e2e8f0;
    --tkd-sidebar-bg:       #1a2230;
    --tkd-sidebar-hover:    #2d3748;
    --tkd-sidebar-active:   #2d3748;
    --tkd-sidebar-text:     #b0bec5;
    --tkd-sidebar-text-act: #ffffff;
    --tkd-bg-gradient:
        radial-gradient(ellipse at 20% 35%, rgba(45, 55, 72, 0.24) 0%, transparent 58%),
        radial-gradient(ellipse at 80% 14%, rgba(224, 82, 82, 0.20) 0%, transparent 52%),
        radial-gradient(ellipse at 52% 82%, rgba(26, 34, 48, 0.16) 0%, transparent 48%);
}

/* ── Tema J — Bordeaux + Gold ───────────────────────────────────────────── */
[data-tema="J"] {
    --tkd-navy:         #5c1a2e;
    --tkd-navy-light:   #7a2240;
    --tkd-navy-dark:    #42111f;
    --tkd-accent:       #e0c060;
    --tkd-accent-light: #edd48a;
    --tkd-gold:         #c4a435;
    --bs-primary:       #5c1a2e;
    --bs-primary-rgb:   92, 26, 46;
    --tkd-surface:      #f5f0ee;
    --tkd-surface-card: #ffffff;
    --tkd-border:       #e8dbd8;
    --tkd-sidebar-bg:       #42111f;
    --tkd-sidebar-hover:    #5c1a2e;
    --tkd-sidebar-active:   #5c1a2e;
    --tkd-sidebar-text:     #e8c8cc;
    --tkd-sidebar-text-act: #ffffff;
    --tkd-bg-gradient:
        radial-gradient(ellipse at 18% 34%, rgba(92, 26, 46, 0.26) 0%, transparent 58%),
        radial-gradient(ellipse at 82% 13%, rgba(196, 164, 53, 0.22) 0%, transparent 52%),
        radial-gradient(ellipse at 50% 80%, rgba(66, 17, 31, 0.16) 0%, transparent 48%);
}

/* ── Tema K — Indigo + Teal ─────────────────────────────────────────────── */
[data-tema="K"] {
    --tkd-navy:         #312e81;
    --tkd-navy-light:   #4338ca;
    --tkd-navy-dark:    #1e1b5e;
    --tkd-accent:       #5eead4;
    --tkd-accent-light: #99f3e6;
    --tkd-gold:         #0d9488;
    --bs-primary:       #312e81;
    --bs-primary-rgb:   49, 46, 129;
    --tkd-surface:      #f1f5f9;
    --tkd-surface-card: #ffffff;
    --tkd-border:       #e2e8f0;
    --tkd-sidebar-bg:       #1e1b5e;
    --tkd-sidebar-hover:    #312e81;
    --tkd-sidebar-active:   #312e81;
    --tkd-sidebar-text:     #a5d6d3;
    --tkd-sidebar-text-act: #ffffff;
    --tkd-bg-gradient:
        radial-gradient(ellipse at 18% 32%, rgba(49, 46, 129, 0.26) 0%, transparent 56%),
        radial-gradient(ellipse at 80% 13%, rgba(13, 148, 136, 0.24) 0%, transparent 52%),
        radial-gradient(ellipse at 54% 82%, rgba(30, 27, 94, 0.16) 0%, transparent 48%);
}

/* ── Tema L — Charcoal + Arancio ────────────────────────────────────────── */
[data-tema="L"] {
    --tkd-navy:         #1c1c1c;
    --tkd-navy-light:   #2e2e2e;
    --tkd-navy-dark:    #111111;
    --tkd-accent:       #ff8c42;
    --tkd-accent-light: #ffae75;
    --tkd-gold:         #e65c00;
    --bs-primary:       #1c1c1c;
    --bs-primary-rgb:   28, 28, 28;
    --tkd-surface:      #f5f5f5;
    --tkd-surface-card: #ffffff;
    --tkd-border:       #e0e0e0;
    --tkd-sidebar-bg:       #111111;
    --tkd-sidebar-hover:    #1c1c1c;
    --tkd-sidebar-active:   #1c1c1c;
    --tkd-sidebar-text:     #c8c8c8;
    --tkd-sidebar-text-act: #ffffff;
    --tkd-bg-gradient:
        radial-gradient(ellipse at 16% 36%, rgba(28, 28, 28, 0.22) 0%, transparent 58%),
        radial-gradient(ellipse at 82% 14%, rgba(230, 92, 0, 0.22) 0%, transparent 52%),
        radial-gradient(ellipse at 52% 82%, rgba(17, 17, 17, 0.14) 0%, transparent 48%);
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.app-sidebar {
    background-color: var(--tkd-sidebar-bg) !important;
}

.app-sidebar .sidebar-brand {
    background:
        radial-gradient(ellipse at 50% -20%, rgba(255,255,255,0.10) 0%, transparent 65%),
        var(--tkd-navy-dark);
    border-bottom: 2px solid var(--tkd-accent);
}

.app-sidebar .brand-text {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    display: block;
    width: 100%;
}

.app-sidebar .brand-subtitle {
    color: var(--tkd-gold);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: block;
    text-align: center;
    margin-top: -2px;
}

.app-sidebar .nav-link {
    color: var(--tkd-sidebar-text);
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.app-sidebar .nav-link:hover {
    background-color: var(--tkd-sidebar-hover);
    color: #fff;
}

/* Item attivo: barra gold a sinistra via ::before, sfondo sottile */
.app-sidebar .nav-link.active {
    position: relative;
    background-color: var(--tkd-sidebar-active) !important;
    color: var(--tkd-sidebar-text-act) !important;
    font-weight: 600;
    box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.05);
}

.app-sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--tkd-gold);
    border-radius: 0 2px 2px 0;
}

.app-sidebar .nav-header {
    color: var(--tkd-gold);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1rem 1rem 0.4rem;
}

/* Sidebar section divider */
.sidebar-divider {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 0.5rem 1rem;
}

.app-sidebar .nav-treeview .nav-link {
    padding-left: 1.8rem !important;
}

/* ==========================================================================
   TOPBAR — frosted glass
   ========================================================================== */

.app-header {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 24px rgba(0, 0, 0, 0.06);
}

/* Selettore gruppo nella topbar */
.gruppo-selector .nav-link {
    font-size: 0.85rem;
    color: var(--tkd-navy);
    font-weight: 500;
}

.gruppo-selector .badge-gruppo {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

/* ==========================================================================
   BODY & CONTENT
   ========================================================================== */

body {
    background-color: var(--tkd-surface) !important;
    background-image: var(--tkd-bg-gradient);
    background-attachment: fixed;
    min-height: 100vh;
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Area contenuto trasparente: il gradiente body rimane visibile sotto le card */
.app-wrapper,
.app-main,
.app-content {
    background: transparent !important;
}

.app-content-header h3 {
    color: var(--tkd-navy);
    font-weight: 700;
}

/* ==========================================================================
   CARDS — glassmorphism + hover lift
   ========================================================================== */

.card {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Glassmorphism — esclusi i box KPI cintura che usano il colore della cintura come sfondo */
.card:not(.kpi-cintura) {
    background: rgba(255, 255, 255, 0.58) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
}

/* Box KPI cintura: niente glassmorphism, niente bordo — lo sfondo inline è il colore della cintura */
.kpi-cintura {
    border: none !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28) !important;
}

/* Hover lift — non applicato a tabelle o form interattivi lunghi */
.card:not(.no-lift):hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13), 0 3px 10px rgba(0, 0, 0, 0.07);
}

.card-header {
    background: rgba(255, 255, 255, 0.45);
    border-top: 3px solid var(--tkd-navy) !important;
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.08) !important;
    font-weight: 600;
}

/* Variante primary: sfumatura navy — border-top si fonde col background navy */
.card-tkd-primary > .card-header {
    background: linear-gradient(135deg, var(--tkd-navy) 0%, var(--tkd-navy-light) 100%);
    color: #fff;
    border-top-color: var(--tkd-navy-dark) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
}

.card-tkd-accent > .card-header {
    background-color: var(--tkd-red);
    color: #fff;
}

/* Variante danger — certificati scaduti, alert medici */
.card-header-danger {
    background: linear-gradient(135deg, var(--tkd-cert-scaduto) 0%, var(--tkd-red-light) 100%) !important;
    color: #fff !important;
    border-top-color: var(--tkd-cert-scaduto) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.18) !important;
}

.card-header-danger .badge {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

/* ==========================================================================
   INFO BOX — WIDGET KPI (dashboard)
   Icona colorata a sinistra, sfondo glass bianco, numero + label a destra.
   ========================================================================== */

/* Colore tematico per bordo e sfumatura — ereditato dai figli */
.info-box:has(.text-bg-primary) { --ib-color: var(--tkd-navy); }
.info-box:has(.text-bg-success) { --ib-color: var(--tkd-cert-valido); }
.info-box:has(.text-bg-danger)  { --ib-color: var(--tkd-cert-scaduto); }
.info-box:has(.text-bg-warning) { --ib-color: var(--tkd-cert-scadenza); }

.info-box {
    border-radius: 0.5rem;
    overflow: visible;
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid color-mix(in srgb, var(--ib-color, rgba(0,0,0,1)) 28%, transparent) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 0;
}

.info-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.07) !important;
}

.info-box-icon {
    border-radius: 0.4rem !important;
    font-size: 1.6rem !important;
    width: 80px !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.45rem 0 0.45rem 0.45rem;
}

.info-box-content {
    padding: 0.75rem 1rem !important;
}

.info-box-text {
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #777 !important;
    white-space: normal;
    display: block;
}

.info-box-number {
    font-weight: 700 !important;
    font-size: 1.65rem !important;
    color: #1a1a2e !important;
    line-height: 1.15;
    display: block;
}

/* Palette TKD per gli icon-box */
.info-box .text-bg-primary { background-color: var(--tkd-navy) !important;          color: #fff !important; }
.info-box .text-bg-success { background-color: var(--tkd-cert-valido) !important;   color: #fff !important; }
.info-box .text-bg-danger  { background-color: var(--tkd-cert-scaduto) !important;  color: #fff !important; }
.info-box .text-bg-warning { background-color: var(--tkd-cert-scadenza) !important; color: #fff !important; }

/* ==========================================================================
   SMALL BOX — WIDGET KPI
   ========================================================================== */

.small-box {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    /* Bordo superiore highlight — luce che colpisce il bordo */
    border-top: 1px solid rgba(255, 255, 255, 0.28) !important;
}

/* Sheen — riflesso luminoso nella metà superiore */
.small-box::before {
    content: '';
    position: absolute;
    inset: 0;
    height: 55%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.13) 0%, transparent 100%);
    border-radius: 0.5rem 0.5rem 0 0;
    pointer-events: none;
    z-index: 0;
}

.small-box.bg-tkd-navy {
    background: linear-gradient(135deg, var(--tkd-navy) 0%, var(--tkd-navy-light) 100%) !important;
    color: #fff;
}

.small-box.bg-tkd-red {
    background: linear-gradient(135deg, var(--tkd-red) 0%, var(--tkd-red-light) 100%) !important;
    color: #fff;
}

.small-box.bg-tkd-blue {
    background: linear-gradient(135deg, var(--tkd-blue-hogu) 0%, #1976d2 100%) !important;
    color: #fff;
}

.small-box.bg-tkd-gold {
    background: linear-gradient(135deg, #e65100 0%, var(--tkd-gold) 100%) !important;
    color: #fff;
}

.small-box .inner {
    position: relative;
    z-index: 1;
}

.small-box .inner h3 {
    font-weight: 700;
    font-size: 2.2rem;
}

/* Icona in cerchio strutturato */
.small-box-icon-wrap {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    width: 58px;
    height: 58px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.small-box-icon-wrap .bi {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.95);
}

.small-box .small-box-footer {
    position: relative;
    z-index: 1;
    background: rgba(0,0,0,0.12);
    color: rgba(255,255,255,0.85) !important;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

.small-box .small-box-footer:hover {
    color: #fff !important;
    background: rgba(0,0,0,0.2);
}

/* ==========================================================================
   TABELLA
   ========================================================================== */

/* border-top: none sull'elemento thead — con border-collapse:collapse Bootstrap .table-bordered
   applica border-width:1px all'elemento thead stesso, che sovrasta il border:none sui th */
.table > thead {
    border-top: none !important;
}

.table thead th {
    background-color: var(--tkd-navy);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none !important;
    padding: 0.6rem 0.75rem;
}

.table tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

/* ==========================================================================
   BADGE CINTURA
   ========================================================================== */

.badge-cintura {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 4px;
    border: 1px solid rgba(0,0,0,0.15);
}

.badge-cintura-bianca    { background: #fff; }
.badge-cintura-gialla    { background: #fdd835; }
.badge-cintura-arancione { background: #fb8c00; }
.badge-cintura-verde     { background: #43a047; }
.badge-cintura-blu       { background: #1e88e5; }
.badge-cintura-marrone   { background: #6d4c41; }
.badge-cintura-nera      { background: #212121; border-color: #424242; }

.badge-cintura-dual {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 4px;
}

/* ==========================================================================
   BADGE STATO CERTIFICATO (semaforo)
   ========================================================================== */

.badge-cert-valido {
    background-color: var(--tkd-cert-valido);
    color: #fff;
}

.badge-cert-scadenza {
    background-color: var(--tkd-cert-scadenza);
    color: #fff;
}

.badge-cert-scaduto {
    background-color: var(--tkd-cert-scaduto);
    color: #fff;
}

.badge-cert-mancante {
    background-color: var(--tkd-cert-mancante);
    color: #fff;
}

/* ==========================================================================
   BOTTONI CUSTOM TKD
   ========================================================================== */

.btn-tkd-primary {
    background-color: var(--tkd-navy);
    border-color: var(--tkd-navy);
    color: #fff;
}

.btn-tkd-primary:hover {
    background-color: var(--tkd-navy-light);
    border-color: var(--tkd-navy-light);
    color: #fff;
}

.btn-tkd-accent {
    background-color: var(--tkd-red);
    border-color: var(--tkd-red);
    color: #fff;
}

.btn-tkd-accent:hover {
    background-color: var(--tkd-red-light);
    border-color: var(--tkd-red-light);
    color: #fff;
}

/* ==========================================================================
   BOTTONI BOOTSTRAP — override tema-aware
   (btn-success / btn-warning / btn-danger invariati: colori semantici)
   ========================================================================== */

/* btn-primary → colore principale del tema */
.btn-primary {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    var(--tkd-navy);
    --bs-btn-border-color:          var(--tkd-navy);
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              var(--tkd-navy-light);
    --bs-btn-hover-border-color:    var(--tkd-navy-light);
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             var(--tkd-navy-dark);
    --bs-btn-active-border-color:   var(--tkd-navy-dark);
    --bs-btn-disabled-color:        #fff;
    --bs-btn-disabled-bg:           var(--tkd-navy);
    --bs-btn-disabled-border-color: var(--tkd-navy);
}

/* btn-info → sfumatura secondaria del tema */
.btn-info {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    var(--tkd-navy-light);
    --bs-btn-border-color:          var(--tkd-navy-light);
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              var(--tkd-navy);
    --bs-btn-hover-border-color:    var(--tkd-navy);
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             var(--tkd-navy-dark);
    --bs-btn-active-border-color:   var(--tkd-navy-dark);
    --bs-btn-disabled-color:        #fff;
    --bs-btn-disabled-bg:           var(--tkd-navy-light);
    --bs-btn-disabled-border-color: var(--tkd-navy-light);
}

/* btn-outline-primary → contorno navy, riempie su hover */
.btn-outline-primary {
    --bs-btn-color:              var(--tkd-navy);
    --bs-btn-border-color:       var(--tkd-navy);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           var(--tkd-navy);
    --bs-btn-hover-border-color: var(--tkd-navy);
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          var(--tkd-navy-dark);
    --bs-btn-active-border-color:var(--tkd-navy-dark);
    --bs-btn-focus-shadow-rgb:   var(--bs-primary-rgb);
}

/* btn-outline-info → contorno navy-light, riempie su hover */
.btn-outline-info {
    --bs-btn-color:              var(--tkd-navy-light);
    --bs-btn-border-color:       var(--tkd-navy-light);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           var(--tkd-navy-light);
    --bs-btn-hover-border-color: var(--tkd-navy-light);
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          var(--tkd-navy);
    --bs-btn-active-border-color:var(--tkd-navy);
}

/* Badge → seguono il tema */
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--tkd-navy) !important;
}

.badge.bg-info,
.badge.text-bg-info {
    background-color: var(--tkd-navy-light) !important;
    color: #fff !important;
}

/* Link colore primario */
a {
    color: var(--tkd-navy-light);
}
a:hover {
    color: var(--tkd-navy);
}

/* List-group item selezionato → palette tematica, sfondo leggero */
.list-group-item.active,
.list-group-item-action.active {
    background-color: color-mix(in srgb, var(--tkd-navy) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--tkd-navy) 40%, transparent) !important;
    border-left: 3px solid var(--tkd-navy) !important;
    color: var(--tkd-navy) !important;
}
.list-group-item.active .text-muted,
.list-group-item-action.active .text-muted {
    color: color-mix(in srgb, var(--tkd-navy) 60%, transparent) !important;
}
.list-group-item.active .badge,
.list-group-item-action.active .badge {
    background-color: color-mix(in srgb, var(--tkd-navy) 20%, transparent) !important;
    color: var(--tkd-navy) !important;
}

/* ==========================================================================
   PALETTE PREVIEW (solo per pagina demo)
   ========================================================================== */

.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.palette-swatch {
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--tkd-border);
}

.palette-swatch .swatch-color {
    height: 70px;
}

.palette-swatch .swatch-info {
    padding: 0.5rem 0.6rem;
    background: #fff;
    font-size: 0.78rem;
}

.palette-swatch .swatch-info strong {
    display: block;
    font-size: 0.82rem;
    margin-bottom: 2px;
}

.palette-swatch .swatch-info code {
    font-size: 0.72rem;
    color: var(--tkd-navy);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

/* Scroll container per card-body con lista lunga */
.card-body-scroll {
    max-height: 420px;
    overflow-y: auto;
}

/* Badge legenda calendario — larghezza uniforme, testo centrato */
.badge-cal {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 6rem;
    padding: 0.35em 0.6em;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Badge corso: split diagonale metà pieno / metà outline */
.badge-cal-corso {
    background: linear-gradient(135deg, #1565C0 50%, transparent 50%) !important;
    border: 1.5px solid #1565C0 !important;
    color: #fff !important;
    text-shadow: 0 0 4px #1565C0, 0 1px 3px rgba(0,0,0,0.35);
}

/* ==========================================================================
   TOAST TKD — notifiche non invasive con left-accent
   ========================================================================== */

.toast-tkd {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--toast-accent, var(--tkd-navy));
    border-radius: 0.5rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform: translateX(0.75rem);
}

.toast-tkd.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.toast-tkd-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
}

.toast-tkd-icon {
    font-size: 1.1rem;
    color: var(--toast-accent, var(--tkd-navy));
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.toast-tkd-body {
    flex: 1;
    min-width: 0;
}

.toast-tkd-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: #1a1a2e;
    line-height: 1.3;
}

.toast-tkd-msg {
    font-size: 0.82rem;
    color: #4a4a5a;
    margin-top: 0.1rem;
    line-height: 1.45;
}

.toast-tkd-detail {
    font-size: 0.72rem;
    color: #888;
    margin-top: 0.2rem;
    word-break: break-word;
    font-family: 'Courier New', monospace;
}

.toast-tkd-ref {
    font-size: 0.7rem;
    color: #aaa;
    margin-top: 0.2rem;
    letter-spacing: 0.01em;
}

.toast-tkd-ref code {
    font-size: 0.7rem;
    color: #888;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    user-select: all;
}

.toast-tkd-close {
    background: none;
    border: none;
    color: #ccc;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s;
    margin-top: 0.05rem;
}

.toast-tkd-close:hover {
    color: #777;
}

.text-tkd-navy  { color: var(--tkd-navy) !important; }
.text-tkd-red   { color: var(--tkd-red) !important; }
.text-tkd-gold  { color: var(--tkd-gold) !important; }
.bg-tkd-navy    { background-color: var(--tkd-navy) !important; }
.bg-tkd-red     { background-color: var(--tkd-red) !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .small-box .inner h3 {
        font-size: 1.6rem;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    .app-sidebar,
    .app-header,
    .btn,
    .small-box-footer {
        display: none !important;
    }

    .app-main {
        margin-left: 0 !important;
    }

    body {
        background: #fff !important;
        background-image: none !important;
    }

    .card {
        background: #fff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .firma-stampa {
        display: block !important;
    }
}