/* ═══ FIȘIER PARTAJAT (afood-shared/css/forms.css) — nu edita în aplicație; editează în afood-shared, apoi: python sync_shared.py --apply ═══ */
/* „Pastel Motion": controale de 48 px, raza 16, contur fin 1 px (2 px la focus / butonul cu contur),
   etichete apăsate (800), zero umbre. Culoarea se schimbă mereu animat (--dur-3 emphasized), raza
   cu spring (--dur-4). Apăsarea (scale + rază la 55 %) o face motion.js — NICIUN `transform` pe :active aici. */

/* ══════════════════════════════════════════════════════════════════════════
   10.1 BUTOANE
   ══════════════════════════════════════════════════════════════════════════ */

/* Eticheta unui buton nu iese NICIODATĂ din casetă: e `nowrap` (§10.1), deci orice
   îngustare sub conținut ar scoate textul afară. `flex: 0 0 auto` îl scoate din
   negocierea de lățime a rândului (exact ca `.tab-item`, §10.11, sau `.month-picker`,
   §14), iar `min-width: auto` îi redă mărimea minimă automată pe care rețeta §5.6
   (`min-width: 0`, în base.css) i-o anulează — așa rămân protejate și butoanele care
   TREBUIE să se întindă și păstrează `flex` propriu, mai specific: `.modal-footer .btn`
   (§10.18) și `.btn-block`. Rândul rămas fără loc se rupe sau derulează (`.chip-row`
   §10.39, `.toolbar-actions` §9.1), nu strivește butonul. */
.btn {
  --btn-fg: var(--ink-1);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  flex: 0 0 auto; min-width: auto;
  height: var(--ctl-md); padding: 0 var(--sp-4);
  border: var(--border-fine) solid transparent; border-radius: var(--r-2); background: transparent;
  font: var(--fw-strong) var(--fs-14)/1 var(--font-ui); color: var(--btn-fg); text-decoration: none;
  white-space: nowrap; user-select: none; cursor: pointer;
  transition: background-color var(--dur-3) var(--ease-emph), border-color var(--dur-3) var(--ease-emph),
              color var(--dur-3) var(--ease-emph), border-radius var(--dur-4) var(--ease-spring);
}
.btn .material-icons { font-size: var(--icon-20); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn.is-disabled { opacity: .5; pointer-events: none; }

/* pictogramă singură — aspect ghost implicit; variantele de mai jos câștigă (aceeași specificitate, declarate după) */
.btn-icon { width: var(--ctl-md); padding: 0; --btn-fg: var(--ink-2); }
.btn-icon .material-icons { font-size: var(--icon-24); }
.btn-icon.btn-sm { width: var(--ctl-sm); padding: 0; }
.btn-icon.btn-sm .material-icons { font-size: var(--icon-20); }
.btn-icon.btn-lg { width: var(--ctl-lg); padding: 0; }

/* Primar = umplut cu accentul; secundar = cu contur 2 px pe suprafață (citit și pe canvas, și în card);
   ghost = transparent; danger = umplut roșu; success / warning = tonale (pastel + fg-ul tonului). */
.btn-primary   { --btn-fg: var(--on-accent); background: var(--accent); }
.btn-secondary { --btn-fg: var(--ink-1); background: var(--surface); border: var(--border-focus) solid var(--line-1); }
.btn-ghost     { --btn-fg: var(--ink-2); background: transparent; }
.btn-danger    { --btn-fg: var(--on-accent); background: var(--danger); }
.btn-success   { --btn-fg: var(--success-ink); background: var(--success-soft); }
.btn-warning   { --btn-fg: var(--warning-ink); background: var(--warning-soft); }
.btn-ghost.is-danger { --btn-fg: var(--danger-ink); }

/* Apăsat = doar culoare (scala o pune motion.js). Ghost / icon întâi, ca variantele
   umplute (`.btn-icon.btn-primary`) să câștige la aceeași specificitate. */
.btn-ghost:active, .btn-icon:active { background: var(--surface-highest); }
.btn-primary:active   { background: var(--accent-strong); }
.btn-secondary:active { background: var(--sunken); }
.btn-danger:focus-visible { box-shadow: var(--ring-danger); }

/* mărimi */
.btn-sm { height: var(--ctl-sm); padding: 0 var(--sp-3); gap: var(--sp-1); }
.btn-sm .material-icons { font-size: var(--icon-18); }
.btn-lg { height: var(--ctl-lg); padding: 0 var(--sp-5); font-size: var(--fs-14); }
.btn-lg .material-icons { font-size: var(--icon-20); }
.btn-block { width: 100%; }
.btn-group { display: inline-flex; gap: var(--sp-2); }

/* încărcare: eticheta devine transparentă, spinner 16 px centrat pe ::before
   (::after e rezervat extinderii zonei de atingere, §5.2). Un cerc mic în culoarea
   textului butonului — stă ÎN buton, nu e loaderul de pagină (.spinner). */
.btn.is-loading { position: relative; pointer-events: none; color: transparent; }
.btn.is-loading::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: var(--icon-16); height: var(--icon-16); margin: calc(var(--icon-16) / -2) 0 0 calc(var(--icon-16) / -2);
  border: var(--border-focus) solid var(--btn-fg); border-top-color: transparent;
  border-radius: var(--r-full); --corner: round; corner-shape: round;
  animation: forms-spin 700ms linear infinite;
}
@keyframes forms-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   10.2 CÂMPURI: input, select, textarea
   ══════════════════════════════════════════════════════════════════════════ */

