input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
textarea,
select {
  box-shadow: var(--shadow-input) inset;
  border: var(--border-width) solid var(--color-border-medium);
  padding: var(--spacing-xs);
  user-select: text;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  cursor: pointer;
  margin-right: var(--spacing-xs);
  transition: all var(--transition-slow);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-shadow);
}

select {
  font-size: var(--font-size-sm) !important;
}

/* Labels */
label {
  margin-right: 7px;
  white-space: pre;
  color: var(--color-text);
}

.req-star {
  color: var(--color-danger);
  margin-left: 2px;
}

.cg-form-fieldset {
  border: var(--border-width) solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  margin: 0 0 var(--spacing-md);
}

.cg-form-fieldset legend {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  padding: 0 var(--spacing-xs);
}

.cg-form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.cg-form-group label.cg-form-check {
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.cg-form-check input[type='checkbox'] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.cg-form-check:has(input:checked) {
  color: var(--color-text-dark);
}

.cg-form-check:has(input:disabled) {
  color: var(--color-text-lighter);
  cursor: not-allowed;
}

.cg-form-check input[type='checkbox']:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Chip form of .cg-form-check for inline flag rows in forms. */
.cg-form-flags .cg-form-check {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: var(--border-width) solid var(--color-border-medium);
  border-radius: var(--radius-full);
  background: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.cg-form-flags .cg-form-check:hover {
  border-color: var(--color-primary-border-strong);
  background: var(--color-primary-lighter);
}

.cg-form-flags .cg-form-check:has(input:checked) {
  border-color: var(--color-primary-border-strong);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* Day flags reuse their calendar colours so the form matches the grid. */
.cg-form-flags .cg-form-check:has(input[name='telelavoro']:checked) {
  border-color: var(--color-cal-telelavoro-border);
  background: var(--color-cal-telelavoro);
  color: var(--color-cal-telelavoro-text);
}

.cg-form-flags .cg-form-check:has(input[name='reperibilita']:checked) {
  border-color: var(--color-cal-reperibilita-border);
  background: var(--color-cal-reperibilita);
  color: var(--color-cal-reperibilita-text);
}

/* date-guard: flags a pre-floor date instead of rewriting the value.
   Lives here (not cg-shared-forms.css) because this file loads on every page. */
.cg-field-date-error {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold, 600);
  margin-top: 4px;
  line-height: 1.35;
}

input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-danger-shadow, rgba(220, 38, 38, 0.15));
}

/* Canonical field chrome. `.pres-input` and the `fe-*` family share one
   definition, so inline forms and modal fields never drift apart. */
.pres-input {
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-width) solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  background: var(--color-white);
  color: var(--color-text-dark);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-right: 0;
  line-height: 1.4;
  cursor: text;
  transition: border-color var(--transition-fast);
}

.pres-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-input);
}

.pres-input::placeholder {
  color: var(--color-text-lighter);
}

/* Hours and money read right-aligned and keep columns straight. */
input.pres-input[type='number'] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

select.pres-input {
  cursor: pointer;
}

textarea.pres-input {
  min-height: 72px;
  resize: vertical;
  line-height: 1.45;
}

.pres-input:read-only,
.pres-input[readonly] {
  background: var(--color-bg-light);
  color: var(--color-text-light);
  cursor: default;
}

.pres-input:read-only:focus,
.pres-input[readonly]:focus {
  border-color: var(--color-border-medium);
  box-shadow: none;
}

@media (max-width: 600px) {
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  input[type="password"],
  textarea {
    font-size: var(--font-size-touch);
    min-height: 44px;
  }

  /* Override base select !important so iOS does not zoom on focus */
  select {
    font-size: var(--font-size-touch) !important;
    min-height: 44px;
  }

  /* Class rule at .pres-input (0,1,0) beats element selectors above */
  .pres-input {
    font-size: var(--font-size-touch);
    min-height: 44px;
  }
}

/* ===== Form fields =====
   Single owner for .cg-form-group / .cg-form-grid. This file is loaded on
   every page (header.php), so these rules apply everywhere — previously
   cg-shared-forms.css was opt-in and 6 pages rendered form groups with no
   grid, no full-width and no has-error styling at all. */

.cg-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.cg-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.cg-form-group.full-width {
  grid-column: 1 / -1;
}

.cg-form-group label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Neutralise the global `label` rule below, which is for inline chrome. */
  margin-right: 0;
  white-space: normal;
}

.cg-form-group label .req-star {
  color: var(--color-danger);
  margin-left: 2px;
}

/* Bare inputs fall back to the group's own field styling; the canonical field
   class (`.pres-input`) always wins over this. Checkboxes and radios are
   excluded on purpose: stretched to the group width with field
   padding they stop looking like controls (and overflow the modal). */
.cg-form-group input:not(.pres-input):not([type='checkbox']):not([type='radio']),
.cg-form-group select:not(.pres-input) {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-right: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  transition: border-color var(--transition-fast, 0.2s);
  background: var(--color-white);
}

.cg-form-group input:not(.pres-input):not([type='checkbox']):not([type='radio']):focus,
.cg-form-group select:not(.pres-input):focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-input);
}

