/* ================================================================
   FIRERUM â€” Global Stylesheet
   Palette: #0a0a0f bg Â· #e62f2b primary Â· #b00b0e secondary
   Font: Inter
================================================================ */

:root {
    --fire-bg:       #0a0a0f;
    --fire-surface:  #16161e;
    --fire-drawer:   #0f0f17;
    --fire-primary:  #e62f2b;
    --fire-secondary:#b00b0e;
    --fire-border:   rgba(230,47,43, 0.15);
    --fire-glass:    rgba(22, 22, 30, 0.85);
}

/* â”€â”€ Base â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
html, body {
    font-family: 'Inter', 'Roboto', sans-serif;
    background: var(--fire-bg);
    color: rgba(255,255,255,0.87);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* â”€â”€ Login page â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(230,47,43,0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(176,11,14,0.08) 0%, transparent 60%),
        var(--fire-bg);
}

.login-card {
    background: var(--fire-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--fire-border);
    border-radius: 20px;
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow:
        0 0 60px rgba(230,47,43,0.08),
        0 24px 64px rgba(0,0,0,0.4);
    animation: loginFadeIn 0.5s ease;
}

@keyframes loginFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* â”€â”€ Flame icon (SVG animata) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.flame-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 130px;
    margin-bottom: 8px;
}

/* Bagliore sotto la fiamma */
.flame-icon-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 30px;
    background: radial-gradient(ellipse,
        rgba(230,47,43,0.5) 0%,
        rgba(176,11,14,0.2) 45%,
        transparent 75%);
    border-radius: 50%;
    filter: blur(10px);
    animation: flameIconGlow 2s ease-in-out infinite;
}

@keyframes flameIconGlow {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) scaleX(1); }
    50%      { opacity: 0.9; transform: translateX(-50%) scaleX(1.15); }
}

/* SVG fiamma */
.flame-icon-svg {
    width: 90px;
    height: 120px;
    filter: drop-shadow(0 0 14px rgba(255,80,0,0.5)) drop-shadow(0 0 30px rgba(255,120,0,0.25));
    animation: flameSway 3s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes flameSway {
    0%, 100% { transform: rotate(0deg) scaleY(1); }
    25%      { transform: rotate(1.5deg) scaleY(1.02); }
    50%      { transform: rotate(-1deg) scaleY(0.98); }
    75%      { transform: rotate(1deg) scaleY(1.01); }
}

.flame-outer {
    animation: flameOuterPulse 1.8s ease-in-out infinite;
}

@keyframes flameOuterPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.88; }
}

.flame-tongue {
    animation: flameTongueFlick 1.2s ease-in-out infinite;
    transform-origin: 90px 65px;
}

@keyframes flameTongueFlick {
    0%, 100% { opacity: 0.85; transform: scale(1) rotate(0deg); }
    30%      { opacity: 1;    transform: scale(1.1) rotate(-3deg); }
    60%      { opacity: 0.7;  transform: scale(0.85) rotate(2deg); }
}

.flame-mid {
    animation: flameMidFlicker 1.4s ease-in-out infinite;
    transform-origin: 60px 148px;
}

@keyframes flameMidFlicker {
    0%, 100% { transform: scaleX(1) scaleY(1); }
    25%      { transform: scaleX(0.97) scaleY(1.02); }
    50%      { transform: scaleX(1.03) scaleY(0.98); }
    75%      { transform: scaleX(0.98) scaleY(1.01); }
}

.flame-inner {
    animation: flameInnerPulse 1s ease-in-out infinite;
    transform-origin: 60px 140px;
}

@keyframes flameInnerPulse {
    0%, 100% { transform: scaleX(1) scaleY(1); opacity: 1; }
    30%      { transform: scaleX(1.05) scaleY(0.97); opacity: 0.9; }
    60%      { transform: scaleX(0.95) scaleY(1.04); opacity: 1; }
}

.flame-core {
    animation: flameCoreGlow 0.8s ease-in-out infinite;
    transform-origin: 60px 135px;
}

@keyframes flameCoreGlow {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.08); }
}

/* ── Lucciole / braci che salgono dalla fiamma ───────────────── */
.flame-ember {
    position: absolute;
    border-radius: 50%;
    background: #ff6600;
    box-shadow: 0 0 6px 2px rgba(255,100,0,0.7);
    opacity: 0;
    pointer-events: none;
}

.flame-ember-1 { width: 3px; height: 3px; left: 44%; bottom: 50px; animation: emberUp1 2.8s ease-out infinite 0s; }
.flame-ember-2 { width: 2px; height: 2px; left: 56%; bottom: 55px; animation: emberUp2 2.4s ease-out infinite 0.5s; }
.flame-ember-3 { width: 3px; height: 3px; left: 48%; bottom: 45px; animation: emberUp3 3.2s ease-out infinite 1.0s; }
.flame-ember-4 { width: 2px; height: 2px; left: 52%; bottom: 60px; animation: emberUp1 2.6s ease-out infinite 1.5s; }
.flame-ember-5 { width: 2px; height: 2px; left: 42%; bottom: 52px; animation: emberUp2 3.0s ease-out infinite 0.3s; }
.flame-ember-6 { width: 3px; height: 3px; left: 58%; bottom: 48px; animation: emberUp3 2.5s ease-out infinite 0.8s; }

