/* ============================================================
   LocalTeams WebAdmin chrome — custom classes only.
   Loads AFTER the three Radzen override sheets. Never declares
   --rz-* values; safe to extend without touching the cascade.
   ============================================================ */

/* --- App frame ------------------------------------------------------ */
.lt-app { position: relative; display: flex; flex-direction: column; height: 100vh; width: 100%; overflow: hidden; }
.lt-main { flex: 1; overflow-y: auto; padding: 28px 32px 60px; }
.lt-page { max-width: 1200px; margin: 0 auto; }

/* --- "You've got offers" banner (parent workspace) ------------------ */
.lt-offers-banner {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; box-sizing: border-box; padding: 9px 20px;
  border: none; cursor: pointer;
  background: oklch(56% 0.14 152); color: #fff;
  font-family: 'Public Sans', sans-serif; font-size: 13px; font-weight: 700;
}
.lt-offers-banner:hover { background: oklch(50% 0.14 152); }
.lt-offers-banner .lt-offers-cta { text-decoration: underline; }

/* While the confetti fires, the bar comes alive: a rapid rainbow swipe + a pulsing glow. */
.lt-offers-banner.celebrating {
  background-image: linear-gradient(90deg,
    oklch(60% 0.16 152), oklch(62% 0.16 200), oklch(58% 0.19 264),
    oklch(60% 0.19 320), oklch(66% 0.18 30), oklch(74% 0.16 90), oklch(60% 0.16 152));
  background-size: 300% 100%;
  animation: ltBannerSwipe 0.8s linear infinite, ltBannerPulse 0.45s ease-in-out infinite alternate;
}
@keyframes ltBannerSwipe {
  from { background-position: 0% 50%; }
  to   { background-position: -300% 50%; }
}
@keyframes ltBannerPulse {
  from { filter: brightness(1);    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
  to   { filter: brightness(1.22); box-shadow: 0 0 22px rgba(150, 255, 190, 0.55); }
}

/* Confetti burst when a parent opens their offers (celebratory flourish). */
@keyframes ltConfetti {
  0%   { transform: translate(-50%, 0) rotate(0deg) scale(0.5); opacity: 0; }
  10%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), var(--ty)) rotate(var(--rot)) scale(1); opacity: 0; }
}
.lt-confetti-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2000; }
.lt-confetti-piece {
  position: absolute; border-radius: 2px;
  animation-name: ltConfetti; animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
  animation-fill-mode: forwards;
}

/* --- Header (dark navy brand chrome) -------------------------------- */
.lt-header {
  height: 64px; flex: 0 0 64px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  background: oklch(30% 0.09 246);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.lt-logo { display: flex; align-items: baseline; gap: 9px; }
.lt-logo svg { align-self: center; }
.lt-logo-word {
  font-family: 'Big Shoulders Display', var(--lt-font-display);
  font-weight: 800; font-size: 23px; letter-spacing: 0.02em; color: #fff;
}
.lt-logo-word .lt-logo-teams { color: oklch(60% 0.2 25); }
.lt-logo-tld {
  font-family: 'Big Shoulders Display', var(--lt-font-display);
  font-weight: 700; font-size: 12px; color: oklch(75% 0.13 152);
}
.lt-header-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.22); }
.lt-header-org {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: rgba(255,255,255,0.14); border-radius: 8px;
  font-size: 13px; font-weight: 600; color: oklch(92% 0.01 235);
}
.lt-header-org i { color: var(--lt-trust); }
.lt-header-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lt-trust-pill {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--lt-trust);
  background: var(--lt-trust-tint); padding: 5px 10px; border-radius: 999px;
}
.lt-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--lt-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--lt-font-display); font-weight: 700; font-size: 13px;
}

/* --- Sidebar -------------------------------------------------------- */
/* Content of the nav RadzenSidebar. Fixed width = the panel clips (not reflows) while the
   sidebar's collapse animation runs; the RadzenSidebar itself owns the animated width. */
.lt-sidebar {
  width: 236px; min-height: 100%; box-sizing: border-box;
  background: var(--lt-surface);
  border-right: 1px solid var(--lt-line);
  padding: 18px 12px;
  display: flex; flex-direction: column; gap: 22px;
}
.lt-nav-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--lt-ink-5);
  padding: 0 10px 8px;
}
.lt-sidebar-note {
  margin-top: auto; padding: 12px;
  background: var(--lt-accent-tint); border-radius: 10px;
  font-size: 12px; color: var(--lt-accent-ink); line-height: 1.5;
}
/* Bottom-anchored nav group (Settings) — takes the slot the org sidebar note used to fill. */
.lt-sidebar-foot {
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--lt-line-faint);
}

/* --- Drill (team) nav header ---------------------------------------- */
.drill-nav-title { padding: 8px 10px 14px; }
.drill-nav-title .drill-nav-eyebrow {
  font-size: 11px; font-weight: 700; color: var(--lt-ink-5);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.drill-nav-title .drill-nav-team {
  display: flex; align-items: center; gap: 6px; margin-top: 2px; flex-wrap: wrap;
  font-family: var(--lt-font-display); font-weight: 800; font-size: 15px;
}

/* --- Page headers ---------------------------------------------------- */
.lt-page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: 22px;
}
.lt-page-header h1 { font-size: 26px; font-weight: 800; margin: 0; }
.lt-page-header .lt-page-sub { margin: 4px 0 0; color: var(--lt-ink-4); font-size: 14px; }
.lt-page-header .lt-page-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lt-title-row { display: flex; align-items: center; gap: 10px; }

