/* ============================================================
   Team.Core.Blazor.Components — base styles.
   Generic and unbranded. Every colour, font and shape is a CSS
   custom property the host app overrides (see each --tcc-* below).
   Defaults are neutral so components are usable without a theme.
   ============================================================ */

:root {
  --tcc-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --tcc-font-display: var(--tcc-font);
  --tcc-radius: 14px;
  --tcc-radius-s: 9px;
  --tcc-shadow: 0 18px 48px -22px rgba(0, 0, 0, .35);
  --tcc-shadow-s: 0 8px 22px -14px rgba(0, 0, 0, .3);

  /* Shared button shape/typography — defaults keep the original pill look; a host (e.g. EOM) overrides these to
     get a flatter, uppercase style without any component change. */
  --tcc-btn-radius: 999px;
  --tcc-btn-weight: 600;
  --tcc-btn-text-transform: none;
  --tcc-btn-letter-spacing: normal;
  --tcc-btn-hover-lift: -2px;

  --tcc-btn-primary-bg: #2563eb;
  --tcc-btn-primary-fg: #ffffff;
  --tcc-btn-primary-bg-hover: #1d4ed8;
  --tcc-btn-secondary-bg: #e5e7eb;
  --tcc-btn-secondary-fg: #111827;
  --tcc-btn-secondary-bg-hover: #d1d5db;
  --tcc-btn-ghost-fg: #1f2937;
  --tcc-btn-ghost-border: #d1d5db;
  --tcc-btn-ghost-fg-hover: #111827;
  --tcc-btn-danger-bg: #dc2626;
  --tcc-btn-danger-fg: #ffffff;
  --tcc-btn-danger-bg-hover: #b91c1c;
  --tcc-btn-success-bg: #16a34a;
  --tcc-btn-success-fg: #ffffff;
  --tcc-btn-success-bg-hover: #15803d;

  /* Icon (standalone + inside buttons) */
  --tcc-icon-size: 1.25em;

  /* IconButton — circular icon-only control */
  --tcc-iconbtn-fg: #4b5563;
  --tcc-iconbtn-hover-bg: rgba(0, 0, 0, .06);
  --tcc-iconbtn-primary-bg: var(--tcc-btn-primary-bg);
  --tcc-iconbtn-primary-fg: var(--tcc-btn-primary-fg);
  --tcc-iconbtn-success: #16a34a;
  --tcc-iconbtn-danger: var(--tcc-btn-danger-bg);

  /* SplitButton — outer end-cap radius + the divider between segments */
  --tcc-split-radius: 999px;
  --tcc-split-divider: rgba(255, 255, 255, .28);

  --tcc-card-bg: #ffffff;
  --tcc-card-border: #e5e7eb;

  --tcc-banner-info-bg: #eff6ff;
  --tcc-banner-info-border: #3b82f6;
  --tcc-banner-info-fg: #1e3a8a;
  --tcc-banner-success-bg: #ecfdf5;
  --tcc-banner-success-border: #10b981;
  --tcc-banner-success-fg: #065f46;
  --tcc-banner-warning-bg: #fffbeb;
  --tcc-banner-warning-border: #f59e0b;
  --tcc-banner-warning-fg: #92400e;
  --tcc-banner-urgent-bg: #fef2f2;
  --tcc-banner-urgent-border: #ef4444;
  --tcc-banner-urgent-fg: #991b1b;

  /* ExpansionPanels */
  --tcc-panel-bg: transparent;
  --tcc-panel-fg: inherit;
  --tcc-panel-line: var(--tcc-card-border);
  --tcc-panel-header-hover-bg: rgba(0, 0, 0, .04);

  /* Switch */
  --tcc-switch-track: #d1d5db;
  --tcc-switch-track-on: var(--tcc-btn-primary-bg);
  --tcc-switch-thumb: #ffffff;

  /* Charts */
  --tcc-chart-grid: #e5e7eb;
  --tcc-chart-fg: #6b7280;

  /* Radio */
  --tcc-radio-border: #9ca3af;
  --tcc-radio-checked: var(--tcc-btn-primary-bg);

  /* Checkbox */
  --tcc-checkbox-border: #9ca3af;
  --tcc-checkbox-bg: transparent;
  --tcc-checkbox-checked-bg: var(--tcc-btn-primary-bg);
  --tcc-checkbox-checked-fg: var(--tcc-btn-primary-fg);

  --tcc-stepper-accent: var(--tcc-btn-primary-bg);
  --tcc-stepper-done: #10b981;
  --tcc-stepper-todo: #9ca3af;
  --tcc-stepper-line: var(--tcc-card-border);

  --tcc-chip-bg: #f3f4f6;
  --tcc-chip-fg: #374151;

  /* Tooltip */
  --tcc-tooltip-z: 1500;
  --tcc-tooltip-bg: #374151;
  --tcc-tooltip-fg: #ffffff;

  /* Drawer / NavMenu */
  --tcc-drawer-z: 1100;
  --tcc-drawer-bg: #ffffff;
  --tcc-drawer-top: 0px;
  --tcc-drawer-mini-width: 3.5rem;
  --tcc-drawer-width: 15rem;

  /* Avatar (small circular badge) */
  --tcc-avatar-bg: var(--tcc-btn-primary-bg);
  --tcc-avatar-fg: var(--tcc-btn-primary-fg);
  --tcc-avatar-size: 1.5rem;
  --tcc-chip-accent-bg: #eef2ff;
  --tcc-chip-accent-fg: #3730a3;

  /* Selectable chips (ChipSet) — kept separate from the static-Chip tokens above so theming a set never restyles a
     badge. Unselected reuses the neutral chip look; selected uses the primary accent (mirrors Mud's Color.Secondary /
     SelectedColor.Primary). */
  --tcc-chipset-gap: 8px;
  --tcc-chipset-bg: var(--tcc-chip-bg);
  --tcc-chipset-fg: var(--tcc-chip-fg);
  --tcc-chipset-hover-bg: #e5e7eb;
  --tcc-chipset-selected-bg: var(--tcc-btn-primary-bg);
  --tcc-chipset-selected-fg: var(--tcc-btn-primary-fg);

  /* Tab strip (Tabs/Tab) — underline-style tabs; the active tab carries the accent underline + foreground. */
  --tcc-tabs-gap: 0;
  --tcc-tab-fg: #6b7280;
  --tcc-tab-fg-hover: #374151;
  --tcc-tab-fg-active: #111827;
  --tcc-tab-accent: var(--tcc-btn-primary-bg);
  --tcc-tab-padding: 10px 16px;
  --tcc-tab-font-size: .875rem;

  --tcc-grid-fg: #1f2937;
  --tcc-grid-muted: #6b7280;
  --tcc-grid-line: #e5e7eb;
  --tcc-grid-surface: #ffffff;
  --tcc-grid-head-bg: #f9fafb;
  --tcc-grid-stripe: #fafafa;
  --tcc-grid-hover: #f3f4f6;
  --tcc-grid-selected: #eef2ff;
  --tcc-grid-accent: var(--tcc-btn-primary-bg);
  --tcc-grid-totals-bg: #f9fafb;

  --tcc-fileinput-btn-bg: transparent;
  --tcc-fileinput-btn-fg: var(--tcc-btn-ghost-fg);
  --tcc-fileinput-btn-border: var(--tcc-btn-ghost-border);
  --tcc-fileinput-btn-bg-hover: var(--tcc-chip-bg);
  --tcc-fileinput-btn-fg-hover: var(--tcc-btn-ghost-fg-hover);
  --tcc-fileinput-name-fg: var(--tcc-grid-muted);

  /* Text-field chrome (AutoComplete; future TextField/Select share these). */
  --tcc-field-bg: #f3f4f6;
  --tcc-field-bg-hover: #ebedf0;
  --tcc-field-fg: #1f2937;
  --tcc-field-label: #6b7280;
  --tcc-field-placeholder: #9ca3af;
  --tcc-field-line: #9ca3af;
  --tcc-field-accent: var(--tcc-btn-primary-bg);
  --tcc-field-error: #dc2626;
  --tcc-field-help: #6b7280;
  --tcc-field-radius: var(--tcc-radius-s);
  --tcc-field-disabled-bg: #f3f4f6;
  /* AutoComplete results popover. */
  --tcc-ac-surface: #ffffff;
  --tcc-ac-fg: #1f2937;
  --tcc-ac-hover: #f3f4f6;
  --tcc-ac-border: #e5e7eb;

  /* Popover panel (defaults shared with the AutoComplete list so dropdowns look like one family). */
  --tcc-popover-surface: var(--tcc-ac-surface);
  --tcc-popover-fg: var(--tcc-ac-fg);
  --tcc-popover-border: var(--tcc-ac-border);
}

