/* ============================================================================
   Design System - SET WebApp / Ticketing
   Fonte di verita unica per colore, spazio, tipografia e componenti condivisi.
   Caricato dopo app.css (vedi Server/App.razor).
   Regola: nessun nuovo colore hex nei .razor; usare i token --ds-*.
   ============================================================================ */

:root {
    /* --- Colore (palette semantica, allineata al brand SET) --- */
    --ds-primary: #00529c;
    --ds-primary-hover: #0a63b4;
    --ds-accent: #f7a814;

    --ds-surface: #ffffff;
    --ds-surface-alt: #f5f7fb;
    --ds-border: #dde3ea;

    --ds-text: #1f2a37;
    --ds-text-muted: #5a6b7a;

    --ds-success: #198754;
    --ds-success-soft: #d6f5e3;
    --ds-warning: #f0883e;
    --ds-danger: #d23a3a;
    --ds-danger-hover: #b62f2f;
    --ds-danger-soft: #fbe3e3;
    --ds-info: #0d8bbf;
    --ds-info-soft: #dbeafe;

    /* Bolle conversazione (chat) */
    --ds-bubble-in: #ece8e8;
    --ds-bubble-out: #d6f5e3;

    /* --- Spaziatura (scala a step di 4) --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* --- Tipografia (scala in rem) --- */
    --fs-h1: 1.5rem;
    --fs-h2: 1.15rem;
    --fs-h3: 1rem;
    --fs-body: .9rem;
    --fs-caption: .78rem;
    --fs-kpi: 1.6rem;

    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* --- Raggi e bordi --- */
    --ds-radius: 8px;
    --ds-radius-pill: 12px;

    /* --- Breakpoint condivisi (per riferimento; usati nelle media query) --- */
    /* lg 1500px / md 1000px (tablet) / sm 641px (mobile) */
    /* Gli stessi tre valori sono usati da MainLayoutClient, NavMenu e Toolbar:
       non introdurne altri. */
}

/* ============================================================================
   Card
   ============================================================================ */
.ds-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.ds-card--muted {
    background: var(--ds-surface-alt);
}

/* Griglia a due colonne che collassa a colonna singola sotto il breakpoint medio.
   Sostituisce gli `grid-template-columns:1fr 1fr` inline senza media query. */
.ds-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    align-items: start;
}

/* Gli item di una grid hanno `min-width:auto`: senza questo, un contenuto
   non spezzabile (parola lunga, tabella) sfonda la propria colonna. */
.ds-grid-2 > * {
    min-width: 0;
}

@media (max-width: 1000px) {
    .ds-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Griglia di card KPI: si adatta da sola al numero di colonne che entrano.
   Sostituisce i `repeat(auto-fit,minmax(NNNpx,1fr))` inline con valori diversi. */
.ds-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3);
}

.ds-kpi-grid > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Titolo di sezione interno a una card */
.ds-card__title {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--ds-text);
    margin: 0;
}

/* ============================================================================
   Badge / pill di stato
   ============================================================================ */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    border-radius: var(--ds-radius-pill);
    padding: 2px 10px;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    white-space: nowrap;
}

.ds-badge--success { background: var(--ds-success-soft); color: var(--ds-success); }
.ds-badge--warning { background: #fdebd9; color: #b8651f; }
.ds-badge--danger  { background: var(--ds-danger-soft); color: var(--ds-danger); }
.ds-badge--info    { background: var(--ds-info-soft); color: #1e40af; }
.ds-badge--muted   { background: var(--ds-surface-alt); color: var(--ds-text-muted); }

/* ============================================================================
   Tabella condivisa (per le <table> HTML native non gestite da CustomTable)
   ============================================================================ */

/* Contenitore obbligatorio di ogni .ds-table: confina lo scroll orizzontale
   nella tabella invece di lasciarlo tracimare sulla pagina. */
.ds-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body);
}

/* Dentro un .ds-table-wrap la tabella non scende sotto una larghezza leggibile:
   preferisce lo scroll orizzontale allo schiacciamento delle colonne. */
.ds-table-wrap > .ds-table {
    min-width: 560px;
}

.ds-table th,
.ds-table td {
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    border-bottom: 1px solid var(--ds-border);
}

.ds-table thead th {
    background: var(--ds-surface-alt);
    font-weight: var(--fw-semibold);
    color: var(--ds-text);
}

.ds-table tbody tr:nth-child(even) {
    background: var(--ds-surface-alt);
}

.ds-table tbody tr:hover {
    background: var(--ds-info-soft);
}

/* ============================================================================
   Primitive di layout responsive
   Da usare al posto degli `style="display:flex"` / `grid-template-columns`
   inline: sono le uniche a conoscere i breakpoint condivisi.
   ============================================================================ */

