/* =============================================================================
   SEDNA ADMIN — l'AdminPortal con l'aspetto di SednaNext.

   ⚠️ I VALORI SONO COPIATI da SednaBlazor.Ui/wwwroot/css/sedna.tokens.css e
   sedna.sidebar.css del TenantPortal, letti a 6286bf59. Il portale del cliente è di
   Antonio e la sua libreria non è un pacchetto, quindi qui non si può importare: se
   là cambia il blu o la misura del menu, qui va cambiato a mano. Il tema MudBlazor
   con gli stessi colori sta in Theming/SednaAdminTheme.cs.

   ⚠️ LE REGOLE SUI COMPONENTI stanno dentro .mud-main-content e .mud-dialog. Menu a
   tendina, popover e liste di selezione di MudBlazor sono anche loro .mud-paper: una
   regola globale su .mud-paper metteva il bordo e l'arrotondamento dei riquadri anche
   sui menu che si aprono.
   ============================================================================= */

/* ── Inter, servito in casa (niente Google Fonts, niente Roboto) ── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --sa-primary: #1e88e5;
    --sa-primary-hover: #1976d2;
    --sa-primary-soft: #e3f2fd;
    --sa-bg: #fafafa;
    --sa-sunken: #f5f5f5;
    --sa-surface: #ffffff;
    --sa-hover: #eeeeee;
    --sa-border: #e0e0e0;
    --sa-border-strong: #bdbdbd;
    --sa-ink: #212121;
    --sa-ink-2: #616161;
    --sa-ink-3: #757575;
    --sa-success: #43a047;
    --sa-warning: #ffb300;
    --sa-error: #e53935;
    --sa-info: #00acc1;
    --sa-radius-sm: 4px;
    --sa-radius: 6px;
    --sa-radius-md: 8px;
    --sa-radius-lg: 12px;
    --sa-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --sa-shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, .16), 0 4px 8px -4px rgba(16, 24, 40, .08);
    --sa-item-h: 38px;
    --sa-dur: 180ms;
    --sa-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
/* 14px sul BODY, non sulla radice: le misure in rem di MudBlazor (menu da 16rem, spaziature)
   restano su base 16 come nel portale del cliente. Con 14px anche su html il menu veniva
   224px invece di 256, e tutto il resto più piccolo in proporzione. */
body {
    font-size: 14px;
    color: var(--sa-ink);
    background: var(--sa-bg);
    /* In un gestionale le cifre stanno in colonna: senza tabular-nums una colonna di
       importi diventa una scala storta. */
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   GUSCIO: menu laterale fisso bianco, niente barra blu in alto.
   ============================================================================ */
.mud-main-content {
    padding-top: 0 !important;
    background: var(--sa-bg);
    min-height: 100vh;
}
.sa-main {
    padding: 1rem 1.25rem 2rem;
}

.mud-drawer.sa-drawer {
    background: var(--sa-surface);
    border-right: 1px solid var(--sa-border);
    box-shadow: none !important;
}
.sa-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* marchio */
.sa-brand {
    flex: none;
    display: flex;
    align-items: center;
    gap: 11px;
    height: 60px;
    padding: 0 10px 0 16px;
    border-bottom: 1px solid var(--sa-border);
}
.sa-brand-mark { width: 32px; height: 32px; flex: none; display: block; }
.sa-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; overflow: hidden; }
.sa-brand-text .n { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; white-space: nowrap; color: var(--sa-ink); }
.sa-brand-text .n em { font-style: normal; color: var(--sa-primary); }
.sa-brand-text .s { font-size: .625rem; color: var(--sa-ink-3); white-space: nowrap; text-transform: uppercase; letter-spacing: .08em; }
.sa-brand .sa-collapse { margin-left: auto; color: var(--sa-ink-3); }
.mud-drawer-mini.mud-drawer--closed .sa-brand { padding: 0; justify-content: center; }
.mud-drawer-mini.mud-drawer--closed .sa-brand-text,
.mud-drawer-mini.mud-drawer--closed .sa-brand .sa-collapse-open { display: none; }

