/* MeshWars: styles for the board switch + territory panel, cell
   popups, and modals (frontend/mc.js) -- shared by both boards. Page
   layout, the loading overlay, and Leaflet's own dark-theme chrome live
   in coverage.css instead; kept in this separate file so the panel
   (and its class names) can be edited without touching that. */

/* Board switch -- the territory card's own top row (see mc.js's
   buildScoreboardControl). Always visible: never inside .mc-panel-content,
   so it survives both the phone collapse (.mc-collapsed) and the
   meshtastic-mode content hide (.mc-territory-hidden) below. */
.mc-switch-row {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mw-raised);
}

.mc-switch-btn {
  flex: 1 1 0;
  background: var(--mw-raised);
  color: var(--mw-text-2);
  border: 1px solid var(--mw-line-strong);
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

.mc-switch-btn:hover {
  background: var(--mw-line);
}

.mc-switch-btn.active {
  background: var(--mw-accent-active);
  color: var(--mw-accent);
  border-color: var(--mw-accent);
}

.mc-scoreboard {
  /* No JS-applied width anymore (see the removed applyMatchedPanelWidth
     in mc.js) -- the switch living in this card now makes matching the
     Meshtastic panel's width pointless: that panel is a separate,
     unrelated box again (see setMode's 'mc-territory-hidden'), not
     something this card needs to visually agree with. Instead: size to
     content, capped by a fluid max-width that is the same at every
     viewport width -- sensible on a phone (never runs edge to edge) and
     on a large monitor (never balloons past a small info-card width). */
  box-sizing: border-box;
  background: var(--mw-panel);
  color: var(--mw-text-1);
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--mw-line);
  font-size: 12px;
  min-width: 140px;
  max-width: min(300px, calc(100vw - 20px));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Collapsible territory panel (phones only) -- see mc.js's
   NARROW_BREAKPOINT_PX / setMcCollapsed. The header button, summary
   and caret exist in the markup at every width; only the media query
   below makes anything actually collapse, so desktop can't be affected
   even if the JS width check is ever wrong. */
.mc-header-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
  cursor: default;
  text-align: left;
}
.mc-header-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mc-header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mc-header-summary {
  display: none;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--mw-text-2);
}
.mc-header-caret {
  display: none;
  margin-left: 6px;
  color: var(--mw-text-6);
  font-size: 10px;
  transition: transform 0.15s ease;
}

@media (max-width: 600px) {
  .mc-header-btn { cursor: pointer; }
  .mc-header-caret { display: inline-block; }
  .mc-scoreboard.mc-collapsed .mc-header-summary { display: inline; }
  .mc-scoreboard.mc-collapsed .mc-header-caret { transform: rotate(-90deg); }
  .mc-scoreboard.mc-collapsed .mc-panel-content { display: none; }

  /* One column instead of two -- the fixed-width two-column grid is
     what overflowed the viewport on a phone (labels/counts for the
     right-hand column ran off screen). Seven single-column rows is
     fine now that the panel starts collapsed on phones.
     !important: this media query block sits earlier in the cascade
     than the unconditional .mc-scoreboard-body rule below (equal
     specificity, source order decides), so without it the base
     two-column rule would win even inside this query. */
  .mc-scoreboard-body {
    grid-template-columns: 1fr !important;
  }
}

.mc-row {
  margin: 3px 0;
  display: flex;
  align-items: center;
}

.mc-title {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mw-accent);
  margin-bottom: 4px;
}

/* Team counts in two columns rather than one row per team -- with up
   to seven MeshCore teams, a single stacked column made this panel
   much taller than the three-row Meshtastic one. */
.mc-scoreboard-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
}

/* Fixed width (not just a min-width floor) so every row's count starts
   at the same x-offset -- a flex item's content otherwise grows past
   min-width for longer names ("YELLOW:", "PURPLE:"), which is what put
   the right-hand column's numbers out of line with each other. */
.mc-team-label {
  min-width: 64px;
  flex: 0 0 64px;
  white-space: nowrap;
}