/* Dashboard header: org logo tile beside the page header (owner gets an edit icon at its corner). */
.lt-dash-head { display: flex; align-items: flex-start; gap: 38px; }
.lt-dash-head > .lt-page-header { flex: 1; min-width: 0; }
.lt-dash-logo {
  position: relative; flex: 0 0 auto; width: 72px; height: 72px; margin-bottom: 22px;
  border-radius: 12px; background: #fff; border: 1px solid var(--lt-line-soft);
  display: grid; place-items: center;
}
.lt-dash-logo > img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.lt-dash-logo > .fa-image { font-size: 22px; color: var(--lt-ink-5); }
.lt-dash-logo > .lt-icon-upload { position: absolute; left: calc(100% + 4px); bottom: 0; }

/* A bare edit icon that opens a RadzenUpload: the upload sits invisibly over the icon (its file input
   fills the choose button), so clicks land on Radzen's own input. */
.lt-icon-upload {
  position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px;
  font-size: 17px; color: var(--lt-ink-4); cursor: pointer;
}
.lt-icon-upload:hover { color: var(--lt-accent); }
.lt-icon-upload .rz-fileupload { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.lt-icon-upload .rz-fileupload-buttonbar,
.lt-icon-upload .rz-fileupload-choose { position: absolute; inset: 0; padding: 0; min-height: 0; cursor: pointer; }
.lt-icon-upload input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }

/* --- Filters row ----------------------------------------------------- */
.lt-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.lt-field-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--lt-ink-5); margin-bottom: 6px;
}
.lt-filter-row .lt-field-label { margin-bottom: 0; }

/* --- Cards / stat tiles ---------------------------------------------- */
.lt-stat-label { font-size: 12px; font-weight: 600; color: var(--lt-ink-4); text-transform: uppercase; letter-spacing: 0.04em; }
.lt-stat-value { font-family: var(--lt-font-display); font-size: 28px; font-weight: 800; margin-top: 6px; }
.lt-stat-sub { font-size: 12.5px; color: var(--lt-ink-5); margin-top: 2px; }
.lt-card-title { font-family: var(--lt-font-display); font-size: 15px; margin: 0 0 14px; }
.lt-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.lt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* --- Custom table rows (design's list-tables) ------------------------ */
.lt-table-card { padding: 0 !important; overflow: hidden; }
.lt-table-head {
  display: grid; gap: 12px; padding: 12px 20px;
  background: var(--lt-surface-sunken);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--lt-ink-4);
}
.lt-table-row {
  display: grid; gap: 12px; align-items: center;
  padding: 13px 20px; border-top: 1px solid var(--lt-line-faint);
}
.lt-table-row.clickable { cursor: pointer; }
.lt-table-row.clickable:hover { background: oklch(94% 0.015 246); }

/* Schedule Date cell — calendar chip (coloured month strip + day) with the weekday beneath it.
   The strip greys out for past events; upcoming events get the accent-orange strip. */
.lt-sched-cal { width: 40px; }
.lt-sched-cal .tile {
  border-radius: 7px; overflow: hidden;
  border: 1px solid var(--lt-line); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  text-align: center; background: #fff;
}
.lt-sched-cal .m {
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: oklch(75% 0.15 60); padding: 2px 0 1px;
}
.lt-sched-cal.is-past .m { background: oklch(70% 0.012 240); }
/* A cancelled game or practice stays on the schedule: its text is struck through and a red stamp names it. */
.lt-table-row.is-cancelled > div:not(.lt-sched-cal) span:not(.lt-cancelled-stamp),
.lt-table-row.is-cancelled > div > div:not(.lt-sched-cal) { text-decoration: line-through; color: var(--lt-ink-5); }
.lt-sched-row.is-cancelled .lt-sched-time,
.lt-sched-row.is-cancelled .lt-sched-title,
.lt-sched-row.is-cancelled .lt-sched-meta { text-decoration: line-through; color: var(--lt-ink-5); }
.lt-public-sched-row.is-cancelled .lt-strike-when-cancelled { text-decoration: line-through; color: var(--lt-ink-5); }
.lt-sched-cal.is-cancelled .m { background: oklch(70% 0.012 240); }
.lt-cancelled-stamp { display: inline-block; padding: 1px 8px; border: 1.5px solid var(--rz-danger, #c62828); border-radius: 4px;
    color: var(--rz-danger, #c62828); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.lt-sched-cal .d {
  font-family: var(--lt-font-display); font-size: 16px; font-weight: 800;
  line-height: 1.35; color: var(--lt-ink-1);
}
.lt-sched-cal .dow {
  text-align: center; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: oklch(58% 0.016 240); margin-top: 3px;
}

/* --- Small identity marks -------------------------------------------- */
.lt-team-icon {
  width: 36px; height: 36px; border-radius: 8px; flex: 0 0 36px;
  background: var(--lt-accent-tint); color: var(--lt-accent);
  display: flex; align-items: center; justify-content: center;
}
.lt-initials {
  border-radius: 50%; flex-shrink: 0;
  background: var(--lt-accent-tint); color: var(--lt-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--lt-font-display); font-weight: 800;
}
.lt-initials-sm { width: 32px; height: 32px; font-size: 12px; }
.lt-initials-md { width: 38px; height: 38px; font-size: 13px; }
.lt-initials-lg { width: 44px; height: 44px; font-size: 14px; }
.lt-initials-xl { width: 72px; height: 72px; font-size: 24px; }

/* --- Warning / helper lines ------------------------------------------ */
.lt-warn-line { font-size: 11.5px; color: var(--lt-warn); font-weight: 600; }
.lt-muted { color: var(--lt-ink-5); }
.lt-hint { font-size: 11.5px; color: var(--lt-ink-5); margin-top: 5px; }

/* --- Toggle chips (multi-select chip groups) ------------------------- */
.lt-chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
.lt-chip-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lt-surface-sunken); color: var(--lt-ink-4);
  border: 1px solid transparent; border-radius: 999px;
  padding: 5px 11px; font-size: 12px; font-weight: 700; line-height: 1.2;
  cursor: pointer; user-select: none;
}
.lt-chip-toggle:hover { background: var(--lt-line-faint); }
.lt-chip-toggle.selected { background: var(--lt-trust); color: #fff; }
.lt-chip-static {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lt-accent-tint); color: var(--lt-accent-ink);
  border-radius: 999px; padding: 3px 8px; font-size: 11.5px; font-weight: 700;
}
.lt-chip-neutral {
  display: inline-flex; align-items: center;
  background: var(--lt-surface-sunken); color: var(--lt-ink-4);
  border-radius: 999px; padding: 3px 8px; font-size: 11.5px; font-weight: 700;
}
.lt-chip-trust {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lt-trust-tint); color: var(--lt-trust-ink);
  border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 700;
}
.lt-chip-tournament {
  display: inline-flex; align-items: center; gap: 5px;
  background: oklch(94% 0.05 300); color: oklch(45% 0.14 300);
  border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700;
}

