/* Back office (web/backoffice.js). Uses the tokens from styles.css: --bg, --bg-2, --bg-3, --line, --text,
   --muted, --gold (the electric-blue accent), --pink, --green, --red, and the shared .card-box, .pill and
   table.list components. Numbers are right-aligned with tabular figures. */
.bo-root { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bo-root h1 { margin: 0; font-size: 26px; }
.bo-root h3 { margin: 0 0 10px; }
.bo-root p { margin: 0 0 8px; }
.bo-dim { color: var(--dim, var(--muted)); font-weight: 400; }
.bo-pos { color: var(--green); }
.bo-neg { color: var(--red); }
.bo-sub-line { font-size: 13px; margin-top: 2px; }
.bo-help { font-size: 13px; }
.bo-warn { background: rgba(255, 61, 154, .1); border: 1px solid rgba(255, 61, 154, .4); color: var(--text); padding: 10px 12px; border-radius: var(--r-md, 12px); font-size: 13px; }

/* header and toolbar */
.bo-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bo-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bo-link-btn { display: inline-block; padding: 5px 11px; font-size: 13px; font-weight: 600; border-radius: var(--r-sm, 8px); border: 1px solid var(--gold); color: var(--gold-2, var(--gold)); }
.bo-link-btn:hover { text-decoration: none; background: rgba(47, 140, 255, .12); }
.bo-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bo-search { flex: 1 1 260px; max-width: 440px; width: auto; }
.bo-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bo-chip { padding: 5px 12px; font-size: 13px; border-radius: var(--r-pill, 999px); background: var(--bg-3); color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.bo-chip.on { background: rgba(47, 140, 255, .18); color: var(--text); border-color: var(--gold); }
.bo-count { font-size: 13px; margin-left: auto; font-variant-numeric: tabular-nums; }

/* summary tiles */
.bo-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.bo-tile { background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--r-md, 12px); padding: 10px 12px; min-width: 0; }
.bo-tile .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.bo-tile .v { font-size: 20px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bo-tile .s { font-size: 12px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* the big table: sticky header, sticky first column, scrolls both ways inside its card */
.bo-table-wrap { padding: 0; overflow: auto; max-height: calc(100vh - 150px); min-height: 220px; transition: opacity 180ms; }
.bo-table-wrap.busy { opacity: .6; }
table.bo-table { font-size: 13px; white-space: nowrap; border-collapse: separate; border-spacing: 0; }
table.bo-table th, table.bo-table td { padding: 7px 10px; }
table.bo-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-3); cursor: pointer; user-select: none; -webkit-user-select: none; }
table.bo-table thead th:hover, table.bo-table thead th.sorted { color: var(--text); }
table.bo-table th.num, table.bo-table td.num, table.bo-sub th.num, table.bo-sub td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.bo-table th:first-child, table.bo-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-2); box-shadow: 1px 0 0 var(--line); }
table.bo-table thead th:first-child { z-index: 3; background: var(--bg-3); }
table.bo-table tbody tr { cursor: pointer; }
table.bo-table tbody tr:hover td:first-child, table.bo-table tbody tr:focus-visible td:first-child { background: var(--bg-3); }
table.bo-table tbody tr:focus-visible { outline: none; }
table.bo-table tbody tr:focus-visible td { background: rgba(47, 140, 255, .1); }
table.bo-table tr.bo-susp td { opacity: .62; }
table.bo-table tr.bo-susp td:first-child { opacity: 1; }
.bo-th { display: inline-flex; align-items: center; gap: 5px; }
.bo-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid transparent; }
th.sorted.desc .bo-arrow { border-top-color: var(--gold); }
th.sorted.asc .bo-arrow { border-top: 0; border-bottom: 5px solid var(--gold); }
.bo-player { display: flex; align-items: center; gap: 8px; }
.bo-who { line-height: 1.25; }
.bo-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.bo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(61, 220, 132, .7); display: inline-block; flex-shrink: 0; }
.bo-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid transparent; background: var(--bg-3); display: inline-block; flex-shrink: 0; }
.bo-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bo-av.big { width: 60px; height: 60px; border-width: 3px; }
.bo-empty { padding: 22px 14px; color: var(--muted); text-align: left; white-space: normal; }
.bo-pager { display: flex; gap: 12px; align-items: center; justify-content: center; font-size: 13px; font-variant-numeric: tabular-nums; }