@keyframes emberUp1 {
    0%   { opacity: 0; transform: translate(0, 0) scale(1); }
    10%  { opacity: 1; }
    40%  { opacity: 0.8; }
    100% { opacity: 0; transform: translate(-15px, -100px) scale(0.15); }
}

@keyframes emberUp2 {
    0%   { opacity: 0; transform: translate(0, 0) scale(1); }
    10%  { opacity: 0.9; }
    40%  { opacity: 0.7; }
    100% { opacity: 0; transform: translate(12px, -90px) scale(0.1); }
}

@keyframes emberUp3 {
    0%   { opacity: 0; transform: translate(0, 0) scale(1); }
    10%  { opacity: 1; }
    40%  { opacity: 0.85; }
    100% { opacity: 0; transform: translate(-8px, -110px) scale(0.2); }
}
.login-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #e62f2b 0%, #b00b0e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 4px;
}

.login-subtitle {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 32px;
}

/* â”€â”€ Cards glassmorphism â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.glass-card {
    background: rgba(22, 22, 30, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.glass-card:hover {
    border-color: rgba(230,47,43,0.25);
    transform: translateY(-1px);
}

/* â”€â”€ Stat cards â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.stat-card {
    background: linear-gradient(135deg, rgba(230,47,43,0.1) 0%, rgba(22,22,30,0.9) 100%);
    border: 1px solid rgba(230,47,43,0.2);
    border-radius: 14px;
    padding: 20px;
    transition: all 0.25s ease;
}

.stat-card:hover {
    border-color: rgba(230,47,43,0.45);
    box-shadow: 0 8px 32px rgba(230,47,43,0.15);
}

/* â”€â”€ Turno card hover â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.turno-card:hover {
    border-color: rgba(230,47,43,0.3) !important;
    box-shadow: 0 0 20px rgba(230,47,43,0.1);
    transform: translateY(-1px);
}

/* â”€â”€ Calendar grid â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-day {
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    cursor: pointer;
    font-size: 0.8rem;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    min-height: 95px;
    padding: 6px 7px;
    position: relative;
}

.cal-day:hover {
    border-color: rgba(230,47,43,0.4);
    background: rgba(230,47,43,0.08);
    transform: perspective(600px) rotateX(-2deg) rotateY(2deg) scale(1.02);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 0 12px rgba(230,47,43,0.08);
    z-index: 2;
}
.cal-day.today { border-color: #e62f2b !important; }
.cal-day.festivo {
    background: rgba(99,102,241,0.06);
    border-color: rgba(99,102,241,0.15);
}
.cal-day.festivo-nazionale {
    background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(176,11,14,0.10) 100%);
    border: 2px solid rgba(255,215,0,0.4);
    box-shadow: inset 0 0 12px rgba(255,215,0,0.06), 0 0 8px rgba(255,215,0,0.08);
}
.cal-day.festivo-nazionale:hover {
    border-color: rgba(255,215,0,0.7);
    box-shadow: inset 0 0 16px rgba(255,215,0,0.1), 0 0 14px rgba(255,215,0,0.15);
}
.cal-day.selected { background: rgba(230,47,43,0.15); border-color: #e62f2b; }
.cal-day.empty { cursor: default; min-height: 0; }

/* Etichetta festivitÃ  */
.cal-festivo-label {
    font-size: 0.5rem;
    color: #fcd34d;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(252,211,77,0.3);
}

/* Badge turno dentro la cella */
.cal-shift-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.4;
    margin-top: 2px;
    letter-spacing: 0.3px;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.cal-shift-badge.giorno {
    background: rgba(245,158,11,0.25);
    color: #fcd34d;
    border-left: 3px solid #f59e0b;
    text-shadow: 0 0 8px rgba(245,158,11,0.3);
}
.cal-shift-badge.notte {
    background: rgba(129,140,248,0.25);
    color: #c7d2fe;
    border-left: 3px solid #818cf8;
    text-shadow: 0 0 8px rgba(129,140,248,0.3);
}

/* â•â•â• STATI DEI TURNI â•â•â• */

/* Pubblicato + vincoli rispettati â†’ bordo verde luminoso */
.cal-shift-badge.status-valid {
    border-left: 3px solid #22c55e;
    box-shadow: inset 0 0 12px rgba(34,197,94,0.12), 0 0 8px rgba(34,197,94,0.15);
    background: linear-gradient(90deg, rgba(34,197,94,0.1) 0%, transparent 40%);
}
.cal-shift-badge.status-valid .status-icon {
    color: #22c55e;
    text-shadow: 0 0 8px rgba(34,197,94,0.6);
}