/* ----------------------------- DataGrid ----------------------------- */
.tcc-grid { font-family: var(--tcc-font); color: var(--tcc-grid-fg); display: flex; flex-direction: column; gap: 10px; }
.tcc-grid__toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 12px; }
.tcc-grid__search {
  flex: 1 1 260px; min-width: 200px; max-width: 420px;
  padding: 8px 12px; border: 1px solid var(--tcc-grid-line); border-radius: 999px;
  font: inherit; background: var(--tcc-grid-surface); color: inherit;
}
.tcc-grid__search:focus-visible { outline: 2px solid var(--tcc-grid-accent); outline-offset: 1px; }
.tcc-grid__count { font-size: .85rem; color: var(--tcc-grid-muted); font-weight: 600; }
.tcc-grid__count-of { font-weight: 400; }
.tcc-grid__selcount { font-size: .85rem; color: var(--tcc-grid-accent); font-weight: 600; }
.tcc-grid__linkbtn { background: none; border: none; padding: 0; font: inherit; font-size: .85rem; color: var(--tcc-grid-accent); cursor: pointer; text-decoration: underline; }
.tcc-grid__linkbtn:disabled { color: var(--tcc-grid-muted); cursor: default; text-decoration: none; }

/* Full-screen toggle (and other icon buttons) in the toolbar. */
.tcc-grid__iconbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .5rem; background: var(--tcc-grid-surface); border: 1px solid var(--tcc-grid-line); border-radius: var(--tcc-radius-s); color: var(--tcc-grid-fg); font-size: 1rem; line-height: 1; cursor: pointer; }
.tcc-grid__iconbtn:hover { border-color: var(--tcc-grid-accent); color: var(--tcc-grid-accent); }
.tcc-grid__iconbtn:focus-visible { outline: 2px solid var(--tcc-grid-accent); outline-offset: 2px; }
.tcc-grid__fsbtn { margin-left: auto; } /* pushed to the right of the toolbar; in full screen this is the top-right X */

/* Full-screen overlay: the grid fills the viewport over the rest of the page. The toolbar pins to the top (with the
   close X at its right), the scroll box flexes to fill the rest, and the floating horizontal bar sits at the foot. */
/* width/height !important: an inline width on the grid (e.g. width:max-content for a compact embedded grid) would
   otherwise win over inset:0 and leave the overlay hugging the left edge instead of filling the viewport. */
.tcc-grid--fullscreen { position: fixed; inset: 0; z-index: 2000; margin: 0; padding: 12px 16px; background: var(--tcc-grid-surface); overflow: hidden; width: auto !important; height: auto !important; min-width: 0 !important; max-width: none !important; }
/* While a grid is full screen, lock the page behind it so the document's own scrollbar doesn't show through the
   overlay (it would scroll nothing and just look broken). Toggled by the grid's JS. */
html.tcc-grid-fs-lock, html.tcc-grid-fs-lock body { overflow: hidden !important; }
/* Full screen is where everything scrolls — a single, native scrollbar per axis, pinned to the screen edges. */
.tcc-grid--fullscreen .tcc-grid__scrollwrap { flex: 1 1 auto; min-height: 0; }
.tcc-grid--fullscreen .tcc-grid__scroll { overflow: auto; max-height: none; flex: 1 1 auto; min-height: 0; }

/* Non-scrolling frame around the scroll box. It exists solely so the right-edge fade (below) can be anchored to a
   box that does NOT scroll — anchoring the fade to the scroll box itself made it ride up out of view once the rows
   were scrolled, so the fade never reached the bottom of a tall, scrolled table. */
.tcc-grid__scrollwrap { position: relative; display: flex; flex-direction: column; min-height: 0; }

/* Normal mode scrolls vertically only — rows scroll, but columns that overflow horizontally are clipped (the right-
   edge fade + pulsing expand button below nudge the user to open full screen, where everything scrolls). A stable
   scrollbar gutter keeps column widths from shifting as the vertical scrollbar appears/disappears. Override the cap
   per grid with --tcc-grid-max-height (or the MaxHeight parameter). */
.tcc-grid__scroll { position: relative; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; max-height: var(--tcc-grid-max-height, calc(100dvh - 13rem)); border: 1px solid var(--tcc-grid-line); border-radius: var(--tcc-radius-s); }
/* Header freeze is on by default (the sticky rules below); a developer opts a grid out with StickyHeader="false". */
.tcc-grid--loose-head .tcc-grid__head th { position: static; }

/* Fade the right edge when columns are clipped (normal mode) so it's obvious more columns continue past it. Anchored
   to the non-scrolling wrap (not the scroll box) so it spans the full visible height even when the rows are scrolled. */
.tcc-grid:not(.tcc-grid--fullscreen).is-clipped-x .tcc-grid__scrollwrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; pointer-events: none; z-index: 3;
  background: linear-gradient(to right, transparent, var(--tcc-grid-surface));
}

/* Polite-but-noticeable call-to-action: pulse the full-screen button while columns are clipped in normal mode (the
   only way to reach them is to expand). An expanding accent ring, a brief surface tint and a small swell. */
.tcc-grid:not(.tcc-grid--fullscreen).is-clipped-x .tcc-grid__fsbtn {
  animation: tcc-fs-pulse 2s ease-in-out infinite;
  border-color: var(--tcc-grid-accent); color: var(--tcc-grid-accent);
}
@keyframes tcc-fs-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tcc-grid-accent) 75%, transparent);
    background: var(--tcc-grid-surface);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--tcc-grid-accent) 0%, transparent);
    background: color-mix(in srgb, var(--tcc-grid-accent) 16%, var(--tcc-grid-surface));
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tcc-grid__fsbtn { animation: none !important; }
}
/* border-collapse: separate — collapsed borders + sticky headers leave stale border fragments in Chromium when the
   table's content changes (ghost vertical lines at old cell edges). Separate borders belong to the cells, repaint
   with them and stick with the sticky header. Row dividers therefore live on the cells, not the rows (a tr border
   doesn't paint under separate). */
.tcc-grid__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; background: var(--tcc-grid-surface); }
.tcc-grid__table th, .tcc-grid__table td { padding: 8px 12px; white-space: nowrap; text-align: left; }

.tcc-grid__head th {
  position: sticky; top: 0; z-index: 2;
  background: var(--tcc-grid-head-bg); color: var(--tcc-grid-muted);
  font-family: var(--tcc-font-display); font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--tcc-grid-line); user-select: none;
}
.tcc-grid__th--sortable { cursor: pointer; }
.tcc-grid__th--sortable:hover { color: var(--tcc-grid-fg); }
/* Always reserve the indicator's slot on sortable columns (even unsorted) so a header — and thus its column —
   doesn't change width when the ▲/▼ appears on sort. */
.tcc-grid__sort { display: inline-block; min-width: .9em; margin-left: 6px; color: var(--tcc-grid-accent); font-size: .7rem; text-align: center; }

/* Grouped two-row header: a label (e.g. "Invested") spanning a value column and its Δ companion. A subtle tint and
   vertical dividers (see gstart/gend below) make the wide group and its sub-columns read as one block. */
