/* Shared page composition. Tabler supplies components; these rules arrange our views. */
:root, [data-bs-theme="dark"] {
  --tblr-body-bg: #101827;
  --tblr-bg-surface: #182433;
  --tblr-bg-surface-secondary: #1e2e42;
  --tblr-bg-surface-tertiary: #1e2e42;
  --tblr-bg-forms: #121d2d;
  --tblr-border-color: #2b3c52;
  --tblr-border-color-translucent: #2b3c52;
  --tblr-body-color: #e9eef5;
  --tblr-secondary-color: #95a5ba;
  --bg: var(--tblr-body-bg);
  --surface: var(--tblr-bg-surface);
  --surface-2: var(--tblr-bg-surface-secondary);
  --border: var(--tblr-border-color);
  --text: var(--tblr-body-color);
  --muted: var(--tblr-secondary-color);
}
.ui-page .topbar { background: #152133; border-bottom-color: var(--border); }
.ui-page .topbar-inner { max-width: 1740px; padding-inline: 24px; gap: 18px; }
.ui-page .site-nav .nav-link { gap: 7px; padding: 10px 9px; border-radius: 6px; min-height: 42px; }
.ui-page .site-nav .nav-link.active { background: rgba(242,169,0,.12); color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.nav-link-icon { display: inline-flex; width: 18px; height: 18px; flex: none; opacity: .85; }
.nav-link-icon svg { width: 100%; height: 100%; }
.ui-page main { padding-top: 24px; }
.ui-page-header { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 14px; margin: 0 0 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.ui-page-header > div { flex: 1; width: auto; min-width: 0; }
.ui-page-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid rgba(242,169,0,.24); border-radius: 12px; background: rgba(242,169,0,.08); color: var(--accent); }
.ui-page-icon svg { width: 26px; height: 26px; }
.ui-page-header .page-pretitle { font-size: 11px; letter-spacing: .06em; color: var(--muted); margin-bottom: 5px; }
.ui-page-header .page-title { font-size: 26px; line-height: 1.3; font-weight: 700; margin: 0; }
.ui-page-description { color: var(--muted); font-size: 13px; margin: 6px 0 0; word-break: keep-all; }
.ui-page .card { box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.ui-page .card-header { padding: 18px 22px; gap: 12px; align-items: center; flex-wrap: wrap; background: rgba(255,255,255,.015); }
.ui-page .card-header .card-title, .ui-page .card-header h2 { margin: 0; font-size: 16px; font-weight: 650; }
.ui-page .card-header > .muted { margin-left: auto; font-size: 12px; }
.ui-page .card-body { padding: 22px; }
.ui-page .stat { position: relative; overflow: hidden; border-top: 0; padding: 22px; }
.ui-page .stat::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 0; width: 3px; background: #6884a6; border-radius: 0 3px 3px 0; }
.ui-page .stat.accent::before, .ui-page .ui-status-pending::before { background: var(--accent); }
.ui-page .ui-status-approved::before { background: var(--ok); }
.ui-page .ui-status-rejected::before { background: var(--danger); }
.ui-page .stat .value { font-size: 30px; letter-spacing: -.025em; line-height: 1.2; margin-top: 10px; }
.ui-page .stat .value.sm { font-size: 22px; }
.ui-page .stat .sub { margin-top: 10px; }
.ui-page .grid-4 { gap: 16px; }
.ui-page .table > thead > tr > th { background-color: #1c2b3e; padding-block: 12px; }
/* Apply the same alignment to a column title and its values, after page table styles. */
.ui-page table :is(th, td) { text-align: left; }
.ui-page table :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-page table :is(th, td).cell-center, .ui-page table th.group { text-align: center; }
.ui-page td.cell-center > .form-row { justify-content: center; }
.ui-page td.num .bar-cell > span:last-child { text-align: right; }
.ui-page .table:not(.ptable) > tbody > tr:nth-child(even) > td { background-color: rgba(255,255,255,.012); }
.ui-page .table:not(.ptable) > tbody > tr:hover > td { background-color: rgba(242,169,0,.04); }
.ui-page .table > :not(caption) > * > * { padding: 12px 16px; }
.ui-page .table-wrap { border-radius: 0; }
.ui-table-card.card { padding: 0; overflow: hidden; }
.ui-table-card > .panel-head { margin-bottom: 0; }
.ui-table-card > .table-wrap { padding: 0; }
.ui-filter-toolbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: end; gap: 16px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.08); margin: 0; }
.ui-filter-toolbar.predict-filters .field-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }
.ui-filter-toolbar .field-label { font-size: 11px; font-weight: 600; color: var(--muted); }
.ui-filter-toolbar .form-select, .ui-filter-toolbar .form-control { min-height: 36px; }
.ui-filter-toolbar .pb-check { min-height: 36px; margin-left: auto; }
.ui-table-card .clan-add { margin: 0; max-width: none; padding: 16px 22px; border-top: 1px solid var(--border); background: rgba(0,0,0,.06); }
.ui-table-card .clan-add input { max-width: 460px; }
.ui-search-card.card { display: flex; flex-direction: row; padding: 16px; max-width: 700px; gap: 10px; border-color: #3b4b61; }
.ui-member-stats.users-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 20px 0; }
.ui-member-stats .value small { font-size: 13px; }
.ui-usage-card.card { padding: 0; }
.ui-usage-card .usage-head { margin: 0; }
.ui-usage-card .usage-meters { padding: 20px 22px; margin: 0; }
.ui-usage-card .usage-details { margin: 0; padding: 0 22px 20px; }

/* Low-impact reference pages use Tabler's header/body card structure. */
.ui-info_page .info-card.card { padding: 0; }
.ui-info_page .info-card .card-title { display: flex; gap: 6px 12px; align-items: baseline; flex-wrap: wrap; }
.ui-info_page .info-card .card-title .muted { font-size: 12px; font-weight: 400; }
.ui-page .info-side { width: 250px; background: #152133; }
.ui-page .side-inner { padding: 24px 18px; }
.ui-page .info-toc .ms-title, .ui-page .api-toc .ms-title { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.ui-page .info-toc a { border-radius: 6px; padding-block: 9px; }
.ui-page .api-toc .toc-head { border: 1px solid var(--border); background: var(--surface); margin-top: 8px; }
.ui-page .api-toc .toc-group.sub .toc-head { background: none; border: 0; }
.ui-api_page .api-cat { padding: 20px; border-radius: 12px; background: var(--surface); border-top: 2px solid rgba(242,169,0,.6); }
.ui-api_page .api-cat small b { font-size: 24px; }
.ui-api_page .api-cat strong { margin-top: 10px; }
.ui-api_page .api-cat em { font-style: normal; }
.ui-api_page .api-panel > .card { padding: 22px; }
.ui-api_page .api-panel > .card > h2, .ui-api_page .api-panel > .card > .ref-head { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.ui-api_page .ref-filter { border-radius: 7px; background: #111c2b; padding: 4px; }
.ui-api_page .ref-filter button { border-radius: 5px; }
.ui-api_page .ref-filter button.on { color: var(--accent); background: var(--surface-2); }
.ui-page .notice { background: rgba(242,169,0,.05); }
.ui-page .badge { border-radius: 5px; padding: 4px 8px; background: rgba(149,165,186,.08); }
.ui-page .badge.ok { background: rgba(63,185,80,.1); }
.ui-page .badge.running { background: rgba(242,169,0,.1); }
.ui-page .badge.danger { background: rgba(248,81,73,.1); }

/* Keep viewport-sized maps; page headings are compact in these working views. */
.ui-zone_page .ui-page-header, .ui-heatmap_page .ui-page-header { margin-bottom: 16px; padding-bottom: 12px; }
.ui-zone_page .ui-page-icon, .ui-heatmap_page .ui-page-icon { width: 36px; height: 36px; border-radius: 9px; }
.ui-zone_page .ui-page-header .page-title, .ui-heatmap_page .ui-page-header .page-title { font-size: 20px; }
.ui-zone_page .ui-page-header .page-pretitle, .ui-heatmap_page .ui-page-description { display: none; }
.ui-zone_page .predict-grid { grid-template-columns: minmax(0,max(480px,calc(100vh - 140px))) minmax(320px,1fr); }
.ui-zone_page .card.filters { background: #18283b; padding: 16px 18px; gap: 12px 20px; border-left: 3px solid var(--accent); }
.ui-zone_page .predict-map > .panel-head, .ui-heatmap_page .panel-head { margin-bottom: 14px; }
.ui-page .map-hint { background: rgba(16,24,39,.88); }
.ui-page .side-panel { background: #152133; }
.ui-page .side-panel .ms-title { font-size: 15px; }
.ui-page .hero { border-radius: 16px; border-color: var(--border); background: radial-gradient(ellipse at top right,rgba(242,169,0,.12),transparent 55%),var(--surface); }
.ui-page .feature-shot { border-radius: 12px; }
.ui-page .section-title { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ui-page .faq .card { border-left: 3px solid #3c536d; }
.ui-page .profile-card { max-width: 640px; padding: 24px; border-top: 3px solid var(--accent); }
.ui-page .esports-calendar, .ui-page .esports-panel { border-radius: 12px; overflow-x: auto; }
.ui-page .esports-team-card { border-radius: 10px; }

/* Hierarchical reference tables: group, item, then a separate field panel. */
.ui-api_page .ptable { margin-bottom: 0; }
.ui-api_page .ep-table > tbody > .ep-row > td { background: var(--surface); }
.ui-api_page .ep-table > tbody > .ep-row:hover > td { background: #203249; }
.ui-api_page .ep-table > .open > .ep-row > td { background: #21354d; border-bottom-color: transparent; }
.ui-api_page .ep-table .ep-row:focus-visible { outline: 2px solid #68a7ef; outline-offset: -2px; }
.ui-api_page .ep-table > tbody > .ep-detail > td { background: #121e2d; padding-top: 14px; padding-bottom: 18px; }
.ui-api_page .ep-table .ep-meta { border-left: 3px solid #68a7ef; padding-left: 16px; }
.ui-api_page .obj { padding: 0; overflow: hidden; background: var(--surface); }
.ui-api_page .obj > summary { padding: 14px 16px; gap: 12px; align-items: center; }
.ui-api_page .obj > summary::before { content: none; }
.ui-api_page .obj-caret { display: inline-flex; flex: none; color: var(--muted); transition: transform .15s; }
.ui-api_page .obj[open] .obj-caret { transform: rotate(90deg); }
.ui-api_page .toc-caret svg, .ui-api_page .ep-caret svg { display: block; }
.ui-api_page .obj[open] > summary { background: #21354d; border-bottom: 1px solid var(--border); }
.ui-api_page .obj > summary > .muted { margin-left: auto; }
.ui-api_page .obj > .pt-wrap { margin: 14px 16px 16px 40px; border-left: 3px solid #68a7ef; border-radius: 6px; }
.ui-api_page .obj > .ref-callout { margin: 12px 16px 16px 40px; }
.ui-api_page .api-toc .toc-items { margin: 8px 0 12px 12px; padding-left: 10px; border-left: 1px solid #3b506c; }
.ui-api_page .api-toc .toc-group.sub > .toc-items { margin-left: 10px; padding-left: 10px; }
.ui-api_page .api-toc .toc-items a { padding-block: 8px; }

@media (max-width: 1399.98px) {
  .ui-page .logo.navbar-brand { order: 0; margin-right: auto; }
  .ui-page .topbar .account { order: 1; margin-left: 0; }
  .ui-page .topbar .navbar-toggler { order: 2; }
  .ui-page .site-nav { order: 3; flex-basis: 100%; }
  .ui-page .site-nav .navbar-nav { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); padding-top: 12px; border-top: 1px solid var(--border); }
  .ui-page .site-nav .nav-link { justify-content: flex-start; }
}
@media (min-width: 1400px) {
  .ui-page .site-nav .navbar-nav { flex-direction: row; }
}
@media (max-width: 1100px) {
  .ui-zone_page .predict-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 900px) {
  .ui-page .info-side { width: 100%; }
  .ui-page .info-toc > ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .ui-page .info-toc > ul > li { flex: 1 1 140px; }
  .ui-page .info-toc > ul > li > a { background: var(--surface); }
  .ui-page .info-toc ul ul { max-height: 140px; overflow-y: auto; }
}
@media (max-width: 600px) {
  .ui-page .topbar-inner { padding-inline: 16px; gap: 10px; }
  .ui-page-header { margin-bottom: 18px; gap: 10px; padding-bottom: 16px; }
  .ui-page-icon { width: 40px; height: 40px; }
  .ui-page-header .page-title { font-size: 23px; }
  .ui-page .card-header { padding: 16px; }
  .ui-page .card-body { padding: 16px; }
  .ui-page .stat { padding: 16px; }
  .ui-page .stat .value { font-size: 27px; }
  .ui-page .ui-member-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ui-page .ui-filter-toolbar { gap: 12px; }
  .ui-filter-toolbar.predict-filters .field-row { flex: 1 1 120px; min-width: 0; }
  .ui-filter-toolbar .form-select, .ui-filter-toolbar .form-control { width: 100%; }
  .ui-filter-toolbar .pb-check { margin-left: 0; flex-basis: 100%; }
  .ui-page .table > :not(caption) > * > * { padding: 10px 12px; }
  .ui-page .side-inner { padding: 18px 16px; }
  .ui-page .ui-search-card { padding: 12px; }
  .ui-page .ui-search-card .btn { padding-inline: 12px; }
}