/* --- Lineup RSVP chip (clickable for staff: Going → Can't go → No reply) --- */
.lt-rsvp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--lt-surface-sunken); color: var(--lt-ink-4);
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--lt-font-display); font-weight: 700; font-size: 11.5px; line-height: 1.2;
  padding: 3px 9px; white-space: nowrap;
}
.lt-rsvp-chip.going { background: var(--lt-trust-tint); color: var(--lt-trust-ink); }
.lt-rsvp-chip.out { background: var(--lt-danger-tint); color: var(--lt-danger); }
button.lt-rsvp-chip { cursor: pointer; }
button.lt-rsvp-chip:hover:not(:disabled) { border-color: currentColor; }
button.lt-rsvp-chip:disabled { cursor: default; opacity: 0.55; }

/* --- Browser preview frame ------------------------------------------- */
.lt-browser-frame {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--lt-line); box-shadow: var(--lt-shadow-card);
}
.lt-browser-bar {
  background: var(--lt-surface-sunken); padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--lt-line);
}
.lt-browser-dots { display: flex; gap: 6px; }
.lt-browser-dot { width: 10px; height: 10px; border-radius: 50%; }
.lt-browser-url {
  flex: 1; background: #fff; border-radius: 6px; padding: 6px 12px;
  font-size: 12.5px; color: var(--lt-ink-4);
  font-family: var(--lt-font-mono); border: 1px solid var(--lt-line-soft);
}
/* Height tracks the viewport (page chrome above the frame is ~220px + bottom gutter) so tall
   monitors get a tall preview and short windows still fit — with a sane floor. The body is the
   ONE scroll container; the preview iframe inside is auto-sized to its content (preview-frame.js). */
.lt-browser-body { background: #fff; max-height: max(360px, calc(100vh - 250px)); overflow-y: auto; }
.lt-public-section { padding: 24px 28px; border-bottom: 1px solid var(--lt-line-faint); }
.lt-public-section:last-child { border-bottom: none; }
.lt-public-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--lt-ink-5); text-transform: uppercase; margin-bottom: 14px;
}
.lt-cover {
  height: 180px; position: relative; display: flex; align-items: flex-end;
  background: repeating-linear-gradient(45deg, oklch(95% 0.008 235), oklch(95% 0.008 235) 10px, oklch(97% 0.006 235) 10px, oklch(97% 0.006 235) 20px);
}
.lt-cover-placeholder-tag {
  position: absolute; top: 14px; left: 20px;
  font-family: var(--lt-font-mono); font-size: 11px; color: var(--lt-ink-5);
}
.lt-cover-scrim {
  width: 100%; padding: 20px 28px;
  background: linear-gradient(to top, rgba(20,20,25,0.55), rgba(20,20,25,0));
}
.lt-cover-title { font-family: var(--lt-font-display); font-weight: 800; font-size: 26px; color: #fff; }
.lt-cover-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: oklch(58% 0.15 152 / 0.9); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  margin-bottom: 6px;
}

/* --- Drawer internals (inside Radzen side dialogs) -------------------- */
.lt-drawer { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lt-drawer-head { padding: 18px 24px; border-bottom: 1px solid var(--lt-line-faint); }
.lt-drawer-body { flex: 1; overflow-y: auto; padding: 18px 24px; min-height: 0; }
.lt-drawer-foot {
  padding: 14px 24px; border-top: 1px solid var(--lt-line-faint);
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
}
.lt-form-row { margin-bottom: 14px; }
.lt-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.lt-form-grid-3 { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: 10px; margin-bottom: 14px; }
.lt-fill { width: 100%; }

/* Small ghost icon button that sits inline with grid content (e.g. resend invite). */
.lt-inline-icon-btn {
  border: none; background: transparent; cursor: pointer; padding: 3px;
  line-height: 1; border-radius: 6px; color: var(--lt-ink-4); font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lt-inline-icon-btn:hover:not(:disabled) { background: var(--lt-warn-tint); color: var(--lt-warn-ink); }
.lt-inline-icon-btn:disabled { opacity: 0.45; cursor: default; }

/* --- Segmented pill tabs (inline, like design's msg tabs) ------------- */
.lt-pill-tabs {
  display: inline-flex; align-items: center; gap: 4px;
  background: oklch(95% 0.01 235); padding: 4px; border-radius: 10px;
  margin-bottom: 18px;
}
.lt-pill-tab {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--lt-font-display); font-weight: 700; font-size: 12.5px;
  color: var(--lt-ink-4); padding: 7px 14px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 7px;
}
.lt-pill-tab.active { background: #fff; color: var(--lt-accent-ink); box-shadow: var(--lt-shadow-raised); }
.lt-unread-dot {
  background: oklch(58% 0.16 25); color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 999px; padding: 1px 6px;
}

/* --- Chat ------------------------------------------------------------- */
.lt-chat-scroll { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; max-height: 440px; overflow-y: auto; }
.lt-chat-row { display: flex; gap: 10px; }
.lt-chat-row.mine { flex-direction: row-reverse; }
.lt-chat-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--lt-font-display); font-weight: 800; font-size: 11px; color: #fff;
}
.lt-chat-bubble {
  background: var(--lt-surface-sunken); border-radius: 4px 12px 12px 12px;
  padding: 9px 12px; font-size: 13.5px; line-height: 1.5; margin-top: 4px;
}
.lt-chat-row.mine .lt-chat-bubble { background: var(--lt-accent-tint); border-radius: 12px 4px 12px 12px; }
.lt-chat-meta { display: flex; align-items: center; gap: 7px; }
.lt-chat-composer { border-top: 1px solid var(--lt-line-faint); padding: 12px 16px; display: flex; gap: 10px; }
.lt-chat-actions { display: flex; gap: 12px; margin-top: 4px; font-size: 11px; font-weight: 600; }
.lt-chat-actions .edit { color: var(--lt-accent); cursor: pointer; }
.lt-chat-actions .delete { color: var(--lt-danger); cursor: pointer; }

