/* ═══ FIȘIER PARTAJAT (afood-shared/css/forms.css) — nu edita în aplicație; editează în afood-shared, apoi: python sync_shared.py --apply ═══ */

/* ══════════════════════════════════════════════════════════════════════════
   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-2);
  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: 1px solid transparent; border-radius: var(--r-2); background: transparent;
  font: 500 var(--fs-13)/1 var(--font-ui); color: var(--btn-fg); text-decoration: none;
  white-space: nowrap; user-select: none; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn .material-icons { font-size: var(--icon-18); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active { transform: scale(.98); }
.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-20); }
.btn-icon.btn-sm { width: var(--ctl-sm); padding: 0; }
.btn-icon.btn-sm .material-icons { font-size: var(--icon-18); }
.btn-icon.btn-lg { width: var(--ctl-lg); padding: 0; }

.btn-primary   { --btn-fg: var(--on-accent); background: var(--accent); }
.btn-secondary { --btn-fg: var(--ink-1); background: var(--surface); border-color: var(--line-3); }
.btn-ghost     { --btn-fg: var(--ink-2); background: transparent; padding: 0 var(--sp-3); }
.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); }

.btn-secondary:active, .btn-ghost: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-16); }
.btn-lg { height: var(--ctl-lg); padding: 0 var(--sp-5); font-size: var(--fs-16); }
.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) */
.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: -8px 0 0 -8px;
  border: 2px solid var(--btn-fg); border-top-color: transparent; border-radius: var(--r-full);
  animation: forms-spin 700ms linear infinite;
}
@keyframes forms-spin { to { transform: rotate(360deg); } }

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

.form-input, .form-select, .form-textarea {
  width: 100%; font: 400 var(--fs-13)/1 var(--font-ui); color: var(--ink-1);
  background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-2);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.form-input, .form-select { height: var(--ctl-md); padding: 0 var(--sp-3); }
.form-textarea { min-height: 96px; padding: var(--sp-3); line-height: 20px; resize: vertical; }
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-4); }

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.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 { box-shadow: var(--ring-danger); }

.form-input:disabled, .form-select:disabled, .form-textarea:disabled {
  background: var(--sunken); color: var(--ink-4); cursor: not-allowed;
}
.form-input[readonly], .form-textarea[readonly] { background: var(--subtle); }
.form-input[readonly]:focus, .form-textarea[readonly]:focus { border-color: var(--line-3); 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-16); }

/* select + galonul de chevron pe wrapper (o pictogramă-ligatură, nu un SVG colorat) */
.form-select { appearance: none; -webkit-appearance: none; padding-right: 36px; 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-3); top: 50%; transform: translateY(-50%);
  font-family: 'Material Symbols Rounded'; font-size: var(--icon-18); line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  font-feature-settings: 'liga'; color: var(--ink-3); pointer-events: none;
}

/* pictogramă în interiorul câmpului + acțiune finală */
.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-3); top: 50%; transform: translateY(-50%);
  font-size: var(--icon-18); color: var(--ink-3); pointer-events: none;
  transition: color var(--dur-1) var(--ease-out);
}
.input-icon:focus-within > .material-icons,
.search-input-wrapper:focus-within > .material-icons { color: var(--accent-strong); }
.input-icon > .form-input, .search-input-wrapper > .form-input { padding-left: var(--sp-10); }
.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: 44px; }

/* varianta mare (login) */
.input-icon:has(.input-lg) > .material-icons { left: 14px; font-size: var(--icon-20); }
.input-icon:has(.input-lg) > .form-input { padding-left: 44px; }
.input-icon:has(.input-lg) > .input-action { right: var(--sp-2); }
.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: 48px; }

/* mono (număr auto, IBAN) — majusculele se impun în JS la blur, nu din CSS */
.form-input.code { font: 500 var(--fs-13) var(--font-mono); }

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

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

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

.form-builder { display: flex; flex-direction: column; gap: var(--sp-5); }
.form-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.form-section + .form-section { padding-top: var(--sp-5); border-top: 1px solid var(--line-2); }
.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: 600 var(--fs-16)/24px var(--font-ui); letter-spacing: -.01em; color: var(--ink-1);
}
.form-section-title .material-icons { font-size: var(--icon-18); }

