/* ============================================================
   Grid — additive styles only.
   Row colors, pager, cell borders → handled by common-theme via tokens.
   We only add fonts, animations, readonly/nested, scrollbar.
   ============================================================ */

/* ── Row height — override Serenity default of 30px ─────────── */
:root {
  --sg-row-height: 40px;
  --sg-cell-height: 40px;
}

/* ── Column header font ──────────────────────────────────────
   The brand's micro-label — 9.5px / .14em / uppercase — which is what
   `.wgl-saved-head` sets over the hand-written card lists and what every
   `.wgl-field-label` is set at. A column caption now reads the same whether
   the list underneath it is a SlickGrid or a stack of cards.

   Tracking is .14em rather than the .16em of a field label: a header row is a
   line of six or ten captions competing for width, and the extra letter-space
   is what pushed "Payout Method Code" into an ellipsis.                    */
.slick-header-column,
.slick-group-header-column {
  font-family: var(--header-font);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-column-header);
}

/* The header strip reads as the top edge of the data, so it takes the hairline
   rather than the framework's heavier rule. */
.slick-header,
.slick-headerrow {
  background: transparent;
  border-bottom: var(--wgl-edge-thin);
}

/* ── Header alignment follows cell alignment ─────────────────── */
/* CustomEntityGrid mirrors align-right/center onto headerCssClass; these  */
/* rules push the title text to match its right/center-aligned values.     */
.slick-header-column.align-right .slick-column-name {
  width: 100%;
  text-align: right;
}
.slick-header-column.align-center .slick-column-name {
  width: 100%;
  text-align: center;
}

/* ── Cell font & color ───────────────────────────────────────── */
/* Serenity renders cells as <a> links — override so they inherit  */
/* body color (black) instead of --bs-link-color (blue).           */
.slick-cell {
  font-family: var(--s-tabular-font);
  color: var(--bs-body-color);
}
.slick-cell a {
  color: inherit;
}
/* NOT --bs-primary: the brand yellow as text on a white cell is
   1.4:1. --bs-link-hover-color is the deep yellow on light and the
   bright yellow on dark, so the hover reads in both. */
.slick-cell a:hover {
  color: var(--bs-link-hover-color);
}

/* ── Group totals — fix hardcoded colors in common-theme ────── */
.slick-group-totals .slick-cell {
  background-color: var(--bs-primary-bg-subtle);
  border-top: 1px solid var(--bs-primary-border-subtle);
  color: var(--bs-primary-text-emphasis);
  font-weight: 700;
}

/* ── Row states ──────────────────────────────────────────────
   common-theme paints the active row as --bs-primary at 20% and the
   active CELL as a hardcoded rgb(0,114,255,.2) — a literal blue that
   no theme variable can reach. Both are restated here on the brand.

   The selected row is a quiet tint plus a brand bar on the leading
   edge, not a saturated fill: a full-width yellow row is punishing
   to scan past in a long list.                                  ── */
.slick-row:hover .slick-cell {
  background-color: var(--s-row-bg-hover);
}
.slick-row.active {
  background-color: var(--s-row-bg-selected);
}
.slick-row.active > .slick-cell:first-child {
  box-shadow: inset 3px 0 0 0 var(--s-row-marker);
}
[dir="rtl"] .slick-row.active > .slick-cell:first-child {
  box-shadow: inset -3px 0 0 0 var(--s-row-marker);
}
.slick-cell.active {
  background-color: var(--s-row-bg-selected);
  box-shadow: inset 0 0 0 1px var(--s-row-marker);
}
.slick-cell.invalid {
  background-color: rgba(var(--bs-danger-rgb), 0.16);
  box-shadow: 0 0 0 1px var(--bs-danger);
}

/* ── Inline action animation ─────────────────────────────────── */
.inline-action {
  display: inline-block;
  transition: transform 0.12s ease, color 0.12s ease;
  transform-origin: center;
  cursor: pointer;
}
.inline-action:hover {
  transform: scale(1.18);
  color: var(--bs-link-hover-color) !important;
}

