/* ============================================================
   Operator console — the theme layer on top of ld.css
   ------------------------------------------------------------
   The console is the same design system as the player app. It
   loads ld.css first and then this, which changes two things and
   nothing else:

     the accent, indigo -> teal
     the midnight menu, indigo -> teal

   That one difference is what tells an operator at a glance which
   of the two applications they are looking at, without either of
   them needing a second set of components.

   Everything after the theme is a component the console needs and
   the player app has no use for: ten thousand numbers as a heat
   map, a prize table that refuses to be saved, a settlement run
   in nine steps. They are built out of the same tokens, spacing
   and type as the rest, and prefixed ld-adm-.
   ============================================================ */

:root{
  /* Teal 700 as the accent, with the same seven roles indigo fills
     in the player app. White sits on the primary at 5.5:1. */
  --ld-accent:#0F766E; --ld-accent-700:#115E59; --ld-accent-900:#134E4A; --ld-accent-950:#042F2E;
  --ld-accent-50:#F0FDFA; --ld-accent-100:#CCFBF1; --ld-accent-200:#99F6E4;

  /* The menu, in the same midnight treatment as the player's, in teal.
     Items read at 11.5:1, group labels at 9.8:1, white on the selected
     item at 5.5:1 — every one of them better than the light menu managed. */
  --ld-sbd-bg:#042F2E;
  --ld-sbd-text:#99F6E4;
  --ld-sbd-muted:#5EEAD4;
  --ld-sbd-hover:rgba(255,255,255,.08);
  --ld-sbd-line:rgba(255,255,255,.1);
  --ld-sbd-active:#0F766E;
  --ld-sbd-guide:#2DD4BF;

  /* Exposure runs cool to hot across six steps. It is the one place in
     either application where colour is a scale rather than a meaning, so
     it gets its own ramp and never borrows the status colours. */
  --ld-heat-0:#EEF2F7;
  --ld-heat-1:#CCFBF1;
  --ld-heat-2:#5EEAD4;
  --ld-heat-3:#FBBF24;
  --ld-heat-4:#F97316;
  --ld-heat-5:#DC2626;
}

/* The console's sign-in screen carries the wordmark beside what it is. */
.ld-adm-brand-sub{font-size:12.5px;font-weight:600;color:var(--ld-muted);align-self:flex-end;padding-bottom:4px}

/* ---------- Who is signed in, and what that lets them do ----------
   Role decides which buttons exist, so it is stated in the top strip
   rather than left to be discovered by a button not being there. */
.ld-adm-role{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;background:var(--ld-accent-50);color:var(--ld-accent-900);font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.ld-adm-role::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ld-accent)}
.ld-adm-role-viewer{background:var(--ld-hover);color:var(--ld-ink-2)}
.ld-adm-role-viewer::before{background:var(--ld-faint)}

/* ---------- The exposure map ----------
   Ten thousand numbers, one cell each, 0000 top left to 9999 bottom
   right. Painted as a grid of divs rather than a canvas so a cell can
   be focused, described and linked to the number it stands for. */
/* A hundred cells across, squared off at a size a person can actually scan.
   Left to fill a wide panel each cell is ten pixels and the map is a
   thousand-pixel wall of nothing; at six it is one picture of one draw. */
.ld-adm-map{display:grid;grid-template-columns:repeat(100,1fr);gap:1px;padding:10px;border-radius:12px;background:var(--ld-line-2);overflow:hidden;width:100%;max-width:640px}
.ld-adm-map-cell{aspect-ratio:1;border-radius:1px;background:var(--ld-heat-0)}
.ld-adm-map-cell.ld-is-l1{background:var(--ld-heat-1)}
.ld-adm-map-cell.ld-is-l2{background:var(--ld-heat-2)}
.ld-adm-map-cell.ld-is-l3{background:var(--ld-heat-3)}
.ld-adm-map-cell.ld-is-l4{background:var(--ld-heat-4)}
.ld-adm-map-cell.ld-is-l5{background:var(--ld-heat-5)}
.ld-adm-legend{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--ld-muted);max-width:640px}
.ld-adm-legend-scale{display:flex;gap:2px}
.ld-adm-legend-step{width:26px;height:10px;border-radius:2px}

/* ---------- Figures that need watching ----------
   A headline that can go bad. It is the ordinary stat tile until the
   number crosses its threshold, at which point the whole tile says so
   — a red digit alone is missed on a screen of forty digits. */
.ld-stat.ld-is-alert{border-color:var(--ld-rose);background:var(--ld-rose-bg)}
.ld-stat.ld-is-alert .ld-stat-amt{color:var(--ld-rose-ink)}
.ld-stat.ld-is-alert .ld-stat-foot{color:var(--ld-rose-ink)}

/* ---------- A figure against its ceiling ---------- */
.ld-adm-gauge{margin-top:10px}
.ld-adm-gauge .ld-progress-bar.ld-is-hot{background:var(--ld-rose)}

/* ---------- The settlement run ----------
   Nine steps, in order, each either done, running or waiting. The line
   down the left is what makes it a sequence rather than a checklist. */
