/* ============================================================================
   KM39 BACK OFFICE — app.css
   Reset + base element styles + component classes.
   Bootstrap default look is NOT used; tokens are the sole source of truth.
   Pairs with colors_and_type.css (the token file).
   ============================================================================ */

@import url("colors_and_type.css");

/* --- RESET ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(h1,h2,h3,h4) { text-wrap: balance; line-height: var(--leading-tight); }
:where(p) { text-wrap: pretty; }

/* numerals: prices, counts, times, codes always align */
.tnum, table, .price, .count, time, code { font-variant-numeric: tabular-nums; }

/* --- FOCUS (visible, gold, 2px + offset) ----------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

/* --- BASE HEADINGS --------------------------------------------------------- */
h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold);     color: var(--ink); letter-spacing: -0.01em; }
h2 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); color: var(--ink); letter-spacing: -0.005em; }
h3 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); color: var(--ink); }

/* ============================================================================
   BUTTONS — label = verb + object ("Conferma ordine"), never "OK"/"Sì".
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--touch-min); padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--r-control);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* primary = gold bg + near-black ink (gold+white fails contrast) */
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-strong); }

/* ghost = quiet, for secondary actions */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-2); }

/* confirm = positive primary action (conferma / avanza ordine) — green */
.btn--confirm { background: var(--confirm); color: var(--confirm-ink); }
.btn--confirm:hover { background: var(--confirm-strong); }

/* danger = destructive (cancel / refund), never an ambiguous lone gold */
.btn--danger { background: var(--danger); color: var(--danger-ink); }
.btn--danger:hover { background: var(--danger-strong); }

.btn--sm { min-height: 34px; padding: 0 var(--sp-3); font-size: var(--text-xs); }

/* ============================================================================
   FORM FIELD — label associated, invalid state, hint/error text beside field.
   ============================================================================ */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink); }
.field__hint  { font-size: var(--text-xs); color: var(--muted); }
.field__error { font-size: var(--text-xs); color: var(--danger-strong); font-weight: var(--weight-medium); }

.input, .select, .textarea {
  width: 100%; min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--r-control);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.textarea { min-height: 88px; padding: var(--sp-3); resize: vertical; line-height: var(--leading-body); }
/* placeholder is text → needs WCAG AA 4.5:1; --muted (~3.2:1) fails, use --ink-soft */
.input::placeholder, .textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-soft); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 25%, transparent);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent); }

/* ============================================================================
   STATUS BADGE — pill + text label + pictogram. Never color alone.
   ============================================================================ */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2); border-radius: var(--r-pill);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  line-height: 1.4; white-space: nowrap;
}
.badge__icon { font-size: 0.9em; line-height: 1; }
.badge--pending   { background: var(--st-pending-bg);   color: var(--st-pending-fg); }
.badge--confirmed { background: var(--st-confirmed-bg); color: var(--st-confirmed-fg); }
.badge--preparing { background: var(--st-preparing-bg); color: var(--st-preparing-fg); }
.badge--ready     { background: var(--st-ready-bg);     color: var(--st-ready-fg); }
.badge--outroute  { background: var(--st-outroute-bg);  color: var(--st-outroute-fg); }
.badge--delivered { background: var(--st-delivered-bg); color: var(--st-delivered-fg); }
.badge--cancelled { background: var(--st-cancelled-bg); color: var(--st-cancelled-fg); }

/* ============================================================================
   CARD / PANEL — never nested. The lazy affordance; use only when needed.
   ============================================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-6);
}
.card--raised { box-shadow: var(--shadow-1); }
.card__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--sp-2); }

/* ============================================================================
   TABLE — sticky header, zebra surface-2, tabular-nums, row actions.
   ============================================================================ */
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table thead th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--surface); text-align: left;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-strong);
}
.table tbody td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.table tbody tr:nth-child(even) { background: var(--surface-2); }
.table tbody tr:hover { background: var(--accent-wash); }
.table .col-actions { text-align: right; }

/* ============================================================================
   MODAL — use <dialog> to avoid clipping by overflow ancestors.
   ============================================================================ */
.dialog {
  border: none; border-radius: var(--r-card); padding: 0;
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
  background: var(--surface); box-shadow: var(--shadow-2);
  max-width: 520px; width: calc(100vw - var(--sp-8)); color: var(--ink);
}
/* In scuro il velo deve essere più denso: su fondo già scuro un 38% non
   stacca il modale dal resto. */
.dialog::backdrop { background: oklch(0.16 0.02 260 / 0.45); }
[data-theme="dark"] .dialog::backdrop { background: oklch(0 0 0 / 0.62); }
.dialog__head { padding: var(--sp-6) var(--sp-6) var(--sp-3); }
.dialog__body { padding: 0 var(--sp-6); }
.dialog__foot { padding: var(--sp-6); display: flex; gap: var(--sp-3); justify-content: flex-end; }

/* ============================================================================
   TOAST
   ============================================================================ */
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--ink); color: var(--surface);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-control);
  box-shadow: var(--shadow-2); font-size: var(--text-sm);
}

/* ============================================================================
   STATES — empty / loading skeleton
   ============================================================================ */
.empty { text-align: center; padding: var(--sp-12) var(--sp-6); color: var(--ink-soft); }
.empty__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink); margin-bottom: var(--sp-2); }
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; border-radius: var(--r-control);
  animation: skeleton 1.2s ease-in-out infinite;
}
@keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }