/* The grid component (GridComponent in components.py,
   templates/components/grid.html, frontend/src/grid/).

   One stylesheet for both modes on purpose, because they share their markup:
   mode="view" is exactly what mode="edit" starts from, so a page whose
   JavaScript never runs stays a readable, scrollable table and loses only the
   in-cell editing.

   Every custom colour is a CSS variable with overrides under *both* dark-mode
   selectors, so the grid follows an app that pins its scheme with
   data-fcu-color-scheme and one that lets the OS decide. */

:root {
  --fcu-grid-header-bg: var(--fcu-bg);
  --fcu-grid-stripe: hsla(0, 0%, 0%, 0.02);
  --fcu-grid-hover: hsla(210, 70%, 55%, 0.06);
  --fcu-grid-selected: hsla(210, 70%, 55%, 0.14);
  --fcu-grid-selected-border: hsla(210, 70%, 50%, 0.9);
  --fcu-grid-pending: hsla(45, 90%, 55%, 0.18);
  --fcu-grid-error: hsla(0, 75%, 55%, 0.16);
  --fcu-grid-error-border: hsla(0, 70%, 45%, 0.8);
  --fcu-grid-row-height: 2.25rem;
}

:root[data-fcu-color-scheme="dark"] {
  --fcu-grid-stripe: hsla(0, 0%, 100%, 0.03);
  --fcu-grid-hover: hsla(210, 70%, 65%, 0.1);
  --fcu-grid-selected: hsla(210, 70%, 65%, 0.2);
  --fcu-grid-selected-border: hsla(210, 70%, 70%, 0.9);
  --fcu-grid-pending: hsla(45, 80%, 60%, 0.22);
  --fcu-grid-error: hsla(0, 70%, 60%, 0.22);
  --fcu-grid-error-border: hsla(0, 70%, 65%, 0.85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-fcu-color-scheme="light"]) {
    --fcu-grid-stripe: hsla(0, 0%, 100%, 0.03);
    --fcu-grid-hover: hsla(210, 70%, 65%, 0.1);
    --fcu-grid-selected: hsla(210, 70%, 65%, 0.2);
    --fcu-grid-selected-border: hsla(210, 70%, 70%, 0.9);
    --fcu-grid-pending: hsla(45, 80%, 60%, 0.22);
    --fcu-grid-error: hsla(0, 70%, 60%, 0.22);
    --fcu-grid-error-border: hsla(0, 70%, 65%, 0.85);
  }
}

/* --- The scroll window ---------------------------------------------------
   Scrolling happens *inside* the component: the page does not move when a long
   table is browsed, and a wide table scrolls horizontally in its own container
   rather than making the document scroll sideways. The height comes from the
   component's rows= parameter, set as --fcu-grid-rows on the wrapper. */

.fcu-grid {
  margin: 1rem 0;
}

.fcu-grid-scroll {
  max-height: calc(var(--fcu-grid-rows, 12) * var(--fcu-grid-row-height) + 2.5rem);
  overflow: auto;
  border: 1px solid var(--fcu-border);
  border-radius: var(--fcu-border-radius);
  background: var(--fcu-surface);
}

.fcu-grid-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  color: var(--fcu-text);
}

.fcu-grid-table caption {
  caption-side: top;
  text-align: left;
  padding: 0.5rem 0.7rem;
  font-weight: 600;
  color: var(--fcu-text);
}

.fcu-grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 0.5rem 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--fcu-grid-header-bg);
  border-bottom: 1px solid var(--fcu-border);
}

.fcu-grid-table tbody td {
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--fcu-border);
  vertical-align: top;
  /* A long text cell must not stretch the table past its container. */
  max-width: 22rem;
  overflow-wrap: anywhere;
}

.fcu-grid-table tbody tr:nth-child(even) td {
  background: var(--fcu-grid-stripe);
}

/* The header is a sort link, but it must read as a heading rather than as
   navigation — the underline belongs on hover only. */
.fcu-grid-sort {
  color: inherit;
  text-decoration: none;
}

.fcu-grid-sort:hover {
  text-decoration: underline;
}

/* --- Footer, paging and messages ----------------------------------------- */