/* .mc-team-count, .mc-winner-count, and .mc-tally-count (history modal)
   all show a team's combined squares+check-in total (mc.js's
   teamTotal()) and share this same "tap to see the split" affordance --
   dotted underline plus pointer cursor -- wired up by
   attachBreakdownToggle()/bindBreakdownToggle() in mc.js. That click
   swaps the element's own text between the total and
   teamBreakdownCompact()'s split (.mc-showing-breakdown, styled below);
   `title` carries the same split as a hover bonus on desktop, but the
   click is the one path guaranteed to work on a touchscreen -- and the
   one a screenshot can actually prove shows the right numbers, unlike a
   native OS tooltip. */
.mc-team-count,
.mc-winner-count,
.mc-tally-count {
  cursor: pointer;
  border-bottom: 1px dotted var(--mw-text-6);
}
.mc-team-count {
  font-weight: 600;
}

.mc-team-count.mc-showing-breakdown,
.mc-winner-count.mc-showing-breakdown,
.mc-tally-count.mc-showing-breakdown {
  color: var(--mw-accent);
  border-bottom-style: solid;
}

.mc-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  flex: 0 0 auto;
}

.mc-countdown {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--mw-raised);
  font-size: 11px;
  color: var(--mw-text-4);
}

.mc-scoreboard a {
  color: var(--mw-accent);
  text-decoration: none;
}
.mc-scoreboard a:hover { text-decoration: underline; }

/* Player search */
.mc-lookup-row {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--mw-raised);
  gap: 4px !important;
}
#mc-lookup-input {
  flex: 1;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 11px;
  min-width: 0;
}
#mc-lookup-btn {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 11px;
}
#mc-lookup-btn:hover { background: var(--mw-line); }
.mc-lookup-result { font-size: 11px; margin-top: 4px; color: var(--mw-text-2); }

/* Refresh / Top-players / Places buttons -- the top button's label text
   (Top Operators on both boards) comes from mc.js's PROTOCOLS table,
   not from CSS. #mc-places-btn (frontend/map2.js only -- this page's
   Places Worth Going expand toggle, see map2.css's .mc-places-section)
   shares this same rule rather than a rule of its own so a fourth
   action button reads as exactly the same kind of control as the
   other two, not a new one. */
.mc-scoreboard .mc-actions {
  margin-top: 4px;
}
.mc-scoreboard #mc-refresh-btn,
.mc-scoreboard #mc-top-btn,
.mc-scoreboard #mc-places-btn {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  width: 100%;
}
.mc-scoreboard #mc-refresh-btn:hover,
.mc-scoreboard #mc-top-btn:hover,
.mc-scoreboard #mc-places-btn:hover {
  background: var(--mw-line);
}

/* ===== Winner banner =====
   Top-center overlay on the map itself (#mc-winner-banner in
   index.html) -- separate from the top-right territory panel above,
   but identical on both boards: same position, same styling, same
   markup, driven entirely by mc.js's renderWinnerBanner. Seven-team
   shaped: no fixed red/blue/tie classes like the retired two-team
   banner had (see frontend/mc.js's PROTOCOLS comment) -- the winning
   team's dot color comes from TEAM_COLORS via an inline style instead,
   since it can be any of the seven. */
.mc-winner-banner {
  display: none;
  /* Fixed to the viewport, not absolute to the page -- #mc-winner-banner
     sits in the document flow above #map (see index.html), and #map
     itself starts at top: var(--mw-nav-h) (coverage.css), below the
     fixed site nav bar. An absolutely-positioned "top: 12px" measures
     from the page's own top edge, landing UNDER the nav bar (z-index
     1000, opaque background) instead of below it -- this positions
     relative to the viewport and offsets past --mw-nav-h instead, the
     same fixed-to-viewport approach the nav bar and #loading-overlay
     already use. */
  position: fixed;
  top: calc(var(--mw-nav-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: min(560px, calc(100vw - 20px));
  background: var(--mw-panel);
  border: 1px solid #555;
  border-radius: 8px;
  padding: 8px 16px;
  color: #eee;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.mc-winner-tag {
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  color: #111;
}
.mc-winner-counts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--mw-text-2);
}
.mc-winner-count-entry {
  display: flex;
  align-items: center;
}
.mc-winner-dates {
  color: var(--mw-text-6);
  font-size: 11px;
}