.tcc-grid__group { text-align: center; color: var(--tcc-grid-fg); background: var(--tcc-grid-group-bg, var(--tcc-grid-totals-bg)); border-bottom: 1px solid var(--tcc-grid-line); }
.tcc-grid__head--sub th { top: 1.95rem; } /* sit just below the sticky group row rather than overlapping it */

/* Vertical dividers at the edges of a grouped run — drawn through the header, filter and body so the sub-columns
   visibly belong to the wide group header above them. A touch heavier than the row lines so the blocks stand out. */
.tcc-grid__col--gstart { border-left: 2px solid var(--tcc-grid-group-divider, var(--tcc-grid-line)); }
.tcc-grid__col--gend { border-right: 2px solid var(--tcc-grid-group-divider, var(--tcc-grid-line)); }
/* With separate borders, back-to-back groups would stack a gend + gstart into a double-width divider — keep one. */
.tcc-grid__col--gend + .tcc-grid__col--gstart { border-left: 0; }

/* Period-over-period delta cell: a ▲/▼ arrow + magnitude, coloured by impact on total wealth. */
.tcc-grid__delta { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.tcc-grid__delta--up { color: var(--tcc-grid-up, #15803d); }
.tcc-grid__delta--down { color: var(--tcc-grid-down, #c0392b); }
.tcc-grid__delta--flat { color: var(--tcc-grid-muted); font-weight: 400; }

.tcc-grid__filters th { background: var(--tcc-grid-head-bg); border-bottom: 1px solid var(--tcc-grid-line); padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.tcc-grid__colfilter { width: 100%; min-width: 70px; padding: 4px 8px; border: 1px solid var(--tcc-grid-line); border-radius: var(--tcc-radius-s); font: inherit; font-size: .82rem; background: var(--tcc-grid-surface); color: inherit; }
/* No native number spinners / search clear — we render our own clear button (below). The date picker's calendar
   icon is tinted so it reads on a dark surface. */
.tcc-grid__colfilter::-webkit-outer-spin-button,
.tcc-grid__colfilter::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tcc-grid__colfilter[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.tcc-grid__colfilter::-webkit-search-cancel-button { -webkit-appearance: none; }
.tcc-grid__colfilter::-webkit-calendar-picker-indicator { cursor: pointer; filter: invert(.7); }
/* Per-column clear button: our gold accent, pointer cursor. Shown only while the filter has a value. */
.tcc-grid__colfilter-wrap { display: flex; align-items: center; gap: 4px; }
.tcc-grid__colfilter-wrap .tcc-grid__colfilter { flex: 1 1 auto; min-width: 0; }
.tcc-grid__colfilter-clear { flex: 0 0 auto; background: none; border: none; padding: 0 2px; line-height: 1; font-size: .9rem; color: var(--tcc-grid-accent); cursor: pointer; }
.tcc-grid__colfilter-clear:hover { opacity: .75; }
/* From–to range filter for numeric / money / date columns (exact text matching is meaningless there). Inputs are at
   least wide enough for a typical value and wrap onto a second row when the column (sized by its data) is too narrow to
   hold both side by side — so the filter never forces a slim column wide. */
.tcc-grid__rangefilter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* Each bound (min / max) is its own field: the input plus its own clear button sitting right beside it (rather than a
   single clear for the whole range tucked away at the end — which read as unrelated, especially for stacked dates). */
.tcc-grid__rangefilter-field { display: flex; align-items: center; gap: 4px; flex: 1 1 4.5rem; min-width: 0; }
.tcc-grid__rangefilter-field .tcc-grid__colfilter { flex: 1 1 auto; min-width: 0; }
.tcc-grid__colfilter--range { min-width: 4.5rem; }
/* Date pickers need room for a full dd/mm/yyyy and never fit two across — give each bound its own full-width row so
   the chosen date (and its clear button) is always legible. */
.tcc-grid__rangefilter-field--date { flex: 1 1 100%; }
.tcc-grid__colfilter--range[type="date"] { min-width: 8.5rem; }

.tcc-grid__table tbody td { border-bottom: 1px solid var(--tcc-grid-line); }
/* When a totals row follows (it draws its own heavier top border), drop the last body row's divider so the two
   don't stack into a thicker line than under collapsed borders. */
.tcc-grid__table tbody:has(+ tfoot) tr:last-child td { border-bottom: 0; }
.tcc-grid__table tbody tr:nth-child(even) { background: var(--tcc-grid-stripe); }
.tcc-grid__table tbody tr:hover { background: var(--tcc-grid-hover); }
.tcc-grid__row--selected, .tcc-grid__row--selected:nth-child(even) { background: var(--tcc-grid-selected); }

.tcc-grid__cell--start { text-align: left; }
.tcc-grid__cell--end { text-align: right; font-variant-numeric: tabular-nums; }
.tcc-grid__cell--center { text-align: center; }
.tcc-grid__cell--ellipsis { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }

/* Frozen (sticky-left) columns — only ever applied in full screen, by the grid's JS, which also sets each cell's
   `left`. The body cells are otherwise transparent (the stripe lives on the row), so they need an opaque background
   or the scrolling columns show through; header / filter / totals cells already carry their own opaque fill. The
   last frozen column draws a soft divider so the pinned block reads as one unit. */
.tcc-grid__table .is-frozen { position: sticky; z-index: 3; }
.tcc-grid__table tbody tr .is-frozen { background: var(--tcc-grid-surface); }
.tcc-grid__table tbody tr:nth-child(even) .is-frozen { background: var(--tcc-grid-stripe); }
.tcc-grid__table tbody tr:hover .is-frozen { background: var(--tcc-grid-hover); }
.tcc-grid__row--selected .is-frozen, .tcc-grid__row--selected:nth-child(even) .is-frozen { background: var(--tcc-grid-selected); }
.tcc-grid__head th.is-frozen, .tcc-grid__filters th.is-frozen, .tcc-grid__totals td.is-frozen { z-index: 5; }
.tcc-grid__table .is-frozen-last { box-shadow: 2px 0 4px -2px rgb(0 0 0 / 28%); }

/* Freeze-columns control in the toolbar (full screen only). */
.tcc-grid__freeze { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--tcc-grid-muted); white-space: nowrap; }
.tcc-grid__freeze-ico { color: var(--tcc-grid-accent); }
.tcc-grid__freeze-select { padding: 2px 4px; border: 1px solid var(--tcc-grid-line); border-radius: var(--tcc-radius-s); font: inherit; font-size: .82rem; background: var(--tcc-grid-surface); color: var(--tcc-grid-fg); }

.tcc-grid__cue-col { width: 1.6rem; text-align: center; padding-left: 6px; padding-right: 6px; }
.tcc-grid__cue { color: var(--tcc-grid-accent); font-size: .6rem; cursor: help; vertical-align: middle; }
.tcc-grid__sel-col { width: 2.2rem; text-align: center; }
/* Checkboxes: same look as the Checkbox component — shared --tcc-checkbox-* tokens and geometry, so the grid's
   selection boxes match the app's themed checkboxes. */
.tcc-grid input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 18px; height: 18px; border: 2px solid var(--tcc-checkbox-border); border-radius: 3px;
  background: var(--tcc-checkbox-bg); cursor: pointer; position: relative; vertical-align: middle; flex: 0 0 auto;
  transition: background .12s ease, border-color .12s ease;
}
.tcc-grid input[type="checkbox"]:hover { border-color: var(--tcc-checkbox-checked-bg); }
.tcc-grid input[type="checkbox"]:checked { background: var(--tcc-checkbox-checked-bg); border-color: var(--tcc-checkbox-checked-bg); }
.tcc-grid input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 0; width: 4px; height: 8px;
  border: solid var(--tcc-checkbox-checked-fg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tcc-grid input[type="checkbox"]:focus-visible { outline: 2px solid var(--tcc-checkbox-checked-bg); outline-offset: 1px; }

.tcc-grid__empty { text-align: center; color: var(--tcc-grid-muted); padding: 24px; }

.tcc-grid__totals td { background: var(--tcc-grid-totals-bg); border-top: 2px solid var(--tcc-grid-line); font-weight: 600; position: sticky; bottom: 0; }
.tcc-grid__stat-label { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tcc-grid-muted); font-weight: 700; }
.tcc-grid__stat-value { font-variant-numeric: tabular-nums; }

.tcc-grid__selected-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--tcc-grid-accent); border-radius: var(--tcc-radius-s); background: var(--tcc-grid-selected); }
.tcc-grid__selected-stats-title { font-family: var(--tcc-font-display); font-weight: 700; color: var(--tcc-grid-accent); margin-right: 6px; }
.tcc-grid__selected-stat { font-size: .86rem; }
.tcc-grid__selected-stat .tcc-grid__stat-label { display: inline; font-size: .64rem; }

.tcc-grid__pager { display: flex; align-items: center; gap: 12px; justify-content: center; }
.tcc-grid__pageinfo { font-size: .85rem; color: var(--tcc-grid-muted); }

/* ----------------------------- Button ----------------------------- */
.tcc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--tcc-font-display);
  font-weight: var(--tcc-btn-weight);
  font-size: 1rem;
  line-height: 1.2;
  padding: 12px 24px;
  border-radius: var(--tcc-btn-radius);
  border: 1.6px solid transparent;
  text-transform: var(--tcc-btn-text-transform);
  letter-spacing: var(--tcc-btn-letter-spacing);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.tcc-btn:hover:not(:disabled) { transform: translateY(var(--tcc-btn-hover-lift)); }
.tcc-btn:disabled { opacity: .55; cursor: not-allowed; }
.tcc-btn:focus-visible { outline: 3px solid var(--tcc-btn-primary-bg); outline-offset: 2px; }

/* Sizes (Medium is the base above). */
.tcc-btn--sm { padding: 5px 7px; font-size: .7rem; }
.tcc-btn--md { padding: 7px 14px; font-size: .85rem; }
.tcc-btn--lg { padding: 15px 30px; font-size: 1.1rem; }

/* Full-width utility (no parameter — add the class when a button should fill its row). */
.tcc-btn--block { width: 100%; }

.tcc-btn--primary { background: var(--tcc-btn-primary-bg); color: var(--tcc-btn-primary-fg); box-shadow: var(--tcc-shadow-s); }
.tcc-btn--primary:hover:not(:disabled) { background: var(--tcc-btn-primary-bg-hover); box-shadow: var(--tcc-shadow); }
.tcc-btn--secondary { background: var(--tcc-btn-secondary-bg); color: var(--tcc-btn-secondary-fg); box-shadow: var(--tcc-shadow-s); }
.tcc-btn--secondary:hover:not(:disabled) { background: var(--tcc-btn-secondary-bg-hover); box-shadow: var(--tcc-shadow); }
.tcc-btn--ghost { background: transparent; color: var(--tcc-btn-ghost-fg); border-color: var(--tcc-btn-ghost-border); }
.tcc-btn--ghost:hover:not(:disabled) { color: var(--tcc-btn-ghost-fg-hover); }
.tcc-btn--danger { background: var(--tcc-btn-danger-bg); color: var(--tcc-btn-danger-fg); box-shadow: var(--tcc-shadow-s); }
.tcc-btn--danger:hover:not(:disabled) { background: var(--tcc-btn-danger-bg-hover); box-shadow: var(--tcc-shadow); }
.tcc-btn--success { background: var(--tcc-btn-success-bg); color: var(--tcc-btn-success-fg); box-shadow: var(--tcc-shadow-s); }
.tcc-btn--success:hover:not(:disabled) { background: var(--tcc-btn-success-bg-hover); box-shadow: var(--tcc-shadow); }
/* Text: flat, transparent, no border — coloured text only, with a faint hover wash. */
.tcc-btn--text { background: transparent; color: var(--tcc-btn-ghost-fg); border-color: transparent; box-shadow: none; }
.tcc-btn--text:hover:not(:disabled) { background: var(--tcc-iconbtn-hover-bg); color: var(--tcc-btn-ghost-fg-hover); }

/* Busy: a subtle shimmer sweep shown while an action triggered by the button is running (host sets the class). */
.tcc-btn--busy { position: relative; pointer-events: none; overflow: hidden; }
.tcc-btn--busy::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: tcc-btn-shimmer 1.2s linear infinite;
}
@keyframes tcc-btn-shimmer { to { background-position-x: -200%; } }

/* Icon inside a button: a centred slot next to the label (whole icon+label group stays centred). */
.tcc-btn__icon { display: inline-flex; align-items: center; }
.tcc-btn__label { display: inline-flex; align-items: center; }
.tcc-icon { width: var(--tcc-icon-size); height: var(--tcc-icon-size); fill: currentColor; display: inline-block; flex: none; vertical-align: middle; }
/* Fixed sizes for standalone icons (Icon Size=...) — match the common Material scale so an icon reads the same
   wherever it appears. Inherit (no class) keeps the contextual var sizing above. */
.tcc-icon--sm { width: 1.25rem; height: 1.25rem; }
.tcc-icon--md { width: 1.5rem; height: 1.5rem; }
.tcc-icon--lg { width: 2.25rem; height: 2.25rem; }
/* Tones (Icon Tone=...) — colour via the host's --tcc-icon-* tokens; currentColor when the host defines none. */
.tcc-icon--primary { color: var(--tcc-icon-primary, currentColor); }
.tcc-icon--secondary { color: var(--tcc-icon-secondary, currentColor); }
.tcc-icon--tertiary { color: var(--tcc-icon-tertiary, currentColor); }
.tcc-icon--success { color: var(--tcc-icon-success, currentColor); }
.tcc-icon--warning { color: var(--tcc-icon-warning, currentColor); }
.tcc-icon--danger { color: var(--tcc-icon-danger, currentColor); }

/* ----------------------------- IconButton ----------------------------- */
.tcc-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tcc-iconbtn-fg);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease, filter .15s ease;
}
.tcc-icon-btn:hover:not(:disabled) { background: var(--tcc-iconbtn-hover-bg); }
.tcc-icon-btn:disabled { opacity: .55; cursor: not-allowed; }
.tcc-icon-btn:focus-visible { outline: 3px solid var(--tcc-btn-primary-bg); outline-offset: 2px; }
.tcc-icon-btn .tcc-icon { width: 1.4rem; height: 1.4rem; }
.tcc-icon-btn--sm { width: 1.5rem; height: 1.5rem; }
.tcc-icon-btn--sm .tcc-icon { width: 1rem; height: 1rem; }
.tcc-icon-btn--md { width: 2rem; height: 2rem; }
.tcc-icon-btn--md .tcc-icon { width: 1.15rem; height: 1.15rem; }
.tcc-icon-btn--lg { width: 3rem; height: 3rem; }
.tcc-icon-btn--lg .tcc-icon { width: 1.7rem; height: 1.7rem; }

