/* ============================================================
 * Aedis · Brezza — Components (v2.x — :root, no theme switch)
 * Classes prefissate .ax-* per zero collisioni Bootstrap.
 * No !important; importare tokens.css PRIMA di questo file.
 * ============================================================ */

/* ─── Layout shell ─── */
.ax-app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr;
  min-height: 100vh;
  background: var(--bg);
}
.ax-rail {
  grid-row: 1 / span 2;
  background: var(--bg-tint);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: var(--sp-3) 0;
  position: sticky; top: 0; height: 100vh;
}
.ax-rail-brand {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-4) var(--sp-4);
}
.ax-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500; font-size: 17px;
}
.ax-rail-section {
  font-size: var(--fs-12); color: var(--ink-3);
  font-weight: var(--fw-semibold); letter-spacing: 0.1em;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  text-transform: none;
}
.ax-nav { padding: 0 var(--sp-2); }
.ax-nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--fs-13); font-weight: var(--fw-medium);
  margin-bottom: 2px;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  cursor: pointer; border: 1px solid transparent;
}
.ax-nav-item:hover {
  background: color-mix(in oklab, var(--primary-bg) 60%, transparent);
  color: var(--ink);
}
.ax-nav-item.is-active,
.ax-nav-item.active {
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--fw-semibold);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.ax-nav-dot {
  width: 8px; height: 8px; border-radius: 3px;
  background: var(--border-strong);
  flex-shrink: 0;
}
.ax-nav-item.is-active .ax-nav-dot,
.ax-nav-item.active .ax-nav-dot { background: var(--primary); }

/* Bootstrap Icons dentro .ax-nav-item: alternativa più semantica al .ax-nav-dot.
   Stato a riposo dim, vira a --primary su hover/active per coerenza col dot. */
.ax-nav-item > .bi {
  font-size: 1.05rem;
  flex-shrink: 0;
  color: var(--ink-3);
  transition: color var(--dur-2) var(--ease-out);
}
.ax-nav-item:hover > .bi,
.ax-nav-item.is-active > .bi,
.ax-nav-item.active > .bi { color: var(--primary); }
.ax-nav-item .ax-nav-label { flex: 1; }
.ax-nav-badge {
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink-2);
}
.ax-nav-badge.is-warn { background: var(--warning-bg); color: var(--warning-fg); }
.ax-nav-badge.is-danger { background: var(--danger-bg); color: var(--danger-fg); }

/* ─── Header ─── */
.ax-header {
  height: 60px;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.ax-breadcrumb {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-13); color: var(--ink-3);
}
.ax-breadcrumb b { color: var(--ink); font-weight: var(--fw-semibold); }
.ax-breadcrumb .sep { color: var(--ink-3); opacity: 0.6; }

.ax-search {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-width: 320px; max-width: 480px;
  color: var(--ink-3); font-size: var(--fs-13);
  cursor: pointer;
  transition: border-color var(--dur-2);
}
.ax-search:hover { border-color: var(--border-2); }
.ax-search .kbd {
  margin-left: auto; padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-12);
  background: var(--surface-2); color: var(--ink-3);
}

.ax-icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: transparent; border: 1px solid transparent;
  display: grid; place-items: center;
  color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
  position: relative;
}
.ax-icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.ax-icon-btn .ax-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}

.ax-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary);
  color: var(--ink-on-accent);
  display: grid; place-items: center;
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 13px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

/* ─── Buttons ─── */
.ax-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-13); font-weight: var(--fw-semibold);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
  white-space: nowrap;
  text-decoration: none;
  min-height: 38px;
}
.ax-btn.is-primary {
  background: var(--primary); color: var(--ink-on-accent);
  box-shadow: var(--shadow-sm);
}
.ax-btn.is-primary:hover { background: var(--primary-hover); }
.ax-btn.is-secondary {
  background: var(--surface); color: var(--ink);
  border-color: var(--border-2);
}
.ax-btn.is-secondary:hover { border-color: var(--ink-3); background: var(--surface-2); }
.ax-btn.is-ghost {
  background: transparent; color: var(--ink-2);
}
.ax-btn.is-ghost:hover { background: var(--surface-2); color: var(--ink); }
.ax-btn.is-danger {
  background: var(--danger); color: #fff;
}
.ax-btn.is-accent {
  background: var(--accent); color: var(--ink-on-accent);
}
.ax-btn.is-link {
  background: transparent; color: var(--primary); padding: 0; min-height: 0;
}
.ax-btn.is-link:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.ax-btn.is-sm { padding: 6px 11px; min-height: 30px; font-size: var(--fs-12); border-radius: var(--r-sm); }
.ax-btn.is-lg { padding: 13px 20px; min-height: 46px; font-size: var(--fs-15); border-radius: var(--r-lg); }
.ax-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ─── Inputs ─── */
.ax-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.ax-label {
  font-size: var(--fs-12); color: var(--ink-2);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}
