/* ---- floating Type Chart tab (present on every page, see index.html/main.js) ---- */

/* .typechart-widget itself is just a DOM grouping for the outside-click
   check (see main.js's bindCloseOnOutsideClick call) -- it carries no
   layout of its own. The tab, reset button, and panel are each
   independently position:fixed.

   While collapsed (reset button hidden), the tab alone is centered with
   the plain CSS top:50%/translateY(-50%) trick below. While open, the
   reset button appears directly under the tab, so main.js's openTypechart
   switches the tab (and the button, and the panel) over to explicit
   pixel `top` values computed from the *combined* tab+gap+button height,
   so the whole group reads as vertically centered together rather than
   the tab alone staying pinned to screen-center and the button trailing
   off below it. closeTypechart clears those inline overrides so the tab
   falls back to the plain centered CSS position once the button is
   hidden again. This is also why the tab/button/panel are independently
   positioned rather than one shared flex box in the first place: an
   earlier version centered all of them as one flex unit, so opening the
   (much taller) panel grew the shared box's height, which shifted the
   box's own vertical center and dragged the tab up along with it -- each
   staying independently `position: fixed` means the panel's own height
   never affects the tab/button group's position. */
/* z-index lived on .typechart-widget alone, but that wrapper div has no
   `position` of its own (it's just a DOM grouping, see above) -- z-index
   only has an effect on a positioned element, so it was a no-op there.
   The tab and panel are the ones actually `position: fixed`, so they're
   the ones that need it: without an explicit z-index they default to
   `auto`, which paints BEHIND any other positioned element on the page
   that has a plain positive z-index (e.g. the team roster's move-remove
   "X" buttons at z-index: 2) regardless of DOM order -- that's what let
   those X's render on top of an open type chart. 1000 is comfortably
   above every other z-index in this file (the next-highest is 100). */
.typechart-widget { z-index: 50; }
.typechart-tab {
  position: fixed;
  top: 50%;
  left: 0;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: var(--text);
  padding: 16px 9px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 1000;
}
.typechart-tab:hover { background: var(--bg-panel); }

/* Reset button: sits directly below the tab, same width, hidden entirely
   until the panel opens (see main.js). Its `top`/`left`/`width`/`height`
   are all set inline by openTypechart() -- width has to match the tab's
   own measured width (which depends on its text/padding, not a fixed
   value this stylesheet could hardcode), and it's square, so height
   follows from that same measurement too.

   Rounded only on the right (0 8px 8px 0) -- the mirror image of how it
   looks like the tab is rounded on the LEFT in the markup (border-radius:
   8px 0 0 8px in .typechart-tab above). They actually match: the tab's
   radius is defined in its own pre-transform coordinate space, but
   `transform: rotate(180deg)` on .typechart-tab flips which corners that
   radius visually lands on -- its rounding renders on the right after the
   flip, same as this button, which has no rotation of its own so its
   radius can just be written directly for the corners it should show.

   Red (--tier-4x), matching this app's one other existing "reset/clear"
   button (.reset-sort-btn on the Dex page) rather than the neutral
   tab/panel background -- a reset action reads as a distinct, slightly
   destructive one, not just another chrome element.

   display:none/flex is split into two rules rather than one plain
   `display: flex` on the base selector: a plain author-stylesheet
   `display: flex` here would outrank the browser's own default
   `[hidden] { display: none }` UA rule (same specificity, author wins
   ties), which defeated both the `hidden` attribute in index.html AND
   main.js's `typechartResetEl.hidden = true/false` toggling -- the
   button was actually always rendered, just sized by whatever it
   happened to compute to before openTypechart() ever set explicit
   pixel width/height (hence it flashing at a huge, wrong size on first
   load, and never actually disappearing on close). Scoping the flex
   layout to :not([hidden]) leaves the UA default in charge whenever the
   attribute is present, so hidden actually means hidden again. */
.typechart-reset-btn {
  position: fixed;
  left: 0;
  background: var(--tier-4x);
  border: 1px solid var(--tier-4x);
  border-radius: 0 8px 8px 0;
  color: #fff;
  padding: 0;
  cursor: pointer;
  z-index: 1000;
}
.typechart-reset-btn:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.typechart-reset-btn:hover { filter: brightness(1.15); }
.typechart-reset-btn svg { width: 55%; height: 55%; }