/* --- DM split pane ---------------------------------------------------- */
/* grid-template-rows pins the single row to the pane height — without it the row is
   auto-sized and a long chat pushes the message input past the clipped bottom edge. */
.lt-dm-pane { display: grid; grid-template-columns: 200px minmax(0,1fr); grid-template-rows: minmax(0,1fr); height: 460px; overflow: hidden; }
.lt-dm-threads { border-right: 1px solid var(--lt-line-faint); overflow-y: auto; min-width: 0; }
.lt-dm-thread { padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--lt-line-faint); }
.lt-dm-thread:hover { background: var(--lt-canvas); }
.lt-dm-thread.active { background: var(--lt-accent-tint); }
.lt-dm-convo { display: flex; flex-direction: column; min-width: 0; }

/* --- FAB action menu -------------------------------------------------- */
.lt-fab-row { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lt-fab {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--lt-ink-1); color: #fff; border: none;
  box-shadow: var(--lt-shadow-float); cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center; flex: 0 0 40px;
}
.lt-fab-action { cursor: pointer; }
.lt-fab-action .lt-fab-action-icon {
  width: 24px; height: 24px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.lt-published-toast {
  background: var(--lt-ink-1); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 8px;
}
.lt-published-toast i { color: oklch(70% 0.15 152); }

/* --- Loading overlay (Shared/LoadingOverlay.razor) -------------------- */
.lt-loading-host { position: relative; }
.lt-loading-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--lt-surface) 65%, transparent);
  border-radius: inherit;
}

/* --- Empty state ------------------------------------------------------ */
.lt-empty { text-align: center; padding: 44px 24px; }
.lt-empty-icon {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--lt-surface-sunken); color: oklch(66% 0.014 240);
  display: flex; align-items: center; justify-content: center;
}
.lt-empty-title { font-family: var(--lt-font-display); font-weight: 800; font-size: 15px; }
.lt-empty-sub { font-size: 13.5px; color: var(--lt-ink-4); margin: 6px auto 0; max-width: 420px; line-height: 1.55; }

/* --- Trust banner (safeguarding) -------------------------------------- */
.lt-trust-banner {
  background: var(--lt-trust-tint);
  border: 1px solid var(--lt-trust-line);
  border-radius: var(--lt-radius-xl);
  padding: 16px 18px;
  display: flex; gap: 10px; align-items: flex-start;
}
.lt-trust-banner i { color: oklch(46% 0.14 152); margin-top: 2px; }
.lt-trust-banner .title { font-weight: 700; font-size: 14px; color: oklch(30% 0.1 152); }
.lt-trust-banner .sub { font-size: 13px; color: oklch(38% 0.09 152); margin-top: 2px; }

/* --- Placeholder (open roster slot) rows ------------------------------- */
.lt-placeholder-row {
  border-top: 1px dashed oklch(85% 0.02 246) !important;
  background: oklch(97% 0.015 246);
}
.lt-placeholder-name { font-weight: 600; font-size: 13.5px; color: var(--lt-accent-ink); }

/* --- Misc -------------------------------------------------------------- */
.lt-inline-link { font-size: 13px; font-weight: 600; cursor: pointer; }
.lt-season-chip-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.lt-divider-top { border-top: 1px solid var(--lt-line-faint); margin-top: 24px; padding-top: 20px; }

/* ============================================================
   Parent workspace + mock login additions
   ============================================================ */

/* --- Login ------------------------------------------------------------ */
.lt-login-canvas {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: oklch(30% 0.09 246); padding: 24px;
}
.lt-login-card {
  width: 440px; max-width: 94vw; background: var(--lt-surface);
  border-radius: 18px; box-shadow: 0 18px 48px rgba(0,0,0,0.35); padding: 30px 32px;
}
.lt-login-persona {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1px solid var(--lt-line); border-radius: 12px; background: var(--lt-surface);
  padding: 14px 16px; cursor: pointer; font-family: var(--lt-font-body);
  transition: border-color 140ms ease, background 140ms ease;
}
.lt-login-persona:hover { border-color: var(--lt-accent); background: var(--lt-accent-tint); }
.lt-login-persona .persona-icon {
  width: 42px; height: 42px; border-radius: 10px; flex: 0 0 42px;
  display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff;
}

/* --- Player switcher (parent sidebar) --------------------------------- */
.lt-player-switch { position: relative; margin-bottom: 20px; }
.lt-player-switch-btn {
  display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--lt-line);
  background: #fff; cursor: pointer; font-family: var(--lt-font-body); text-align: left;
}
.lt-player-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px;
}
.lt-player-switch-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 61;
  background: #fff; border: 1px solid var(--lt-line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 5px;
  display: flex; flex-direction: column; gap: 2px;
}
.lt-player-switch-item {
  display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
  padding: 8px 10px; border-radius: 10px; border: none; background: transparent;
  cursor: pointer; font-family: var(--lt-font-body); text-align: left;
}
.lt-player-switch-item:hover { background: var(--lt-surface-sunken); }
.lt-player-switch-item.active { background: var(--lt-accent-tint); }
.lt-sidebar-trust-note {
  padding: 12px; background: var(--lt-trust-tint); border-radius: 10px;
  font-size: 12px; color: oklch(38% 0.09 152); line-height: 1.5;
}

