/*
 * SeatLink v3 components (3.02.001). One vocabulary for the whole app: a button is a button on every page.
 * Rules: tokens only (no raw colours), no !important, no side-stripe borders, no gradients/glass/blur,
 * every control has default / hover / focus-visible / active / disabled (+ loading, error where it applies).
 */
@layer components {

  /* ---------------------------------------------------------------- icons */
  .icon {
    width: 1.25em; height: 1.25em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -0.2em;
  }
  .icon--lg { width: 1.75em; height: 1.75em; }

  /* ---------------------------------------------------------------- buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: var(--control-h); padding: 0 var(--s-4);
    border: 2px solid var(--ink); border-radius: var(--r-1);
    background: var(--surface); color: var(--ink);
    font: inherit; font-weight: 650; line-height: 1; text-decoration: none; white-space: nowrap;
    cursor: pointer; user-select: none; position: relative;
    transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
  }
  .btn:hover { background: var(--neutral-bg); }
  .btn:active { transform: translateY(1px); }

  .btn--primary { background: var(--signal); }
  .btn--primary:hover { background: var(--signal-hover); }
  .btn--primary:active { background: var(--signal-press); }

  .btn--ghost { border-color: transparent; background: transparent; }
  .btn--ghost:hover { background: var(--neutral-bg); }

  .btn--danger { background: var(--bad); border-color: var(--bad); color: var(--surface); }
  .btn--danger:hover { background: var(--ink); border-color: var(--ink); }

  .btn--sm { min-height: calc(var(--control-h) - 0.5rem); padding: 0 var(--s-3); font-size: var(--text-sm); }
  .btn--lg { min-height: calc(var(--control-h) + 0.5rem); padding: 0 var(--s-5); font-size: var(--text-lg); }
  .btn--icon { width: var(--control-h); padding: 0; }
  .btn--block { display: flex; width: 100%; }
  @media (pointer: coarse) { .btn--sm { min-height: var(--control-h); } }

  .btn:disabled, .btn[aria-disabled="true"] {
    background: var(--neutral-bg); border-color: var(--hairline); color: var(--ink-3);
    cursor: not-allowed; transform: none;
  }

  /* loading keeps the label (no layout shift); a ring replaces the icon slot */
  .btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
  .btn[aria-busy="true"]::after {
    content: ""; width: 1em; height: 1em; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: spin 700ms linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation-duration: 2400ms; } }

  /* ---------------------------------------------------------------- form fields */
  .field { display: flex; flex-direction: column; gap: var(--s-1); }
  .field__label { font-weight: 650; }
  .field__hint { color: var(--ink-3); font-size: var(--text-sm); }
  .field__error { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--bad); font-size: var(--text-sm); font-weight: 650; }

  .input, .select, .textarea {
    width: 100%; min-height: var(--control-h); padding: var(--s-2) var(--s-3);
    border: 1.5px solid var(--control-border); border-radius: var(--r-1);
    background: var(--surface); color: var(--ink); font: inherit;
    transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
  }
  .textarea { min-height: 6rem; resize: vertical; line-height: var(--leading-body); }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--ink); }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--ink); }
  .input:disabled, .select:disabled, .textarea:disabled { background: var(--neutral-bg); border-color: var(--hairline); color: var(--ink-3); cursor: not-allowed; }
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border: 2px solid var(--bad); background: var(--bad-bg); }

  .check { display: flex; align-items: center; gap: var(--s-3); min-height: var(--control-h); cursor: pointer; }
  .check input { width: 1.25rem; height: 1.25rem; flex: none; margin: 0; cursor: inherit; }
  .check:has(input:disabled) { color: var(--ink-3); cursor: not-allowed; }

  /* ---------------------------------------------------------------- status tags (icon + text + tint: never colour alone) */
  .pill {
    display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.125rem var(--s-2);
    border-radius: var(--r-1); font-size: var(--text-sm); font-weight: 650; line-height: 1.4; white-space: nowrap;
    background: var(--neutral-bg); color: var(--ink-2);
  }
  .pill .icon { width: 1em; height: 1em; vertical-align: -0.15em; }
  .pill--pending { background: var(--neutral-bg); color: var(--ink-2); }
  .pill--confirmed { background: var(--ok-bg); color: var(--ok); }
  .pill--declined { background: var(--bad-bg); color: var(--bad); }
  .pill--arrived { background: var(--teal); color: var(--surface); }
  .pill--over { background: var(--warn-bg); color: var(--warn); }
  .pill--locked { background: var(--info-bg); color: var(--info); }

  /* ---------------------------------------------------------------- inline notices */
  .notice {
    display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4);
    border: 1px solid currentColor; border-radius: var(--r-1); background: var(--info-bg); color: var(--info);
  }
  .notice__body { color: var(--ink); min-width: 0; }
  .notice__title { font-weight: 750; color: inherit; }
  .notice--ok { background: var(--ok-bg); color: var(--ok); }
  .notice--warn { background: var(--warn-bg); color: var(--warn); }
  .notice--bad { background: var(--bad-bg); color: var(--bad); }

  /* two fields side by side, stacked on a phone */
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  @media (max-width: 30rem) { .form-row { grid-template-columns: 1fr; } }

  /* a tag: a small teal-tinted label, optionally with a remove button */
  .tag { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2); background: var(--teal-soft); color: var(--teal); border-radius: var(--r-1); font-size: var(--text-sm); font-weight: 650; }
  .tag__remove { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: var(--r-1); background: transparent; color: inherit; cursor: pointer; }
  .tag__remove:hover { background: var(--surface); }
  .tag__remove .icon { width: 0.875rem; height: 0.875rem; }

  /* ---------------------------------------------------------------- logo (lib/ui.php sl_logo) */
  .logo { width: 1.75rem; height: 1.75rem; flex: none; }
  .logo__plate { fill: var(--teal); }
  .logo__back, .logo__leg { fill: var(--surface); }
  .logo__seat { fill: var(--signal); }

  /* ---------------------------------------------------------------- surfaces */
  .panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-2); padding: var(--s-4); }
  .panel--flush { padding: 0; overflow: hidden; }

  /* the signage band: where you are right now */
  .band {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4);
    background: var(--signal); color: var(--ink); padding: var(--s-3) var(--s-4);
    border-bottom: 2px solid var(--ink);
  }
  .band__title { font-size: var(--text-xl); font-weight: 800; line-height: var(--leading-tight); margin: 0; }
  .band__meta { font-weight: 650; }

  /* the plate: a table number at sign scale (black square, white numerals) */
  .plate {
    --plate-size: var(--plate-sm);
    display: inline-grid; place-items: center; flex: none;
    width: var(--plate-size); height: var(--plate-size);
    background: var(--teal); color: var(--surface); border-radius: var(--r-1);
    font-size: calc(var(--plate-size) * 0.52); font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  }
  .plate--md { --plate-size: var(--plate-md); }
  .plate--lg { --plate-size: var(--plate-lg); }
  .plate--signal { background: var(--signal); color: var(--ink); border: 2px solid var(--ink); }
  .plate--empty { background: var(--neutral-bg); color: var(--ink-3); }

  /* ---------------------------------------------------------------- ledger table */
  .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-2); }
  .table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
  .table caption { text-align: left; padding: var(--s-3) var(--s-4); font-weight: 750; font-size: var(--text-lg); }
  .table th, .table td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--hairline); }
  .table thead th {
    position: sticky; top: 0; background: var(--surface-2); color: var(--ink-2);
    font-size: var(--text-sm); font-weight: 750; border-bottom: 2px solid var(--ink); white-space: nowrap;
  }
  .table tbody tr:last-child td { border-bottom: 0; }
  .table tbody tr:hover { background: var(--surface-2); }
  .table--compact th, .table--compact td { padding: var(--s-2) var(--s-3); }
  .table .num { text-align: right; }
  /* rank is carried by weight, not size: the name column is bold, supporting columns are regular */
  .table .table__primary { font-weight: 750; }
  /* selected = ink outline on a neutral tint; the signal colour is kept for "what just changed" */
  .table tr[aria-selected="true"] { background: var(--neutral-bg); outline: 2px solid var(--ink); outline-offset: -2px; }
  /* a row that just changed holds the signal colour until someone acknowledges it (click or key) */
  .table tr.is-fresh { background: var(--signal-soft); }
  .table tr.is-fresh .table__primary::after { content: "New"; margin-left: var(--s-2); padding: 0 var(--s-2); background: var(--signal); border-radius: var(--r-1); font-size: var(--text-xs); font-weight: 800; }

  /* ---------------------------------------------------------------- tabs */
  .tabs { display: flex; gap: var(--s-1); border-bottom: 2px solid var(--ink); overflow-x: auto; }
  .tabs [role="tab"] {
    min-height: var(--control-h); padding: 0 var(--s-4); border: 0; border-bottom: 4px solid transparent;
    background: transparent; color: var(--ink-2); font: inherit; font-weight: 650; cursor: pointer; white-space: nowrap;
  }
  .tabs [role="tab"]:hover { background: var(--neutral-bg); color: var(--ink); }
  .tabs [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 800; border-bottom-color: var(--signal); }
  .tabpanel { padding-top: var(--s-4); }

  /* ---------------------------------------------------------------- popover menu (native Popover API) */
  .menu {
    margin: 0; padding: var(--s-1); min-width: 14rem;
    background: var(--surface); color: var(--ink); border: 1px solid var(--control-border); border-radius: var(--r-2);
    box-shadow: var(--shadow-pop); z-index: var(--z-popover);
  }
  .menu__item {
    display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--control-h); padding: 0 var(--s-3);
    border: 0; border-radius: var(--r-1); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: none;
  }
  .menu__item:hover { background: var(--neutral-bg); }
  .menu__item--danger { color: var(--bad); }
  .menu__sep { height: 1px; margin: var(--s-1) 0; background: var(--hairline); border: 0; }

  /* ---------------------------------------------------------------- dialog (native <dialog>, focus trap + Esc for free) */
  .dialog {
    width: min(34rem, calc(100vw - 2 * var(--s-4))); max-height: calc(100vh - 2 * var(--s-4)); padding: 0;
    border: 2px solid var(--ink); border-radius: var(--r-2); background: var(--surface); color: var(--ink);
    box-shadow: var(--shadow-pop); overflow: auto;
  }
  .dialog::backdrop { background: var(--scrim); }
  .dialog[open] { animation: dialog-in var(--t-med) var(--ease-out); }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  /* the title and the buttons stay in view while a long dialog (a seating plan) scrolls */
  .dialog__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--hairline); background: var(--surface); }
  .dialog__title { margin: 0; font-size: var(--text-xl); }
  .dialog__body { padding: var(--s-4); }
  .dialog__foot { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); padding: var(--s-4); border-top: 1px solid var(--hairline); background: var(--surface-2); }

  /* ---------------------------------------------------------------- toast */
  .toast-region { position: fixed; inset: auto var(--s-4) var(--s-4) auto; z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); width: min(24rem, calc(100vw - 2 * var(--s-4))); pointer-events: none; }
  .toast {
    --focus-color: var(--surface);
    display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4);
    background: var(--ink); color: var(--surface); border-radius: var(--r-1); box-shadow: var(--shadow-pop); pointer-events: auto;
    animation: toast-in var(--t-med) var(--ease-out);
  }
  .toast--bad .icon { color: var(--signal); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* ---------------------------------------------------------------- empty state, meter, skeleton */
  .empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-7) var(--s-4); text-align: center; }
  .empty__title { font-size: var(--text-xl); font-weight: 750; margin: 0; }
  .empty p { color: var(--ink-2); }

  .meter { display: flex; align-items: center; gap: var(--s-3); }
  .meter__track { flex: 1; height: 0.625rem; background: var(--neutral-bg); border: 1px solid var(--control-border); border-radius: var(--r-1); overflow: hidden; min-width: 4rem; }
  .meter__fill { height: 100%; width: calc(var(--value, 0) * 1%); background: var(--teal); }
  .meter--over .meter__fill { background: var(--bad); }
  .meter__value { font-weight: 650; min-width: 3.5rem; text-align: right; }

  .skeleton { display: block; height: 1em; border-radius: var(--r-1); background: var(--neutral-bg); animation: skeleton 1400ms ease-in-out infinite alternate; }
  @keyframes skeleton { from { opacity: 0.55; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
}