/* dashboard/css/62-listini.css — estratto da app.css (2026-07, split senza build). */
/* ============================================================
   Listini prezzi modal — claudedesign port (2026-05-14)
   Pattern: inline-editable, sub-header descrittivo, derived =€
   ============================================================ */
.gm-card-listini { max-width: 1180px; width: 100%; max-height: 92vh; padding: 0; }
.gm-card-listini .gm-head { padding: 24px 28px 4px; }
.gm-card-listini .listini-form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.gm-card-listini .listini-cd-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 28px 4px; }
.gm-card-listini .gm-actions { flex-shrink: 0; padding: 16px 28px 24px; border-top: 1px solid var(--line); display: flex; gap: 12px; justify-content: flex-end; align-items: center; }

/* ---------- Info banner ---------- */
.info-banner { display: grid; grid-template-columns: auto 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; padding: 14px 18px; margin-bottom: 18px; }
.info-banner-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; font-style: italic; flex-shrink: 0; }
.info-banner-title { font-size: 14px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.info-banner-text { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.info-banner-text strong { color: var(--ink); font-weight: 700; }
.info-banner-text em { font-style: italic; color: var(--ink-2); }

/* ---------- Section ---------- */
.tbl-section { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 18px; }
.tbl-section-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.tbl-section-headline { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.tbl-section-headline .eyebrow { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.tbl-section-count { font-size: 13px; color: var(--ink-3); }
.tbl-section-sub { margin: 0; color: var(--ink-2); font-size: 13px; max-width: 80ch; line-height: 1.55; }
.tbl-section-sub strong { color: var(--ink); font-weight: 700; }

/* ---------- Table base ---------- */
.tbl-section .tbl { display: block; width: 100%; }
.tbl-section .tbl-row { display: grid; align-items: stretch; }
.tbl-section .cell { display: flex; align-items: center; padding: 12px 16px; font-size: 13px; color: var(--ink); min-width: 0; }

/* Column header — eyebrow + sub */
.tbl-section .colhead { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.tbl-section .colhead-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--ink); font-weight: 800; }
.tbl-section .colhead-sub { font-size: 11px; color: var(--ink-3); letter-spacing: 0; text-transform: none; line-height: 1.3; }

/* Align headers right per money/pct cells (right-aligned con i valori sotto) */
.tbl-lav .tbl-row-h .cell:not(.cell-machine),
.tbl-dryer .tbl-row-h .cell:not(.cell-slot):not(.cell-min) { justify-content: flex-end; }
.tbl-lav .tbl-row-h .cell:not(.cell-machine) .colhead,
.tbl-dryer .tbl-row-h .cell:not(.cell-slot):not(.cell-min) .colhead { align-items: flex-end; text-align: right; }

/* ---------- LAVATRICI grid ---------- */
.tbl-lav .tbl-row { grid-template-columns: minmax(200px, 1.4fr) minmax(110px, 1fr) minmax(110px, 1fr) minmax(140px, 1.1fr) minmax(140px, 1.1fr); }
.tbl-lav .tbl-row-hgrp { background: var(--bg); }
.tbl-lav .tbl-row-hgrp .cell { padding-top: 10px; padding-bottom: 4px; font-size: 11px; color: var(--ink-2); }
.tbl-lav .tbl-row-hgrp .cell-grp .grp-tag { display: inline-flex; align-items: center; text-transform: uppercase; letter-spacing: 0.15em; font-size: 10px; color: var(--ink-3); font-weight: 700; }
.tbl-lav .tbl-row-hgrp .grp-card .grp-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-right: 6px; }
.tbl-lav .tbl-row-h { background: var(--bg); border-bottom: 1px solid var(--line); }
.tbl-lav .tbl-row-h .cell { padding-top: 4px; padding-bottom: 12px; align-items: flex-end; }
.tbl-lav .tbl-row-hgrp .grp-card,
.tbl-lav .tbl-row-h .cell:nth-child(3),
.tbl-lav .tbl-row-data .cell:nth-child(3) { border-left: 1px solid var(--line); }
.tbl-lav .tbl-row-data { border-bottom: 1px solid var(--line); }
.tbl-lav .tbl-row-data:last-child { border-bottom: 0; }
.tbl-lav .tbl-row-data:hover { background: color-mix(in oklab, var(--bg) 50%, var(--surface)); }

/* ---------- Machine cell ---------- */
.tbl-section .cell-machine { gap: 12px; }
.m-letter { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); font-weight: 700; font-size: 14px; color: var(--ink); flex-shrink: 0; }
.m-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.m-name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-code { font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; text-transform: uppercase; }

/* ---------- NumField (bordo visibile sempre, focus = brand ring) ----------
   Scope doppio: .tbl-section = bulk editor listini, .slot-prices-table =
   modal macchina tab Prezzi. STESSO componente nei due contesti (mai
   reintrodurre pct-wrap o input nudi per i campi money/%). */
.tbl-section .cell-money, .tbl-section .cell-pct { justify-content: flex-end; }
.tbl-section .numfield,
.slot-prices-table .numfield { display: inline-flex; align-items: center; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; height: 32px; transition: border-color 120ms ease, box-shadow 120ms ease; cursor: text; position: relative; }
.tbl-section .numfield:hover,
.slot-prices-table .numfield:hover { border-color: var(--ink-3); }
.tbl-section .numfield:focus-within,
.slot-prices-table .numfield:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent); }
.tbl-section .numfield input,
.slot-prices-table .numfield input { flex: 1; min-width: 0; width: 48px; max-width: none; border: 0; outline: 0; background: transparent; font-weight: 700; font-size: 16px; color: var(--ink); padding: 0; font-variant-numeric: tabular-nums; text-align: right; cursor: text; font-family: inherit; box-shadow: none; }
.tbl-section .numfield-suffix,
.slot-prices-table .numfield-suffix { color: var(--ink-3); font-size: 13px; font-weight: 700; flex-shrink: 0; }
.tbl-section .numfield-money input,
.slot-prices-table .numfield-money input { min-width: 44px; }
.tbl-section .numfield-pct input,
.slot-prices-table .numfield-pct input { min-width: 28px; }
.tbl-section .numfield-readonly { opacity: 0.6; }
.tbl-section .numfield-readonly input { cursor: not-allowed; }