/* Plain tones colour the glyph. */
.tcc-icon-btn--primary { color: var(--tcc-iconbtn-primary-bg); }
.tcc-icon-btn--success { color: var(--tcc-iconbtn-success); }
.tcc-icon-btn--danger  { color: var(--tcc-iconbtn-danger); }

/* Filled tones fill the circle. */
.tcc-icon-btn--filled { background: var(--tcc-iconbtn-hover-bg); }
.tcc-icon-btn--filled.tcc-icon-btn--primary { background: var(--tcc-iconbtn-primary-bg); color: var(--tcc-iconbtn-primary-fg); }
.tcc-icon-btn--filled.tcc-icon-btn--success { background: var(--tcc-iconbtn-success); color: #fff; }
.tcc-icon-btn--filled.tcc-icon-btn--danger  { background: var(--tcc-iconbtn-danger); color: #fff; }
.tcc-icon-btn--filled:hover:not(:disabled) { filter: brightness(1.08); background: var(--tcc-iconbtn-primary-bg); }
.tcc-icon-btn--filled.tcc-icon-btn--success:hover:not(:disabled) { background: var(--tcc-iconbtn-success); }
.tcc-icon-btn--filled.tcc-icon-btn--danger:hover:not(:disabled)  { background: var(--tcc-iconbtn-danger); }

/* Disabled buttons drop their tone and go grey — faded colour alone doesn't read as disabled, especially on dark
   themes. Placed after the tone rules so it wins their tie on specificity. */
.tcc-icon-btn:disabled { color: var(--tcc-iconbtn-disabled-fg, #9ca3af); }
.tcc-icon-btn--filled:disabled { background: var(--tcc-iconbtn-disabled-bg, rgba(127, 127, 127, .25)); color: var(--tcc-iconbtn-disabled-fg, #9ca3af); }

/* ----------------------------- SplitButton ----------------------------- */
.tcc-split { display: inline-flex; }
.tcc-split__seg { border-radius: 0; box-shadow: none; }
.tcc-split__seg:hover:not(:disabled) { transform: none; box-shadow: none; }
.tcc-split__seg:first-child { border-top-left-radius: var(--tcc-split-radius); border-bottom-left-radius: var(--tcc-split-radius); }
.tcc-split__seg:last-child { border-top-right-radius: var(--tcc-split-radius); border-bottom-right-radius: var(--tcc-split-radius); }
.tcc-split__seg:not(:first-child) { border-left: 1px solid var(--tcc-split-divider); }

/* ----------------------------- Card ----------------------------- */
.tcc-card {
  background: var(--tcc-card-bg);
  border: 1px solid var(--tcc-card-border);
  border-radius: var(--tcc-radius);
  box-shadow: var(--tcc-shadow-s);
  padding: 28px;
}

/* ----------------------------- Banner ----------------------------- */
.tcc-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-left: 4px solid var(--tcc-banner-info-border);
  background: var(--tcc-banner-info-bg);
  color: var(--tcc-banner-info-fg);
  border-radius: 0 var(--tcc-radius-s) var(--tcc-radius-s) 0;
  padding: 16px 20px;
  font-family: var(--tcc-font);
}
.tcc-banner__icon { display: inline-flex; margin-top: 1px; }
.tcc-banner__icon .tcc-icon { width: 1.4rem; height: 1.4rem; }
.tcc-banner__title { font-family: var(--tcc-font-display); font-weight: 700; margin-bottom: 2px; }
.tcc-banner__body { line-height: 1.5; }
.tcc-banner__body :last-child { margin-bottom: 0; }

.tcc-banner--success { background: var(--tcc-banner-success-bg); border-left-color: var(--tcc-banner-success-border); color: var(--tcc-banner-success-fg); }
.tcc-banner--warning { background: var(--tcc-banner-warning-bg); border-left-color: var(--tcc-banner-warning-border); color: var(--tcc-banner-warning-fg); }
.tcc-banner--urgent  { background: var(--tcc-banner-urgent-bg);  border-left-color: var(--tcc-banner-urgent-border);  color: var(--tcc-banner-urgent-fg); }

/* ----------------------------- Stepper ----------------------------- */
.tcc-stepper {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
}
.tcc-stepper__step {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  font-family: var(--tcc-font-display);
  font-size: .9rem;
  color: var(--tcc-stepper-todo);
}
.tcc-stepper__step:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--tcc-stepper-line);
  margin-left: 4px;
}
.tcc-stepper__marker {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .85rem;
  border: 2px solid currentColor;
}
.tcc-stepper__step--active { color: var(--tcc-stepper-accent); }
.tcc-stepper__step--active .tcc-stepper__marker { background: var(--tcc-stepper-accent); color: #fff; border-color: var(--tcc-stepper-accent); }
.tcc-stepper__step--done { color: var(--tcc-stepper-done); }
.tcc-stepper__step--done .tcc-stepper__marker { background: var(--tcc-stepper-done); color: #fff; border-color: var(--tcc-stepper-done); }
.tcc-stepper__step--done::after { background: var(--tcc-stepper-done); }
@media (max-width: 640px) {
  .tcc-stepper__label { display: none; }
}

/* ----------------------------- Chip ----------------------------- */
.tcc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em; /* ≈ the chip's own height, so a one-letter chip reads as a circle rather than a sliver */
  box-sizing: border-box;
  font-family: var(--tcc-font-display);
  font-size: 1rem;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--tcc-chip-bg);
  color: var(--tcc-chip-fg);
}
.tcc-chip--accent { background: var(--tcc-chip-accent-bg); color: var(--tcc-chip-accent-fg); }

/* Removable-tag × inside a static chip (only rendered when OnClose is wired). */
.tcc-chip__close {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  font-size: 1em;
  line-height: 1;
  opacity: .6;
}
.tcc-chip__close:hover { opacity: 1; }

/* ----------------------------- Avatar ----------------------------- */
.tcc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tcc-avatar-size);
  height: var(--tcc-avatar-size);
  border-radius: 50%;
  background: var(--tcc-avatar-bg);
  color: var(--tcc-avatar-fg);
  font-size: .75rem;
  font-weight: 600;
  overflow: hidden;
  flex: none;
}
.tcc-avatar .tcc-icon { width: 1.1rem; height: 1.1rem; }

/* --------------------------- ChipSet --------------------------- */
/* align-items: a flex child's default is stretch, which balloons chips to the height of whatever shares the row
   (e.g. a checkbox in a grid row) — chips keep their natural height instead. */
.tcc-chipset { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tcc-chipset-gap); }

