/**
 * Table cell block wrapper overrides
 * Strip all nested spacing so only the cell's own padding (py-1 px-2) provides spacing.
 * Targets: block wrapper (py/my), .blok-block (py/px), and tool elements (mt/mb).
 */
[data-blok-table-cell-blocks] > [data-blok-element] {
  @apply py-0 my-0;
}

[data-blok-table-cell-blocks] .blok-block {
  @apply p-0 m-0 min-h-[1.6em];
}

/* List items inside table cells use tight 2px top/bottom spacing */
[data-blok-table-cell-blocks] [data-blok-tool="list"] {
  @apply py-0 mt-[2px] mb-[2px];
}

/*
 * The cell's type scale (text-sm) is authoritative for every block inside it.
 * Block tools apply host-configured font sizes as INLINE font-size — paragraph
 * puts styles.size on its tool root, the list puts itemSize on each list item —
 * which would beat the cell's inherited size and render that block's text
 * larger than its neighbours in the same cell. Force cell block content to
 * inherit the cell font so all cell text stays uniform regardless of any
 * per-tool size config. !important is required to override the inline styles.
 *
 * NOTE: this invariant is mechanically guarded by
 * test/unit/architecture/table-cell-font-scale-law.test.ts — a new block tool
 * that sets an inline font-size on cell-reachable content must be covered here
 * (or exempted there with a reason), or that test fails.
 *
 * The list marker (a fixed-size bullet) sets its own font-size on a child that
 * is neither a [data-blok-tool] root nor a [role="listitem"], so it is left
 * untouched here — matching its size behaviour outside cells.
 */
[data-blok-table-cell-blocks] [data-blok-tool],
[data-blok-table-cell-blocks] [data-blok-tool="list"] [role="listitem"] {
  font-size: inherit !important;
}

/*
 * Compact text density — the default. 0.875rem is the `text-sm` scale the
 * cells carried as a utility class before the size became host-configurable
 * (`config.style.fontSize.table.compact`). Authored here rather than as a
 * utility because un-layered rules beat layered utilities, so the comfortable
 * rule below (and the cell-content inherit rule above) keep their precedence
 * without needing !important.
 */
[data-blok-table-cell] {
  font-size: var(--blok-table-font-size, 0.875rem);
}

/*
 * Comfortable text density: bump the cell type scale from the compact
 * default to the regular editor size (`config.style.fontSize.table.comfortable`).
 * Cell block content inherits this via the font-size:inherit rule above, so one
 * attribute on the <table> retypes every cell. Attribute + descendant gives
 * (0,2,0), which outranks the compact rule above.
 */
[data-blok-table-text-size="comfortable"] [data-blok-table-cell] {
  font-size: var(--blok-table-comfortable-font-size, 1rem);
}

/* ─── Cell content placement ──────────────────────────────────── */

[data-blok-cell-placement="top-center"] {
  align-items: center;
}

[data-blok-cell-placement="top-right"] {
  align-items: flex-end;
}

[data-blok-cell-placement="middle-left"] {
  justify-content: center;
}

[data-blok-cell-placement="middle-center"] {
  align-items: center;
  justify-content: center;
}

[data-blok-cell-placement="middle-right"] {
  align-items: flex-end;
  justify-content: center;
}

[data-blok-cell-placement="bottom-left"] {
  justify-content: flex-end;
}

[data-blok-cell-placement="bottom-center"] {
  align-items: center;
  justify-content: flex-end;
}

[data-blok-cell-placement="bottom-right"] {
  align-items: flex-end;
  justify-content: flex-end;
}

/**
 * Exclude bare 'color' from transition-property inside table cells.
 * StyleManager applies transition-colors (which includes 'color') for smooth
 * selection-state changes, but inside table cells inherited text-color changes
 * trigger a 150ms flash from black → target. Keep all other transition
 * properties so background-color selection highlighting still animates.
 */
[data-blok-table-cell] [data-blok-element-content] {
  transition-property: background-color, border-color, outline-color,
    text-decoration-color, fill, stroke, --tw-gradient-from,
    --tw-gradient-via, --tw-gradient-to;
}

/**
 * Multi-line drag selection inside a cell: a run of adjacent selected
 * line-blocks reads as one shape. Square the corners where two selected
 * blocks touch so only the run's first-top and last-bottom corners stay
 * rounded (StyleManager gives each selected content element rounded-[4px]).
 */
[data-blok-table-cell] [data-blok-selected="true"] + [data-blok-selected="true"] [data-blok-element-content] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

[data-blok-table-cell] [data-blok-selected="true"]:has(+ [data-blok-selected="true"]) [data-blok-element-content] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/**
 * Table heading styles
 * Applied to first row (heading row) and first column (heading column) cells
 */
