/* GENERATED — do not edit here.
   Canonical source: team.core/deploy/Tc.Deploy.Frontend/Assets/tc-grid.369c203a6d.css
   Refreshed by Sync-TcSharedAsset at build time; the publish refuses to ship a copy that has drifted. */
/* tc-grid — the stylesheet for tc-grid.js. Ships with it; neither works properly without the other.
 *
 * WHY THE GRID OWNS ITS CSS. The first version left the styling to each site, and the site that had it wrote
 * `details { padding: 1rem 1.3rem; border: 1px solid; margin-bottom: .8rem }` for its FAQ accordions - which is
 * a perfectly good rule that happened to also hit every multi-select filter in the grid. Each one grew to 64px
 * tall in a 30px row, so the filter row was half empty space and the multi-selects sat 17px below the text
 * boxes beside them. Nothing about that is visible from the site's stylesheet or from the grid's script: it is
 * an element selector in one file reaching into markup generated by another. A shared widget that renders its
 * own DOM has to bring its own styling AND defend it, or every site that adopts it gets a different bug.
 *
 * DENSE BY DEFAULT. A grid is a dense view - the point of it is to see as many rows and as much of each row as
 * the screen allows - so the resting sizes here are the library's `dense` density rather than its default.
 *
 * THEMING. Every colour and metric reads a `--tcc-grid-*` custom property with a fallback, the same tokens
 * `Team.Core.Blazor.Components`' DataGrid consumes, so a host that already themes that grid themes this one for
 * free and a static site tints it by setting the handful of tokens on `:root`. Class names are `tcg__*` rather
 * than the DataGrid's `tcc-grid__*` on purpose: these are two implementations of one design, and a page that
 * somehow loaded both stylesheets should not have them fight over the same selectors.
 *
 * CANONICAL COPY. This file lives in team.core/deploy/Tc.Deploy.Frontend/Assets and is copied into a site by
 * Sync-TcSharedAsset at build time. Edit it HERE; a copy in a site is a build output that the next build
 * overwrites, and a deploy refuses to ship one that has drifted.
 */

/* ------------------------------------------------------------------ the scroll box */