.ax-input {
  display: block; width: 100%;
  padding: 11px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-14);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.ax-input:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); outline: none; }
.ax-input.is-invalid { border-color: var(--danger); }
.ax-hint { font-size: var(--fs-12); color: var(--ink-3); }
.ax-error { font-size: var(--fs-12); color: var(--danger); display: flex; align-items: center; gap: 6px; }

/* ─── Card ─── */
.ax-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
.ax-card.is-flat { box-shadow: none; }
.ax-card.is-tint { background: var(--surface-2); }
.ax-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4);
  gap: var(--sp-3);
}
.ax-card-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-20); letter-spacing: -0.01em;
  margin: 0; color: var(--ink);
}

/* ─── KPI ─── */
.ax-kpi {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  overflow: hidden;
}
.ax-kpi-pebble {
  position: absolute; top: -30px; right: -30px;
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--surface-3);
}
.ax-kpi.is-primary  .ax-kpi-pebble { background: var(--primary-bg); }
.ax-kpi.is-accent   .ax-kpi-pebble { background: var(--accent-bg); }
.ax-kpi.is-warning  .ax-kpi-pebble { background: var(--warning-bg); }
.ax-kpi.is-success  .ax-kpi-pebble { background: var(--success-bg); }
.ax-kpi-glyph {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--font-display); font-size: 22px;
  color: var(--ink-3);
}
.ax-kpi.is-primary  .ax-kpi-glyph { color: var(--primary); }
.ax-kpi.is-accent   .ax-kpi-glyph { color: var(--accent); }
.ax-kpi.is-warning  .ax-kpi-glyph { color: var(--warning); }
.ax-kpi.is-success  .ax-kpi-glyph { color: var(--success); }
.ax-kpi-label {
  font-size: var(--fs-13); color: var(--ink-3); font-weight: var(--fw-medium);
  position: relative;
}
.ax-kpi-value {
  font-family: var(--font-sans); font-weight: var(--fw-bold);
  font-size: var(--fs-56); letter-spacing: -0.03em; line-height: 0.95;
  margin-top: 4px; color: var(--ink); position: relative;
  font-variant-numeric: tabular-nums;
}
.ax-kpi.is-primary  .ax-kpi-value { color: var(--primary); }
.ax-kpi.is-accent   .ax-kpi-value { color: var(--accent); }
.ax-kpi.is-warning  .ax-kpi-value { color: var(--warning); }
.ax-kpi.is-success  .ax-kpi-value { color: var(--success); }
.ax-kpi-sub {
  font-size: var(--fs-12); color: var(--ink-3); margin-top: var(--sp-3); position: relative;
}

/* ─── Auto-styling KPI per markup Bootstrap esistente ────────────────────
 * Intercetta i pattern legacy `.card.bg-light-*` usati in tutta la suite
 * SocialWS per i KPI e li ridipinge come .ax-kpi senza dover refactorare
 * il markup di ogni view. Il "pebble" colorato viene reso via ::before,
 * gli h2/h3 numerici diventano display Fraunces grandi.
 * ──────────────────────────────────────────────────────────────────────── */
.card.bg-light-primary,
.card.bg-light-success,
.card.bg-light-warning,
.card.bg-light-danger,
.card.bg-light-info,
.card.bg-light-secondary {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.card.bg-light-primary::before,
.card.bg-light-success::before,
.card.bg-light-warning::before,
.card.bg-light-danger::before,
.card.bg-light-info::before,
.card.bg-light-secondary::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.card.bg-light-primary::before   { background: var(--primary-bg); }
.card.bg-light-success::before   { background: var(--success-bg); }
.card.bg-light-warning::before   { background: var(--warning-bg); }
.card.bg-light-danger::before    { background: var(--danger-bg); }
.card.bg-light-info::before      { background: var(--c-indigo-50); }
.card.bg-light-secondary::before { background: var(--bg-tint); }

/* H2 / H3 numerici dentro questi card → display Fraunces grande tabular */
.card.bg-light-primary h2,
.card.bg-light-success h2,
.card.bg-light-warning h2,
.card.bg-light-danger h2,
.card.bg-light-info h2,
.card.bg-light-secondary h2,
.card.bg-light-primary h3,
.card.bg-light-success h3,
.card.bg-light-warning h3,
.card.bg-light-danger h3,
.card.bg-light-info h3,
.card.bg-light-secondary h3 {
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-40) !important;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}