/* ── Read-only nested grid ───────────────────────────────────── */
.readonly-grid .grid-toolbar { display: none !important; }
.readonly-grid {
  min-height: 420px;
  height: auto !important;
  max-height: 600px;
  overflow-y: auto;
}
.nested-grid-style {
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  height: 500px;
}

/* ── Law dialog detail-tab inline grids ──────────────────────── */
/* The master-detail editors on the Law dialog's Provisions / Structure /   */
/* Articles / Documents / Media tabs. GridEditorBase sizes its viewport to  */
/* a couple of rows, which wastes the tab's vertical space. Grow the        */
/* viewport but cap it so a law with many rows scrolls internally instead   */
/* of pushing the dialog past the screen.                                   */
.law-detail-grid {
  min-height: 400px;
  height: auto !important;
}
.law-detail-grid .slick-viewport {
  min-height: 320px;
  max-height: 60vh;
}

/* ── Send Newsletter subscriber picker ───────────────────────── */
/* Fills the xl dialog rather than sitting in a short box surrounded by dead */
/* space. Capped in vh so a long subscriber list scrolls inside the grid     */
/* instead of pushing the dialog's buttons off-screen on a laptop.           */
.newsletter-picker-grid {
  height: auto !important;

  /* 45px rows. MUST stay in sync with rowHeight in NewsletterPickerGrid's
     getSlickOptions(): this variable is what actually paints the row, but
     SlickGrid uses rowHeight for its virtual-scroll maths. If the two
     disagree, rows drift out of alignment as you scroll a long list. */
  --sg-row-height: 45px;
  --sg-cell-height: 45px;
}
.newsletter-picker-grid .slick-viewport {
  min-height: 360px;
  max-height: 52vh;
}

/* ── Master-detail grid fills its tab ─────────────────────────
   common-theme builds a flex-column chain so a grid can fill its host:
   .s-Form, .s-PropertyGrid, .tab-content, .tab-pane, .s-DataGrid and
   .grid-container are all `display:flex; flex-direction:column;
   flex:1 1 auto; min-height:0`.

   Three links are missing from it. PropertyGrid renders

       .categories > .category > .field.<Name> > .s-DataGrid

   and `.categories` is only ever given `flex: 1 1 auto` — it is a flex
   ITEM, never a flex CONTAINER — while `.category` and `.field` are
   plain blocks. So the grid's own `flex: 1` has nothing to grow
   against and .grid-container falls back to its 150px min-height.
   That is the short, half-empty Lines / Items / Spaces / Payments
   grid: the space below it is the tab's, the grid just never claimed it.

   Restored only for the categories that actually host a grid, via
   :has(), so ordinary field categories keep their block flow. */
/* Turning these into columns re-reads every flex property common-theme wrote for
   its ROW layout, and three of them then mean something different and wrong. All
   three are neutralised here, together, because they are one bug with three
   symptoms:

     flex-wrap: wrap        the grid wrapped into a SECOND COLUMN beside the
                            caption — see the .category-title rule below
     align-items: flex-start  children stopped stretching and sized to their own
                            content, so a narrow grid (Cash Session movements:
                            1082px of columns) left a gap to the right of it
     flex-basis: 100%       on .category-title, "full width" became "full HEIGHT"

   Any future :has(.s-DataGrid) layout oddity is worth checking against this list
   first. */
.s-PropertyGrid .categories:has(.s-DataGrid),
.s-PropertyGrid .category:has(.s-DataGrid),
.s-PropertyGrid .field:has(.s-DataGrid) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex-wrap: nowrap;

  /* Stretch, so the grid is as wide as the tab whatever its columns add up to. */
  align-items: stretch;
}