/* A selectable chip is a <button> wearing the chip shape. It overrides the static chip's neutral fill with its own
   token so a host can theme selection without touching the badge chip. */
.tcc-chip--selectable {
  border: none;
  cursor: pointer;
  line-height: 1.2;
  flex: none; /* never squash inside a flex ChipSet — a squeezed chip overlaps its neighbours' text */
  background: var(--tcc-chipset-bg);
  color: var(--tcc-chipset-fg);
  transition: background .12s ease, color .12s ease;
}
.tcc-chip--selectable:hover:not(:disabled):not(.tcc-chip--selected) { background: var(--tcc-chipset-hover-bg); }
.tcc-chip--selectable:focus-visible { outline: 2px solid var(--tcc-chipset-selected-bg); outline-offset: 2px; }
.tcc-chip--selectable:disabled { opacity: .5; cursor: not-allowed; }
.tcc-chip--selected { background: var(--tcc-chipset-selected-bg); color: var(--tcc-chipset-selected-fg); }

.tcc-chipset--sm .tcc-chip--selectable { padding: 4px 10px; font-size: .78rem; }

/* Validation: when the set is in error (Required not met / EditForm message), ring every chip so the group reads as invalid. */
.tcc-chipset--error .tcc-chip--selectable { box-shadow: 0 0 0 1px var(--tcc-field-error); }

/* Read-only: keep the selected/unselected look but drop the interactive affordances. */
.tcc-chipset--readonly .tcc-chip--selectable { cursor: default; }
.tcc-chipset--readonly .tcc-chip--selectable:hover:not(.tcc-chip--selected) { background: var(--tcc-chipset-bg); }

/* ----------------------------- Tabs ----------------------------- */
/* Underline-style tab strip. Each tab is a flat <button>; the active one carries the accent underline and the
   strongest foreground. Overflows horizontally rather than wrapping — tabs must stay one row to read as tabs. */
.tcc-tabs {
  display: flex;
  gap: var(--tcc-tabs-gap);
  align-items: stretch;
  overflow-x: auto;
}
.tcc-tab {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tcc-font-display);
  font-size: var(--tcc-tab-font-size);
  font-weight: 600;
  text-transform: var(--tcc-tab-text-transform, none);
  letter-spacing: var(--tcc-tab-letter-spacing, normal);
  white-space: nowrap;
  color: var(--tcc-tab-fg);
  padding: var(--tcc-tab-padding);
  border-bottom: 2px solid transparent;
  transition: color .12s ease, border-bottom-color .12s ease;
}
.tcc-tab:hover:not(:disabled):not(.tcc-tab--active) { color: var(--tcc-tab-fg-hover); }
.tcc-tab:focus-visible { outline: 2px solid var(--tcc-tab-accent); outline-offset: -2px; }
.tcc-tab:disabled { opacity: .5; cursor: not-allowed; }
.tcc-tab--active { color: var(--tcc-tab-fg-active); border-bottom-color: var(--tcc-tab-accent); }

