/*!
 * @viewflow/material — Material 3 web components
 * Copyright (c) 2017-2026 Mikhail Podgurskiy
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * AGPLv3 with the Viewflow Library Exception — see LICENSE_EXCEPTION.
 *
 * The copyright holder regards code produced from this file with an LLM's
 * help as a derived work: placing it in a model's context is copying it.
 * A commercial licence without copyleft: https://viewflow.io/pro.html
 */

/* material.css — the library's light-DOM stylesheet.
 *
 * Generated by scripts/build-material-css.mjs from the same
 * `layer(components)` imports src/global/material.css uses for the demo
 * build, so this file can't drift from what the demo site ships. Components
 * that read server-rendered markup directly instead of a shadow root
 * (material-data-table, material-breadcrumbs, and any later addition with
 * the same server-first design) need their styling to live in the host
 * page's own stylesheet — load this alongside theme.css wherever one of
 * them appears:
 *
 *   <link rel="stylesheet" href="theme.css">
 *   <link rel="stylesheet" href="material.css">
 *
 * Do not edit this file — edit the component's own .css under src/components/.
 */

/* material-data-table — light-DOM styles.
 *
 * NOT a Stencil styleUrl: the table lives in the light DOM (server-rendered
 * markup), so these are plain document-level selectors. The file is
 * @import-ed by src/global/material.css into Tailwind's `components` layer —
 * below `utilities` — so any Tailwind class on the markup still wins.
 *
 * Visual style is the M2 data-table anatomy (M3 never shipped one) redrawn
 * with M3 tokens: 12dp rounded outline container on surface, outline-variant
 * row dividers, 8% on-surface hover, secondary-container selection tint.
 * All sizes in rem so the A−/A/A+ density picker scales them.
 */

material-data-table {
  display: block;
  overflow: auto;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0.75rem;
}

material-data-table table {
  width: 100%;
  /* when column widths get frozen to px (resize / virtual), a narrow sum
     still stretches to fill the container */
  min-width: 100%;
  /* `separate` (not collapse) so the sticky header keeps its border while
     the rows scroll under it; dividers are per-cell border-bottoms. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--md-sys-color-on-surface);
}

/* --- header ------------------------------------------------------------- */

material-data-table th {
  height: 3.5rem;
  padding-inline: 1rem;
  text-align: start;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface); /* opaque for sticky mode */
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

material-data-table[sticky-header] thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* The actively sorted column reads at full contrast. */
material-data-table th[aria-sort] {
  color: var(--md-sys-color-on-surface);
}

/* Sort controls: server-driven <a href="?o=…"> or client-side <button>
   inside th[data-sort]. Same anatomy either way. */
material-data-table th a,
material-data-table th[data-sort] button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

material-data-table th a:hover,
material-data-table th[data-sort] button:hover {
  color: var(--md-sys-color-on-surface);
}

material-data-table th a:focus-visible,
material-data-table th[data-sort] button:focus-visible {
  /* 2px width predates the 3px MD3 default — kept for visual continuity. */
  --md-focus-ring-width: 2px;
  outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color);
  outline-offset: var(--md-focus-ring-offset);
  border-radius: 0.25rem;
}

/* Direction arrow — Material Symbols ligature. Hidden until the column is
   sorted; sortable columns preview it faintly on hover. */
material-data-table th a::after,
material-data-table th[data-sort] button::after {
  content: 'arrow_upward';
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1;
  direction: ltr;
  opacity: 0;
  transition: opacity 0.15s;
}

material-data-table th:not([aria-sort]) a:hover::after,
material-data-table th:not([aria-sort]) a:focus-visible::after,
material-data-table th[data-sort]:not([aria-sort]) button:hover::after,
material-data-table th[data-sort]:not([aria-sort]) button:focus-visible::after {
  opacity: 0.5;
}

material-data-table th[aria-sort='ascending'] a::after,
material-data-table th[aria-sort='ascending'] button::after {
  opacity: 1;
}

material-data-table th[aria-sort='descending'] a::after,
material-data-table th[aria-sort='descending'] button::after {
  content: 'arrow_downward';
  opacity: 1;
}

/* --- body ----------------------------------------------------------------- */

