/* ============================================================
   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;

  /* 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;

  --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;
  --tcc-chip-accent-bg: #eef2ff;
  --tcc-chip-accent-fg: #3730a3;

  --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);
}

/* ----------------------------- 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; }
.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. */
.tcc-grid--fullscreen { position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 12px 16px; background: var(--tcc-grid-surface); overflow: hidden; }
/* 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__scroll { overflow: auto; max-height: none; flex: 1 1 auto; min-height: 0; }

/* Spreadsheet-style scrolling: the grid is capped to the viewport so it never grows past the screen, which keeps the
   horizontal scrollbar reachable (at the container's bottom edge, in view) instead of stranded below a tall table.
   Both axes scroll inside this box; the sticky header/footer (below) stay put as you scroll. Override the cap per grid
   with --tcc-grid-max-height (or the MaxHeight parameter). */
/* Normal mode: the grid is clipped to fit (no inner scrollbars), so it never double-scrolls against the page —
   anything that doesn't fit is revealed in full screen. The edge fades + pulsing full-screen button (below) signal
   that there's more. Full screen overrides this to scroll natively. */
.tcc-grid__scroll { position: relative; overflow: hidden; 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 clipped edge (normal mode only) so it's obvious content continues past it. */
.tcc-grid:not(.tcc-grid--fullscreen).is-clipped-x .tcc-grid__scroll::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));
}
.tcc-grid:not(.tcc-grid--fullscreen).is-clipped-y .tcc-grid__scroll::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; pointer-events: none; z-index: 3;
  background: linear-gradient(to bottom, transparent, var(--tcc-grid-surface));
}

/* Polite-but-noticeable call-to-action: pulse the full-screen button while content is clipped in normal mode.
   An expanding accent ring, a brief surface tint and a small swell make it easy to catch without being shouty. */
.tcc-grid:not(.tcc-grid--fullscreen).is-clipped-x .tcc-grid__fsbtn,
.tcc-grid:not(.tcc-grid--fullscreen).is-clipped-y .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; }
}
.tcc-grid__table { width: 100%; border-collapse: collapse; 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); }
.tcc-grid__sort { margin-left: 6px; color: var(--tcc-grid-accent); font-size: .7rem; }

/* 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)); }

/* 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: 0; padding-bottom: 6px; vertical-align: top; }
.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; }
/* 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; }
.tcc-grid__colfilter--range { min-width: 4.5rem; flex: 1 1 4.5rem; }
/* Date pickers need room for a full dd/mm/yyyy and never fit two across — stack them on their own rows so the
   chosen date is always legible. */
.tcc-grid__colfilter--range[type="date"] { min-width: 8.5rem; flex: 1 1 100%; }

.tcc-grid__table tbody tr { border-bottom: 1px solid var(--tcc-grid-line); }
.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; }

.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: 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); }
/* 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; }

/* ----------------------------- 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: .5; 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: 2rem; height: 2rem; }
.tcc-icon-btn--sm .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); }

/* ----------------------------- 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 { font-size: 1.4rem; line-height: 1.4; }
.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-block;
  font-family: var(--tcc-font-display);
  font-size: .74rem;
  font-weight: 600;
  padding: 3px 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); }

/* ---------------------------- 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); }
.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; }

/* ----------------------------- 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; }