/* =============================================================================
   MLB Dashboard CSS (assets/app.css)
   - Sections are ordered to match the app layout:
     1) Theme tokens
     2) App shell layout
     3) Sidebar UI (search, filters, TOC)
     4) Tags + labels
     5) Page content
     6) Key tables
     7) Responsive rules
   ============================================================================= */

/* =============================================================================
   1) Theme tokens
   ============================================================================= */
:root {
  --sidebar-w: 340px;
  --bg: #ffffff;
  --panel: #f6f8fc;
  --text: #1c1c1c;
  --muted: #606770;
  --border: #d7dde7;
  --accent: #2f6fed;
}

/* =============================================================================
   2) Base + app shell layout
   ============================================================================= */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, sans-serif;
}

.app {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-w);
  border-right: 1px solid var(--border);
  background: #fbfcff;
  overflow-y: auto;
  padding: 14px 12px;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 10px 18px;
  background: white;
}

/* =============================================================================
   3) Sidebar UI: updated blurb, search, filters, meta links
   ============================================================================= */
.updated_blurb {
  font-size: 12px;
  color: rgba(80, 80, 80, 0.85);
  margin-bottom: 8px;
  font-weight: 500;
}

.search_wrap {
  margin: 10px 0 12px 0;
}

.search_row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search_box {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
  background: white;
}

.search_box:focus {
  border-color: rgba(47,111,237,0.55);
  box-shadow: 0 0 0 3px rgba(47,111,237,0.10);
}

.search_clear {
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: white;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: rgba(96,103,112,0.95);
  display: none;
}

.search_clear:hover {
  background: var(--panel);
}

.filters_wrap {
  border: 1px solid var(--border);
  background: white;
  border-radius: 10px;
  padding: 10px 10px;
  margin: 0 0 12px 0;
  display: grid;
  gap: 8px;
}

.filter_row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  user-select: none;
}

.meta_links {
  display: grid;
  gap: 6px;
  margin: 2px 0 12px 0;
}

.meta_link {
  border: 1px solid var(--border);
  background: white;
}

/* =============================================================================
   4) TOC: divisions, teams, role tabs, player links
   ============================================================================= */
.toc_link {
  display: block;
  text-decoration: none;
  color: #1f2d3d;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12.5px;
  line-height: 1.25em;
}

.toc_link:hover {
  background: var(--panel);
}

.toc_link.active {
  background: rgba(47,111,237,0.10);
  border: 1px solid rgba(47,111,237,0.25);
  font-weight: 700;
}

.division_block {
  border: 1px solid var(--border);
  background: white;
  border-radius: 10px;
  padding: 10px 10px 8px 10px;
  margin-bottom: 10px;
}

.division_title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.division_arrow {
  display: inline-block;
  width: 14px;
  transform: rotate(0deg);
  transition: transform 120ms ease;
  color: rgba(96,103,112,0.95);
}

.division_logos {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.division_logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}

.division_block.collapsed .division_body {
  display: none;
}

.division_block:not(.collapsed) .division_arrow {
  transform: rotate(90deg);
}

.team_block {
  border: 1px solid var(--border);
  background: white;
  border-radius: 10px;
  padding: 10px 10px 8px 10px;
  margin-bottom: 10px;
}

.team_title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.team_arrow {
  display: inline-block;
  width: 14px;
  transform: rotate(0deg);
  transition: transform 120ms ease;
  color: rgba(96,103,112,0.95);
}

