/* Table — LittleLives design system
   Tokens follow /tokens/semantics.web.json. In sv-frontend, replace custom
   props with Tailwind classes (bg-surface/*, border-stroke/*, text-content/*).

   Status cells delegate to the Chip component. Import chip.css so storybook
   pages that link only this file still style status chips correctly.
*/


:root {
  --color-white:        #ffffff;
  --color-neutral-25:   #fafafa;
  --color-neutral-50:   #f0f0f0;
  --color-neutral-100:  #e6e6e6;
  --color-neutral-200:  #d0d0d0;
  --color-neutral-300:  #bbbbbb;
  --color-neutral-600:  #8b8b8b;
  --color-neutral-800:  #545454;
  --color-neutral-950:  #333333;

  --color-brand-50:     #e6f8fd;
  --color-brand-500:    #00b8ec;
  --color-brand-800:    #005b82;

  --color-success-50:   #e7f7ed;
  --color-success-100:  #b5e7c7;
  --color-success-800:  #096129;

  --color-error-50:     #fdecee;
  --color-error-100:    #fac4cb;
  --color-error-500:    #ee4056;
  --color-error-800:    #83232f;

  --color-warning-50:   #fef2e9;
  --color-warning-100:  #fcd8ba;
  --color-warning-800:  #864711;

  /* Semantic mirrors */
  --surface-default-white:                  var(--color-white);
  --surface-default-neutral-soft-secondary: var(--color-neutral-25);
  --surface-default-error-soft:             var(--color-error-50);
  --surface-default-success-soft:           var(--color-success-50);
  --surface-default-warning-soft:           var(--color-warning-50);
  --surface-default-brand-soft:             var(--color-brand-50);

  --content-neutral-primary:    var(--color-neutral-950);
  --content-neutral-secondary:  var(--color-neutral-800);
  --content-neutral-tertiary:   var(--color-neutral-600);
  --content-brand-strong:       var(--color-brand-800);
  --content-success-strong:     var(--color-success-800);
  --content-error-strong:       var(--color-error-800);
  --content-warning-strong:     var(--color-warning-800);

  --stroke-neutral-soft-primary:   var(--color-neutral-300);
  --stroke-neutral-soft-secondary: var(--color-neutral-100);
  --stroke-brand:                  var(--color-brand-500);
  --stroke-error:                  var(--color-error-500);
  --stroke-success:                var(--color-success-100);
  --stroke-warning:                var(--color-warning-100);
}

/* ---------- Outer ---------- */
.ll-table {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  color: var(--content-neutral-primary);
  background: var(--surface-default-white);
  border-radius: 8px;
  border: 1px solid var(--stroke-neutral-soft-secondary);
  display: flex;
  flex-direction: column;
  width: 100%;                /* fill the host container so toolbar matches body width */
  overflow: hidden;
}

/* ---------- Header (toolbar + pagination wrapper) ----------
   Single tinted block holding the toolbar row and the pagination row,
   stacked vertically per the Figma auto-layout spec:
     display:flex; width:1128px; padding-top:16px;
     flex-direction:column; align-items:flex-start; gap:16px;
   The 1128 design canvas is enforced as max-width so narrower viewports
   shrink. The bottom divider sits on this wrapper — toolbar / pagination
   rows themselves no longer carry borders or background. */
.ll-table__header {
  display: flex;
  width: 100%;
  min-width: 0;                /* prevent flex-item intrinsic min-width overflow */
  box-sizing: border-box;
  padding-top: 16px;
  flex-direction: column;
  align-items: stretch;        /* children fill width (override flex-start so rows expand) */
  gap: 16px;
  background: var(--surface-default-neutral-soft-secondary);
  border-bottom: 1px solid var(--stroke-neutral-soft-secondary);
}

