/* ─────────────────────────────────────────────────────────────────────────
   ivg-auction-service — design system
   Palette navy/blu esistente mantenuta (scelta esplicita di Giampaolo), ma
   forme/spaziature/font ispirati al progetto di riferimento AA_AML
   (D:\Progetti\any.auction\trunk\src\Gestionale\AA_AML\wwwroot\aml.html):
   sidebar di navigazione, card/bottoni più arrotondati, badge a pillola,
   DM Sans/DM Mono. Vedi App.razor per l'import dei font Google.
   Le classi già usate nei componenti .razor (.card, .field, .hint, .badge,
   button.primary, button.warn, .error, .ok, .winner-banner, .stat-grid,
   .user-results, @media print, ecc.) restano tutte valide: qui sono solo
   rifinite. Le nuove classi (.page-header, .table-scroll, .pill, .empty,
   button.secondary/.ghost) sono opzionali, da aggiungere dove serve.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --color-navy-900: #0d1730;
    --color-navy-800: #16233f;
    --color-navy-700: #1f2f52;
    --color-blue-600: #2f5fd1;
    --color-blue-700: #24499e;
    --color-blue-50: #eef2fc;
    --color-blue-100: #dce6fb;

    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-border-strong: #d6d9de;

    --color-text: #1a1a1a;
    --color-text-muted: #62697a;
    --color-text-faint: #8992a3;

    --color-success: #1b7a3d;
    --color-success-bg: #e6f7ec;
    --color-success-border: #b8e6c6;

    --color-danger: #b3261e;
    --color-danger-bg: #fdecea;
    --color-danger-border: #f3c2bd;

    --color-warning: #92530a;
    --color-warning-bg: #fff2e0;
    --color-warning-border: #f5d5a3;

    --color-neutral-bg: #eef0f3;
    --color-neutral-text: #4b5160;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* Font pair presi da AA_AML (D:\Progetti\any.auction\trunk\src\Gestionale\AA_AML):
       DM Sans per il testo, DM Mono per valori tabellari/codici (importi, codici
       fiscali, id) dove serve un allineamento a colonna leggibile. Import in App.razor. */
    --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

* {
    box-sizing: border-box;
}

html {
    /* Base ridotta rispetto al default browser (16px): tutto ciò che nel resto
       del foglio è espresso in rem scala di conseguenza, testo compreso. */
    font-size: 14px;
}

html, body {
    font-family: var(--font-sans);
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-blue-700);
}

a:hover {
    color: var(--color-blue-600);
}

/* Tutti i link di contenuto (dentro <main>, quindi non la topbar né il menu di
   sezione, che hanno già un loro stile) hanno l'aspetto di un pulsante — non
   di un link di testo sottolineato. Eccezioni: un <a> che avvolge già un
   <button> (pattern usato in alcuni punti) non va "raddoppiato"; un <a
   class="icon-btn"> (matita "vedi busta" nell'elenco buste) ha già il suo
   stile compatto a icona, vedi più sotto; un <a class="link-plain"> (indice
   delle pagine di Guida, GuidaOfferente.razor/GuidaOperatore.razor) resta un
   link di testo normale — un elenco di ancore interne alla pagina non ha
   senso come fila di pulsanti pieni. */
main a:not(.pill):not(.icon-btn):not(.link-plain):not(:has(> button)) {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-blue-700);
    border: 1px solid var(--color-border-strong);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.3;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

main a:not(.pill):not(.icon-btn):not(.link-plain):not(:has(> button)):hover {
    background: var(--color-blue-50);
    border-color: var(--color-blue-100);
    color: var(--color-blue-700);
    text-decoration: none;
}

main a:has(> button) {
    display: inline;
}

::selection {
    background: var(--color-blue-100);
}

:focus-visible {
    outline: 2px solid var(--color-blue-600);
    outline-offset: 2px;
}

/* FocusOnNavigate (Routes.razor) sposta il focus sull'h1 di pagina ad ogni
   navigazione, per l'accessibilità di chi usa uno screen reader: aggiunge
   tabindex="-1" e chiama .focus(). Il browser però tratta questo focus
   programmatico come "focus-visible" e disegna il riquadro blu sul titolo
   finché l'utente non clicca altrove: qui lo sopprimiamo solo per questo
   caso specifico (il titolo resta comunque focus target per lo screen
   reader, cambia solo la resa visiva). */
h1[tabindex="-1"]:focus-visible {
    outline: none;
}

/* ── Layout a sidebar ───────────────────────────────────────────────────
   Struttura ispirata ad AA_AML (shell + sidebar fissa + area contenuto),
   colori navy/blu del progetto invece dello sfondo scuro dell'originale.
   Vedi MainLayout.razor. */
.shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 220px;
    min-width: 220px;
    background: linear-gradient(180deg, var(--color-navy-800), var(--color-navy-900));
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-logo {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo .wordmark {
    display: block;
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
}

.sidebar-logo .sub {
    font-size: 0.7rem;
    color: #b7c4e6;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top: 0.15rem;
}

.sidebar-nav {
    flex: 1;
    padding: var(--space-3) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    color: #cfe0ff;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    /* La voce "Chat" (MainLayout.razor) è un <button>, le altre sono <NavLink>
       (rendono <a>): questo reset fa sì che il bottone non porti lo stile grezzo
       del browser e sia visivamente identico alle voci-link. */
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}

.nav-item.active {
    background: var(--color-blue-600);
    color: #fff;
}

/* Voce "Aiuto" (MainLayout.razor): un vero e proprio pulsante, distinto dalle
   altre voci di menu (che sono link di navigazione "piatti"), per farlo
   risaltare come azione a sé — richiesto da Giampaolo il 28/07/2026. */
.nav-item-aiuto {
    margin-top: var(--space-2);
    margin-bottom: var(--space-1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    justify-content: center;
    font-weight: 650;
}

.nav-item-aiuto:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

/* Cerchietto dei messaggi di chat non letti nella voce di menu (MainLayout.razor),
   allineato a destra nella riga grazie a margin-left:auto. */
.nav-badge {
    margin-left: auto;
    background: var(--color-danger);
    color: #fff;
    border-radius: var(--radius-pill);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
}

.nav-section-label {
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8fa3d6;
    font-weight: 650;
    padding: 0.85rem 0.75rem 0.3rem;
}

.sidebar-user {
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.user-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: var(--color-blue-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 650;
    color: #fff;
}

.sidebar-user .user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
}

.sidebar-user .user-role {
    font-size: 0.7rem;
    color: #b7c4e6;
}

.logout-btn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: #b7c4e6;
    font-size: 0.78rem;
    padding: 0.25rem 0.4rem;
}

.logout-btn:hover {
    color: #fff;
}

.sidebar-user a.btn-full {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--color-blue-600);
    color: #fff;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
}

.sidebar-user a.btn-full:hover {
    background: var(--color-blue-700);
}

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    padding: var(--space-5);
    /* Prima era 1100px: su schermi larghi lasciava una fascia grigia (sfondo
       pagina) ben visibile a fianco del contenuto, incluse le "bolle" di
       stato (.stat-grid, che riempie già il 100% di .content) — segnalato da
       Giampaolo il 28/07/2026. Alzato per usare meglio lo spazio disponibile. */
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* ── Tipografia ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
    font-weight: 650;
    color: var(--color-navy-900);
    line-height: 1.25;
}

h1 {
    font-size: 1.45rem;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-4) 0;
}

h2 {
    font-size: 1.25rem;
    margin: 0 0 var(--space-3) 0;
}

h3 {
    font-size: 1.05rem;
    margin: 0 0 var(--space-3) 0;
}

h4 {
    font-size: 0.95rem;
    margin: var(--space-4) 0 var(--space-2) 0;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Intestazione di pagina: <div class="page-header"><h1>...</h1><p>sottotitolo</p></div>.
   Opzionale — se una pagina ha solo <h1>, resta comunque a posto grazie allo
   stile su h1 sopra; questo wrapper aggiunge solo il sottotitolo/bordo. */
.page-header {
    margin-bottom: var(--space-5);
}

.page-header h1 {
    margin-bottom: var(--space-1);
}

.page-header p {
    margin: 0;
    color: var(--color-text-muted);
}

/* .badge: usato sia dalla sidebar (in passato) sia inline nelle tabelle di
   SalaAsta/AdminDati/DettaglioAstaConclusa ("inserita da operatore ...",
   "corregge l'offerta n. ...") — pillola blu piena, invariata. */
.badge {
    background: var(--color-blue-600);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.6rem;
    margin-left: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
}

.card > h3:first-child,
.card > h4:first-child {
    margin-top: 0;
}

.card.bozza {
    border: 1px dashed var(--color-border-strong);
    background: #fafafa;
    box-shadow: none;
}

.hint {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.9em;
}

/* Paragrafo di stato vuoto ("Nessun lotto trovato", ecc.) — opzionale. */
.empty {
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-4) 0;
}

/* ── Indice delle pagine di Guida (GuidaOfferente.razor / GuidaOperatore.razor) ── */
.toc {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.toc a {
    font-weight: 500;
    text-decoration: underline;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    /* Senza questo la card successiva (es. "Comandi") risultava attaccata
       alla riga di bolle, senza respiro visivo: segnalato da Giampaolo il
       28/07/2026. */
    margin-bottom: var(--space-4);
}

.stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.stat .label {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat .value {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--color-navy-900);
}

/* ── Scheda testata lotto (foto + dati principali) ────────────────────────
   Vedi LottoTestata.razor, usato in SalaAsta.razor e Partecipazione.razor
   (richiesto da Giampaolo il 28/07/2026). */
.lot-header {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
}

.lot-header-photo {
    width: 180px;
    height: 130px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-neutral-bg);
    flex-shrink: 0;
}

.lot-header-photo-placeholder {
    width: 180px;
    height: 130px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border-strong);
    background: var(--color-neutral-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-faint);
    font-size: 0.78rem;
    text-align: center;
    padding: var(--space-2);
    flex-shrink: 0;
}

.lot-header-info {
    flex: 1;
    min-width: 0;
}

.lot-header-title {
    font-size: 1.3rem;
    font-weight: 650;
    margin: 0 0 var(--space-3) 0;
    color: var(--color-navy-900);
}

/* Flexbox invece di CSS Grid: con grid (auto-fit) il numero di colonne è
   fissato per l'intera griglia in base alla larghezza del contenitore, quindi
   quando l'ultimo campo (Termine rilanci) va a capo da solo resta un'intera
   riga di colonne vuote alla sua destra (segnalato da Giampaolo il
   28/07/2026, "tutto questo spazio vuoto"). Con flexbox ogni riga è
   indipendente: gli elementi di una riga incompleta si allargano a riempirla
   invece di lasciare spazio vuoto accanto. */
.lot-header-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
}

.lot-header-fields > div {
    flex: 1 1 150px;
    min-width: 150px;
}

.lot-header-fields .label {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lot-header-fields .value {
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: 500;
}

/* Nota libera (es. note visite): sotto la griglia campi, testo più discorsivo
   quindi niente text-transform uppercase sull'etichetta come nei .value sopra. */
.lot-header-note {
    margin-top: var(--space-3);
}

.lot-header-note .label {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lot-header-note .value {
    font-size: 0.9rem;
    color: var(--color-text);
    white-space: pre-line;
}

/* ── Offerta corrente in evidenza ──────────────────────────────────────────
   Molto più prominente delle altre bolle (stat-grid): richiesto da
   Giampaolo il 28/07/2026, "l'offerta corrente deve essere molto più
   visibile" rispetto al resto delle statistiche del lotto. */
.current-price-hero {
    background: var(--color-blue-50);
    border: 1px solid var(--color-blue-100);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    text-align: center;
}

.current-price-hero .label {
    font-size: 0.85rem;
    color: var(--color-blue-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.current-price-hero .value {
    font-family: var(--font-mono);
    font-size: 2.6rem;
    font-weight: 650;
    color: var(--color-navy-900);
    line-height: 1.2;
}

@media (max-width: 640px) {
    .lot-header {
        flex-direction: column;
    }

    .lot-header-photo,
    .lot-header-photo-placeholder {
        width: 100%;
        height: 160px;
    }

    .current-price-hero .value {
        font-size: 2rem;
    }
}

/* ── Tabelle ────────────────────────────────────────────────────────────── */

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--color-border);
}

thead th {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 650;
    border-bottom: 2px solid var(--color-border-strong);
    white-space: nowrap;
}

tbody tr:hover {
    background: var(--color-blue-50);
}

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

tbody tr.selected {
    background: var(--color-blue-100);
}

/* Riga di offerta annullata/corretta (SalaAsta/AdminDati): class="bozza" sulla
   <tr>, non va confusa con .card.bozza (bozza di documento). */
tbody tr.bozza {
    background: var(--color-neutral-bg);
    color: var(--color-text-faint);
}

tbody tr.bozza:hover {
    background: var(--color-neutral-bg);
}

/* Tabelle "chiave/valore" (senza <thead>, due colonne: etichetta/valore) usate
   per il dettaglio di un lotto/busta: la prima colonna fa da etichetta.
   Miglioria progressiva — se il browser non supporta :has(), le tabelle
   restano comunque leggibili con lo stile generico sopra. */
table:not(:has(thead)) tbody tr:hover {
    background: transparent;
}

table:not(:has(thead)) td:first-child {
    color: var(--color-text-muted);
    font-weight: 600;
    width: 260px;
    white-space: nowrap;
}

/* Wrapper per tabelle larghe (molte colonne): <div class="table-scroll"><table>...
   evita che la tabella rompa il layout su schermi stretti, con scroll orizzontale. */
.table-scroll {
    overflow-x: auto;
    margin: 0 calc(var(--space-5) * -1);
    padding: 0 var(--space-5);
}

.table-scroll table {
    min-width: 640px;
}

/* ── Pill di stato ──────────────────────────────────────────────────────
   Uso: <span class="pill pill-success">Aggiudicata</span>. Varianti disponibili:
   pill-info (blu, default), pill-success, pill-warning, pill-danger, pill-neutral. */
.pill {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--color-blue-50);
    color: var(--color-blue-700);
    border: 1px solid var(--color-blue-100);
}

.pill-success {
    background: var(--color-success-bg);
    color: var(--color-success);
    border-color: var(--color-success-border);
}

.pill-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning-border);
}

