/* Componenti del tema "Linea nero-oro". Classi semantiche riusabili.
   Port di zero1dev-ui-template/src/utils/buttonStyles.ts + src/ui/*: i template
   Django usano queste classi, mai colori a mano. */
* { box-sizing: border-box; }

/* --- Bottoni --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid transparent; border-radius: var(--r-control);
  padding: .5rem .75rem;
  font-family: inherit; font-size: var(--text-body); font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), filter var(--dur-fast);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) { .btn:active { transform: scale(.98); } }

.btn--primary { background: rgb(var(--c-brand)); color: rgb(var(--c-on-brand)); padding: .5rem 1rem; font-weight: 600; box-shadow: var(--light-inset); }
.btn--primary:hover { filter: brightness(.95); }
.btn--standard { background: rgb(var(--c-surface)); color: rgb(var(--c-ink)); border-color: rgb(var(--c-line)); }
.btn--standard:hover { background: rgb(var(--n-50)); }
.btn--secondary { background: rgb(var(--c-ink)); color: #fff; padding: .5rem 1rem; }
.btn--secondary:hover { background: rgb(var(--n-700)); }
.btn--neutral { background: rgb(var(--n-100)); color: rgb(var(--c-ink)); padding: .5rem 1rem; }
.btn--neutral:hover { background: rgb(var(--n-200)); }
.btn--ghost { background: transparent; color: rgb(var(--c-ink)); }
.btn--ghost:hover { background: rgb(var(--n-100)); }
.btn--danger { background: rgb(var(--bad-600)); color: #fff; padding: .5rem 1rem; }
.btn--danger:hover { background: rgb(var(--bad-700)); }
.btn--success { background: rgb(var(--ok-600)); color: #fff; padding: .5rem 1rem; }
.btn--success:hover { background: rgb(var(--ok-700)); }
.btn--sm { padding: .375rem .75rem; font-size: .875rem; }
.btn--xs { padding: .25rem .5rem; font-size: .75rem; }
.btn--block { width: 100%; }

/* --- Card e superfici (PATTERNS §3) --- */
.card { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: var(--r-card); padding: 1.5rem; }
/* Unica elevazione ammessa: superfici flottanti (dropdown, modale, header sticky). */
.surface-float { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line-strong)); border-radius: var(--r-card); box-shadow: var(--shadow-float); }

/* --- Campi --- */
.field {
  width: 100%; padding: .625rem 1rem;
  background: rgb(var(--c-surface)); color: rgb(var(--c-ink));
  border: 1px solid rgb(var(--n-300)); border-radius: var(--r-control);
  font-family: inherit; font-size: var(--text-body);
  transition: border-color var(--dur-fast);
}
.field:focus-visible { border-color: rgb(var(--c-ink)); }
.field--compact { padding: .25rem .5rem; font-size: .875rem; }
.label { display: block; font-size: .875rem; font-weight: 500; color: rgb(var(--n-700)); margin-bottom: .25rem; }

/* --- Badge / tag di stato --- */
.badge { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: var(--r-pill); font-size: .875rem; font-weight: 500; }
.badge--neutral { background: rgb(var(--n-100)); color: rgb(var(--n-600)); }
.badge--pending { background: rgb(var(--warn-100)); color: rgb(var(--c-ink)); }
.badge--ok { background: rgb(var(--ok-100)); color: rgb(var(--ok-700)); }
.badge--bad { background: rgb(var(--bad-100)); color: rgb(var(--bad-700)); }

/* --- Tab e filtri (attivo = campo oro, stesso accento ovunque) --- */
.tab, .filter {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: var(--r-control);
  border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface)); color: rgb(var(--c-ink));
  font-size: .875rem; font-weight: 500; cursor: pointer; text-decoration: none;
}
.tab:hover, .filter:hover { background: rgb(var(--n-50)); }
.tab.is-active, .filter.is-active {
  border-color: rgb(var(--c-brand)); background: rgb(var(--c-brand)); color: rgb(var(--c-on-brand));
  box-shadow: var(--light-inset);
}

/* --- Avvisi --- */
.notice { display: flex; gap: .5rem; align-items: flex-start; padding: .75rem .875rem; margin-bottom: 1rem; border-radius: var(--r-control); font-size: .875rem; line-height: 1.45; }
.notice svg { flex: none; margin-top: 1px; }
.notice.error   { background: rgb(var(--bad-50));  color: rgb(var(--bad-700)); }
.notice.warning { background: rgb(var(--warn-50)); color: rgb(var(--warn-700)); }
.notice.success { background: rgb(var(--ok-50));   color: rgb(var(--ok-700)); }

/* --- Utility --- */
.muted { color: rgb(var(--c-muted)); font-size: .8125rem; line-height: 1.5; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.dim { opacity: .55; }
.icon-tile { width: 48px; height: 48px; border-radius: var(--r-control); background: rgb(var(--ok-100)); color: rgb(var(--ok-700)); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }