/* Team KPI Board (/team-kpi e /team-kpi-giorni): stili condivisi dalle due pagine, prima duplicati
   in due blocchi <style> quasi identici. Tutte le classi hanno il prefisso "tkb-", quindi il file
   può essere caricato globalmente senza toccare il resto dell'app. Il reset del MudContainer di
   BlankLayout (".mud-container") resta invece inline in ciascuna pagina, perché deve valere solo
   mentre la board è aperta. */

/* ===================== Struttura comune ===================== */

.tkb-page {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Navy TAU con velo di marca (turchese in alto a sinistra, viola in basso a destra): sempre
       scuro anche col tema chiaro, è uno schermo "monitor". Font: Montserrat dal tema, niente
       override (design system TAU, 30/09/2026). */
    background:
        radial-gradient(circle at 12% 0%, rgba(2, 164, 185, 0.14), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(92, 1, 183, 0.16), transparent 50%),
        #040923;
    color: rgba(255, 255, 255, 0.87);
}

.tkb-accent-bar {
    flex: 0 0 auto;
    height: 4px;
    /* Gradiente di marca Secondario -> Principale -> Secondario (design system TAU, 30/09/2026):
       il primo colore ripetuto in fondo fa combaciare inizio e fine del loop, senza scatti
       (richiesta utente 21/09/2026: "barra superiore con sfumatura che scorre"). */
    background: linear-gradient(90deg, #5C01B7 0%, #02A4B9 50%, #5C01B7 100%);
    background-size: 200% 100%;
    animation: tkb-accent-flow 16s linear infinite;
}

@keyframes tkb-accent-flow {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
}

.tkb-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.tkb-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tkb-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #5C01B7, #02A4B9);
    box-shadow: 0 6px 18px -6px rgba(2, 164, 185, 0.6);
}

/* Variante ambra della vista giorno per giorno */
.tkb-brand-icon--amber {
    background: linear-gradient(135deg, #F9A620, #C27803);
    box-shadow: 0 6px 18px -6px rgba(249, 166, 32, 0.6);
}

.tkb-brand-title {
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    color: #ffffff;
    line-height: 1.1;
}

/* Titolo della board principale: resta su una riga (sottotitolo tolto per fare spazio allo
   sparkline, richiesta utente 21/09/2026) */
.tkb-brand-title--nowrap {
    white-space: nowrap;
}

.tkb-brand-subtitle {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.60);
    font-weight: 600;
    text-transform: capitalize;
}

.tkb-header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.tkb-live-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #22C55E;
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.tkb-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #22C55E;
    animation: tkb-pulse 2s infinite;
}

/* Ultimo caricamento fallito: si tengono gli ultimi dati validi ma il badge non dice più "LIVE" */
.tkb-live-badge--offline {
    background: rgba(248, 113, 113, 0.14);
    border-color: rgba(248, 113, 113, 0.45);
    color: #F87171;
}

.tkb-live-badge--offline .tkb-live-dot {
    background-color: #F87171;
    animation: none;
}

.tkb-refresh-time {
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    text-align: right;
    line-height: 1.1;
}

@keyframes tkb-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.55; }
    100% { transform: scale(1); opacity: 1; }
}

/* Pulsanti dell'header ("AUTO" e cambio vista): veri <button>, quindi azzeriamo lo stile nativo */
.tkb-rotate-toggle,
.tkb-manual-switch {
    font-family: inherit;
    line-height: inherit;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

.tkb-rotate-toggle:focus-visible,
.tkb-manual-switch:focus-visible {
    outline: 2px solid #02A4B9;
    outline-offset: 2px;
}

/* Interruttore "alterna automaticamente" tra le due viste (richiesta utente 28/09/2026). Stessa
   "pelle" del badge LIVE ma neutro/spento di default: l'utente lo accende una volta sul monitor,
   poi resta acceso (persistito in localStorage) anche alternando pagina. */
.tkb-rotate-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.60);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tkb-rotate-toggle--on {
    background: rgba(2, 164, 185, 0.14);
    border-color: rgba(2, 164, 185, 0.45);
    color: #02A4B9;
}

/* Mini interruttore in stile iOS (Toggle del design system TAU, 30/09/2026): track a pillola
   che diventa turchese da acceso, pallino bianco con piccolo rimbalzo - stesso look dei
   MudSwitch dell'app (vedi my.css). */
.tkb-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    transition: background 0.2s ease;
}

.tkb-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tkb-rotate-toggle--on .tkb-switch-track {
    background: #02A4B9;
}