/* Umplut cu suprafața, contur fin 1 px; la focus conturul devine 2 px accent fără să
   sară layout-ul (border 1 px + inel interior 1 px). */
.form-input, .form-select, .form-textarea {
  width: 100%; font: var(--fw-body) var(--fs-14)/20px var(--font-ui); color: var(--ink-1);
  background: var(--surface); border: var(--border-fine) solid var(--line-1); border-radius: var(--r-2);
  transition: border-color var(--dur-3) var(--ease-emph), box-shadow var(--dur-3) var(--ease-emph),
              background-color var(--dur-3) var(--ease-emph);
}
.form-input, .form-select { height: var(--ctl-md); padding: 0 var(--sp-4); }
.form-textarea { min-height: 96px; padding: var(--sp-3) var(--sp-4); resize: vertical; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-4); font-weight: var(--fw-body); }

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
.form-input.is-error, .form-input.error,
.form-select.is-error, .form-select.error,
.form-textarea.is-error, .form-textarea.error { border-color: var(--danger); }
.form-input.is-error:focus, .form-input.error:focus,
.form-select.is-error:focus, .form-select.error:focus,
.form-textarea.is-error:focus, .form-textarea.error:focus { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }

.form-input:disabled, .form-select:disabled, .form-textarea:disabled {
  background: var(--sunken); color: var(--ink-4); border-color: transparent; cursor: not-allowed;
}
.form-input[readonly], .form-textarea[readonly] { background: var(--subtle); }
.form-input[readonly]:focus, .form-textarea[readonly]:focus { border-color: var(--line-1); box-shadow: none; }

.input-sm { height: var(--ctl-sm); padding: 0 var(--sp-3); }
.input-lg { height: var(--ctl-lg); padding: 0 var(--sp-4); font-size: var(--fs-14); }

/* select + galonul de chevron pe wrapper (o pictogramă-ligatură, nu un SVG colorat).
   padding-right = 16 inset + 20 iconiță + 8 spațiu */
.form-select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--sp-4) + var(--icon-20) + var(--sp-2)); cursor: pointer; }
/* Marcaj emis de DataTable/Toolbar (CONTRACT §2.1): lățimea vine de la container,
   selectul trebuie doar să se poată micșora în interiorul lui */
.datatable-filter-select { min-width: 0; }
.select-wrap { position: relative; display: block; min-width: 0; }
.select-wrap::after {
  content: 'expand_more'; position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%);
  font-family: 'Material Symbols Rounded'; font-size: var(--icon-20); line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  font-feature-settings: 'liga'; color: var(--ink-3); pointer-events: none;
}

/* pictogramă în interiorul câmpului + acțiune finală.
   padding-left = 16 inset + 20 iconiță + 8 spațiu = 44 */
.input-icon, .search-input-wrapper { position: relative; display: flex; align-items: center; min-width: 0; }
.input-icon > .material-icons, .search-input-wrapper > .material-icons {
  position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%);
  font-size: var(--icon-20); color: var(--ink-3); pointer-events: none;
  transition: color var(--dur-3) var(--ease-emph);
}
.input-icon:focus-within > .material-icons,
.search-input-wrapper:focus-within > .material-icons { color: var(--accent-onsoft); }
.input-icon > .form-input, .search-input-wrapper > .form-input { padding-left: calc(var(--sp-4) + var(--icon-20) + var(--sp-2)); }
.input-action { position: absolute; right: var(--sp-1); top: 50%; transform: translateY(-50%); z-index: 1; }
.input-icon:has(> .input-action) > .form-input,
.search-input-wrapper:has(> .input-action) > .form-input { padding-right: calc(var(--ctl-sm) + var(--sp-2)); }

