/* The site's only theme, styled after ragol.co.uk / forums.ragol.co.uk: black
   background with a CRT scanline texture, a navy/cyan palette, and bold
   uppercase "Sarpanch" headings over "Open Sans" body text. Loaded on every
   page *after* style.css as an override layer - nearly everything in
   style.css already flows through the --* custom properties redefined below,
   so this file only needs to add the handful of things that aren't
   variable-driven (fonts, the scanline texture, uppercase letter-spaced
   headings/tabs, a bit of neon glow on hover).
   This file intentionally does NOT redefine anything under
   `@media (prefers-color-scheme: dark)` in style.css - the ragol look is
   one deliberate dark aesthetic, not a light/dark pair, so it applies the
   same regardless of the system color-scheme setting. */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Sarpanch:wght@600;700;800&display=swap");

:root {
  --bg: #000;
  --panel-bg: #024;
  --text: #fff;
  --muted: #b4d9ff;
  --border: #39c;
  --accent: #0ff;
  --accent-text: #012;
  --error: #ff4d5a;
  --warning-bg: #2a1200;
  --warning-border: #ff7a18;
  --input-bg: #001830;
  --hover-bg: rgba(0, 255, 255, 0.12);
}

body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg);
  background-image: url("./assets/images/scanlines.webp");
  background-repeat: repeat;
}

h1,
.panel h2,
.upload-column h3,
legend,
.item-picker-group-header {
  font-family: "Sarpanch", "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h1 {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.45);
}

.panel h2 {
  font-weight: 700;
}

a {
  color: var(--accent);
}

button {
  font-family: "Sarpanch", "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  box-shadow: 0 0 0 rgba(0, 255, 255, 0);
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}

button:hover {
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.55);
}

button.secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Character/section tabs styled like the site's nav links: uppercase,
   letter-spaced, with a glowing underline/left-border on hover or active,
   echoing .nav__link / .nav__link::after on ragol.co.uk. */
.char-tab,
.vtab {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.char-tab:hover,
.vtab:hover {
  color: var(--accent);
}

.char-tab.active {
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
}

.vtab.active {
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
  box-shadow: inset 2px 0 0 0 var(--accent);
}

.drop-zone:hover,
.drop-zone:focus-visible,
.drop-zone.dragover {
  box-shadow: 0 0 14px rgba(0, 255, 255, 0.3);
}

dialog.item-dialog {
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
}

table.items thead th {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72rem;
  font-weight: 600;
}

.icon-button:hover:not(:disabled) {
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

.bulk-give {
  font-family: "Sarpanch", "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}
.bulk-give:hover {
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.55);
  border-color: var(--accent);
  color: var(--accent);
}