/* ----------------------------- Tooltip ------------------------------ */
/* CSS-only rich tooltip: panel hidden until the wrapper is hovered or focused. Shown with a short delay so quick
   mouse passes don't flash it. */
.tcc-tooltip { position: relative; display: inline-flex; }
.tcc-tooltip__panel {
  position: absolute;
  z-index: var(--tcc-tooltip-z, 1500);
  background: var(--tcc-tooltip-bg, #374151);
  color: var(--tcc-tooltip-fg, #ffffff);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: .8rem;
  line-height: 1.4;
  width: max-content;
  max-width: 24rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease;
}
.tcc-tooltip:hover > .tcc-tooltip__panel,
.tcc-tooltip:focus-within > .tcc-tooltip__panel { opacity: 1; visibility: visible; transition-delay: .25s; }
.tcc-tooltip--bottom > .tcc-tooltip__panel { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; }
.tcc-tooltip--top > .tcc-tooltip__panel { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; }
.tcc-tooltip--left > .tcc-tooltip__panel { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 6px; }
.tcc-tooltip--right > .tcc-tooltip__panel { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 6px; }

/* ----------------------------- Popover ----------------------------- */
/* Drops below a position:relative anchor wrapper supplied by the host (same approach as the AutoComplete list).
   No JS/portal: stacks over scrollable siblings via z-index; an overflow:hidden ancestor will clip it. */
.tcc-popover {
  position: absolute;
  top: calc(100% + 4px);
  z-index: 40;
  min-width: max-content;
  background: var(--tcc-popover-surface);
  color: var(--tcc-popover-fg);
  border: 1px solid var(--tcc-popover-border);
  border-radius: 8px;
  box-shadow: var(--tcc-shadow);
}
.tcc-popover--bottom-start { left: 0; }
.tcc-popover--bottom-center { left: 50%; transform: translateX(-50%); }
.tcc-popover--bottom-end { right: 0; }

/* ------------------------------- Menu -------------------------------- */
/* IconButton-triggered action menu: a transparent full-screen backdrop catches the outside click that closes it;
   the panel itself is a Popover. */
.tcc-menu { position: relative; display: inline-flex; }
.tcc-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 39; /* just below the .tcc-popover panel (z-index 40) */
  background: transparent;
  border: none;
  padding: 0;
  cursor: default;
}
.tcc-menu__panel { padding: 4px 0; }
.tcc-menuitem {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
}
.tcc-menuitem:hover:not(:disabled) { background: var(--tcc-menu-hover-bg, rgba(0, 0, 0, .06)); }
.tcc-menuitem:disabled { opacity: .5; cursor: default; }

/* ------------------------- Drawer / NavMenu ------------------------- */
/* Left drawer: a fixed "mini" rail — a slim icon strip when closed, expanding over the content when open.
   Top drawer: hidden when closed, sliding down over the content when open. The host pins either below its app bar
   with --tcc-drawer-top. */
.tcc-drawer {
  position: fixed;
  z-index: var(--tcc-drawer-z, 1100);
  background: var(--tcc-drawer-bg, #ffffff);
  box-shadow: var(--tcc-shadow-s);
  overflow-x: hidden;
  overflow-y: auto;
}
.tcc-drawer--anchor-left { top: var(--tcc-drawer-top, 0); bottom: 0; left: 0; width: var(--tcc-drawer-mini-width, 3.5rem); transition: width .15s ease; }
.tcc-drawer--anchor-left.tcc-drawer--open { width: var(--tcc-drawer-width, 15rem); }
.tcc-drawer--anchor-top { top: var(--tcc-drawer-top, 0); left: 0; right: 0; max-height: 80dvh; transform: translateY(-110%); transition: transform .15s ease; }
.tcc-drawer--anchor-top.tcc-drawer--open { transform: translateY(0); }
.tcc-drawer-backdrop { position: fixed; inset: 0; z-index: calc(var(--tcc-drawer-z, 1100) - 1); background: rgba(0, 0, 0, .4); }

.tcc-navmenu { display: flex; flex-direction: column; }
.tcc-navlink {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  color: var(--tcc-nav-fg, inherit);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 1px solid var(--tcc-nav-divider, rgba(127, 127, 127, .2));
}
.tcc-navlink:hover { background: var(--tcc-nav-hover-bg, rgba(127, 127, 127, .1)); }
.tcc-navlink__icon { flex: none; }
.tcc-navlink__text { overflow: hidden; text-overflow: ellipsis; }
/* The entry matching the current URI: accent text plus an inset edge bar so the rail shows it too. */
.tcc-navlink--active {
  color: var(--tcc-nav-active-fg, inherit);
  background: var(--tcc-nav-active-bg, rgba(127, 127, 127, .16));
  box-shadow: inset 3px 0 0 var(--tcc-nav-active-accent, currentColor);
}
.tcc-navlink--disabled { opacity: .45; cursor: default; }
/* A closed left drawer is an icon rail — the labels only exist while it is open. */
.tcc-drawer--anchor-left:not(.tcc-drawer--open) .tcc-navlink__text { display: none; }

/* ----------------------------- Carousel ----------------------------- */
.tcc-carousel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
}
.tcc-carousel__viewport { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.tcc-carousel__item { width: 100%; height: 100%; min-height: 0; }
.tcc-carousel__arrow { border: none; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.tcc-carousel__arrow .tcc-icon { width: var(--tcc-carousel-arrow-size, 4rem); height: var(--tcc-carousel-arrow-size, 4rem); }
.tcc-carousel__arrow:disabled { opacity: .3; cursor: default; }
.tcc-carousel__arrow:focus-visible { outline: 2px solid var(--tcc-btn-primary-bg); outline-offset: 2px; }
.tcc-carousel__bullets { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; padding: 10px 0; }
.tcc-carousel__bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--tcc-carousel-bullet, rgba(127, 127, 127, .5));
  cursor: pointer;
}
.tcc-carousel__bullet--selected { background: var(--tcc-carousel-bullet-selected, currentColor); }

/* ---------------------------- EllipsisText ----------------------------- */
/* Reusable single-line truncation: keep it on one line and show an ellipsis rather than wrapping or overflowing.
   Pair with a width-constrained container (table cell, flex/grid item) — that's what bounds the visible width. */
.tcc-ellipsis {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* ---------------------------- ConfirmDialog ---------------------------- */
.tcc-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .5);
}
.tcc-dialog {
  width: min(440px, 100%);
  background: var(--tcc-card-bg);
  color: var(--tcc-grid-fg, inherit);
  border: 1px solid var(--tcc-card-border);
  border-radius: var(--tcc-radius);
  box-shadow: var(--tcc-shadow);
  padding: 22px 24px;
}
.tcc-dialog--danger { border-top: 4px solid var(--tcc-btn-danger-bg); }
/* Service-hosted dialogs: the hosted component owns its width/padding; the surface only caps and scrolls. */
.tcc-dialog-backdrop--top { align-items: flex-start; }
.tcc-dialog--hosted { width: auto; max-width: calc(100vw - 48px); max-height: calc(100dvh - 48px); overflow: auto; padding: 0; }
.tcc-dialog__title { margin: 0 0 10px; font-family: var(--tcc-font-display); font-size: 1.15rem; }
.tcc-dialog__body { font-family: var(--tcc-font); font-size: .92rem; line-height: 1.5; }
.tcc-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ------------------------- Collapsible -------------------------- */
.tcc-collapsible { border-radius: var(--tcc-radius-s); }
.tcc-collapsible__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 6px 0;
  font-family: var(--tcc-font-display);
  font-weight: 600;
  color: var(--tcc-grid-fg, #1f2937);
  user-select: none;
}
.tcc-collapsible__summary::-webkit-details-marker { display: none; }
.tcc-collapsible__summary:hover { color: var(--tcc-btn-primary-bg); }
.tcc-collapsible__summary:focus-visible { outline: 2px solid var(--tcc-btn-primary-bg); outline-offset: 3px; border-radius: 4px; }
.tcc-collapsible__chevron {
  width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.tcc-collapsible[open] > .tcc-collapsible__summary .tcc-collapsible__chevron { transform: rotate(90deg); }
.tcc-collapsible__title { flex: 1 1 auto; }
.tcc-collapsible__aside { font-weight: 500; font-size: .85rem; color: var(--tcc-grid-muted, #6b7280); }
.tcc-collapsible__body { padding: 4px 0 8px; }

/* -------------------------- ExpansionPanels -------------------------- */
.tcc-panels { display: flex; flex-direction: column; }
.tcc-panel {
  background: var(--tcc-panel-bg);
  color: var(--tcc-panel-fg);
  border-bottom: 1px solid var(--tcc-panel-line);
}
.tcc-panel:last-child { border-bottom: none; }
.tcc-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  font-family: var(--tcc-font-display);
  list-style: none; /* hide the native details marker — the chevron is the affordance */
}
.tcc-panel__header::-webkit-details-marker { display: none; }
.tcc-panel__header:hover { background: var(--tcc-panel-header-hover-bg); }
.tcc-panel__title { flex: 1 1 auto; min-width: 0; }
.tcc-panel__chevron { flex: none; transition: transform .25s ease; }
.tcc-panel[open] > .tcc-panel__header .tcc-panel__chevron { transform: rotate(180deg); }
.tcc-panel__body { padding: 0 12px 10px 12px; }
/* Smooth expand/collapse: modern browsers animate ::details-content; older ones snap (graceful, content stays usable). */
.tcc-panel { interpolate-size: allow-keywords; }
.tcc-panel::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .25s ease, content-visibility .25s allow-discrete;
}
.tcc-panel[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .tcc-panel::details-content { transition: none; } }

/* ------------------------------ Switch ------------------------------- */
.tcc-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--tcc-font);
  user-select: none;
}
.tcc-switch--disabled { cursor: default; opacity: .5; }
/* Visually hide the native checkbox while keeping it operable (keyboard + screen readers). */
.tcc-switch__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tcc-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--tcc-switch-track);
  transition: background .15s ease;
}
.tcc-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tcc-switch-thumb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: left .15s ease;
}
/* General sibling (~), not adjacent (+): with LabelBefore the label span sits between the checkbox and the track. */
.tcc-switch__native:checked ~ .tcc-switch__track { background: var(--tcc-switch-track-on); }
.tcc-switch__native:checked ~ .tcc-switch__track .tcc-switch__thumb { left: 18px; }
.tcc-switch__native:focus-visible ~ .tcc-switch__track { outline: 2px solid var(--tcc-switch-track-on); outline-offset: 2px; }
.tcc-switch__label { line-height: 1.2; }

