/* ==========================================================================
   MILLENNIUM 2099 — Evennia webclient theme
   ==========================================================================

   HOW THIS FILE IS LOADED
   evennia/web/templates/webclient/base.html loads
       webclient/css/webclient.css   (Evennia's base client styles)
       webclient/css/custom.css      (THIS FILE)
   in that order, so these rules win without !important in most cases.
   This is the webclient's own auto-loaded override hook — the direct
   counterpart of website/css/custom.css on the website side.

   ── SCOPE: CHROME ONLY ────────────────────────────────────────────────────
   This file themes the client's FURNITURE — background, input bar, toolbar,
   dialogs, split gutters, scrollbars.

   It deliberately does NOT restyle:
     * .color-000 … .color-255  — the ANSI palette. The game's own text-UI
       library (src/m2099/ui/) chooses these colours to carry MEANING:
       status, damage type, faction, zone. Overriding them here would
       silently corrupt gameplay information.
     * .out / .sys / .err  — semantic message classes the client assigns by
       message type. Only .inp is touched below, and only for legibility.

   The rule of thumb: if the GAME chose the colour, leave it alone. If
   EVENNIA chose it as UI furniture, it's fair game.
   ========================================================================== */

/* ── THE FONT HERE IS NOT THE WEBSITE'S FONT, AND MUST NOT BE ──────────────
   The website ships a *latin-subset* JetBrains Mono (~31 KB) because its
   pages are prose. Pointing the client at that file broke the game's text UI:
   the subset is missing 18 of the 23 glyphs the UI draws with — every box
   character, block element, geometric shape and arrow —

       ▲ ▼ ◀ ▶ ░ ▒ █ ─ │ ╭ ╮ ╰ ╯ ━ ■ ✕ ↕

   so each one fell back to a different font with a different advance width.
   In a UI whose frames and maps are padded by counting characters, that shows
   up as a right-hand border that jitters line by line, and a map grid that
   will not line up.

   The client therefore gets the FULL variable face (~114 KB). That is a lot
   of bytes for a website; it is nothing for the surface a player sits in for
   hours, and it is the only way the padding maths can be trusted.

   Bold matters too: the client renders ANSI hilite as bold, and a synthesised
   bold has different metrics from a real one — hence the variable font
   (wght 100-800) rather than the static Regular.

   If you add a glyph to src/m2099/ui/ or world/city_map.py, check it against
   this file first. tests/unit/ui/test_glyph_coverage.py does that for you. */
@font-face {
  font-family: "JetBrains Mono M2099";
  font-style: normal;
  font-weight: 100 800;
  font-display: block;
  src: url("../fonts/jetbrains-mono-full-var.woff2") format("woff2");
}

:root {
  --m-bg:        #0B0B0E;
  --m-surface:   #141419;
  --m-surface-2: #1E1E26;
  --m-border:    #2A2A33;
  --m-muted:     #8A8A97;
  --m-text:      #E9E9EF;
  --m-text-hi:   #F5F5F8;
  --m-accent:      #39FF14;
  --m-accent-2:    #FFB000;
  --m-accent-glow: rgba(57, 255, 20, 0.30);
  --m-ink-on-accent: #06250B;
  /* Fallbacks are chosen for GLYPH COVERAGE, not looks: DejaVu Sans Mono
     and Consolas both carry the full box-drawing and block ranges, so a
     failed font load degrades to a still-aligned grid. */
  --m-mono: "JetBrains Mono M2099", "DejaVu Sans Mono", Consolas, "Liberation Mono", monospace;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

html,
body {
  background-color: var(--m-bg);
  color: var(--m-text);
}

#clientwrapper {
  background-color: var(--m-bg);
}

/* --------------------------------------------------------------------------
   Message window
   -------------------------------------------------------------------------- */

#messagewindow {
  background-color: var(--m-bg);
  font-family: var(--m-mono);
  line-height: 1.55;
  padding: 0.5rem 0.75rem;
  scrollbar-color: var(--m-border) var(--m-bg);  /* Firefox */
  scrollbar-width: thin;
}

/* Evennia paints game output on an explicit #000; align it to the brand
   base so the message area and the page shell are one continuous surface
   instead of two subtly different blacks. Foreground is left alone — the
   game's ANSI colours own it. */
.out {
  background-color: var(--m-bg);
}

/* Echoed player input. Stock is #555, which on a near-black background is
   close to unreadable — a real legibility problem, not a taste call, since
   scrollback is how you check what you actually typed. */
.inp {
  color: var(--m-muted);
}

.prompt {
  color: var(--m-text-hi);
  font-family: var(--m-mono);
}

/* WebKit/Blink scrollbars — Firefox is handled by scrollbar-color above. */
#messagewindow::-webkit-scrollbar {
  width: 10px;
}