/* --- Paid lock panels -------------------------------------------------- */
.lt-lock-wrap { position: relative; }
.lt-lock-overlay {
  position: absolute; inset: 0; z-index: 5; border-radius: var(--lt-radius-xl);
  background: oklch(99% 0.003 235 / 0.72); backdrop-filter: blur(2px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.lt-paid-tag {
  display: inline-flex; align-items: center;
  background: var(--lt-accent-tint); color: var(--lt-accent-ink);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.lt-unlock-link.rz-link {
  display: inline-flex; align-items: center;
  background: var(--lt-accent); color: #fff;
  font-family: var(--lt-font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px; text-decoration: none;
}
.lt-unlock-link.rz-link:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }

/* --- Parent schedule --------------------------------------------------- */
.lt-filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--lt-line); border-radius: 999px; background: var(--lt-surface);
  padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--lt-ink-4);
  cursor: pointer; font-family: var(--lt-font-display);
}
.lt-filter-chip.active { background: var(--lt-ink-1); color: #fff; border-color: var(--lt-ink-1); }
.lt-filter-dot { width: 8px; height: 8px; border-radius: 50%; }
.lt-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, minmax(0,1fr));
  border-bottom: 1px solid oklch(94% 0.008 235); background: oklch(98% 0.004 235);
}
.lt-cal-weekday {
  padding: 8px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: oklch(58% 0.016 240); text-align: center;
}
.lt-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.lt-cal-cell {
  min-height: 96px; padding: 6px; border-top: 1px solid var(--lt-line-faint);
  border-right: 1px solid var(--lt-line-faint); background: var(--lt-surface);
}
.lt-cal-cell.outside { background: oklch(98% 0.004 235); }
.lt-cal-daynum { font-size: 11.5px; font-weight: 700; color: var(--lt-ink-4); margin-bottom: 4px; }
.lt-cal-daynum.today {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--lt-accent); color: #fff;
}
.lt-cal-event {
  display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600;
  background: var(--lt-surface-sunken); border-radius: 6px; padding: 2px 6px;
  margin-bottom: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.lt-sched-group-head {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 18px;
  background: oklch(98% 0.004 235);
}
.lt-sched-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 13px 18px;
  border-top: 1px solid oklch(96% 0.006 235);
}
.lt-sched-time { width: 64px; flex: 0 0 64px; font-size: 12.5px; font-weight: 700; color: var(--lt-ink-4); padding-top: 4px; }
.lt-sched-icon {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.lt-owner-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--lt-surface-sunken); color: var(--lt-ink-4);
  border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.lt-rsvp-seg { display: inline-flex; gap: 2px; background: oklch(95% 0.01 235); padding: 3px; border-radius: 9px; }
.lt-rsvp-btn {
  border: none; background: transparent; cursor: pointer; border-radius: 7px;
  font-family: var(--lt-font-display); font-weight: 700; font-size: 11.5px;
  color: var(--lt-ink-4); padding: 5px 10px; display: inline-flex; align-items: center; gap: 5px;
}
.lt-rsvp-btn.going { background: var(--lt-trust); color: #fff; }
.lt-rsvp-btn.out { background: oklch(58% 0.16 25); color: #fff; }

/* Snack-volunteer slot on team events (parent schedule list rows) */
.lt-snack-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid oklch(85% 0.06 75); border-radius: 999px; background: transparent;
  color: var(--lt-warn-ink); cursor: pointer; white-space: nowrap;
  font-family: var(--lt-font-display); font-weight: 700; font-size: 11.5px;
  padding: 5px 11px;
}
.lt-snack-btn:hover { background: var(--lt-warn-tint); }
.lt-snack-btn.mine {
  background: var(--lt-warn-tint); border-color: var(--lt-warn); color: var(--lt-warn-ink);
}
.lt-snack-other {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--lt-ink-5); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}

/* Date-range preset chips (Game Finder filter) */
.lt-range-chip {
  font-family: var(--lt-font-body);
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  background: #fff; color: var(--lt-ink-4); border: 1px solid var(--lt-line);
}
.lt-range-chip:hover { background: var(--lt-surface-sunken); }
.lt-range-chip.active { background: var(--lt-accent); color: #fff; border-color: var(--lt-accent); }

/* --- Underline tabs (Pickup / Tryout manager) -------------------------- */
.lt-underline-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--lt-line-soft); margin-bottom: 20px; }
.lt-underline-tab {
  border: none; background: transparent; cursor: pointer; padding: 9px 14px;
  font-family: var(--lt-font-display); font-weight: 700; font-size: 13.5px; color: var(--lt-ink-4);
}
.lt-underline-tab.active { color: var(--lt-accent-ink); box-shadow: inset 0 -2px 0 0 var(--lt-accent); }

/* --- Parent messages --------------------------------------------------- */
.lt-family-pane { display: grid; grid-template-columns: 280px minmax(0,1fr); grid-template-rows: minmax(0,1fr); height: 540px; overflow: hidden; }
.lt-family-thread {
  display: flex; gap: 10px; width: 100%; text-align: left; border: none; background: transparent;
  padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--lt-line-faint);
  font-family: var(--lt-font-body);
}
.lt-family-thread:hover { background: var(--lt-canvas); }
.lt-family-thread.active { background: var(--lt-accent-tint); }
.lt-thread-avatar {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.lt-privacy-strip {
  display: flex; align-items: center; gap: 8px; padding: 8px 18px;
  background: var(--lt-trust-tint); color: oklch(35% 0.1 152);
  font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--lt-trust-line);
}