.team_logo {
  width: 18px;
  height: 18px;
  margin-left: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.team_block.collapsed .team_body,
.team_block.collapsed .role_list {
  display: none;
}

.team_block:not(.collapsed) .team_arrow {
  transform: rotate(90deg);
}

.role_tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.role_tab {
  flex: 1;
  border: 1px solid var(--border);
  background: #ffffff;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
}

.role_tab.active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.role_label {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 6px 0;
  font-weight: 700;
}

.player_list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.player_list li {
  margin: 0;
  padding: 0;
}

.sub_role_label {
  font-size: 11px;
  color: rgba(96,103,112,0.95);
  margin: 8px 0 4px 8px;
  font-weight: 700;
  text-transform: none;
}

.sub_role_label.sub_minors  { color: rgba(35, 85, 210, 0.90); }
.sub_role_label.sub_injured { color: rgba(210, 35, 35, 0.85); }
.sub_role_label.sub_oos     { color: rgba(170, 10, 10, 0.95); }
.sub_role_label.sub_susp    { color: rgba(20, 90, 95, 0.95); }

/* =============================================================================
   5) Tags (sidebar + player header)
   ============================================================================= */
.tag_injury { color: rgba(210, 35, 35, 0.70); font-weight: 700; }
.tag_oos    { color: rgba(170, 10, 10, 0.88); font-weight: 800; }
.tag_susp   { color: rgba(20, 90, 95, 0.88); font-weight: 800; }
.tag_minors { color: rgba(35, 85, 210, 0.70); font-weight: 700; }

/* Top 100 — gold */
.toc_tag.tag_prospect_gold { color: rgba(150,110,10,0.95); font-weight: 700; }
/* Team Prospect — teal */
.toc_tag.tag_prospect_teal { color: rgba(0,120,120,0.95); font-weight: 700; }

.player_tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(96,103,112,0.95);
  font-weight: 700;
  vertical-align: middle;
  background: rgba(96,103,112,0.10);
  border: 1px solid rgba(96,103,112,0.18);
}

.player_tag.tag_injury { color: rgba(210, 35, 35, 0.85); background: rgba(210, 35, 35, 0.10); border-color: rgba(210, 35, 35, 0.22); }
.player_tag.tag_oos    { color: rgba(170, 10, 10, 0.95); background: rgba(170, 10, 10, 0.12); border-color: rgba(170, 10, 10, 0.26); }
.player_tag.tag_susp   { color: rgba(20, 90, 95, 0.95); background: rgba(20, 90, 95, 0.12); border-color: rgba(20, 90, 95, 0.26); }
.player_tag.tag_minors { color: rgba(35, 85, 210, 0.85); background: rgba(35, 85, 210, 0.10); border-color: rgba(35, 85, 210, 0.22); }

.player_tag.tag_prospect_gold {
  color: rgba(150,110,10,0.95);
  background: rgba(150,110,10,0.10);
  border-color: rgba(150,110,10,0.22);
  font-weight: 700;
}

.player_tag.tag_prospect_teal {
  color: rgba(0,120,120,0.95);
  background: rgba(0,120,120,0.10);
  border-color: rgba(0,120,120,0.22);
  font-weight: 700;
}

/* =============================================================================
   Matchups form sizing
   ============================================================================= */

  #matchups .matchup_block {
  margin: 10px 0 12px 0;
  padding: 10px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
}

#matchups .matchup_title {
  font-weight: 800;
  font-size: 13px;
  margin: 0 0 8px 0;
  color: rgba(40,40,40,0.95);
}

.matchup_table td.cell_dash {
  color: rgba(60,60,60,0.55);
  text-align: center;
}

#matchups .matchup_table_wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
}

#matchups table.matchup_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 720px;
}

#matchups table.matchup_table th,
#matchups table.matchup_table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
  font-weight: 400;
}

#matchups table.matchup_table th {
  background: var(--panel);
  font-weight: 800;
}

#matchups table.matchup_table tbody tr:nth-child(even) td {
  background: rgba(246,248,252,0.65);
}
#matchups #matchups_form_root select {
  color: #1c1c1c;
}

#matchups .matchups_submit {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  font-weight: 400;
  color: #1c1c1c;
}

#matchups .matchups_submit:hover {
  background: var(--panel);
}
#matchups #matchups_form_root select {
  width: auto;
  max-width: 100%;
}

/* year should fit 4 digits */
#matchups #matchups_form_root select[data-field="year"] {
  width: 12ch;
}

/* vs./@ should fit 4 chars */
#matchups #matchups_form_root select[data-field^="side"] {
  width: 12ch;
}

/* names: ~40 chars */
#matchups #matchups_form_root select[data-field^="hitter"],
#matchups #matchups_form_root select[data-field^="pitcher"] {
  width: 42ch;
  max-width: 100%;
}

/* team can be medium */
#matchups #matchups_form_root select[data-field^="team"] {
  width: 18ch;
  max-width: 100%;
}

/* =============================================================================
   6) Page content (Home / Key / Player pages)
   ============================================================================= */
.key_gradient_block {
  max-width: 520px;
  margin: 14px 0;
}

.key_gradient_label_row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: rgba(96,103,112,0.95);
  margin-bottom: 6px;
}