/* Pubblicato + vincoli NON rispettati â†’ bordo arancione pulsante */
.cal-shift-badge.status-warning {
    border-left: 3px solid #f97316;
    box-shadow: inset 0 0 12px rgba(249,115,22,0.15), 0 0 8px rgba(249,115,22,0.2);
    background: linear-gradient(90deg, rgba(249,115,22,0.12) 0%, transparent 40%);
    animation: badgePulseWarning 2s ease-in-out infinite;
}
.cal-shift-badge.status-warning .status-icon {
    color: #f97316;
    text-shadow: 0 0 8px rgba(249,115,22,0.7);
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes badgePulseWarning {
    0%, 100% { box-shadow: inset 0 0 12px rgba(249,115,22,0.1), 0 0 6px rgba(249,115,22,0.15); }
    50%      { box-shadow: inset 0 0 16px rgba(249,115,22,0.2), 0 0 14px rgba(249,115,22,0.3); }
}

@keyframes iconPulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* Bozza â†’ bordo tratteggiato, opacitÃ  ridotta */
.cal-shift-badge.status-draft {
    border-left: 3px dashed rgba(255,255,255,0.25);
    opacity: 0.6;
}
.cal-shift-badge.status-draft .status-icon {
    color: rgba(255,255,255,0.35);
    font-size: 0.55rem;
}

/* Icona di stato */
.status-icon {
    font-size: 0.7rem;
    flex-shrink: 0;
    line-height: 1;
}


/* Lettera squadra nel badge */
.cal-squad-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 900;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    letter-spacing: 0.3px;
    box-shadow: 0 0 4px rgba(255,255,255,0.1);
}
.cal-squad-chip:hover { transform: scale(1.35); z-index: 10; box-shadow: 0 0 10px rgba(255,255,255,0.2); }

/* â”€â”€ Page header â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.page-header {
    border-bottom: 1px solid rgba(230,47,43,0.15);
    padding-bottom: 16px;
    margin-bottom: 24px;
    animation: pageSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* â”€â”€ Icona titolo pagina animata â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.4rem;
    background: linear-gradient(135deg, rgba(230,47,43,0.15) 0%, rgba(176,11,14,0.08) 100%);
    border: 1px solid rgba(230,47,43,0.2);
    box-shadow: 0 0 20px rgba(230,47,43,0.12), inset 0 0 12px rgba(230,47,43,0.05);
    animation: iconFloat 3s ease-in-out infinite, pageSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
    -webkit-text-fill-color: initial;
}

.page-header-icon:hover {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 28px rgba(230,47,43,0.25), inset 0 0 16px rgba(230,47,43,0.1);
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* â”€â”€ Transizioni pagina â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contenuto pagina â€” animazione ritardata */
.page-header ~ * {
    animation: pageSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.page-header ~ * ~ * {
    animation-delay: 0.15s;
}

.page-header ~ * ~ * ~ * {
    animation-delay: 0.2s;
}

/* ── Transizione completa pagina ─────────────────────────────── */
.page-transition {
    animation: pageFadeSlide 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity, transform;
}

@keyframes pageFadeSlide {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rispetta le preferenze utente per animazioni ridotte */
@media (prefers-reduced-motion: reduce) {
    .page-transition,
    .page-header,
    .page-header ~ * {
        animation: none !important;
    }
}

/* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• 
   BARRA DI CARICAMENTO FIRE / LAVA
   â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•  */

.fire-progress {
    width: 100%;
    height: 3px;
    border-radius: 4px;
    background: rgba(230,47,43,0.08);
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
}

.fire-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        #cc2200 0%,
        #e62f2b 15%,
        #ff6a00 30%,
        #b00b0e 45%,
        #ffaa00 55%,
        #ffcc33 65%,
        #b00b0e 75%,
        #e62f2b 90%,
        #cc2200 100%);
    background-size: 250% 100%;
    animation: lavaFlow 1.8s linear infinite;
    box-shadow: 0 0 12px rgba(230,47,43,0.4), 0 0 4px rgba(176,11,14,0.6);
}

/* Bagliore luminoso che scorre */
.fire-progress-bar::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -40%;
    width: 30%;
    height: calc(100% + 2px);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.25) 40%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0.25) 60%,
        transparent 100%);
    animation: lavaSweep 1.8s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes lavaFlow {
    0%   { background-position: 0% 0; }
    100% { background-position: 250% 0; }
}

@keyframes lavaSweep {
    0%   { left: -40%; }
    100% { left: 110%; }
}

/* Spinner fire per caricamento full-page */
.fire-spinner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 0;
}

.fire-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(230,47,43,0.12);
    border-top: 3px solid #e62f2b;
    border-right: 3px solid #b00b0e;
    animation: fireSpinnerRotate 0.8s linear infinite;
    box-shadow: 0 0 16px rgba(230,47,43,0.2);
}

@keyframes fireSpinnerRotate {
    to { transform: rotate(360deg); }
}

.fire-spinner-text {
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    animation: fireTextPulse 1.5s ease-in-out infinite;
}