.typechart-panel {
  position: fixed;
  top: 50%;
  /* `left` is set inline by main.js's openTypechart(), from the tab's own
     measured rendered width -- the tab is no longer a layout sibling this
     can just flow next to, since both are now independently fixed.
     `top`/`transform` are also overridden inline while open, to center the
     panel on the tab+button group's own center rather than plain
     screen-center -- see the big comment above .typechart-widget. */
  transform: translateY(-50%);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  /* The panel now sits a small 8px gap away from the tab (see the +8 in
     main.js's openTypechart(), which sets this element's inline `left`)
     instead of flush against it, specifically so every corner -- including
     the two nearest the tab -- can be rounded without a straight tab edge
     clipping into them. All four corners now share the tab's own 8px
     radius, and the border/shadow are symmetric since neither edge is
     "attached" to anything else anymore. */
  border-radius: 8px;
  padding: 8.5px;
  width: min(60vw, 672px);
  max-height: 85vh;
  overflow: auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  z-index: 1000;
}
/* The chart itself was built to sit centered on a whole page (.typechart-page
   in the old dedicated route) -- inside this narrower sliding panel it just
   needs to not force any extra width/centering of its own, and the table
   inside now targets a square aspect ratio instead of stretching to fill
   the old full-page layout (see .typechart-table below). */
.typechart-panel .typechart-page { display: block; height: auto; }

/* ---- Team Builder Import confirmation panel ---- */

.data-transfer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.data-transfer-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
.data-transfer-modal h2 { margin: 0 0 10px; font-size: 1.1rem; }

.data-transfer-summary { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 14px; }

.data-transfer-team-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.data-transfer-team-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--bg-panel-alt);
}
.data-transfer-team-row-skipped { opacity: 0.6; }

.data-transfer-team-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.data-transfer-team-name { font-weight: 600; }
.data-transfer-team-status { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.02em; }

.data-transfer-problems {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--tier-2x);
  line-height: 1.5;
}

.data-transfer-choice, .data-transfer-forced-skip {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.data-transfer-forced-skip { color: var(--tier-4x); }

.data-transfer-overwrite {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-bottom: 16px;
}
.data-transfer-overwrite input { margin-top: 3px; }

.data-transfer-actions { display: flex; justify-content: flex-end; gap: 10px; }
.data-transfer-actions button {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-panel-alt);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}
.data-transfer-actions .data-transfer-confirm { background: var(--accent); border-color: var(--accent); color: #fff; }
.data-transfer-actions button:hover { filter: brightness(1.15); }

/* ---- view mode segmented control + view-slot toggle (in the sort box) ---- */
.view-controls-group { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.view-mode-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.view-mode-toggle button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  background: var(--bg-panel-alt);
  border: none;
  color: var(--text-dim);
  cursor: pointer;
}
.view-mode-toggle button + button { border-left: 1px solid var(--border); }
.view-mode-toggle button.active { background: var(--accent); color: #fff; }
.view-mode-toggle button:hover:not(.active) { filter: brightness(1.2); }
.view-mode-toggle svg { width: 16px; height: 16px; }

.banned-tag { color: var(--tier-4x); font-size: 0.68rem; font-weight: 700; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.ability-swap { color: var(--tier-2x); font-weight: 600; }

#app-root { padding: 18px 20px 60px; max-width: 1400px; margin: 0 auto; }
/* Team page only: the side gutter outside max-width is cut in half, not
   removed. Expressed as a formula rather than a guessed pixel value so it
   actually halves the gutter at whatever viewport width the browser is at,
   instead of only being correct on one specific screen size:
     current gutter (each side) = (100vw - 1400px) / 2
     target gutter  (each side) = that / 2 = (100vw - 1400px) / 4
     max-width = 100vw - 2 * target gutter = (100vw + 1400px) / 2
   Scoped to this one class (toggled on #app-root by main.js's route()
   only for the #/team route) rather than raising #app-root's own
   max-width, which would have widened the dex grid and detail page too. */
#app-root.team-page-active { max-width: calc((100vw + 1400px) / 2); }
/* Detail page only (see the classList.add/remove in detail.js/main.js) --
   SP and MP (.detail-left-col/.detail-right-col) are both already capped to
   fill exactly the remaining viewport height, so this normal 60px bottom
   breathing room (used everywhere else, e.g. under the dex page's last row
   of cards) was the entire remaining source of page-level scroll slack on
   this page specifically -- zeroing it out here brings the whole document
   to exactly one viewport tall, with nothing left to scroll past. */
#app-root.detail-page-active { padding-bottom: 0; }

.loading { color: var(--text-dim); padding: 40px; text-align: center; }

/* ---- type badges ---- */
.type-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}