/* voci */
.sa-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 10px 4px;
}
.sa-nav .mud-nav-link {
    position: relative;
    min-height: var(--sa-item-h);
    padding: 0 10px !important;
    margin: 1px 0;
    border-radius: var(--sa-radius-md);
    color: var(--sa-ink-2);
    font-size: .875rem;
    font-weight: 500;
    border-right: none !important;
    transition: background var(--sa-dur) var(--sa-ease), color var(--sa-dur) var(--sa-ease);
}
.sa-nav .mud-nav-link .mud-nav-link-icon { color: var(--sa-ink-2); font-size: 1.15rem; margin-inline-end: 11px; }
.sa-nav .mud-nav-link:hover:not(.mud-nav-link-disabled) { background: var(--sa-hover); color: var(--sa-ink); }
.sa-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--sa-primary-soft) !important;
    color: var(--sa-primary) !important;
    font-weight: 600;
}
.sa-nav .mud-nav-link.active .mud-nav-link-icon { color: var(--sa-primary); }
.sa-nav .mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sa-primary);
}
.sa-nav .mud-nav-group .mud-nav-link-text { font-weight: 500; }
.sa-nav .mud-navgroup-collapse .mud-nav-link { font-size: .8125rem; }
.sa-nav-sep {
    margin: 12px 8px 4px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sa-ink-3);
}
.mud-drawer-mini.mud-drawer--closed .sa-nav-sep { visibility: hidden; height: 0; margin: 6px 0; }

