/* Championship Sim — CM01/02-style theme: dark navy/purple chrome,
   yellow/orange/cyan text accents on black data panels, and classic
   beveled Windows-98-era buttons, replacing the earlier "Manager's
   Dossier" parchment theme throughout. Class names are kept the same
   as the previous theme wherever possible (.card, .stat, table, etc.)
   so every template automatically inherits the new look even before
   its HTML gets individually rebuilt for the new layout. */

:root {
  --cm-sidebar: #0b0f3d;       /* left sidebar background */
  --cm-sidebar-line: #2a3070;  /* sidebar dividers */
  --cm-navy: #14184f;          /* secondary navy panels */
  --cm-purple: #5b1a8c;        /* club/header bar default (overridden by club color where available) */
  --cm-purple-dark: #2c1350;   /* tab bar background */
  --cm-tab-active: #000000;    /* active tab background */
  --cm-black: #000000;         /* dense data panel background (attribute grid, info lines) */
  --cm-yellow: #ffd400;        /* sidebar links, key labels */
  --cm-orange: #ff9d2e;        /* attribute/stat values */
  --cm-cyan: #29e0ff;          /* position labels, special call-outs */
  --cm-white: #f2f2f2;
  --cm-muted: #b9bad0;         /* secondary text on dark backgrounds */
  --cm-btn-face: #d4d0c8;      /* classic Windows button face */
  --cm-btn-light: #ffffff;
  --cm-btn-shadow: #6b6b6b;
  --cm-btn-dark: #3d3d3d;
  --cm-red: #b3001b;
  --cm-green: #1f7a3d;
  --cm-line: #3a3f7a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--cm-navy);
  color: var(--cm-white);
}

a { color: var(--cm-yellow); }

/* ---------- Overall layout: sidebar + main content ---------- */

.app-shell { display: flex; align-items: flex-start; min-height: 100vh; }

header {
  background: var(--cm-sidebar);
  color: var(--cm-white);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--cm-sidebar-line);
}
header .brand {
  color: var(--cm-yellow);
  font-weight: 700;
  font-size: 1.05em;
  text-decoration: none;
  letter-spacing: 0.2px;
}
header nav a { color: var(--cm-muted); margin-left: 12px; text-decoration: none; font-size: 0.85em; }
header nav a:hover { color: var(--cm-yellow); }
header .user { color: var(--cm-muted); margin-left: 8px; font-size: 0.85em; }

/* Left sidebar: club identity + main navigation, always visible once
   inside a game — the CM01/02 reference's vertical menu, adapted to
   this game's actual pages rather than a 1:1 label copy (there's no
   "Nations & Clubs" browser here, so the sidebar lists what actually
   exists: Squad, Tactics, Transfers, Competitions, Club). */
.sidebar {
  background: var(--cm-sidebar);
  width: 200px;
  flex-shrink: 0;
  min-height: calc(100vh - 45px);
  padding: 14px 0;
  border-right: 2px solid var(--cm-sidebar-line);
}
.sidebar .side-club {
  color: var(--cm-white);
  font-weight: 700;
  font-size: 1.05em;
  padding: 0 16px 14px;
  border-bottom: 1px solid var(--cm-sidebar-line);
  margin-bottom: 10px;
}
.sidebar .side-club .meta {
  display: block;
  color: var(--cm-muted);
  font-weight: 400;
  font-size: 0.72em;
  margin-top: 3px;
  font-family: 'IBM Plex Mono', monospace;
}
.sidebar nav a {
  display: block;
  color: var(--cm-yellow);
  text-decoration: none;
  padding: 9px 16px;
  font-size: 0.92em;
  font-weight: 600;
  border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: rgba(255,255,255,0.05); }
.sidebar nav a.active {
  background: var(--cm-black);
  border-left: 3px solid var(--cm-yellow);
  color: var(--cm-white);
}

