/* ===== Design tokens ===== */
:root {
  /* Brand */
  --color-primary: #28a745;
  --color-primary-hover: #1f8a37;
  --color-primary-soft: #eaffea;
  --color-primary-soft-border: #bbf7d0;

  /* Semantic */
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-soft: #fef2f2;
  --color-danger-soft-border: #fecaca;
  --color-info: #2563eb;      /* used sparingly: "last drawn" / live-state highlights */
  --color-info-soft: #eff6ff;
  --color-info-soft-border: #bfdbfe;
  --color-warn: #f59e0b;
  --color-warn-soft: #fff7ed;
  --color-warn-text: #92400e;

  /* Neutrals */
  --color-bg: #f9fafb;
  --color-surface: #ffffff;
  --color-surface-muted: #f3f4f6;
  --color-border: #e5e7eb;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-header-bg: #1f2937;

  /* Scale */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .08);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

/* ===== Base (site-wide) ===== */
* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--color-bg);
  margin: 0;
  padding: 0;
  color: var(--color-text);
  line-height: 1.45;
}

header {
  background: var(--color-header-bg);
  color: #fff;
  padding: var(--space-4) var(--space-6);
  border-bottom: 3px solid var(--color-primary);
}
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
header h1 { margin: 0; font-size: 1.3rem; }

.nav-toggle {
  display: none;
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--radius-sm); padding: .35rem .7rem; font: inherit; cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .1); }

nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-3); }
nav a { color: #fff; text-decoration: none; opacity: .85; padding: .2rem 0; }
nav a:hover { opacity: 1; text-decoration: underline; }

/* Below this width the nav bar can't fit inline (this app's own admin nav
   has ~9 links) and the "|" separator glyphs used to break awkwardly across
   wrapped lines — collapse into a toggleable stacked menu instead (TODO #93). */
@media (max-width: 700px) {
  .nav-toggle { display: inline-block; }
  nav { display: none; flex-direction: column; gap: 0; }
  nav.open { display: flex; }
  nav a { padding: .6rem 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
  nav a:last-child { border-bottom: none; }
}

main { max-width: 1100px; margin: 0 auto; padding: var(--space-6); }

.site-footer {
  max-width: 1100px; margin: var(--space-8) auto 0; padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .9rem;
}
.site-footer a { color: var(--color-text-muted); }
.site-footer .sep { margin: 0 var(--space-2); opacity: .5; }

h2 {
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--space-2);
  margin-top: var(--space-8);
}
h2:first-child { margin-top: 0; }

/* Utilities */
.hidden { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.badge {
  display: inline-block; margin-left: var(--space-2); padding: .15rem .5rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-muted); font-weight: 600; font-size: .85rem;
}
.badge-open { background: var(--color-primary-soft); border-color: var(--color-primary-soft-border); color: #166534; }
.badge-closed { background: var(--color-surface-muted); border-color: var(--color-border); color: var(--color-text-muted); }

.stack { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.actions-inline { display: inline; padding: 0; margin: 0; }
.text-muted { color: var(--color-text-muted); }
.nowrap { white-space: nowrap; }

/* Forms & Buttons */
form {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
form label { display: block; margin-bottom: var(--space-3); }
.field-hint { margin: -0.4rem 0 var(--space-3); }
.checkbox-label { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.override-place-wrap { margin-top: var(--space-2); }
form input, form select, form textarea {
  padding: .45rem .6rem; margin-left: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font: inherit; background: var(--color-surface); color: var(--color-text);
}
/* The "Choose File" button part of a file input is a native OS control by
   default and ignores font-family — restyle just that part to match the
   rest of the button family instead of clashing with it. */
form input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: .4rem .8rem; margin-right: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-muted); color: var(--color-text);
}
form input[type="file"]::file-selector-button:hover { background: #e9eaed; }

button, .btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text);
  padding: .5rem .9rem;
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Buttons that are actually <a> tags shouldn't look like links */
a.primary-btn, a.secondary-btn, a.btn-danger, a.link-btn {
  display: inline-block;
  text-decoration: none;
}
button:hover, .btn:hover { background: #e9eaed; }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }

.primary-btn, .btn-primary {
  font-size: 1.05rem;
  padding: .75rem 1.3rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
}
.primary-btn:hover, .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.secondary-btn, .btn-secondary {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn-danger {
  background: var(--color-surface);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger); color: #fff; }

.btn-sm { padding: .2rem .55rem; font-size: .82rem; border-radius: var(--radius-sm); }

.round-link { font-weight: 600; color: var(--color-primary); text-decoration: none; }
.round-link:hover { text-decoration: underline; }

/* Round open/closed (TODO #94): highlight the rare open round instead of
   marking every closed one — there's normally at most one open round, so a
   closed-row tint would style nearly the whole table (and a muted gray
   there read as too close to the header row's own muted background).
   Closed rows get no styling at all; deliberately not the agents'
   diagonal-hatch "inactive" pattern (admin.css) either way. */
tr.round-open { background: var(--color-primary-soft); }
tr.round-open td:first-child { border-left: 4px solid var(--color-primary); }

.claim-status { font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.claim-status-approved { color: var(--color-primary); }
.claim-status-rejected { color: var(--color-danger); }
.claim-status-pending { color: var(--color-text-muted); }
.claim-status-unconfirmed { opacity: .5; }

/* Required/optional marks for opted-in forms */
.form-auto-mark label:has(> :is(input, select, textarea)[required])::after {
  content: " *";
  color: var(--color-danger);
  margin-left: .2rem;
}
.form-auto-mark label:has(> :is(input, select, textarea):not([required]))::after {
  content: " (valgfritt)";
  color: var(--color-text-muted);
  margin-left: .2rem;
  font-weight: 400;
  font-size: .9em;
}

/* Focus ring (applies to any text input/select, not just one id) */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, .25);
  border-color: var(--color-primary);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
  background: var(--color-surface);
}
th, td { border: 1px solid var(--color-border); padding: .6rem; text-align: left; vertical-align: top; }
th { background: var(--color-surface-muted); }

/* Winners (full table + compact list) */
/* A table that grows unbounded (e.g. an agent's daily sales reports — 100+
   rows/year, TODO #95) shouldn't push the rest of the page out of reach:
   cap its height and let it scroll internally, with the header pinned so
   the columns stay legible while scrolling. Already wraps nearly every
   table in this app, so this applies retroactively everywhere for free. */
.table-scroll { overflow-x: auto; overflow-y: auto; max-height: 65vh; }
.table-scroll th { position: sticky; top: 0; z-index: 1; }
/* For a table that's inherently small and bounded (TODO #114 — a round has
   at most ~18 winner rows, never growing beyond "a couple of pages") — same
   horizontal-overflow safety as .table-scroll, without capping the height
   or scrolling internally. */
.table-flow { overflow-x: auto; }
.winners-table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
.winners-table tfoot td { font-weight: 600; background: var(--color-surface-muted); }
.winners-table th, .winners-table td {
  border: 1px solid var(--color-border);
  padding: .55rem .6rem;
  text-align: left;
  vertical-align: top;
}
/* Right-align numeric columns (TODO #78/#79) — content only, not the
   header, so td.num alone (not th.num) — needs the specificity to
   out-rank ".winners-table th/td"'s text-align:left. */
td.num { text-align: right; }
.game-sep td {
  background: var(--color-surface-muted);
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
}
.empty-row td { background: var(--color-surface-muted); color: var(--color-text-muted); font-style: italic; }

.winners-mini { width: 100%; border-collapse: collapse; font-size: .92rem; }
.winners-mini thead th { font-weight: 700; }
.winners-mini th, .winners-mini td {
  border-bottom: 1px solid var(--color-border);
  padding: .3rem .4rem;
  text-align: left;
}
.winners-mini .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Standalone .mono (TODO #116) — was previously only scoped under
   .winners-mini/.card-header; several templates already use a bare
   class="mono" expecting this (e.g. admin_claim_detail.html's account/
   reference numbers), so this also fixes those, not just the new use. */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Blocks & Hero */
.game-block {
  margin: var(--space-8) 0;
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.game-block h3 { margin-top: 0; color: var(--color-text); }
.game-block.game-next {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(40, 167, 69, .08) inset;
}
.row-next { background: var(--color-primary-soft); font-weight: 600; }

.active-round { border: 2px solid var(--color-primary); background: var(--color-primary-soft); }
.active-round h2 { color: var(--color-primary-hover); }

.hero {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
}
.hero-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-8); max-width: 640px; width: 100%; text-align: center;
  box-shadow: var(--shadow-md);
}
.hero-card h2 { margin: 0 0 var(--space-2); border: 0; padding: 0; }
.hero-card hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }
.hero-form { margin: var(--space-4) 0 var(--space-6); }
.hero-form-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: 1fr 1fr 1.2fr;
  margin-bottom: var(--space-3);
}
@media (max-width: 640px) { .hero-form-grid { grid-template-columns: 1fr; } }
/* Without an explicit width, <input> sizes itself intrinsically (browser
   heuristics differ per type/min/max — e.g. week's max="53" makes it much
   narrower than year's unbounded number input), so labels ended up
   inconsistently inline-with-input vs. stacked-above-input. Force every
   field in this grid to the same layout. */
.hero-form-grid input { width: 100%; }

.hero-links {
  display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
}
.link-btn {
  display: inline-block; padding: .5rem .9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); background: var(--color-surface-muted);
}
.link-btn:hover { background: #e9eaed; }
.link-btn.danger { color: var(--color-danger); border-color: var(--color-danger-soft-border); background: var(--color-surface); }
.link-btn.danger:hover { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }

/* Typeahead */
.typeahead-menu { position: relative; }
.typeahead-menu ul {
  position: absolute; z-index: 20; list-style: none; margin: 0; padding: 0;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  max-height: 240px; overflow-y: auto; width: 100%;
  box-shadow: var(--shadow-md);
}
.typeahead-menu li { padding: .45rem .6rem; cursor: pointer; }
.typeahead-menu li:hover, .typeahead-menu li.active { background: var(--color-info-soft); }
.typeahead-muted { color: var(--color-text-muted); font-size: .9em; }

/* Subtle attention pulse (generic) */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
  30% { box-shadow: 0 0 0 6px rgba(40, 167, 69, .12); }
  100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}
.flow-pulse { animation: pulse 500ms ease-out 1; }

/* Notes/Warnings */
.note { padding: .4rem .5rem; border-radius: var(--radius-sm); }
.note.error { border: 1px solid var(--color-danger-soft-border); background: var(--color-danger-soft); color: var(--color-danger-hover); }
.note.success { border: 1px solid var(--color-primary-soft-border); background: var(--color-primary-soft); color: #166534; }
.earlier-flag {
  font-size: .85rem; padding: .1rem .35rem; border: 1px solid var(--color-warn);
  background: var(--color-warn-soft); color: var(--color-warn-text); border-radius: var(--radius-sm);
}
.note.warn {
  border: 1px solid var(--color-warn); background: var(--color-warn-soft); color: var(--color-warn-text);
}