/*
 * table_editor.css — inline overlay table editor styles.
 *
 * Colors, radii and motion durations come from CSS custom properties.
 * Host apps can override any --tbled-* variable at :root or .tbled-host.
 */

.tbled-host {
  --tbled-accent: var(--accent, var(--primary, var(--tbled-gold-fallback)));
  --tbled-gold-fallback: var(--gold, var(--tbled-color-gold, var(--ink)));
  --tbled-bg: var(--card, var(--surface, var(--soft, var(--tbled-bg-fallback))));
  --tbled-bg-fallback: var(--surface);
  --tbled-fg: var(--fg, var(--ink));
  --tbled-muted: var(--muted, var(--tbled-fg));
  --tbled-border: var(--border, var(--line, rgba(16, 19, 24, 0.12)));
  --tbled-shadow: var(--shadow, 0 18px 50px rgba(16, 19, 24, 0.22));
  --tbled-radius: 10px;
  --tbled-row-height: 34px;
  --tbled-header-bg: var(--soft, var(--card));
  --tbled-duration: 220ms;
  --tbled-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tbled-outline-width: 2px;
}

.tbled-overlay {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  background: transparent;
  border: var(--tbled-outline-width) solid var(--tbled-accent);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  cursor: pointer;
  transition: box-shadow var(--tbled-duration) var(--tbled-easing),
              transform var(--tbled-duration) var(--tbled-easing),
              opacity var(--tbled-duration) var(--tbled-easing);
  appearance: none;
}

.tbled-overlay:hover,
.tbled-overlay:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tbled-accent) 35%, transparent),
              0 0 0 1px rgba(255, 255, 255, 0.25) inset;
  transform: translateZ(0) scale(1.01);
}

.tbled-overlay-active {
  opacity: 0.35;
}

.tbled-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 18, 20, 0.82);
  opacity: 0;
  pointer-events: none;
  z-index: 80;
  transition: opacity var(--tbled-duration) var(--tbled-easing);
  backdrop-filter: blur(6px);
}

.tbled-backdrop-visible {
  opacity: 1;
  pointer-events: auto;
}

.tbled-editor {
  position: fixed;
  left: 50%;
  top: 8vh;
  width: min(960px, 92vw);
  height: min(640px, 76vh);
  transform: translate(-50%, 8px) scale(0.92);
  transform-origin: center top;
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--tbled-bg);
  color: var(--tbled-fg);
  border: 1px solid var(--tbled-border);
  border-radius: var(--tbled-radius);
  box-shadow: var(--tbled-shadow);
  transition: transform var(--tbled-duration) var(--tbled-easing),
              opacity var(--tbled-duration) var(--tbled-easing);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.88rem;
  overflow: hidden;
}

.tbled-editor-open {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.tbled-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--tbled-border);
  background: var(--tbled-header-bg);
}

.tbled-editor-header strong {
  display: block;
  color: var(--tbled-fg);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.tbled-editor-header .tbled-kicker {
  display: block;
  color: var(--tbled-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 2px;
}

.tbled-editor-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tbled-editor-toolbar input[type="search"] {
  padding: 6px 10px;
  border: 1px solid var(--tbled-border);
  border-radius: 6px;
  background: var(--tbled-bg);
  color: var(--tbled-fg);
  font: inherit;
  min-width: 160px;
}

.tbled-editor-toolbar button {
  padding: 6px 10px;
  border: 1px solid var(--tbled-border);
  border-radius: 6px;
  background: transparent;
  color: var(--tbled-fg);
  font: inherit;
  cursor: pointer;
  transition: background-color 120ms var(--tbled-easing),
              border-color 120ms var(--tbled-easing);
}

.tbled-editor-toolbar button:hover,
.tbled-editor-toolbar button:focus-visible {
  border-color: var(--tbled-accent);
  background: color-mix(in srgb, var(--tbled-accent) 10%, transparent);
  outline: none;
}

.tbled-editor-toolbar .tbled-close {
  border-color: var(--tbled-accent);
  color: var(--tbled-accent);
}

/* ------------------------------------------------------------------
 * Grid — fixed-layout, shared-authority column widths.
 * table-layout: fixed; every row reads the same grid-template-columns
 * from the custom-property template written on the grid root.
 * ------------------------------------------------------------------ */
.tbled-grid-wrap {
  overflow: auto;
  padding: 0;
}

.tbled-grid {
  /* table-layout: fixed — the grid's column widths come from the
     grid-template-columns string written in JS, not from cell content.
     Every row below inherits that template so cell N has the same
     width in every row. */
  display: grid;
  table-layout: fixed;
  grid-auto-rows: minmax(var(--tbled-row-height), auto);
  min-width: 100%;
}

.tbled-row {
  /* Inherit the column template from the grid root's
     grid-template-columns. This is the load-bearing invariant: every
     row uses the SAME column widths. */
  display: grid;
  grid-template-columns: var(--tbled-cols-template, 1fr);
  border-bottom: 1px solid var(--tbled-border);
}

.tbled-row-header {
  position: sticky;
  top: 0;
  background: var(--tbled-header-bg);
  z-index: 2;
  border-bottom: 2px solid var(--tbled-accent);
}

.tbled-cell {
  /* Fixed width from the row's grid track; cell overflows with an
     ellipsis so row height stays uniform regardless of content. */
  position: relative;
  padding: 6px 10px;
  min-width: 0; /* allow grid track to shrink below content width */
  border-right: 1px solid var(--tbled-border);
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.tbled-cell:focus-visible {
  box-shadow: inset 0 0 0 2px var(--tbled-accent);
  background: color-mix(in srgb, var(--tbled-accent) 8%, transparent);
}

.tbled-col-header {
  font-weight: 700;
  color: var(--tbled-fg);
  background: transparent;
  cursor: pointer;
  user-select: none;
}

.tbled-col-header[aria-sort="ascending"]::after {
  content: " \2191";
  color: var(--tbled-accent);
}

.tbled-col-header[aria-sort="descending"]::after {
  content: " \2193";
  color: var(--tbled-accent);
}

.tbled-col-header-sorted {
  background: color-mix(in srgb, var(--tbled-accent) 12%, transparent);
}

.tbled-col-label {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 10px);
}

/* Column-boundary drag handle. Sits on the right edge of each interior
   header cell, straddling the border between col c and col c+1. */
.tbled-resize-col {
  position: absolute;
  right: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 3;
  touch-action: none;
}

.tbled-resize-col:hover,
.tbled-resize-col:focus-visible {
  background: color-mix(in srgb, var(--tbled-accent) 45%, transparent);
  outline: none;
}

.tbled-resize-table {
  height: 8px;
  cursor: ns-resize;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--tbled-accent) 25%, transparent));
  border-top: 1px solid var(--tbled-border);
}

.tbled-empty {
  padding: 24px;
  color: var(--tbled-muted);
  text-align: center;
}

/* sr-only utility for the live region announcer. */
.tbled-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tbled-host.tbled-reduced-motion .tbled-overlay,
.tbled-reduced-motion .tbled-backdrop,
.tbled-reduced-motion .tbled-editor {
  transition-duration: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .tbled-overlay,
  .tbled-backdrop,
  .tbled-editor {
    transition-duration: 0ms !important;
  }
}