material-data-table td {
  height: 3.25rem;
  padding-inline: 1rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

material-data-table tbody tr:last-child td {
  border-bottom: 0;
}

material-data-table tbody tr:not(:has(td.empty)):hover td {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

/* Checked rows — set by the component from the row checkbox state. */
material-data-table tbody tr.selected td {
  background: color-mix(in srgb, var(--md-sys-color-secondary-container) 40%, transparent);
}

material-data-table tbody tr.selected:hover td {
  background: color-mix(in srgb, var(--md-sys-color-secondary-container) 60%, transparent);
}

material-data-table tr[data-row-link] {
  cursor: pointer;
}

/* In-cell links (row title, related object) — primary-tinted, underline on
   hover only, so dense tables don't turn into underline soup. */
material-data-table td a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

material-data-table td a:hover {
  text-decoration: underline;
}

/* --- cell modifiers ------------------------------------------------------- */

material-data-table th.numeric,
material-data-table td.numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Selection column hugs its checkbox. No start padding: material-checkbox's
   own touch-target halo (~0.7rem around the visual box) is the inset. The
   width must really fit the 2.5rem touch target: under a frozen table-layout
   (virtual/resize) the hint is taken literally, and freezing can happen
   before the checkbox hydrates to its full size. */
material-data-table th.cell-select,
material-data-table td.cell-select {
  width: 2.75rem;
  padding-inline: 0;
}

/* Native inputs have no halo — give them the inset themselves. */
material-data-table .cell-select input[type='checkbox'] {
  margin-inline-start: 0.75rem;
}

material-data-table .cell-select material-checkbox,
material-data-table .cell-select input[type='checkbox'] {
  display: inline-flex;
  vertical-align: middle;
}

/* Native row checkboxes (the cheap option for `virtual` tables with
   thousands of rows — no per-row hydration) still read as Material. */
material-data-table input[type='checkbox'] {
  accent-color: var(--md-sys-color-primary);
  width: 1.125rem;
  height: 1.125rem;
}

/* Server renders <td class="empty" colspan="…"> when the queryset is empty. */
material-data-table td.empty {
  height: auto;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--md-sys-color-on-surface-variant);
}

/* --- states / addons ------------------------------------------------------ */

material-data-table tbody {
  transition: opacity 0.15s;
}

material-data-table[loading] tbody {
  opacity: 0.38;
  pointer-events: none;
}

material-data-table[dense] th {
  height: 2.75rem;
}

material-data-table[dense] td {
  height: 2.5rem;
}

/* --- column resize / reorder (v2) ----------------------------------------- */

/* Grips and drop markers are absolute inside the th; th is otherwise static.
   Lower specificity than the [sticky-header]/.pinned rules below, so a
   positioned-for-sticky th stays sticky. */
material-data-table[resizable] th,
material-data-table[reorderable] th {
  position: relative;
}

/* Horizontal pointer moves drive the column drag; vertical stays a scroll. */
material-data-table[reorderable] thead th {
  touch-action: pan-y;
}

/* Fully inside its th — an overhang into the next th would lose the hit-test
   under a pinned neighbour's stacking context. */
material-data-table .col-resize {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 0.75rem;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  z-index: 2;
}

material-data-table .col-resize::before {
  content: '';
  position: absolute;
  inset-block: 25%;
  inset-inline-end: 1px;
  width: 2px;
  border-radius: 1px;
  background: var(--md-sys-color-primary);
  opacity: 0;
  transition: opacity 0.15s;
}

material-data-table .col-resize:hover::before,
material-data-table .col-resize.active::before {
  opacity: 1;
}

material-data-table th.drag-col {
  opacity: 0.5;
}

material-data-table[data-reordering] {
  user-select: none;
  cursor: grabbing;
}

material-data-table th.drop-before::before,
material-data-table th.drop-after::before {
  content: '';
  position: absolute;
  inset-block: 0;
  width: 3px;
  background: var(--md-sys-color-primary);
  z-index: 3;
}

material-data-table th.drop-before::before {
  inset-inline-start: -1.5px;
}

material-data-table th.drop-after::before {
  inset-inline-end: -1.5px;
}

/* --- sticky columns (v2) --------------------------------------------------- */

material-data-table .pinned {
  position: sticky;
  z-index: 1;
  background: var(--md-sys-color-surface);
}

material-data-table thead th.pinned {
  position: sticky;
  z-index: 2;
}

/* Hover/selected tints are translucent; pinned cells need them opaque so
   scrolled-under content can't bleed through. */
material-data-table tbody tr:not(:has(td.empty)):hover td.pinned {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface));
}

material-data-table tbody tr.selected td.pinned {
  background: color-mix(in srgb, var(--md-sys-color-secondary-container) 40%, var(--md-sys-color-surface));
}

material-data-table tbody tr.selected:hover td.pinned {
  background: color-mix(in srgb, var(--md-sys-color-secondary-container) 60%, var(--md-sys-color-surface));
}