/* varianta mare (login) — aceeași înălțime (48) acum; regulile rămân pentru marcaj */
.input-icon:has(.input-lg) > .material-icons { left: var(--sp-4); font-size: var(--icon-20); }
.input-icon:has(.input-lg) > .form-input { padding-left: calc(var(--sp-4) + var(--icon-20) + var(--sp-2)); }
.input-icon:has(.input-lg) > .input-action { right: var(--sp-1); }
.input-icon:has(.input-lg) > .input-action .material-icons { font-size: var(--icon-20); }
.input-icon:has(.input-lg):has(> .input-action) > .form-input { padding-right: calc(var(--ctl-sm) + var(--sp-2)); }

/* mono (număr auto, IBAN) — majusculele se impun în JS la blur, nu din CSS */
.form-input.code { font: var(--fw-strong) var(--fs-14)/20px var(--font-mono); font-variant-numeric: tabular-nums; }

/* sumă + unitate finală (RON, km, L) */
.form-input.num { text-align: right; }
.input-suffix {
  position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%);
  font: var(--fw-label) var(--fs-13)/18px var(--font-ui); color: var(--ink-3); pointer-events: none;
}
.input-icon:has(> .input-suffix) > .form-input { padding-right: var(--sp-12); }

/* câmpuri native de dată / lună */
input[type=date], input[type=month] {
  min-height: var(--ctl-md); width: 156px; padding: 0 var(--sp-3) 0 var(--sp-4);
  -webkit-appearance: none; appearance: none;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator {
  width: var(--icon-20); height: var(--icon-20); opacity: .55; cursor: pointer; margin: 0;
  transition: opacity var(--dur-3) var(--ease-emph);
}
input[type=date]::-webkit-date-and-time-value,
input[type=month]::-webkit-date-and-time-value { text-align: left; min-height: 22px; }

/* ══════════════════════════════════════════════════════════════════════════
   10.3 STRUCTURA FORMULARULUI
   ══════════════════════════════════════════════════════════════════════════ */

.form-builder { display: flex; flex-direction: column; gap: var(--sp-6); }
.form-section { display: flex; flex-direction: column; gap: var(--sp-4); }
.form-section + .form-section { padding-top: var(--sp-6); border-top: var(--border-fine) solid var(--line-1); }
.form-section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.form-section-title {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0;
  font: var(--fw-strong) var(--fs-14)/20px var(--font-ui); letter-spacing: var(--ls-sub); color: var(--ink-1);
}
.form-section-title .material-icons { font-size: var(--icon-20); color: var(--ink-2); }

/* baza = tabletă: 2 coloane pentru toate grilele */
.form-grid-2, .form-grid-3, .form-grid-4 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4);
}
/* FormBuilder acceptă și columns: 1 (formularele înguste din ambele aplicații) */
.form-grid-1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.col-span-2 { grid-column: span 2; }
.col-span-full { grid-column: 1 / -1; }

/* Eticheta stă deasupra câmpului: 13 / 800 --ink-2 (ierarhia din grosime, nu din mărime) */
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.form-label {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0;
  font: var(--fw-strong) var(--fs-13)/18px var(--font-ui); color: var(--ink-2);
}
.form-label .req { color: var(--danger-ink); }
.form-label .req:empty::before { content: '*'; }
.form-hint { font: var(--fw-body) var(--fs-13)/18px var(--font-ui); color: var(--ink-3); }
.form-error {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font: var(--fw-label) var(--fs-13)/18px var(--font-ui); color: var(--danger-ink);
}
.form-error .material-icons { font-size: var(--icon-16); }

/* ══════════════════════════════════════════════════════════════════════════
   10.4 CHECKBOX, RADIO, COMUTATOR
   ══════════════════════════════════════════════════════════════════════════ */

