/* "Fjord Night": a theme each person can pick with the switch in the bottom-left corner. The server
   marks <html data-theme="fjord"> when the theme cookie says so, and every rule below the switch's
   own is scoped to that, so the panel's own look is untouched for everyone else. The Live page is
   never marked: it stays exactly as it is.
   Tokens and names follow the shared Wardogs Nordic design pack (theme.css). Fonts are served from
   the panel itself (public/fonts), because the content security policy loads nothing from elsewhere. */

@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-display: swap; src: url("/static/fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 900; font-display: swap; src: url("/static/fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600 900; font-display: swap; src: url("/static/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400 900; font-display: swap; src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Runic"; font-weight: 400; font-display: swap; src: url("/static/fonts/noto-sans-runic-runic-400-normal.woff2") format("woff2"); unicode-range: U+16A0-16F8; }

/* Shown only in Fjord Night (the Norwegian greeting on the overview); hidden on /live */
.fj-only { display: none; }

/* ---------- tokens ---------- */
html[data-theme="fjord"] {
  --wdn-bg: #0D1316;
  --wdn-bg-admin: #0B1013;
  --wdn-surface: #141C20;
  --wdn-surface-2: #1B252A;
  --wdn-line: #26333A;
  --wdn-line-soft: #1E2A30;
  --wdn-line-strong: #3A4A52;
  --wdn-text: #ECE8DF;
  --wdn-text-2: #C4CCCF;
  --wdn-muted: #9AA8AE;
  --wdn-faint: #7F8E94;
  --wdn-accent: #6FD3A8;
  --wdn-ember: #E08A4B;
  --wdn-frost: #8EC5E8;
  --wdn-bone: #D9C9A3;
  --wdn-gold: #E3C16F;
  --wdn-font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --wdn-font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --wdn-font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --wdn-font-rune: "Noto Sans Runic", serif;
  --wdn-radius: 6px;
  --wdn-radius-sm: 4px;

  /* the panel's own variables, pointed at the tokens */
  --yellow: var(--wdn-accent);
  --yellow-hi: #8FE0BD;
  --yellow-rgb: 111, 211, 168; /* --wdn-accent as numbers: every see-through yellow becomes accent */
  --bg: var(--wdn-bg-admin);
  --panel: var(--wdn-surface);
  --panel2: var(--wdn-surface-2);
  --pop: var(--wdn-surface-2);
  --line: var(--wdn-line);
  --line-soft: var(--wdn-line-soft);
  --text: var(--wdn-text);
  --muted: var(--wdn-muted);
  --good: var(--wdn-accent);
  --bad: var(--wdn-ember);
  --blue: var(--wdn-frost);
  --red: var(--wdn-ember);
  --green: var(--wdn-accent);
  --radius: var(--wdn-radius);
  --brand: var(--wdn-font-display);
  --head: var(--wdn-font-display);
  --body: var(--wdn-font-body);
  --mono: var(--wdn-font-mono);
}

/* ---------- type ---------- */
html[data-theme="fjord"] body { color: var(--wdn-text-2); }
html[data-theme="fjord"] h1, html[data-theme="fjord"] h2, html[data-theme="fjord"] h3 { font-weight: 800; letter-spacing: 0.02em; line-height: 1; color: var(--wdn-text); }
html[data-theme="fjord"] h2 { font-size: 24px; }
html[data-theme="fjord"] .pagehead h1 { font-size: 48px; font-weight: 900; line-height: 0.95; }
html[data-theme="fjord"] .pagehead p,
html[data-theme="fjord"] label,
html[data-theme="fjord"] .hq-k { font: 500 11px var(--wdn-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wdn-muted); }
html[data-theme="fjord"] label input, html[data-theme="fjord"] label select, html[data-theme="fjord"] label textarea { letter-spacing: 0; text-transform: none; }
html[data-theme="fjord"] :focus-visible { outline: 2px solid var(--wdn-accent); outline-offset: 2px; }

/* Greeting on the Overview, in the community's own words */
html[data-theme="fjord"] .fj-only { display: block; }
html[data-theme="fjord"] .fj-greet { margin: 0; }
html[data-theme="fjord"] main:has(> .fj-greet) > .pagehead { display: none; }
html[data-theme="fjord"] .fj-greet span { display: block; font: 500 12px var(--wdn-font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--wdn-muted); }
html[data-theme="fjord"] .fj-greet b { display: block; margin-top: 6px; font: 900 clamp(40px, 5vw, 56px)/0.95 var(--wdn-font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--wdn-text); }

/* ---------- the frame ---------- */
html[data-theme="fjord"] .tri i:nth-child(1) { background: var(--wdn-frost); }
html[data-theme="fjord"] .tri i:nth-child(2) { background: var(--wdn-accent); }
html[data-theme="fjord"] .tri i:nth-child(3) { background: var(--wdn-bone); }
html[data-theme="fjord"] .top { background: rgba(13, 19, 22, 0.96); border-bottom-color: var(--wdn-line-soft); }
html[data-theme="fjord"] .brand { font: 900 24px/1 var(--wdn-font-display); letter-spacing: 0.03em; text-transform: uppercase; }
html[data-theme="fjord"] .brand b { color: var(--wdn-accent); }
html[data-theme="fjord"] nav.main { font: 500 14px var(--wdn-font-body); letter-spacing: 0; text-transform: none; }
html[data-theme="fjord"] nav.main a { color: var(--wdn-text-2); }
html[data-theme="fjord"] nav.main a.on, html[data-theme="fjord"] .navdrop > a.navhead.on { color: var(--wdn-text); border-bottom-color: var(--wdn-accent); }
html[data-theme="fjord"] .right a.hub { font: 500 13px var(--wdn-font-body); letter-spacing: 0; text-transform: none; color: var(--wdn-text-2); }
html[data-theme="fjord"] .right a.hub:hover { color: var(--wdn-accent); }
html[data-theme="fjord"] .me { font: 500 13px var(--wdn-font-body); letter-spacing: 0; text-transform: none; color: var(--wdn-text-2); }
html[data-theme="fjord"] .switch a { font: 500 12px var(--wdn-font-mono); }
html[data-theme="fjord"] .switch a.on { background: var(--wdn-text); color: var(--wdn-bg); }
html[data-theme="fjord"] .tabbar { background: rgba(13, 19, 22, 0.97); }
html[data-theme="fjord"] .tabbar a { font-family: var(--wdn-font-mono); font-weight: 500; }

/* A rune before each menu heading */
html[data-theme="fjord"] nav.main > a::before,
html[data-theme="fjord"] .navdrop > a.navhead::before { content: "ᚲ"; display: inline-block; width: 18px; margin-right: 8px; font: 16px/1 var(--wdn-font-rune); color: var(--wdn-faint); text-align: center; }
html[data-theme="fjord"] nav.main > a[href^="/?"]::before { content: "ᛟ"; }
html[data-theme="fjord"] nav.main > a[href^="/live"]::before { content: "ᛊ"; }
html[data-theme="fjord"] nav.main a[href^="/players"]::before, html[data-theme="fjord"] nav.main a[href^="/history"]::before { content: "ᛗ"; }
html[data-theme="fjord"] nav.main a[href^="/actions"]::before, html[data-theme="fjord"] nav.main a[href^="/settings"]::before { content: "ᛏ"; }
html[data-theme="fjord"] nav.main a[href^="/automation"]::before, html[data-theme="fjord"] nav.main a[href^="/configuration"]::before { content: "ᚦ"; }
html[data-theme="fjord"] nav.main a[href^="/bans"]::before, html[data-theme="fjord"] nav.main a[href^="/cases"]::before { content: "ᚾ"; }
html[data-theme="fjord"] nav.main a[href^="/vip"]::before { content: "ᚷ"; }
html[data-theme="fjord"] nav.main a[href^="/support"]::before { content: "ᚹ"; }
html[data-theme="fjord"] nav.main a[href^="/users"]::before, html[data-theme="fjord"] nav.main a[href^="/audit"]::before { content: "ᛁ"; }
html[data-theme="fjord"] nav.main > a.on::before, html[data-theme="fjord"] .navdrop > a.navhead.on::before { color: var(--wdn-accent); }
html[data-theme="fjord"] nav.main .navdrop > .menu-list a[href]::before { content: none; }

/* Wide screens: the menu becomes the sidebar from the design */
@media (min-width: 1101px) {
  html[data-theme="fjord"] body:has(> header.top) { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
  html[data-theme="fjord"] body > .tri { grid-column: 1 / -1; }
  html[data-theme="fjord"] header.top { grid-column: 1; grid-row: 2; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--wdn-bg); border-bottom: 0; border-right: 1px solid var(--wdn-line-soft); backdrop-filter: none; }
  html[data-theme="fjord"] header.top .bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 20px; height: 100%; max-width: none; margin: 0; padding: 20px 14px; }
  html[data-theme="fjord"] .bar > .brand { order: 1; padding: 0 8px; }
  html[data-theme="fjord"] .bar > .switch { order: 2; display: flex; }
  html[data-theme="fjord"] .bar > .switch a { flex: 1; }
  html[data-theme="fjord"] .bar > nav.main { order: 3; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; }
  html[data-theme="fjord"] .bar > .right { order: 4; margin: auto 0 0; padding: 12px 8px 64px; border-top: 1px solid var(--wdn-line-soft); flex-wrap: wrap; }
  html[data-theme="fjord"] nav.main a,
  html[data-theme="fjord"] .navdrop > a.navhead { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--wdn-radius-sm); border-bottom: 0; }
  html[data-theme="fjord"] nav.main > a:hover, html[data-theme="fjord"] .navdrop > a.navhead:hover { background: var(--wdn-surface); color: var(--wdn-text); }
  html[data-theme="fjord"] nav.main > a.on, html[data-theme="fjord"] .navdrop > a.navhead.on { background: var(--wdn-surface-2); }
  html[data-theme="fjord"] .navdrop > a.navhead::after { margin-left: auto; transform: rotate(-90deg); }
  html[data-theme="fjord"] .navdrop::after { content: none; }
  /* only the open section lists its pages, inline under its heading */
  html[data-theme="fjord"] .navdrop > .menu-list,
  html[data-theme="fjord"] .navdrop:hover > .menu-list,
  html[data-theme="fjord"] .navdrop:focus-within > .menu-list { display: none; }
  html[data-theme="fjord"] .navdrop:has(> a.navhead.on) > a.navhead::after { transform: none; }
  html[data-theme="fjord"] .navdrop:has(> a.navhead.on) > .menu-list { display: flex; flex-direction: column; position: static; min-width: 0; margin: 2px 0 6px 30px; padding: 0 0 0 8px; background: none; border: 0; border-left: 1px solid var(--wdn-line); border-radius: 0; box-shadow: none; }
  html[data-theme="fjord"] .navdrop > .menu-list a { display: flex; min-height: 40px; padding: 0 10px; font: 400 14px var(--wdn-font-body); color: var(--wdn-muted); }
  html[data-theme="fjord"] .navdrop > .menu-list a.on { color: var(--wdn-text); background: none; box-shadow: inset 2px 0 0 var(--wdn-accent); }
  html[data-theme="fjord"] header.top + main { grid-column: 2; grid-row: 2; width: 100%; max-width: 1320px; padding: 28px 32px 64px; gap: 24px; }
  html[data-theme="fjord"] .right .searchmenu .menu-list { left: 0; right: auto; top: auto; bottom: 36px; }
  html[data-theme="fjord"] .right a.hub { order: -1; flex-basis: 100%; display: flex; align-items: center; min-height: 36px; }
}

