/**
 * filament-sticky-columns.css
 * zeeshantariq/filament-sticky-columns
 *
 * Companion styles for the JS engine.
 * Uses Filament CSS custom properties — works in light AND dark mode.
 */

/* ── Table wrapper must scroll horizontally ───────────────────────────────── */
.fi-ta-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Filament v4/v5 can use this hook class as the horizontal scroller */
.fi-ta-content-ctn.fi-fixed-positioning-context {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Allow apps to mark their own scroll wrapper */
[data-sticky-wrapper] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Every sticky cell ────────────────────────────────────────────────────── */
[data-sticky-applied] {
  /* JS handles position / offset / z-index */
  transition: box-shadow 150ms ease, background-color 150ms ease;

  /* Fix Safari sub-pixel rendering bug */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);

  /*
   * Sticky cells stack above the next columns (z-index). Without clipping, long
   * text can paint over neighbouring cells — e.g. last name "Black" over company.
   */
  overflow: hidden;
  min-width: 0;
}

/* ── Shadows — only visible after the user scrolls ───────────────────────── */

/* Left-sticky: shadow on the RIGHT edge */
[data-sticky-applied="left"] {
  box-shadow: none;
}
[data-sticky-applied="left"].sticky-shadow-active {
  box-shadow: 4px 0 8px -2px var(--sticky-shadow-color, rgba(0, 0, 0, 0.12));
}

/* Right-sticky: shadow on the LEFT edge */
[data-sticky-applied="right"] {
  box-shadow: none;
}
[data-sticky-applied="right"].sticky-shadow-active {
  box-shadow: -4px 0 8px -2px var(--sticky-shadow-color, rgba(0, 0, 0, 0.12));
}

/* ── Dark-mode shadow override ────────────────────────────────────────────── */
.dark [data-sticky-applied="left"].sticky-shadow-active,
.dark [data-sticky-applied="right"].sticky-shadow-active {
  --sticky-shadow-color: rgba(0, 0, 0, 0.45);
}

/* ── Header cells sit above body cells ───────────────────────────────────── */
thead [data-sticky-applied] {
  z-index: 20 !important;
}

/* Mark sticky headers with a small pin icon beside the label. */
[data-sticky-pin-icon] {
  flex-shrink: 0;
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-inline-end: 0.375rem;
  vertical-align: -0.125rem;
  background-color: currentColor;
  opacity: 0.65;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 2.75h7m-5.25 0 .5 5-3.25 2.75v1.25h9v-1.25L11.25 7.75l.5-5M10 11.75v5.5' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 2.75h7m-5.25 0 .5 5-3.25 2.75v1.25h9v-1.25L11.25 7.75l.5-5M10 11.75v5.5' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Surface / background colours ────────────────────────────────────────── */

/* Light mode — Filament v3/v4/v5 all expose --body-bg or similar vars */
[data-sticky-applied] {
  background-color: var(--fi-color-bg, var(--body-bg, rgb(249 250 251)));
}

/*
 * Dark mode — same cool blue-gray as Filament’s marketing/docs dark UI (~#111827, neutral gray-900).
 * Override with --sticky-theme-surface if your panel uses a different canvas.
 */
.dark [data-sticky-applied] {
  background-color: var(--sticky-theme-surface, rgb(17 24 39));
}

/* ── Row states: hover and selected must still be visible ─────────────────── */
tr:hover [data-sticky-applied] {
  background-color: inherit;
}

tr.fi-selected [data-sticky-applied],
tr[wire\:key].fi-selected [data-sticky-applied] {
  background-color: inherit;
}

/* ── Striped tables (if the panel enables them) ───────────────────────────── */
tr:nth-child(even) [data-sticky-applied] {
  background-color: inherit;
}

/* ── Prevent content bleed on sticky cell borders ────────────────────────── */
[data-sticky-applied] {
  border-right-width: inherit;
  border-left-width: inherit;
}