.tkb-rotate-toggle--on .tkb-switch-knob {
    transform: translateX(12px);
}

.tkb-rotate-toggle--on .mud-icon-root {
    animation: tkb-spin 3s linear infinite;
}

@keyframes tkb-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Cambio manuale verso l'altra vista (richiesta utente 28/09/2026): visibile solo quando
   l'alternanza automatica è SPENTA - con l'automatismo attivo il cambio pagina è già gestito dal
   timer, un pulsante in più confonderebbe chi guarda il monitor. */
.tkb-manual-switch {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.87);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.tkb-manual-switch:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ===================== Board principale (/team-kpi) ===================== */

/* Sparkline animato dell'andamento al centro dell'header (richiesta utente 21/09/2026). */
.tkb-trend {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tkb-trend-svg {
    width: 100%;
    /* Deve restare coerente con TrendSvgHeight nel code-behind per non deformare la curva. */
    height: 88px;
    overflow: visible;
    /* Comparsa progressiva da sinistra a destra con clip-path animato in CSS (non SMIL, poco
       supportato dai browser integrati in monitor/TV - richiesta utente 22/09/2026). */
    animation: tkb-trend-reveal 20s ease-in-out infinite;
}

@keyframes tkb-trend-reveal {
    /* inset(top right bottom left): a "right" 100% nasconde tutto tranne il bordo sinistro: man
       mano che scende verso 0% la curva si "disegna" rivelandosi da sinistra a destra. */
    0% { clip-path: inset(0 100% 0 0); }
    35% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

.tkb-trend-line {
    stroke: #02A4B9;
    stroke-width: 3px;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(2, 164, 185, 0.6));
}

/* Etichette dei giorni sotto il grafico: "space-between" le allinea ai punti dello sparkline
   (BuildSparklinePaths() mette il primo punto a x=0 e l'ultimo a x=larghezza). */
.tkb-trend-days {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 2px;
}

.tkb-trend-day {
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.60);
    text-align: center;
    flex: 0 0 auto;
}

.tkb-trend-caption {
    margin-top: 4px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.60);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.tkb-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Terza riga "auto" per la striscia CRM (richiesta utente 14/09/2026): le due righe delle
       card ore si dividono lo spazio restante, la striscia CRM prende solo quanto le serve. */
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 20px;
    padding: 20px 44px 24px;
}

/* Striscia CRM: stessa "pelle" scura delle card ore, ma orizzontale e compatta. */
.tkb-crm-strip {
    grid-column: 1 / -1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    background: linear-gradient(160deg, #07103A 0%, #05092E 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.65);
    padding: 14px 30px;
    overflow: hidden;
}

.tkb-crm-strip::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #5C01B7 0%, #02A4B9 100%);
}

.tkb-crm-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 24px;
    border-right: 1px dashed rgba(255, 255, 255, 0.12);
}