/* ---------- surfaces: flat, one border, no shadows ---------- */
html[data-theme="fjord"] .card,
html[data-theme="fjord"] .hq-kpi,
html[data-theme="fjord"] .hq-item { background: var(--wdn-surface); border: 1px solid var(--wdn-line); border-radius: var(--wdn-radius); box-shadow: none; }
html[data-theme="fjord"] .hq-kpi { border-top: 1px solid var(--wdn-line); padding: 18px 20px; gap: 8px; }
html[data-theme="fjord"] .hq-kpi:hover { transform: none; border-color: var(--wdn-line-strong); }
html[data-theme="fjord"] .hq-kpi b { font: 800 44px/1 var(--wdn-font-display); color: var(--wdn-text); }
html[data-theme="fjord"] .hq-kpi.bad b, html[data-theme="fjord"] .hq-kpi.warn b { color: var(--wdn-ember); }
html[data-theme="fjord"] .hq-kpi.good b { color: var(--wdn-accent); }
html[data-theme="fjord"] .hq-item.warn .hq-mark { background: var(--wdn-bone); }
html[data-theme="fjord"] .hq-item.info .hq-mark { background: var(--wdn-frost); }
html[data-theme="fjord"] .hq-server::before { opacity: 0.35; }
html[data-theme="fjord"] .hq-server:hover { border-color: var(--wdn-line-strong); }
html[data-theme="fjord"] .hq-srv-top > b { font: 800 26px/1 var(--wdn-font-display); text-transform: uppercase; }
html[data-theme="fjord"] .hq-count, html[data-theme="fjord"] .hq-count b { font-family: var(--wdn-font-mono); color: var(--wdn-text); }
html[data-theme="fjord"] .menu-list { background: var(--wdn-surface-2); border-color: var(--wdn-line); box-shadow: none; }