/* On phones, the top-center banner collides with the top-right
   territory panel -- both are wide enough at this width to overlap
   near the middle of the screen (the panel's own max-width is a fluid
   min(300px, 100vw-20px), same trick this uses). Same NARROW_BREAKPOINT_PX
   mc.js already uses for the panel's own phone collapse. Moving the
   banner to the bottom, clear of the nav bar, the zoom control, AND the
   panel, is simpler and more robust than trying to compute a top offset
   that clears the panel's collapsed height (which itself varies with
   font metrics) -- and the bottom of the map is otherwise empty except
   Leaflet's own small attribution text in the corner. */
@media (max-width: 600px) {
  .mc-winner-banner {
    top: auto;
    bottom: 12px;
    max-width: calc(100vw - 20px);
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* Cell popup content, rendered inside a Leaflet popup */
.mc-popup {
  color: var(--mw-text-1);
  font-size: 12px;
  min-width: 200px;
}

.mc-popup-header {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
}

.mc-popup-row {
  margin: 2px 0;
}

.mc-popup-section-title {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mw-text-6);
  margin-top: 8px;
  margin-bottom: 3px;
}

.mc-popup-score-row {
  display: flex;
  align-items: center;
  margin: 2px 0;
}

.mc-popup-capture-row {
  margin: 2px 0;
  font-size: 11px;
  color: var(--mw-text-3);
}

.mc-popup-empty {
  color: #777;
  font-style: italic;
}

.mc-popup-loading {
  color: var(--mw-text-6);
  font-style: italic;
}

/* ===== Modals (History / Roster / Top-players) =====
   Dimmed backdrop, dark card, amber header -- shared by both boards. */

.mc-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
}
.mc-modal-inner {
  background: var(--mw-panel);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line-strong);
  border-radius: 8px;
  width: min(700px, 92vw);
  max-height: 80vh;
  overflow: auto;
}
.mc-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--mw-line);
  font-weight: 700;
  font-size: 14px;
  color: var(--mw-accent);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mc-modal-close {
  cursor: pointer;
  color: var(--mw-text-4);
  font-size: 22px;
  background: none;
  border: none;
  line-height: 1;
}
.mc-modal-loading,
.mc-modal-empty {
  padding: 1em;
  color: var(--mw-text-6);
  font-style: italic;
}
.mc-modal-error {
  padding: 1em;
  color: #c66;
}

/* Top-players modal tabs (see mc.js's openTopModal) -- two rankings
   (captures, check-in points) behind the one top-players button, so the
   panel that opens this modal never gains a second button/position. Same
   visual language as .mc-switch-row/.mc-switch-btn (the board switch)
   since both are "pick one of two" controls, just scoped to the modal
   instead of the panel. */
.mc-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 18px 0;
}
.mc-modal-tab {
  flex: 1 1 0;
  background: var(--mw-raised);
  color: var(--mw-text-2);
  border: 1px solid var(--mw-line-strong);
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
.mc-modal-tab:hover {
  background: var(--mw-line);
}
.mc-modal-tab.active {
  background: var(--mw-accent-active);
  color: var(--mw-accent);
  border-color: var(--mw-accent);
}

.mc-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mc-history-table th,
.mc-history-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--mw-raised);
}
.mc-history-table th {
  color: var(--mw-text-6);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mc-winner-cell {
  color: var(--mw-accent);
  font-weight: 700;
}


/* Roster modal -- responsive per-team sections rather than a fixed
   two-column grid, since both boards can have up to seven teams now. */
.mc-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  padding: 12px 16px;
}
.mc-roster-team h3 {
  margin: 0 0 8px 0;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mc-roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.mc-roster-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #232323;
}

@media (max-width: 600px) {
  .mc-roster-grid { grid-template-columns: 1fr; }
}