/* A message written in the rich-text composer (notification spec §12.8). The API sanitizes it to a small
   mail-safe subset at write time; this gives that subset sane spacing inside a message bubble, where the
   browser's own margins would otherwise leave a gap above the first line and below the last. */
.lt-rich-body > :first-child { margin-top: 0; }
.lt-rich-body > :last-child { margin-bottom: 0; }
.lt-rich-body p { margin: 0 0 8px; }
.lt-rich-body ul, .lt-rich-body ol { margin: 0 0 8px; padding-left: 22px; }
.lt-rich-body li { margin: 2px 0; }
.lt-rich-body h1, .lt-rich-body h2, .lt-rich-body h3, .lt-rich-body h4 {
  margin: 10px 0 6px; font-family: var(--lt-font-display); line-height: 1.3;
}
.lt-rich-body h1 { font-size: 17px; } .lt-rich-body h2 { font-size: 15.5px; }
.lt-rich-body h3 { font-size: 14.5px; } .lt-rich-body h4 { font-size: 13.5px; }
.lt-rich-body blockquote {
  margin: 8px 0; padding: 2px 12px; border-left: 3px solid var(--lt-line, #ccc); color: var(--lt-ink-4);
}
.lt-rich-body a { color: var(--lt-accent-ink); word-break: break-word; }
.lt-rich-body pre { white-space: pre-wrap; margin: 8px 0; }

/* --- Reference Catalogs (operator) ----------------------------------- */
/* Tree on the left, the selected node's grid on the right. The tree column is fixed so the grids
   keep a stable width as the operator moves between nodes with very different column counts. */
.lt-cat-layout {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px; align-items: start;
}
@media (max-width: 900px) { .lt-cat-layout { grid-template-columns: 1fr; } }

.lt-cat-tree { padding: 10px 8px; }
.lt-cat-node { display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.lt-cat-node > i { width: 15px; flex: 0 0 15px; text-align: center; font-size: 12px; }
.lt-cat-node-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-cat-count {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--lt-ink-5);
  background: var(--lt-surface-sunken); border-radius: 999px; padding: 1px 7px;
}

.lt-cat-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; min-height: 38px;
}
.lt-cat-crumb { font-size: 13px; font-weight: 700; color: var(--lt-ink-3); }

.lt-cat-body-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.lt-cat-body-name { font-family: var(--lt-font-display); font-weight: 800; font-size: 18px; }

/* Sport overview: three cards standing in for the sport's child nodes. */
.lt-cat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.lt-cat-overview-card {
  display: block; text-align: left; cursor: pointer;
  background: var(--lt-surface-white); border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-lg); box-shadow: var(--lt-shadow-card);
  padding: 16px; font-family: var(--lt-font-body); color: inherit;
  transition: var(--lt-transition);
}
.lt-cat-overview-card:hover { box-shadow: var(--lt-shadow-raised); border-color: var(--lt-line-strong); }
.lt-cat-overview-icon {
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
}
.lt-cat-overview-icon.tone-accent { background: var(--lt-accent-tint); color: var(--lt-accent-ink); }
.lt-cat-overview-icon.tone-trust  { background: var(--lt-trust-tint);  color: var(--lt-trust-ink); }
.lt-cat-overview-icon.tone-warn   { background: var(--lt-warn-tint);   color: var(--lt-warn-ink); }
.lt-cat-overview-label { font-family: var(--lt-font-display); font-weight: 800; font-size: 15px; }
.lt-cat-overview-detail { font-size: 12.5px; color: var(--lt-ink-5); margin-top: 2px; line-height: 1.45; }

/* Age Groups toolbar: which rule is in force, and the season the birthdate column resolves against. */
.lt-cat-season {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 16px; margin-bottom: 12px; padding: 14px 16px;
}
.lt-cat-pill {
  padding: 8px 10px; border-radius: var(--lt-radius-sm);
  background: var(--lt-surface-sunken); color: var(--lt-ink-3);
  font-size: 13px; font-weight: 700;
}
.lt-cat-rule-summary {
  flex: 1; min-width: 240px; padding: 10px 12px; border-radius: 9px;
  background: var(--lt-accent-tint); color: var(--lt-accent-ink);
  font-size: 12.5px; line-height: 1.5;
}
.lt-cat-override {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  background: var(--lt-accent-tint); color: var(--lt-accent-ink);
}

/* Radzen's tree node is nowrap by default, so a deep label ("Sanctioning Bodies" at depth 2) pushes
   past the card instead of ellipsing. Let the label shrink so the count badge stays visible. */
.lt-cat-tree .rz-treenode-content { min-width: 0; }
.lt-cat-tree .rz-treenode-label { flex: 1; min-width: 0; overflow: hidden; }

/* A guarded delete has to LOOK unavailable or the operator reports it "not working" — which is
   exactly what happened here. The house disabled treatment (`.rz-button.rz-state-disabled` in
   radzen-overrides) is only two classes, so Radzen's own `.rz-button.rz-variant-filled.rz-danger`
   (three) out-specified its colours, while the house rule's `opacity: 1` cancelled Radzen's built-in
   dimming — leaving a disabled delete looking exactly like a live one. Three classes here wins both,
   and the extra dimming makes "can't delete this" read at a glance. Scoped to danger buttons; the
   attribute selector is belt-and-braces in case a future Radzen drops the class. */
.rz-button.rz-danger.rz-state-disabled,
.rz-button.rz-danger:disabled {
  opacity: 0.45;
  color: var(--lt-ink-disabled);
  background: var(--lt-surface-sunken);
  border-color: var(--lt-line);
  cursor: default;
}