@keyframes fireTextPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.8; }
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   SIDEBAR â€” Indicatore attivo animato
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* Tutte le nav link â€” transizione fluida */
.mud-nav-link {
    position: relative;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-left: 3px solid transparent !important;
}

/* Hover su nav link non attivo */
.mud-nav-link:hover:not(.active) {
    background: rgba(230,47,43,0.06) !important;
    border-left-color: rgba(230,47,43,0.25) !important;
    transform: translateX(2px);
}

/* Nav link attivo â€” bordo glow che respira */
.mud-nav-link.active {
    background: linear-gradient(90deg, rgba(230,47,43,0.12) 0%, transparent 70%) !important;
    border-left: 3px solid #e62f2b !important;
    box-shadow: inset 0 0 20px rgba(230,47,43,0.06), -2px 0 12px rgba(230,47,43,0.15);
    animation: navGlow 3s ease-in-out infinite;
}

.mud-nav-link.active .mud-nav-link-text {
    color: #e62f2b !important;
    font-weight: 600 !important;
}

.mud-nav-link.active .mud-nav-link-icon {
    color: #e62f2b !important;
    filter: drop-shadow(0 0 4px rgba(230,47,43,0.5));
}

@keyframes navGlow {
    0%, 100% {
        border-left-color: #e62f2b;
        box-shadow: inset 0 0 20px rgba(230,47,43,0.06), -2px 0 12px rgba(230,47,43,0.12);
    }
    50% {
        border-left-color: #ff6a00;
        box-shadow: inset 0 0 24px rgba(230,47,43,0.1), -2px 0 18px rgba(230,47,43,0.22);
    }
}

