/* dashboard/css/48-utilities.css — estratto da app.css (2026-07, split senza build). */
/* =========================================================
   Utility classes (dashboard) — sostituiscono inline style
   Prefisso .u- per chiarezza; usati nei template Django
   ========================================================= */

/* Display */
.u-hidden { display: none; }
.az-step--off { display: none; }
.u-block { display: block; }
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-grid { display: grid; }

/* Flex */
.u-flex-col { flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }
.u-flex-1 { flex: 1; }
.u-flex-2 { flex: 2; }
.u-flex-0-90 { flex: 0 0 90px; }
.u-flex-0-100 { flex: 0 0 100px; }
.u-flex-0-140 { flex: 0 0 140px; }
.u-flex-0-180 { flex: 0 0 180px; }
.u-flex-0-220 { flex: 0 0 220px; }
.u-flex-min-140 { flex: 1; min-width: 140px; }
.u-flex-min-140-danger { flex: 1; min-width: 140px; color: var(--danger); border-color: var(--danger); }

/* Alignment */
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-items-end { align-items: flex-end; }
.u-justify-between { justify-content: space-between; }
.u-justify-center { justify-content: center; }
.u-text-center { text-align: center; }

/* Gap */
.u-gap-4 { gap: 4px; }
.u-gap-6 { gap: 6px; }
.u-gap-8 { gap: 8px; }
.u-gap-10 { gap: 10px; }
.u-gap-12 { gap: 12px; }

/* Width */
.u-w-full { width: 100%; }
.u-w-50 { width: 50%; }
.u-w-icon-12 { width: 12px; height: 12px; color: var(--brand); }

/* Max-width */
.u-mw-140 { max-width: 140px; }
.u-mw-160 { max-width: 160px; }
.u-mw-200 { max-width: 200px; }
.u-mw-260 { max-width: 260px; }
.u-mw-280 { max-width: 280px; }
.u-mw-320 { max-width: 320px; }
.u-mw-420 { max-width: 420px; }
.u-mw-520 { max-width: 520px; }
.u-mw-540 { max-width: 540px; }
.u-mw-560 { max-width: 560px; }
.u-mw-580 { max-width: 580px; }
.u-mw-600 { max-width: 600px; }
.u-mw-640 { max-width: 640px; }

