/* ==========================================================================
   THEME INK — "Inchiostro + un colore" (proposta C, approvata 2026-07-24)
   ==========================================================================
   Tema AGGIUNTIVO e commutabile: si attiva con body[data-style="ink"]
   (segnalibro ?tema=ink, vedi applyUiStyleFromUrl in modules/ui.js).
   paper-factory resta il default: questi selettori sono inerti altrove.

   Grammatica:
   - bianco e inchiostro (#101410); righe nette 1.5-2px; radius 0
   - UN SOLO COLORE: il verde dell'azione primaria (--ink-green #0E7B41,
     contrasto 5.35:1 su bianco = WCAG AA testo normale; NON scurirlo di
     meno né usarlo per altro — il test theme-ink-tokens lo verifica)
   - stati SCRITTI, non colorati: l'anomalia (pausa) e' inversione nero pieno
   - mono per codici e misure, numeri tabellari
   - bersagli: primari >=64px, secondari >=48px (guanti)
   - il distruttivo NON e' rosso: e' nero pieno + verbo esplicito
   - v1 FORZA data-theme=light (la variante "Notte" arrivera' come ink+dark)

   Copertura v1: header, ricerca, KPI, dashboard workcenter, card lavori,
   tab, modali comuni, modale pesata, lock PIN, toast. Editor schede/BOM,
   foto e scanner ereditano style.css (gia' neutro): debito documentato.
   ========================================================================== */

body[data-style="ink"] {
    --ink: #101410;
    --ink-2: #42463F;
    --ink-muted: #6C7069;
    --ink-line: #D8D8D2;
    --ink-line-strong: #101410;
    --ink-soft: #F1F1EE;
    --ink-bg: #FFFFFF;
    --ink-green: #0E7B41;
    --ink-green-ink: #FFFFFF;
    --ink-mono: ui-monospace, "SF Mono", "Ubuntu Mono", Menlo, Consolas, monospace;

    background: var(--ink-bg);
    color: var(--ink);
}

/* ------------------------------ HEADER ---------------------------------- */
body[data-style="ink"] .header {
    background: var(--ink-bg);
    color: var(--ink);
    border-bottom: 2px solid var(--ink-line-strong);
    box-shadow: none;
}

body[data-style="ink"] .header h1,
body[data-style="ink"] .header-title {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -0.02em;
}

body[data-style="ink"] .header-btn {
    min-width: 48px;
    min-height: 48px;
    background: var(--ink-bg);
    color: var(--ink);
    border: 2px solid var(--ink-line-strong);
    border-radius: 0;
    box-shadow: none;
}

body[data-style="ink"] .header-btn:hover {
    background: var(--ink-soft);
}

body[data-style="ink"] .header-logo {
    /* il logo resta: e' identita', non decorazione */
    filter: grayscale(1) contrast(1.1);
}

/* Badge postazione: nero pieno, pallino verde (unico colore ammesso) */
body[data-style="ink"] .station-badge {
    background: var(--ink-line-strong);
    color: #FFF;
    border-radius: 0;
    font-weight: 650;
}

body[data-style="ink"] .station-badge.station-badge-colored {
    /* il colore-reparto diventa il solo pallino: il fusto resta nero */
    background: var(--ink-line-strong);
}

body[data-style="ink"] .station-badge.station-badge-colored::before {
    background: var(--station-color, var(--ink-green));
}

body[data-style="ink"] .station-badge.station-badge-warning {
    background: var(--ink-bg);
    color: var(--ink);
    border: 2px dashed var(--ink-line-strong);
}

/* ------------------------------ RICERCA --------------------------------- */
body[data-style="ink"] .search-bar {
    background: var(--ink-bg);
    border-bottom: 1.5px solid var(--ink-line);
    box-shadow: none;
}

body[data-style="ink"] .search-bar input,
body[data-style="ink"] #searchInput {
    border: 2px solid var(--ink-line-strong);
    border-radius: 0;
    background: var(--ink-bg);
    color: var(--ink);
    font-size: 16.5px;
    min-height: 52px;
}

body[data-style="ink"] .search-bar button,
body[data-style="ink"] .scanner-btn {
    border: 2px solid var(--ink-line-strong);
    border-radius: 0;
    background: var(--ink-soft);
    color: var(--ink);
    min-width: 52px;
    min-height: 52px;
    box-shadow: none;
}