/* An armed destructive mode has to be impossible to miss — it bypasses every delete guard. */
.lt-danger-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 11px 14px;
  border: 1px solid var(--lt-danger-line);
  background: var(--lt-danger-tint);
  color: var(--lt-danger);
  border-radius: var(--lt-radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
}

/* The row-action buttons use Radzen's text variant, whose "light" shade renders near-invisible on a
   white row — the pencil is the only affordance telling the operator a row is editable, so it gets
   real ink. Hover deepens it further; the disabled delete keeps its dimmed treatment above. */
.lt-cat-layout .rz-button.rz-light.rz-variant-text { color: var(--lt-ink-3); }
.lt-cat-layout .rz-button.rz-light.rz-variant-text:hover:not(.rz-state-disabled) {
  color: var(--lt-ink-1); background: var(--lt-surface-sunken);
}

/* Fixed 600px grids: freeze the header, scroll the body. Radzen scrolls `.rz-data-grid-data`
   horizontally already; giving the grid a height makes that box the vertical scroller too, and the
   header row sticks to its top. */
.lt-cat-layout .rz-data-grid,
.lt-cat-layout .rz-datatable { display: flex; flex-direction: column; }
.lt-cat-layout .rz-data-grid-data { flex: 1; min-height: 0; overflow: auto; }
.lt-cat-layout .rz-data-grid-data thead.rz-grid-table-thead th,
.lt-cat-layout .rz-data-grid-data thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--lt-surface-sunken);
}