/* ---------- Toolbar (row inside header) ---------- */
.ll-table__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;             /* wrap to next line when host is narrower than full toolbar */
  gap: 12px;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;      /* include the 16px side padding inside the 100% width */
}
.ll-table__toolbar[data-show-export="false"]  .ll-button[data-tool="export"],
.ll-table__toolbar[data-show-config="false"]  .ll-button[data-tool="config"],
.ll-table__toolbar[data-show-filter="false"]  .ll-button[data-tool="filter"],
.ll-table__toolbar[data-show-bulk="false"]    .ll-button[data-tool="bulk"]   { display: none; }

/* Search — capped at 440px and left-aligned. The first non-search tool
   button picks up `margin-left: auto` to push the action group to the right. */
.ll-table__search {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px 0 14px;
  border: 1px solid var(--stroke-neutral-soft-primary);
  border-radius: 999px;
  flex: 1 1 240px;             /* shrink down to 240 before wrapping */
  max-width: 440px;
  min-width: 240px;
  background: var(--surface-default-white);
  gap: 8px;
}
.ll-table__search-icon {
  width: 20px; height: 20px; color: var(--content-neutral-secondary); display: inline-flex;
  flex-shrink: 0;
}
.ll-table__search-icon svg { width: 100%; height: 100%; }
.ll-table__search-field-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--content-neutral-primary);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.ll-table__search-field-trigger svg { width: 12px; height: 12px; color: var(--content-neutral-secondary); }
.ll-table__search-divider {
  width: 1px;
  height: 24px;
  background: var(--stroke-neutral-soft-secondary);
  flex-shrink: 0;
}
.ll-table__search-input {
  border: 0; outline: none; background: transparent; flex: 1 1 auto;
  min-width: 0;
  font: inherit; font-size: 14px; color: var(--content-neutral-primary);
}
.ll-table__search-input::placeholder { color: var(--content-neutral-tertiary); }

/* Tool buttons (Export / Table Config / Filter / Bulk Action) and the
   pagination icon-buttons + page-size trigger are now LLButton / LLIconButton.
   Their styles come from button.css / icon-button.css imported at the top of
   this file. The first action button after the search bar pushes the action
   group to the right. */
.ll-table__search ~ .ll-button:first-of-type { margin-left: auto; }

/* ---------- Pagination (row inside header) ---------- */
.ll-table__pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  padding: 0 16px 16px;
  box-sizing: border-box;
}
.ll-table__pager { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.ll-table__caption {
  font-size: 14px;
  color: var(--content-neutral-secondary);
  margin-left: 8px;
}
/* The pagination first/prev/next/last buttons are LLIconButton (`outline`,
   `square`, `sm`). The page input retains its own minimal style — it is a
   numeric stepper, not a button. The page-size trigger is an LLButton
   (`outline`, `neutral`, `sm`) with a trailing dropdown caret. */
.ll-table__page-input {
  width: 56px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--stroke-neutral-soft-secondary);
  text-align: center;
  font: inherit;
  font-size: 14px;
  background: var(--surface-default-white);
}
.ll-table__page-input:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--stroke-brand); }
.ll-table__page-size { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Scrollable area ---------- */
.ll-table__scroll {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  min-width: 0;                /* allow shrinking below table content's intrinsic width */
  max-width: 100%;
}

/* ---------- Table ---------- */
.ll-table__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
}

.ll-table__th,
.ll-table__td {
  height: 48px;                /* canonical row height (min-height for cells) */
  text-align: left;
  vertical-align: middle;
  padding: 0 16px;
  background: var(--surface-default-white);
  border-bottom: 1px solid var(--stroke-neutral-soft-secondary);
  white-space: nowrap;
}

/* Header cell — 40px row height, content/neutral-secondary text. Keeps
   default <th> table-cell layout (do not switch to flex; that breaks
   column width sharing with body <td>). */