/* Sezione titolo "NAVIGAZIONE" */
.mud-drawer .mud-navmenu > div:first-child {
    position: relative;
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   GLASS CARDS â€” Glassmorphism potenziato
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* Potenziamento glassmorphism */
.glass-card {
    background: rgba(22, 22, 30, 0.65) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 14px !important;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

/* Riflessione luminosa nella parte superiore */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.08) 20%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.08) 80%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Bagliore angolare sottile */
.glass-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 15px;
    background: linear-gradient(135deg,
        rgba(230,47,43,0.06) 0%,
        transparent 30%,
        transparent 70%,
        rgba(176,11,14,0.04) 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glass-card:hover {
    border-color: rgba(230,47,43,0.2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 16px rgba(230,47,43,0.06) !important;
}

.glass-card:hover::after {
    opacity: 1;
}

/* Stat card â€” potenziamento */
.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(230,47,43,0.15) 50%,
        transparent 100%);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   TABELLE — Hover elegante sulle righe
   ═══════════════════════════════════════════════════════════════ */

.mud-table-row {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-left: 3px solid transparent !important;
    position: relative;
}

.mud-table-row:hover {
    background: linear-gradient(90deg,
        rgba(230,47,43,0.08) 0%,
        rgba(230,47,43,0.03) 30%,
        transparent 70%) !important;
    border-left-color: rgba(230,47,43,0.5) !important;
    box-shadow: inset 0 0 20px rgba(230,47,43,0.04);
}

.mud-table-row:hover .mud-table-cell {
    color: rgba(255,255,255,0.95) !important;
}

.mud-table-head .mud-table-row {
    border-left: 3px solid transparent !important;
}
.mud-table-head .mud-table-row:hover {
    background: transparent !important;
    border-left-color: transparent !important;
    box-shadow: none;
}

.mud-table-head .mud-table-cell {
    border-bottom: 1px solid rgba(230,47,43,0.15) !important;
    color: rgba(255,255,255,0.5) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* Alternanza righe sottile */
.mud-table-row:nth-child(even) {
    background: rgba(255,255,255,0.01) !important;
}

/* Pager tabella */
.mud-table-pagination {
    border-top: 1px solid rgba(230,47,43,0.1) !important;
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   OVERRIDE GLOBALE â€” Progress bars MudBlazor
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* Qualsiasi MudProgressLinear â†’ stile fire */
.mud-progress-linear {
    background: rgba(230,47,43,0.08) !important;
    border-radius: 4px !important;
    height: 3px !important;
    overflow: hidden !important;
}

.mud-progress-linear .mud-progress-linear-bar {
    background: linear-gradient(90deg,
        #cc2200 0%, #e62f2b 15%, #ff6a00 30%,
        #b00b0e 45%, #ffaa00 55%, #ffcc33 65%,
        #b00b0e 75%, #e62f2b 90%, #cc2200 100%) !important;
    background-size: 250% 100% !important;
    animation: lavaFlow 1.8s linear infinite !important;
    box-shadow: 0 0 8px rgba(230,47,43,0.3) !important;
    border-radius: 4px !important;
}

/* Override spinner circolare MudBlazor */
.mud-progress-circular svg circle {
    stroke: #e62f2b !important;
}

/* â”€â”€ Scrollbar â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(230,47,43,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(230,47,43,0.6); }

/* â”€â”€ Utility â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.text-fire { color: #e62f2b; }
.text-orange { color: #b00b0e; }
.glow-fire { box-shadow: 0 0 20px rgba(230,47,43,0.3); }

/* â”€â”€ Weekly view â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.cal-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cal-week-day {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 10px;
    min-height: 120px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: rgba(255,255,255,0.02);
}
.cal-week-day:hover { border-color: rgba(230,47,43,0.4); background: rgba(230,47,43,0.06); }
.cal-week-day.today { border-color: #e62f2b !important; }
.cal-week-day.festivo { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.15); }
.cal-week-day.festivo-nazionale {
    background: linear-gradient(135deg, rgba(255,215,0,0.15) 0%, rgba(176,11,14,0.10) 100%);
    border: 2px solid rgba(255,215,0,0.4);
}
.cal-week-day.selected { background: rgba(230,47,43,0.15); border-color: #e62f2b; }

/* -- Annual view - Spreadsheet -- */
.cal-year-spreadsheet {
    overflow-x: auto;
    overflow-y: visible;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(10,10,15,0.5);
    scrollbar-width: thin;
    scrollbar-color: rgba(230,47,43,0.3) transparent;
}
.cal-year-spreadsheet table { border-collapse: separate; border-spacing: 0; min-width: 100%; table-layout: fixed; }
.cal-year-spreadsheet thead th { position: sticky; top: 0; z-index: 20; background: rgba(15,15,23,0.97); backdrop-filter: blur(8px); padding: 6px 0; text-align: center; font-size: 0.65rem; font-weight: 600; color: rgba(255,255,255,0.4); border-bottom: 1px solid rgba(230,47,43,0.15); width: 52px; min-width: 52px; letter-spacing: 0.3px; }
.cal-year-spreadsheet thead th .day-num { display: block; font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.6); line-height: 1.2; }
.cal-year-spreadsheet thead th .day-name { display: block; font-size: 0.55rem; font-weight: 500; color: rgba(255,255,255,0.3); text-transform: uppercase; line-height: 1; }
.cal-year-spreadsheet thead th.col-weekend .day-name { color: rgba(230,47,43,0.7); }
.cal-year-spreadsheet thead th.col-weekend .day-num { color: rgba(99,102,241,0.7); }
.cal-year-spreadsheet thead th.col-weekend { background: rgba(99,102,241,0.06); }
.cal-year-spreadsheet thead th.col-today { color: #e62f2b; border-bottom: 2px solid #e62f2b; }
.cal-year-spreadsheet thead th.col-today .day-num { color: #e62f2b; }
.cal-year-spreadsheet thead th.col-festnaz .day-num { color: #fcd34d; }
.cal-year-spreadsheet thead th:first-child, .cal-year-spreadsheet tbody td:first-child { position: sticky; left: 0; z-index: 30; background: rgba(15,15,23,0.97); backdrop-filter: blur(8px); width: 80px; min-width: 80px; max-width: 80px; }
.cal-year-spreadsheet thead th:first-child { z-index: 40; border-right: 1px solid rgba(230,47,43,0.15); }
.cal-year-spreadsheet tbody td:first-child { border-right: 1px solid rgba(230,47,43,0.1); }
.cal-year-spreadsheet .month-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,0.5); text-align: center; padding: 0 4px; white-space: nowrap; }
.cal-year-spreadsheet .month-label.current { color: #e62f2b; text-shadow: 0 0 12px rgba(230,47,43,0.3); }
.cal-year-spreadsheet tbody tr { transition: background 0.15s ease; }
.cal-year-spreadsheet tbody tr.row-current { background: rgba(230,47,43,0.03); }
.cal-year-spreadsheet tbody tr:hover { background: rgba(230,47,43,0.04); }
.cal-year-spreadsheet tbody td { padding: 3px 2px; text-align: center; vertical-align: top; height: 56px; border-bottom: 1px solid rgba(255,255,255,0.03); cursor: pointer; transition: all 0.12s ease; position: relative; }
.cal-year-spreadsheet tbody td:hover:not(.cell-empty) { background: rgba(230,47,43,0.1); box-shadow: inset 0 0 12px rgba(230,47,43,0.06); }
.cal-year-spreadsheet tbody td.cell-weekend { background: rgba(99,102,241,0.10); border-left: 2px solid rgba(99,102,241,0.25); }
.cal-year-spreadsheet tbody td.cell-festnaz { background: rgba(255,215,0,0.12); border-left: 2px solid rgba(255,215,0,0.35); }
.cal-year-spreadsheet tbody td.col-today { border-left: 1px solid rgba(230,47,43,0.25); border-right: 1px solid rgba(230,47,43,0.25); }
.cal-year-spreadsheet tbody td.cell-empty { cursor: default; background: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 6px); opacity: 0.4; }
.year-cell-content { display: flex; flex-direction: column; align-items: center; gap: 1px; height: 100%; }
.year-cell-shift { display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 0.6rem; border-radius: 4px; padding: 2px 4px; width: 100%; line-height: 1; }
.year-cell-shift.giorno { background: rgba(245,158,11,0.15); color: #fcd34d; }
.year-cell-shift.notte { background: rgba(129,140,248,0.15); color: #c7d2fe; }
.cal-year-spreadsheet tbody td.cell-published-valid { box-shadow: inset 0 0 0 1px rgba(34,197,94,0.2); }
.cal-year-spreadsheet tbody td.cell-published-warning { box-shadow: inset 0 0 0 1px rgba(249,115,22,0.2); }
.year-cell-squad { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; font-size: 0.5rem; font-weight: 900; line-height: 1; }
.year-cell-squads { display: flex; align-items: center; justify-content: center; gap: 1px; margin-top: 1px; }
.year-cell-status { font-size: 0.5rem; line-height: 1; flex-shrink: 0; }
.year-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; padding: 8px 12px; background: rgba(255,255,255,0.02); border-radius: 8px; border: 1px solid rgba(255,255,255,0.04); }
.year-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.65rem; color: rgba(255,255,255,0.4); }

@media (max-width: 900px) {
    .cal-week-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cal-week-grid { grid-template-columns: 1fr; }
    .cal-year-spreadsheet thead th { width: 44px; min-width: 44px; }
    .cal-year-spreadsheet thead th .day-num { font-size: 0.65rem; }
    .cal-year-spreadsheet thead th:first-child, .cal-year-spreadsheet tbody td:first-child { width: 56px; min-width: 56px; max-width: 56px; }
    .cal-year-spreadsheet .month-label { font-size: 0.6rem; letter-spacing: 0.5px; }
    .cal-year-spreadsheet tbody td { height: 48px; padding: 2px 1px; }
    .year-cell-shift { font-size: 0.5rem; padding: 1px 2px; }
    .year-cell-squad { width: 14px; height: 14px; font-size: 0.45rem; }
}

/* -- Sidebar Logo -- */
.sidebar-logo:hover {
    opacity: 0.85 !important;
    filter: drop-shadow(0 0 16px rgba(230,47,43, 0.4)) !important;
    transform: scale(1.05);
}


/* Fix per MudSelect su mobile */
@media (max-width: 600px) {
    .mobile-select-popover { max-width: 90vw !important; left: 5vw !important; right: auto !important; }
    .mobile-select-popover .mud-list-item-text { white-space: normal !important; word-break: break-word; font-size: 0.85rem !important; }
}

@media (max-width: 600px) {
    /* Ottimizzazioni per il Turnario mensile su mobile */
    .cal-grid { gap: 1px !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
    .cal-day { padding: 2px 1px !important; min-height: 70px !important; font-size: 0.65rem !important; min-width: 0 !important; }
    
    /* Giorno corrente in evidenza (ingrandito) */
    .cal-day.today {
        transform: scale(1.1);
        z-index: 10;
        box-shadow: 0 4px 16px rgba(230,47,43,0.4);
        border-width: 2px !important;
    }

    .cal-shift-badge { padding: 2px 1px !important; gap: 1px !important; font-size: 0.55rem !important; flex-wrap: wrap !important; justify-content: center !important; }
    
    /* Lettera squadra più visibile */
    .cal-squad-chip { width: 18px !important; height: 18px !important; font-size: 0.65rem !important; border-radius: 4px !important; font-weight: 900 !important; }
    
    .cal-shift-badge .status-icon { font-size: 0.5rem !important; }
    .cal-grid .mud-typography-caption { font-size: 0.6rem !important; padding: 2px 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   AVATAR UTENTE — Cerchio con iniziali
   ═══════════════════════════════════════════════════════════════ */

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: white;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    box-shadow: 0 0 12px rgba(255,255,255,0.1), inset 0 0 8px rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.15);
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.user-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(230,47,43,0.3), inset 0 0 12px rgba(255,255,255,0.12);
    border-color: rgba(230,47,43,0.5);
}

/* ═══════════════════════════════════════════════════════════════
   POPOVER PROFILO UTENTE
   ═══════════════════════════════════════════════════════════════ */

.profile-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: rgba(18, 18, 28, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
    z-index: 9999;
    animation: profilePopIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes profilePopIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.profile-popover-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-popover-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: Inter, sans-serif;
}

.profile-popover-btn:hover {
    background: rgba(230,47,43,0.1);
    color: #e62f2b;
}

/* ═══════════════════════════════════════════════════════════════
   CAMPANELLA NOTIFICHE — Animazioni
   ═══════════════════════════════════════════════════════════════ */

/* Dondolio campanella quando ci sono notifiche */
.notification-bell-ring {
    animation: bellRing 4s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    3%       { transform: rotate(12deg); }
    6%       { transform: rotate(-10deg); }
    9%       { transform: rotate(8deg); }
    12%      { transform: rotate(-6deg); }
    15%      { transform: rotate(3deg); }
    18%      { transform: rotate(0); }
}

/* Pulsazione del badge numerico */
.notification-badge-pulse .mud-badge-badge {
    animation: badgePulse 2s ease-in-out infinite !important;
    font-weight: 700 !important;
    font-size: 0.65rem !important;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230,47,43,0.5); }
    50%      { transform: scale(1.1); box-shadow: 0 0 8px 3px rgba(230,47,43,0.25); }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINA DI ERRORE — Stile VVF con fiamme animate
   ═══════════════════════════════════════════════════════════════ */

.error-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fire-bg);
    position: relative;
    overflow: hidden;
}

.error-content {
    text-align: center;
    z-index: 10;
    position: relative;
    animation: pageFadeSlide 0.6s ease both;
}

.error-icon-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}

.error-icon {
    font-size: 5rem;
    animation: errorIconBounce 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(230,47,43,0.4));
}

