:root {
  --bg: #0f1720;
  --panel: #16212c;
  --panel-2: #1d2b38;
  --border: #2a3b4a;
  --text: #e6edf3;
  --text-dim: #93a3b3;
  --accent: #4da3ff;
  --good: #3fb950;
  --bad: #f85149;
  --warn: #d29922;
  font-family: -apple-system, Segoe UI, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar h1 {
  font-size: 18px;
  margin: 0;
  white-space: nowrap;
}

#tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The two mode buttons (Live Check / Slot Check) pick which row of tabs
   #tab-row shows below them -- bigger and bolder than an ordinary tab
   link so they read as a section switch, not just one more tab. */
#section-switcher { display: flex; gap: 6px; }
.section-btn {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
  color: var(--text-dim);
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.section-btn:hover { background: var(--panel-2); color: var(--text); }
.section-btn.active { background: var(--accent); color: #05121f; border-color: var(--accent); }

#tab-row { display: flex; gap: 4px; flex-wrap: wrap; }

#tabs a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
}

#tabs a:hover { background: var(--panel-2); color: var(--text); }
#tabs a.active { background: var(--accent); color: #05121f; font-weight: 600; }

#content {
  padding: 20px;
  width: 100%;
  max-width: none;
  margin: 0;
}

h2 { margin-top: 0; font-size: 20px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }

label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

input, select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 14px;
}