.ll-table__th {
  height: 40px;
  font-size: 14px;
  font-weight: 700;
  color: var(--content-neutral-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
}
.ll-table__th--checkbox,
.ll-table__td[data-cell-type="icon-checkbox"] {
  /* Hug the checkbox: visible 20 + 14×2 padding = 48. Under `table-layout:
     auto`, declarative `width` is treated as a maximum hint and the column
     can still stretch to share leftover space. The `width: 1%` trick forces
     auto layout to give the column its min-content width — which equals
     48 here — and distribute extra space to the other columns instead. */
  width: 1%;
  white-space: nowrap;
  padding: 0 14px;
}
.ll-table__th--empty { width: 56px; }
.ll-table__th[data-align="center"] { text-align: center; }
.ll-table__th[data-align="right"]  { text-align: right; }
.ll-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.ll-table__th[data-align="right"] .ll-table__sort { flex-direction: row; }
.ll-table__caret {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--content-neutral-secondary);
  flex-shrink: 0;
}
.ll-table__caret svg { width: 100%; height: 100%; }

/* Header checkbox placeholder */
.ll-table__hcheckbox {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--content-neutral-secondary);
  background: var(--surface-default-white);
}

/* Body cell types */
.ll-table__td { color: var(--content-neutral-primary); }
.ll-table__td[data-align="center"] { text-align: center; }
.ll-table__td[data-align="right"]  { text-align: right; }

/* Row hover (whole row tints) */
.ll-table__table tbody tr:hover .ll-table__td { background: var(--surface-default-neutral-soft-secondary); }

/* Cell hover (overrides row hover with explicit hint) */
.ll-table__td[data-state="hover"] { background: var(--surface-default-neutral-soft-secondary); }

/* Focused / active cell — outer ring without size shift */
.ll-table__td[data-state="focused"],
.ll-table__td[data-state="active"] {
  background: var(--surface-default-white);
  box-shadow: inset 0 0 0 1.5px var(--stroke-brand);
}

/* Error cell */
.ll-table__td[data-state="error"] {
  background: var(--surface-default-error-soft);
}

/* Linked text cell */
.ll-table__link {
  color: var(--content-brand-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ll-table__link:hover { text-decoration-thickness: 2px; }

/* Status cells use LLChip — see /components/chip/. The table CSS imports
   chip.css at the top of this file so a single <link rel="stylesheet"
   href="component/table.css"> in storybook still styles status chips. */

/* Multi-value cell pill */
.ll-table__chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--stroke-neutral-soft-primary);
  font-size: 14px;
  margin-right: 6px;
}
.ll-table__chip--ghost { border-style: dashed; color: var(--content-neutral-secondary); }

/* ---------- Frozen columns ---------- */
.ll-table__cell--frozen-left,
.ll-table__cell--frozen-right {
  position: sticky;
  background: var(--surface-default-white);
  z-index: 2;
}
.ll-table__cell--frozen-left { left: 0; }
.ll-table__cell--frozen-right { right: 0; border-left: 1px solid var(--stroke-neutral-soft-secondary); }
/* Divider sits on the LAST frozen-left cell in the contiguous group, so when
   the entity / linked-text column is also frozen the divider shifts to the
   right edge of that column rather than the checkbox column. Falls back to
   the checkbox col when it is the only frozen-left cell. */
.ll-table__cell--frozen-left:not(:has(+ .ll-table__cell--frozen-left)) {
  border-right: 1px solid var(--stroke-neutral-soft-secondary);
}
/* When the row is hovered, frozen cells must follow the tint */
.ll-table__table tbody tr:hover .ll-table__cell--frozen-left,
.ll-table__table tbody tr:hover .ll-table__cell--frozen-right {
  background: var(--surface-default-neutral-soft-secondary);
}
.ll-table__th.ll-table__cell--frozen-left,
.ll-table__th.ll-table__cell--frozen-right { z-index: 3; }

/* Stagger a second frozen-left col. The first frozen col is the 48px
   checkbox column, so the second sticky offset matches that width. */
.ll-table__cell--frozen-left + .ll-table__cell--frozen-left { left: 48px; }

/* Reduced-motion handling lives inside button.css and icon-button.css. */