/* Riga di controlli o di bottoni: va sempre a capo invece di tagliare le azioni. */
.ds-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

/* Variante per righe che mescolano campi con etichetta e bottoni. */
.ds-toolbar--bottom { align-items: flex-end; }
.ds-toolbar--end { justify-content: flex-end; }
.ds-toolbar--between { justify-content: space-between; }

/* Campo di form dentro una .ds-toolbar: si restringe sotto la propria larghezza
   di riposo invece di sfondare il contenitore, ma non cresce (su desktop resta
   largo come prima). Il controllo interno (RadzenDropDown, FluentTextField, ...)
   va a `width:100%`. Aggiungere .ds-field--grow dove serve riempire la riga. */
.ds-field {
    flex: 0 1 220px;
    min-width: 0;
    max-width: 100%;
}

.ds-field--sm { flex-basis: 160px; }
.ds-field--lg { flex-basis: 320px; }
.ds-field--grow { flex-grow: 1; }

/* Riga di elenco "nome / stato / azione". Le colonne `auto` restano compatte,
   la prima si restringe fino a mandare a capo il testo invece di sfondare. */
.ds-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: var(--sp-3);
    row-gap: var(--sp-1);
    align-items: center;
}

.ds-list-row > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Pannello con scroll verticale proprio (thread, liste lunghe).
   Sui viewport bassi cede altezza al resto della pagina. */
.ds-scroll-panel {
    max-height: min(380px, 50vh);
    overflow-y: auto;
}

/* Contenuto di una dialog: non supera mai il viewport, nemmeno a 320px.
   Non usare `min-width` in px sui contenitori di modal. */
.ds-modal {
    width: min(92vw, 900px);
    max-width: 100%;
    max-height: 85vh;
    overflow-y: auto;
}

/* Editor WYSIWYG (RadzenHtmlEditor): altezza fissa su desktop, quota di
   viewport su schermi bassi, dove la tastiera virtuale mangia spazio. */
.ds-editor { height: min(320px, 45vh); }
.ds-editor--sm { height: min(180px, 35vh); }

@media (max-width: 641px) {
    /* Padding di pagina piu' stretto: a 375px 10px per lato sono il 5% utile. */
    .page-with-title,
    .page-no-title {
        padding-inline: var(--sp-2);
    }

    /* Breadcrumb di MLTitle: a 375px "Ticketing > Configurazione > ..." supera
       la larghezza dello schermo. L'altezza fissa di 50px resta (ci si appoggia
       `.page-with-title`), quindi si scorre invece di andare a capo.
       Override lato fork: `overflow-x` non e' dichiarato in MLTitle.razor.css,
       nessun conflitto di specificita' con lo scoped CSS. */
    main > .title {
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/* ============================================================================
   Stato vuoto
   ============================================================================ */
.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-4);
    color: var(--ds-text-muted);
    font-size: var(--fs-body);
    text-align: center;
}

.ds-empty__icon {
    font-size: 2rem;
    opacity: .6;
}

/* ============================================================================
   Messaggi di stato (errore / successo / info) accessibili
   Usare con role="alert" / aria-live nel markup.
   ============================================================================ */
.ds-alert {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--ds-radius);
    font-size: var(--fs-body);
}

.ds-alert--error   { background: var(--ds-danger-soft); color: var(--ds-danger); }
.ds-alert--success { background: var(--ds-success-soft); color: var(--ds-success); }
.ds-alert--info    { background: var(--ds-info-soft); color: #1e40af; }

/* ============================================================================
   Bottone distruttivo (danger) - applicare a un FluentButton (Appearance.Outline) via class.
   Stile outline-danger: testo e bordo rossi su sfondo trasparente (lo sfondo del
   FluentButton Outline non e' sovrascrivibile in modo affidabile via ::part, quindi
   la leggibilita' non vi dipende). Riempimento tenue solo all'hover.
   ============================================================================ */
.ds-btn-danger::part(control) {
    color: var(--ds-danger);
    border-color: var(--ds-danger);
}

.ds-btn-danger::part(control):hover {
    color: var(--ds-danger-hover);
    border-color: var(--ds-danger-hover);
    background: var(--ds-danger-soft);
}

/* ============================================================================
   Spinner inline (es. su un bottone in salvataggio)
   ============================================================================ */
.ds-spinner-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: ds-spin .7s linear infinite;
}

@keyframes ds-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   Skeleton (placeholder di caricamento)
   ============================================================================ */
.ds-skeleton {
    background: linear-gradient(90deg, var(--ds-surface-alt) 25%, #eef2f7 37%, var(--ds-surface-alt) 63%);
    background-size: 400% 100%;
    border-radius: 4px;
    animation: ds-shimmer 1.4s ease infinite;
}

@keyframes ds-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}