/* Margin */
.u-m-0 { margin: 0; }
.u-mt-8 { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-18 { margin-top: 18px; }
.u-mb-6 { margin-bottom: 6px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-18 { margin-bottom: 18px; }
.u-mr-6 { margin-right: 6px; }
.u-ml-auto { margin-left: auto; }
.u-ml-6 { margin-left: 6px; }
.u-pl-16 { padding-left: 16px; }

/* Valore in arrivo da un warm in background (pane Cassa/AdE): pulse di
   opacità stile Domotica (dom-sync-pulse) — comunica "sto lavorando",
   non uno stato statico. */
@keyframes val-sync-pulse { 0%, 100% { opacity: .3; } 50% { opacity: .7; } }
.val-updating { animation: val-sync-pulse 1.2s ease-in-out infinite; }
.u-mx-18-mt-10 { margin: 10px 18px 0; }
.u-mx-18-mt-12 { margin: 12px 18px 0; }
.u-mx-18-mt-14 { margin: 14px 18px 0; }
.u-px-page { padding-left: var(--page-pad-x); padding-right: var(--page-pad-x); }
.u-mx-18-mt-24 { margin: 24px 18px; color: var(--ink-3); font-size: 14px; }
.u-mx-18-mt-24-plain { margin: 24px 18px; }
.u-m-0-0-14 { margin: 0 0 14px; }
.u-m-0-0-16 { margin: 0 0 16px; }
.u-m-0-0-18 { margin: 0 0 18px; }
.u-m-18-0-8 { margin: 18px 0 8px; }

/* Padding */
.u-p-0 { padding: 0; }
.u-pt-8 { padding-top: 8px; }
.u-pb-14 { padding-bottom: 14px; color: var(--ink-3); }
.u-p-8-14 { padding: 8px 14px; }
.u-p-4-10 { padding: 4px 10px; font-size: 13px; }

/* Position */
.u-pos-absolute { position: absolute; }
.u-left-14 { left: 14px; }

/* Z-index */
.u-z-40 { z-index: 40; }
.u-z-40-hidden { z-index: 40; display: none; }
.u-z-60-hidden { z-index: 60; display: none; }

/* Cursor */
.u-cursor-pointer { cursor: pointer; }

/* Background */
.u-bg-soft { background: var(--bg); }
.u-bg-soft-radius { background: var(--bg); border-radius: 10px; padding: 10px; }
.u-bg-soft-pad { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); }
.u-bg-soft-pad-mb { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 8px; }
.u-bg-soft-pad-mb-14 { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 14px; cursor: pointer; }
.u-bg-soft-mono { background: var(--bg); font-family: ui-monospace, monospace; }
.u-bg-soft-ink-3 { background: var(--bg); color: var(--ink-3); }
.u-bg-soft-ink-3-12 { background: var(--bg); color: var(--ink-3); font-size: 12px; }
.u-bg-brand-warn { background: #FFF3E0; color: var(--warn); }
.u-bg-brand-danger { background: #FCE4E4; color: var(--danger); }
.u-bg-brand-soft-pink { background: #FDE7EA; color: var(--brand); }
.u-bg-brand-card { background: var(--brand-soft); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.u-bg-soft-card { background: var(--bg); border-radius: 12px; padding: 14px; margin-bottom: 14px; }

/* Color */
.u-c-ink { color: var(--ink); }
.u-c-ink-3 { color: var(--ink-3); }
.u-c-ink-3-ml-6 { color: var(--ink-3); margin-left: 6px; }
.u-c-brand { color: var(--brand); }
.u-c-ok { color: var(--ok); }
.u-c-warn { color: var(--warn); }
.u-c-danger { color: var(--danger); }

/* Typography */
.u-fs-10 { font-size: 10px; }
.u-fs-11 { font-size: 11px; }
.u-fs-12 { font-size: 12px; }
.u-fs-13 { font-size: 13px; }
.u-fs-14 { font-size: 14px; }
.u-fs-16 { font-size: 16px; }
.u-fs-18-b { font-size: 18px; font-weight: 800; }
.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }
.u-mono { font-family: ui-monospace, monospace; letter-spacing: 0.08em; }
.u-mono-b { font-family: ui-monospace, monospace; font-size: 16px; font-weight: 700; }
/* color: inherit -> il link "Gestisci" eredita il rosso di .u-note-danger invece
   di cadere sul blu <a> di default del browser. Resta riconoscibile come link
   per bold + underline. */
.u-underline-b { font-weight: 700; text-decoration: underline; color: inherit; }

/* Section heading (label/eyebrow) */
.u-eyebrow { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.u-eyebrow-600 { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; }
.u-eyebrow-mb-6 { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.u-eyebrow-block { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 8px; }
.u-section-title { font-size: 13px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.u-card-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.u-card-title-ink { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.u-card-title-flat { font-size: 14px; font-weight: 700; }

/* Opacity */
.u-opacity-55 { opacity: 0.55; }

/* SVG / icon vertical alignment helpers */
.u-svg-mid { vertical-align: middle; }
.u-svg--2 { vertical-align: -2px; }
.u-svg--3 { vertical-align: -3px; }
.u-svg--3-mr-6-ink-3 { vertical-align: -3px; margin-right: 6px; color: var(--ink-3); }
.u-svg--3-mr-6 { vertical-align: -3px; margin-right: 6px; }
.u-svg--4-mr-6-brand { vertical-align: -4px; margin-right: 6px; color: var(--brand); }
.u-svg--4-mr-6-danger { vertical-align: -4px; margin-right: 6px; color: var(--danger, #d83a3a); }
.u-svg-flip { transform: scaleX(-1); }
.u-svg-stroke-white { stroke: #fff; }

/* Borders */
.u-border-top { border-top: 1px solid var(--line); }

/* Layout composites */
.u-row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.u-row-gap-12 { display: flex; gap: 12px; }
.u-row-gap-12-wrap { display: flex; gap: 12px; flex-wrap: wrap; }
.u-row-form-end { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 8px; }
.u-row-form-end-14 { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.u-row-start { display: flex; align-items: flex-start; gap: 10px; }
.u-row-gap-8 { display: flex; gap: 8px; }
.u-row-gap-8-mt-6 { display: flex; gap: 8px; margin-top: 6px; }
.u-row-gap-8-mt-12 { display: flex; gap: 8px; margin-top: 12px; }
.u-row-gap-8-mt-14 { display: flex; gap: 8px; margin-top: 14px; }
.u-row-gap-8-pad-wrap { display: flex; gap: 8px; padding: 16px; flex-wrap: wrap; }
.u-row-gap-8-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.u-col-gap-8 { display: flex; flex-direction: column; gap: 8px; }
.u-pad-col-gap-8 { padding: 0 18px; display: flex; flex-direction: column; gap: 8px; }
.u-grid-3-gap-8 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.u-grid-fullcol-empty { grid-column: 1/-1; color: var(--ink-3); font-size: 14px; }

/* Empty state */
.u-empty-soft { text-align: center; padding: 30px 20px; background: var(--bg); border-radius: 10px; color: var(--ink-3); font-size: 14px; }
.u-empty-plain { text-align: center; padding: 32px 14px; color: var(--ink-3); font-size: 13px; }

/* Note bubble (info panel inside pane) */
.u-note { margin: 14px 0 4px; padding: 12px 14px; background: var(--brand-soft); border-radius: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.u-note-2 { margin: 10px 0 4px; padding: 12px 14px; background: var(--brand-soft); border-radius: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.u-note-stack { background: var(--brand-soft); border-radius: 10px; padding: 12px; margin: 8px 0 14px; font-size: 12px; color: var(--ink-2); line-height: 1.5; }

/* Hopper banner gradients (andamento_pane_hopper) */
.u-hopper-ok { background: linear-gradient(135deg, var(--ok) 0%, #138A3F 100%); }
.u-hopper-warn { background: linear-gradient(135deg, var(--warn) 0%, #B8721A 100%); }

/* Lang option (impostazioni_modal_lingua) */
.u-lang-opt { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; }
.u-lang-opt.is-current { border-color: var(--brand); background: var(--brand-soft); }
.u-note-inline-pad { margin: 8px 18px; color: var(--ink-3); font-size: 13px; }
.u-note-info-blue { margin: 14px 18px 0; padding: 12px 14px; background: #DEEBF6; border: 1px solid #B5D2E9; border-radius: 10px; font-size: 12px; color: #2C5577; line-height: 1.5; }
.u-note-danger { margin: 14px 18px 0; background: #FEE2E2; border-color: #FCD3D3; color: var(--danger); }

/* Misc inline-positioned */
.u-pad-12 { padding: 12px; }
.u-ta-center { text-align: center; }
.u-pad-soft-ink { padding: 16px; color: var(--ink-3); font-size: 13px; }
.u-pad-soft-ink-14 { padding: 14px; color: var(--ink-3); font-size: 13px; }
.u-pad-soft-ink-12 { color: var(--ink-3); font-size: 12px; padding: 14px; }
.u-meta-note { font-size: 12px; color: var(--ink-3); margin-top: 14px; padding: 10px 14px; background: var(--bg); border-radius: 10px; line-height: 1.5; }
.u-meta-note-sm { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; }
.u-meta-note-sm.fatture-disclaimer { font-size: 14px; line-height: 1.55; margin-top: 18px; }
.u-help-text { margin-top: 8px; color: var(--ink-2); font-size: 13px; }
/* Requisiti nuova password (credenziali gestore): checklist live, spunta verde = requisito ok */
.pw-req { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; }
.pw-req li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.pw-req .pw-req-ico { color: var(--line); flex-shrink: 0; transition: color 120ms ease; }
.pw-req li.ok { color: var(--ink-2); }
.pw-req li.ok .pw-req-ico { color: var(--ok); }

/* Formazione KB (Impostazioni → Formazione & guide): indice riuso .list-group
   dentro un modal (no margini pagina, no shadow) + tipografia del corpo articolo. */
.list-group--in-modal { margin: 0; box-shadow: none; border: 1px solid var(--line); }
.kb-article { font-size: 14px; line-height: 1.6; color: var(--ink); }
.kb-article > :first-child { margin-top: 0; }
.kb-article h4 { font-size: 15px; font-weight: 700; margin: 16px 0 6px; color: var(--ink); }
.kb-article p { margin: 0 0 10px; }
.kb-article ul, .kb-article ol { margin: 0 0 10px; padding-left: 20px; }
.kb-article li { margin-bottom: 4px; }
.kb-article strong { font-weight: 600; }
.kb-article .kb-tip { background: var(--brand-soft); color: var(--ink); border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; font-size: 13px; }
/* Icona di un pulsante dell'interfaccia citata dentro un articolo KB: stesso
   tondo di .goal-help-btn, in scala da testo, cosi' il gestore riconosce a colpo
   d'occhio il bottone di cui si sta parlando. */
.kb-article .kb-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); vertical-align: middle; }
.kb-article .kb-ico .i { width: 13px; height: 13px; }
/* Sommario dell'articolo KB: costruito in JS dagli h4 del corpo (kbArticleToc). */
.kb-toc { border-left: 3px solid var(--brand); padding: 6px 0 6px 12px; margin: 12px 0 0; }
.kb-toc[hidden] { display: none; }
.kb-toc-title { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.kb-toc ul { list-style: none; margin: 0; padding: 0; }
.kb-toc li + li { margin-top: 2px; }
.kb-toc a { font-size: 14px; color: var(--brand); text-decoration: none; }
.u-text-body { font-size: 13px; color: var(--ink); line-height: 1.5; }
.u-row-strong { display: flex; align-items: center; justify-content: space-between; }
.u-w100-mb-14 { width: 100%; margin-bottom: 14px; }
.u-w100-mb-18 { width: 100%; margin-bottom: 18px; }
.u-pad-0-mb-14 { padding: 0; margin-bottom: 14px; }
.u-accent-brand { accent-color: var(--brand); }

/* Pill / badge */
.u-pill-sm { font-size: 11px; padding: 5px 10px; text-transform: none; letter-spacing: 0; font-weight: 700; }
.u-pill-md { font-size: 12px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 4px; }
.u-pill-brand-flat { color: var(--brand); text-transform: none; letter-spacing: 0; font-size: 13px; }
.u-pill-brand-fw { color: var(--brand); font-weight: 600; text-transform: none; letter-spacing: 0; }
.u-pill-warn-fw { color: var(--warn); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* Icon + text helpers */
.u-brand-icon-top { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.u-ml-auto-brand { margin-left: auto; color: var(--brand); }
.u-mr-6-svg--3 { margin-right: 6px; vertical-align: -3px; }
.u-c-ink-3-13 { color: var(--ink-3); font-size: 13px; }
/* Nota inline accanto al conteggio raggiungibili nel composer: stessa size/case
   del pill (non eredita l'uppercase/spacing dell'eyebrow contenitore). */
.reach-note { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--ink-3); }
.u-c-ink-3-400 { color: var(--ink-3); font-weight: 400; }
.u-c-ink-3-fw { color: var(--ink-3); font-weight: 400; }
.u-c-ok-light { color: var(--ok); }
.u-block-center { display: block; margin: 0 auto 8px; }

/* Progress bar (width:0% used for js fill) */
.u-bar-empty { width: 0%; }
.u-bar-half { width: 50%; }

/* Bar heights 0-100% for kpi day-bar chart (riepilogo) */
.bar-h-0 { height: 0%; } .bar-h-1 { height: 1%; } .bar-h-2 { height: 2%; } .bar-h-3 { height: 3%; } .bar-h-4 { height: 4%; } .bar-h-5 { height: 5%; } .bar-h-6 { height: 6%; } .bar-h-7 { height: 7%; } .bar-h-8 { height: 8%; } .bar-h-9 { height: 9%; } .bar-h-10 { height: 10%; } .bar-h-11 { height: 11%; } .bar-h-12 { height: 12%; } .bar-h-13 { height: 13%; } .bar-h-14 { height: 14%; } .bar-h-15 { height: 15%; } .bar-h-16 { height: 16%; } .bar-h-17 { height: 17%; } .bar-h-18 { height: 18%; } .bar-h-19 { height: 19%; } .bar-h-20 { height: 20%; } .bar-h-21 { height: 21%; } .bar-h-22 { height: 22%; } .bar-h-23 { height: 23%; } .bar-h-24 { height: 24%; } .bar-h-25 { height: 25%; } .bar-h-26 { height: 26%; } .bar-h-27 { height: 27%; } .bar-h-28 { height: 28%; } .bar-h-29 { height: 29%; } .bar-h-30 { height: 30%; } .bar-h-31 { height: 31%; } .bar-h-32 { height: 32%; } .bar-h-33 { height: 33%; } .bar-h-34 { height: 34%; } .bar-h-35 { height: 35%; } .bar-h-36 { height: 36%; } .bar-h-37 { height: 37%; } .bar-h-38 { height: 38%; } .bar-h-39 { height: 39%; } .bar-h-40 { height: 40%; } .bar-h-41 { height: 41%; } .bar-h-42 { height: 42%; } .bar-h-43 { height: 43%; } .bar-h-44 { height: 44%; } .bar-h-45 { height: 45%; } .bar-h-46 { height: 46%; } .bar-h-47 { height: 47%; } .bar-h-48 { height: 48%; } .bar-h-49 { height: 49%; } .bar-h-50 { height: 50%; } .bar-h-51 { height: 51%; } .bar-h-52 { height: 52%; } .bar-h-53 { height: 53%; } .bar-h-54 { height: 54%; } .bar-h-55 { height: 55%; } .bar-h-56 { height: 56%; } .bar-h-57 { height: 57%; } .bar-h-58 { height: 58%; } .bar-h-59 { height: 59%; } .bar-h-60 { height: 60%; } .bar-h-61 { height: 61%; } .bar-h-62 { height: 62%; } .bar-h-63 { height: 63%; } .bar-h-64 { height: 64%; } .bar-h-65 { height: 65%; } .bar-h-66 { height: 66%; } .bar-h-67 { height: 67%; } .bar-h-68 { height: 68%; } .bar-h-69 { height: 69%; } .bar-h-70 { height: 70%; } .bar-h-71 { height: 71%; } .bar-h-72 { height: 72%; } .bar-h-73 { height: 73%; } .bar-h-74 { height: 74%; } .bar-h-75 { height: 75%; } .bar-h-76 { height: 76%; } .bar-h-77 { height: 77%; } .bar-h-78 { height: 78%; } .bar-h-79 { height: 79%; } .bar-h-80 { height: 80%; } .bar-h-81 { height: 81%; } .bar-h-82 { height: 82%; } .bar-h-83 { height: 83%; } .bar-h-84 { height: 84%; } .bar-h-85 { height: 85%; } .bar-h-86 { height: 86%; } .bar-h-87 { height: 87%; } .bar-h-88 { height: 88%; } .bar-h-89 { height: 89%; } .bar-h-90 { height: 90%; } .bar-h-91 { height: 91%; } .bar-h-92 { height: 92%; } .bar-h-93 { height: 93%; } .bar-h-94 { height: 94%; } .bar-h-95 { height: 95%; } .bar-h-96 { height: 96%; } .bar-h-97 { height: 97%; } .bar-h-98 { height: 98%; } .bar-h-99 { height: 99%; } .bar-h-100 { height: 100%; }

/* Semantic color modifiers for metric rows (row.color → class via template if/elif) */
.u-row-c-brand { color: var(--brand); }
.u-row-c-ok { color: var(--ok); }
.u-row-c-warn { color: var(--warn); }
.u-row-c-danger { color: var(--danger); }

/* ==========================================================
   UTILITY CLASSES (task H · 2026-05-18) — dashboard
   Feedback PAI `feedback_no_inline_css_default`. Dynamic vars
   `var(--*)` restano inline come permesso.
   ========================================================== */

/* Sub-text */
.u-meta-ink-3 { font-size: 12px; color: var(--ink-3); }
.u-meta-ink-2 { font-size: 13px; color: var(--ink-2); }
.u-section-title-tight { padding: 14px 0 6px; }
.u-section-title-flush { padding-left: 0 !important; padding-right: 0 !important; }
.u-section-title-mid { padding: 18px 0 6px; }

/* Soft body box (ticket modal "descrizione cliente") */
.u-soft-body-box {
  background: var(--bg);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--ink);
}

/* Form host flex */
.u-form-flex-2 { flex: 2; }

/* Tiny spacing helpers */
.u-mt-6 { margin-top: 6px; }

/* Field-row flex variants (impostazioni profilo modal) */
.field--flex-220 { flex: 2 1 220px; }
.field--flex-180 { flex: 2 1 180px; }
.field--flex-160 { flex: 1 1 160px; }
.field--w-100 { flex: 0 0 100px; }
.field--w-110 { flex: 0 0 110px; }
.field--w-80 { flex: 0 0 80px; }

/* Listino + Sconto sulla stessa riga nel modal cliente, split 70/30. Scoped:
   batte .field-row .field{flex:1} solo per questa riga. align-items:start così
   le note di altezza diversa non stirano i campi. Numero sconto allineato a dx. */
.cust-pane .field-row.lst-sct-row { align-items: flex-start; }
.cust-pane .field-row.lst-sct-row > .field { flex: 7 1 0; }
.cust-pane .field-row.lst-sct-row > .field.sct-field { flex: 3 1 0; }
.cust-pane .field-row.lst-sct-row .sct-field input { text-align: right; }

/* Stesso split 70/30 nel modal Configura categoria (in .sheet, fuori da .cust-pane). */
[data-modal="cat-config"] .field-row.lst-sct-row { align-items: flex-start; }
[data-modal="cat-config"] .field-row.lst-sct-row > .field { flex: 7 1 0; }
[data-modal="cat-config"] .field-row.lst-sct-row > .field.sct-field { flex: 3 1 0; }
[data-modal="cat-config"] .field-row.lst-sct-row .sct-field input { text-align: right; }
/* Link inline nelle note: pattern unico ovunque (prima era scoped a
   cat-config e .cust-pane; il rimando bollette nel pane Consumi restava
   un <a> blu default del browser). */
.u-meta-note-sm a { color: var(--brand); text-decoration: none; font-weight: 600; }
.u-meta-note-sm a:hover { text-decoration: underline; }

/* Tabella "cosa paga questa card": riusa .dt-table (pattern Vendite per macchina).
   Modificatore: margine sotto il section-title, niente cursore "clic" (righe non
   cliccabili), prezzo in grassetto. Numeri a dx + tabular-nums li dà .dt-table .num. */
/* Card bianca su modale bianco: l'ombra .dt-card (0.04) non basta a staccarla →
   bordo 1px per incorniciare la tabella prezzi. */
.card-price-card { margin-top: 6px; border: 1px solid var(--line); }
.card-price-table tbody tr:hover { cursor: default; background: transparent; }
.card-price-table td.num { font-weight: 600; }

/* Storico modale: l'accordion movimenti (.reservations-disclosure, nato per la
   pagina Prenotazioni con inset 18px) nel modale raddoppiava l'indentazione (il
   body .cust-pane ha già padding 18px) → i movimenti erano 18px più indentati e
   più stretti del resto. Azzeriamo il margine orizzontale solo qui: flush con le
   metric-rows sopra. */
.cust-pane .reservations-disclosure { margin-left: 0; margin-right: 0; }

/* Province input uppercase */
.input-uppercase { text-transform: uppercase; }

/* Grid form-row 2-col */
.field-row--grid-2 {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.field-row--grid-2-mb {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

/* Banner amber/info */
.banner-amber {
  padding: 16px;
  border-radius: 8px;
  background: #FEF3C7;
  color: #78350F;
  margin-bottom: 16px;
}
.banner-amber--margin-y {
  padding: 14px 16px;
  border-radius: 8px;
  background: #FEF3C7;
  color: #78350F;
  margin: 18px 0;
  line-height: 1.5;
}

/* Modal listini grid column span 3 */
.col-span-3 { grid-column: span 3; }

/* Impostazioni list-row tight padding */
.list-row--padded { padding: 18px 16px; }
.list-row-ttl--brand { color: var(--brand); }

/* Clienti ticket modal trigger row */
.ticket-trigger-row { cursor: pointer; }
.ticket-disabled-row { cursor: default; opacity: 0.7; }

/* Meta note small with margin-top 12 */
.u-meta-note-sm--mt-12 { margin-top: 12px; }

/* Lab primary-lab hint (impostazioni profilo) */
.lab-primary-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: -4px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}