/* 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-3) 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-3) var(--sp-4); }
.col-span-2 { grid-column: span 2; }
.col-span-full { grid-column: 1 / -1; }

.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: 500 var(--fs-12)/16px var(--font-ui); color: var(--ink-2);
}
.form-label .req { color: var(--danger-ink); }
.form-label .req:empty::before { content: '*'; }
.form-hint { font: 400 var(--fs-12)/16px var(--font-ui); color: var(--ink-3); }
.form-error {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font: 400 var(--fs-12)/16px var(--font-ui); color: var(--danger-ink);
}
.form-error .material-icons { font-size: var(--fs-14); }

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

.form-checkbox, input[type=radio] {
  position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: var(--surface); border: 1.5px solid var(--line-3); border-radius: 4px; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
input[type=radio] { border-radius: var(--r-full); }
.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 / 12px 12px 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 / 12px 12px no-repeat;
  transition: opacity var(--dur-1) var(--ease-out);
}
.form-checkbox:checked::after { opacity: 1; }
.form-checkbox:indeterminate::after { opacity: 0; }
.form-checkbox:indeterminate::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 2px;
  margin: -1px 0 0 -4px; background: var(--on-accent); border-radius: 1px;
}
input[type=radio]:checked::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; background: var(--on-accent); border-radius: var(--r-full);
}

.form-checkbox-wrapper, .form-radio-label {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0;
  min-height: var(--touch); font-size: var(--fs-13); color: var(--ink-1); cursor: pointer;
}
.form-radio-group { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }

.switch { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); 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: 36px; height: 20px;
  background: var(--line-3); border-radius: var(--r-full);
  transition: background-color var(--dur-2) var(--ease-out);
}
.switch-track::after {
  content: ''; position: absolute; top: 2px; left: 0; width: 16px; height: 16px;
  background: var(--surface); border-radius: var(--r-full); box-shadow: var(--shadow-1);
  transform: translateX(2px); transition: transform var(--dur-2) var(--ease-out);
}
.switch > input:checked + .switch-track { background: var(--accent); }
.switch > input:checked + .switch-track::after { transform: translateX(18px); }
.switch > input:focus-visible + .switch-track { box-shadow: var(--ring); }
.switch > input:disabled + .switch-track { opacity: .5; }
.switch-label { font-size: var(--fs-13); color: var(--ink-1); min-width: 0; }
/* Varianta din celula de tabel: doar pista, fara eticheta, centrata pe rand. */
.switch--cell { gap: 0; min-height: 0; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════════
   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 CONTROL SEGMENTAT (presetări de filtru)
   ══════════════════════════════════════════════════════════════════════════ */

.filter-presets {
  display: inline-flex; align-items: center; gap: var(--sp-half); flex: 0 0 auto;
  height: var(--ctl-md); padding: 3px;
  /* Conturul e `--line-3`, ca al oricărui alt control de pe rândul de toolbar:
     altfel pista se pierde în canvas și rămân vizibile doar chip-ul activ. */
  background: var(--subtle); border: 1px solid var(--line-3); border-radius: var(--r-2);
}
.preset-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: 100%; padding: 0 var(--sp-3); border: 0; background: transparent; border-radius: var(--r-1);
  font: 500 var(--fs-13)/1 var(--font-ui); color: var(--ink-2); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.filter-presets:empty { display: none; }
.preset-chip.is-active { background: var(--surface); color: var(--ink-1); font-weight: 600; box-shadow: var(--shadow-1); }
.preset-chip:focus-visible { outline: none; box-shadow: var(--ring-inset); }

/* variantă compactă — singurul loc unde pista e --ctl-sm (chip 26 px la 32) */
.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-2); }

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

.month-picker {
  position: relative; display: inline-grid; grid-template-columns: var(--ctl-md) 1fr var(--ctl-md);
  width: 224px; height: var(--ctl-md); flex-shrink: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-2);
}
.month-picker > .btn { width: 100%; height: 100%; border: 0; border-radius: 0; }
.month-prev { border-right: 1px solid var(--line-2); }
.month-next { border-left: 1px solid var(--line-2); }
.month-label {
  height: 100%; padding: 0 var(--sp-2); border: 0; background: transparent; cursor: pointer;
  font: 500 var(--fs-13)/1 var(--font-ui); color: var(--ink-1); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Lună ≠ luna curentă (MonthPicker pune .is-other pe etichetă) */
.month-label.is-other { color: var(--accent-strong); }
.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: 240px; }
.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-2);
  font: 500 var(--fs-13)/1 var(--font-ui); color: var(--ink-1); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.month-cell.is-active { background: var(--accent-soft); color: var(--accent-onsoft); font-weight: 600; }
.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-16); 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: 240px; max-height: 320px; 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: 120px; padding: var(--sp-6);
  border: 1px dashed var(--line-3); border-radius: var(--r-3); background: var(--canvas);
  font-size: var(--fs-13); color: var(--ink-3); text-align: center; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.file-upload-dropzone .material-icons { font-size: var(--icon-24); }
.file-upload-dropzone b { font-weight: 600; 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); }

.file-upload-preview {
  display: flex; align-items: center; gap: var(--sp-3); min-width: 0;
  padding: var(--sp-3); border: 1px solid var(--line-1); border-radius: var(--r-3);
}
.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(--subtle); 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)
   ══════════════════════════════════════════════════════════════════════════ */

@media (hover: hover) {
  .btn-icon:hover      { background: var(--subtle); }
  .btn-primary:hover   { background: var(--accent-strong); }
  .btn-secondary:hover { background: var(--subtle); border-color: var(--ink-4); }
  .btn-ghost:hover     { background: var(--subtle); --btn-fg: var(--ink-1); }
  .btn-danger:hover    { background: var(--danger-ink); }
  .btn-success:hover   { background: color-mix(in srgb, var(--success-soft), var(--success) 12%); }
  .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:disabled:hover, .form-select:disabled:hover,
  .form-textarea:disabled:hover, .form-input[readonly]:hover { border-color: var(--line-3); }

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

  .preset-chip:hover { color: var(--ink-1); }
  .month-cell: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); }
}

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

@media (min-width: 1024px) {
  .form-grid-2, .form-grid-3, .form-grid-4 { gap: 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 */
  .form-input, .form-select, .form-textarea, input[type=date], input[type=month] { font-size: var(--fs-16); }

  .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .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; }
}