/* ============================================================
   DFMI Cloud — sistema visivo (skill "siti-web")
   Token, tipografia, spaziatura, header e schede condivise fra
   frontoffice (pagina dealer) e backoffice. Un solo accento,
   un solo raggio, ombre minime, transizioni brevi.
   ============================================================ */

:root {
    /* colore */
    --sfondo: #0d0f12;            /* fondo backoffice */
    --sfondo-nero: #000;          /* fondo frontoffice, come il template di Giorgio */
    --superficie: #16191f;        /* card, tabelle */
    --superficie-2: #1d2128;      /* riga alternata, hover, chip */
    --testo: rgba(255, 255, 255, .92);
    --testo-tenue: rgba(255, 255, 255, .60);
    --bordo: #2a2f37;
    --accento: #4f9cf9;
    --errore: #e01b24;

    /* tipografia */
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --lh-testo: 1.6;
    --lh-titolo: 1.2;

    /* spaziatura (scala: 4/8/16/24/40/64) */
    --s1: .25rem; --s2: .5rem; --s3: 1rem; --s4: 1.5rem; --s5: 2.5rem; --s6: 4rem;

    /* forme */
    --raggio: 10px;
    --ombra: 0 1px 3px rgb(0 0 0 / .35);
    --transizione: 160ms ease;
}

/* ---------- base ---------- */

html, body {
    background: var(--sfondo);
    color: var(--testo);
    font-family: var(--sans);
    line-height: var(--lh-testo);
}

h1, h2, h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    line-height: var(--lh-titolo);
    letter-spacing: -0.01em;
    font-weight: 700;
}

::selection { background: color-mix(in srgb, var(--accento) 35%, transparent); }

:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ---------- header nero, identico fra front e back ---------- */

.testata {
    position: relative; /* per centrare i loghi sulla pagina, non sullo spazio residuo */
    display: flex;
    align-items: center;
    gap: var(--s4);
    min-height: 80px;
    padding: var(--s2) var(--s4);
    background: var(--sfondo-nero);
    border-bottom: 1px solid var(--bordo);
    flex-wrap: wrap;
}

.contrassegno {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--testo);
}

    .contrassegno img { height: 34px; display: block; }

    .contrassegno .parola {
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: .06em;
        color: var(--testo-tenue);
    }

.testata .loghi-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--s5);
}

    .testata .loghi-brand img {
        height: 46px;
        display: block;
        opacity: .95;
    }

.testata .utente {
    margin-left: auto;
    color: var(--testo-tenue);
    font-size: .95rem;
    white-space: nowrap;
}

/* ---------- pagina dealer ---------- */

.front { background: var(--sfondo-nero); min-height: 100vh; }

.front .barra-titolo {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4) var(--s3);
}

    .front .barra-titolo .titolo-raccolta {
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--testo);
    }

.front .corpo { padding: var(--s3) var(--s4) var(--s5); }

/* ---------- scheda tabella ---------- */

.scheda {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    overflow: hidden;
    box-shadow: var(--ombra);
}

    .scheda table { width: 100%; }

    .scheda thead th {
        font-size: .78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--testo-tenue);
        text-align: left;
        padding: 14px var(--s3);
        border-bottom: 1px solid var(--bordo);
        white-space: nowrap;
    }

    .scheda tbody td {
        padding: 12px var(--s3);
        border-bottom: 1px solid color-mix(in srgb, var(--bordo) 55%, transparent);
        vertical-align: middle;
    }

    .scheda tbody tr { transition: background var(--transizione); }

    .scheda tbody tr:hover { background: var(--superficie-2); }

    .scheda tbody tr:last-child td { border-bottom: none; }

.riga-cliccabile { cursor: pointer; }

/* icona file su tondo squadrato, come nel template */

.icona-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--superficie-2);
    flex: none;
}

/* ---------- tabelle MudBlazor adeguate alle token ---------- */

.mud-table.mud-table-root { background: transparent; }

/* Le tabelle dentro .scheda (pagina dealer) usano il mio css: si toglie il chrome
   di MudBlazor perché non si sovrapponga (sfondo riga, bordi, corpi delle intestazioni). */
.scheda .mud-table-root,
.scheda .mud-table-container,
.scheda .mud-table-body,
.scheda .mud-table-row,
.scheda .mud-table-cell {
    background: transparent !important;
    border-bottom: none;
}

.mud-table-striped > .mud-table-container > .mud-table-root > .mud-table-body > tr:nth-of-type(odd),
.mud-table-row {
    background: transparent;
}

.mud-table-hover > .mud-table-container > .mud-table-root > .mud-table-body > tr:hover {
    background: var(--superficie-2) !important;
}

/* ---------- pulsanti: un solo accento, testi non in grassetto ---------- */

.mud-button-root { text-transform: none !important; }

.mud-button-outlined-default {
    color: var(--testo) !important;
    border-color: var(--bordo) !important;
}

    .mud-button-outlined-default:hover {
        border-color: var(--testo-tenue) !important;
        background: var(--superficie-2) !important;
    }

/* ---------- briciole ---------- */

.mud-breadcrumbs .mud-link { color: var(--testo-tenue); }

.mud-breadcrumbs .mud-link:hover { color: var(--accento); }

.mud-breadcrumb-separator > span { color: var(--testo-tenue); }

/* ---------- stati ---------- */

.stato-tenue { color: var(--testo-tenue); }

.pannello-vuoto {
    padding: var(--s5);
    text-align: center;
    color: var(--testo-tenue);
}

/* ---------- telefono ---------- */

@media (max-width: 600px) {
    .testata { min-height: 64px; gap: var(--s3); padding: var(--s2) var(--s3); }

        .testata .loghi-brand { display: none; }

    .front .barra-titolo, .front .corpo { padding-inline: var(--s3); }

    .scheda thead th, .scheda tbody td { padding-inline: var(--s2); }
}