/* Money/amount field: a whole-row input reads as a form error, keep it compact. */
.pres-input--amount {
  max-width: 10rem;
}

/* Inline field row (amount + day flags, filters…): wraps instead of forcing
   the modal content wider than its box. */
.cg-form-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-md);
}

.cg-form-row > .cg-form-group {
  margin: 0;
}

/* Row of inline controls (e.g. the presence day flags). */
.cg-form-flags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-sm);
}

/* A flag row is usually authored as a `.cg-form-group` too, and that class is a
   COLUMN. Left alone, "Lavoro da remoto" and "Reperibilità" stacked in a narrow
   strip inside the row beside them, wasting the width and crowding the fields
   above. Restate the row axis here so the element wins against itself, and let it
   take the width it needs instead of shrinking to one chip per line. */
.cg-form-group.cg-form-flags {
  flex-direction: row;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--spacing-sm);
}

/* Inline form validation (tessera modal, vehicle forms, cost-form). */
.cg-form-group.has-error input,
.cg-form-group.has-error select {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger) 15%, transparent) !important;
  background: color-mix(in srgb, var(--color-danger) 4%, var(--color-white)) !important;
}

/* Unit suffix rendered beside a control (e.g. "h" for hours). */
.cg-field-unit {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-lighter);
}

/* Entity picker field (commessa / veicolo / dipendente). The picker module
   mounts into .cg-field-picker and owns the dropdown. */
.cg-field-picker {
  position: relative;
  display: block;
}

.cg-field-picker-dropdown {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

/* Segmented mode switch for a field whose meaning changes (€/L <-> Totale). */
.cg-field-mode-switch {
  margin-left: auto;
}

.cg-form-group:has(> .cg-field-mode-switch) {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Field hint. The canonical class is .cg-field-hint; .modal-hint is the
   long-standing alias and is owned by components-modals.css (modal chrome). */
.cg-field-hint {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-text-lighter);
}

/* Inline field error — canonical form (date-guard, tessera, cost-form). */
.cg-field-error {
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .cg-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Shared search + date filter chrome (analisi + fatture). Kept here so index
   pages get layout without loading fatture-emesse.css.
   Prefer the structured .fe-search-row toolbar so the native date pickers do
   not smash into one chrome box. */

.fe-search-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 560px;
  min-width: 0;
}

/* Legacy flat chrome (direct children only — no .fe-search-row) */
.fe-search-group:not(:has(.fe-search-row)) {
  background: var(--color-bg-gray);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  padding: 4px 6px;
  transition: border-color 0.2s;
}

.fe-search-group:not(:has(.fe-search-row)):focus-within {
  border-color: var(--color-primary);
  background: var(--color-white);
}

.fe-search-row {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  background: var(--color-bg-gray);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  padding: 2px 4px;
  transition: border-color 0.2s, background 0.2s;
}

.fe-search-row:focus-within {
  border-color: var(--color-primary);
  background: var(--color-white);
}

.fe-search-input {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
  font-size: var(--font-size-xs) !important;
  font-family: var(--font-family);
  color: var(--color-text);
  outline: none;
}

.fe-search-input::placeholder {
  color: var(--color-text-lighter);
  opacity: 0.85;
}

.fe-search-input[type="search"]::-webkit-search-decoration,
.fe-search-input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.fe-date-input {
  width: 118px;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 2px !important;
  font-size: var(--font-size-2xs) !important;
  font-family: var(--font-family);
  color: var(--color-text);
  cursor: pointer;
  border-radius: 0 !important;
  outline: none;
}

/* Legacy: divider between flat date inputs inside one chrome */
.fe-search-group:not(:has(.fe-search-row)) > .fe-date-input {
  border-left: 1px solid var(--color-border-medium) !important;
}

.fe-date-input:focus {
  color: var(--color-primary);
}

.fe-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--color-text-lighter);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0;
  transition: all 0.15s;
  flex-shrink: 0;
}

.fe-clear-btn:hover {
  background: var(--color-bg-gray-dark);
  color: var(--color-danger);
}

@media (max-width: 600px) {
  .fe-search-group,
  .custom-analysis-search .fe-search-group,
  .analysis-reconcile-toolbar-search .fe-search-group {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    width: 100%;
    gap: 6px;
  }

  .fe-search-group:not(:has(.fe-search-row)) {
    padding: 4px;
  }

  .fe-search-row {
    width: 100%;
    padding: 2px 4px;
  }

  /* Beat global 44px input floor; keep 16px to avoid iOS zoom */
  input.fe-search-input {
    font-size: var(--font-size-touch) !important;
    min-height: 34px !important;
    padding: 4px 8px !important;
  }

  input.fe-date-input {
    width: auto;
    flex: 1;
    font-size: var(--font-size-touch) !important;
    min-height: 30px !important;
    padding: 2px !important;
  }

  .fe-search-group:not(:has(.fe-search-row)) > input.fe-date-input {
    flex: 1 1 calc(50% - 4px);
    width: auto;
    border-left: none !important;
    border-top: 1px solid var(--color-border-medium) !important;
    font-size: var(--font-size-touch) !important;
    min-height: 34px !important;
  }

  .fe-clear-btn {
    width: 34px;
    height: 34px;
  }
}