@keyframes errorIconBounce {
    0%, 100% { transform: translateY(0) rotate(0); }
    25%      { transform: translateY(-8px) rotate(-5deg); }
    75%      { transform: translateY(-4px) rotate(3deg); }
}

.error-smoke {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(200,200,200,0.3), transparent);
    border-radius: 50%;
    animation: smokePuff 2.5s ease-out infinite;
}

@keyframes smokePuff {
    0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.5); }
    30%  { opacity: 0.6; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(2); }
}

.error-code {
    font-size: 6rem;
    font-weight: 900;
    letter-spacing: 8px;
    background: linear-gradient(135deg, #e62f2b 0%, #ff6a00 50%, #e62f2b 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: errorGradientShift 3s linear infinite;
    margin: 0;
    line-height: 1;
}

@keyframes errorGradientShift {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.error-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255,255,255,0.87);
    margin: 8px 0;
}

.error-subtitle {
    color: rgba(255,255,255,0.45);
    font-size: 0.95rem;
    max-width: 400px;
    margin: 0 auto 24px;
    line-height: 1.5;
}

.error-request-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}

.error-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #e62f2b, #b00b0e);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: Inter, sans-serif;
    text-decoration: none;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 24px rgba(230,47,43,0.35);
    transition: all 0.3s ease;
}

.error-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(230,47,43,0.5);
    color: white;
}

.error-flames {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.flame {
    position: absolute;
    bottom: -20px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0.15;
    animation: flameRise 3s ease-in-out infinite;
}

.flame-1 { left: 10%; width: 80px; height: 120px; background: #e62f2b; animation-delay: 0s; animation-duration: 2.8s; }
.flame-2 { left: 30%; width: 60px; height: 100px; background: #ff6a00; animation-delay: 0.5s; animation-duration: 3.2s; }
.flame-3 { left: 50%; width: 90px; height: 140px; background: #b00b0e; animation-delay: 0.2s; animation-duration: 3s; }
.flame-4 { left: 70%; width: 70px; height: 110px; background: #e62f2b; animation-delay: 0.8s; animation-duration: 2.6s; }
.flame-5 { left: 85%; width: 50px; height: 90px;  background: #ff6a00; animation-delay: 0.3s; animation-duration: 3.5s; }

@keyframes flameRise {
    0%, 100% { transform: scaleY(1) translateY(0); opacity: 0.12; }
    50%      { transform: scaleY(1.3) translateY(-30px); opacity: 0.2; }
}

/* ═══════════════════════════════════════════════════════════════
   SNACKBAR / TOAST — Stile premium
   ═══════════════════════════════════════════════════════════════ */

.mud-snackbar {
    border-radius: 12px !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.04) !important;
    animation: snackbarSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
    padding: 4px 8px !important;
}

@keyframes snackbarSlideIn {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mud-snackbar.mud-alert-filled-success {
    background: rgba(34,197,94,0.12) !important;
    border-left: 4px solid #22c55e !important;
    color: rgba(255,255,255,0.87) !important;
}

.mud-snackbar.mud-alert-filled-error {
    background: rgba(239,68,68,0.12) !important;
    border-left: 4px solid #ef4444 !important;
    color: rgba(255,255,255,0.87) !important;
}

.mud-snackbar.mud-alert-filled-warning {
    background: rgba(245,158,11,0.12) !important;
    border-left: 4px solid #f59e0b !important;
    color: rgba(255,255,255,0.87) !important;
}

.mud-snackbar.mud-alert-filled-info {
    background: rgba(59,130,246,0.12) !important;
    border-left: 4px solid #3b82f6 !important;
    color: rgba(255,255,255,0.87) !important;
}

.mud-snackbar .mud-snackbar-icon {
    animation: snackbarIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both !important;
}

@keyframes snackbarIconPop {
    from { transform: scale(0) rotate(-20deg); opacity: 0; }
    to   { transform: scale(1) rotate(0); opacity: 1; }
}

.mud-snackbar .mud-snackbar-content-message {
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — Mini Chart
   ═══════════════════════════════════════════════════════════════ */

.chart-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mud-chart .mud-chart-legend-item {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.75rem !important;
}

.mud-chart text {
    fill: rgba(255,255,255,0.6) !important;
    font-size: 0.7rem !important;
}



/* -- Print styles for annual calendar -- */
.print-title { display: none; }

@media print {
    /* Nascondi TUTTO tranne calendario e titolo stampa */
    * { box-shadow: none !important; text-shadow: none !important; }
    body { background: white !important; color: #111 !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    .mud-drawer, .mud-appbar, .mud-nav-group, .mud-overlay,
    .page-header, .year-legend,
    .mud-button, .mud-chip, .mud-icon-button, .mud-button-group,
    .mud-menu, .mud-toolbar, .mud-dialog-container,
    footer, nav { display: none !important; }

    .mud-layout, .mud-main-content, .mud-grid, .mud-grid-item {
        display: block !important;
        margin: 0 !important; padding: 0 !important;
        min-height: auto !important;
        width: 100% !important;
    }
    .mud-main-content { margin-left: 0 !important; }

    /* Titolo stampa */
    .print-title {
        display: block !important;
        text-align: center;
        font-size: 18pt;
        font-weight: 800;
        color: #222;
        padding: 8px 0 4px;
        border-bottom: 2px solid #c00;
        margin-bottom: 6px;
        font-family: Arial, sans-serif;
    }
    .print-title small {
        display: block !important;
        font-size: 9pt;
        font-weight: 400;
        color: #666;
        margin-top: 2px;
    }

    /* Tabella spreadsheet */
    .cal-year-spreadsheet {
        display: block !important;
        overflow: visible !important;
        border: 2px solid #333 !important;
        background: white !important;
        border-radius: 0 !important;
        width: 100% !important;
        page-break-inside: avoid;
    }
    .cal-year-spreadsheet table {
        min-width: auto !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    /* Header giorni */
    .cal-year-spreadsheet thead th {
        background: #e8e8e8 !important;
        color: #222 !important;
        font-size: 6pt !important;
        font-weight: 700 !important;
        border: 1px solid #aaa !important;
        padding: 2px 0 !important;
        position: static !important;
        width: auto !important; min-width: 0 !important;
    }
    .cal-year-spreadsheet thead th .day-num { color: #222 !important; font-size: 7pt !important; }
    .cal-year-spreadsheet thead th .day-name { display: none !important; }
    .cal-year-spreadsheet thead th:first-child {
        position: static !important;
        background: #d0d0d0 !important;
        font-size: 6pt !important;
        width: 28px !important; min-width: 28px !important; max-width: 28px !important;
    }

    /* Weekend header */
    .cal-year-spreadsheet thead th.col-weekend { background: #d8d8f0 !important; }
    .cal-year-spreadsheet thead th.col-weekend .day-num { color: #4040a0 !important; }

    /* Today: nessuna evidenza in stampa */
    .cal-year-spreadsheet thead th.col-today { background: #e8e8e8 !important; }
    .cal-year-spreadsheet thead th.col-today .day-num { color: #222 !important; }
    .cal-year-spreadsheet tbody td.col-today { border: 1px solid #bbb !important; }

    /* Celle */
    .cal-year-spreadsheet tbody td {
        height: auto !important; min-height: 14px !important;
        border: 1px solid #bbb !important;
        padding: 0 !important;
        background: white !important;
        position: static !important;
        font-size: 5pt !important;
    }
    .cal-year-spreadsheet tbody td:first-child {
        position: static !important;
        background: #d0d0d0 !important;
        width: 28px !important; min-width: 28px !important; max-width: 28px !important;
    }
    .cal-year-spreadsheet tbody td.cell-weekend { background: #e8e8f8 !important; }
    .cal-year-spreadsheet tbody td.cell-festnaz { background: #fff3c4 !important; }
    .cal-year-spreadsheet tbody td.cell-empty { background: #f0f0f0 !important; opacity: 1 !important; }

    /* Label mese */
    .cal-year-spreadsheet .month-label { color: #222 !important; font-size: 6pt !important; font-weight: 800 !important; text-shadow: none !important; }
    .cal-year-spreadsheet .month-label.current { color: #222 !important; }
    .cal-year-spreadsheet tbody tr.row-current { background: transparent !important; }
    .cal-year-spreadsheet tbody tr:hover { background: transparent !important; }

    /* Turno giorno */
    .year-cell-shift.giorno {
        background: #fff0c0 !important; color: #8a6d00 !important;
        border: 1px solid #d4a800 !important; border-radius: 1px !important;
        padding: 0 1px !important; font-size: 5pt !important;
    }
    /* Turno notte */
    .year-cell-shift.notte {
        background: #d8d8f8 !important; color: #3030a0 !important;
        border: 1px solid #6060c0 !important; border-radius: 1px !important;
        padding: 0 1px !important; font-size: 5pt !important;
    }
    /* Squad badge */
    .year-cell-squad { font-size: 5pt !important; width: 10px !important; height: 10px !important; border: 1px solid #666 !important; border-radius: 1px !important; }
    .year-cell-content { gap: 0 !important; }

    @page { size: A4 landscape; margin: 4mm 5mm; }
}