/* notices: a tinted box rather than a coloured left border */
html[data-theme="fjord"] .notice { border: 1px solid var(--wdn-line); border-radius: var(--wdn-radius); background: var(--wdn-surface); color: var(--wdn-text); }
html[data-theme="fjord"] .notice.bad, html[data-theme="fjord"] .notice:not(.good):not(.warn):not(.info) { border-color: #5A3A26; background: rgba(224, 138, 75, 0.08); }
html[data-theme="fjord"] .notice.good { border-color: #2C5446; background: rgba(111, 211, 168, 0.08); }
html[data-theme="fjord"] .notice.warn { border-color: #5A5034; background: rgba(217, 201, 163, 0.07); }

/* ---------- buttons ---------- */
html[data-theme="fjord"] button, html[data-theme="fjord"] summary.button, html[data-theme="fjord"] a.btn { min-height: 40px; border-radius: var(--wdn-radius-sm); border-color: var(--wdn-line-strong); background: transparent; color: var(--wdn-text); font: 600 14px var(--wdn-font-body); letter-spacing: 0; text-transform: none; }
html[data-theme="fjord"] button:hover, html[data-theme="fjord"] summary.button:hover, html[data-theme="fjord"] a.btn:hover { border-color: var(--wdn-muted); color: var(--wdn-text); }
html[data-theme="fjord"] button.primary { min-height: 44px; background: var(--wdn-accent); border-color: transparent; color: var(--wdn-bg); }
html[data-theme="fjord"] button.primary:hover { background: #8FE0BD; color: var(--wdn-bg); }
html[data-theme="fjord"] button.danger { color: var(--wdn-ember); border-color: #5A3A26; }
html[data-theme="fjord"] button.danger:hover { background: rgba(224, 138, 75, 0.1); border-color: var(--wdn-ember); color: var(--wdn-ember); }
html[data-theme="fjord"] button.tiny { min-height: 32px; font-size: 13px; }
html[data-theme="fjord"] .menu-list a, html[data-theme="fjord"] .menu-list button { min-height: 0; border: 0; font: 500 14px var(--wdn-font-body); }
html[data-theme="fjord"] .menu-list a:hover, html[data-theme="fjord"] .menu-list button:hover { color: var(--wdn-accent); }
html[data-theme="fjord"] .theme-pick button { min-height: 44px; }

/* ---------- forms ---------- */
html[data-theme="fjord"] input, html[data-theme="fjord"] select, html[data-theme="fjord"] textarea { min-height: 44px; background: var(--wdn-bg); border-color: var(--wdn-line-strong); border-radius: var(--wdn-radius-sm); font: 15px var(--wdn-font-body); color: var(--wdn-text); }
html[data-theme="fjord"] textarea { min-height: 88px; }
html[data-theme="fjord"] input[type="checkbox"], html[data-theme="fjord"] input[type="radio"] { min-height: 0; }
html[data-theme="fjord"] input:focus, html[data-theme="fjord"] select:focus, html[data-theme="fjord"] textarea:focus { outline: 2px solid var(--wdn-accent); }

/* ---------- tables ---------- */
html[data-theme="fjord"] th { font: 500 12px var(--wdn-font-mono); letter-spacing: 0.12em; color: var(--wdn-muted); background: transparent; border-bottom: 1px solid var(--wdn-line); }
html[data-theme="fjord"] td { border-bottom-color: var(--wdn-line-soft); font-size: 14px; }
html[data-theme="fjord"] th.n, html[data-theme="fjord"] td.n { font-family: var(--wdn-font-mono); color: var(--wdn-text-2); }
html[data-theme="fjord"] tbody tr:hover td { background: #18232A; }
html[data-theme="fjord"] tr:nth-child(even) { background: none; }

/* ---------- tags and badges ---------- */
html[data-theme="fjord"] .tag, html[data-theme="fjord"] .badge { font: 500 11px/1.5 var(--wdn-font-mono); letter-spacing: 0.12em; border-radius: 3px; }
html[data-theme="fjord"] .badge.good, html[data-theme="fjord"] .tag.now { background: rgba(111, 211, 168, 0.12); border-color: transparent; color: var(--wdn-accent); }
html[data-theme="fjord"] .badge.bad, html[data-theme="fjord"] .tag.warn { background: rgba(224, 138, 75, 0.12); border-color: transparent; color: var(--wdn-ember); }
html[data-theme="fjord"] .badge.warn, html[data-theme="fjord"] .tag.next { background: rgba(217, 201, 163, 0.1); border-color: transparent; color: var(--wdn-bone); }
html[data-theme="fjord"] .tag.vip { background: rgba(227, 193, 111, 0.12); border-color: transparent; color: var(--wdn-gold); }
html[data-theme="fjord"] .av { border-radius: var(--wdn-radius-sm); background: var(--wdn-surface-2); font-family: var(--wdn-font-display); font-weight: 800; }
html[data-theme="fjord"] .dot { box-shadow: none; }

/* ---------- signed out: the sign-in screen from the design ---------- */
html[data-theme="fjord"] main.alone { max-width: 440px; padding-top: 56px; }
html[data-theme="fjord"] main.alone .card { padding: 32px; position: relative; overflow: hidden; isolation: isolate; }
html[data-theme="fjord"] main.alone .card::after { content: "ᛉ"; position: absolute; right: -6px; top: -34px; z-index: -1; font: 180px/1 var(--wdn-font-rune); color: var(--wdn-surface-2); pointer-events: none; }
html[data-theme="fjord"] main.alone .card h1 { font-size: 44px; font-weight: 900; margin-bottom: 18px; }
html[data-theme="fjord"] main.alone button.primary { width: 100%; }