#messagewindow::-webkit-scrollbar-track {
  background: var(--m-bg);
}

#messagewindow::-webkit-scrollbar-thumb {
  background-color: var(--m-border);
  border-radius: 6px;
}

#messagewindow::-webkit-scrollbar-thumb:hover {
  background-color: var(--m-surface-2);
}

/* --------------------------------------------------------------------------
   Input bar — the single most-used control in the client
   -------------------------------------------------------------------------- */

#input {
  background-color: var(--m-bg);
  border-top: 1px solid var(--m-border);
}

#inputcontrol {
  background-color: var(--m-bg);
}

#inputfield,
#inputsizer {
  background: var(--m-surface);
  color: var(--m-text);
  font-family: var(--m-mono);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  caret-color: var(--m-accent);
}

#inputfield:focus {
  border-color: var(--m-accent);
  box-shadow: 0 0 0 0.12rem var(--m-accent-glow);
  outline: none;
}

#inputfield::placeholder {
  color: var(--m-muted);
}

#inputsend {
  background-color: var(--m-accent);
  border: 1px solid var(--m-accent);
  color: var(--m-ink-on-accent);
  font-family: var(--m-mono);
  font-weight: 700;
  border-radius: 8px;
  margin-left: 6px;
}

#inputsend:hover,
#inputsend:focus {
  background-color: var(--m-accent);
  color: var(--m-ink-on-accent);
  box-shadow: 0 0 14px var(--m-accent-glow);
}

/* --------------------------------------------------------------------------
   Toolbar + buttons
   -------------------------------------------------------------------------- */

.button,
#splitbutton,
#panebutton,
#undobutton,
#optionsbutton {
  background-color: var(--m-surface);
  border: 1px solid var(--m-border);
  color: var(--m-muted);
  border-radius: 6px;
}

.button:hover,
#splitbutton:hover,
#panebutton:hover,
#undobutton:hover,
#optionsbutton:hover {
  background-color: var(--m-surface-2);
  color: var(--m-accent);
  border-color: var(--m-accent);
}

/* --------------------------------------------------------------------------
   Dialogs (options, help)
   -------------------------------------------------------------------------- */

/* Stock .dialog is background-color:#fefefe — a near-WHITE panel dropped on
   top of a black terminal. This is the single worst visual break in the
   stock client. */
.dialog,
#optionsdialog,
#helpdialog {
  background-color: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: 10px;
  color: var(--m-text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

.dialogtitle {
  border-bottom: 1px solid var(--m-border);
  color: var(--m-text-hi);
  font-family: var(--m-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dialogcontent,
.dialogcontentparent {
  color: var(--m-text);
}

.dialogclose {
  color: var(--m-muted);
}

.dialogclose:hover,
.dialogclose:focus {
  color: var(--m-accent);
}

.dialog input,
.dialog select,
.dialog textarea {
  background-color: var(--m-bg);
  border: 1px solid var(--m-border);
  color: var(--m-text);
  border-radius: 6px;
  font-family: var(--m-mono);
}

.dialog input:focus,
.dialog select:focus,
.dialog textarea:focus {
  border-color: var(--m-accent);
  outline: none;
}

.dialog a {
  color: var(--m-accent);
}

/* --------------------------------------------------------------------------
   Split gutters + GoldenLayout chrome
   -------------------------------------------------------------------------- */

/* Stock is a flat `grey` bar. */
.gutter,
.gutter.gutter-vertical,
.gutter.gutter-horizontal {
  background-color: var(--m-border);
}

.gutter:hover {
  background-color: var(--m-accent);
}

/* GoldenLayout ships its own dark theme from a CDN; nudge its tab strip
   onto the brand surface so panes don't read as a foreign widget. */
.lm_header,
.lm_tab,
.lm_content {
  background-color: var(--m-surface) !important;
  color: var(--m-text) !important;
}

.lm_tab.lm_active {
  background-color: var(--m-surface-2) !important;
  color: var(--m-accent) !important;
}

/* --------------------------------------------------------------------------
   Connect + error states
   -------------------------------------------------------------------------- */

#connecting {
  color: var(--m-muted);
  font-family: var(--m-mono);
  padding: 1rem;
}

/* The "jQuery not found" / "Favico.js not found" bootstrap warnings the
   client writes directly into the document. Stock .err is bare red text on
   an unstyled background; give it a real panel so it reads as deliberate. */
#noscript.err,
#clientwrapper > .err {
  background-color: rgba(255, 77, 77, 0.10);
  border: 1px solid #FF4D4D;
  border-radius: 10px;
  color: #FF4D4D;
  font-family: var(--m-mono);
  margin: 1rem;
  padding: 1rem 1.25rem;
}

#noscript.err h3 {
  color: #FF4D4D;
  font-family: var(--m-mono);
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 2px solid var(--m-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}