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

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

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

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

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

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

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

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