/**
 * FPL Toolset — shared design system
 * -----------------------------------
 * Linked from every page, right before </head> — AFTER each page's own inline <style>
 * block, so these rules win the cascade for anything both define (buttons, inputs, tables,
 * note-text, etc.) without needing every page's inline styles rewritten. Genuinely
 * page-specific classes (FDR chips, position colors, chip-card layout...) aren't touched
 * here at all, so they're completely unaffected either way.
 *
 * Only visual polish lives in this file — no layout/structural rules that could conflict
 * with a page's own responsive breakpoints, and no class renames, so nothing here can break
 * existing JS hooks or functionality.
 */

:root {
  --fpl-purple: #37003c;
  --fpl-purple-light: #5c0a63;
  --fpl-green: #00c168;
  --fpl-green-dark: #1a9c4b;
  --fpl-navy: #1a1a2e;
  --fpl-red: #d0342c;
  --fpl-amber: #b8860b;

  --gray-50: #f9f9fb;
  --gray-100: #f2f2f6;
  --gray-200: #e7e7ee;
  --gray-300: #d7d7e0;
  --gray-500: #8a8a99;
  --gray-700: #4a4a56;
  --gray-900: #1d1d24;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(20, 10, 30, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 10, 30, 0.08);
  --transition: 150ms ease;
}

/* ---------- Base ---------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  color: var(--gray-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--fpl-purple);
  letter-spacing: -0.01em;
  font-weight: 700;
}

h1 { font-weight: 800; }

h2 {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gray-200);
  margin-top: 32px !important;
}

h3 { color: var(--gray-900); }

a { color: var(--fpl-purple); }
a:hover { color: var(--fpl-purple-light); }

hr { border: none; border-top: 1px solid var(--gray-200); margin: 20px 0; }

/* ---------- Buttons ---------- */
button, input[type="submit"], input[type="button"] {
  font-family: inherit;
  background: var(--fpl-purple);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
button:hover:not(:disabled), input[type="submit"]:hover:not(:disabled), input[type="button"]:hover:not(:disabled) {
  background: var(--fpl-purple-light);
  box-shadow: var(--shadow-md);
}
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled, input[type="submit"]:disabled { opacity: 0.55; cursor: default; box-shadow: none; }

/* Secondary / low-emphasis buttons and text-link-styled buttons (used throughout for
   "Refit", "Collapse", "undo", "Clear" etc.) get a lighter treatment automatically when
   they carry no background of their own. */
button[style*="background: none"], button[style*="background:none"] {
  background: none; color: var(--gray-700); box-shadow: none; font-weight: 500; padding: 0;
}
button[style*="background: none"]:hover, button[style*="background:none"]:hover {
  color: var(--fpl-purple); box-shadow: none; background: none;
}

/* ---------- Forms ---------- */
input, select, textarea {
  font-family: inherit;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.9rem;
  background: #fff;
  color: var(--gray-900);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--fpl-green-dark);
  box-shadow: 0 0 0 3px rgba(26, 156, 75, 0.15);
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--fpl-green-dark); }
label { font-size: 0.9rem; }

/* ---------- Tables ---------- */
table {
  border-collapse: collapse;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  overflow-y: hidden;
  display: block;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
th, td {
  border: none !important;
  border-bottom: 1px solid var(--gray-200) !important;
  padding: 9px 12px !important;
}
th {
  background: var(--fpl-purple) !important;
  color: #fff !important;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
tbody tr:nth-child(even) { background: var(--gray-50); }
tbody tr:hover { background: #f0eef4; }

/* ---------- Callouts (note/warning/error/hit-warning share one family, differing only
   by accent color, so they read as one consistent system rather than four ad-hoc styles) ---------- */
.note-text {
  color: var(--gray-700);
  font-size: 0.85rem;
  background: var(--gray-50);
  border-left: 3px solid var(--gray-300);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  margin: 8px 0;
}
.warning-text {
  background: #fff8e1 !important;
  border: none !important;
  border-left: 3px solid var(--fpl-amber) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  padding: 10px 14px !important;
  color: #7a5b00 !important;
  font-size: 0.88rem;
}
.error-text {
  color: #7a1f18;
  background: #fdecea;
  border-left: 3px solid var(--fpl-red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  font-size: 0.88rem;
}
.hit-warning {
  color: #7a1f18 !important;
  background: #fdecea;
  border-left: 3px solid var(--fpl-red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  font-weight: 700 !important;
  display: block;
  margin: 8px 0;
}

/* ---------- Panels / cards (controls bars, summaries, saved-team banners, chip cards,
   empty states, funds breakdowns) — one shared "elevated surface" treatment ---------- */
.controls, .summary, .saved-banner, .chip-card, .empty-state, details {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}
.controls { background: var(--gray-50) !important; border: 1px solid var(--gray-200); }
.summary { background: #eef8f0 !important; border: 1px solid #d4ecd8; }
.saved-banner { border: 1px solid #cde8cd !important; }
.chip-card { border: 1px solid var(--gray-200); background: #fff; padding: 14px 16px; }
.empty-state { border: 1px dashed var(--gray-300); background: var(--gray-50) !important; color: var(--gray-700); }
details {
  background: var(--gray-50); border: 1px solid var(--gray-200); padding: 10px 14px;
}
details summary { cursor: pointer; font-weight: 600; color: var(--fpl-purple); }

/* ---------- Badges / pills ---------- */
.cap-badge, .vc-badge, .chip-count, .team-slot-chip, .tool-badge {
  border-radius: 999px !important;
}
.cap-badge { background: #ffcc00 !important; box-shadow: var(--shadow-sm); }

/* ---------- Accessibility polish ---------- */
:focus-visible { outline: 2px solid var(--fpl-green-dark); outline-offset: 2px; }

/* ---------- Scrollable tables ---------- */
table::-webkit-scrollbar { height: 8px; }
table::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }