h1:focus {
    outline: none;
}

.sd-logo {
    font-weight: 800;
    letter-spacing: .02em;
    background: linear-gradient(90deg, #b388ff, #ff4081);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sd-main {
    padding-bottom: 2rem;
}

.sd-muted {
    color: var(--mud-palette-text-secondary);
}

.sd-min0 {
    min-width: 0;
}

.sd-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-hero-icon {
    font-size: 4rem !important;
}

/* Votazioni */
.sd-vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3rem;
}

/* Dashboard DJ */
.sd-request {
    border-left: 4px solid var(--mud-palette-lines-default) !important;
}

.sd-status-new {
    border-left-color: var(--mud-palette-secondary) !important;
}

.sd-status-accepted {
    border-left-color: var(--mud-palette-success) !important;
}

.sd-status-played {
    opacity: .6;
}

.sd-status-rejected {
    opacity: .45;
}

.sd-dedication {
    font-style: italic;
    color: var(--mud-palette-tertiary);
}

.sd-search {
    max-width: 220px;
}

.sd-sort {
    max-width: 180px;
}

/* Login (SSR statico: input HTML nativi) */
.sd-form label {
    display: block;
    font-size: .85rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: .35rem;
}

.sd-form input[type=password] {
    width: 100%;
    box-sizing: border-box;
    padding: .8rem 1rem;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-inputs);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
}

.sd-form input[type=password]:focus {
    outline: 2px solid var(--mud-palette-primary);
    border-color: transparent;
}

/* Pulsante Google (colori secondo le linee guida di Google) */
.sd-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    box-sizing: border-box;
    padding: .75rem 1rem;
    border-radius: var(--mud-default-borderradius);
    background: #fff;
    color: #1f1f1f;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid #dadce0;
    transition: box-shadow .15s;
}

    .sd-google-btn:hover {
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    }

.sd-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0 1rem;
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
}

    .sd-divider::before, .sd-divider::after {
        content: "";
        flex: 1;
        border-top: 1px solid var(--mud-palette-lines-default);
    }

/* Pagina QR a schermo intero */
.sd-qr-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1rem;
    text-align: center;
}

.sd-qr {
    width: min(80vw, 60vh, 520px);
    height: auto;
    image-rendering: pixelated;
    background: #fff;
    padding: 1rem;
    border-radius: 24px;
    box-shadow: 0 0 60px rgba(255, 64, 129, .35);
}

.sd-qr-url {
    word-break: break-all;
}

@media print {
    body {
        background: #fff !important;
    }

    .sd-qr-page, .sd-qr-page * {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }

    .sd-qr {
        box-shadow: none;
    }

    .sd-qr-actions {
        display: none !important;
    }
}

/* Reazioni live */
.sd-has-bar {
    padding-bottom: 6rem !important;
}

.sd-reaction-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: flex;
    justify-content: center;
    gap: .25rem;
    padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    background: rgba(15, 13, 22, .92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.sd-reaction-btn {
    font-size: 1.8rem;
    line-height: 1;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: transform .1s ease-out;
    -webkit-tap-highlight-color: transparent;
}

    .sd-reaction-btn:active {
        transform: scale(1.3);
        background: rgba(255, 255, 255, .08);
    }

.sd-reaction-count {
    padding: .1rem .55rem;
    border-radius: 99px;
    border: 1px solid var(--mud-palette-lines-default);
    font-size: .95rem;
}

.sd-burst {
    position: fixed;
    right: 0;
    bottom: 0;
    width: min(280px, 50vw);
    height: 70vh;
    pointer-events: none;
    overflow: hidden;
    z-index: 1200;
}

.sd-burst-guest {
    left: 0;
    right: 0;
    bottom: 4.5rem;
    width: 100%;
}

.sd-burst-item {
    position: absolute;
    bottom: -3rem;
    font-size: 2.2rem;
    animation-name: sd-float-up;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    will-change: transform, opacity;
}

@keyframes sd-float-up {
    0% {
        transform: translateY(0) scale(.6);
        opacity: 0;
    }

    10% {
        transform: translateY(-8vh) scale(1.15);
        opacity: 1;
    }

    100% {
        transform: translateY(-66vh) scale(1);
        opacity: 0;
    }
}

/* Volantino stampabile */
.sd-print-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 1rem;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.sd-format-field {
    max-width: 200px;
}

.sd-headline-field {
    min-width: 280px;
}

.sd-sheets {
    display: flex;
    padding: 1.5rem;
    overflow-x: auto;
}

.sd-sheet {
    flex: none;
    width: 210mm;
    height: 296.5mm;
    margin: 0 auto;
    display: grid;
    background: #fff;
    color: #15121f;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.sd-sheet-1 { grid-template: 1fr / 1fr; }
.sd-sheet-2 { grid-template: repeat(2, 1fr) / 1fr; }
.sd-sheet-4 { grid-template: repeat(2, 1fr) / repeat(2, 1fr); }
.sd-sheet-8 { grid-template: repeat(4, 1fr) / repeat(2, 1fr); }

/* Le dimensioni del testo seguono la dimensione del cartoncino (container query). */
.sd-card {
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    outline: 1px dashed #c9c4d6;
    outline-offset: -1px;
}

.sd-sheet-1 .sd-card {
    outline: none;
}

.sd-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqmin;
    max-width: 100%;
    padding: 6cqmin;
    text-align: center;
}

.sd-card-kicker {
    font-size: 3.2cqmin;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #ff4081;
}

.sd-card-title {
    font-size: 7.5cqmin;
    font-weight: 800;
    line-height: 1.1;
    color: #15121f;
}

.sd-card-date {
    font-size: 3.4cqmin;
    color: #5b5570;
}

.sd-card-headline {
    font-size: 4.6cqmin;
    font-weight: 600;
    color: #7c4dff;
}

.sd-card-qr {
    width: 48cqmin;
    height: 48cqmin;
}

.sd-card-url {
    font-size: 3.2cqmin;
    color: #15121f;
    word-break: break-all;
}

.sd-card-schedule {
    font-size: 3.4cqmin;
    font-weight: 600;
    color: #15121f;
    padding: .6cqmin 2.5cqmin;
    border: .35cqmin solid #15121f;
    border-radius: 99px;
}

@media print {
    .sd-print-toolbar {
        display: none !important;
    }

    .sd-sheets {
        display: block;
        padding: 0;
        overflow: visible;
    }

    .sd-sheet {
        box-shadow: none;
    }
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Si è verificato un errore."
    }