/* piede: utente e versione */
.sa-foot {
    flex: none;
    border-top: 1px solid var(--sa-border);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sa-user { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sa-user .u { font-size: .8125rem; font-weight: 600; color: var(--sa-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-user .v { font-size: .6875rem; color: var(--sa-ink-3); }
.sa-foot .sa-user-menu { margin-left: auto; }
.mud-drawer-mini.mud-drawer--closed .sa-user { display: none; }
.mud-drawer-mini.mud-drawer--closed .sa-foot { justify-content: center; padding: 8px 0; }

/* ============================================================================
   INTESTAZIONE DI PAGINA (componente AdminPageHead)
   ============================================================================ */
.sa-page-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin-bottom: 12px;
}
.sa-page-head .ic { font-size: 20px; color: var(--sa-primary); display: grid; place-items: center; }
.sa-page-head .t { font-size: 1.125rem; font-weight: 600; color: var(--sa-ink); line-height: 1.2; }
.sa-page-head .st { font-size: .8125rem; color: var(--sa-ink-2); }
.sa-page-head .azioni { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ============================================================================
   COMPONENTI, SOLO DENTRO IL CONTENUTO E I DIALOG
   ============================================================================ */

/* superfici piatte: bordo di 1px al posto dell'ombra */
.mud-main-content .mud-paper:not(.mud-popover):not(.mud-list),
.mud-main-content .mud-card {
    box-shadow: none !important;
    border: 1px solid var(--sa-border);
}
.mud-main-content .mud-card { border-radius: var(--sa-radius-lg); }
.mud-main-content .mud-paper:not(.mud-card):not(.mud-popover) { border-radius: var(--sa-radius-md); }

/* pulsanti: compatti, arrotondati come i campi, pieni senza ombra */
.mud-main-content .mud-button-root.mud-button,
.mud-dialog .mud-button-root.mud-button {
    border-radius: var(--sa-radius);
    min-height: 30px;
    padding: 4px 12px;
}
.mud-main-content .mud-button-filled,
.mud-dialog .mud-button-filled { box-shadow: none !important; }
.mud-main-content .mud-button-root:focus-visible,
.mud-dialog .mud-button-root:focus-visible {
    outline: 2px solid var(--sa-primary);
    outline-offset: 2px;
}

/* tabelle: intestazione grigia 12px, righe da 36px */
.mud-main-content .mud-table,
.mud-dialog .mud-table { border-radius: var(--sa-radius-md); }
.mud-main-content .mud-table-head .mud-table-cell,
.mud-dialog .mud-table-head .mud-table-cell,
.mud-main-content .mud-simple-table thead th,
.mud-dialog .mud-simple-table thead th {
    background: var(--sa-sunken);
    color: var(--sa-ink-2);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 8px 12px;
    white-space: nowrap;
}
.mud-main-content .mud-table-body .mud-table-cell,
.mud-dialog .mud-table-body .mud-table-cell,
.mud-main-content .mud-simple-table tbody td,
.mud-dialog .mud-simple-table tbody td {
    padding: 6px 12px;
    height: 36px;
    font-size: .8125rem;
}

/* etichette di stato: pillola bassa, sfondo tenue, testo scuro del colore */
.mud-main-content .mud-chip,
.mud-dialog .mud-chip {
    height: 22px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    padding: 0 9px;
}
.mud-main-content .mud-chip.mud-chip-filled.mud-chip-color-success,
.mud-dialog .mud-chip.mud-chip-filled.mud-chip-color-success { background: #e8f5e9; color: #1b5e20; }
.mud-main-content .mud-chip.mud-chip-filled.mud-chip-color-warning,
.mud-dialog .mud-chip.mud-chip-filled.mud-chip-color-warning { background: #fff8e1; color: #8a5a00; }
.mud-main-content .mud-chip.mud-chip-filled.mud-chip-color-error,
.mud-dialog .mud-chip.mud-chip-filled.mud-chip-color-error { background: #ffebee; color: #b71c1c; }
.mud-main-content .mud-chip.mud-chip-filled.mud-chip-color-info,
.mud-dialog .mud-chip.mud-chip-filled.mud-chip-color-info { background: #e0f7fa; color: #006064; }
.mud-main-content .mud-chip.mud-chip-filled.mud-chip-color-primary,
.mud-dialog .mud-chip.mud-chip-filled.mud-chip-color-primary { background: var(--sa-primary-soft); color: #0d47a1; }
.mud-main-content .mud-chip.mud-chip-filled.mud-chip-color-default,
.mud-dialog .mud-chip.mud-chip-filled.mud-chip-color-default,
.mud-main-content .mud-chip.mud-chip-filled.mud-chip-color-secondary,
.mud-dialog .mud-chip.mud-chip-filled.mud-chip-color-secondary { background: var(--sa-hover); color: var(--sa-ink-2); }

/* avvisi: bordo intero, sfondo tenue */
.mud-main-content .mud-alert,
.mud-dialog .mud-alert {
    border-radius: var(--sa-radius-md);
    box-shadow: none;
    font-size: .8125rem;
}
.mud-main-content .mud-alert-filled-info,
.mud-dialog .mud-alert-filled-info { background: #e0f7fa; color: #006064; border: 1px solid #b2ebf2; }
.mud-main-content .mud-alert-filled-success,
.mud-dialog .mud-alert-filled-success { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; }
.mud-main-content .mud-alert-filled-warning,
.mud-dialog .mud-alert-filled-warning { background: #fff8e1; color: #8a5a00; border: 1px solid #ffecb3; }
.mud-main-content .mud-alert-filled-error,
.mud-dialog .mud-alert-filled-error { background: #ffebee; color: #b71c1c; border: 1px solid #ffcdd2; }
.mud-main-content .mud-alert-filled-info .mud-alert-icon,
.mud-dialog .mud-alert-filled-info .mud-alert-icon,
.mud-main-content .mud-alert-filled-success .mud-alert-icon,
.mud-dialog .mud-alert-filled-success .mud-alert-icon,
.mud-main-content .mud-alert-filled-warning .mud-alert-icon,
.mud-dialog .mud-alert-filled-warning .mud-alert-icon,
.mud-main-content .mud-alert-filled-error .mud-alert-icon,
.mud-dialog .mud-alert-filled-error .mud-alert-icon { color: inherit; }

/* dialog */
.mud-dialog {
    border-radius: var(--sa-radius-lg) !important;
    box-shadow: var(--sa-shadow-lg) !important;
}
.mud-dialog .mud-dialog-title,
.mud-dialog .mud-dialog-title .mud-typography { font-size: 1rem; font-weight: 600; }

/* notifiche in basso: bianche col bordo, come SednaToast */
.mud-snackbar {
    border-radius: var(--sa-radius-md) !important;
    box-shadow: var(--sa-shadow-lg) !important;
    font-size: .8125rem;
}

/* ============================================================================
   ACCESSO (EmptyLayout): pagina centrata su fondo chiaro, marchio in alto
   ============================================================================ */
.sa-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background: var(--sa-bg);
}
.sa-auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 1rem;
}
.sa-auth-brand img { width: 36px; height: 36px; }
.sa-auth-brand .n { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.sa-auth-brand .n em { font-style: normal; color: var(--sa-primary); }
.sa-auth-brand .s { font-size: .6875rem; color: var(--sa-ink-3); text-transform: uppercase; letter-spacing: .08em; margin-left: 2px; }
.sa-auth .mud-paper,
.sa-auth .mud-card { box-shadow: var(--sa-shadow-xs) !important; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-lg); }

@media (prefers-reduced-motion: reduce) {
    .sa-nav .mud-nav-link { transition: none; }
}

/* sfondo delle pagine d'accesso (EmptyLayout) */
.sa-auth-page { min-height: 100vh; background: var(--sa-bg); }
.sa-auth-page .mud-paper { border: 1px solid var(--sa-border); border-radius: var(--sa-radius-lg); box-shadow: var(--sa-shadow-xs) !important; }

/* ── Andamento: chi usa davvero SednaNext ─────────────────────────────── */
.sa-andamento-sommario {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.sa-andamento-sommario .blocco {
    background: var(--sa-surface);
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sa-andamento-sommario .blocco.attenzione { border-left: 3px solid var(--sa-warning); }
.sa-andamento-sommario .etichetta {
    font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sa-ink-3);
}
.sa-andamento-sommario .numero {
    font-size: 1.5rem; font-weight: 600; color: var(--sa-ink); line-height: 1.25; font-variant-numeric: tabular-nums;
}
.sa-andamento-sommario .numero .su { font-size: .8125rem; font-weight: 500; color: var(--sa-ink-2); }
.sa-andamento-sommario .sotto { font-size: .8125rem; color: var(--sa-ink-2); }

.sa-grafico svg { display: block; width: 100%; height: auto; max-height: 260px; }
.sa-grafico .griglia { stroke: var(--sa-border); stroke-width: 1; }
.sa-grafico .etichetta { fill: var(--sa-ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.sa-grafico .area { fill: var(--sa-primary-soft); stroke: none; }
.sa-grafico .linea { fill: none; stroke: var(--sa-primary); stroke-width: 2; stroke-linejoin: round; }
.sa-grafico .seconda { fill: none; stroke: var(--sa-info); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sa-grafico .fine { fill: var(--sa-primary); }
.sa-legenda { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--sa-ink-2); }
.sa-legenda .segno { width: 16px; height: 0; border-top: 2px solid var(--sa-primary); }
.sa-legenda .segno.seconda { border-top: 2px dashed var(--sa-info); }

.sa-spark { display: block; }
.sa-spark .area { fill: var(--sa-primary-soft); stroke: none; }
.sa-spark .linea { fill: none; stroke: var(--sa-primary); stroke-width: 1.5; stroke-linejoin: round; }
.sa-spark .fine { fill: var(--sa-primary); }
.sa-spark .vuota { stroke: var(--sa-border-strong); stroke-width: 1; stroke-dasharray: 2 3; }

.sa-cella-ditta { display: flex; flex-direction: column; }
.sa-cella-ditta .nome { font-weight: 600; color: var(--sa-ink); }
.sa-cella-ditta .codice { font-size: .75rem; color: var(--sa-ink-3); }

/* Lo stato della ditta: il colore dice dove guardare, la parola dice cosa succede. */
.sa-salute {
    display: inline-block; white-space: nowrap; font-size: .75rem; font-weight: 600;
    padding: 2px 8px; border-radius: 99px; background: var(--sa-sunken); color: var(--sa-ink-2);
}
.sa-salute.lavora { background: #e8f5e9; color: #2e7d32; }
.sa-salute.poco { background: #fff8e1; color: #8a5a00; }
.sa-salute.solo-accessi { background: #e0f7fa; color: #00707d; }
.sa-salute.ferma { background: #ffebee; color: #c62828; }
.sa-salute.mai { background: var(--sa-sunken); color: var(--sa-ink-3); }

/* L'intestazione di pagina va a capo come blocco quando lo spazio non basta, invece di spezzare
   le parole dei pulsanti («7 / giorni»). */
.sa-page-head { flex-wrap: wrap; row-gap: 8px; }
.sa-page-head .azioni { flex-wrap: wrap; }
.sa-page-head .azioni .mud-button-root { white-space: nowrap; }

/* Il testo di un documento legale, com'è scritto (Markdown), in una finestra che scorre. */
.sa-testo-legale {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    max-height: 60vh;
    overflow: auto;
    padding: 12px 14px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    margin: 0;
}

/* L'attesa dell'accesso: al centro, come la pagina di login. */
.sa-attesa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.sa-attesa .sa-attesa-barra { width: 160px; border-radius: 2px; opacity: .7; }