button {
  background: var(--accent);
  color: #05121f;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}

button.secondary {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}

button:hover { opacity: 0.9; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  text-align: right;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

th:first-child, td:first-child, th.left, td.left { text-align: left; }

thead th {
  color: var(--text-dim);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--panel);
  white-space: normal;
  vertical-align: bottom;
  min-width: 90px;
}

.table-wrap { overflow-x: auto; max-height: 78vh; overflow-y: auto; }
.table-wrap-full { max-height: none; overflow-y: visible; }
.table-wrap-full thead th { position: static; }
.table-wrap-compact th, .table-wrap-compact td { padding: 4px 6px; font-size: 11px; }

/* Lets a wide table's columns shrink to fit the window instead of
   triggering a horizontal scrollbar -- cell text wraps onto multiple
   lines rather than forcing the table past the container's width. */
.table-wrap-no-hscroll { overflow-x: hidden; }
.table-wrap-no-hscroll table { table-layout: fixed; }
.table-wrap-no-hscroll th, .table-wrap-no-hscroll td { white-space: normal; word-break: break-word; }

/* Shrinks a table down to its own content width instead of always
   stretching to 100% of the panel -- for tables with just a few narrow
   columns (e.g. the Lock tab) where full-width leaves a lot of empty
   space and looks oddly stretched. */
.table-wrap-narrow { width: fit-content; max-width: 100%; }
.table-wrap-narrow table { width: auto; }

.lucky-row-loss td { background: rgba(236,72,153,0.18); }
.table-wrap-compact thead th { min-width: 0; }

/* Kasa cash breakdown -- matches the literal Excel colors from the
   "CASH" sheet in 2026 time.xlsm (Excel's built-in Good/Neutral/Bad
   cell styles), not this app's own dark theme, since the point is to
   look like that sheet. */
.kasa-breakdown-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.kasa-breakdown-table td { padding: 4px 10px; }
.kasa-breakdown-table td:last-child { text-align: right; }
.kasa-row-open { background: #C6EFCE; color: #006100; }
.kasa-row-close { background: #FFC7CE; color: #9C0006; }
.kasa-row-opening-cash { background: #FFFFCC; color: #000; font-weight: 700; border-bottom: 2px solid #000; }
.kasa-row-closing-cash { background: #C6EFCE; color: #006100; font-weight: 700; }
.kasa-row-kind td:first-child { color: var(--text-dim); }
.kasa-row-clickable { cursor: pointer; }
.kasa-row-clickable:hover { filter: brightness(1.15); outline: 1px solid rgba(0,0,0,0.3); }
.kasa-row-disabled { opacity: 0.45; }
.kasa-operations-detail:not(:empty) {
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-2);
}

thead th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
thead th.sortable:hover { color: var(--text); background: var(--panel-2); }

.sortable-total {
  font-weight: 700;
  color: var(--accent);
  font-size: 13px;
  padding-bottom: 3px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.collapsible-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.collapsible-header:hover { color: var(--accent); }
.collapse-caret { font-size: 12px; color: var(--text-dim); width: 10px; display: inline-block; }

.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 140px;
}

.stat .label { color: var(--text-dim); font-size: 12px; margin-bottom: 4px; }
.stat .value { font-size: 22px; font-weight: 700; }

.pos { color: var(--good); }
.neg { color: var(--bad); }

.msg { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.msg.ok { background: rgba(63,185,80,0.15); color: var(--good); border: 1px solid rgba(63,185,80,0.4); }
.msg.err { background: rgba(248,81,73,0.15); color: var(--bad); border: 1px solid rgba(248,81,73,0.4); }

.panel.danger { border-color: rgba(248,81,73,0.5); background: rgba(248,81,73,0.06); }
.panel.danger h3 { color: var(--bad); }
button.danger { background: var(--bad); color: #fff; }
button.danger:hover { opacity: 0.85; }

.dropzone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  color: var(--text-dim);
  cursor: pointer;
}
.dropzone.drag { border-color: var(--accent); color: var(--text); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

form.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }

/* ---- Excel-style spreadsheet grid (Live Check / Live Check PLAYER / Daily) ---- */

.xl-sheet {
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #b7b7b7;
  border-radius: 4px;
  overflow: auto;
  max-height: 82vh;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
}

table.xl-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.xl-grid th, .xl-grid td {
  border-right: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
  padding: 3px 7px;
  white-space: nowrap;
  text-align: right;
  color: #1a1a1a;
}

.xl-grid td.left, .xl-grid th.left { text-align: left; }

/* Live Check / Live Check 2 / Live Check PLAYER / Live Check PLAYER 2 --
   these sheets run ~18-20 columns wide, which .xl-sheet's default
   overflow:auto handles with a horizontal scrollbar. This modifier (added
   only on those 4 tabs' own .xl-sheet element, not every renderXlSheet()
   caller -- e.g. Drop & GGR's 6-column "Daily" panel doesn't need it)
   forces every column to shrink and wrap instead, so the whole sheet
   fits the viewport width with no horizontal scrollbar at all. */
.xl-sheet-no-hscroll { overflow-x: hidden; }
.xl-sheet-no-hscroll table.xl-grid { table-layout: fixed; width: 100%; }
.xl-sheet-no-hscroll .xl-grid th, .xl-sheet-no-hscroll .xl-grid td {
  white-space: normal;
  word-break: break-word;
  padding: 2px 3px;
  font-size: 11px;
}

.xl-colhead {
  background: #f3f3f3;
  color: #5f6368;
  font-weight: 600;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 3;
  border-top: 1px solid #d4d4d4;
}

.xl-rownum {
  background: #f3f3f3;
  color: #5f6368;
  font-weight: 600;
  text-align: center;
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 28px;
}

.xl-corner {
  background: #f3f3f3;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 4;
}

.xl-header-row td, .xl-header-row th {
  background: #dbe7f6;
  font-weight: 700;
  color: #1a1a1a;
  text-align: center;
}

.xl-header-row.sub td, .xl-header-row.sub th {
  background: #eef3fa;
  font-weight: 600;
  font-size: 11px;
}

.xl-total-row td {
  background: #fdf0d5;
  font-weight: 700;
  border-top: 2px solid #d4a017;
  border-bottom: 2px solid #d4a017;
}
.xl-total-row .xl-rownum { background: #f7e1a1; }
.xl-total-row .xl-pos { color: #1e7e34; }
.xl-total-row .xl-neg { color: #c0392b; }

.xl-grid tbody tr.data-row:hover td:not(.xl-rownum) { background: #f5f9ff; }

.xl-grid .xl-pos { color: #1e7e34; }
.xl-grid .xl-neg { color: #c0392b; }
.xl-grid .xl-bold { font-weight: 700; }

/* Excel-accurate variants: source format is "#,##0.00_ ;[Red]-#,##0.00 "
   -- negatives red, positives plain black (no green). */
.xl-grid .xl-neg-only { color: #c0392b; }
.xl-grid .xl-subtotal { background: #f2f2f2; color: #fa7d00; font-weight: 700; }
.xl-grid .xl-alwaysred { color: #ff0000; }
.xl-header-row .xl-green-header { background: #92d050; color: #000; }
.xl-header-row.sub .xl-yellow-header { background: #ffff00; }

.xl-float-input {
  width: 68px;
  border: 1px solid #9fc5e8;
  padding: 1px 4px;
  font-size: 12px;
  text-align: right;
  background: #fffce8;
}

.xl-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.xl-columns-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.xl-col-check {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  cursor: pointer;
}
.xl-columns-panel button { margin-left: auto; }

.xl-colhead, .xl-rownum { cursor: pointer; }
.xl-colhead:hover, .xl-grid tbody tr.data-row:hover td.xl-rownum { background: #e2ecf7; }

.xl-col-selected { background: #d7e8fb !important; }
.xl-row-selected td, td.xl-row-selected { background: #d7e8fb !important; }
.xl-row-selected .xl-rownum { background: #a9c9ee !important; }
.xl-grid tbody td { cursor: cell; }
.xl-cell-selected { background: #ffe9a8 !important; outline: 2px solid #d9a400 !important; outline-offset: -2px; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.chart-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}
.chart-legend button { margin-left: auto; }
.chart-legend button + button { margin-left: 8px; }

.chart-wrap { overflow-x: auto; }
.chart-svg { display: block; }
.chart-grid-line { stroke: var(--border); stroke-width: 1; }
.chart-zero-line { stroke: var(--text-dim); stroke-width: 1.5; }
.chart-axis-label { fill: var(--text-dim); font-size: 11px; }
.chart-bar-count { font-size: 10px; font-weight: 600; }
.chart-bar-name { font-size: 9px; font-weight: 600; opacity: 0.85; }
.chart-bar-count-active { fill: var(--accent); }
.chart-bar-count-lucky { fill: var(--warn); }
.chart-bar { transition: opacity 0.1s; }
.chart-bar:hover { opacity: 0.75; }
.chart-line { transition: opacity 0.1s; }
.chart-dot { cursor: pointer; transition: r 0.1s; }
.chart-dot:hover { r: 6; }

.chart-tooltip {
  position: absolute;
  z-index: 1000;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  display: inline-block;
  width: max-content;
  max-width: min(90vw, 480px);
}
.chart-tooltip-title { font-weight: 600; margin-bottom: 4px; color: var(--accent); white-space: nowrap; }
.chart-tooltip-loading { color: var(--text-dim); margin-top: 4px; }
.chart-tooltip table { width: 100%; border-collapse: collapse; margin-top: 2px; }
.chart-tooltip td { padding: 1px 10px 1px 0; white-space: nowrap; }
.chart-tooltip td.right { text-align: right; padding-right: 0; padding-left: 10px; }
.chart-tooltip td.chart-tooltip-head { color: var(--text-dim); font-weight: 600; font-size: 11px; }
.chart-tooltip-highlight { color: var(--accent); font-weight: 600; }

.player-snapshot { min-width: 280px; }
.player-snapshot-title { font-weight: 600; color: var(--accent); margin-bottom: 8px; font-size: 13px; white-space: nowrap; }
.player-snapshot-bars { margin-bottom: 8px; }
.player-snapshot-bar-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font-size: 11px; }
.player-snapshot-bar-label { width: 112px; color: var(--text-dim); flex-shrink: 0; }
.player-snapshot-bar-track { flex: 1; height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; min-width: 60px; }
.player-snapshot-bar-fill { height: 100%; border-radius: 4px; }
.player-snapshot-bar-value { width: 74px; text-align: right; flex-shrink: 0; white-space: nowrap; }
.player-snapshot-bar-pct { width: 48px; text-align: right; flex-shrink: 0; white-space: nowrap; color: var(--text-dim); font-size: 11px; }

.player-discount-ratios { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.player-discount-ratio-box {
  flex: 1; background: var(--panel-2); border-radius: 6px; padding: 8px 10px;
  display: flex; flex-direction: row; align-items: center; gap: 14px;
}
.player-discount-ratio-figures { flex-shrink: 0; min-width: 100px; }
.player-discount-ratio-label { font-size: 11px; color: var(--text-dim); }
.player-discount-ratio-value { font-size: 18px; font-weight: 700; margin-top: 2px; }
.player-discount-ratio-sub { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.player-discount-ratio-explain {
  font-size: 10.5px; color: var(--text-dim); line-height: 1.4;
  padding-left: 14px; border-left: 1px solid var(--border);
}
.player-snapshot-lucky { display: flex; gap: 6px; }
.player-snapshot-lucky-box { flex: 1; background: var(--panel-2); border-radius: 6px; padding: 5px 8px; text-align: center; min-width: 72px; }
.player-snapshot-lucky-label { font-size: 10px; margin-bottom: 2px; white-space: nowrap; }
.player-snapshot-lucky-value { font-size: 13px; font-weight: 700; }

/* Player Card */
.player-card-identity { display: flex; align-items: center; gap: 22px; }
.player-card-avatar {
  width: 96px; height: 96px; border-radius: 14px; background: #14b8a6;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 26px; color: #05121f; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.player-card-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px;
}
.player-card-name { font-size: 26px; font-weight: 700; }
.player-card-sub { color: var(--text-dim); font-size: 14px; margin-top: 6px; }
.player-card-panel-title { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 4px; }

.player-report-photo { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; display: block; }

.player-link { cursor: pointer; color: var(--accent); text-decoration: underline dotted; text-underline-offset: 2px; }
.player-link:hover { text-decoration-style: solid; }

#content > div:fullscreen, #content > div.player-card-fullscreen {
  background: var(--bg); padding: 20px; overflow-y: auto; width: 100vw; height: 100vh;
}

.player-photo-tooltip { text-align: center; }
.player-photo-tooltip-img { width: 140px; height: 140px; border-radius: 8px; object-fit: cover; display: block; }
.player-photo-tooltip-empty { width: 140px; padding: 40px 0; color: var(--text-dim); }
.player-photo-tooltip-name { margin-top: 6px; font-weight: 600; }

.player-stat-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.player-stat-card {
  flex: 1; min-width: 170px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; position: relative; overflow: hidden;
}
.player-stat-card-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.player-stat-card-label { font-size: 12px; color: var(--text-dim); margin: 4px 0 6px; }
.player-stat-card-value { font-size: 22px; font-weight: 700; }
.player-stat-card-sub { font-size: 11px; color: var(--good); margin-top: 4px; }

.player-card-two-col { display: flex; gap: 16px; flex-wrap: wrap; }
.player-card-two-col > .panel { flex: 1; min-width: 320px; }

.player-share-row + .player-share-row { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.player-share-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }
.player-share-track { height: 10px; border-radius: 5px; background: var(--panel-2); overflow: hidden; margin: 8px 0; }
.player-share-fill { height: 100%; border-radius: 5px; }
.player-share-pct { font-size: 12px; color: var(--text-dim); }

.donut-center-value { fill: var(--text); font-size: 18px; font-weight: 700; }
.donut-center-value-sm { fill: var(--text); font-size: 13px; font-weight: 700; }
.donut-center-sub { fill: var(--text-dim); font-size: 10px; }

.player-status-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.player-status-badge.good { background: rgba(63,185,80,0.15); color: var(--good); border: 1px solid rgba(63,185,80,0.4); }
.player-status-badge.warn { background: rgba(210,153,34,0.15); color: var(--warn); border: 1px solid rgba(210,153,34,0.4); }
.player-status-badge.dim { background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border); }

.player-compare-section { margin-bottom: 28px; padding-top: 20px; border-top: 3px solid var(--accent); }
.player-compare-section:first-child { padding-top: 0; border-top: none; }
.player-compare-date-header {
  font-size: 20px; font-weight: 700; color: var(--accent); margin-bottom: 12px;
  background: var(--panel-2); border-radius: 8px; padding: 8px 14px; display: inline-block;
}

/* Side-by-side date columns (Player Card Compare) -- each column is a full
   Player Card dashboard for one date, laid out next to the others instead
   of stacked, so the same metric at the same height in two columns can be
   compared sideways. Panels that are normally two-across (Share of Period
   Total + Results by Table, Monthly Trend + Discount) collapse to one
   column per column here, since there usually isn't room for two more.
   min-width uses clamp() instead of a fixed px floor so 2-4 columns divide
   the actual window width evenly and fit without a horizontal scrollbar
   on ordinary screens -- overflow-x:auto on the wrapper is still there as
   a fallback for a genuinely narrow window or 4 columns at once. */
.player-compare-columns { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.player-compare-column { flex: 1 1 0; min-width: clamp(220px, 23vw, 340px); }
.player-compare-column .player-card-two-col { flex-direction: column; }
.player-compare-column .player-stat-cards { flex-direction: column; }
.player-compare-column .player-stat-card { min-width: 0; }
.player-compare-column .panel, .player-compare-section-row .panel { padding: 12px; margin-bottom: 12px; }

/* Compare Players mode -- one row per dashboard section instead of one
   column per player, so each player's version of the same section sits
   in the same flex row and stretches to match the tallest sibling
   (flexbox's default align-items:stretch), keeping every section "same
   level" across players regardless of how much content it holds. */
.player-compare-columns-rowmajor { flex-direction: column; overflow-x: visible; }
.player-compare-section-row { display: flex; gap: 12px; align-items: stretch; margin-bottom: 12px; }
.player-compare-section-row > * { flex: 1 1 0; min-width: clamp(200px, 22vw, 320px); display: flex; flex-direction: column; }
.player-compare-section-row .player-card-two-col { flex-direction: column; flex: 1; }
.player-compare-section-row .player-card-two-col > .panel { flex: 1; }
.player-compare-section-row .player-stat-cards { flex-direction: column; flex: 1; }
.player-compare-section-row .player-stat-card { min-width: 0; }
.player-compare-section-row .player-card-identity { flex: 1; }

/* The bigger photo/name (sized for the single-player Player Card tab) eats
   too much vertical room once there are 2-4 of these stacked side by side
   -- scale both back down specifically inside Compare. */
.player-compare-column .player-card-avatar, .player-compare-section-row .player-card-avatar {
  width: 56px; height: 56px; border-radius: 10px; font-size: 16px;
}
.player-compare-column .player-card-photo, .player-compare-section-row .player-card-photo { border-radius: 10px; }
.player-compare-column .player-card-name, .player-compare-section-row .player-card-name { font-size: 16px; }
.player-compare-column .player-card-sub, .player-compare-section-row .player-card-sub { font-size: 11px; margin-top: 3px; }

/* Live Table -- "Floor Array" theme, modeled on a reference dashboard the
   user shared (floor-array-2026-08-29-backup.html). Colors/typography are
   scoped under .fa-theme so nothing leaks into the rest of the app. The
   reference's draggable floating windows, day-by-day playback scrubber,
   and literal spatial cabinet positions aren't reproduced -- this app has
   its own load/refresh idiom, and no real floor-plan coordinates exist for
   any table (inventing some would be fabricated data, not a design call). */
.fa-theme {
  --fa-void:#05060E; --fa-hull:#0E1020; --fa-rule:#242844;
  --fa-plasma:#FF2D78; --fa-xenon:#FFC24B; --fa-cryo:#35F0C0; --fa-alert:#FF5C33;
  --fa-text:#E9E7F7; --fa-dim:#7E7BA0; --fa-faint:#4A4770;
  --fa-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fa-disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--fa-mono);
  background: var(--fa-void);
  color: var(--fa-text);
  border-radius: 4px;
  padding: 14px;
}
.fa-theme .fa-head {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--fa-rule); border-radius: 3px;
  background: linear-gradient(180deg, var(--fa-hull), rgba(14,16,32,.6));
  padding: 12px 16px; position: relative; overflow: hidden; margin-bottom: 12px;
}
.fa-theme .fa-head::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--fa-plasma), var(--fa-xenon));
}
.fa-theme .fa-lbl { font-size: 9px; letter-spacing: .16em; color: var(--fa-faint); text-transform: uppercase; }
.fa-theme .fa-title { font-family: var(--fa-disp); font-weight: 900; font-size: 19px; letter-spacing: -.01em; text-transform: uppercase; }
.fa-theme .fa-title em { font-style: normal; color: var(--fa-plasma); }
.fa-theme .fa-sub { font-size: 9.5px; letter-spacing: .26em; color: var(--fa-faint); text-transform: uppercase; display: block; margin-top: 2px; }
.fa-theme .fa-spacer { flex: 1; }
.fa-theme .fa-pulse { display: inline-flex; align-items: center; gap: 7px; font-size: 9px; letter-spacing: .2em; color: var(--fa-cryo); text-transform: uppercase; }
.fa-theme .fa-pulse i { width: 6px; height: 6px; border-radius: 50%; background: var(--fa-cryo); box-shadow: 0 0 10px var(--fa-cryo); animation: fa-bl 1.4s infinite; }
@keyframes fa-bl { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.fa-theme .fa-stamp { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.fa-theme .fa-stamp .fa-d { font-family: var(--fa-disp); font-weight: 800; font-size: 18px; }
.fa-theme .fa-stamp .fa-lbl { font-size: 9px; letter-spacing: .16em; color: var(--fa-faint); text-transform: uppercase; }

.fa-theme .fa-btn {
  font-family: var(--fa-mono); background: transparent; color: var(--fa-dim);
  border: 1px solid var(--fa-rule); border-radius: 2px; padding: 6px 10px;
  font-size: 10px; letter-spacing: .14em; cursor: pointer; text-transform: uppercase;
}
.fa-theme .fa-btn:hover { color: var(--fa-text); border-color: var(--fa-faint); background: rgba(255,255,255,.03); }

.fa-theme .fa-panel {
  border: 1px solid var(--fa-rule); border-radius: 3px;
  background: linear-gradient(180deg, var(--fa-hull), rgba(10,12,26,.75));
  margin-bottom: 12px; position: relative;
}
.fa-theme .fa-panel-head { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--fa-rule); }
.fa-theme .fa-tag { font-family: var(--fa-disp); font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.fa-theme .fa-note { margin-left: auto; font-size: 9px; letter-spacing: .14em; color: var(--fa-faint); text-transform: uppercase; }
.fa-theme .fa-body { padding: 10px 13px 13px; }
.fa-theme .fa-fullscreen-btn { flex-shrink: 0; }
.fa-theme .fa-panel:fullscreen, .fa-theme .fa-panel.fa-fullscreen {
  width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border: none; overflow-y: auto;
  background: var(--fa-void);
}
.fa-theme .fa-panel:fullscreen .fa-body, .fa-theme .fa-panel.fa-fullscreen .fa-body { padding: 16px 24px 28px; }
.fa-theme .fa-input {
  font-family: var(--fa-mono); background: rgba(255,255,255,.03); color: var(--fa-text);
  border: 1px solid var(--fa-rule); border-radius: 2px; padding: 6px 10px; font-size: 11px;
}
.fa-theme .fa-input:focus { outline: none; border-color: var(--fa-cryo); }
.fa-theme .fa-input::placeholder { color: var(--fa-faint); }
.fa-theme input.fa-input[type="date"] { color-scheme: dark; }

.fa-theme .fa-playback { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.fa-theme .fa-play-label { font-size: 9px; letter-spacing: .12em; color: var(--fa-dim); text-transform: uppercase; }
.fa-theme .fa-btn-stop { color: var(--fa-alert); border-color: var(--fa-alert); }
.fa-theme .fa-btn-stop:hover { background: rgba(255,92,51,.08); }
.fa-theme .fa-speed-group { display: flex; gap: 4px; }
.fa-theme .fa-speed-btn {
  font-family: var(--fa-mono); background: transparent; color: var(--fa-dim); border: 1px solid var(--fa-rule);
  border-radius: 2px; padding: 6px 9px; font-size: 10px; letter-spacing: .06em; cursor: pointer;
}
.fa-theme .fa-speed-btn:hover { color: var(--fa-text); border-color: var(--fa-faint); }
.fa-theme .fa-speed-btn.active { color: var(--fa-void); background: var(--fa-cryo); border-color: var(--fa-cryo); }
.fa-theme .fa-play-status { font-size: 9.5px; letter-spacing: .04em; color: var(--fa-dim); }

.fa-theme .fa-play-timeline-row { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.fa-theme .fa-play-time-label { font-size: 8.5px; color: var(--fa-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fa-theme .fa-play-timeline {
  position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06); cursor: pointer;
}
.fa-theme .fa-play-timeline-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 3px;
  background: linear-gradient(90deg, var(--fa-plasma), var(--fa-cryo));
}
.fa-theme .fa-play-timeline-cursor {
  position: absolute; top: 50%; left: 0%; width: 10px; height: 10px; border-radius: 50%;
  background: var(--fa-text); border: 2px solid var(--fa-cryo); box-shadow: 0 0 8px var(--fa-cryo);
  transform: translate(-50%, -50%); pointer-events: none;
}

.fa-theme .fa-corner { position: absolute; width: 7px; height: 7px; border: 1px solid var(--fa-plasma); opacity: .5; pointer-events: none; }
.fa-theme .fa-c1 { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.fa-theme .fa-c2 { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.fa-theme .fa-c3 { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.fa-theme .fa-c4 { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.fa-theme .fa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.fa-theme .fa-kpi { border: 1px solid var(--fa-rule); border-radius: 3px; background: linear-gradient(180deg, var(--fa-hull), rgba(10,12,26,.75)); padding: 9px 13px 11px; }
.fa-theme .fa-kpi .fa-v { font-family: var(--fa-disp); font-weight: 900; font-size: clamp(20px, 2.4vw, 30px); line-height: 1; }
.fa-theme .fa-kpi .fa-u { font-size: 10px; color: var(--fa-dim); margin-left: 3px; }
.fa-theme .fa-kpi.hold .fa-v { color: var(--fa-plasma); }
.fa-theme .fa-kpi.handle .fa-v { color: var(--fa-xenon); }
.fa-theme .fa-kpi.rounds .fa-v { color: var(--fa-cryo); }
.fa-theme .fa-kpi.rtp .fa-v { color: var(--fa-text); }

.fa-theme .fa-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fa-theme .fa-three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .fa-theme .fa-two-col, .fa-theme .fa-three-col { grid-template-columns: 1fr; } }

.fa-theme .fa-bars { display: flex; flex-direction: column; gap: 8px; }
.fa-theme .fa-bar-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 10.5px; }
.fa-theme .fa-bar-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-theme .fa-bar-n { font-weight: 600; color: var(--fa-text); }
.fa-theme .fa-bar-n.neg { color: var(--fa-alert); }
.fa-theme .fa-bar-n.pos { color: var(--fa-plasma); }
.fa-theme .fa-bar-track { grid-column: 1 / -1; height: 5px; background: rgba(255,255,255,.05); border-radius: 2px; overflow: hidden; }
.fa-theme .fa-bar-fill { height: 100%; border-radius: 2px; }
.fa-theme .fa-bar-fill.pos { background: var(--fa-plasma); }
.fa-theme .fa-bar-fill.neg { background: var(--fa-alert); }

.fa-theme .fa-board-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,.055); }
.fa-theme .fa-board-row:last-child { border-bottom: 0; }
.fa-theme .fa-rk { font-size: 9px; color: var(--fa-faint); letter-spacing: .1em; }
.fa-theme .fa-board-id { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-theme .fa-board-vv { font-size: 11.5px; font-weight: 600; color: var(--fa-plasma); }

.fa-theme .fa-timeline-track {
  display: flex; align-items: stretch; gap: 10px; overflow-x: auto; padding: 4px 2px 10px;
  scrollbar-width: thin;
}
.fa-theme .fa-play {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; min-width: 74px;
  padding: 8px 10px; border-radius: 4px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.fa-theme .fa-play::after {
  content: ""; position: absolute; top: 50%; left: 100%; width: 10px; height: 1px; background: rgba(255,255,255,.1);
}
.fa-theme .fa-play:last-child::after { display: none; }
.fa-theme .fa-play.fa-play-now { border-color: var(--fa-cryo); box-shadow: 0 0 12px -2px var(--fa-cryo); }
.fa-theme .fa-play-time { font-size: 8px; letter-spacing: .06em; color: var(--fa-faint); }
.fa-theme .fa-play-dot { width: 8px; height: 8px; border-radius: 50%; }
.fa-theme .fa-play-dot.pos { background: var(--fa-plasma); box-shadow: 0 0 8px var(--fa-plasma); }
.fa-theme .fa-play-dot.neg { background: var(--fa-alert); box-shadow: 0 0 8px var(--fa-alert); }
.fa-theme .fa-play-machine { font-size: 10px; font-weight: 600; color: var(--fa-text); white-space: nowrap; }
.fa-theme .fa-play-kind { font-size: 7.5px; letter-spacing: .05em; color: var(--fa-dim); white-space: nowrap; }
.fa-theme .fa-play-value { font-size: 10.5px; font-weight: 700; }
.fa-theme .fa-play-value.pos { color: var(--fa-plasma); }
.fa-theme .fa-play-value.neg { color: var(--fa-alert); }

.fa-theme .fa-log { display: flex; flex-direction: column; gap: 6px; font-size: 10px; }
.fa-theme .fa-ev { display: grid; grid-template-columns: 12px 1fr auto; gap: 9px; align-items: center; color: var(--fa-dim); }
.fa-theme .fa-ev b { color: var(--fa-text); font-weight: 500; }
.fa-theme .fa-ev .fa-k { font-size: 11px; line-height: 1; }
.fa-theme .fa-ev .fa-vv { font-weight: 600; }
.fa-theme .fa-ev .fa-vv.pos { color: var(--fa-plasma); }
.fa-theme .fa-ev .fa-vv.neg { color: var(--fa-alert); }

.fa-theme .fa-floor-wrap { position: relative; }
.fa-theme .fa-floor-popups { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fa-theme .fa-floor-plan {
  position: relative; width: 100%; border-radius: 6px; overflow: hidden;
  background-image: url("floorplan-slots.png"); background-size: 100% 100%; background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,.08); background-color: var(--fa-void);
}
.fa-theme .fa-op-popup {
  position: absolute; transform: translate(-50%, calc(-100% - 10px)) translateY(6px); min-width: 128px;
  display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 4px;
  background: rgba(5,6,14,.95); border: 1px solid var(--fa-cryo); box-shadow: 0 0 16px -2px rgba(53,240,192,.5);
  opacity: 0; transition: opacity .3s ease, transform .3s ease; text-align: left;
}
.fa-theme .fa-op-popup::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--fa-cryo);
}
.fa-theme .fa-op-popup.fa-op-popup-show { opacity: 1; transform: translate(-50%, calc(-100% - 10px)) translateY(0); }
.fa-theme .fa-op-popup-photo { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.fa-theme .fa-op-popup-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fa-theme .fa-op-popup-kind { font-size: 13px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.fa-theme .fa-op-popup-kind.pos { color: var(--fa-plasma); }
.fa-theme .fa-op-popup-kind.neg { color: var(--fa-alert); }
.fa-theme .fa-op-popup-player { font-size: 10px; color: var(--fa-text); white-space: nowrap; }
.fa-theme .fa-op-popup-table { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--fa-cryo); }

.fa-theme .fa-op-popup.fa-op-popup-big { min-width: 256px; padding: 14px 20px; gap: 14px; border-width: 2px; }
.fa-theme .fa-op-popup.fa-op-popup-big::after { border-width: 10px; }
.fa-theme .fa-op-popup.fa-op-popup-big .fa-op-popup-photo { width: 56px; height: 56px; border-radius: 6px; }
.fa-theme .fa-op-popup.fa-op-popup-big .fa-op-popup-kind { font-size: 26px; }
.fa-theme .fa-op-popup.fa-op-popup-big .fa-op-popup-player { font-size: 20px; }
.fa-theme .fa-op-popup.fa-op-popup-big .fa-op-popup-table { font-size: 18px; }
.fa-theme .fa-floor-plan .fa-table-shape { position: absolute; transform: translate(-50%, -50%); }
.fa-theme .fa-floor-plan .fa-table-shape:hover { transform: translate(-50%, -50%) scale(1.18); z-index: 2; }
.fa-theme .fa-floor-fallback { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.fa-theme .fa-table-shape {
  --fa-tcolor: var(--fa-faint);
  width: 52px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background: rgba(5,6,14,.72); border: 2px solid var(--fa-tcolor); box-shadow: 0 0 12px -2px var(--fa-tcolor);
  text-align: center; cursor: default; transition: transform .15s ease;
}
.fa-theme .fa-table-shape:hover { transform: scale(1.15); z-index: 2; }
.fa-theme .fa-table-shape .fa-table-name { font-size: 7.5px; letter-spacing: .02em; color: var(--fa-tcolor); }
.fa-theme .fa-table-shape .fa-table-value { font-size: 8.5px; font-weight: 700; color: var(--fa-tcolor); }

.fa-theme .fa-table-shape.fa-table-pulse { animation: fa-table-pulse 1.5s ease-out; }
@keyframes fa-table-pulse {
  0% { filter: drop-shadow(0 0 2px rgba(255,255,255,.3)) brightness(1); }
  30% { filter: drop-shadow(0 0 16px rgba(255,255,255,.95)) brightness(1.6); }
  100% { filter: drop-shadow(0 0 2px rgba(255,255,255,0)) brightness(1); }
}
.fa-theme .fa-table-shape.fa-table-watched {
  outline: 2px solid var(--fa-cryo); outline-offset: 2px;
  animation: fa-watch-ring 1.8s ease-in-out infinite;
}
@keyframes fa-watch-ring {
  0%, 100% { outline-color: var(--fa-cryo); }
  50% { outline-color: rgba(53,240,192,.35); }
}
.fa-theme .fa-legend { display: flex; gap: 14px; align-items: center; padding: 10px 2px 0; flex-wrap: wrap; }
.fa-theme .fa-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: .14em; color: var(--fa-dim); text-transform: uppercase; }
.fa-theme .fa-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.fa-theme .fa-ramp { flex: 1; min-width: 150px; height: 8px; border-radius: 2px;
  background: linear-gradient(90deg,#7C0000 0%,#D61414 17%,#FF5C5C 33%,#FFD6D6 48%,#3A3D57 50%,#D6FFD6 52%,#6EFF6E 67%,#1AE01A 83%,#00FF00 100%); }
.fa-theme .fa-hint { padding: 10px 2px 0; font-size: 9px; letter-spacing: .1em; color: var(--fa-faint); text-transform: uppercase; line-height: 1.7; }

.fa-theme .fa-flow { display: flex; flex-direction: column; gap: 9px; }
.fa-theme .fa-chan-hd { display: flex; justify-content: space-between; align-items: baseline; }
.fa-theme .fa-chan-hd b { font-size: 12px; font-weight: 600; }
.fa-theme .fa-stack { display: flex; height: 11px; border-radius: 2px; overflow: hidden; background: rgba(255,255,255,.04); }
.fa-theme .fa-stack div { height: 100%; }
.fa-theme .fa-keys { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.fa-theme .fa-keys span { display: inline-flex; align-items: center; gap: 5px; font-size: 8.5px; letter-spacing: .13em; color: var(--fa-dim); text-transform: uppercase; }
.fa-theme .fa-keys i { width: 7px; height: 7px; border-radius: 1px; }
.fa-theme .fa-net { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed rgba(255,255,255,.08); padding-top: 8px; }
.fa-theme .fa-net b { font-family: var(--fa-disp); font-weight: 800; font-size: 15px; color: var(--fa-plasma); }
.fa-theme .fa-net b.neg { color: var(--fa-alert); }

.fa-theme .fa-recs { display: flex; flex-direction: column; }
.fa-theme .fa-rec { display: grid; grid-template-columns: 1fr auto; gap: 1px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.055); }
.fa-theme .fa-rec:last-child { border-bottom: 0; }
.fa-theme .fa-rec .fa-k { grid-column: 1 / -1; font-size: 8.5px; letter-spacing: .2em; color: var(--fa-faint); text-transform: uppercase; }
.fa-theme .fa-rec .fa-w { font-size: 10.5px; color: var(--fa-text); }
.fa-theme .fa-rec .fa-w s { text-decoration: none; color: var(--fa-faint); font-size: 9px; margin-left: 6px; }
.fa-theme .fa-rec .fa-v { font-family: var(--fa-disp); font-weight: 800; font-size: 14px; color: var(--fa-plasma); }
.fa-theme .fa-rec .fa-v.neg { color: var(--fa-alert); }
.fa-theme .fa-rec .fa-v.cool { color: var(--fa-cryo); }
.fa-theme .fa-rec .fa-v.warm { color: var(--fa-xenon); }

.fa-theme .fa-footer { padding: 4px 2px 0; font-size: 9px; letter-spacing: .12em; color: var(--fa-faint); text-transform: uppercase; display: flex; gap: 16px; flex-wrap: wrap; }
.fa-theme .fa-empty { color: var(--fa-faint); font-size: 10px; letter-spacing: .08em; padding: 6px 0; }

/* ---- Mobile / phone layout ---- */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; }

  .topbar { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px; }
  .topbar h1 { font-size: 16px; }
  #tabs { gap: 6px; min-width: 0; }
  #section-switcher, #tab-row {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  #section-switcher::-webkit-scrollbar, #tab-row::-webkit-scrollbar { display: none; }
  .section-btn { flex: 0 0 auto; padding: 8px 12px; font-size: 12px; }
  #tabs a { flex: 0 0 auto; padding: 9px 12px; font-size: 14px; white-space: nowrap; }

  #content { padding: 10px; }
  h2 { font-size: 17px; }
  .panel { padding: 10px; margin-bottom: 10px; border-radius: 8px; }

  /* Touch-friendly controls; 16px inputs stop iOS zooming on focus */
  input, select { font-size: 16px; padding: 9px 10px; min-height: 40px; max-width: 100%; }
  button { min-height: 40px; padding: 9px 14px; }
  .row, form.inline-form { gap: 8px; }
  .row > *, form.inline-form > * { flex: 1 1 140px; min-width: 0; }
  .row > button, form.inline-form > button { flex: 1 1 auto; }

  .stat-row { gap: 8px; }
  .stat { flex: 1 1 calc(50% - 8px); min-width: 0; padding: 10px; }
  .stat .value { font-size: 18px; }

  /* Plain tables: scroll sideways inside their wrapper, first column stays visible */
  .table-wrap, .table-wrap-no-hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-height: 70vh; }
  .table-wrap-no-hscroll table { table-layout: auto; }
  .table-wrap-no-hscroll th, .table-wrap-no-hscroll td { white-space: nowrap; }
  table { font-size: 12px; }
  th, td { padding: 6px 7px; }
  thead th { min-width: 70px; }
  .table-wrap td:first-child, .table-wrap th:first-child {
    position: sticky; left: 0; background: var(--panel); z-index: 2;
  }

  /* Excel-style sheets: keep readable size and swipe horizontally */
  .xl-sheet, .xl-sheet-no-hscroll { overflow: auto; -webkit-overflow-scrolling: touch; max-height: 75vh; }
  .xl-sheet-no-hscroll table.xl-grid { table-layout: auto; width: max-content; min-width: 100%; }
  .xl-sheet-no-hscroll .xl-grid th, .xl-sheet-no-hscroll .xl-grid td {
    white-space: nowrap; font-size: 12px; padding: 4px 6px;
  }
  .xl-toolbar { flex-wrap: wrap; gap: 6px; }
  .xl-columns-panel { max-width: 100%; }

  .chart-wrap { -webkit-overflow-scrolling: touch; }
  .chart-legend { flex-wrap: wrap; }

  /* Player card */
  .player-card-identity { flex-direction: column; text-align: center; gap: 10px; }
  .player-card-name { font-size: 20px; }
  .player-card-two-col > .panel, .player-snapshot { min-width: 0; flex: 1 1 100%; }
  .player-stat-card { min-width: 0; flex: 1 1 calc(50% - 12px); }
  .player-stat-card-value { font-size: 18px; }
  .player-compare-columns, .player-compare-section-row { flex-direction: column; overflow-x: visible; }
  .player-compare-column, .player-compare-section-row > * { min-width: 0; width: 100%; }
  .player-snapshot-bar-label { width: 84px; }
  .player-snapshot-bar-value { width: 64px; }
  .player-discount-ratios { flex-direction: column; }

  .dropzone { padding: 18px 10px; }
  .chart-tooltip { max-width: 90vw; }
  .fa-theme .fa-kpis { grid-template-columns: repeat(2, 1fr); }
  .fa-theme .fa-head { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 400px) {
  .stat { flex-basis: 100%; }
  .player-stat-card { flex-basis: 100%; }
}

/* Green explanatory notes can be hidden from the top bar button */
body.hide-notes .msg.note { display: none; }
#notes-toggle { margin-left: auto; white-space: nowrap; }
@media (max-width: 760px) { #notes-toggle { margin-left: 0; } }

#notes-toggle + button { white-space: nowrap; }

/* Column names wrap onto several lines (Report by Player) */
.table-wrap-wrap-headers thead th, .table-wrap-wrap-headers thead th.sortable { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; vertical-align: bottom; }

/* Totals row sits on one line; the wrapped column names hang below it */
.table-wrap-wrap-headers thead th, .table-wrap-wrap-headers thead th.sortable { vertical-align: top; }
.table-wrap-wrap-headers thead th:not(:has(.sortable-total)) { vertical-align: bottom; }
.sortable-total.pos { color: var(--good); }
.sortable-total.neg { color: var(--bad); }

/* Report by Player chart: month letters over the line */
.sparkline { position: relative; }
.sparkline-month { position: absolute; top: -1px; transform: translateX(-50%); font-size: 9px; font-weight: 700; line-height: 1; color: #ff69b4; pointer-events: none; }

/* Refresh / Stop next to the section buttons */
.nav-action-btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.nav-action-btn.refresh { margin-left: 10px; }
.nav-action-btn.stop { color: var(--bad); }
.nav-action-btn:hover { border-color: var(--accent); }
@media (max-width: 760px) { .nav-action-btn { flex: 0 0 auto; padding: 8px 10px; font-size: 12px; } }

/* "Cannot reach the server" bar (above the login screen too) */
.server-problem-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 16px; background: #3a1214; border-top: 2px solid var(--bad); color: var(--text);
  font-size: 14px;
}
.server-problem-bar span { flex: 1 1 260px; }

/* Tab switched away from: not drawn, but its layout is kept so coming back is instant */
.tab-hidden { content-visibility: hidden; contain-intrinsic-size: 0 0; }
.msg.warn { background: rgba(210,153,34,0.15); color: var(--warn); border: 1px solid rgba(210,153,34,0.45); }

/* Casino daily report: tables / live / slot side by side, wrapping on small screens */
.daily-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.daily-grid > .daily-panel { flex: 1 1 320px; }
.daily-grid > .daily-panel:nth-child(2) { flex: 3 1 560px; }
.daily-panel h4 { margin: 12px 0 4px; font-size: 13px; color: var(--text-dim); }
tr.daily-total td { font-weight: 700; border-top: 2px solid var(--border); }
tr.daily-after td { border-bottom: none; font-weight: 600; color: var(--text-dim); }
tr.daily-after td.neg { color: var(--bad); }
tr.daily-after td { text-align: right; white-space: nowrap; }

/* Slot Acc: always fits the window -- fixed layout, wrapping headers, no sideways scroll */
.slot-acc-table { overflow-x: hidden; }
.slot-acc-table table { table-layout: fixed; width: 100%; }
.slot-acc-table th, .slot-acc-table td { white-space: normal; overflow-wrap: anywhere; padding: 3px 4px; }
.slot-acc-table thead th { min-width: 0; font-size: 11px; line-height: 1.2; vertical-align: bottom; }
.slot-acc-table .sortable-total { font-size: 11px; }
.slot-acc-tight th, .slot-acc-tight td, .slot-acc-tight .sortable-total { font-size: 10px; padding: 2px 2px; }

/* Slot Acc column chooser */
.slot-acc-columns summary { cursor: pointer; font-weight: 600; }
.slot-acc-column-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.slot-acc-column-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.slot-acc-column-head a { color: var(--accent); font-size: 12px; }
.slot-acc-column-item { display: block; font-size: 13px; color: var(--text); margin: 2px 0; cursor: pointer; }

/* Narrow Slot Acc columns: header names written vertically so they stay readable */
/* column names wrap onto several lines (no vertical text) */
.slot-acc-table thead th > div:last-child { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
/* totals all on one line at the top, wrapped names below */
.slot-acc-table thead th { text-align: center; vertical-align: top; }
.slot-acc-table thead th[data-col="local_number"], .slot-acc-table thead th[data-col="alias"],
.slot-acc-table thead th[data-col="cabinet"], .slot-acc-table thead th[data-col="note"] { text-align: left; }
.slot-acc-tight td { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.slot-acc-tight .sortable-total { white-space: nowrap; overflow: hidden; }

/* Top bar wraps instead of pushing the page sideways on narrower windows */
.topbar { flex-wrap: wrap; row-gap: 8px; }
#tabs { min-width: 0; flex: 1 1 520px; }
.slot-acc-tight .sortable-total { font-size: 9px; letter-spacing: -0.2px; }

/* Slot Acc Note: Active (played) green, Inactive (not played) red */
.slot-acc-table td.slot-note { font-weight: 700; }
td.slot-active, .badge.slot-active { color: var(--good); }
td.slot-inactive, .badge.slot-inactive { color: var(--bad); }
.slot-note-total div { white-space: nowrap; line-height: 1.25; }
.slot-note-total .slot-active { color: var(--good); }
.slot-note-total .slot-inactive { color: var(--bad); }
.slot-groups table th { white-space: normal; overflow-wrap: normal; word-break: normal; }
.slot-groups table td { white-space: nowrap; overflow-wrap: normal; word-break: normal; font-size: 12px; padding: 4px 4px; }
/* columns sized to their numbers (headers wrap), so long totals never run into each other */
.slot-groups .table-wrap-no-hscroll table { table-layout: auto; width: 100%; }
.slot-groups table td + td, .slot-groups table th + th { padding-left: 10px; }
.badge.slot-usd { color: var(--accent); font-weight: 700; }

/* Slot Acc text columns keep fixed widths whichever of Alias / Cabinet / Note are shown */
.slot-acc-table thead th[data-col="cabinet"] { width: 70px; }
.slot-acc-table td.slot-cabinet { font-size: 11px; }
.slot-acc-table thead th[data-col="local_number"] { width: 56px; }
.slot-acc-table thead th[data-col="alias"] { width: 130px; }
.slot-acc-table thead th[data-col="note"] { width: 62px; }

/* Auto-hide top bar */
.topbar { transition: transform 0.25s ease; }
body.topbar-autohide .topbar.topbar-hidden { transform: translateY(-100%); box-shadow: none; }
#autohide-toggle { white-space: nowrap; }

/* Phone top bar: title + small buttons on one row, sections / tabs below,
   nothing wider than the screen (a too-wide row zoomed the whole page out) */
@media (max-width: 760px) {
  .topbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .topbar h1 { flex: 1 1 auto; font-size: 15px; margin-right: 4px; }
  .topbar > button { flex: 0 0 auto; width: auto; min-height: 30px; padding: 5px 9px; font-size: 12px; margin-left: 0; }
  #tabs { order: 10; flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; }
  #section-switcher, #tab-row { min-width: 0; max-width: 100%; }
  .nav-action-btn.refresh { margin-left: 4px; }
}

/* Never wider than the screen: daily report panels shrink, System tables wrap long addresses */
.daily-grid > .daily-panel { min-width: 0; }
table.sys-table { width: 100%; table-layout: fixed; }
table.sys-table td, table.sys-table th { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .daily-grid > .daily-panel, .daily-grid > .daily-panel:nth-child(2) { flex: 1 1 100%; }
  table.sys-table td[style*="min-width"] { min-width: 0 !important; }
}

/* Slot Acc meter resets */
.slot-resets h3 { font-size: 15px; }
.slot-reset-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 8px;
  border-left: 3px solid var(--warn); background: rgba(210,153,34,0.08); margin: 4px 0; font-size: 13px; }
.slot-reset-line.done { border-left-color: var(--good); background: rgba(63,185,80,0.08); }
.slot-reset-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.slot-reset-box { width: min(760px, 100%); max-height: 90vh; display: flex; flex-direction: column; margin: 0; }
.slot-reset-scroll { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.slot-reset-table td, .slot-reset-table th { padding: 3px 6px; font-size: 12px; }
.slot-reset-table tr.dropped td { color: var(--warn); }
.slot-reset-all { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; font-size: 13px; cursor: pointer; }
.slot-reset-all input { flex: 0 0 auto; width: auto; margin-top: 2px; }
.slot-reset-mode { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.slot-reset-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; min-width: 0; }
.slot-reset-field label { font-size: 12px; color: var(--text-dim); }
.slot-reset-field input, .slot-reset-field select { width: 100%; max-width: 360px; }
.slot-reset-hint { font-size: 11px; color: var(--text-dim); }
.slot-reset-row { display: flex; gap: 12px; flex-wrap: wrap; }
.slot-reset-row > .slot-reset-field { flex: 1 1 160px; }
.slot-groups-small table td, .slot-groups-small table th { font-size: 11px; }
.slot-groups-small table td + td, .slot-groups-small table th + th { padding-left: 5px; }
.slot-share { font-size: 10px; font-weight: 400; color: var(--text-dim); line-height: 1.1; }
.stat-share { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
/* Slot NGM: wrapped headers so all columns fit the window */
.slot-ngm-table thead th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
.slot-ngm-table td:nth-child(2), .slot-ngm-table th:nth-child(2) { white-space: normal; min-width: 150px; text-align: left; }
.slot-ngm-n { color: var(--text-dim); width: 1%; }
@media (min-width: 761px) and (max-width: 1250px) {
  .slot-ngm-table th, .slot-ngm-table td { font-size: 11px; padding: 4px 4px; }
  .slot-ngm-table td:nth-child(2), .slot-ngm-table th:nth-child(2) { min-width: 110px; }
}
.slot-ngm-table th[data-col=vendor] { text-align: left; }