.fcu-grid-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  font-size: 0.85rem;
}

.fcu-grid-pager {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.fcu-grid-page {
  padding: 0.1rem 0.45rem;
  border-radius: var(--fcu-border-radius);
  text-decoration: none;
  color: var(--fcu-text);
}

.fcu-grid-page:hover {
  background: var(--fcu-grid-hover);
}

.fcu-grid-page--current {
  font-weight: 600;
  background: var(--fcu-grid-selected);
}

.fcu-grid-message,
.fcu-grid-notice {
  margin: 0.4rem 0 0 0;
  font-size: 0.85rem;
  color: var(--fcu-grid-error-border);
}

.fcu-grid-message:empty {
  display: none;
}

.fcu-grid-error {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--fcu-grid-error-border);
}

.fcu-grid-empty {
  padding: 0.8rem;
  color: var(--fcu-text-muted);
}

/* The forms that the in-table controls reference by ``form="…"``. They hold
   nothing but hidden inputs, and a stray blank line under the table is still a
   visible layout change. */
.fcu-grid-form {
  display: contents;
}

/* --- The JavaScript-free controls ----------------------------------------
   The shell's baseline is ``.js-hide { display: block }``, which would turn a
   hidden <tr> into a block box and collapse the table. These restore the
   element's real display for the scripting-off case; the shell's
   ``.js-enabled .js-hide { display: none !important }`` still wins when
   scripting is on. */

.fcu-grid tr.js-hide {
  display: table-row;
}

.fcu-grid a.js-hide,
.fcu-grid button.js-hide {
  display: inline-block;
}

.fcu-grid-actions {
  width: 1%;
  white-space: nowrap;
}

.fcu-grid-edit,
.fcu-grid-delete {
  border: 0;
  background: none;
  color: var(--fcu-text-muted);
  cursor: pointer;
  padding: 0 0.3rem;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}

.fcu-grid-edit:hover {
  color: var(--fcu-primary, #2c6fb0);
}

.fcu-grid-delete:hover {
  color: var(--fcu-danger, #c0392b);
}

.fcu-grid-btn {
  padding: 0.1rem 0.5rem;
  font-size: 0.85rem;
}

/* A row open as a form, and the always-present add row. Cells lose their top
   padding so an input sits where the text it replaces sat. */
.fcu-grid-table tbody tr.fcu-grid-editing td,
.fcu-grid-table tbody tr.fcu-grid-newrow td {
  padding: 0.2rem 0.35rem;
}

.fcu-grid-table tbody tr.fcu-grid-newrow td {
  background: none;
}

/* --- In-place editing (mode="edit" with scripting) -----------------------
   Everything below applies only once the client has hydrated the table; with
   JavaScript off none of these classes is ever set. */

[data-fcu-grid] .fcu-grid-table tbody tr:hover td {
  background: var(--fcu-grid-hover);
}

.fcu-grid--editable .fcu-grid-table tbody td {
  cursor: cell;
}

[data-fcu-grid] .fcu-grid-table td.fcu-grid-selected {
  background: var(--fcu-grid-selected);
  box-shadow: inset 0 0 0 2px var(--fcu-grid-selected-border);
}

[data-fcu-grid] .fcu-grid-table td.fcu-grid-pending {
  background: var(--fcu-grid-pending);
}

[data-fcu-grid] .fcu-grid-table td.fcu-grid-failed {
  background: var(--fcu-grid-error);
  box-shadow: inset 0 0 0 2px var(--fcu-grid-error-border);
}

/* The in-cell editor. It replaces the cell's text while open, so it must fill
   the cell exactly or committing an edit would visibly shift the row. */
.fcu-grid-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.15rem 0.25rem;
  border: 0;
  outline: none;
  background: var(--fcu-input-bg);
  color: var(--fcu-text);
  font: inherit;
}

.fcu-grid-input[type="checkbox"] {
  width: auto;
}

/* The client's permanently blank row: not a real row until its first cell is
   committed, and it reads as an invitation rather than as data. */
[data-fcu-grid] .fcu-grid-table tbody tr.fcu-grid-blank td {
  color: var(--fcu-text-muted);
  font-style: italic;
  background: none;
}