/* 20 px, contur 2 px; raza bifei = jumătate din xs (proporțională cu mărimea) */
.form-checkbox, input[type=radio] {
  position: relative; flex: 0 0 auto; width: var(--sp-5); height: var(--sp-5); margin: 0;
  appearance: none; -webkit-appearance: none;
  background: var(--surface); border: var(--border-focus) solid var(--ink-4); border-radius: calc(var(--r-1) / 2); cursor: pointer;
  transition: background-color var(--dur-3) var(--ease-emph), border-color var(--dur-3) var(--ease-emph);
}
input[type=radio] { border-radius: var(--r-full); --corner: round; corner-shape: round; }
.form-checkbox:checked, .form-checkbox:indeterminate, input[type=radio]:checked {
  background: var(--accent); border-color: var(--accent);
}
.form-checkbox:focus-visible, input[type=radio]:focus-visible { outline: none; box-shadow: var(--ring); }
.form-checkbox:disabled, input[type=radio]:disabled { opacity: .5; pointer-events: none; }

/* bifa: mască SVG (masca nu poartă culoare — culoarea vine din background) */
.form-checkbox::after {
  content: ''; position: absolute; inset: 0; background: var(--on-accent); opacity: 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.2 11.6 3 8.4l1.1-1.1 2.1 2.1 5.7-5.7L13 4.8z'/></svg>") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.2 11.6 3 8.4l1.1-1.1 2.1 2.1 5.7-5.7L13 4.8z'/></svg>") center / 14px 14px no-repeat;
  transition: opacity var(--dur-2) var(--ease-emph);
}
.form-checkbox:checked::after { opacity: 1; }
.form-checkbox:indeterminate::after { opacity: 0; }
.form-checkbox:indeterminate::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px;
  margin: -1px 0 0 -5px; background: var(--on-accent); border-radius: var(--r-full);
}
input[type=radio]:checked::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: var(--sp-2); height: var(--sp-2);
  margin: calc(var(--sp-2) / -2) 0 0 calc(var(--sp-2) / -2); background: var(--on-accent);
  border-radius: var(--r-full); --corner: round; corner-shape: round;
}

.form-checkbox-wrapper, .form-radio-label {
  display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0;
  min-height: var(--touch); font: var(--fw-body) var(--fs-14)/20px var(--font-ui); color: var(--ink-1); cursor: pointer;
}
.form-radio-group { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }

/* Comutator: pistă 48 × 28 (--surface-highest → --accent), buton alb rotund care crește
   (16 → 20) și alunecă cu spring. Dimensiunile sunt variabile locale: zona de atingere
   din blocul (pointer: coarse) le refolosește. */
.switch {
  --sw-w: var(--sp-12); --sw-h: 28px; --sw-knob: var(--sp-5); --sw-pad: var(--sp-1);
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); cursor: pointer;
}
.switch > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.switch-track {
  position: relative; flex: 0 0 auto; width: var(--sw-w); height: var(--sw-h);
  background: var(--surface-highest); border-radius: var(--r-full); --corner: round; corner-shape: round;
  transition: background-color var(--dur-3) var(--ease-emph);
}
.switch-track::after {
  content: ''; position: absolute; top: calc((var(--sw-h) - var(--sw-knob)) / 2); left: 0;
  width: var(--sw-knob); height: var(--sw-knob);
  background: var(--on-accent); border-radius: var(--r-full); --corner: round; corner-shape: round;
  transform: translateX(var(--sw-pad)) scale(.8);
  transition: transform var(--dur-4) var(--ease-spring);
}
.switch > input:checked + .switch-track { background: var(--accent); }
.switch > input:checked + .switch-track::after { transform: translateX(calc(var(--sw-w) - var(--sw-knob) - var(--sw-pad))) scale(1); }
.switch > input:focus-visible + .switch-track { box-shadow: var(--ring); }
.switch > input:disabled + .switch-track { opacity: .5; }
.switch-label { font: var(--fw-body) var(--fs-14)/20px var(--font-ui); color: var(--ink-1); min-width: 0; }
/* Varianta din celula de tabel: doar pista, fara eticheta, centrata pe rand.
   Pe ecrane tactile caseta de atingere crește la --touch (vezi ZONĂ DE ATINGERE). */
.switch--cell { gap: 0; min-height: 0; justify-content: center; vertical-align: middle; }

/* ══════════════════════════════════════════════════════════════════════════
   10.5 CĂUTARE
   ══════════════════════════════════════════════════════════════════════════ */