/* ---- Language switch (localization design doc §3.4): EN | ES in the header and on the sign-in card ---- */
.lt-lang-switch { display: inline-flex; align-items: center; gap: 2px; border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; padding: 2px; }
.lt-lang-switch a { color: rgba(255,255,255,0.72); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; text-decoration: none; line-height: 1.2; }
.lt-lang-switch a:hover { color: #fff; }
.lt-lang-switch a.active { background: rgba(255,255,255,0.92); color: var(--lt-navy, #14213d); }
.lt-lang-switch.lt-lang-switch-dark { border-color: var(--lt-line); }
.lt-lang-switch.lt-lang-switch-dark a { color: var(--lt-ink-4); }
.lt-lang-switch.lt-lang-switch-dark a:hover { color: var(--lt-ink); }
.lt-lang-switch.lt-lang-switch-dark a.active { background: var(--lt-navy, #14213d); color: #fff; }
.lt-lang-fallback { display: flex; align-items: center; gap: 8px; background: oklch(96% 0.03 80); color: oklch(40% 0.1 80); border: 1px solid oklch(88% 0.06 80); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 12px; }
/* Content editor language tabs + list chips (localization design doc §4) */
.lt-lang-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; border-bottom: 1px solid var(--lt-line); padding-bottom: 8px; }
.lt-lang-tab { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--lt-line); border-radius: 10px; padding: 7px 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--lt-ink-3); }
.lt-lang-tab:hover { background: var(--lt-surface-2, #f5f6f8); }
.lt-lang-tab.active { background: var(--lt-navy, #14213d); color: #fff; border-color: var(--lt-navy, #14213d); }
.lt-lang-tab:disabled { opacity: 0.6; cursor: default; }
.lt-lang-chip { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; margin-right: 4px; text-decoration: none; border: 1px solid transparent; }
.lt-lang-chip.none { color: var(--lt-ink-5); border-color: var(--lt-line); }
.lt-lang-chip.draft { background: oklch(94% 0.05 246); color: oklch(40% 0.13 246); }
.lt-lang-chip.published { background: oklch(93% 0.07 152); color: oklch(35% 0.12 152); }
.lt-lang-chip.stale { background: oklch(93% 0.06 30); color: oklch(40% 0.15 30); }
.lt-lang-reference-body { border: 1px dashed var(--lt-line); border-radius: 10px; padding: 12px 14px; margin-top: 8px; max-height: 320px; overflow: auto; background: var(--lt-surface-2, #f8f9fb); font-size: 13px; }

/* Player switcher: followed (shared, read-only) players sit under the account's own players */
.lt-player-switch-item.lt-player-switch-followed-first { border-top: 1px solid var(--lt-line-faint); border-radius: 0 0 10px 10px; margin-top: 3px; padding-top: 10px; }

/* ---- Roles & permissions (permissions matrix §2.4) ------------------------
   The role editor's permission grid. Two-up on a wide dialog, one column on a narrow one; each
   group is a bordered card so an operator scanning for "what does Billing grant" finds the block
   rather than reading a flat list of forty checkboxes. */
.lt-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 8px; }
.lt-perm-group { border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm, 10px); padding: 10px 12px 6px; background: var(--lt-surface-2, #f8f9fb); }
.lt-perm-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--lt-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lt-ink-4); margin-bottom: 6px; }
.lt-perm-row { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; cursor: pointer; }
.lt-perm-row > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lt-perm-name { font-size: 13px; font-weight: 600; color: var(--lt-ink-1); }
.lt-perm-key { font-size: 10.5px; color: var(--lt-ink-5); }
.lt-perm-desc { font-size: 11.5px; line-height: 1.4; color: var(--lt-ink-4); }

/* "Select all" / "None" affordances inside group headers and labels — a link, not a button. */
.lt-link-btn { background: none; border: none; padding: 0; font: inherit; font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--lt-accent); cursor: pointer; }
.lt-link-btn:hover { text-decoration: underline; }

/* The roles list: a role's granted-permission count reads as a ratio, dimmed when it is everything. */
.lt-role-grant-count { font-size: 12px; color: var(--lt-ink-4); }
.lt-role-grant-count.all { color: var(--lt-trust, #0a924b); font-weight: 700; }

/* ---- SortableCardList (Components/Shared/SortableCardList.razor) --------------
   Cards with a grab handle on the left; js/sortable-cards.js drives the drag. The cards keep Blazor's
   DOM order during a drag — the moving card is a fixed-position clone (.lt-sortable-ghost) and the
   others slide with transforms to open the gap — so a re-render can never fight the pointer. */
.lt-sortable { display: flex; flex-direction: column; gap: 8px; }
.lt-sortable-card.rz-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; box-shadow: none; border-radius: var(--lt-radius-lg, 12px); transition: transform 140ms ease; }
.lt-sortable-active .lt-sortable-card { user-select: none; }
.lt-sortable-source { opacity: 0.35; }
.lt-sortable-handle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; align-self: stretch; color: var(--lt-ink-5); font-size: 13px; cursor: grab; touch-action: none; user-select: none; border-radius: 4px; outline: none; }
.lt-sortable-handle:hover { color: var(--lt-ink-1); }
.lt-sortable-handle:focus-visible { color: var(--lt-ink-1); box-shadow: 0 0 0 2px var(--lt-accent-line, var(--lt-accent)); }
.lt-sortable-handle-off, .lt-sortable-handle-off:hover { cursor: default; opacity: 0.35; color: var(--lt-ink-5); }
.lt-sortable-active .lt-sortable-handle { cursor: grabbing; }
.lt-sortable-body { flex: 1; min-width: 0; }
/* A nested child list (SortableCardList ChildItems) sits inside its parent card's body, a step in and tinted. */
.lt-sortable-nested { margin-top: 10px; gap: 6px; }
.lt-sortable-nested > .lt-sortable-card.rz-card { padding: 8px 10px; background: var(--lt-surface-sunken, var(--lt-surface)); }
.lt-sortable-ghost { position: fixed; z-index: 10000; margin: 0; pointer-events: none; box-shadow: var(--lt-shadow-float) !important; background: var(--lt-surface-white, #fff); transform: rotate(0.5deg); opacity: 0.97; transition: none; }

/* --- Roster entry dialog: icon actions + per-game stats grid ----------- */
.lt-roster-entry-actions { display: flex; gap: 8px; }
.rz-button.lt-icon-action { min-width: 34px; width: 34px; height: 34px; padding: 0; justify-content: center; }
/* TooltipText host: a disabled control gets no mouse events, so let the pointer fall through to the span that opens the tooltip. */
.lt-tip > :disabled, .lt-tip > .rz-state-disabled, .lt-tip > [aria-disabled="true"] { pointer-events: none; }
.lt-roster-stats { border-top: 1px solid var(--lt-line); padding-top: 14px; margin-top: 16px; }
.lt-roster-stats-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.lt-roster-stats-season { font-size: 12.5px; font-weight: 700; color: var(--lt-ink-4); }
.lt-roster-stats-team {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px;
  background: var(--lt-accent-tint); color: var(--lt-accent-ink); border: 1px solid var(--lt-accent-line);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700;
}
.lt-roster-stats-empty { padding: 22px; text-align: center; color: var(--lt-ink-5); font-size: 13px; }
.lt-stat-game-date { font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.lt-stat-game-opp { font-size: 11.5px; color: var(--lt-ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-stat-result { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--lt-ink-4); }
.lt-stat-result-w { color: var(--lt-trust-ink); }
.lt-stat-result-l { color: var(--lt-danger); }
/* The season-average row is the grid's first row and stays pinned under the header while games scroll.
   The header height is fixed so the pinned row knows where to sit. */
.lt-stats-grid .rz-grid-table thead th { height: 26px; box-sizing: border-box; padding: 0 4px; font-size: 11px; }
.lt-stats-grid .rz-grid-table tbody td { padding: 2px 4px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lt-stats-grid .lt-stat-game-date { font-size: 11.5px; }
.lt-stats-grid .lt-stat-game-opp { font-size: 10.5px; }
.lt-stats-grid .rz-grid-table tbody tr.lt-stat-avg-row > td {
  position: sticky; top: 26px; z-index: 2;
  background: var(--lt-accent-tint); font-weight: 700; border-bottom: 2px solid var(--lt-accent-line);
}
/* Radzen writes z-index:1 inline on frozen cells; the pinned row's frozen cell must sit above its own row. */
.lt-stats-grid .rz-grid-table tbody tr.lt-stat-avg-row > td.rz-frozen-cell { z-index: 3 !important; }

/* --- Grid row actions (GridAction): bare 22px icons, label in a Radzen tooltip ------------- */
.lt-grid-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; margin: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--lt-accent); cursor: pointer;
  font-size: 22px; line-height: 1; vertical-align: middle;
}
.lt-grid-action .rzi { font-size: 22px; }
.lt-grid-action:hover { background: var(--lt-accent-tint); color: var(--lt-accent-ink); }
.lt-grid-action:focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 1px; }
.lt-grid-action-danger { color: var(--lt-danger); }
.lt-grid-action-danger:hover { background: var(--lt-danger-tint); color: var(--lt-danger); }
.lt-grid-action:disabled { color: var(--lt-ink-5); opacity: 0.45; cursor: default; background: transparent; }
.lt-grid-actions { display: inline-flex; align-items: center; gap: 4px; }
.lt-grid-action-muted { color: var(--lt-ink-4); }
.lt-grid-action-muted:hover { background: var(--lt-surface-sunken, var(--lt-accent-tint)); color: var(--lt-ink-2); }
/* Radzen pads cells 20px a side — too much for a 48px icon column. Tighten any cell whose content is just GridActions. */
.rz-data-grid td:has(> .rz-cell-data > .lt-tip > .lt-grid-action),
.rz-data-grid td:has(> .rz-cell-data > .lt-grid-actions) { padding-inline: 6px; }
.rz-data-grid .rz-cell-data:has(> .lt-tip > .lt-grid-action),
.rz-data-grid .rz-cell-data:has(> .lt-grid-actions) { overflow: visible; text-overflow: clip; }