:root {
  --ink: #1a2432;
  --muted: #5b6b7c;
  --line: #dbe2ea;
  --bg: #f6f8fa;
  --card: #ffffff;
  --accent: #1e5b8f;
  --accent-light: #e7f0f8;
  --warn: #9a4b12;
  --warn-bg: #fdf1e6;
  --ok: #1f7a4d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.4;
}
header {
  background: var(--accent);
  color: white;
  padding: 18px 24px;
}
header h1 { margin: 0; font-size: 1.3rem; }
header p { margin: 4px 0 0; font-size: 0.9rem; opacity: 0.9; }

main { max-width: 1100px; margin: 0 auto; padding: 20px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.card h2 { margin-top: 0; font-size: 1.05rem; }

.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--line); }
.tab-btn {
  padding: 10px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.controls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  align-items: end;
}
label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }
input[type=number], select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.95rem;
}
.radio-row { display: flex; gap: 14px; align-items: center; padding: 8px 0; }
.radio-row label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.9rem; color: var(--ink); }

.checkbox-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.checkbox-list label { display: flex; align-items: flex-start; gap: 8px; font-size: 0.88rem; color: var(--ink); margin: 0; }
.checkbox-list input { margin-top: 3px; }
.note { font-size: 0.82rem; color: var(--muted); margin: 2px 0 0 24px; }

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { background: var(--accent-light); color: var(--accent); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* The Board View comparison table has 10 columns, so its headers wrap onto
   a second line (see the <br> in renderBoardView's header markup) and use
   tighter padding/font-size than other tables — that's what lets all ten
   columns fit at a normal window width instead of needing to scroll. */
.wide-table th {
  white-space: normal;
  line-height: 1.2;
  vertical-align: bottom;
  font-size: 0.78rem;
  padding: 6px 6px;
}
.wide-table td { padding: 6px 8px; font-size: 0.85rem; }
tr.protected td { color: var(--muted); font-style: italic; }
tr.changed td.num.new { color: var(--ok); font-weight: 600; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
.badge.protected { background: var(--warn-bg); color: var(--warn); }
.badge.default { background: var(--accent-light); color: var(--accent); }

.callout {
  background: var(--warn-bg);
  border: 1px solid #f0c896;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--warn);
  margin-bottom: 14px;
}
.callout.info { background: var(--accent-light); border-color: #b7d4e8; color: var(--accent); }

.stacking-note { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 0.85rem; color: var(--ink); }
.info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; padding: 0;
  border: 1px solid #b7d4e8; border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  font-size: 0.8rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.info-icon:hover, .info-icon:focus { background: var(--accent); color: #fff; }

/* Static hover/focus tooltip trigger (native title attribute) for a short,
   one-off explanation next to a form control — unlike .info-icon, this
   doesn't toggle anything on click, so it gets a "help" cursor instead of
   a "pointer" one to signal that. */
.tip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none;
  border: 1px solid #b7d4e8; border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  font-size: 0.7rem; font-weight: 700; line-height: 1;
  cursor: help; vertical-align: middle; margin-left: 2px;
}

.reminder-list { margin: 0; padding-left: 20px; font-size: 0.9rem; }
.reminder-list li { margin-bottom: 6px; }

.screenshot-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: 1px solid #b7d4e8; border-radius: 5px;
  background: var(--accent-light); color: var(--accent);
  font-size: 0.8rem; cursor: pointer; white-space: nowrap;
}
.screenshot-btn:hover, .screenshot-btn:focus { background: var(--accent); color: #fff; }

.hidden { display: none !important; }

.lightbox {
  position: fixed; inset: 0; background: rgba(20, 28, 38, 0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 30px; z-index: 1000;
}
.lightbox-inner { position: relative; max-width: 95vw; max-height: 90vh; }
.lightbox-inner img {
  display: block; max-width: 95vw; max-height: 90vh;
  border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.lightbox-close {
  position: absolute; top: -14px; right: -14px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--accent); color: #fff;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: #14456e; }

/* Bold red inline flag for a note that needs to stand out from the normal
   blue/muted note text — used sparingly, for standing reminders about a
   risk that isn't tracked row-by-row (see the Membership Fee / League
   description-field note in data.js, added 2026-09-01). */
.flag-red { color: #c0392b; font-weight: 700; }

/* Fees Page tab (added 2026-09-02): a bordered white "sheet" the live
   preview sits inside, so it reads apart from the tool's own gray/blue
   chrome and roughly like it'll look sitting on the club's white page
   background. The preview content itself carries no CSS of its own here —
   every rule it needs is inline in the generated markup, on purpose, so
   the exact same HTML is safe to paste into Curling Manager's Source Code
   box (see buildFeesPageHtml in app.js). */
.fees-page-preview-frame {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px 20px;
  overflow-x: auto;
}
/* Approval gate (added 2026-09-02): amber/unapproved until checked, then
   green — a plain checkbox card rather than the standard .callout, so it
   reads as an action to take rather than just information. */
.approval-gate {
  margin-top: 14px; padding: 12px 16px; border-radius: 8px;
  background: var(--warn-bg); border: 1px solid #f0c896;
}
.approval-gate.approved { background: #e9f7ef; border-color: #a8dcc0; }
.approval-gate label { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; font-size: 0.85rem; color: var(--ink); }
.approval-gate input { margin-top: 3px; flex: none; width: 16px; height: 16px; }

.export-actions { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; flex-wrap: wrap; }
.export-btn {
  padding: 8px 14px; border: 1px solid var(--accent); border-radius: 6px;
  background: var(--accent-light); color: var(--accent);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.export-btn:hover, .export-btn:focus { background: var(--accent); color: #fff; }
.export-btn[disabled] {
  border-color: var(--line); background: var(--bg); color: var(--muted);
  cursor: not-allowed;
}
.export-btn[disabled]:hover { background: var(--bg); color: var(--muted); }
.export-textarea {
  width: 100%; height: 220px; margin-top: 6px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.78rem;
  color: var(--ink); background: var(--bg); resize: vertical;
}

footer { text-align: center; color: var(--muted); font-size: 0.78rem; padding: 20px; }