.main-content { flex: 1; min-width: 0; }

/* Top bar inside the main content area — club-colored where possible
   (falls back to --cm-purple), the same role the reference image's
   magenta header bar plays. */
.gamebar {
  background: var(--cm-purple);
  color: white;
  padding: 12px 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.gamebar .clubname {
  font-weight: 700;
  font-size: 1.3em;
  letter-spacing: 0.2px;
}
.gamebar .meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.76em; color: rgba(255,255,255,0.8); }

main { max-width: 1000px; margin: 0 auto; padding: 18px 20px 60px; }

/* ---------- Flash messages ---------- */

.flash {
  background: var(--cm-black);
  border: 1px solid var(--cm-yellow);
  border-left: 4px solid var(--cm-yellow);
  color: var(--cm-yellow);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 0.92em;
}

/* ---------- Panels (.card) ---------- */

.card {
  background: var(--cm-navy);
  border: 1px solid var(--cm-line);
  border-radius: 2px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.card.narrow { max-width: 420px; margin: 40px auto; }
.card.dark { background: var(--cm-black); }

h1 {
  margin-top: 0;
  font-weight: 700;
  font-size: 1.4em;
  color: var(--cm-white);
}
h2 {
  font-weight: 700;
  font-size: 1.05em;
  color: var(--cm-cyan);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cm-line);
}
h3 {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.82em;
  color: var(--cm-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 14px 0 6px;
}

.muted { color: var(--cm-muted); font-size: 0.9em; }

/* ---------- Tabs (player page: Profile / Injuries & Bans / Contract /
   Transfer / History, and reusable anywhere a page needs sub-sections) ---------- */

.cm-tabs {
  display: flex;
  gap: 2px;
  background: var(--cm-purple-dark);
  padding: 6px 6px 0;
  flex-wrap: wrap;
}
.cm-tabs a {
  color: var(--cm-white);
  text-decoration: none;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 0.9em;
  border: 1px solid transparent;
  border-bottom: none;
}
.cm-tabs a.active {
  background: var(--cm-tab-active);
  color: var(--cm-yellow);
  border: 1px solid var(--cm-yellow);
  border-bottom: 1px solid var(--cm-tab-active);
}
.cm-tabs a:not(.active):hover { background: rgba(255,255,255,0.08); }

/* ---------- Dense data panel (attribute grid, player info line) ---------- */

.cm-infoline {
  background: var(--cm-black);
  color: var(--cm-yellow);
  padding: 10px 16px;
  font-weight: 600;
}

.cm-attr-grid {
  background: var(--cm-black);
  padding: 12px 16px 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 24px;
}
.cm-attr-col { display: flex; flex-direction: column; }
.cm-attr-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.88em;
}
.cm-attr-row .name { color: var(--cm-white); }
.cm-attr-row .value { color: var(--cm-orange); font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.cm-position-label {
  color: var(--cm-cyan);
  font-weight: 700;
  font-size: 1.05em;
  padding: 14px 18px;
}

/* ---------- Tables (dense CM01/02 stat grid) ---------- */

table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.9em; }
th {
  text-align: left;
  padding: 7px 9px;
  border-bottom: 2px solid var(--cm-line);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 0.7em;
  color: var(--cm-cyan);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--cm-line); color: var(--cm-white); }
tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
tr:hover td { background: rgba(255,212,0,0.1); }
tr.current td { background: rgba(255,212,0,0.18) !important; }
tr.injured-row td { background: rgba(179,0,27,0.18) !important; }

/* ---------- Sortable tables (squad page: age, attribute columns) ---------- */

th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--cm-yellow); }
th.sortable .sort-arrow { display: inline-block; margin-left: 3px; color: var(--cm-yellow); }
th.sortable:not([data-sort-dir])::after {
  content: "\2195";
  display: inline-block;
  margin-left: 5px;
  font-size: 0.85em;
  color: var(--cm-muted);
  vertical-align: middle;
}
td.col-num, th.sortable.col-num { text-align: right; }
td.col-num { font-variant-numeric: tabular-nums; }
.stat-val { color: var(--cm-orange); font-weight: 600; }

/* ---------- Filter toolbar (squad page position/attribute filters) ---------- */

.filter-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px;
  margin: 10px 0 6px; padding: 12px 14px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--cm-line); border-radius: 6px;
}
.filter-bar label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72em;
  text-transform: uppercase; letter-spacing: 0.4px; color: var(--cm-cyan);
}
.filter-bar select { min-width: 150px; }
.filter-bar .clear-filters { align-self: center; font-size: 0.85em; }

/* ---------- Status tags ---------- */

.tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 3px;
  display: inline-block;
  text-transform: uppercase;
}
.tag.injured { background: rgba(179,0,27,0.25); color: #ff8a8a; }
.tag.suspended { background: rgba(179,0,27,0.15); color: #ff8a8a; }
.tag.captain { background: rgba(255,212,0,0.2); color: var(--cm-yellow); }
.tag.loan { background: rgba(41,224,255,0.15); color: var(--cm-cyan); }
.tag.international { background: rgba(255,157,46,0.2); color: var(--cm-orange); }
.tag.good { background: rgba(31,122,61,0.3); color: #6fd68d; }

/* ---------- Forms ---------- */

form label { display: block; margin-bottom: 12px; font-size: 0.9em; color: var(--cm-muted); }
form input, form select {
  display: block;
  width: 100%;
  padding: 9px;
  margin-top: 4px;
  border: 1px solid var(--cm-line);
  border-radius: 2px;
  background: var(--cm-black);
  font-size: 1em;
  font-family: inherit;
  color: var(--cm-white);
}
form input:focus, form select:focus {
  outline: 2px solid var(--cm-yellow);
  outline-offset: -1px;
  border-color: var(--cm-yellow);
}
form.inline { display: flex; gap: 6px; align-items: center; }
form.inline select { width: auto; margin-top: 0; }

/* Classic beveled Windows-98-style button — raised light edge on the
   top/left, dark shadow on the bottom/right, exactly the look of the
   reference image's "Back"/"Next" controls. */
button, .button {
  background: var(--cm-btn-face);
  color: #1a1a1a;
  border: 2px solid;
  border-color: var(--cm-btn-light) var(--cm-btn-dark) var(--cm-btn-dark) var(--cm-btn-light);
  padding: 9px 18px;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  margin-top: 8px;
  font-family: inherit;
}
button:hover, .button:hover { background: #e4e0d8; }
button:active, .button:active {
  border-color: var(--cm-btn-dark) var(--cm-btn-light) var(--cm-btn-light) var(--cm-btn-dark);
}
button.secondary, .button.secondary { background: #c9b8d8; }
button.secondary:hover, .button.secondary:hover { background: #bda6cf; }

/* ---------- Navigation helpers within a page ---------- */

.subnav { margin-top: 12px; display: flex; gap: 16px; }
.subnav a { color: var(--cm-cyan); font-weight: 700; text-decoration: none; }
.subnav a:hover { text-decoration: underline; }

/* ---------- Stat blocks ---------- */

.grid { display: flex; gap: 14px; margin: 12px 0; flex-wrap: wrap; }
.stat {
  flex: 1;
  min-width: 120px;
  background: var(--cm-black);
  border-left: 3px solid var(--cm-yellow);
  padding: 10px 12px;
  text-align: left;
}
.stat span {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7em;
  color: var(--cm-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.stat strong { font-size: 1.4em; color: var(--cm-orange); font-weight: 700; }

/* ---------- Form/results strip ---------- */

.form-strip { display: flex; gap: 5px; margin-top: 8px; }
.form-strip span {
  width: 24px; height: 24px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72em; font-weight: 700; color: white;
}
.form-strip .fw { background: var(--cm-green); }
.form-strip .fd { background: #7a7a3c; }
.form-strip .fl { background: var(--cm-red); }

/* ---------- Live match scoreboard ---------- */

.scoreboard {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--cm-line);
  margin-bottom: 18px;
}
.scoreboard-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  background: var(--cm-purple);
  color: white;
  font-weight: 700;
  font-size: 1.15em;
  text-align: center;
}
.scoreboard-side.away { background: var(--cm-red); }
.scoreboard-mid {
  background: var(--cm-black);
  color: var(--cm-yellow);
  padding: 14px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 150px;
}
.scoreboard-score {
  font-weight: 700;
  font-size: 2em;
  letter-spacing: 1px;
  color: var(--cm-white);
}
.scoreboard-minute {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75em;
  letter-spacing: 0.5px;
  color: var(--cm-yellow);
  margin-top: 2px;
}

/* ---------- Commentary ---------- */

.commentary { max-height: 420px; overflow-y: auto; }
.commentary-line {
  padding: 8px 4px;
  border-bottom: 1px solid var(--cm-line);
  font-size: 0.92em;
  color: var(--cm-white);
}
.commentary-line.goal {
  background: rgba(255,212,0,0.12);
  font-weight: 600;
  border-left: 3px solid var(--cm-yellow);
  padding-left: 10px;
}
.minute {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--cm-cyan);
  font-size: 0.82em;
  margin-right: 8px;
}

/* ---------- Misc ---------- */

.waiting { color: #ff8a8a; font-weight: 600; }
.ready { color: #6fd68d; font-weight: 600; }

/* ---------- Tactics pitch diagram ---------- */

.cm-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  max-width: 420px;
  margin: 14px auto;
  background: #0c2415;
  border: 2px solid #1d4a2c;
  border-radius: 4px;
  touch-action: none; /* the pitch itself handles vertical drag; don't let the page scroll fight it */
  user-select: none;
}
.cm-pitch-markings { position: absolute; inset: 0; pointer-events: none; }
.cm-pitch-halfway {
  position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px solid rgba(255,255,255,0.25);
}
.cm-pitch-circle {
  position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,0.25); border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cm-pitch-box {
  position: absolute; left: 50%; width: 46%; height: 14%;
  border: 2px solid rgba(255,255,255,0.25); border-top: none;
  transform: translateX(-50%);
}
.cm-pitch-box-top { top: 0; border-top: none; border-bottom: 2px solid rgba(255,255,255,0.25); }
.cm-pitch-box-bottom { bottom: 0; }

.cm-token {
  position: absolute;
  width: 15%;
  aspect-ratio: 1;
  min-width: 40px;
  min-height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--cm-navy);
  border: 2px solid var(--cm-cyan);
  cursor: grab;
  transition: background 0.15s, border-color 0.15s;
  z-index: 2;
}
.cm-token:active { cursor: grabbing; z-index: 3; }
.cm-token.cm-dragging { transition: none; box-shadow: 0 0 0 4px rgba(255,212,0,0.25); }
.cm-token-pos {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.55em;
  color: var(--cm-muted);
  line-height: 1;
}
.cm-token-name {
  font-size: 0.62em;
  font-weight: 700;
  color: var(--cm-white);
  line-height: 1.1;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
/* A cool/neutral/warm progression, deliberately further apart on the
   colour wheel than the original blue-vs-cyan pairing — those sat too
   close together, especially glowing similarly against the dark navy
   background, so telling a "stay back" token from a "balanced" one
   took a closer look than a tactics screen should need. Balanced also
   gets a genuinely neutral grey rather than another saturated colour,
   since it's the "nothing special set" state and shouldn't visually
   compete with the two that mean something changed. A faint fill tint
   backs up the border colour too, so the state reads at a glance
   without having to focus on a 2px ring specifically. */
.cm-token.cm-freedom-stay_back { border-color: #4d7fff; box-shadow: inset 0 0 14px rgba(77,127,255,0.18); }
.cm-token.cm-freedom-balanced { border-color: #8b93a8; }
.cm-token.cm-freedom-get_forward { border-color: #ff6a35; box-shadow: inset 0 0 14px rgba(255,106,53,0.18); }

.cm-pitch-legend {
  display: flex;
  gap: 18px;
  justify-content: center;
  font-size: 0.78em;
  color: var(--cm-muted);
  margin-top: 4px;
}
.cm-swatch {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid;
  margin-right: 5px;
  vertical-align: middle;
}
.cm-swatch.cm-freedom-stay_back { border-color: #4d7fff; }
.cm-swatch.cm-freedom-balanced { border-color: #8b93a8; }
.cm-swatch.cm-freedom-get_forward { border-color: #ff6a35; }

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  /* flex-direction:column alone doesn't stop a flex child growing wider
     than the viewport to fit its widest content (a table, the attribute
     grid) — confirmed directly: .main-content was measured stretching
     to 574px against a 375px viewport without this. */
  .main-content { width: 100%; min-width: 0; }
  .sidebar { width: 100%; min-height: 0; border-right: none; border-bottom: 2px solid var(--cm-sidebar-line); }
  .sidebar nav { display: flex; flex-wrap: wrap; }
  .sidebar nav a { border-left: none; border-bottom: 3px solid transparent; padding: 8px 12px; }
  .sidebar nav a.active { border-left: none; border-bottom: 3px solid var(--cm-yellow); }

  main { padding: 12px 12px 40px; }
  .card { padding: 14px 14px; }

  header { flex-wrap: wrap; gap: 4px; padding: 12px 16px; }
  .gamebar { flex-wrap: wrap; gap: 4px; padding: 12px 16px; }

  .cm-attr-grid { grid-template-columns: repeat(2, 1fr); gap: 0 14px; }

  /* Data tables (squad, transfers, scouting, fixtures...) are the worst
     offender on a phone — a squad page's table alone runs to 13
     columns, confirmed directly to overflow a 375px viewport by
     546px before this fix, with the rest of the row completely
     unreachable since there was nothing to scroll independently of
     the page itself. Standard responsive-table technique: the table
     becomes its own horizontally-scrollable region (rather than
     blowing out the whole page's width), and the first column (always
     the player/item name in every table this game has) stays pinned
     in view via position:sticky while the rest scrolls underneath it —
     so you can scroll right to see stats without losing track of
     which row they belong to. */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  th:first-child, td:first-child {
    position: sticky;
    left: 0;
    background: var(--cm-navy);
    box-shadow: 2px 0 3px -2px rgba(0,0,0,0.5);
  }
  tr:nth-child(even) td:first-child { background: #191f5e; }
  tr:hover td:first-child { background: rgba(255,212,0,0.15); }
  tr.current td:first-child { background: rgba(255,212,0,0.22); }
  tr.injured-row td:first-child { background: rgba(179,0,27,0.22); }

  /* A form with several side-by-side selects (substitutions, offers)
     is cramped and hard to tap accurately at phone width — stack
     instead of forcing everything onto one line. */
  form.inline { flex-direction: column; align-items: stretch; gap: 8px; }
  form.inline select { width: 100%; }

  /* min-width on the scoreboard's middle section and stat blocks can
     squeeze the flex items around them uncomfortably tight on a narrow
     phone — relax both so long club names and stat labels have room
     to actually fit rather than being crushed to their min-width. */
  .scoreboard-mid { min-width: 110px; padding: 10px 12px; }
  .scoreboard-side { font-size: 0.95em; padding: 14px 8px; }
  .scoreboard-score { font-size: 1.6em; }
  .stat { min-width: 100px; }
  .subnav { flex-wrap: wrap; gap: 10px 16px; }
}