/* ---------------------------------------------------------
   6. Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
  /* ghost default: a bare .btn must not fall back to the UA button
     background (white), which breaks dark mode */
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease),
    transform var(--motion-fast) var(--ease);
  white-space: nowrap;
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent-fill);
  color: var(--on-accent);
  border-color: var(--accent-fill);
}
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); text-decoration: none; color: var(--on-accent); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-fill);
  color: var(--accent-ink);
  text-decoration: none;
}

/* Filter-apply buttons ("Filtra"): a tinted-accent variant so this recurring
   action reads as distinct from the neutral grey secondary buttons around it,
   without competing with the solid primary CTA. Stays in the Registro blue
   family (DESIGN_CONTRACT §2) and is token-only, so it themes in light + dark. */
.btn-filter {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent-fill);
}
.btn-filter:hover {
  background: var(--accent-fill);
  color: var(--on-accent);
  border-color: var(--accent-fill);
  text-decoration: none;
}

.btn-danger {
  background: var(--color-surface);
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.btn-danger:hover { background: var(--st-bad-bg); text-decoration: none; color: var(--color-danger); }

/* Ghost-danger (docs/ui/DESIGN_CONTRACT.md §4): a ghost button with danger
   text — same shape as .btn-secondary, danger ink instead of neutral ink.
   Used for destructive actions that shouldn't read as loud as a solid
   .btn-danger (e.g. "Rifiuta" beside a solid "Approva"). */
.btn-ghost-danger {
  background: var(--color-surface);
  color: var(--color-danger);
  border-color: var(--color-border-strong);
}
.btn-ghost-danger:hover {
  background: var(--st-bad-bg);
  border-color: var(--color-danger);
  text-decoration: none;
}

.btn-edit {
  background: var(--color-surface);
  color: var(--accent-ink);
  border-color: var(--accent-fill);
}
.btn-edit:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-decoration: none;
}

.actions a.btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger),
.row-actions a.btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger) {
  background: var(--color-surface);
  color: var(--accent-ink);
  border-color: var(--accent-fill);
}
.actions a.btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):hover,
.row-actions a.btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-decoration: none;
}

.btn-sm {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs);
}

/* Compact quiet row action (§6-ter "one primary per view" / action density):
   repeated per-row actions (e.g. "Rinnova" on every scadenzario row) must
   never be a solid .btn-primary. Lower profile than .btn-sm (1.75rem, no
   border) — sits between a bare text link and a bordered button. */
.btn--row {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 1.75rem;
  padding: 0 var(--sp-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease);
}
.btn--row:hover,
.btn--row:focus-visible {
  background: var(--accent-soft);
  text-decoration: none;
}
.btn--row:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.btn--row.btn--row-danger {
  color: var(--color-danger);
}
.btn--row.btn--row-danger:hover,
.btn--row.btn--row-danger:focus-visible {
  background: var(--st-bad-bg);
}

/* Touch-target floor: .btn-sm (~28px tall) is the row-action button used in
   every list table — Modifica/Elimina/Stato/Matrice etc. — across the app.
   On a touchscreen that is below the ~44px minimum tap target, with a
   destructive action (Elimina) often sitting right next to it. Gate the fix
   on (pointer: coarse) so it only applies to touch input: desktop/laptop
   layouts with a mouse or trackpad as the primary pointer (incl. hybrid
   touch laptops, which report pointer: fine) keep the current compact
   density unchanged. */
@media (pointer: coarse) {
  .btn {
    min-height: 2.75rem;
  }

  .btn-sm {
    min-height: 2.75rem;
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
  }

  .btn--row {
    min-height: 2.5rem;
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }
}

.density-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.density-toolbar__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.density-toggle,
[data-density-toggle] {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2rem;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease),
    box-shadow var(--motion-fast) var(--ease),
    transform var(--motion-fast) var(--ease);
}

.density-toggle:hover,
[data-density-toggle]:hover {
  background: var(--accent-soft);
  border-color: var(--accent-fill);
}

.density-toggle:active,
[data-density-toggle]:active {
  transform: translateY(1px);
}

.density-toggle:focus-visible,
[data-density-toggle]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.density-toggle[aria-pressed="true"],
[data-density-toggle][aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-fill);
  color: var(--accent-ink);
}