/* Whistlenote panel theme. Logical properties only (RTL/LTR safe). Lime is an accent on dark surfaces, never text on white. */
:root {
  --cl-ink: #0B1F33;
  --cl-lane: #C8F03C;
  --cl-court: #1E6B52;
  --cl-clay: #C2410C;
  --cl-chalk: #F6F7F2;
  --cl-line: #E3E6DD;
  --cl-slate: #5B6B7A;
  --cl-radius: 14px;
}

.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat { border-radius: var(--cl-radius); }
.fi-btn, .fi-badge { border-radius: 999px; }

.fi-sidebar-item-btn { border-inline-start: 3px solid transparent; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { border-inline-start-color: var(--cl-lane); }
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { border-inline-start-color: var(--cl-lane); }

/* plan / trial banner */
.cl-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-block-end: 1rem;
  padding: .75rem 1rem; border-radius: var(--cl-radius); background: var(--cl-ink); color: #fff; font-size: .875rem; }
.cl-banner strong { color: var(--cl-lane); font-weight: 800; }
.cl-banner a { color: var(--cl-lane); text-decoration: underline; font-weight: 600; }
.cl-banner-readonly { background: var(--cl-clay); }
.cl-banner-readonly strong, .cl-banner-readonly a { color: #fff; }

/* Today (tablet-first roster) */
.cl-today { display: grid; gap: 1.25rem; }
.cl-today-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cl-today-date { font-size: 1.125rem; font-weight: 800; margin-inline: .5rem; }
.cl-session { border: 1px solid var(--cl-line); border-radius: var(--cl-radius); background: #fff; overflow: hidden; }
.dark .cl-session { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .12); }
.cl-session-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-block-end: 1px solid var(--cl-line); }
.dark .cl-session-head { border-color: rgb(255 255 255 / .12); }
.cl-session-title { font-size: 1.125rem; font-weight: 800; }
.cl-session-meta { color: var(--cl-slate); font-size: .875rem; }
.dark .cl-session-meta { color: #9aa5ae; }
.cl-session-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cl-pill { display: inline-block; padding: .125rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--cl-chalk); color: var(--cl-ink); }
.cl-pill-held { background: #d9eee3; color: #134435; }
.cl-pill-cancelled { background: #ffe5da; color: #7c2d12; }
.cl-pill-low { background: #ffe5da; color: #7c2d12; }
.cl-pill-ok { background: #d9eee3; color: #134435; }
.cl-roster { list-style: none; margin: 0; padding: 0; }
.cl-player { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1.25rem; border-block-end: 1px solid var(--cl-line); }
.dark .cl-player { border-color: rgb(255 255 255 / .08); }
.cl-player:last-child { border-block-end: 0; }
.cl-player-info { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1 1 12rem; }
.cl-player-name { font-weight: 600; }
.cl-status-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.cl-status { min-height: 48px; min-width: 76px; padding: .5rem .875rem; border: 2px solid var(--cl-line); border-radius: 999px; background: #fff; color: var(--cl-ink);
  font-weight: 600; font-size: .875rem; cursor: pointer; }
.dark .cl-status { background: transparent; color: #fff; border-color: rgb(255 255 255 / .25); }
.cl-status:disabled { opacity: .5; cursor: not-allowed; }
.cl-status[aria-pressed="true"].cl-status-present { background: var(--cl-court); border-color: var(--cl-court); color: #fff; }
.cl-status[aria-pressed="true"].cl-status-late { background: #92400e; border-color: #92400e; color: #fff; }
.cl-status[aria-pressed="true"].cl-status-excused { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.cl-status[aria-pressed="true"].cl-status-no_show { background: var(--cl-clay); border-color: var(--cl-clay); color: #fff; }
.cl-empty { padding: 2rem 1.25rem; text-align: center; color: var(--cl-slate); }
.cl-notes { padding: 1rem 1.25rem; border-block-start: 1px solid var(--cl-line); }

/* Money page */
.cl-money { display: grid; gap: 1.25rem; }
.cl-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cl-stat { border: 1px solid var(--cl-line); border-radius: var(--cl-radius); padding: 1rem 1.25rem; background: #fff; }
.dark .cl-stat { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .12); }
.cl-stat-label { color: var(--cl-slate); font-size: .875rem; }
.cl-stat-value { font-size: 1.75rem; font-weight: 800; }
.cl-stat-owed .cl-stat-value { color: var(--cl-clay); }
.cl-card { border: 1px solid var(--cl-line); border-radius: var(--cl-radius); background: #fff; overflow: hidden; }
.dark .cl-card { background: rgb(255 255 255 / .04); border-color: rgb(255 255 255 / .12); }
.cl-card > h2 { padding: 1rem 1.25rem; font-size: 1rem; font-weight: 800; border-block-end: 1px solid var(--cl-line); }
.dark .cl-card > h2 { border-color: rgb(255 255 255 / .12); }
.cl-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 1.25rem; border-block-end: 1px solid var(--cl-line); }
.dark .cl-row { border-color: rgb(255 255 255 / .08); }
.cl-row:last-child { border-block-end: 0; }
.cl-row-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cl-amount { font-weight: 800; }
.cl-amount-owed { color: var(--cl-clay); }

/* Platform console (super admin) */
.cl-platform-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.5rem 1.75rem;
  border-radius: var(--cl-radius); background: var(--cl-ink); color: #fff; border-inline-start: 6px solid var(--cl-lane); }
.cl-platform-hero h2 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.cl-platform-hero p { margin: .25rem 0 0; color: #cbd5df; font-size: .9375rem; }
.cl-platform-hero .cl-platform-kicker { margin: 0 0 .25rem; color: var(--cl-lane); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cl-platform-link { padding: .625rem 1.125rem; border-radius: 999px; background: var(--cl-lane); color: var(--cl-ink); font-weight: 700; font-size: .875rem; text-decoration: none; }
.cl-platform-link:hover { filter: brightness(.95); }

.cl-matrix { overflow-x: auto; }
.cl-matrix table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.cl-matrix th, .cl-matrix td { padding: .625rem .75rem; text-align: center; border-block-end: 1px solid var(--cl-line); }
.dark .cl-matrix th, .dark .cl-matrix td { border-color: rgb(255 255 255 / .1); }
.cl-matrix thead th { color: var(--cl-slate); font-weight: 600; font-size: .75rem; }
.cl-matrix tbody th { text-align: start; font-weight: 700; }
.cl-matrix td { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; }
.cl-matrix .cl-matrix-zero { color: #a3adb8; font-weight: 400; }
.cl-matrix tbody tr:last-child th, .cl-matrix tbody tr:last-child td { border-block-end: 0; }

/* impersonation banner */
.cl-banner-impersonation { background: #7c2d12; }
.cl-banner-impersonation strong { color: #fff; }
.cl-banner-button { padding: .375rem 1rem; border-radius: 999px; border: 0; background: var(--cl-lane); color: var(--cl-ink); font-weight: 700; cursor: pointer; }

/* platform sidebar group: lime marker so the console reads as a different place */
.fi-sidebar-group[data-group-label="Platform"] .fi-sidebar-group-label { color: var(--cl-clay); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cl-matrix thead th:first-child { text-align: start; }

/* Getting started checklist (new academies) */
.cl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.cl-step { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem 1rem; border: 1px solid var(--cl-line); border-radius: 12px; background: #fff; text-decoration: none; color: inherit; }
.cl-step:hover { border-color: var(--cl-court); }
.dark .cl-step { background: transparent; border-color: rgb(255 255 255 / .12); }
.cl-step-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; margin-block-start: .125rem;
  border-radius: 999px; background: var(--cl-line); color: var(--cl-ink); font-size: .75rem; font-weight: 800; }
.cl-step-mark-done { background: var(--cl-court); color: #fff; }
.cl-step-title { display: block; font-weight: 700; }
.cl-step-hint { display: block; margin-block-start: .125rem; color: var(--cl-slate); font-size: .875rem; }

/* Space between the settings form sections and its save button. */
.cl-form-actions { margin-block-start: 1.5rem; }