/* ============================================================
   MKS Bridge — light theme override
   Loaded AFTER /_design/tokens.css to flip colors for light mode.
   ============================================================ */

:root {
  --color-bg:             #ffffff;
  --color-surface:        #fafaf9;   /* stone-50 */
  --color-surface-2:      #f5f5f4;   /* stone-100 */
  --color-surface-3:      #e7e5e4;   /* stone-200 */

  --color-border:         #e7e5e4;   /* stone-200 */
  --color-border-soft:    #f5f5f4;   /* stone-100 */
  --color-border-strong:  #d6d3d1;   /* stone-300 */

  --color-text:           #1c1917;   /* stone-900 body */
  --color-text-strong:    #0a0a0a;   /* near-black headings */
  --color-text-muted:     #44403c;   /* stone-700 */
  --color-text-dim:       #78716c;   /* stone-500 */
  --color-text-fade:      #a8a29e;   /* stone-400 */
  --color-text-ghost:     #d6d3d1;   /* stone-300 */

  --color-accent:         #4f46e5;   /* indigo-600, slightly deeper for contrast on white */
  --color-accent-soft:    #eef2ff;   /* indigo-50 */

  /* Also expose semantic aliases some of our inline styles reference */
  --text:                 #1c1917;
  --text-dim:             #78716c;
  --accent:               #4f46e5;
}

