/*
 * CONTRAST NOTE. Eight colours in this file measured below AA once composited over the
 * purple ramp — the design leans on gray-300/400/500 for real text (field labels, the
 * sidebar, metric sub-lines, the "no art" placeholder, a failed rule's weight) and on
 * #f04438 for the ✕ marker on its own 15% tint. Each is moved one readable step up the
 * same ramp, and the red marker to #ff8a80. Everything else is untouched.
 *
 * Steam Catalogue admin shell — the visual scheme from docs/catalogue-design.css.
 *
 * The prototype referenced Mobalytics StyleX variables (--x15ribjd and friends) that only
 * exist inside their bundle; every one is substituted here with the value it resolves to in
 * that same snapshot, so this file stands alone. The grey ramp stays as var(--gray-*) and is
 * declared by the page, which is what lets the purple theme drive it.
 */

/* ==========================================================================
   Gamebase Admin — Steam Catalogue
   Built on Mobalytics design tokens (main.css :root scope, default theme).
   All colour / type / radius / shadow values below are token references only.
   ========================================================================== */

html, body { background: var(--gray-950); }
body { margin:0; font: 400 16px/24px Roboto, sans-serif; color: var(--gray-100); -webkit-font-smoothing:antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button, input, select { font-family: Roboto, sans-serif; }
:focus-visible { outline: 2px solid #f2bf43; outline-offset: 2px; border-radius: 1px; }

/* ---------- shell ---------------------------------------------------- */
.gb-shell { display:flex; flex-direction:column; min-height:100vh; }
.gb-body  { display:flex; flex:1 1 auto; min-width:0; }
.gb-main  { flex:1 1 auto; min-width:0; padding: 24px 24px 64px; }
.gb-wrap  { max-width: 1720px; margin: 0 auto; }

/* games bar */
.gb-gamesbar {
  display:flex; align-items:center; gap:4px; height:40px; padding:0 12px;
  background: var(--gray-975); border-bottom:1px solid var(--gray-800);
  overflow-x:auto; scrollbar-width:none; position:sticky; top:0; z-index:60;
}
.gb-gamesbar::-webkit-scrollbar { display:none; }
.gb-gamesbar__logo { height:16px; margin-right:16px; flex:0 0 auto; }
.gb-game {
  display:flex; align-items:center; gap:6px; height:26px; padding:0 8px;
  border-radius:6px; font:500 12px/20px Roboto, sans-serif; color:var(--gray-200);
  white-space:nowrap; flex:0 0 auto; transition: background .12s ease, color .12s ease;
}
.gb-game img { width:16px; height:16px; filter: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(483%) hue-rotate(200deg) brightness(90%) contrast(88%); }
.gb-game:hover { background: var(--gray-800); color: var(--gray-100); }
.gb-game.is-active { background: #f2bf4326; color: #f2bf43; }
.gb-game.is-active img { filter: brightness(0) saturate(100%) invert(72%) sepia(44%) saturate(341%) hue-rotate(2deg) brightness(103%) contrast(92%); }

/* top bar */
.gb-topbar {
  display:flex; align-items:center; gap:16px; height:52px; padding:0 16px;
  background: var(--gray-900); border-bottom:1px solid var(--gray-800);
  position:sticky; top:40px; z-index:55;
}
.gb-topbar__crumbs { display:flex; align-items:center; gap:8px; font:500 14px/20px Roboto, sans-serif; color:var(--gray-200); }
.gb-topbar__crumbs b { font:500 14px/20px Roboto, sans-serif; color:var(--gray-100); font-weight:500; }
.gb-topbar__sep { color: var(--gray-400); }
.gb-topbar__spacer { flex:1 1 auto; }
.gb-env {
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 8px;
  border-radius:6px; background:#fc7c0040; color:#fd9633;
  font:700 12px/20px Roboto, sans-serif; letter-spacing:.04em; text-transform:uppercase;
}
.gb-user { display:flex; align-items:center; gap:8px; font:500 14px/20px Roboto, sans-serif; color:var(--gray-200); }
.gb-avatar {
  width:28px; height:28px; border-radius:50%; background:var(--base-100);
  display:flex; align-items:center; justify-content:center;
  font:700 12px/20px Roboto, sans-serif; color:var(--gray-100); font-weight:700;
}

/* sidebar */
.gb-side {
  width:64px; flex:0 0 64px; background:var(--gray-900);
  border-right:1px solid var(--gray-800);
  position:sticky; top:92px; align-self:flex-start; height:calc(100vh - 92px);
  padding-top:8px; display:flex; flex-direction:column; gap:2px;
}
.gb-side__item {
  height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--gray-200); font:700 12px/20px Roboto, sans-serif; text-align:center; position:relative;
}
.gb-side__item img { width:20px; height:20px; filter: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(483%) hue-rotate(200deg) brightness(90%) contrast(88%); }
.gb-side__item:hover { color:var(--gray-100); background:var(--gray-800-50); }
.gb-side__item.is-active { color:#f2bf43; }
.gb-side__item.is-active img { filter: brightness(0) saturate(100%) invert(72%) sepia(44%) saturate(341%) hue-rotate(2deg) brightness(103%) contrast(92%); }
.gb-side__item.is-active::before {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px;
  background:#f2bf43; border-radius:0 1px 1px 0;
}

/* ---------- page head ------------------------------------------------ */
.gb-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.gb-head h1 { margin:0; font:700 24px/32px Roboto, sans-serif; color:var(--white-100); }
.gb-head p  { margin:4px 0 0; font:400 14px/20px Roboto, sans-serif; color:var(--gray-200); max-width:70ch; }
.gb-head__actions { margin-left:auto; display:flex; gap:8px; }

.gb-btn {
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px;
  border-radius:6px; border:1px solid var(--gray-600);
  background:var(--gray-800); color:var(--gray-100);
  font:500 14px/20px Roboto, sans-serif; cursor:pointer; transition: background .12s ease, border-color .12s ease;
}
.gb-btn:hover { background:var(--gray-700); border-color:var(--gray-500); }
.gb-btn--primary { background:#f2bf43; border-color:#f2bf43; color:var(--gray-975); font-weight:700; }
.gb-btn--primary:hover { background:#f5cc69; border-color:#f5cc69; }
.gb-btn--ghost { background:transparent; }
.gb-btn--sm { height:28px; padding:0 10px; font:500 12px/20px Roboto, sans-serif; }

/* ---------- stat strip ----------------------------------------------- */
.gb-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:20px; }
.gb-stat {
  background:var(--gray-900); border:1px solid var(--gray-800); border-radius:10px;
  padding:14px 16px; box-shadow:0 2px 4px rgba(12,9,31,.12), 0 1px 2px rgba(12,9,31,.08);
}
.gb-stat__label { font:500 12px/20px Roboto, sans-serif; color:var(--gray-200); text-transform:uppercase; letter-spacing:.05em; }
.gb-stat__value { font:700 28px/36px Roboto, sans-serif; color:var(--white-100); margin-top:2px; }
.gb-stat__value--gold { color:#f2bf43; }
.gb-stat__value--green { color:#16b474; }
.gb-stat__foot { font:400 12px/20px Roboto, sans-serif; color:var(--gray-200); margin-top:2px; }

/* ---------- panels --------------------------------------------------- */
.gb-panel {
  background:var(--gray-900); border:1px solid var(--gray-800);
  border-radius:10px; box-shadow:0 2px 4px rgba(12,9,31,.12), 0 1px 2px rgba(12,9,31,.08); margin-bottom:16px;
}
.gb-panel__head {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--gray-800); cursor:pointer; user-select:none;
}
.gb-panel__title { font:500 16px/24px Roboto, sans-serif; color:var(--white-100); }
.gb-panel__hint { font:400 12px/20px Roboto, sans-serif; color:var(--gray-200); }
.gb-panel__body { padding:16px; }
.gb-panel__caret { margin-left:auto; color:var(--gray-200); transition:transform .15s ease; font-size:11px; }
.gb-panel.is-collapsed .gb-panel__body { display:none; }
.gb-panel.is-collapsed .gb-panel__caret { transform:rotate(-90deg); }

.gb-field { display:flex; flex-direction:column; gap:6px; }
.gb-field__label { font:500 12px/20px Roboto, sans-serif; color:var(--gray-200); text-transform:uppercase; letter-spacing:.05em; }
.gb-input, .gb-select {
  height:34px; padding:0 10px; border-radius:6px;
  border:1px solid var(--gray-600); background:var(--gray-950);
  color:var(--gray-100); font:400 14px/20px Roboto, sans-serif; width:100%;
}
.gb-input::placeholder { color:var(--gray-400); }
.gb-input:focus, .gb-select:focus { border-color:#f2bf43; outline:none; }
.gb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }

.gb-chips { display:flex; flex-wrap:wrap; gap:6px; }
.gb-chip {
  height:28px; padding:0 12px; border-radius:999px;
  border:1px solid var(--gray-600); background:var(--gray-800);
  color:var(--gray-200); font:500 12px/20px Roboto, sans-serif; cursor:pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.gb-chip:hover { border-color:var(--gray-400); color:var(--gray-100); }
.gb-chip.is-on { background:#f2bf4326; border-color:#f2bf4380; color:#f2bf43; font-weight:700; }

.gb-seg { display:inline-flex; background:var(--gray-950); border:1px solid var(--gray-600); border-radius:6px; padding:2px; }
.gb-seg button {
  height:28px; padding:0 12px; border:0; background:transparent; border-radius:3px;
  color:var(--gray-200); font:500 12px/20px Roboto, sans-serif; cursor:pointer;
}
.gb-seg button.is-on { background:var(--gray-700); color:var(--white-100); font-weight:700; }

.gb-rules-note {
  margin-top:14px; padding:10px 12px; border-radius:6px;
  background:var(--gray-950); border:1px solid var(--gray-800);
  font:400 12px/20px Roboto, sans-serif; color:var(--gray-200);
}
.gb-rules-note b { color:var(--gray-100); }

/* ---------- table ---------------------------------------------------- */
.gb-tablewrap {
  background:var(--gray-900); border:1px solid var(--gray-800);
  border-radius:10px; overflow:hidden; box-shadow:0 4px 8px rgba(12,9,31,.12), 0 2px 4px rgba(12,9,31,.08);
}
.gb-tablebar {
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  border-bottom:1px solid var(--gray-800); font:500 14px/20px Roboto, sans-serif; color:var(--gray-200);
}
.gb-tablebar b { color:var(--white-100); }
/* min-width:0 matters as much as the overflow: without it the flex parent grows to the
   table's 1400px and the whole page scrolls sideways instead of just the table. */
.gb-scroll { overflow-x:auto; min-width:0; }
table.gb-table { width:100%; border-collapse:separate; border-spacing:0; min-width:1400px; }

.gb-table thead th {
  position:sticky; top:0; z-index:10; background:var(--gray-950);
  text-align:left; padding:10px 12px; white-space:nowrap;
  font:500 12px/20px Roboto, sans-serif; color:var(--gray-200); text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--gray-700);
}
.gb-table th.is-sortable { cursor:pointer; user-select:none; }
.gb-table th.is-sortable:hover { color:var(--gray-100); }
/* The ▲▼ marker is the only signal that a header is clickable, so it is not decoration:
   gray-500 measured 1.98:1 on the header background. */
.gb-table th .gb-sort { color:var(--gray-200); margin-left:4px; font-size:9px; }
.gb-table th.is-sorted { color:#f2bf43; }
.gb-table th.is-sorted .gb-sort { color:#f2bf43; }
.gb-table th.num, .gb-table td.num { text-align:right; }

.gb-table tbody td {
  padding:10px 12px; border-bottom:1px solid var(--gray-800);
  font:400 14px/20px Roboto, sans-serif; color:var(--gray-100); vertical-align:middle;
}
.gb-row { transition: background .1s ease; cursor:pointer; }
.gb-row:hover td { background:var(--gray-800-50); }
.gb-row.is-open td { background:var(--gray-800); }
.gb-row.is-recommended td:first-child { box-shadow: inset 3px 0 0 #16b474; }
.gb-row.is-covered { opacity:.68; }
.gb-row.is-covered:hover { opacity:1; }

.gb-caret { color:var(--gray-200); font-size:10px; display:inline-block; transition:transform .15s ease; width:12px; }
/* Our rows carry the state on the caret itself, so the selector matches that too. */
.gb-row.is-open .gb-caret,
.gb-caret.is-open { transform:rotate(90deg); color:#f2bf43; }

.gb-game-cell { display:flex; align-items:center; gap:10px; min-width:280px; }
.gb-cap {
  width:92px; height:35px; flex:0 0 92px; border-radius:3px;
  object-fit:cover; background:var(--gray-800); border:1px solid var(--gray-700);
}
.gb-cap--ph { display:flex; align-items:center; justify-content:center; font:700 12px/20px Roboto, sans-serif; color:var(--gray-200); }
.gb-game-name { font:500 14px/20px Roboto, sans-serif; color:var(--white-100); font-weight:500; }
.gb-game-sub  { font:400 12px/20px Roboto, sans-serif; color:var(--gray-200); }

.gb-metric { font:500 14px/20px Roboto, sans-serif; color:var(--gray-100); font-variant-numeric:tabular-nums; }
.gb-metric__sub { font:400 12px/20px Roboto, sans-serif; color:var(--gray-200); }
.gb-bar { height:3px; border-radius:999px; background:var(--gray-700); margin-top:4px; overflow:hidden; }
.gb-bar i { display:block; height:100%; background:#16b474; border-radius:999px; }

/* pills */
.gb-pill {
  display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px;
  border-radius:6px; font:700 12px/20px Roboto, sans-serif; white-space:nowrap;
}
.gb-pill--pos  { background:#16b47426; color:#16b474; }
.gb-pill--mix  { background:#fc7c0026; color:#fd9633; }
.gb-pill--neg  { background:#f0443826; color:#f04438; }
.gb-pill--gold { background:#f2bf4326; color:#f2bf43; }
.gb-pill--mute { background:var(--gray-800); color:var(--gray-200); border:1px solid var(--gray-600); }
.gb-pill--live { background:#16b47426; color:#16b474; }

.gb-tag {
  display:inline-block; padding:1px 7px; border-radius:3px;
  background:var(--gray-800); border:1px solid var(--gray-700);
  color:var(--gray-200); font:400 12px/20px Roboto, sans-serif; margin:1px 2px 1px 0; white-space:nowrap;
}

/* score */
.gb-score { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.gb-score__num { font:700 16px/24px Roboto, sans-serif; font-variant-numeric:tabular-nums; min-width:26px; text-align:right; }
.gb-score--cover .gb-score__num { color:#16b474; }
.gb-score--watch .gb-score__num { color:#f2bf43; }
.gb-score--skip  .gb-score__num { color:var(--gray-200); }
.gb-ring { width:26px; height:26px; border-radius:50%; flex:0 0 26px; }

.gb-est { font-size:9px; color:var(--gray-200); vertical-align:super; margin-left:2px; cursor:help; }

/* expanded detail */
.gb-detail td { padding:0 !important; background:var(--gray-950) !important; border-bottom:1px solid var(--gray-700) !important; }
.gb-detail__inner { padding:18px 20px 20px; display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap:24px; }
.gb-detail h4 {
  margin:0 0 10px; font:500 12px/20px Roboto, sans-serif; color:var(--gray-200);
  text-transform:uppercase; letter-spacing:.06em;
}
.gb-detail p { margin:0 0 14px; font:400 14px/20px Roboto, sans-serif; color:var(--gray-200); }

.gb-shots { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; }
.gb-shots img {
  width:184px; height:104px; flex:0 0 184px; object-fit:cover;
  border-radius:6px; border:1px solid var(--gray-700); background:var(--gray-800);
}
.gb-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px 16px; margin-bottom:16px; }
.gb-meta dt { font:400 12px/20px Roboto, sans-serif; color:var(--gray-200); text-transform:uppercase; letter-spacing:.05em; }
.gb-meta dd { margin:2px 0 0; font:500 14px/20px Roboto, sans-serif; color:var(--gray-100); }

.gb-criteria { display:flex; flex-direction:column; gap:6px; }
.gb-crit {
  display:flex; align-items:center; gap:10px; padding:7px 10px;
  border-radius:6px; background:var(--gray-900); border:1px solid var(--gray-800);
}
.gb-crit__mark { width:16px; height:16px; flex:0 0 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.gb-crit.pass .gb-crit__mark { background:#16b47426; color:#16b474; }
.gb-crit.fail .gb-crit__mark { background:#f0443826; color:#ff8a80; }
.gb-crit__name { font:500 14px/20px Roboto, sans-serif; color:var(--gray-100); }
.gb-crit__val  { margin-left:auto; font:500 12px/20px Roboto, sans-serif; color:var(--gray-200); font-variant-numeric:tabular-nums; }
.gb-crit__w    { font:400 12px/20px Roboto, sans-serif; color:var(--gray-200); width:34px; text-align:right; }

.gb-verdict {
  display:flex; align-items:center; gap:10px; padding:12px 14px; margin-top:14px;
  border-radius:6px; border:1px solid var(--gray-700); background:var(--gray-900);
}
.gb-verdict__score { font:700 28px/36px Roboto, sans-serif; font-variant-numeric:tabular-nums; }
.gb-verdict__text { font:500 14px/20px Roboto, sans-serif; color:var(--gray-200); }
.gb-verdict--cover { border-color:#16b47440; } .gb-verdict--cover .gb-verdict__score { color:#16b474; }
.gb-verdict--watch { border-color:#f2bf4340; } .gb-verdict--watch .gb-verdict__score { color:#f2bf43; }
.gb-verdict--skip  .gb-verdict__score { color:var(--gray-200); }

.gb-detail__actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

.gb-empty { padding:56px 24px; text-align:center; }
.gb-empty h3 { margin:0 0 6px; font:500 20px/28px Roboto, sans-serif; color:var(--white-100); }
.gb-empty p { margin:0 0 16px; font:400 14px/20px Roboto, sans-serif; color:var(--gray-200); }

.gb-foot {
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-top:1px solid var(--gray-800); font:500 14px/20px Roboto, sans-serif; color:var(--gray-200);
}
.gb-foot__spacer { flex:1 1 auto; }

.gb-src {
  margin-top:16px; padding:12px 14px; border-radius:10px;
  background:var(--gray-900); border:1px solid var(--gray-800);
  font:400 12px/20px Roboto, sans-serif; color:var(--gray-200); line-height:1.7;
}
.gb-src b { color:var(--gray-200); }
.gb-src code { color:#f2bf43; font-family:ui-monospace,Menlo,Consolas,monospace; }

@media (max-width: 1100px) {
  .gb-detail__inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .gb-side { display:none; }
  .gb-main { padding:16px 12px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}