/* ============================================================
   Ordini Fornitori — la card dell'articolo e il suo dettaglio
   ============================================================
   Foglio a se', fuori dal manifest sigillato dei sei core, come
   chat-module.css e riconciliazione-module.css. Classi tutte
   prefissate `of-`, zero !important, colori solo dai token.

   Nasce per togliere di mezzo settantasei utility di colore del
   CDN Tailwind — bg-white, text-slate-700, border-slate-100,
   text-blue-600 e parenti — che vestivano questa card. Sono
   valori chiari fissi: col tema scuro l'elenco degli articoli
   restava un'isola bianca dentro un modal scuro, il testo del
   dropdown di stato era slate-700 su fondo scuro (illeggibile) e
   passando il mouse su una riga `hover:bg-slate-50` la accendeva
   di bianco pieno invece della leggera evidenziatura che usa
   tutto il resto dell'app.

   Qui restano solo le classi che portano un colore. Geometria e
   spaziatura continuano ad arrivare dalle utility di layout, che
   non hanno niente a che vedere col tema.
   ============================================================ */

/* ── Riga articolo ── */
.of-item-card {
    border-bottom: 1px solid var(--panel-border);
}
.of-item-card:last-child { border-bottom: none; }

/* L'evidenziatura al passaggio e' la stessa di ogni altra superficie: un velo
   dell'inchiostro di pagina, non un fondo pieno. */
.of-item-card:hover {
    background: var(--surface-hover-soft);
}

.of-riga-cod {
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--panel-border);
    background: var(--panel-soft);
    color: var(--text-secondary);
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 0.65rem;
}

.of-riga-nome { color: var(--text-strong); }
.of-riga-occhiello { color: var(--text-tertiary); }

/* ── Blocco delle quantita' ── */
.of-conta {
    background: var(--panel-soft);
    border: 1px solid var(--panel-border);
}
.of-conta__et { color: var(--text-tertiary); }
.of-conta__n  { color: var(--text-strong); }

/* Lo stato dell'evasione e' un dato, non una decorazione: verde a
   completamento, ambra a meta' strada, spento quando non e' partita. */
.of-conta__n.is-completa { color: var(--success); }
.of-conta__n.is-parziale { color: var(--warning); }
.of-conta__n.is-zero     { color: var(--text-tertiary); }

/* ── Importo ── */
.of-riga-importo { color: var(--accent-strong); }

/* ── Dettaglio articolo (modale) ── */
.of-dett-testata,
.of-dett-piede { background: var(--panel-soft); }
.of-dett-testata { border-bottom: 1px solid var(--panel-border); }
.of-dett-piede   { border-top: 1px solid var(--panel-border); }

.of-dett-titolo     { color: var(--text-strong); }
.of-dett-icona      { color: var(--accent); }
.of-dett-et         { color: var(--text-tertiary); }
.of-dett-val        { color: var(--text-secondary); }
.of-dett-val--forte { color: var(--text-strong); }
.of-dett-riga       { border-top: 1px solid var(--panel-border); }

.of-dett-stato {
    background: var(--panel-soft);
    border: 1px solid var(--panel-border);
    color: var(--text-secondary);
}

.of-dett-cella {
    border: 1px solid var(--panel-border);
    background: var(--panel-soft);
}
.of-dett-cella__et { color: var(--text-tertiary); }
.of-dett-cella__n  { color: var(--text-strong); }

.of-dett-cella--evasa {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border-color: color-mix(in srgb, var(--success) 30%, transparent);
}
.of-dett-cella--evasa .of-dett-cella__et,
.of-dett-cella--evasa .of-dett-cella__n { color: var(--success); }

.of-dett-cella--attesa {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}
.of-dett-cella--attesa .of-dett-cella__et,
.of-dett-cella--attesa .of-dett-cella__n { color: var(--warning); }

.of-dett-cella--importo {
    background: var(--accent-wash);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.of-dett-cella--importo .of-dett-cella__et,
.of-dett-cella--importo .of-dett-cella__n { color: var(--accent-strong); }

.of-btn-piede {
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    color: var(--text-secondary);
}
.of-btn-piede:hover {
    background: var(--surface-hover-soft);
    color: var(--text-strong);
}