/* Body base */
html, body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* KPI cards, hubs, diagrams, travellers — override hardcoded dark hex */
.kpi-card,
.bridge-diagram,
.side-panel,
.stats-panel,
.board-nav,
.event-card {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

.bd-hand,
.board-nav button,
.board-nav a,
.filter-bar input,
.filter-bar select {
  background: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

/* Active nav button should keep accent */
.board-nav button.active,
.board-nav a.active,
.tab.active {
  background: var(--color-accent) !important;
  color: #ffffff !important;
  border-color: var(--color-accent) !important;
}

/* Table cells */
table.rankings th,
table.scorecard th,
table.trav th {
  background: var(--color-surface-2) !important;
  color: var(--color-text-dim) !important;
}
table.rankings th,
table.rankings td,
table.scorecard th,
table.scorecard td,
table.trav th,
table.trav td {
  border-bottom-color: var(--color-border) !important;
}
table.rankings tr:hover td,
table.scorecard tr:hover td {
  background: var(--color-surface-2) !important;
}

/* Our-pair highlight row */
table.trav tr.our-row td {
  background: var(--color-accent-soft) !important;
}

/* Suit colors — pop more on light bg */
.suit-h, .suit-d { color: #dc2626 !important; }
.suit-s, .suit-c { color: #1c1917 !important; }

/* Points coloring — slightly deeper green/red for contrast */
.pts-pos, .side-pts.pos { color: #16a34a !important; }
.pts-neg, .side-pts.neg { color: #dc2626 !important; }
.pts-zero { color: var(--color-text-dim) !important; }

/* Seat active border stays indigo */
.bd-hand.seat-active {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 1px var(--color-accent) !important;
}

/* Section badges */
.section-A { color: #4f46e5; border-color: #4f46e5; }
.section-B { color: #d97706; border-color: #d97706; }
.section-C { color: #16a34a; border-color: #16a34a; }

/* Vulnerability colors */
.vul-all { color: #dc2626 !important; }
.vul-ns, .vul-ew { color: #d97706 !important; }

/* Inline dim-colored text used in some places */
[style*="color:var(--text-dim)"],
[style*="color: var(--text-dim)"] {
  color: var(--color-text-dim) !important;
}

/* Subtle shadows on cards for depth */
.kpi-card,
.event-card,
.bridge-diagram,
.side-panel,
.stats-panel {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* Hero landing */
.hero { background: linear-gradient(180deg, #fafaf9 0%, #ffffff 100%); }

/* Links */
a { color: var(--color-accent); }

/* Footer */
footer { border-top-color: var(--color-border) !important; color: var(--color-text-dim) !important; }

/* Base overrides for hardcoded greys in base.css */
h3, strong { color: var(--color-text-strong) !important; }
h2 { border-top-color: var(--color-border) !important; }
.subtitle { border-bottom-color: var(--color-border) !important; }
.section-header { border-top-color: var(--color-border) !important; }
.section-header h2 { color: var(--color-text-strong) !important; }

/* ============================================================
   Readability pass — larger type, more padding, easier targets
   ============================================================ */

html { font-size: 17px; }                /* default is 16 — nudges everything up globally */
body { line-height: 1.6 !important; }

h1 { font-size: 32px !important; line-height: 1.25 !important; }
h2 { font-size: 22px !important; line-height: 1.3 !important; }
h3 { font-size: 18px !important; }

.subtitle, .breadcrumb { font-size: 15px !important; }
.breadcrumb { margin-bottom: 20px !important; }

/* KPI cards */
.kpi-card { padding: 22px 24px !important; }
.kpi-label { font-size: 13px !important; letter-spacing: 0.05em; }
.kpi-value { font-size: 34px !important; line-height: 1.1; margin: 6px 0 4px !important; }
.kpi-delta { font-size: 14px !important; color: var(--color-text-dim) !important; }

/* Landing hero */
.hero h1 { font-size: 54px !important; }
.hero .tagline { font-size: 19px !important; line-height: 1.55 !important; }
.event-card { padding: 28px 30px !important; }
.event-card .event-title { font-size: 20px !important; margin-bottom: 6px !important; }
.event-card .event-meta { font-size: 15px !important; }
.event-card .event-stats { font-size: 14px !important; margin-top: 10px !important; }

/* Tables — the main readability win */
table.rankings,
table.scorecard,
table.trav {
  font-size: 15px !important;
}
table.rankings th,
table.scorecard th,
table.trav th {
  font-size: 12px !important;
  padding: 12px 14px !important;
  letter-spacing: 0.06em;
}
table.rankings td,
table.scorecard td,
table.trav td {
  padding: 11px 14px !important;
}

/* Player name column in travellers — don't shrink it */
table.trav td.left[style*="font-size:11px"],
table.scorecard td.left[style*="font-size:11px"] {
  font-size: 14px !important;
  color: var(--color-text-muted) !important;
}

/* Filter bar */
.filter-bar input, .filter-bar select {
  padding: 11px 14px !important;
  font-size: 15px !important;
  min-width: 280px;
}
.filter-bar { gap: 14px !important; margin-bottom: 20px !important; }
#resultCount { font-size: 14px !important; }

/* Board nav — bigger tap targets */
.board-nav { padding: 14px !important; gap: 6px !important; }
.board-nav button,
.board-nav a {
  padding: 10px 14px !important;
  font-size: 14px !important;
  min-width: 44px !important;
  min-height: 40px !important;
}
.board-nav button.played::after,
.board-nav a.played::after {
  width: 7px !important; height: 7px !important;
  top: 3px !important; right: 3px !important;
}

/* Boards grid on event page */
.boards-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important; gap: 8px !important; }
.board-tile { padding: 14px !important; font-size: 16px !important; }

/* Bridge diagram — bigger cards, larger suit symbols */
.bridge-diagram {
  padding: 24px !important;
  gap: 10px !important;
  min-height: 420px !important;
  font-size: 16px !important;
}
.bd-hand { padding: 12px 16px !important; }
.bd-hand .seat { font-size: 13px !important; margin-bottom: 8px !important; }
.bd-hand .suit-line { line-height: 1.75 !important; }
.bd-center { font-size: 13px !important; }
.bd-center .bd-num { font-size: 42px !important; }

/* Side panel (result at our table, board stats) */
.side-panel, .stats-panel {
  padding: 22px !important;
  font-size: 15px !important;
}
.side-panel h3, .stats-panel h3 {
  font-size: 16px !important;
  margin-bottom: 14px !important;
}
.side-row, .stats-row { padding: 9px 0 !important; }

/* Tabs */
.tab { padding: 14px 20px !important; font-size: 15px !important; }

/* Section badges a touch bigger */
.section-badge { padding: 3px 10px !important; font-size: 13px !important; }

/* Board-meta (dealer / vul) */
.board-meta { font-size: 14px !important; }
.board-header h2 { font-size: 20px !important; }

/* Links — slight underline on hover keeps cues clear */
a { text-underline-offset: 2px; }

/* Footer */
footer { font-size: 14px !important; padding: 48px 24px !important; }

/* Clickable row affordance stronger */
table.rankings tr.clickable td,
table.scorecard tr.clickable td { cursor: pointer; }

/* Mobile — keep things comfortable on phones too */
@media (max-width: 640px) {
  html { font-size: 16px; }
  .hero { padding: 60px 20px 40px !important; }
  .hero h1 { font-size: 40px !important; }
  .kpi-value { font-size: 28px !important; }
  table.rankings th, table.rankings td,
  table.scorecard th, table.scorecard td,
  table.trav th, table.trav td {
    padding: 10px 10px !important;
  }
}

/* ---- Contrast & detail pass ---- */

/* Column headers were too dim — darken and drop the uppercase */
table.rankings th,
table.scorecard th,
table.trav th {
  color: #44403c !important;       /* stone-700 instead of stone-500 */
  font-size: 13px !important;
  text-transform: none !important; /* easier than uppercase */
  letter-spacing: 0 !important;
  font-weight: 600 !important;
}

/* KPI delta text (e.g. "22 boards played", "Board 7") — darker */
.kpi-delta { color: #57534e !important; }   /* stone-600 */

/* Subtitle / breadcrumb — bump contrast a step */
.subtitle, .breadcrumb { color: #44403c !important; }
.breadcrumb a { color: #44403c !important; }
.breadcrumb a:hover { color: var(--color-accent) !important; }

/* Event card + side panel meta — medium not light */
.event-card .event-meta,
.event-card .event-stats,
.board-meta,
.side-row .label,
.stats-row .label { color: #57534e !important; }

/* Suit symbols in tables — bigger */
table.scorecard td,
table.trav td {
  font-size: 15.5px !important;
}
table.scorecard .suit-h, table.scorecard .suit-d,
table.scorecard .suit-s, table.scorecard .suit-c,
table.trav .suit-h, table.trav .suit-d,
table.trav .suit-s, table.trav .suit-c {
  font-size: 17px !important;
}

/* Bridge diagram: bigger suit symbols, clearer pip readability */
.bridge-diagram .suit-line { font-size: 17px !important; }
.bridge-diagram .suit-line .suit-s,
.bridge-diagram .suit-line .suit-h,
.bridge-diagram .suit-line .suit-d,
.bridge-diagram .suit-line .suit-c { font-size: 19px !important; }

/* Zebra striping on data tables — makes row scanning much easier */
table.rankings tbody tr:nth-child(even) td,
table.scorecard tbody tr:nth-child(even) td,
table.trav tbody tr:nth-child(even) td {
  background: #fafaf9;
}
table.rankings tbody tr:hover td,
table.scorecard tbody tr:hover td,
table.trav tbody tr:hover td {
  background: #f5f5f4 !important;
}
table.trav tbody tr.our-row td,
table.trav tbody tr.our-row:nth-child(even) td {
  background: #eef2ff !important; /* accent-soft */
}

/* Chart.js axis labels are drawn to canvas via JS config —
   these values come from the inline script. We bump them there too. */

/* BBO "Play on BBO" button */
.bbo-btn {
  display: inline-block;
  background: #1e3a8a;        /* BBO dark blue */
  color: #ffffff !important;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.15s;
  border: 1px solid #1e3a8a;
}
.bbo-btn:hover {
  background: #1e40af;
  text-decoration: none;
}