.key_gradient_bar {
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--border);

  /* blue -> grey -> red */
  background: linear-gradient(
    90deg,
    rgba(35,85,210,0.90) 0%,
    rgba(35,85,210,0.45) 25%,
    rgba(160,160,160,0.35) 50%,
    rgba(210,35,35,0.45) 75%,
    rgba(210,35,35,0.90) 100%
  );
}
.year_select_wrap {
  display: inline-grid;
  gap: 4px;
}

.year_select_label {
  font-size: 11px;
  color: rgba(96,103,112,0.95);
  font-weight: 700;
}

.year_select {
  border: 1px solid var(--border);
  background: white;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  color: rgba(96,103,112,0.95);
  font-weight: 400;
}

.player_page {
  max-width: 1200px;
}

.player_header {
  margin: 0 0 6px 2px;
}

.player_name {
  font-weight: 800;
  font-size: 20px;
  margin: 0;
  line-height: 1.05em;
}

.static_page {
  max-width: 1200px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  line-height: 1.45em;
  color: #1f2d3d;
}

.static_page h3 {
  margin: 10px 0 6px 0;
  font-size: 14px;
}

.static_page ul {
  margin: 8px 0 10px 18px;
  padding: 0;
}

/* .player_name_row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
} */

.player_name_row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.year_buttons {
  width: 100%;
  margin: 6px 0 0 0;
  display: block;
}

.year_btn {
  border: 1px solid var(--border);
  background: white;
  border-radius: 10px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
  color: rgba(96,103,112,0.95);
  font-weight: 700;
}

.year_btn:hover {
  background: var(--panel);
}

.year_btn.active {
  border-color: rgba(47,111,237,0.45);
  background: rgba(47,111,237,0.08);
  color: #1f2d3d;
}

/* =============================================================================
   7) Key tables
   ============================================================================= */
.key_table_wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  margin: 8px 0 14px 0;
}

.key_table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.key_table th,
.key_table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  word-break: normal;
  overflow-wrap: break-word;
}

.key_table th {
  text-align: left;
  background: var(--panel);
  font-weight: 800;
  color: rgba(60,60,60,0.95);
}

.key_table tr:last-child td {
  border-bottom: 0;
}

.key_table th:nth-child(2),
.key_table td:nth-child(2) {
  white-space: nowrap;
}

.key_table th:nth-child(1),
.key_table td:nth-child(1) {
  min-width: 180px;
}

/* =============================================================================
   8) Mobile/touch behaviors
   ============================================================================= */
.toggle_sidebar {
  display: none;
  border: 1px solid var(--border);
  background: white;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  margin: 0 0 10px 0;
}

@media (max-width: 900px) and (pointer: coarse) {
  .toggle_sidebar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

.sidebar.hidden {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --sidebar-w: 100%;
  }

  .app {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .sidebar {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: 52vh;
  }

  .content {
    width: 100%;
    padding: 10px 10px;
    overflow-x: auto;
  }

  .player_page {
    max-width: 100%;
  }
}

/* =============================================================================
   Mobile adjustments
   ============================================================================= */

/* Avoid iOS auto-zoom quirks and keep font sizing stable */
html {
  -webkit-text-size-adjust: 100%;
}

/* Bigger tap targets + prevent iOS zoom on inputs */
@media (max-width: 900px) and (pointer: coarse) {
  .toc_link,
  .role_tab,
  .year_btn,
  .toggle_sidebar,
  .search_clear {
    min-height: 40px;
  }

  .search_box {
    min-height: 40px;
    font-size: 16px;
  }
}

/* Let ONLY the table wrappers scroll horizontally, not the whole page */
@media (max-width: 900px) {
  .content {
    overflow-x: hidden;
  }
}

/* Matchups form: selects/buttons go full-width on narrow screens */
@media (max-width: 650px) {
  #matchups #matchups_form_root select {
    width: 100%;
    max-width: 100%;
  }

  #matchups .matchups_submit {
    width: 100%;
    min-height: 44px;
  }
}

/* Tables + matchups tables: reduce forced minimum width a bit */
@media (max-width: 650px) {
  .key_table {
    min-width: 560px;
  }

  .key_table th:nth-child(2),
  .key_table td:nth-child(2) {
    white-space: normal;
  }

  #matchups table.matchup_table {
    min-width: 560px;
  }
}

/* Plotly: clamp injected widths so charts don't blow out the page */
@media (max-width: 650px) {
  .player_page .js-plotly-plot,
  .player_page .plotly-graph-div {
    width: 100% !important;
    max-width: 100% !important;
  }
}