.ld-adm-steps{list-style:none;margin:0;padding:0}
.ld-adm-step{position:relative;padding:0 0 18px 30px;font-size:13.5px}
.ld-adm-step::before{content:"";position:absolute;left:7px;top:18px;bottom:0;width:2px;background:var(--ld-line)}
.ld-adm-step:last-child{padding-bottom:0}
.ld-adm-step:last-child::before{display:none}
.ld-adm-step::after{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;border:2px solid var(--ld-line);background:#fff}
.ld-adm-step.ld-is-done::after{border-color:var(--ld-emerald);background:var(--ld-emerald)}
.ld-adm-step.ld-is-now::after{border-color:var(--ld-accent);background:var(--ld-accent-100)}
.ld-adm-step-no{font-size:11.5px;font-weight:700;color:var(--ld-muted)}
.ld-adm-step-name{font-weight:700}
.ld-adm-step-when{color:var(--ld-muted);font-size:12.5px}

/* ---------- The prize table ----------
   Three columns: what the prize is, how many slots it has, and what each one
   pays. The three line up down the form so a change to one number is read
   against its neighbours rather than hunted for. */
.ld-adm-prize{display:grid;gap:10px}
.ld-adm-prize-head{display:grid;grid-template-columns:minmax(0,1fr) 110px 110px;gap:12px;font-size:12px;font-weight:600;color:var(--ld-muted)}
.ld-adm-prize-head span:not(:first-child){text-align:left}
.ld-adm-prize-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 110px;gap:12px;align-items:center}
.ld-adm-prize-row .ld-label{margin-bottom:0}
.ld-adm-prize-row .ld-input{height:42px;font-weight:700;font-variant-numeric:tabular-nums}
.ld-adm-prize-row .ld-input:disabled{background:var(--ld-hover);color:var(--ld-faint)}
.ld-adm-prize-row .ld-table-sub{display:block;margin-top:2px}
@media (max-width:560px){
  .ld-adm-prize-head{display:none}
  .ld-adm-prize-row{grid-template-columns:minmax(0,1fr) 1fr 1fr}
}

/* The paid-back figure, which turns as it approaches and then crosses the
   ceiling. Amber is "one more slot and this stops being savable". */
.ld-adm-gauge.ld-is-warn .ld-stat-amt{color:var(--ld-amber-ink)}
.ld-adm-gauge.ld-is-bad .ld-stat-amt{color:var(--ld-rose-ink)}

/* ---------- A change that cannot be saved ----------
   The prize editor refuses a table that loses money on every bet. The
   reason sits above the save button, which is disabled, because a
   disabled button with no explanation is the worst of both. */
.ld-adm-blocker{margin-top:16px}

/* ---------- Two people, one change ----------
   Owner-only changes need a second approver. The queue shows who asked,
   what for, and who has yet to agree. */
.ld-adm-approval{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--ld-line-2)}
.ld-adm-approval:last-child{border-bottom:0}
.ld-adm-approval-what{font-weight:700}
.ld-adm-approval-who{font-size:12.5px;color:var(--ld-muted)}
.ld-adm-diff{margin-top:8px;display:grid;gap:4px;font-size:12.5px}
.ld-adm-diff-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:baseline}
.ld-adm-diff-from{color:var(--ld-muted);text-decoration:line-through}
.ld-adm-diff-to{font-weight:700;color:var(--ld-accent-900)}

/* ---------- The number book ----------
   Ten thousand rows, filtered down. The band is the exposure level, so
   the eye finds the hot numbers without reading the payout column. */
.ld-adm-band{display:inline-flex;align-items:center;gap:6px}
.ld-adm-band::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--ld-heat-1)}
.ld-adm-band-cool::before{background:var(--ld-heat-1)}
.ld-adm-band-warm::before{background:var(--ld-heat-3)}
.ld-adm-band-hot::before{background:var(--ld-heat-5)}

/* ---------- Result entry ----------
   Forty-eight numbers, typed once and verified by somebody else. The
   slots keep the player's digit tile, because it is the same number the
   player will read back. */
.ld-adm-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
/* Which slot it is above, the number in it below. The label was beside the
   box and "Luck By Chance 25" pushed the box out of the card entirely. */
.ld-adm-slot{display:block;padding:8px 10px;border:1px solid var(--ld-line);border-radius:10px;background:#fff;cursor:text}
.ld-adm-slot-no{display:block;font-size:11px;font-weight:700;color:var(--ld-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-adm-slot input,.ld-adm-slot-val{display:block;width:100%;min-width:0;margin-top:4px;border:0;padding:0;background:none;font:inherit;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center;color:var(--ld-ink)}
.ld-adm-slot input::placeholder{color:var(--ld-line)}
.ld-adm-slot input:focus{outline:none}
.ld-adm-slot:focus-within{border-color:var(--ld-accent);box-shadow:0 0 0 3px var(--ld-accent-100)}
.ld-adm-slot.ld-is-invalid{border-color:var(--ld-rose);box-shadow:0 0 0 3px var(--ld-rose-bg)}
/* The three that pay most, so a mistyped first prize is seen before saving. */
.ld-adm-slot.ld-is-top{border-color:var(--ld-accent-200);background:var(--ld-accent-50)}

/* ---------- The kill switches ----------
   Four switches that stop the business. They sit apart from everything
   else on the page and are the one place a rose border is used as
   chrome rather than as an error. */
.ld-adm-kill{border-color:var(--ld-rose);background:var(--ld-rose-bg)}
.ld-adm-kill .ld-panel-title{color:var(--ld-rose-ink)}

@media (max-width:760px){
  .ld-adm-map{grid-template-columns:repeat(50,1fr)}
  .ld-adm-approval{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Tables of machine output ----------
   The console shows things a person did not write: transaction hashes, revert
   reasons, raw call data. Left alone they run off the side of the panel and
   take the layout with them, because there is no space in them to break at. */
.ld-adm-wrap td{white-space:normal;overflow-wrap:anywhere}
.ld-adm-wrap td.ld-adm-nowrap,
.ld-adm-nowrap{white-space:nowrap}