.tcg {
  position: relative;
  overflow: auto;
  background: var(--tcc-grid-surface, #ffffff);
  border: 1px solid var(--tcc-grid-line, #e5e7eb);
  border-radius: var(--tcc-radius-m, 12px);
  color: var(--tcc-grid-fg, #1f2937);
}

/* Everything the grid draws, sized the same way. A site's own box-sizing is usually this already; saying it
   here is what makes the control heights below land on the pixel they claim to. */
.tcg, .tcg *, .tcg *::before, .tcg *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ the table */

/* `table-layout: fixed` is not a look, it is the whole column-stability behaviour: widths come from the
   <colgroup> the script writes and nothing in the cells can renegotiate them, so filtering 338 rows down to 4
   leaves every column exactly where it was. The script sets the width in pixels too - a table narrower than its
   container is a correct outcome when no column has more content to show. */
.tcg__table {
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 0;
  background: none;
  font-size: var(--tcc-grid-cell-font, .84rem);
  font-variant-numeric: tabular-nums;
}

/* THE DEFENSIVE RESET. Bare element selectors are the hazard: a site that styles `table`, `th`, `td`,
   `details` or `summary` for its own content — an FAQ accordion, a dark-headed price table — reaches straight
   into markup this file generated, and nothing in either file says so. Both of the bugs that prompted this
   stylesheet were that: `details { padding: 1rem 1.3rem }` made every multi-select 64px tall in a 30px row,
   and `th { color: var(--white) }` painted the filter labels white on white. So every property a rule like
   that is likely to set is stated here, at a specificity a bare element selector cannot reach. */
.tcg__table th, .tcg__table td {
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: inherit;
  color: var(--tcc-grid-fg, #1f2937);
  text-align: left;
  vertical-align: middle;
}

/* Cells never wrap and never grow the row. Excel's answer, and the right one for a dense view: a single long
   email address should cost one ellipsis, not double the height of every row on screen. `wrap: true` on a
   column opts out where the content really is a paragraph. */
.tcg__table td {
  padding: var(--tcc-grid-cell-py, 4px) var(--tcc-grid-cell-px, 8px);
  border-bottom: 1px solid var(--tcc-grid-line, #e5e7eb);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* For a table the script does NOT own — a short hand-written one that should look like the grid beside it
   rather than like a second design. It has no <colgroup>, so fixed layout would give every column an equal
   slice; it keeps the browser's own. Class it in the markup: the script only ever touches its own table. */
.tcg__table--auto { table-layout: auto; width: 100%; }
.tcg__table--auto td { white-space: normal; overflow: visible; text-overflow: clip; }

.tcg__table td.tcg__cell--wrap { white-space: normal; overflow: visible; text-overflow: clip; }
.tcg__table td.tcg__cell--num { text-align: right; }
.tcg__table tbody tr:hover td { background: var(--tcc-grid-hover, #f3f4f6); }

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

.tcg__head th {
  position: relative;
  padding: var(--tcc-grid-cell-py, 4px) var(--tcc-grid-cell-px, 8px);
  font-size: var(--tcc-grid-head-font, .7rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tcc-grid-muted, #6b7280);
  background: var(--tcc-grid-head-bg, #f9fafb);
  border-bottom: 2px solid var(--tcc-grid-line, #e5e7eb);
  white-space: nowrap;
  overflow: hidden;
}
.tcg__head th[data-sort] { cursor: pointer; user-select: none; }
.tcg__head th[data-sort]:hover .tcg__headlabel { color: var(--tcc-grid-accent, #1f7e76); }

.tcg__headlabel { display: inline-block; max-width: calc(100% - 14px); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* The marker is drawn on the sorted column only. One on every column is noise that stops saying which is
   active, which is the only thing it is there to say. */
.tcg__head th.is-sorted .tcg__headlabel { color: var(--tcc-grid-accent, #1f7e76); }
.tcg__head th.is-sorted .tcg__headlabel::after { content: ' \25B2'; font-size: .8em; }
.tcg__head th.is-sorted-desc .tcg__headlabel::after { content: ' \25BC'; }

/* Both header rows stick, but only when the site has bounded the grid's height - an unbounded .tcg is as tall
   as its content and there is nothing for them to stick to. The filter row's offset is the header row's own
   height, measured by the script, because the two rows have to stack rather than overlap. */
.tcg--sticky .tcg__head th { position: sticky; top: 0; z-index: 3; }
.tcg--sticky .tcg__filters th { position: sticky; top: var(--tcg-head-height, 28px); z-index: 2; }

/* ------------------------------------------------------------------ resizing */

/* Locked widths are only tolerable if they can be changed, so every column has a grab handle on its right
   edge: drag to set, double-click to fit the column to its content again. */
.tcg__resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 9px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}
.tcg__resizer::after {
  content: '';
  position: absolute;
  top: 22%;
  bottom: 22%;
  right: 4px;
  width: 1px;
  background: var(--tcc-grid-line, #e5e7eb);
}
.tcg__resizer:hover::after, .tcg.is-resizing .tcg__resizer.is-active::after {
  background: var(--tcc-grid-accent, #1f7e76);
  top: 4px;
  bottom: 4px;
  width: 2px;
}
.tcg.is-resizing { cursor: col-resize; user-select: none; }

/* ------------------------------------------------------------------ the filter row */

/* One control per cell, all of one height, all vertically centred. That is the whole of "the filters line up":
   the previous version left each control at its natural height inside a top-aligned cell, so a 30px text box
   and a 64px <details> started at the same y and finished 34px apart. */
.tcg__filters th {
  padding: var(--tcc-grid-filter-py, 3px) var(--tcc-grid-filter-px, 6px);
  vertical-align: middle;
  background: var(--tcc-grid-head-bg, #f9fafb);
  border-bottom: 1px solid var(--tcc-grid-line, #e5e7eb);
  overflow: visible;
}

.tcg__colfilter {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--tcg-control-height, 26px);
  padding: 0 6px;
  font: inherit;
  font-size: var(--tcc-grid-filter-font, .78rem);
  color: inherit;
  background: var(--tcc-grid-surface, #ffffff);
  border: 1px solid var(--tcc-grid-line, #e5e7eb);
  border-radius: var(--tcc-radius-s, 6px);
}
.tcg__colfilter::placeholder { color: var(--tcc-grid-muted, #6b7280); opacity: 1; }
.tcg__colfilter:focus { border-color: var(--tcc-grid-accent, #1f7e76); outline: none; }
.tcg__colfilter:not(:placeholder-shown) { border-color: var(--tcc-grid-accent, #1f7e76); }
/* Spinners and the search box's own clear cross both cost width a 90px column has not got. */
.tcg__colfilter::-webkit-outer-spin-button,
.tcg__colfilter::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tcg__colfilter[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.tcg__colfilter::-webkit-search-cancel-button { -webkit-appearance: none; }
.tcg__colfilter::-webkit-calendar-picker-indicator { padding: 0; margin: 0; }

.tcg__rangefilter { display: flex; gap: 4px; }
.tcg__rangefilter .tcg__colfilter { flex: 1 1 0; }

/* ------------------------------------------------------------------ the multi-select filter */

/* A <details> of checkboxes rather than <select multiple>, which cannot be worked without knowing to hold Ctrl
   and shows nothing of what is selected once it is closed.
 *
 * The reset is not decoration. `details`, `summary` and `details[open] summary` are the selectors a site writes
 * for its FAQ accordion, and they land on this control with no warning to either side - so every property such
 * a rule sets is neutralised here, at a specificity a bare element selector cannot reach. */
.tcg__selectfilter {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
}

.tcg__selectfilter-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  height: var(--tcg-control-height, 26px);
  padding: 0 6px;
  font: inherit;
  font-size: var(--tcc-grid-filter-font, .78rem);
  font-weight: 400;
  color: inherit;
  background: var(--tcc-grid-surface, #ffffff);
  border: 1px solid var(--tcc-grid-line, #e5e7eb);
  border-radius: var(--tcc-radius-s, 6px);
  cursor: pointer;
  list-style: none;
}
.tcg__selectfilter-btn::-webkit-details-marker { display: none; }
.tcg__selectfilter-btn::marker { content: ''; }
.tcg__selectfilter[open] > .tcg__selectfilter-btn,
.tcg__selectfilter.is-active > .tcg__selectfilter-btn { border-color: var(--tcc-grid-accent, #1f7e76); }
.tcg__selectfilter.is-active > .tcg__selectfilter-btn { color: var(--tcc-grid-accent, #1f7e76); }

.tcg__selectfilter-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcg__selectfilter-caret { flex: 0 0 auto; font-size: .85em; line-height: 1; opacity: .7; }

/* Positioned as `fixed` by the script when it opens, so the panel is not clipped by the grid's own scroll box -
   which is exactly what happened to the last few values of any list opened near the bottom edge. */
.tcg__selectfilter-panel {
  position: fixed;
  z-index: 40;
  max-height: 16rem;
  min-width: 11rem;
  overflow-y: auto;
  padding: 4px;
  font-size: var(--tcc-grid-filter-font, .78rem);
  background: var(--tcc-grid-surface, #ffffff);
  border: 1px solid var(--tcc-grid-line, #e5e7eb);
  border-radius: var(--tcc-radius-s, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
.tcg__selectfilter-option {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 6px;
  border-radius: var(--tcc-radius-s, 6px);
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}
.tcg__selectfilter-option:hover { background: var(--tcc-grid-hover, #f3f4f6); }
.tcg__selectfilter-option input { width: auto; height: auto; margin: 0; cursor: pointer; }
.tcg__selectfilter-clear {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 4px 6px;
  font: inherit;
  font-size: inherit;
  color: var(--tcc-grid-accent, #1f7e76);
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--tcc-grid-line, #e5e7eb);
  cursor: pointer;
}
.tcg__selectfilter-clear:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ the actions column */

/* The buttons at the end of a row must never wrap: wrapped, four of them became two lines and every row grew to
   match the tallest thing in it, so the page showed half as many rows for no gain. */
.tcg__table td.tcg__actions { overflow: visible; }
.tcg__rowactions { display: flex; flex-wrap: nowrap; gap: 4px; }
.tcg__rowactions > * { flex: 0 0 auto; white-space: nowrap; }