/*
 * table.css — stili base del componente `table` (tutti i temi, nessuna build).
 * Caricato una volta da themes/default/partials/table-assets.blade.php.
 *
 * Solo token del tema con fallback neutri (--primary, --secondary, --tertiary, --text, --muted,
 * --bg, --bg-alt, --border, --font, --font-heading, --radius-lg). Le varianti grafiche del tema
 * stanno nel CSS del tema (.theme-x .component-table…): qui layout, tipi di cella, ordinamento,
 * filtri, paginazione, testata fissa e modalità mobile.
 *
 * Modificatori dal builder: .component-table--{default|striped|bordered|minimal},
 * --{compact|normal|comfortable}, --{scroll|stack}, --sticky, --static|--remote.
 * Lo scroller è .component-table__scroller: mai display:block sulla <table>.
 */
.component-table {
  --ct-primary: var(--primary, #111827);
  --ct-accent: var(--secondary, var(--accent, #2563eb));
  --ct-accent-soft: var(--secondary-light, var(--accent-light, #eff6ff));
  --ct-tertiary: var(--tertiary, #0f766e);
  --ct-tertiary-soft: var(--tertiary-light, #ecfeff);
  --ct-text: var(--text, #111827);
  --ct-muted: var(--muted, #6b7280);
  --ct-bg: var(--bg, #ffffff);
  --ct-bg-alt: var(--bg-alt, #f3f4f6);
  --ct-border: var(--border, #e5e7eb);
  --ct-radius: var(--radius-lg, .75rem);
  --ct-font: var(--font, inherit);
  --ct-font-heading: var(--font-heading, var(--font, inherit));
  --ct-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / .06));
  --ct-head-bg: var(--ct-primary);
  --ct-head-text: #ffffff;
  --ct-cell-y: .875rem;
  --ct-cell-x: 1.25rem;
  --ct-font-size: .9375rem;
  --ct-head-size: .72rem;
  --ct-row-even: transparent;
  --ct-row-hover: var(--ct-tertiary-soft);
  --ct-highlight: var(--ct-accent-soft);
  font-family: var(--ct-font); color: var(--ct-text);
  /* dentro colonne grid/flex del builder: senza min-width:0 la tabella allarga la colonna e la pagina */
  min-width: 0; max-width: 100%;
}
.component-table--compact { --ct-cell-y: .5rem; --ct-cell-x: .875rem; --ct-font-size: .875rem; }
.component-table--comfortable { --ct-cell-y: 1.25rem; --ct-cell-x: 1.5rem; --ct-font-size: 1rem; }

.component-table__title { margin: 0 0 .75rem; font-family: var(--ct-font-heading); font-size: 1.25rem; font-weight: 600; color: var(--ct-primary); }
.component-table__caption { caption-side: top; text-align: left; padding: 0 0 .625rem; font-size: .875rem; color: var(--ct-muted); }

/* ── Filtri ────────────────────────────────────────────────────────────────── */
.component-table__filters { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1rem; }
.component-table__filter { display: flex; flex-direction: column; gap: .25rem; min-width: 12rem; flex: 1 1 12rem; max-width: 20rem; }
.component-table__filter-label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ct-muted); }
.component-table__filter-input {
  width: 100%; min-height: 2.5rem; padding: .5rem .875rem;
  font: inherit; font-size: .9375rem; color: var(--ct-text);
  background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: calc(var(--ct-radius) * .6);
  transition: border-color .15s, box-shadow .15s;
}
.component-table__filter-input:focus { outline: none; border-color: var(--ct-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-accent) 22%, transparent); }
.component-table__filter-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ── Tabella ───────────────────────────────────────────────────────────────── */
.component-table__scroller { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--ct-radius); background: var(--ct-bg); box-shadow: 0 0 0 1px var(--ct-border), var(--ct-shadow); }
.component-table__scroller::-webkit-scrollbar { height: .5rem; }
.component-table__scroller::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ct-accent) 40%, transparent); border-radius: 9999px; }
.component-table__table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ct-font-size); }
.component-table__th, .component-table__cell { padding: var(--ct-cell-y) var(--ct-cell-x); text-align: left; vertical-align: middle; }
.component-table__th--center, .component-table__cell--center { text-align: center; }
.component-table__th--right, .component-table__cell--right { text-align: right; }
.component-table__cell--number, .component-table__cell--currency { font-variant-numeric: tabular-nums; }
.component-table__th--right .component-table__sort { justify-content: flex-end; }
.component-table__th--center .component-table__sort { justify-content: center; }

.component-table__head .component-table__th {
  background: var(--ct-head-bg); color: var(--ct-head-text);
  font-family: var(--ct-font-heading); font-size: var(--ct-head-size); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--ct-head-text) 15%, transparent);
}
.component-table__sort {
  display: inline-flex; align-items: center; gap: .375rem; width: 100%;
  padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.component-table__sort-icon { width: .875rem; height: .875rem; opacity: .45; flex: none; }
.component-table__th[aria-sort="ascending"] .component-table__sort-icon,
.component-table__th[aria-sort="descending"] .component-table__sort-icon { opacity: 1; color: var(--ct-accent); }
.component-table__th[aria-sort="descending"] .component-table__sort-icon { transform: scaleY(-1); }
.component-table__th.is-highlight, .component-table__cell.is-highlight { background: var(--ct-highlight); }
.component-table__head .component-table__th.is-highlight { background: color-mix(in srgb, var(--ct-accent) 85%, var(--ct-head-bg)); }

.component-table__cell { border-bottom: 1px solid var(--ct-border); }
.component-table__row:last-child .component-table__cell { border-bottom: 0; }
.component-table__row.is-highlight .component-table__cell { background: var(--ct-highlight); font-weight: 600; }
.component-table__row:hover .component-table__cell:not(.is-highlight) { background: var(--ct-row-hover); }
.component-table__row.is-hidden { display: none; }
.component-table__row.is-clickable { cursor: pointer; }

/* varianti */
.component-table--striped .component-table__row:nth-child(even) .component-table__cell:not(.is-highlight) { background: var(--ct-bg-alt); }
.component-table--bordered .component-table__th + .component-table__th,
.component-table--bordered .component-table__cell + .component-table__cell { border-left: 1px solid var(--ct-border); }
.component-table--bordered .component-table__head .component-table__th + .component-table__th { border-left-color: color-mix(in srgb, var(--ct-head-text) 15%, transparent); }
.component-table--minimal .component-table__scroller { box-shadow: none; border-radius: 0; background: transparent; }
.component-table--minimal .component-table__head .component-table__th { background: transparent; color: var(--ct-muted); border-bottom: 2px solid var(--ct-primary); }
.component-table--minimal .component-table__head .component-table__th.is-highlight { background: var(--ct-highlight); color: var(--ct-primary); }
.component-table--sticky .component-table__scroller { max-height: 70vh; overflow-y: auto; }
.component-table--sticky .component-table__head .component-table__th { position: sticky; top: 0; z-index: 2; }

/* tipi di cella */
.component-table__link { color: var(--ct-accent); font-weight: 600; text-decoration: none; }
.component-table__link:hover { text-decoration: underline; }
.component-table__badge {
  display: inline-block; padding: .2rem .65rem; border-radius: 9999px;
  font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--ct-bg-alt); color: var(--ct-text);
}
.component-table__badge.is-attiva, .component-table__badge.is-attivo, .component-table__badge.is-active, .component-table__badge.is-pagata, .component-table__badge.is-pagato, .component-table__badge.is-paid, .component-table__badge.is-ok, .component-table__badge.is-si, .component-table__badge.is-yes, .component-table__badge.is-completata, .component-table__badge.is-completato, .component-table__badge.is-done, .component-table__badge.is-disponibile { background: color-mix(in srgb, var(--success, #16a34a) 15%, transparent); color: var(--success, #15803d); }
.component-table__badge.is-in-attesa, .component-table__badge.is-attesa, .component-table__badge.is-pending, .component-table__badge.is-bozza, .component-table__badge.is-draft, .component-table__badge.is-in-corso, .component-table__badge.is-aperta, .component-table__badge.is-aperto, .component-table__badge.is-open { background: color-mix(in srgb, var(--warning, #f59e0b) 18%, transparent); color: color-mix(in srgb, var(--warning, #b45309) 80%, #000); }
.component-table__badge.is-scaduta, .component-table__badge.is-scaduto, .component-table__badge.is-annullata, .component-table__badge.is-annullato, .component-table__badge.is-errore, .component-table__badge.is-error, .component-table__badge.is-no, .component-table__badge.is-rifiutata, .component-table__badge.is-cancelled, .component-table__badge.is-failed, .component-table__badge.is-non-disponibile { background: color-mix(in srgb, var(--danger, #dc2626) 14%, transparent); color: var(--danger, #b91c1c); }
.component-table__bool { font-weight: 700; }
.component-table__bool.is-true { color: var(--success, #16a34a); }
.component-table__bool.is-false { color: var(--ct-muted); }
.component-table__image { width: 3rem; height: 3rem; object-fit: cover; border-radius: calc(var(--ct-radius) * .5); display: inline-block; vertical-align: middle; }
.component-table__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; background: var(--ct-bg-alt); padding: .15rem .45rem; border-radius: .3rem; }

/* stati */
.component-table__status { margin: 1rem 0 0; font-size: .9375rem; color: var(--ct-muted); }
.component-table__status[hidden] { display: none; }
.component-table__status--loading { animation: component-table-pulse 1s ease-in-out infinite; }
.component-table__status--error { color: var(--danger, #b91c1c); }
.component-table__status--empty { padding: 1.5rem; text-align: center; border: 1px dashed var(--ct-border); border-radius: var(--ct-radius); }
.component-table__guest { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1rem 0 0; padding: 1rem 1.25rem; border-radius: var(--ct-radius); background: var(--ct-bg-alt); color: var(--ct-text); }
.component-table__guest[hidden] { display: none; }
.component-table__guest-link { font-weight: 700; color: var(--ct-accent); text-decoration: none; }
.component-table__guest-link:hover { text-decoration: underline; }
.component-table[aria-busy="true"] .component-table__body { opacity: .5; }
@keyframes component-table-pulse { 50% { opacity: .5; } }

/* ── Paginazione: totale · ‹ › · vai a pagina ─────────────────────────────── */
.component-table__pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin: 1rem 0 0; font-size: .875rem; color: var(--ct-muted); }
.component-table__pagination[hidden] { display: none; }
.component-table__pagination-total { font-weight: 600; color: var(--ct-text); }
.component-table__pagination-nav { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.component-table__page-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--ct-border); border-radius: 9999px; background: var(--ct-bg); color: var(--ct-text); cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.component-table__page-btn:hover:not(:disabled) { border-color: var(--ct-accent); color: var(--ct-accent); }
.component-table__page-btn:disabled { opacity: .4; cursor: default; }
.component-table__page-btn svg { width: 1rem; height: 1rem; }
.component-table__page-state { min-width: 6rem; text-align: center; }
.component-table__goto { display: inline-flex; align-items: center; gap: .5rem; }
.component-table__goto-input {
  width: 4.25rem; min-height: 2.25rem; padding: .25rem .5rem; text-align: center;
  font: inherit; color: var(--ct-text); background: var(--ct-bg); border: 1px solid var(--ct-border); border-radius: 9999px;
}
.component-table__goto-input:focus { outline: none; border-color: var(--ct-accent); }

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .component-table__th--hide-mobile, .component-table__cell--hide-mobile { display: none; }
  .component-table__th, .component-table__cell { white-space: nowrap; }
  .component-table--stack .component-table__scroller { overflow: visible; box-shadow: none; background: transparent; }
  .component-table--stack .component-table__table, .component-table--stack .component-table__body, .component-table--stack .component-table__row { display: block; width: 100%; min-width: 0; }
  .component-table--stack .component-table__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .component-table--stack .component-table__caption { display: block; }
  .component-table--stack .component-table__row { margin: 0 0 .75rem; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); background: var(--ct-bg); box-shadow: var(--ct-shadow); overflow: hidden; }
  .component-table--stack .component-table__row.is-hidden { display: none; }
  .component-table--stack .component-table__cell { display: flex; justify-content: space-between; align-items: center; gap: 1rem; white-space: normal; text-align: right; padding: .625rem 1rem; }
  .component-table--stack .component-table__cell::before { content: attr(data-label); flex: none; max-width: 45%; text-align: left; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ct-muted); }
  .component-table--stack .component-table__cell--hide-mobile { display: none; }
  .component-table--stack .component-table__row:hover .component-table__cell { background: transparent; }
  .component-table__pagination { justify-content: center; }
  .component-table__pagination-nav { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .component-table__status--loading { animation: none; }
}