/* ------------------------------ KPI STRIP ------------------------------- */
body[data-style="ink"] .kpi-strip {
    background: var(--ink-bg);
    border: none;
    gap: 10px;
}

body[data-style="ink"] .kpi-item {
    background: var(--ink-soft);
    border: none;
    border-radius: 0;
    color: var(--ink-2);
    box-shadow: none;
}

body[data-style="ink"] .kpi-value {
    font-family: var(--ink-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    font-weight: 750;
}

body[data-style="ink"] .kpi-label {
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}

/* la pausa e' l'anomalia: inversione, non colore */
body[data-style="ink"] .kpi-item.kpi-paused {
    background: var(--ink-line-strong);
}

body[data-style="ink"] .kpi-item.kpi-paused .kpi-value,
body[data-style="ink"] .kpi-item.kpi-paused .kpi-label {
    color: #FFF;
}

/* ------------------------- DASHBOARD WORKCENTER -------------------------- */
body[data-style="ink"] .workcenter-card {
    background: var(--ink-bg);
    border: 1.5px solid var(--ink-line);
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
}

/* niente sfondi colorati per operazione: la fase e' una scritta */
body[data-style="ink"] .workcenter-card.op-estrusione,
body[data-style="ink"] .workcenter-card.op-saldatura,
body[data-style="ink"] .workcenter-card.op-stampa {
    background: var(--ink-bg);
    border-color: var(--ink-line);
}

body[data-style="ink"] .workcenter-card.has-active {
    border: 2px solid var(--ink-line-strong);
}

body[data-style="ink"] .workcenter-card .card-name {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -0.015em;
}

body[data-style="ink"] .workcenter-card .card-counts,
body[data-style="ink"] .wc-active-info {
    color: var(--ink-2);
}

body[data-style="ink"] .wc-active-info b,
body[data-style="ink"] .wc-active-info strong {
    color: var(--ink);
}

/* --------------------------- TAB ATTIVI/PRONTI --------------------------- */
body[data-style="ink"] .tabs {
    border-bottom: 2px solid var(--ink-line-strong);
    background: var(--ink-bg);
    gap: 0;
}

body[data-style="ink"] .tab {
    background: var(--ink-bg);
    color: var(--ink-2);
    border: none;
    border-radius: 0;
    font-weight: 650;
    min-height: 52px;
}

body[data-style="ink"] .tab.active {
    background: var(--ink-line-strong);
    color: #FFF;
}

body[data-style="ink"] .tab-count {
    font-family: var(--ink-mono);
    background: var(--ink-soft);
    color: var(--ink);
    border-radius: 0;
    font-variant-numeric: tabular-nums;
}

body[data-style="ink"] .tab.active .tab-count {
    background: #FFF;
    color: var(--ink);
}

/* ----------------------------- CARD LAVORI ------------------------------- */
/* La card diventa una RIGA a tutta larghezza (grammatica del mockup C):
   cliente protagonista | numeri a destra in mono | pulsante col VERBO.
   Griglia kanban -> colonna singola. */
body[data-style="ink"] .kanban-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body[data-style="ink"] .workorder-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 20px;
    row-gap: 4px;
    padding: 16px 18px;
    background: var(--ink-bg);
    border: 1.5px solid var(--ink-line);
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
    cursor: pointer;
}

body[data-style="ink"] .workorder-card.active {
    border: 2px solid var(--ink-line-strong);
}

/* PAUSA = riga interamente INVERTITA: l'anomalia si vede da lontano */
body[data-style="ink"] .workorder-card.paused {
    background: var(--ink-line-strong);
    border-color: var(--ink-line-strong);
    color: #FFF;
}

body[data-style="ink"] .workorder-card.other-workcenter,
body[data-style="ink"] .workorder-card.incompatible {
    /* longhand espliciti: shorthand background+var() nello stesso blocco di
       un altro background-* manda i longhand in pending-substitution vuota
       (Chromium) — MAI mescolarli */
    background-color: var(--ink-bg);
    background-image: none;
    opacity: 0.55;
}

/* niente emoji: la gerarchia la fa la tipografia */
body[data-style="ink"] .card-glyph {
    display: none;
}

/* blocco info: cliente sopra (via order), poi id mono, prodotto, centro */
body[data-style="ink"] .workorder-card .card-header {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0 !important; /* annulla l'inline style del template (badge) */
    min-width: 0;
}