.tkb-crm-stats {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.tkb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: linear-gradient(160deg, #07103A 0%, #05092E 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.65);
    padding: 20px 28px;
    overflow: hidden;
}

.tkb-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.tkb-card--muted::before { background: linear-gradient(90deg, #98A2B3, #02A4B9); }
.tkb-card--live::before { background: linear-gradient(90deg, #22C55E, #02A4B9); }
.tkb-card--amber::before { background: linear-gradient(90deg, #F9A620, #FBBF4D); }
.tkb-card--purple::before { background: linear-gradient(90deg, #5C01B7, #A78BFA); }

.tkb-card-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.tkb-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
}

.tkb-card-title {
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffffff;
}

.tkb-card-subtitle {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.60);
    font-weight: 600;
}

.tkb-stats-row,
.tkb-period-stats-row {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

/* Ogni statistica è una colonna allineata in basso: se un'etichetta va su due righe, i valori
   restano comunque sulla stessa linea */
.tkb-stats-row > div,
.tkb-period-stats-row > div,
.tkb-crm-stats > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Etichette più grandi (leggibili a distanza dal monitor) e libere di andare a capo invece di
   essere tagliate quando la colonna è stretta */
.tkb-stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.60);
    margin-bottom: 4px;
    line-height: 1.2;
    /* Monitor: card ad altezza fissa, l'etichetta resta su una riga (sotto 1200px va a capo) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tkb-stat-value {
    font-size: clamp(1.4rem, 2vw, 2.3rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.05;
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.tkb-stat-unit {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.60);
}

.tkb-delta-positive { color: #22C55E !important; }
.tkb-delta-warn { color: #F9A620 !important; }
.tkb-delta-negative { color: #F87171 !important; }

.tkb-period-body {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 6px;
}

.tkb-donut-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    flex: 0 0 auto;
}

.tkb-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.tkb-donut-percentage {
    font-size: 1.5rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
}

/* Dentro il foro del donut: più grande di così uscirebbe sull'anello */
.tkb-donut-caption {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.60);
    margin-top: 3px;
    text-align: center;
}

.tkb-donut-legend {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tkb-donut-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.87);
}

.tkb-donut-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.tkb-gauge-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

/* Ieri/Oggi: donut = composizione (fatturabili sul totale segnato), barra = avanzamento verso
   l'obiettivo in ore (può superare il 100%) - richiesta utente 21/09/2026. */
.tkb-day-visuals {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.tkb-progress-col {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.tkb-gauge-labels {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.60);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.tkb-gauge-percentage {
    color: #ffffff;
    font-weight: 900;
}

.tkb-gauge-track {
    position: relative;
    height: 22px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.14);
    overflow: visible;
}

.tkb-gauge-fill {
    height: 100%;
    border-radius: 11px;
    transition: width 0.6s ease;
    overflow: hidden;
}

.tkb-gauge-fill--good { background: linear-gradient(90deg, #16A34A, #22C55E); }
.tkb-gauge-fill--warn { background: linear-gradient(90deg, #F9A620, #FBBF4D); }
.tkb-gauge-fill--bad { background: linear-gradient(90deg, #EF4444, #F87171); }

.tkb-motivation {
    flex: 0 0 auto;
    margin-top: 10px;
    font-weight: 800;
    font-size: 1.05rem;
}

/* Nota ferie/permesso di Ieri/Oggi (richiesta utente 15/09/2026): neutra/informativa. */
.tkb-absence-note {
    flex: 0 0 auto;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 10px;
    background: rgba(2, 164, 185, 0.1);
    border: 1px solid rgba(2, 164, 185, 0.28);
    color: #7DD8E5;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Badge "andamento" di Mese/Anno: proiezione di fine periodo contro il target (richiesta utente
   14/09/2026). */
.tkb-pace-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
}

.tkb-pace-badge--good { background: rgba(34, 197, 94, 0.12); color: #22C55E; border: 1px solid rgba(34, 197, 94, 0.3); }
.tkb-pace-badge--warn { background: rgba(249, 166, 32, 0.12); color: #F9A620; border: 1px solid rgba(249, 166, 32, 0.3); }
.tkb-pace-badge--bad { background: rgba(248, 113, 113, 0.12); color: #F87171; border: 1px solid rgba(248, 113, 113, 0.3); }

/* Lampeggio UNA TANTUM quando l'obiettivo viene appena raggiunto (richiesta utente 21/09/2026).
   box-shadow/transform invece di filter: supporto più ampio sui browser di monitor/TV. */
@keyframes tkb-celebrate {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    35% { transform: scale(1.06); box-shadow: 0 0 22px rgba(255, 255, 255, 0.55); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}

.tkb-celebrate {
    animation: tkb-celebrate 1.3s ease;
}

/* ===================== Vista giorno per giorno (/team-kpi-giorni) ===================== */

.tkb-cal-panel {
    flex: 1 1 auto;
    min-height: 0;
    margin: 14px 44px 18px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #07103A 0%, #05092E 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.65);
    padding: 16px 20px 20px;
    overflow: hidden;
}

/* Legenda dei colori (richiesta utente 28/09/2026): una riga sola, compatta. */
.tkb-cal-legend {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.60);
}

.tkb-cal-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tkb-cal-legend-dot {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
    color: #05092E;
}

.tkb-cal-legend-fill {
    display: inline-block;
    width: 26px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #02A4B9, rgba(2, 164, 185, 0.2));
    flex: 0 0 auto;
}

.tkb-cal-weekday-row {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}

.tkb-cal-weekday-label {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.60);
}

.tkb-cal-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    /* Solo lun-ven (richiesta utente 29/09/2026). */
    grid-template-columns: repeat(5, 1fr);
    /* Righe implicite (4 o 5 settimane lavorative) distribuite in parti uguali fino a riempire
       esattamente l'altezza disponibile (richiesta utente 28/09/2026: "deve entrare tutto in una
       pagina"). */
    grid-auto-rows: 1fr;
    gap: 10px;
    overflow: hidden;
}

.tkb-cal-cell {
    position: relative;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-left: 4px solid transparent;
    overflow: hidden;
}

.tkb-cal-cell-top {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

/* Numero del giorno + simbolo della fascia (il colore da solo non basta: daltonismo, monitor
   con colori sbiaditi) */
.tkb-cal-day-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tkb-cal-tier-symbol {
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1;
}

.tkb-cal-cell--good .tkb-cal-tier-symbol { color: #22C55E; }
.tkb-cal-cell--warn .tkb-cal-tier-symbol { color: #F9A620; }
.tkb-cal-cell--bad .tkb-cal-tier-symbol { color: #F87171; }
.tkb-cal-cell--empty .tkb-cal-tier-symbol { color: rgba(255, 255, 255, 0.45); }

/* Mini-donut fatto con conic-gradient CSS (vedi TargetProgressDonutGradient nel code-behind). */
.tkb-cal-donut {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.tkb-cal-donut::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: #05092E;
}

.tkb-cal-donut-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffffff;
    z-index: 1;
}

.tkb-cal-cell--blank {
    background: transparent;
    border-color: transparent;
}

.tkb-cal-cell--empty {
    border-left-color: #475467;
}

/* Fasce di fatturabilità marcate (richiesta utente 29-30/09/2026): contorno intero tinteggiato,
   sfondo saturo e bordo sinistro spesso, leggibili da lontano. */
.tkb-cal-cell--good {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.45);
    border-left-color: #22C55E;
    border-left-width: 6px;
}

.tkb-cal-cell--warn {
    background: rgba(249, 166, 32, 0.3);
    border-color: rgba(249, 166, 32, 0.5);
    border-left-color: #F9A620;
    border-left-width: 6px;
}

.tkb-cal-cell--bad {
    background: rgba(248, 113, 113, 0.34);
    border-color: rgba(248, 113, 113, 0.55);
    border-left-color: #F87171;
    border-left-width: 6px;
}

.tkb-cal-cell--today {
    border-color: rgba(2, 164, 185, 0.55);
    box-shadow: 0 0 0 1px rgba(2, 164, 185, 0.4) inset;
}

.tkb-cal-daynum {
    flex: 0 0 auto;
    font-weight: 900;
    font-size: 1.15rem;
    color: #ffffff;
}

.tkb-cal-cell--future .tkb-cal-daynum {
    color: rgba(255, 255, 255, 0.38);
}

.tkb-cal-metrics {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.tkb-cal-hours {
    font-weight: 900;
    font-size: 1.3rem;
    color: #ffffff;
    line-height: 1.15;
}

.tkb-cal-billable {
    font-weight: 700;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.60);
    line-height: 1.15;
}

.tkb-cal-unit {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.60);
}

.tkb-cal-fill-track {
    flex: 0 0 auto;
    position: relative;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.14);
    margin-top: 5px;
    overflow: hidden;
}

.tkb-cal-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(90deg, #02A4B9, #7DD8E5);
    border-radius: 3px;
}

.tkb-cal-total-strip {
    flex: 0 0 auto;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    font-size: 0.95rem;
}

.tkb-cal-total-label {
    margin-right: auto;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #F9A620;
}

.tkb-cal-total-value {
    font-weight: 900;
    color: #ffffff;
}

/* ===================== Fascia intermedia 821-1200px (tablet / laptop piccoli) =====================
   5 colonne di statistiche non ci stanno più: si passa a 3 colonne e la pagina può scorrere,
   altrimenti le card ad altezza fissa taglierebbero le righe in più (solo board principale: la
   vista giorni continua a stare in una schermata). */
@media (min-width: 821px) and (max-width: 1200px) {
    .tkb-page--board {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .tkb-page--board .tkb-header {
        padding: 14px 24px;
    }

    .tkb-page--board .tkb-trend {
        margin: 0 20px;
    }

    .tkb-page--board .tkb-header-right {
        gap: 10px;
    }

    .tkb-page--board .tkb-body {
        grid-template-rows: auto;
        padding: 16px 24px 20px;
        gap: 16px;
    }

    .tkb-page--board .tkb-card {
        height: auto;
        padding: 18px 20px;
    }

    .tkb-page--board .tkb-stats-row,
    .tkb-page--board .tkb-period-stats-row {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 14px;
    }

    .tkb-page--board .tkb-stat-label {
        white-space: normal;
    }

    .tkb-page--board .tkb-cal-panel {
        margin: 14px 24px 18px;
    }
}

/* ===================== Schermi bassi (monitor/laptop con poca altezza) =====================
   La griglia calendario riempie l'altezza disponibile: sotto ~820px di altezza le celle non
   contengono più donut + ore + barra, quindi si compatta il contenuto invece di tagliarlo. */
@media (min-width: 821px) and (max-height: 820px) {
    .tkb-header {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .tkb-cal-panel {
        margin-top: 10px;
        margin-bottom: 12px;
        padding: 12px 16px 14px;
    }

    .tkb-cal-legend {
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .tkb-cal-grid {
        gap: 6px;
    }

    .tkb-cal-cell {
        padding: 6px 10px;
    }

    .tkb-cal-donut {
        width: 40px;
        height: 40px;
    }

    .tkb-cal-donut::before {
        inset: 6px;
    }





    .tkb-cal-fill-track {
        margin-top: 3px;
    }

    .tkb-cal-total-strip {
        margin-top: 8px;
        padding-top: 8px;
    }
}

@media (min-width: 821px) and (max-height: 680px) {
    /* Ancora più bassi: resta solo il necessario (giorno, ore totali, barra) */
    .tkb-cal-donut,
    .tkb-cal-billable {
        display: none;
    }
}

/* ===================== Versione mobile (richiesta utente 21/09/2026) =====================
   Sotto 820px il vincolo "tutto su una schermata senza scroll" (pensato per un monitor fisso)
   non è più leggibile: la board diventa una pagina verticale con scroll, che impila le card una
   sotto l'altra. Stessi dati e stesso componente: cambia solo il CSS. */
@media (max-width: 820px) {
    .tkb-stat-label {
        white-space: normal;
    }

    .tkb-page {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    .tkb-header {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px 16px;
    }

    .tkb-brand {
        order: 1;
        min-width: 0;
    }

    /* Pulsanti e badge vanno a capo invece di uscire dallo schermo */
    .tkb-header-right {
        order: 2;
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
        min-width: 0;
    }

    .tkb-brand-title {
        font-size: 1.05rem;
    }

    .tkb-brand-title--nowrap {
        white-space: normal;
    }


    /* Sparkline sulla propria riga a piena larghezza sotto titolo/orario. */
    .tkb-trend {
        order: 3;
        flex: 1 1 100%;
        margin: 4px 0 0;
    }

    .tkb-trend-svg {
        height: 64px;
    }

    .tkb-trend-day {
        font-size: 0.52rem;
    }

    .tkb-body {
        /* Colonna singola: le card si impilano invece di dividersi in una griglia 2x2. */
        grid-template-columns: 1fr;
        grid-template-rows: none;
        padding: 16px;
        gap: 16px;
    }

    .tkb-card {
        /* In colonna singola la card si adatta al contenuto invece di condividere l'altezza. */
        height: auto;
        padding: 18px 16px;
    }

    .tkb-stats-row,
    .tkb-period-stats-row,
    .tkb-crm-stats {
        /* Da 5 (o 4) colonne strette a 2. */
        grid-template-columns: repeat(2, 1fr);
        row-gap: 16px;
    }

    .tkb-crm-strip {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 14px 16px;
    }

    .tkb-crm-header {
        border-right: none;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
        padding-right: 0;
        padding-bottom: 12px;
    }

    .tkb-period-body,
    .tkb-day-visuals {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .tkb-donut-wrap {
        align-self: center;
    }

    .tkb-donut-legend {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Vista giorni */
    .tkb-cal-panel {
        margin: 12px 12px 16px;
        padding: 12px 10px 14px;
    }

    .tkb-cal-legend {
        gap: 10px 16px;
        font-size: 0.68rem;
    }

    /* Donut e barra sono nascosti sotto questo breakpoint: anche le loro voci di legenda */
    .tkb-cal-legend-item--wide-only {
        display: none;
    }

    .tkb-cal-weekday-row {
        gap: 4px;
    }


    /* 5 colonne strette: restano numero del giorno, simbolo e ore totali. */
    .tkb-cal-grid {
        grid-auto-rows: minmax(54px, auto);
        overflow: visible;
        gap: 4px;
    }

    .tkb-cal-cell {
        padding: 4px 5px;
    }

    .tkb-cal-donut,
    .tkb-cal-billable,
    .tkb-cal-fill-track {
        display: none;
    }

    .tkb-cal-day-head {
        gap: 3px;
    }

    .tkb-cal-tier-symbol {
        font-size: 0.75rem;
    }

    .tkb-cal-hours {
        font-size: 0.78rem;
    }


    .tkb-cal-daynum {
        font-size: 0.8rem;
    }

    .tkb-cal-total-strip {
        flex-wrap: wrap;
        gap: 8px 20px;
        font-size: 0.85rem;
    }
}