/* Edge shadow once the table is scrolled sideways. */
material-data-table .pinned-last::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 100%;
  width: 0.625rem;
  pointer-events: none;
  background: linear-gradient(to var(--_pin-shadow-dir, right),
    color-mix(in srgb, var(--md-sys-color-shadow) 12%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.15s;
}

material-data-table:dir(rtl) .pinned-last::after {
  --_pin-shadow-dir: left;
}

material-data-table[data-inline-scrolled] .pinned-last::after {
  opacity: 1;
}

/* --- row grouping (v2) ------------------------------------------------------ */

material-data-table tr.row-group td {
  background: var(--md-sys-color-surface-container-low);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

/* Injected toggle — a real button carries tabindex/aria-expanded (a tr may
   not, outside a treegrid). The whole row still toggles on click. */
material-data-table .group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin-inline-end: 0.5rem;
  border: 0;
  border-radius: 9999px;
  background: none;
  cursor: pointer;
  vertical-align: middle;
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
  transition: transform 0.15s;
}

material-data-table tr.row-group.collapsed .group-toggle {
  transform: rotate(-90deg);
}

material-data-table:dir(rtl) tr.row-group.collapsed .group-toggle {
  transform: rotate(90deg);
}

material-data-table .group-toggle:focus-visible {
  /* 2px width predates the 3px MD3 default — kept for visual continuity. */
  --md-focus-ring-width: 2px;
  outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color);
  outline-offset: var(--md-focus-ring-offset);
}

/* --- inline cell editing (v2) ----------------------------------------------- */

/* An ordinary form control that reads as cell text until pointed at. The
   negative margin keeps its text aligned with plain cells. */
material-data-table td .cell-edit {
  width: 100%;
  min-width: 3rem;
  padding: 0.375rem 0.5rem;
  margin-inline: -0.5rem;
  background: none;
  border: 0;
  border-radius: 0.375rem;
  font: inherit;
  color: inherit;
}

material-data-table td .cell-edit:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

material-data-table td .cell-edit:focus {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
  background: var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));
}

material-data-table td.numeric .cell-edit {
  text-align: end;
}

/* --- responsive columns (v2) ------------------------------------------------- */

material-data-table .col-hidden {
  display: none;
}

material-data-table th.cell-more,
material-data-table td.cell-more {
  width: 2.75rem;
  padding-inline: 0.25rem;
  text-align: center;
}

material-data-table .row-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 9999px;
  background: none;
  cursor: pointer;
  font-family: 'Material Symbols Outlined';
  font-size: 1.25rem;
  line-height: 1;
  color: var(--md-sys-color-on-surface-variant);
}

material-data-table .row-more:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

material-data-table .row-more:focus-visible {
  /* 2px width predates the 3px MD3 default — kept for visual continuity. */
  --md-focus-ring-width: 2px;
  outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color);
  outline-offset: var(--md-focus-ring-offset);
}

material-data-table .row-more[aria-expanded='true'] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

material-data-table tr.detail-row td {
  height: auto;
  padding-block: 0.625rem;
  background: var(--md-sys-color-surface-container-low);
}

material-data-table tr.detail-row dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.375rem 1.25rem;
  margin: 0;
  font-size: 0.8125rem;
}

material-data-table tr.detail-row dt {
  font-weight: 500;
  color: var(--md-sys-color-on-surface-variant);
}

material-data-table tr.detail-row dd {
  margin: 0;
}

/* --- virtual rows (v2) ------------------------------------------------------- */

material-data-table tr.v-spacer td {
  height: 0;
  padding: 0;
  border: 0;
}

/* With the bottom spacer as :last-child, the closing-divider suppression
   must reach the last data row instead. Only visible when scrolled to the
   very bottom, where the spacer is 0 high. */
material-data-table tbody tr:nth-last-child(2):has(+ .v-spacer) td {
  border-bottom: 0;
}

/* Pagination / status bar slot: a plain <footer> after the table. Its
   border-top is the closing divider — the last row's own divider is already
   suppressed above. */
material-data-table > footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  font-size: 0.875rem;
  color: var(--md-sys-color-on-surface-variant);
}

/* material-breadcrumbs — light-DOM styles (NOT a Stencil styleUrl).
 * @import-ed by src/global/material.css into the `components` layer so the
 * server-rendered crumbs are styled before hydration and Tailwind utilities
 * on the markup still win. */

material-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--md-sys-color-on-surface-variant);
}

material-breadcrumbs > * {
  display: inline-flex;
  align-items: center;
}

/* Chevron separator between crumbs; mirrors with the reading direction. */
material-breadcrumbs > * + *::before {
  content: 'chevron_right';
  font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', sans-serif;
  font-weight: normal;
  font-size: 1.125rem;
  line-height: 1;
  margin-inline: 0.375rem;
  color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 70%, transparent);
  direction: ltr;
}

material-breadcrumbs:dir(rtl) > * + *::before {
  content: 'chevron_left';
}

material-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  border-radius: 0.25rem;
}

material-breadcrumbs a:hover {
  color: var(--md-sys-color-on-surface);
  text-decoration: underline;
}

material-breadcrumbs a:focus-visible {
  /* 2px width predates the 3px MD3 default — kept for visual continuity. */
  --md-focus-ring-width: 2px;
  outline: var(--md-focus-ring-width) solid var(--md-focus-ring-color);
  outline-offset: var(--md-focus-ring-offset);
}

material-breadcrumbs [aria-current='page'] {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
}