/* Card-body resta sopra il pebble */
.card.bg-light-primary > .card-body,
.card.bg-light-success > .card-body,
.card.bg-light-warning > .card-body,
.card.bg-light-danger > .card-body,
.card.bg-light-info > .card-body,
.card.bg-light-secondary > .card-body {
  position: relative;
  z-index: 1;
}

/* ─── Chip / Badge ─── */
.ax-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  background: var(--surface-3); color: var(--ink-2);
}
.ax-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ax-chip.is-primary { background: var(--primary-bg); color: var(--primary-fg); }
.ax-chip.is-accent  { background: var(--accent-bg);  color: var(--accent-fg); }
.ax-chip.is-warning { background: var(--warning-bg); color: var(--warning-fg); }
.ax-chip.is-success { background: var(--success-bg); color: var(--success-fg); }
.ax-chip.is-danger  { background: var(--danger-bg);  color: var(--danger-fg); }
.ax-chip.is-outline { background: transparent; border: 1px solid var(--border-2); color: var(--ink-2); }

/* ─── Alert / Banner ─── */
.ax-alert {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.ax-alert-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-2);
  font-weight: var(--fw-bold);
}
.ax-alert-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-16); letter-spacing: -0.01em;
}
.ax-alert-body { font-size: var(--fs-13); color: var(--ink-2); margin-top: 2px; }
.ax-alert.is-info    { background: var(--primary-bg); border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); }
.ax-alert.is-info    .ax-alert-icon { background: var(--primary); color: #fff; }
.ax-alert.is-info    .ax-alert-title { color: var(--primary-fg); }
.ax-alert.is-success { background: var(--success-bg); border-color: color-mix(in oklab, var(--success) 30%, var(--border)); }
.ax-alert.is-success .ax-alert-icon { background: var(--success); color: #fff; }
.ax-alert.is-success .ax-alert-title { color: var(--success-fg); }
.ax-alert.is-warning { background: var(--warning-bg); border-color: color-mix(in oklab, var(--warning) 30%, var(--border)); }
.ax-alert.is-warning .ax-alert-icon { background: var(--warning); color: #fff; }
.ax-alert.is-warning .ax-alert-title { color: var(--warning-fg); }
.ax-alert.is-danger  { background: var(--danger-bg);  border-color: color-mix(in oklab, var(--danger) 30%, var(--border)); }
.ax-alert.is-danger  .ax-alert-icon { background: var(--danger);  color: #fff; }
.ax-alert.is-danger  .ax-alert-title { color: var(--danger-fg); }

/* ─── Table ─── */
.ax-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-13);
}
.ax-table thead th {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  color: var(--ink-3); letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  text-transform: uppercase;
}
.ax-table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--ink); vertical-align: middle;
}
.ax-table tbody tr:hover td { background: var(--surface-2); }
.ax-table .col-mono { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-2); }

/* ─── Tabs ─── */
.ax-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}
.ax-tab {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-13); font-weight: var(--fw-medium);
  color: var(--ink-3); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  transition: color var(--dur-2), border-color var(--dur-2);
}
.ax-tab:hover { color: var(--ink); }
.ax-tab.is-active { color: var(--ink); border-bottom-color: var(--primary); font-weight: var(--fw-semibold); }
.ax-tab .ax-tab-badge {
  font-size: var(--fs-11); font-weight: var(--fw-semibold);
  background: var(--surface-3); color: var(--ink-2);
  padding: 1px 7px; border-radius: var(--r-pill);
}
.ax-tab.is-active .ax-tab-badge { background: var(--primary-bg); color: var(--primary-fg); }

/* ─── AI Panel (first-class citizen) ─── */
.ax-ai-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  position: relative;
  overflow: hidden;
}
.ax-ai-panel::before {
  content: ""; position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--primary) 18%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.ax-ai-head {
  display: flex; align-items: center; gap: var(--sp-3);
  position: relative;
}
.ax-ai-mark {
  width: 28px; height: 28px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  display: grid; place-items: center;
  font-weight: var(--fw-bold); font-size: 12px;
}
.ax-ai-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-16); letter-spacing: -0.01em; margin: 0;
}
.ax-ai-tag {
  margin-left: auto;
  font-family: var(--font-mono); font-size: var(--fs-11);
  color: var(--ink-3); padding: 2px 7px;
  border: 1px solid var(--border); border-radius: var(--r-xs);
}
.ax-ai-message {
  font-size: var(--fs-13); color: var(--ink-2); line-height: var(--lh-base);
  position: relative;
}
.ax-ai-input {
  margin-top: auto;
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 12px;
  position: relative;
}
.ax-ai-input .arrow { color: var(--primary); font-weight: var(--fw-bold); }
.ax-ai-input input {
  flex: 1; border: 0; background: transparent;
  font-family: var(--font-sans); font-size: var(--fs-13);
  color: var(--ink); outline: none;
}
.ax-ai-input input::placeholder { color: var(--ink-3); }
.ax-ai-input .kbd {
  font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3);
  padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface);
}