body[data-style="ink"] .workorder-card .card-client,
body[data-style="ink"] .workorder-card .card-ref {
    order: -1;
    color: inherit;
    font-weight: 750;
    font-size: 1.12rem;
    letter-spacing: -0.01em;
}

body[data-style="ink"] .workorder-card .card-name {
    font-family: var(--ink-mono);
    font-size: 0.86rem;
    font-weight: 700;
    color: inherit;
    opacity: 0.85;
}

body[data-style="ink"] .workorder-card .card-product {
    font-family: var(--ink-mono);
    font-size: 0.85rem;
    color: inherit;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-style="ink"] .workorder-card .card-workcenter {
    font-size: 0.8rem;
    color: inherit;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body[data-style="ink"] .workorder-card .card-workcenter.different {
    opacity: 0.85;
    font-weight: 700;
}

body[data-style="ink"] .workorder-card .card-workcenter.different::after {
    content: " — ALTRO CENTRO";
}

/* colonna numeri: destra, mono, tabellare */
body[data-style="ink"] .card-details {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: inherit;
    font-family: var(--ink-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body[data-style="ink"] .card-details .card-qty {
    font-weight: 750;
    font-size: 1.05rem;
}

body[data-style="ink"] .card-details .card-time {
    font-size: 0.85rem;
    opacity: 0.75;
}

body[data-style="ink"] .workorder-card .card-timer {
    font-family: var(--ink-mono);
    color: inherit;
    font-weight: 750;
}

/* stato: sotto i numeri, mono maiuscolo essenziale */
body[data-style="ink"] .workorder-card .card-state {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    margin-top: 2px;
    padding: 3px 10px;
    border: 1.5px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: 0;
    font-family: var(--ink-mono);
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

body[data-style="ink"] .card-state.progress,
body[data-style="ink"] .card-state.ready,
body[data-style="ink"] .card-state.paused {
    background: transparent;
    color: inherit;
}

/* badge ridondanti in ink: l'operazione e' gia' nel nome, la pausa nella riga */
body[data-style="ink"] .operation-badge,
body[data-style="ink"] .pause-badge {
    display: none;
}

body[data-style="ink"] .partial-badge {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    position: static;
    background: var(--ink-bg);
    border: 1.5px solid var(--ink-line-strong);
    color: var(--ink);
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    padding: 3px 9px;
}

body[data-style="ink"] .workorder-card.paused .partial-badge {
    background: transparent;
    border-color: #FFF;
    color: #FFF;
}

/* colonna azioni: 🏷 outline + VERBO. La ⚖️ sparisce: "Pesa" fa lo stesso */
body[data-style="ink"] .card-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* la sola ⚖️ sparisce (il verbo "Pesa" fa lo stesso gesto): la 🏷️ e il
   📄 cartello A4 restano, non hanno equivalente fra i verbi */
body[data-style="ink"] .card-actions .card-weight-shortcut:not(.card-ident-shortcut):not(.card-shelf-shortcut) {
    display: none;
}

body[data-style="ink"] .card-ident-shortcut,
body[data-style="ink"] .card-ident-shortcut.solo,
body[data-style="ink"] .card-shelf-shortcut,
body[data-style="ink"] .card-shelf-shortcut.solo {
    position: static;
    right: auto;
    bottom: auto;
    min-width: 56px;
    min-height: 56px;
    background: var(--ink-bg);
    color: var(--ink-2);
    border: 2px solid var(--ink-line);
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0;
}

body[data-style="ink"] .card-ident-shortcut:hover,
body[data-style="ink"] .card-shelf-shortcut:hover {
    background: var(--ink-soft);
    border-color: var(--ink-line-strong);
    color: var(--ink);
}

body[data-style="ink"] .workorder-card.paused .card-ident-shortcut,
body[data-style="ink"] .workorder-card.paused .card-shelf-shortcut {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: #FFF;
}

body[data-style="ink"] .card-verb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    min-width: 128px;
    padding: 0 24px;
    font-size: 1.05rem;
    font-weight: 750;
    font-family: inherit;
    border: 2.5px solid var(--ink-line-strong);
    background: var(--ink-bg);
    color: var(--ink);
    border-radius: 0;
    cursor: pointer;
}

body[data-style="ink"] .card-verb-btn:hover {
    background: var(--ink-soft);
}

body[data-style="ink"] .card-verb-btn:active {
    transform: scale(0.97);
}

body[data-style="ink"] .card-verb-btn.verb-primary {
    background: var(--ink-green);
    border: none;
    color: var(--ink-green-ink);
}

body[data-style="ink"] .card-verb-btn.verb-primary:hover {
    background: #0A6234;
}

body[data-style="ink"] .workorder-card.paused .card-verb-btn {
    background: transparent;
    border-color: #FFF;
    color: #FFF;
}

/* ------------------------------- MODALI ---------------------------------- */
body[data-style="ink"] .modal-overlay {
    background: rgba(16, 20, 16, 0.55);
}

body[data-style="ink"] .modal {
    background: var(--ink-bg);
    border: 2px solid var(--ink-line-strong);
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
}

body[data-style="ink"] .modal-header {
    border-bottom: 2px solid var(--ink-line-strong);
    background: var(--ink-bg);
}

body[data-style="ink"] .modal-title {
    color: var(--ink);
    font-weight: 750;
    letter-spacing: -0.01em;
}

body[data-style="ink"] .modal-close {
    border: 2px solid var(--ink-line-strong);
    background: var(--ink-bg);
    color: var(--ink);
    border-radius: 0;
    min-width: 48px;
    min-height: 48px;
}

body[data-style="ink"] .modal-actions {
    border-top: 1.5px solid var(--ink-line);
}

/* pulsanti: UNA gerarchia — verde (primario), outline (secondario),
   NERO pieno (distruttivo: il rosso non esiste in ink) */
body[data-style="ink"] .btn {
    border-radius: 0;
    font-weight: 750;
    min-height: 56px;
    box-shadow: none;
}

body[data-style="ink"] .btn-success {
    background: var(--ink-green);
    color: var(--ink-green-ink);
    border: none;
}

body[data-style="ink"] .btn-success:hover {
    background: #0A6234;
}

body[data-style="ink"] .btn-success:disabled {
    background: var(--ink-soft);
    color: var(--ink-muted);
}

body[data-style="ink"] .btn-secondary {
    background: var(--ink-bg);
    color: var(--ink);
    border: 2.5px solid var(--ink-line-strong);
}

body[data-style="ink"] .btn-secondary:hover {
    background: var(--ink-soft);
}

body[data-style="ink"] .btn-danger {
    background: var(--ink-line-strong);
    color: #FFF;
    border: none;
}

body[data-style="ink"] .btn-danger:hover {
    background: #000;
}

body[data-style="ink"] .btn-primary,
body[data-style="ink"] .btn-warning {
    background: var(--ink-bg);
    color: var(--ink);
    border: 2.5px solid var(--ink-line-strong);
}

/* modale copie stampa + etichette identificazione */
body[data-style="ink"] .print-copies-buttons .btn-copy {
    border: 2px solid var(--ink-line-strong);
    background: var(--ink-bg);
    color: var(--ink);
    border-radius: 0;
    min-width: 64px;
    min-height: 64px;
    font-family: var(--ink-mono);
    font-weight: 750;
}

body[data-style="ink"] .print-copies-buttons .btn-copy:hover {
    background: var(--ink-line-strong);
    color: #FFF;
}

body[data-style="ink"] .print-custom-input input,
body[data-style="ink"] #identLabelCopies {
    border: 2px solid var(--ink-line-strong);
    border-radius: 0;
    font-family: var(--ink-mono);
    font-size: 1.3rem;
    font-weight: 700;
    min-height: 60px;
    color: var(--ink);
    background: var(--ink-bg);
}

body[data-style="ink"] .print-label-info {
    color: var(--ink-2);
}

body[data-style="ink"] .print-iot-spinner {
    border-color: var(--ink-line);
    border-top-color: var(--ink-green);
}

/* pallino colore nel modale cambio postazione */
body[data-style="ink"] .station-switch-color {
    border: 1.5px solid var(--ink-line-strong);
}

/* --------------------------- MODALE PESATA ------------------------------- */
body[data-style="ink"] #weightModalOverlay .modal,
body[data-style="ink"] .weight-modal {
    border: 2px solid var(--ink-line-strong);
}

body[data-style="ink"] #weightInput {
    border: 2px solid var(--ink-line-strong);
    border-radius: 0;
    font-family: var(--ink-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    font-weight: 750;
    min-height: 64px;
    color: var(--ink);
    background: var(--ink-bg);
}

/* stato bilancia: il verde segnala "peso stabile, pronto" (e' azione) */
body[data-style="ink"] .scale-status {
    font-family: var(--ink-mono);
    font-weight: 700;
}

body[data-style="ink"] .scale-status.connected,
body[data-style="ink"] .scale-status.stable {
    color: var(--ink-green);
}

body[data-style="ink"] .scale-status.unstable,
body[data-style="ink"] .scale-status.disconnected {
    color: var(--ink-muted);
}

/* progress: nero su binario chiaro, numeri mono */
body[data-style="ink"] #weightProgress,
body[data-style="ink"] .weight-progress {
    color: var(--ink-2);
}

body[data-style="ink"] .weight-progress-bar,
body[data-style="ink"] #weightProgressBar {
    background: var(--ink-line-strong);
    border-radius: 0;
}

body[data-style="ink"] #weightProgressValue,
body[data-style="ink"] #weightProgressRemaining {
    font-family: var(--ink-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* pill tara / supporto: bianco-nero, attiva invertita */
body[data-style="ink"] .tare-pill {
    border: 2px solid var(--ink-line-strong);
    background: var(--ink-bg);
    color: var(--ink);
    border-radius: 0;
    min-height: 48px;
    font-weight: 650;
    box-shadow: none;
}

body[data-style="ink"] .tare-pill.tare-pill-active {
    background: var(--ink-line-strong);
    color: #FFF;
}

/* lista pesate: righe sottili, kg protagonisti */
body[data-style="ink"] .weight-list {
    border-top: 2px solid var(--ink-line-strong);
}

body[data-style="ink"] .weight-item {
    background: var(--ink-bg);
    border: none;
    border-bottom: 1px solid var(--ink-line);
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
}

body[data-style="ink"] .weight-item .weight-value,
body[data-style="ink"] .weight-item b {
    font-family: var(--ink-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}

body[data-style="ink"] .weight-item.weight-pending {
    opacity: 0.6;
}

body[data-style="ink"] .weight-item.weight-queued {
    border-left: 6px solid var(--ink-line-strong);
}

body[data-style="ink"] .weight-item.weight-rejected {
    border: 2px solid var(--ink-line-strong);
    background: var(--ink-soft);
}

body[data-style="ink"] .weight-action-btn {
    border: 2px solid var(--ink-line);
    background: var(--ink-bg);
    color: var(--ink-2);
    border-radius: 0;
    min-width: 46px;
    min-height: 46px;
    box-shadow: none;
}

body[data-style="ink"] .weight-action-btn:hover {
    border-color: var(--ink-line-strong);
    color: var(--ink);
    background: var(--ink-soft);
}

/* note bancale */
body[data-style="ink"] #packNoteToggle {
    border: 2px solid var(--ink-line);
    background: var(--ink-bg);
    color: var(--ink-2);
    border-radius: 0;
}

body[data-style="ink"] #packNoteEditor {
    border: 2px solid var(--ink-line-strong);
    border-radius: 0;
    background: var(--ink-bg);
    color: var(--ink);
}

/* ------------------------------ LOCK PIN --------------------------------- */
body[data-style="ink"] .operator-lock-overlay {
    background: var(--ink-bg);
}

body[data-style="ink"] .operator-lock-box {
    background: var(--ink-bg);
    border: 2px solid var(--ink-line-strong);
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
}

body[data-style="ink"] .operator-lock-logo {
    filter: grayscale(1) contrast(1.1);
}

body[data-style="ink"] .pin-key,
body[data-style="ink"] .operator-lock-box button {
    border: 2px solid var(--ink-line-strong);
    background: var(--ink-bg);
    color: var(--ink);
    border-radius: 0;
    min-width: 64px;
    min-height: 64px;
    font-family: var(--ink-mono);
    font-weight: 750;
    box-shadow: none;
}

body[data-style="ink"] .pin-key:active {
    background: var(--ink-line-strong);
    color: #FFF;
}

body[data-style="ink"] .pin-dot {
    border: 2px solid var(--ink-line-strong);
    background: var(--ink-bg);
    border-radius: 50%;
}

body[data-style="ink"] .pin-dot.filled {
    background: var(--ink-line-strong);
}

body[data-style="ink"] .operator-pin-error {
    color: var(--ink);
    font-weight: 750;
}

/* ------------------------------- TOAST ----------------------------------- */
body[data-style="ink"] .toast {
    background: var(--ink-line-strong);
    color: #FFF;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-weight: 650;
}

body[data-style="ink"] .toast.success {
    border-left: 6px solid var(--ink-green);
}

body[data-style="ink"] .toast.error {
    border-left: 6px solid #FFF;
    font-weight: 750;
}

body[data-style="ink"] .toast-dismiss {
    background: transparent;
    color: #FFF;
    border: 1.5px solid #FFF;
    border-radius: 0;
}

/* --------------------------- VARIE / RIFINITURE -------------------------- */
body[data-style="ink"] .empty-state {
    color: var(--ink-muted);
}

body[data-style="ink"] .last-refresh,
body[data-style="ink"] .section-title {
    color: var(--ink-muted);
    font-family: var(--ink-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

body[data-style="ink"] ::selection {
    background: var(--ink-line-strong);
    color: #FFF;
}

/* Riga stretta (tablet portrait / finestre piccole): la griglia a 3 colonne
   si impila — info sopra, numeri sotto a sinistra, azioni in fondo a tutta
   larghezza. Evita il collasso della colonna info. */
@media (max-width: 760px) {
    body[data-style="ink"] .workorder-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    body[data-style="ink"] .workorder-card .card-header {
        grid-column: 1;
        grid-row: auto;
    }

    body[data-style="ink"] .card-details,
    body[data-style="ink"] .workorder-card .card-state {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        align-items: flex-start;
    }

    body[data-style="ink"] .partial-badge {
        grid-row: auto;
    }

    body[data-style="ink"] .card-actions {
        grid-column: 1;
        grid-row: auto;
        justify-content: stretch;
    }

    body[data-style="ink"] .card-verb-btn {
        flex: 1;
    }
}

/* --- Neutralizzazioni del tema base (giro 2 del ciclo iterativo) --- */
/* strisce diagonali e bordo rosso delle card incompatibili: via */
body[data-style="ink"] .workorder-card.other-workcenter,
body[data-style="ink"] .workorder-card.incompatible {
    background-image: none !important;
    border-left-color: var(--ink-line) !important;
}

/* la pausa base attenua e desatura: in ink la riga invertita dev'essere PIENA */
body[data-style="ink"] .workorder-card.paused {
    opacity: 1;
    filter: none;
}

/* la riga workcenter perde la pillola colorata del tema base */
body[data-style="ink"] .workorder-card .card-workcenter,
body[data-style="ink"] .card-workcenter.same,
body[data-style="ink"] .card-workcenter.different {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

body[data-style="ink"] .workorder-card.paused .card-workcenter {
    background: transparent;
    color: inherit;
}

/* contatori dashboard workcenter: mono neutro, niente pillole verdi */
body[data-style="ink"] .workcenter-card .count-badge {
    background: var(--ink-soft) !important;
    color: var(--ink-2) !important;
    border-radius: 0;
    font-family: var(--ink-mono);
    font-variant-numeric: tabular-nums;
}

/* le emoji superstiti (🏷️ e contatori dashboard) diventano monocrome */
body[data-style="ink"] .card-ident-shortcut,
body[data-style="ink"] .card-shelf-shortcut,
body[data-style="ink"] .workcenter-card .count-badge {
    filter: grayscale(1);
}

/* combo pausa+altro centro: l'ANOMALIA vince sempre — inversione piena,
   niente attenuazione ne' strisce */
body[data-style="ink"] .workorder-card.paused.other-workcenter,
body[data-style="ink"] .workorder-card.paused.incompatible {
    opacity: 1;
    filter: none;
    /* !important necessario: il tema base dichiara le strisce di
       .incompatible con background shorthand !important + var() dentro,
       che Chromium espande a TUTTI i longhand important (incluso un
       background-color vuoto->trasparente). Qui si vince per specificita'
       (0,4,1) + important. */
    background-color: var(--ink-line-strong) !important;
    background-image: none !important;
    color: #FFF;
}

/* === Tab Finiti (sola stampa): archivio recente, tono spento ============ */
body[data-style="ink"] .workorder-card.finished {
    /* longhand espliciti (MAI shorthand background+var con altri
       background-*: pending-substitution Chromium) */
    background-color: var(--ink-bg);
    background-image: none;
    opacity: 0.6;
    border-style: dashed;
}

body[data-style="ink"] .workorder-card.finished .card-state.finished {
    background: transparent;
    color: var(--ink-muted, #555);
    border: 1px solid currentColor;
}

/* Il verbo della card finita è "Stampa": secondario, mai verde pieno */
body[data-style="ink"] .workorder-card.finished .card-verb-btn {
    background: transparent;
    color: var(--ink-line-strong);
    border: 2px solid var(--ink-line-strong);
}