/* ------------------------------ Radio -------------------------------- */
.tcc-radiogroup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tcc-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--tcc-font);
  user-select: none;
}
.tcc-radio--below { flex-direction: column; gap: 4px; }
.tcc-radio--disabled { cursor: default; opacity: .5; }
/* Visually hide the native input while keeping it operable (keyboard + screen readers). */
.tcc-radio__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tcc-radio__dot {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--tcc-radio-border);
  border-radius: 50%;
  transition: border-color .12s ease;
}
.tcc-radio__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--tcc-radio-checked);
  opacity: 0;
  transition: opacity .12s ease;
}
/* General sibling (~), not adjacent (+) — keeps working if a label ever sits between input and dot. */
.tcc-radio__native:checked ~ .tcc-radio__dot { border-color: var(--tcc-radio-checked); }
.tcc-radio__native:checked ~ .tcc-radio__dot::after { opacity: 1; }
.tcc-radio__native:focus-visible ~ .tcc-radio__dot { outline: 2px solid var(--tcc-radio-checked); outline-offset: 2px; }
.tcc-radio__label { line-height: 1.2; }

/* ----------------------------- Checkbox ------------------------------ */
.tcc-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--tcc-font);
  user-select: none;
}
.tcc-checkbox--disabled { cursor: default; opacity: .5; }
/* Read-only: normal look, no interaction affordance. */
.tcc-checkbox--readonly { cursor: default; }
/* Visually hide the native input while keeping it operable (keyboard + screen readers). */
.tcc-checkbox__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tcc-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--tcc-checkbox-border);
  border-radius: 3px;
  background: var(--tcc-checkbox-bg);
  transition: background .12s ease, border-color .12s ease;
}
.tcc-checkbox__check { width: 100%; height: 100%; fill: var(--tcc-checkbox-checked-fg); opacity: 0; transition: opacity .12s ease; }
/* General sibling (~), not adjacent (+): with LabelBefore the label span sits between the input and the box. */
.tcc-checkbox__native:checked ~ .tcc-checkbox__box { background: var(--tcc-checkbox-checked-bg); border-color: var(--tcc-checkbox-checked-bg); }
.tcc-checkbox__native:checked ~ .tcc-checkbox__box .tcc-checkbox__check { opacity: 1; }
.tcc-checkbox__native:focus-visible ~ .tcc-checkbox__box { outline: 2px solid var(--tcc-checkbox-checked-bg); outline-offset: 2px; }
.tcc-checkbox--sm .tcc-checkbox__box { width: 14px; height: 14px; }
.tcc-checkbox--lg .tcc-checkbox__box { width: 22px; height: 22px; }
.tcc-checkbox__label { line-height: 1.2; }

/* ------------------------------ Charts ------------------------------- */
/* Pure-SVG donut + grouped bar chart. Colours come from the data (per segment/series); chrome via tokens. */
.tcc-donut { position: relative; display: inline-grid; place-items: center; }
.tcc-donut > svg { width: 100%; height: 100%; grid-area: 1 / 1; }
.tcc-donut__center { grid-area: 1 / 1; text-align: center; }
.tcc-barchart { display: inline-flex; flex-direction: column; gap: 8px; font-family: var(--tcc-font); }
.tcc-barchart__legend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.tcc-barchart__legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.tcc-barchart__swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ----------------------------- ColorField ---------------------------- */
/* Labelled native colour input wearing the shared field chrome. */
.tcc-colorfield { display: inline-flex; flex-direction: column; gap: 4px; font-family: var(--tcc-font); cursor: pointer; }
.tcc-colorfield--disabled { cursor: default; opacity: .5; }
.tcc-colorfield__label { font-size: .78rem; color: var(--tcc-field-label); }
.tcc-colorfield__input {
  width: 3.5rem;
  height: 2.2rem;
  padding: 2px;
  border: 1px solid var(--tcc-field-line);
  border-radius: var(--tcc-radius-s, 6px);
  background: var(--tcc-field-bg);
  cursor: inherit;
}

