@layer components.tables {
  /* ============================================================
     Data table (reusable) — shared/_data_table + editable-table JS
     ============================================================ */
  .dt-card {
      background: #fff;
      border: 1px solid #e4e7ee;
      border-radius: 14px;
      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 12px 30px -18px rgba(16, 42, 67, 0.25);
      overflow: hidden;
  }
  .dt-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid #eef0f5;
  }
  .dt-toolbar .dt-toolbar__spacer { flex: 1; }
  .dt-scroll { overflow-x: auto; }

  .dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; table-layout: fixed; text-align: start; }
  /* >=640px the mobile column-hiding (below) is off; restore the readable-width floor
     + scroll rail so 5-6 column tables (e.g. transactions) don't get crushed in the
     640-780px band before table-layout: fixed shrinks every column to near-nothing.
     Disjoint from the (max-width: 639px) block below; kept adjacent to the base .dt
     rule for visibility. */
  @media (min-width: 640px) { .dt { min-width: 780px; } }

  .dt thead th {
      position: sticky; top: 0; z-index: 2;
      background: #fafbfd; color: #8792a3;
      font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
      text-align: left; padding: 0; white-space: nowrap; border-bottom: 1px solid #e4e7ee; user-select: none;
  }
  .dt thead th .dt__hd { display: flex; align-items: center; gap: 5px; padding: 10px 14px; overflow: hidden; text-overflow: ellipsis; }
  .dt thead th.dt__th--right .dt__hd { justify-content: flex-end; }
  .dt thead th.dt__th--actions { width: 76px; }
  .dt thead a.dt__sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
  .dt thead a.dt__sort:hover { color: #486581; }
  .dt thead a.dt__sort--asc, .dt thead a.dt__sort--desc { color: var(--color-primary-500, #2251cc); }

  .dt tbody td { padding: 0; border-bottom: 1px solid #eef0f5; background: #fff; color: #334e68; vertical-align: middle; }
  .dt tbody tr:last-child td { border-bottom: 0; }
  .dt tbody tr:hover td { background: #f8f9fc; }
  .dt__cell { display: flex; align-items: center; gap: 8px; padding: 0 14px; min-height: 44px; min-width: 0; color: #243b53; }
  .dt--compact .dt__cell { min-height: 38px; }
  .dt__cell--desc { gap: 8px; }
  .dt__text { font-weight: 500; }
  .dt__truncate { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dt__cell--desc .dt__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dt__cell--num { font-variant-numeric: tabular-nums; font-family: var(--font-mono, ui-monospace, monospace); white-space: nowrap; }
  .dt__cell--right { justify-content: flex-end; text-align: right; }
  .dt__cell--rev { color: var(--color-success-700, #0a7d55); font-weight: 600; }
  .dt__cell--exp { color: var(--color-danger-600, #d64550); font-weight: 600; }
  .dt__td--actions { width: 76px; }

  @media (max-width: 639px) {
    /* Keep table-layout: fixed on mobile (unlike the old auto-layout attempt)
       so the description column's ellipsis actually clips text instead of the
       table growing past the viewport and pushing Valor/actions off-screen.
       Hiding the low-priority <col>s removes them from the fixed layout's
       column accounting, and .dt-col--actions needs !important to beat its
       own inline width (set unconditionally in component.html.erb) since
       table-layout: fixed reads column width from the <col> element itself. */
    .dt .dt-col--low { display: none; }
    .dt thead th.dt__th--actions, .dt .dt__td--actions { width: 48px; }
    .dt col.dt-col--actions { width: 48px !important; }
    /* Columns with an explicit desktop `width:` that's too wide once actions
       shrink to 48px and low-priority columns disappear (e.g. costume sizes'
       three 110px select columns, which total more than a 390px viewport can
       hold) opt into a narrower mobile width via `mobile_width:` on the column
       definition. Needs !important for the same reason as .dt-col--actions
       above: table-layout: fixed reads the <col>'s own inline width. */
    .dt col.dt-col--mobile-narrow { width: var(--dt-mobile-width) !important; }
    /* Inline add-row forms (e.g. guests' "Convidar" row): stack every cell as a
       full-width block instead of participating in column hiding, so required
       fields that live in a dt-col--low cell (email/phone) stay visible and
       fillable on mobile. `display: block` on <td> makes colspan irrelevant. */
    .dt tr.dt__inline-form-row td { display: block; width: 100%; }
    .dt tr.dt__inline-form-row td.dt-col--low { display: block; }
  }

  .dt__pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: none; }
  .dt__pill--rev { color: var(--color-success-700, #0a7d55); background: var(--color-success-50, #e6f4ec); }
  .dt__pill--exp { color: var(--color-danger-600, #d64550); background: var(--color-danger-50, #fbe8e9); }
  .dt__pill--shed { color: #7c5e10; background: #fbf3dc; order: 2; padding: 3px 6px; }
  .dt__pill--shed .icon { --icon-size: 12px; width: 12px; height: 12px; }
  .dt__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

  /* editable affordances */
  .dt__cell--edit { cursor: pointer; border-radius: 6px; }
  .dt__cell--edit:hover { box-shadow: inset 0 0 0 1px #d7dce6; background: #f2f5fb; }
  .dt__pill.dt__pill--edit { cursor: pointer; }
  .dt__pill.dt__pill--edit:hover { outline: 2px solid var(--color-primary-100, #b0d0ff); outline-offset: 1px; }
  .dt__cell--editing { box-shadow: inset 0 0 0 2px var(--color-primary-400, #3a66db) !important; background: #eef3ff !important; }
  .dt__cell--saving { opacity: 0.55; pointer-events: none; }

  .dt__row-actions { display: flex; gap: 4px; justify-content: flex-end; padding-right: 12px; opacity: 0; transition: opacity 0.12s; }
  .dt tbody tr:hover .dt__row-actions { opacity: 1; }
  @media (hover: none) {
    .dt__row-actions { opacity: 1; }
    /* iOS Safari auto-zooms the viewport when a focused input's font-size is under
       16px. The editor input renders smaller than that (0.875rem / 13px), which
       the a11y-required removal of user-scalable=no unmasked. Force 16px on touch
       devices only — do NOT reintroduce maximum-scale/user-scalable to mask it.
       (The inline guest row's .dt__inline-input gets the same rule in events.css.) */
    .dt-popover__input { font-size: 16px; }
  }
  .dt__icon-btn { border: 1px solid transparent; background: transparent; color: #829ab1; width: 30px; height: 30px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
  .dt__icon-btn:hover { background: #f0f2f7; }
  .dt__icon-btn--danger:hover { color: var(--color-danger-600, #d64550); }

  .dt--readonly .dt__row-actions, .dt--readonly thead th.dt__th--actions { display: none; }

  /* empty state */
  .dt__empty { padding: 0; }
  .dt__blank { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 52px 20px; }
  .dt__blank-icon { width: 52px; height: 52px; border-radius: 14px; background: #eef2f8; color: #829ab1; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; }
  .dt__blank-text { margin: 0; color: #627d98; font-size: 0.9rem; max-width: 44ch; text-align: center; line-height: 1.5; }
  .dt__blank-action { margin-top: 4px; }

  /* summary strip (shared/_data_table summary:) */
  .dt-summary { border-bottom: 1px solid #eef0f5; background: #fafbfd; }
  .dt-summary__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 10px 16px; font-size: 0.8125rem; color: #627d98; }
  .dt-summary__row b { color: #243b53; font-weight: 700; font-variant-numeric: tabular-nums; }
  .dt-summary__row .dt-summary__rev, .dt-summary__row b.dt-summary__rev { color: var(--color-success-700, #0a7d55); }
  .dt-summary__row .dt-summary__exp, .dt-summary__row b.dt-summary__exp { color: var(--color-danger-600, #d64550); }
  .dt-summary__spacer { flex: 1; }

  .segment-pager { margin: 16px; border: 1px solid #eef0f5; border-radius: 10px; }

  /* pagination */
  .dt-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid #eef0f5; background: #fafbfd; font-size: 0.8125rem; color: #627d98; }
  .dt-pager__range b { color: #334e68; font-weight: 600; font-variant-numeric: tabular-nums; }
  .dt-pager__spacer { flex: 1; }
  .dt-pager__pages { display: inline-flex; gap: 3px; }
  .dt-pager__pg { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid #dce1eb; background: #fff; color: #627d98; border-radius: 7px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
  .dt-pager__pg:hover { border-color: var(--color-primary-400, #3a66db); color: #243b53; }
  .dt-pager__pg.is-disabled { opacity: 0.4; pointer-events: none; }

  /* floating editor */
  .dt-popover { position: absolute; z-index: 60; min-width: 230px; max-width: min(320px, calc(100vw - 16px)); opacity: 1; background: #fff; border: 1px solid #dce1eb; border-radius: 11px; box-shadow: 0 12px 34px -8px rgba(16, 42, 67, 0.28), 0 2px 8px rgba(16, 42, 67, 0.10); padding: 11px; animation: dt-pop 0.13s ease; transform-origin: top left; }
  @keyframes dt-pop { from { transform: scale(0.97) translateY(-3px); } to { transform: none; } }
  .dt-popover__input { width: 100%; font-size: 0.875rem; color: #243b53; background: #fafbfd; border: 1px solid #dce1eb; border-radius: 8px; padding: 9px 11px; outline: none; box-sizing: border-box; }
  .dt-popover__input:focus { border-color: var(--color-primary-400, #3a66db); box-shadow: 0 0 0 3px var(--color-primary-100, #d9e8ff); }
  .dt-popover__list { max-height: 230px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 7px; }
  .dt-popover__opt { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; padding: 8px 9px; border-radius: 7px; cursor: pointer; color: #243b53; }
  .dt-popover__opt:hover, .dt-popover__opt.is-hi { background: var(--color-primary-50, #d9e8ff); }
  .dt-popover__opt.is-on { color: var(--color-primary-500, #2251cc); font-weight: 600; }
  .dt-popover__opt--rev, .dt-popover__opt--rev.is-on { color: var(--color-success-700, #0a7d55); font-weight: 600; }
  .dt-popover__opt--exp, .dt-popover__opt--exp.is-on { color: var(--color-danger-600, #d64550); font-weight: 600; }
  .dt-popover__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
  @media (prefers-reduced-motion: reduce) { .dt-popover { animation: none; } }
}