/* ─── Drawer (right side) ─── */
.ax-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(13, 16, 24, 0.36);
  z-index: var(--z-modal); backdrop-filter: blur(2px);
  animation: ax-fade-in var(--dur-3) var(--ease-out);
}
.ax-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(540px, 96vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  display: flex; flex-direction: column;
  animation: ax-slide-right var(--dur-3) var(--ease-spring);
}
.ax-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.ax-drawer-body { padding: var(--sp-6); overflow: auto; flex: 1; }
.ax-drawer-foot {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
  display: flex; gap: var(--sp-3); justify-content: flex-end;
  background: var(--surface-2);
}

/* ─── Modal (centered dialog) ─── */
.ax-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(520px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  overflow: hidden;
  animation: ax-pop var(--dur-3) var(--ease-spring);
}

/* ─── Toasts ─── */
.ax-toast-stack {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  z-index: var(--z-toast);
}
.ax-toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-13); color: var(--ink);
  min-width: 280px;
  animation: ax-slide-up var(--dur-3) var(--ease-out);
}
.ax-toast .dot { width: 8px; height: 8px; border-radius: 50%; }
.ax-toast.is-success .dot { background: var(--success); }
.ax-toast.is-warning .dot { background: var(--warning); }
.ax-toast.is-danger  .dot { background: var(--danger); }
.ax-toast.is-info    .dot { background: var(--primary); }

/* ─── Segmented control (ThemeSwitcher) ─── */
.ax-segmented {
  display: inline-flex; padding: 3px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
}
.ax-segmented button {
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 14px;
  font-family: var(--font-sans); font-size: var(--fs-12); font-weight: var(--fw-medium);
  color: var(--ink-2);
  border-radius: var(--r-pill);
  transition: background var(--dur-2), color var(--dur-2);
}
.ax-segmented button.is-active {
  background: var(--surface); color: var(--ink);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-xs);
}

/* ─── Empty / loading / error states ─── */
.ax-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  color: var(--ink-2);
}
.ax-state-glyph {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
  font-family: var(--font-display); font-size: 32px;
}
.ax-state-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-20); letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 var(--sp-2);
}
.ax-state-body {
  font-size: var(--fs-13); color: var(--ink-3); max-width: 380px; line-height: var(--lh-base); margin: 0 0 var(--sp-5);
}

.ax-skel {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: ax-skel 1.2s linear infinite;
  border-radius: var(--r-sm);
}

/* ─── Animations ─── */
@keyframes ax-fade-in { from {opacity:0} to {opacity:1} }
@keyframes ax-slide-right { from {transform:translateX(20px); opacity:0} to {transform:translateX(0); opacity:1} }
@keyframes ax-slide-up { from {transform:translateY(8px); opacity:0} to {transform:translateY(0); opacity:1} }
@keyframes ax-pop { from {transform:translate(-50%,-50%) scale(0.95); opacity:0} to {transform:translate(-50%,-50%) scale(1); opacity:1} }
@keyframes ax-skel { 0% {background-position: 100% 0} 100% {background-position: -100% 0} }

/* ─── Misc utilities ─── */
.ax-divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-5) 0; }
.ax-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.ax-row { display: flex; align-items: center; gap: var(--sp-3); }
.ax-spacer { flex: 1; }

/* ─── Mobile shell (Sportello lavoratore) ─── */
.ax-mobile {
  width: 390px; min-height: 844px;
  background: var(--bg);
  margin: 0 auto;
  font-size: 15px;
}
.ax-mobile-status {
  height: 44px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-5); font-family: var(--font-sans);
  font-size: var(--fs-14); font-weight: var(--fw-semibold);
}
.ax-mobile-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.ax-mobile-body { padding: var(--sp-5); }
.ax-mobile-tabbar {
  position: sticky; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.ax-mobile-tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: var(--fs-11); color: var(--ink-3); text-decoration: none;
}
.ax-mobile-tabbar a.is-active { color: var(--primary); font-weight: var(--fw-semibold); }