/* The caption is a HEADER, not a column — and since form.css seated it on the
   card's corner it is not a flex item at all.

   The history is worth keeping. common-theme gives .category-title
   `flex: 0 1 100%`, which in its own row layout means "take the full width".
   Turning the category into a column above reinterpreted that basis as a full
   HEIGHT: a 44px-wide, 361px-tall label with its text centred vertically, and —
   because the theme also sets flex-wrap:wrap — the grid then wrapped into a
   SECOND COLUMN beside it. That was the "LINES" caption floating halfway down
   the left of the Lines tab, and `width: 100%` was the fix.

   form.css now takes the caption out of the flow entirely, so neither the basis
   nor the direction reaches it. `width: 100%` outlived its cause and became its
   own bug: an absolutely positioned tab stretched across the whole card, so the
   Movements category wore a full-width band instead of a corner flag. The flex
   values stay declared, and inert, because this selector is where anyone
   debugging that class of problem will look. */
.s-PropertyGrid .category:has(.s-DataGrid) > .category-title {
  flex: 0 0 auto;
  width: auto;
}

.s-PropertyGrid .category:has(.s-DataGrid),
.s-PropertyGrid .field:has(.s-DataGrid) {
  flex: 1 1 auto;
}

/* The trailing .vx / .clear spacers PropertyField appends would otherwise
   become flex items and eat a few pixels off the grid each. */
.s-PropertyGrid .field:has(.s-DataGrid) > .vx,
.s-PropertyGrid .field:has(.s-DataGrid) > .clear {
  flex: 0 0 auto;
}

/* Fill the tab.

   An earlier pass here made these `flex: 0 1 auto` so the grid stopped at its
   rows — a one-line sale had otherwise sat in a 515px box with 470px of dead
   space under it. The shop asked for the opposite: a child grid should claim the
   height it is given, which is what every other master-detail screen in the app
   does and what the empty canvas under a short list is for. So the growth is back,
   and the dead space is the price of a consistent frame.

   No height clamp on the container or the viewport. SlickGrid measures the
   container and writes the viewport height in inline px itself; overriding both
   with `height: auto !important` is what left a 45px canvas floating in a tall
   box with a gap beneath it. Give the container a real flex height and let the
   grid do its own arithmetic. */
.s-PropertyGrid .category .s-DataGrid .grid-container {
  flex: 1 1 auto;
  min-height: 200px;
}

/* ── Footer totals row (CustomEntityGrid summaries) ────────────
   The bar only exists while the view has rows — CustomEntityGrid's
   syncSummaryFooter() toggles showFooterRow — so these rules never
   paint an empty band.

   common-theme already gives .slick-footerrow its 2px top border and
   .slick-footerrow-column `float: left; height: 1.4em`. The float is
   what carries the column widths, so it must survive: switching the
   column to `display: flex` here dropped the float's layout and left
   the totals unpositioned. Alignment is done with text-align, and the
   1.4em line box is opened up so 45px rows don't crush the numbers. */
.slick-footerrow {
  font-weight: 600;
  background-color: var(--s-group-row-bg);
}
.slick-footerrow .slick-footerrow-column {
  height: 2.2em;
  line-height: 2.2em;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Totals sit under numeric columns, which are right-aligned; a summary on a
   center-aligned column follows its column instead. */
.slick-footerrow .slick-footerrow-column.align-center { text-align: center; }

/* ── Card container (view-switch card mode) ──────────────────── */
.card-container {
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--s-card-border);
  border-radius: var(--bs-border-radius-lg);
  padding: 1rem;
}
.card-items { --bs-gutter-y: var(--s-row-gap); }
.card-container .card {
  height: 12em;
  margin-bottom: 0.5rem;
  padding: 0.6rem;
  overflow-y: auto;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
* {
  scrollbar-color: var(--s-scroll-thumb) var(--s-scroll-track);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece { background: var(--s-scroll-track); }
::-webkit-scrollbar-thumb {
  background: var(--s-scroll-thumb);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--s-scroll-thumb-hover); }
.s-sidebar-groups { scrollbar-color: transparent transparent; }
.s-sidebar-groups:hover { scrollbar-color: var(--s-scroll-thumb) transparent; }