[data-blok-table-heading] [data-blok-table-cell],
[data-blok-table-heading-col] {
  @apply font-semibold;
  background-color: var(--blok-table-heading-bg);
}

/**
 * Table scroll haze overlays
 * Gradient indicators that show horizontal scroll availability
 */
[data-blok-table-haze][data-blok-table-haze-visible] {
  @apply opacity-100;
}

/**
 * Dark theme overrides for table UI chrome.
 * Grip handles, add-row/col pills, and scroll haze all use hardcoded
 * Tailwind light-gray/white classes that are too bright on dark backgrounds.
 * Rules are written for both dark entry points (media query + explicit attr).
 */
@media (prefers-color-scheme: dark) {
  /* Grip pills — collapsed/idle state */
  :root:not([data-blok-theme="light"]) [data-blok-interface] [data-blok-table-grip]:not(.bg-gray-200):not(.bg-blue-500) {
    background-color: var(--blok-table-grip-bg);
  }
  /* Grip pills — hover-expanded state */
  :root:not([data-blok-theme="light"]) [data-blok-interface] [data-blok-table-grip].bg-gray-200 {
    background-color: var(--blok-table-grip-hover-bg);
  }
  /* Grip dot SVG (exclude active/blue state — text-white must win there) */
  :root:not([data-blok-theme="light"]) [data-blok-interface] [data-blok-table-grip]:not(.bg-blue-500) svg {
    color: var(--blok-table-grip-dot);
  }
  /* Add row/col pill: border + subtle rest-state fill */
  :root:not([data-blok-theme="light"]) [data-blok-interface] :is([data-blok-table-add-row], [data-blok-table-add-col]) .border-gray-300 {
    border-color: var(--blok-table-add-pill-border);
    background-color: var(--blok-table-add-pill-bg);
  }
  /* Add row/col pill hover background */
  :root:not([data-blok-theme="light"]) [data-blok-interface] :is([data-blok-table-add-row], [data-blok-table-add-col]):hover .border-gray-300 {
    background-color: var(--blok-table-add-pill-bg-hover);
  }
  /* Add row/col icon color */
  :root:not([data-blok-theme="light"]) [data-blok-interface] :is([data-blok-table-add-row], [data-blok-table-add-col]) .border-gray-300 svg {
    color: var(--blok-table-add-pill-icon);
  }
  /* Scroll haze: dark background gradient instead of white */
  :root:not([data-blok-theme="light"]) [data-blok-interface] [data-blok-table-haze="left"] {
    background-image: linear-gradient(to right, var(--blok-dark), transparent);
  }
  :root:not([data-blok-theme="light"]) [data-blok-interface] [data-blok-table-haze="right"] {
    background-image: linear-gradient(to left, var(--blok-dark), transparent);
  }
}

/* Explicit dark theme attribute — same overrides */
[data-blok-theme="dark"] [data-blok-interface] [data-blok-table-grip]:not(.bg-gray-200):not(.bg-blue-500) {
  background-color: var(--blok-table-grip-bg);
}
[data-blok-theme="dark"] [data-blok-interface] [data-blok-table-grip].bg-gray-200 {
  background-color: var(--blok-table-grip-hover-bg);
}
[data-blok-theme="dark"] [data-blok-interface] [data-blok-table-grip]:not(.bg-blue-500) svg {
  color: var(--blok-table-grip-dot);
}
[data-blok-theme="dark"] [data-blok-interface] :is([data-blok-table-add-row], [data-blok-table-add-col]) .border-gray-300 {
  border-color: var(--blok-table-add-pill-border);
  background-color: var(--blok-table-add-pill-bg);
}
[data-blok-theme="dark"] [data-blok-interface] :is([data-blok-table-add-row], [data-blok-table-add-col]):hover .border-gray-300 {
  background-color: var(--blok-table-add-pill-bg-hover);
}
[data-blok-theme="dark"] [data-blok-interface] :is([data-blok-table-add-row], [data-blok-table-add-col]) .border-gray-300 svg {
  color: var(--blok-table-add-pill-icon);
}
[data-blok-theme="dark"] [data-blok-interface] [data-blok-table-haze="left"] {
  background-image: linear-gradient(to right, var(--blok-dark), transparent);
}
[data-blok-theme="dark"] [data-blok-interface] [data-blok-table-haze="right"] {
  background-image: linear-gradient(to left, var(--blok-dark), transparent);
}

/* Table card pins its top toolbar anchor absolutely to the (position:relative)
   wrapper top, so the +/tunes buttons sit flush with the table's top edge while
   the marker stays out of the flow — it never becomes the wrapper's firstChild,
   which the grid/scroll structure relies on. */
[data-blok-tool="table"] .blok-toolbar-top-anchor {
  position: absolute;
  top: 0;
  left: 0;
}