/* IntField stepper */
.tbl-section .numfield-int { padding: 2px 4px; gap: 2px; background: var(--surface); border-color: var(--line); }
.tbl-section .numfield-int input { text-align: center; min-width: 28px; max-width: 40px; width: 40px; }
.tbl-section .numfield-step { width: 22px; height: 22px; border: 0; background: transparent; border-radius: 4px; color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease; flex-shrink: 0; padding: 0; }
.tbl-section .numfield-step:hover { background: var(--bg); color: var(--ink); }

/* Derived (read-only computed) */
.tbl-section .derived { display: inline-flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--ink); }
.tbl-section .derived.is-muted { color: var(--ink-3); font-weight: 600; }

/* % cell derived line */
.tbl-section .cell-pct { flex-direction: column; align-items: flex-end; gap: 2px; }
.tbl-section .pct-derived { font-size: 11px; color: var(--ink-3); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- ASCIUGATRICI ---------- */
/* min-width:0: .dryer-block è grid item di .dryer-stack; senza questo il
   min-width:auto di default impedirebbe al blocco di restringersi sotto i 760px
   del contenuto (min-width head/body) → la .tbl-dryer non scrollerebbe e
   sforerebbe la viewport su mobile. Le lavatrici non hanno il problema: la
   .tbl-lav è figlia diretta di un .tbl-section block. */
.dryer-stack { display: grid; gap: 0; min-width: 0; }
.dryer-block { border-bottom: 1px solid var(--line); min-width: 0; }
.dryer-block:last-child { border-bottom: 0; }
.dryer-bar { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.dryer-id { display: flex; align-items: center; gap: 12px; }
.dryer-id .m-letter { background: var(--surface); }
.dryer-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ctrl { display: inline-flex; align-items: center; gap: 8px; }
.ctrl-label { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; color: var(--ink-3); font-weight: 800; white-space: nowrap; }
.ctrl-label .desiderata-badge { letter-spacing: 0.08em; padding: 2px 6px; }

/* Segmented control Auto/Manuale */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 2px; gap: 2px; height: 30px; }
.seg-opt { border: 0; background: transparent; font-weight: 700; font-size: 12px; color: var(--ink-2); padding: 0 12px; border-radius: 4px; cursor: pointer; transition: background 120ms ease, color 120ms ease; font-family: inherit; }
.seg-opt:hover { color: var(--ink); }
.seg-opt:active { transform: scale(0.96); }
.seg-opt.is-on { background: var(--ink); color: var(--surface); }

/* Dryer slot table */
.tbl-dryer .tbl-row { grid-template-columns: 70px 90px minmax(110px, 1fr) minmax(110px, 1fr) minmax(140px, 1.1fr) minmax(140px, 1.1fr); }
.tbl-dryer .tbl-row-h { background: var(--surface); border-bottom: 1px solid var(--line); }
.tbl-dryer .tbl-row-h .cell { padding-top: 12px; padding-bottom: 12px; align-items: flex-end; }
.tbl-dryer .tbl-row-data { border-bottom: 1px solid var(--line); }
.tbl-dryer .tbl-row-data:last-child { border-bottom: 0; }
.tbl-dryer .tbl-row-data:hover { background: color-mix(in oklab, var(--bg) 40%, var(--surface)); }
.tbl-dryer .cell-slot, .tbl-dryer .cell-min { padding-left: 16px; }

/* Slot pill */
.slot-n { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.tbl-dryer .tbl-row-data.is-base .slot-n { background: var(--brand); color: #fff; border-color: var(--brand); }
.slot-min { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.slot-min-u { font-size: 11px; color: var(--ink-3); margin-left: 3px; font-weight: 600; }

/* Hint sotto dryer slots */
.dryer-hint { margin: 0; padding: 10px 16px; font-size: 12px; color: var(--ink-3); background: color-mix(in oklab, var(--bg) 60%, var(--surface)); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.dryer-hint strong { color: var(--ink); font-weight: 700; }
.dryer-hint .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }

/* Footer caption */
.listini-foot { padding: 8px 0 0; }
.listini-foot .t-caption { margin: 0; font-size: 12px; color: var(--ink-3); }
.listini-foot strong { color: var(--ink); }
.listini-foot em { font-style: italic; color: var(--ink-2); }

/* ---------- Responsive listini: scroll orizzontale, no stacking ---------- */
.tbl-section .tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Min-width sulle sub-container (head/body) forza la grid a 760px; con .tbl overflow-x:auto, attiva lo scroll orizzontale. */
.tbl-lav .tbl-head,
.tbl-lav .tbl-body,
.tbl-dryer .tbl-head,
.tbl-dryer .tbl-body { min-width: 760px; }

@media (max-width: 960px) {
  .gm-card-listini .listini-cd-wrap,
  .gm-card-listini .gm-head,
  .gm-card-listini .gm-actions { padding-left: 14px; padding-right: 14px; }
  .dryer-bar { grid-template-columns: 1fr; gap: 10px; }
  .dryer-controls { gap: 12px; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .dryer-controls { gap: 8px; }
  .ctrl { gap: 6px; }
  .seg-opt { padding: 0 10px; font-size: 11px; }
}