/* ----------------------------- FileInput ----------------------------- */
.tcc-fileinput {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--tcc-font);
}
/* Visually hide the native input while keeping it operable (label-for + screen readers). */
.tcc-fileinput__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tcc-fileinput__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tcc-font-display);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.2;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.6px solid var(--tcc-fileinput-btn-border);
  background: var(--tcc-fileinput-btn-bg);
  color: var(--tcc-fileinput-btn-fg);
  transition: background .15s ease, color .15s ease, transform .15s ease;
  flex: 0 0 auto;
}
.tcc-fileinput:hover .tcc-fileinput__button {
  background: var(--tcc-fileinput-btn-bg-hover);
  color: var(--tcc-fileinput-btn-fg-hover);
  transform: translateY(-1px);
}
.tcc-fileinput__native:focus-visible + .tcc-fileinput__button {
  outline: 3px solid var(--tcc-btn-primary-bg);
  outline-offset: 2px;
}
.tcc-fileinput__name { font-size: .9rem; color: var(--tcc-grid-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcc-fileinput__name--empty { color: var(--tcc-fileinput-name-fg); font-style: italic; }

/* ----------------------------- Field chrome + AutoComplete ----------------------------- */
.tcc-field { position: relative; display: inline-flex; flex-direction: column; gap: 4px; font-family: var(--tcc-font); color: var(--tcc-field-fg); min-width: 12rem; width: 100%; }
.tcc-field__label { font-size: .78rem; font-family: var(--tcc-font-display); color: var(--tcc-field-label); }
.tcc-field__req { color: var(--tcc-field-error); margin-left: 2px; }
.tcc-field__control { position: relative; display: flex; align-items: center; }

.tcc-field__input {
  width: 100%; font: inherit; font-size: .92rem; color: var(--tcc-field-fg);
  background: var(--tcc-field-bg); border: 1px solid transparent; border-bottom: 1px solid var(--tcc-field-line);
  border-radius: var(--tcc-field-radius) var(--tcc-field-radius) 0 0;
  padding: 9px 46px 9px 12px; outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.tcc-field__input::placeholder { color: var(--tcc-field-placeholder); }
textarea.tcc-field__input { resize: none; }
.tcc-field__input:hover:not(:disabled):not(:read-only) { background: var(--tcc-field-bg-hover); }
.tcc-field__input:focus { border-bottom-color: var(--tcc-field-accent); border-bottom-width: 2px; padding-bottom: 8px; }
.tcc-field__input:disabled { opacity: .6; cursor: not-allowed; background: var(--tcc-field-disabled-bg); }

/* Outlined: border on all sides, no fill. */
.tcc-field--outlined .tcc-field__input { background: transparent; border: 1px solid var(--tcc-field-line); border-radius: var(--tcc-field-radius); }
.tcc-field--outlined .tcc-field__input:focus { border-color: var(--tcc-field-accent); border-width: 2px; padding: 8px 45px 8px 11px; }

.tcc-field--dense .tcc-field__input { padding-top: 6px; padding-bottom: 6px; font-size: .85rem; }

/* Native select: same chrome, normal right padding (the picker arrow replaces the adorn/clear gutter). */
.tcc-field__input--select { padding-right: 12px; cursor: pointer; }
.tcc-field__input--select option { background: var(--tcc-field-bg); color: var(--tcc-field-fg); }

.tcc-field--error .tcc-field__label { color: var(--tcc-field-error); }
.tcc-field--error .tcc-field__input { border-bottom-color: var(--tcc-field-error); }
.tcc-field--outlined.tcc-field--error .tcc-field__input { border-color: var(--tcc-field-error); }

.tcc-field__error { font-size: .72rem; color: var(--tcc-field-error); }
.tcc-field__help { font-size: .72rem; color: var(--tcc-field-help); }
/* SearchField's focus-only helper floats below the control so a flex-row host doesn't grow and re-centre while the
   field is focused — the row's other components would visibly jump otherwise. */
.tcc-field__help--float { position: absolute; top: calc(100% + 2px); left: 0; white-space: nowrap; z-index: 30; }

/* Decorative icon inside the control (TextField AdornmentIcon). */
/* Format-overlaid date inputs: the native text hides behind a span showing the custom-formatted value
   (native date inputs cannot custom-format); the calendar picker indicator stays visible and clickable. */
.tcc-field__input--overlaid { color: transparent; }
.tcc-field__input--overlaid::-webkit-datetime-edit { opacity: 0; }
.tcc-field__overlay { position: absolute; left: 12px; pointer-events: none; font-size: .92rem; color: var(--tcc-field-fg); }
.tcc-field__overlay--placeholder { color: var(--tcc-field-placeholder); }

.tcc-field__adorn { position: absolute; width: 1.1rem; height: 1.1rem; color: var(--tcc-field-label); pointer-events: none; }
.tcc-field__adorn--start { left: 10px; }
.tcc-field__adorn--end { right: 10px; }
.tcc-field__control:has(.tcc-field__adorn--start) > .tcc-field__input { padding-left: 34px; }

/* NumericField HideSpinButtons. */
.tcc-field__input--nospin { -moz-appearance: textfield; appearance: textfield; }
.tcc-field__input--nospin::-webkit-outer-spin-button,
.tcc-field__input--nospin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Native date/time picker chrome follows the host's scheme (dark hosts set --tcc-field-scheme: dark). */
.tcc-field__input { color-scheme: var(--tcc-field-scheme, light); }
/* Date fields open the picker on a click anywhere (teamcore-datefield.js) and reject typing — signal it as a button. */
.tcc-field__input[type="date"]:not(:disabled):not(:read-only) { cursor: pointer; }
.tcc-field__input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

.tcc-field--disabled { opacity: .7; }

/* Right-edge affordances: caret (always), clear or spinner (left of it). */
.tcc-field__caret { position: absolute; right: 12px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--tcc-field-label); pointer-events: none; }

/* MultiSelect: read-only summary input + checkmark rows in the shared dropdown list. */
.tcc-multiselect__input { cursor: pointer; text-overflow: ellipsis; }
.tcc-multiselect__item { display: flex; align-items: center; gap: 8px; }
.tcc-multiselect__box { width: 14px; height: 14px; box-sizing: border-box; flex: none; position: relative; border: 1px solid var(--tcc-field-line); border-radius: 3px; }
.tcc-multiselect__item.is-selected .tcc-multiselect__box { background: var(--tcc-field-accent); border-color: var(--tcc-field-accent); }
/* The tick centres itself inside the box whatever the inherited font/rem scale. */
.tcc-multiselect__item.is-selected .tcc-multiselect__box::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(45deg); }
.tcc-field__clear { position: absolute; right: 28px; background: none; border: none; cursor: pointer; color: var(--tcc-field-label); font-size: 1.15rem; line-height: 1; padding: 0 4px; }
.tcc-field__clear:hover { color: var(--tcc-field-fg); }
.tcc-field__icon { position: absolute; right: 10px; display: inline-flex; color: var(--tcc-field-label); pointer-events: none; }
.tcc-field__spinner { position: absolute; right: 30px; width: 14px; height: 14px; border: 2px solid var(--tcc-ac-border); border-top-color: var(--tcc-field-accent); border-radius: 50%; animation: tcc-ac-spin .7s linear infinite; }
@keyframes tcc-ac-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tcc-field__spinner { animation: none; } }

.tcc-autocomplete__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30;
  margin: 0; padding: 4px 0; list-style: none; max-height: 16rem; overflow-y: auto;
  background: var(--tcc-ac-surface); color: var(--tcc-ac-fg);
  border: 1px solid var(--tcc-ac-border); border-radius: var(--tcc-radius-s); box-shadow: var(--tcc-shadow);
}
.tcc-autocomplete__list--top { top: auto; bottom: calc(100% + 2px); }
.tcc-autocomplete__item { padding: 7px 12px; cursor: pointer; font-size: .9rem; }
.tcc-autocomplete__item.is-highlighted { background: var(--tcc-ac-hover); }
.tcc-autocomplete__item--custom { font-style: italic; }
.tcc-autocomplete__adorn { padding: 5px 12px; font-size: .8rem; color: var(--tcc-field-label); }
.tcc-autocomplete__empty { font-style: italic; }

/* ----------------- Showcase (ShowcaseComponents dev gallery) — layout only, not a shipped component ----------------- */
.tcc-showcase { font-family: var(--tcc-font); color: var(--tcc-grid-fg); max-width: 1100px; display: flex; flex-direction: column; gap: 10px; }
.tcc-showcase__h1 { font-family: var(--tcc-font-display); font-size: 1.2rem; margin: 0 0 8px; }
.tcc-showcase__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tcc-showcase__stack { display: flex; flex-direction: column; gap: 12px; }
.tcc-showcase__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.tcc-showcase__label { font-size: .78rem; color: var(--tcc-grid-muted); margin-bottom: 8px; }
.tcc-showcase__label code, .tcc-showcase__readout code { font-family: ui-monospace, monospace; font-size: .9em; }
.tcc-showcase__readout { font-size: .82rem; color: var(--tcc-grid-muted); margin: 8px 0 0; }