.search-input-wrapper { width: 220px; flex: 0 0 auto; }
.search-input { -webkit-appearance: none; appearance: none; padding-right: var(--sp-10); }
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration { display: none; -webkit-appearance: none; }

/* ══════════════════════════════════════════════════════════════════════════
   10.6 PRESETĂRI DE FILTRU (chip-uri)
   Fostul control segmentat e acum un grup de chip-uri: neselectat = contur 1 px, raza 12;
   selectat = umplut --accent-soft / --accent-onsoft, raza crește ANIMAT la 16 (spring).
   Grupul nu mai are pistă proprie — rămâne doar rândul, înalt cât un control (48),
   ca să se alinieze cu câmpurile din toolbar.
   ══════════════════════════════════════════════════════════════════════════ */

.filter-presets {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto;
  height: var(--ctl-md); padding: 0;
  background: transparent; border: 0;
}
.preset-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1); flex: 0 0 auto;
  height: var(--ctl-xs); padding: 0 var(--sp-3);
  border: var(--border-fine) solid var(--line-1); background: transparent; border-radius: var(--r-1);
  font: var(--fw-label) var(--fs-13)/1 var(--font-ui); color: var(--ink-2); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-3) var(--ease-emph), border-color var(--dur-3) var(--ease-emph),
              color var(--dur-3) var(--ease-emph), border-radius var(--dur-4) var(--ease-spring);
}
.preset-chip .material-icons { font-size: var(--icon-18); }
.filter-presets:empty { display: none; }
.preset-chip.is-active {
  background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-onsoft);
  border-radius: var(--r-2);
}
.preset-chip:focus-visible { outline: none; box-shadow: var(--ring); }
/* Contorul dintr-un chip (statusurile GPS) e o pastilă mică pe tonul chip-ului */
.preset-chip .badge { padding: 0 var(--sp-2); }

/* variantă compactă — pista e --ctl-sm (40), chip-ul rămâne 36 */
.card-header-right .filter-presets, .card-header-actions .filter-presets,
.chart-header-right .filter-presets { height: var(--ctl-sm); }
.card-header-right .preset-chip, .card-header-actions .preset-chip,
.chart-header-right .preset-chip { padding: 0 var(--sp-3); }

/* ══════════════════════════════════════════════════════════════════════════
   10.7 SELECTOR DE LUNĂ
   ══════════════════════════════════════════════════════════════════════════ */

.month-picker {
  position: relative; display: inline-grid; grid-template-columns: var(--ctl-md) 1fr var(--ctl-md);
  width: 232px; height: var(--ctl-md); flex-shrink: 0; overflow: hidden;
  background: var(--surface); border: var(--border-fine) solid var(--line-1); border-radius: var(--r-2);
}
.month-picker > .btn { width: 100%; height: 100%; border: 0; border-radius: 0; }
.month-prev { border-right: var(--border-fine) solid var(--line-2); }
.month-next { border-left: var(--border-fine) solid var(--line-2); }
.month-label {
  height: 100%; padding: 0 var(--sp-2); border: 0; background: transparent; cursor: pointer;
  font: var(--fw-strong) var(--fs-14)/1 var(--font-ui); color: var(--ink-1); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color var(--dur-3) var(--ease-emph), color var(--dur-3) var(--ease-emph);
}
/* Lună ≠ luna curentă (MonthPicker pune .is-other pe etichetă) */
.month-label.is-other { color: var(--accent-onsoft); }
.month-label:focus-visible { outline: none; box-shadow: var(--ring-inset); }
.month-picker .month-native { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* Butonul „Luna curentă” este frate al pickerului, nu copil (§10.7) */
.month-today { flex: 0 0 auto; }

/* rezerva fără input[type=month] nativ: grila se randează într-un .dropdown-menu
   FRATE al pickerului (pickerul are overflow:hidden și ar decupa meniul) */
.month-grid { min-width: 264px; }
.month-all { justify-content: center; }
.month-grid-head { display: flex; align-items: center; gap: var(--sp-2); }
.month-grid-head .dropdown-heading { flex: 1 1 auto; padding: var(--sp-1) 0; text-align: center; }
.month-year-prev, .month-year-next { flex: 0 0 auto; }
.month-grid-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); }
.month-cell {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--ctl-md); border: 0; background: transparent; border-radius: var(--r-1);
  font: var(--fw-label) var(--fs-14)/1 var(--font-ui); color: var(--ink-1); cursor: pointer;
  transition: background-color var(--dur-3) var(--ease-emph), color var(--dur-3) var(--ease-emph),
              border-radius var(--dur-4) var(--ease-spring);
}
.month-cell.is-active { background: var(--accent-soft); color: var(--accent-onsoft); font-weight: var(--fw-strong); border-radius: var(--r-2); }
.month-cell:focus-visible { outline: none; box-shadow: var(--ring); }