.pill-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: var(--color-danger-border);
}

.pill-neutral {
    background: var(--color-neutral-bg);
    color: var(--color-neutral-text);
    border-color: var(--color-border-strong);
}

/* ── Vista "Lotti in gara" (Home) ───────────────────────────────────────── */
.home-filtri {
    margin-bottom: var(--space-3);
}

.home-filtri label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

a.pill {
    text-decoration: none;
    margin-top: 0.3rem;
}

/* ── Bottoni ────────────────────────────────────────────────────────────── */
/* Stile di base per QUALSIASI <button> non altrimenti classificato, così le
   azioni secondarie (es. "Ricarica elenco", "Annulla") non restano con lo
   stile grezzo del browser. button.primary/.warn/.secondary/.ghost sopra
   restano le varianti esplicite. */
button {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

button:hover:not(:disabled) {
    background: var(--color-blue-50);
    border-color: var(--color-blue-100);
}

button:active:not(:disabled) {
    transform: translateY(1px);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

button.link-btn {
    border: none;
    background: none;
    padding: 0;
}

button.primary, main a.primary {
    background: var(--color-blue-600);
    color: #fff;
    border-color: var(--color-blue-600);
    font-weight: 600;
}

button.primary:hover:not(:disabled), main a.primary:hover {
    background: var(--color-blue-700);
    border-color: var(--color-blue-700);
    color: #fff;
}

button.primary:disabled {
    background: #9db3e8;
    border-color: #9db3e8;
    color: #fff;
}

/* Variante outline per azioni secondarie esplicite (facoltativa, in alternativa
   al pulsante non classificato che ora ha comunque uno stile decoroso). */
button.secondary {
    background: var(--color-surface);
    color: var(--color-blue-700);
    border-color: var(--color-blue-100);
}

button.secondary:hover:not(:disabled) {
    background: var(--color-blue-50);
}

button.ghost {
    background: none;
    border-color: transparent;
    color: var(--color-blue-700);
}

button.ghost:hover:not(:disabled) {
    background: var(--color-blue-50);
}

button.warn, main a.warn {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}

button.warn:hover:not(:disabled), main a.warn:hover {
    background: #942019;
    border-color: #942019;
    color: #fff;
}

/* ── Etichetta di stato testuale + bottoni azione (elenco buste) ──────────
   Stile su modello di riferimento fornito da Giampaolo il 25/07/2026: stato
   come testo colorato (non pillola) sopra bottoni di azione grandi e pieni,
   invece dei bottoni generici usati altrove nell'app. Vedi GestioneBuste.razor
   (colonna "Stato": AUTORIZZA verde, RIC. INTEGRAZIONE arancione, NEGA
   AUTORIZZ. rosso). */
.stato-label {
    display: block;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.stato-label-success { color: var(--color-success); }
.stato-label-warning { color: var(--color-warning); }
.stato-label-danger  { color: var(--color-danger); }
.stato-label-neutral { color: var(--color-neutral-text); }

.azioni-busta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.action-btn {
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-md);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.action-btn.approve { background: var(--color-success); }
.action-btn.approve:hover:not(:disabled) { background: #145c2c; }

.action-btn.request { background: #e8890c; }
.action-btn.request:hover:not(:disabled) { background: #c4740a; }

.action-btn.reject { background: var(--color-danger); }
.action-btn.reject:hover:not(:disabled) { background: #942019; }

/* ── Modale (chat) ──────────────────────────────────────────────────────
   Su richiesta di Giampaolo il 25/07/2026: il pulsante della chat (con il
   cerchietto dei messaggi non letti, vedi .nav-badge) sta nel menu laterale
   (MainLayout.razor, stato condiviso ChatSessionState); la modale vera e
   propria resta nella pagina che ospita la gara (SalaAsta.razor/
   Partecipazione.razor, proprietaria dell'HubConnection e di ChatPanel).
   Nome classi ripreso dal riferimento AA_AML per un eventuale riuso futuro. */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 23, 48, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: var(--space-4);
}

.modal-backdrop.open {
    display: flex;
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 480px;
    max-width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-title {
    font-weight: 650;
    color: var(--color-navy-900);
}

.modal-body {
    padding: var(--space-4) var(--space-5);
    overflow-y: auto;
}

/* ChatPanel porta già il proprio <div class="card"> con intestazione "Chat":
   dentro la modale (che ha già bordo/ombra/padding suoi) toglie i doppioni. */
.modal-body .card {
    box-shadow: none;
    border: none;
    padding: 0;
    margin-bottom: 0;
}

/* Overlay a tutto schermo "Offerta WEB"/"Offerta Sala" (Partecipazione.razor/
   SalaAsta.razor): sfondo quasi trasparente, si autonasconde da codice dopo
   pochi secondi. z-index sopra alla modale chat (500) perché deve restare
   visibile anche a chat aperta. pointer-events:none per non bloccare i click
   sulla pagina sottostante mentre è mostrato — richiesta di Giampaolo del
   29/07/2026. */
.overlay-offerta {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 23, 48, 0.12);
    pointer-events: none;
    animation: overlay-offerta-fade 2.5s ease-in-out forwards;
}

.overlay-offerta span {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background: rgba(13, 23, 48, 0.85);
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-md);
}

@keyframes overlay-offerta-fade {
    0% { opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text-muted);
    padding: 0;
}

.close-btn:hover {
    color: var(--color-danger);
}

/* Colonna icona (matita "vedi/modifica busta") nell'elenco buste: sostituisce
   il link testuale "Vedi busta" che prima stava sotto il Presentatore, su
   richiesta di Giampaolo il 25/07/2026. */
.col-icon {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* ── Miniatura foto lotto (Storico aste, Lotti in gara) ────────────────── */
.col-thumb {
    width: 1%;
    white-space: nowrap;
}

.lot-thumb {
    width: 76px;
    height: 57px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    display: block;
}

.lot-thumb-placeholder {
    width: 76px;
    height: 57px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border-strong);
    background: var(--color-neutral-bg);
}

/* ── Tabella Storico aste: colonna Lotto più larga, colonna Stato più stretta
   (richiesta Giampaolo 28/07/2026). Scoping tramite classe sulla <table> per
   non toccare le altre tabelle dell'app. */
.tabella-storico .col-lotto {
    min-width: 220px;
}

.tabella-storico .col-stato {
    width: 1%;
    white-space: nowrap;
}

.tabella-storico .col-stato .pill {
    padding: 0.15rem 0.5rem;
}

/* Dimensione font dei dati di tabella: applicata a TUTTE le tabelle dell'app
   per coerenza (richiesta Giampaolo 28/07/2026), non solo Storico aste. */
tbody td {
    font-size: 0.85rem;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.icon-btn:hover {
    color: var(--color-blue-700);
    background: var(--color-blue-50);
    border-color: var(--color-blue-100);
}

/* ── Messaggi di stato ──────────────────────────────────────────────────── */

.error {
    color: var(--color-danger);
}

.ok {
    color: var(--color-success);
}

/* ─────────────────────────────────────────────────────────────────────────
   Chat (ChatPanel.razor) — bolle stile WhatsApp, richiesto da Giampaolo il
   27/07/2026: propri messaggi allineati a destra (verde), altrui a sinistra
   (bianco), messaggi dell'operatore evidenziati in azzurro lato utente (non
   per l'operatore stesso, i cui messaggi sono già a destra/"Tu").
   ───────────────────────────────────────────────────────────────────────── */
.chat-window {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
}

.chat-row {
    display: flex;
}

.chat-row-mine {
    justify-content: flex-end;
}

.chat-row-other {
    justify-content: flex-start;
}

.chat-bubble {
    max-width: 75%;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-size: 0.92rem;
    line-height: 1.35;
    word-break: break-word;
}

.chat-bubble-mine {
    background: #dcf8c6;
    border-bottom-right-radius: 4px;
}

.chat-bubble-other {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 4px;
}

.chat-bubble-operatore {
    background: var(--color-blue-50);
    border: 1px solid var(--color-blue-100);
    border-bottom-left-radius: 4px;
}

.chat-sender {
    display: block;
    font-weight: 650;
    font-size: 0.78rem;
    margin-bottom: 0.1rem;
}

.chat-sender-operatore {
    color: var(--color-blue-700);
}

.chat-sender-altro {
    color: var(--color-text-muted);
}

.chat-time {
    display: block;
    text-align: right;
    font-size: 0.7rem;
    color: var(--color-text-faint);
    margin-top: 0.15rem;
}

.chat-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.chat-input-row input[type="text"] {
    flex: 1;
    max-width: none;
    border-radius: var(--radius-pill);
    padding: 0.5rem 0.9rem;
}

.chat-send-btn {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-blue-600);
    color: #fff;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.chat-send-btn svg {
    flex-shrink: 0;
}

.chat-send-btn:hover:not(:disabled) {
    background: var(--color-blue-700);
}

.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.winner-banner {
    background: var(--color-success-bg);
    border: 2px solid var(--color-success);
}

.winner-banner h3 {
    color: var(--color-success);
    margin-top: 0;
}

/* Card usata come banner di avviso/interruzione (es. "gara in pausa", "esame
   buste in corso"): basta aggiungere class="card error" allo stesso elemento,
   nessun'altra modifica al markup richiesta. Il solo .error (senza .card,
   usato ovunque per un semplice messaggio di errore inline) non è toccato. */
.card.error {
    border-left: 4px solid var(--color-danger);
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* ── Form ───────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    width: 100%;
    box-sizing: border-box;
}

/* Su schermi larghi .card può arrivare quasi a 1400px (vedi .content):
   senza un tetto, un campo Nome/Data/Ora da 5 caratteri finiva largo quanto
   l'intera card (segnalato da Giampaolo il 06/08/2026 su Nuova busta
   cartacea, ma la regola sopra è generica quindi valeva ovunque). textarea
   escluso: lì il pieno width è voluto (note/motivo, testo multi-riga). */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select {
    max-width: 420px;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--color-blue-600);
}

textarea {
    font-family: inherit;
    resize: vertical;
}

label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.field {
    margin-bottom: var(--space-3);
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

/* ── Risultati ricerca utenti (offerta per conto di) ───────────────────── */

.user-results {
    list-style: none;
    margin: var(--space-2) 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    max-height: 220px;
    overflow-y: auto;
}

.user-results li {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
}

.user-results li:last-child {
    border-bottom: none;
}

.user-results li:hover {
    background: var(--color-blue-50);
}

.user-results li.selected {
    background: var(--color-blue-100);
    font-weight: 600;
}

/* ── Stampa ─────────────────────────────────────────────────────────────── */

@media print {
    /* Nascondi navigazione, pulsanti e altri controlli non pertinenti quando si
       stampa un report (window.print()): solo il contenuto informativo resta. */
    .no-print, .sidebar, nav {
        display: none !important;
    }

    .shell {
        display: block;
    }

    .card {
        box-shadow: none;
        border: none;
    }

    /* Su carta i link "a pulsante" tornano semplice testo sottolineato: un
       riquadro blu non ha senso su un verbale/report stampato. */
    main a {
        display: inline;
        padding: 0;
        border: none;
        background: none;
        color: inherit;
        text-decoration: underline;
        font-weight: inherit;
    }
}

/* ── Schermate di autenticazione (Login) ────────────────────────────────── */

.auth-shell {
    display: flex;
    justify-content: center;
    padding-top: var(--space-6);
}

.auth-shell .card {
    width: 100%;
    max-width: 380px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .content {
        padding: var(--space-3);
    }

    /* Su schermi stretti la sidebar diventa una barra orizzontale in cima,
       con nav scrollabile: più utile di una colonna di 220px su mobile. */
    .shell {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        min-width: 0;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .sidebar-logo {
        padding: 0.6rem 1rem;
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 0.4rem;
    }

    .nav-section-label {
        display: none;
    }

    .sidebar-user {
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .card {
        padding: var(--space-4);
    }
}