/* one player */
.bo-detail-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.bo-ident { display: flex; gap: 12px; align-items: center; flex: 1 1 280px; min-width: 0; }
.bo-ident h1 { overflow-wrap: anywhere; }
.bo-pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 2px; }
.bo-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.bo-tabs button { background: transparent; border-radius: var(--r-sm, 8px) var(--r-sm, 8px) 0 0; color: var(--muted); padding: 9px 16px; box-shadow: none; white-space: nowrap; }
.bo-tabs button.active { color: var(--text); background: var(--bg-3); box-shadow: inset 0 -2px 0 var(--gold); }
.bo-cnt { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill, 999px); background: rgba(255, 61, 154, .18); color: var(--pink-2, var(--pink)); font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; }
#bo-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bo-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: start; }
.bo-card { min-width: 0; }
.bo-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 16px; margin: 0; font-size: 14px; }
.bo-dl dt { color: var(--muted); }
.bo-dl dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bo-row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.bo-label { margin-top: 0; }
.bo-note textarea { min-height: 120px; resize: vertical; }
.bo-form { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.bo-form .bo-span { grid-column: 1 / -1; }
.bo-form .bo-row-actions { margin-top: 2px; }
.bo-confirm { font-size: 14px; }
.bo-confirm p { margin: 0 0 8px; }

/* tables inside cards (ledger, sessions, chat, location checks) */
.bo-scroll { overflow: auto; max-height: 560px; margin: 0 -16px -16px; border-top: 1px solid var(--line); }
table.bo-sub { font-size: 13px; white-space: nowrap; }
table.bo-sub th, table.bo-sub td { padding: 7px 12px; }
table.bo-sub thead th { position: sticky; top: 0; background: var(--bg-3); z-index: 1; }
table.bo-sub td.bo-wrap { white-space: normal; overflow-wrap: anywhere; min-width: 180px; max-width: 560px; }
.bo-card > .bo-empty { padding: 4px 0 2px; }
.bo-chat { padding: 0; overflow: hidden; }
.bo-chat .bo-scroll { margin: 0; border-top: 0; max-height: calc(100vh - 260px); min-height: 200px; }
.bo-chat > .bo-empty { padding: 22px 16px; }
.bo-msg { color: var(--text); }
.bo-more { display: flex; justify-content: center; }
.bo-linklike { background: transparent; box-shadow: none; padding: 0; color: var(--gold-2, var(--gold)); font-weight: 600; border-radius: 4px; }
.bo-linklike:hover { text-decoration: underline; filter: none; }

/* time by game */
.bo-bars { display: flex; flex-direction: column; gap: 8px; }
.bo-bar-row { display: grid; grid-template-columns: minmax(110px, 170px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.bo-bar-row .num { font-variant-numeric: tabular-nums; text-align: right; min-width: 64px; }
.bo-bar { height: 10px; border-radius: var(--r-pill, 999px); background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.bo-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--pink)); }

@media (max-width: 720px) {
  .bo-root h1 { font-size: 22px; }
  .bo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-tile .v { font-size: 17px; }
  .bo-search { max-width: none; flex-basis: 100%; }
  .bo-count { margin-left: 0; }
  .bo-table-wrap { max-height: 70vh; }
  table.bo-table th:first-child, table.bo-table td:first-child { position: static; box-shadow: none; }
  table.bo-table thead th:first-child { position: sticky; }
  .bo-grid { grid-template-columns: minmax(0, 1fr); }
  .bo-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bo-dl dd { margin-bottom: 8px; }
  .bo-bar-row { grid-template-columns: minmax(90px, 120px) 1fr auto; }
}