/* ══════════════════════════════════════════════════════════════════════════
   10.8 INTERVAL DE DATE
   ══════════════════════════════════════════════════════════════════════════ */

.date-range-picker { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.date-range-inputs { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.date-range-sep { display: inline-flex; align-items: center; flex: 0 0 auto; font-size: var(--icon-18); color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════════════
   10.9 SELECȚIE MULTIPLĂ
   ══════════════════════════════════════════════════════════════════════════ */

.ms { position: relative; display: inline-block; min-width: 150px; max-width: 220px; }
.ms .form-select { display: flex; align-items: center; text-align: left; }
.ms-label { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-label.is-empty { color: var(--ink-4); }
/* Zona de opțiuni dintre căutarea lipită sus și subsolul panoului */
.ms-list { display: flex; flex-direction: column; min-width: 0; }
.ms > .dropdown-menu { min-width: 260px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.ms > .dropdown-menu .search-input-wrapper {
  position: sticky; top: 0; z-index: 1; width: 100%;
  padding-bottom: var(--sp-1); background: var(--surface);
}

/* ══════════════════════════════════════════════════════════════════════════
   10.34 GRUP DE CÂMPURI (input lipit de buton)
   ══════════════════════════════════════════════════════════════════════════ */

.input-group { display: flex; align-items: stretch; min-width: 0; }
.input-group > * { height: var(--ctl-md); border-radius: 0; }
.input-group > :first-child { border-radius: var(--r-2) 0 0 var(--r-2); }
.input-group > :last-child { border-radius: 0 var(--r-2) var(--r-2) 0; margin-left: -1px; }
.input-group > .form-input, .input-group > .select-wrap { flex: 1 1 auto; min-width: 0; }
.input-group > .btn { flex: 0 0 auto; }
.input-group > :focus-within { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   10.37 ÎNCĂRCARE FIȘIERE
   ══════════════════════════════════════════════════════════════════════════ */

.file-upload-wrapper { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.file-upload-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 128px; padding: var(--sp-6);
  border: var(--border-focus) dashed var(--line-1); border-radius: var(--r-3); background: var(--subtle);
  font: var(--fw-body) var(--fs-14)/20px var(--font-ui); color: var(--ink-3); text-align: center; cursor: pointer;
  transition: background-color var(--dur-3) var(--ease-emph), border-color var(--dur-3) var(--ease-emph),
              color var(--dur-3) var(--ease-emph);
}
.file-upload-dropzone .material-icons { font-size: var(--icon-24); }
.file-upload-dropzone b { font-weight: var(--fw-strong); color: var(--ink-1); }
.file-upload-dropzone.is-dragging { border-color: var(--accent); background: var(--accent-softer); color: var(--accent-onsoft); }
.file-upload-dropzone:focus-visible { outline: none; box-shadow: var(--ring); }

/* Fișierul ales: o dală pe --subtle (fără contur), miniatură pe --surface */
.file-upload-preview {
  display: flex; align-items: center; gap: var(--sp-3); min-width: 0;
  padding: var(--sp-3); border: 0; border-radius: var(--r-3); background: var(--subtle);
}
.file-upload-thumb {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: var(--r-2); object-fit: cover;
  background: var(--surface); color: var(--ink-2);
}
.file-upload-thumb .material-icons { font-size: var(--icon-24); }
.file-upload-preview .btn-icon { margin-left: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   HOVER (doar pe dispozitive cu pointer fin)
   Transparentele (ghost, icon, chip neselectat) stau des pe canvas, unde --subtle
   == canvasul: hover-ul lor e --sunken, care se vede și pe canvas, și pe card.
   ══════════════════════════════════════════════════════════════════════════ */

@media (hover: hover) {
  .btn-icon:hover      { background: var(--sunken); }
  .btn-primary:hover   { background: var(--accent-strong); }
  .btn-secondary:hover { background: var(--subtle); border-color: var(--line-3); }
  .btn-ghost:hover     { background: var(--sunken); --btn-fg: var(--ink-1); }
  .btn-danger:hover    { background: color-mix(in srgb, var(--danger), var(--ink-1) 14%); }
  .btn-success:hover   { background: color-mix(in srgb, var(--success-soft), var(--success) 14%); }
  .btn-warning:hover   { background: color-mix(in srgb, var(--warning-soft), var(--warning) 12%); }
  .btn-ghost.is-danger:hover { background: var(--danger-soft); --btn-fg: var(--danger-ink); }

  .form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--ink-4); }
  .form-input:focus:hover, .form-select:focus:hover, .form-textarea:focus:hover { border-color: var(--accent); }
  .form-input.is-error:hover, .form-input.error:hover, .form-select.is-error:hover,
  .form-select.error:hover, .form-textarea.is-error:hover, .form-textarea.error:hover { border-color: var(--danger); }
  .form-input:disabled:hover, .form-select:disabled:hover, .form-textarea:disabled:hover { border-color: transparent; }
  .form-input[readonly]:hover { border-color: var(--line-1); }

  .form-checkbox:not(:checked):not(:indeterminate):hover, input[type=radio]:not(:checked):hover { border-color: var(--ink-3); }

  input[type=date]:hover::-webkit-calendar-picker-indicator,
  input[type=month]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

  .preset-chip:not(.is-active):hover { background: var(--sunken); border-color: var(--line-3); color: var(--ink-1); }
  .preset-chip.is-active:hover { background: color-mix(in srgb, var(--accent-soft), var(--accent) 14%); }
  .month-label:hover { background: var(--subtle); }
  .month-cell:not(.is-active):hover { background: var(--subtle); }
  .file-upload-dropzone:hover { border-color: var(--accent); background: var(--accent-softer); color: var(--accent-onsoft); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ZONĂ DE ATINGERE (§5.2) — mărește caseta de atingere fără să schimbe vizualul
   ══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  /* .input-action e DEJA position:absolute (mai sus), ancorat in dreapta inputului.
     A-l trece pe `relative` ii rupea ancorarea: butonul „vezi parola" iesea din
     pozitia lui si strica alinierea campului. Fiind deja pozitionat, e propriul
     context pentru ::after, deci nu are nevoie de `relative`. Atentie: el poarta
     SI clasa .btn-sm, deci trebuie exclus din ambele selectoare. */
  .btn-sm:not(.input-action) { position: relative; }
  .btn-sm::after, .input-action::after { content: ''; position: absolute; inset: calc((100% - var(--touch)) / 2); }
  /* Comutatorul din celula de tabel („plătit", „reglat", „în dosar") e acțiunea
     principală a rândului, dar pista e mică: un tap ratat cu 5 px cădea pe
     rând și deschidea detaliile. Caseta de atingere a etichetei devine cel puțin
     --touch × --touch, centrată pe pistă, fără să crească rândul. Orice tap în ea
     comută (e în <label>), iar DataTable ignoră click-urile pe `label, .switch`. */
  .switch--cell::after { content: ''; position: absolute; inset: min(0px, calc((var(--sw-h) - var(--touch)) / 2)) min(0px, calc((var(--sw-w) - var(--touch)) / 2)); }
  /* Chip-urile de 36 px primesc caseta de atingere de --touch */
  .preset-chip { position: relative; }
  .preset-chip::after { content: ''; position: absolute; inset: min(0px, calc((100% - var(--touch)) / 2)) 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP ≥ 1024
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .form-grid-2, .form-grid-3, .form-grid-4 { gap: var(--sp-5) var(--sp-4); }
  .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .search-input-wrapper { width: 260px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL ≤ 639
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  /* 16 px = pragul sub care iOS mărește pagina la focus. Nu există token de 16 în scara
     Pastel (15 e baza), deci pragul rămâne literal — e o constantă de platformă, nu de design. */
  .form-input, .form-select, .form-textarea, .form-input.code, input[type=date], input[type=month] { font-size: 16px; }

  .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .col-span-2, .col-span-full { grid-column: auto; }

  .form-radio-group { flex-direction: column; gap: var(--sp-2); }

  .search-input-wrapper { width: auto; flex: 1 1 auto; }
  .month-picker { width: 100%; }

  .date-range-picker, .date-range-inputs { display: flex; width: 100%; }
  .date-range-inputs > .form-input { flex: 1 1 auto; width: auto; min-width: 0; }

  .ms { display: block; max-width: none; }
}