/*
 * Core Team Builder — design system
 *
 * A single source of truth for visual styling. All values are defined as CSS
 * custom properties (design tokens) under :root so the theme can be tuned in
 * one place. See docs/STYLE_GUIDE.md for the conventions.
 *
 * Theme: dark "Elder Scrolls" aesthetic — deep slate backgrounds with an
 * Aldmeri gold accent.
 */

:root {
  /* Color tokens */
  --color-bg:            #14171c;
  --color-surface:       #1d2128;
  --color-surface-alt:   #252b34;
  --color-border:        #333b47;
  --color-text:          #e8eaed;
  --color-text-muted:    #9aa3af;
  --color-accent:        #c9a24b; /* Aldmeri gold */
  --color-accent-hover:  #ddb95f;
  --color-danger:        #e0564f;
  --color-success:       #5bb98c;

  /* Role colors: a saturated accent (left bar) plus a dark, slate-tinted
     background for each roster slot. Kept muted so they sit calmly against the
     theme and don't fight the gold accent. */
  --role-tank:           #4a86c5; /* blue   */
  --role-tank-bg:        #1f2a36;
  --role-healer:         #5bb98c; /* green  */
  --role-healer-bg:      #1b2a25;
  --role-dps:            #d6655d; /* red    */
  --role-dps-bg:         #2c2120;
  --role-support:        #a884d4; /* purple */
  --role-support-bg:     #272233;

  /* Typography */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.25rem;
  --font-size-xl:   1.75rem;
  --font-size-2xl:  2.5rem;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* Radius & shadow */
  --radius:    8px;
  --radius-lg: 14px;
  --shadow:    0 6px 24px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  background-image: radial-gradient(circle at 50% -10%, #20252e 0%, var(--color-bg) 55%);
  min-height: 100vh;
}

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

/* Layout helpers */
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.center-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-4);
}

/* Brand */
.brand {
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-accent);
}
.brand small {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0;
}
/* Brand as a "back to teams" link (dashboard topbar). */
a.brand--home {
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
a.brand--home:hover {
  opacity: 0.85;
}

/* Card */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-6);
}
.card--narrow {
  width: 100%;
  max-width: 400px;
}

/* Collapsible sections: a `.collapsible` keeps its header (`.collapsible-head`)
   visible and hides its `.collapsible-body` when `.is-collapsed`. The direct-
   child combinator keeps nested collapsibles (player slots inside the roster)
   independent of their parent. */
.collapsible-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.collapsible-head-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.collapsible.is-collapsed > .collapsible-body {
  display: none;
}
.section-collapsible {
  /* Clear the sticky topbar + encounters panel when jumped to from the nav. */
  scroll-margin-top: 160px;
}
.collapse-toggle {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.collapse-toggle:hover {
  color: var(--color-text);
  background: var(--color-surface-alt);
}
.collapse-toggle::before {
  content: "\25BE";
  display: inline-block;
  font-size: 0.8rem;
  line-height: 1;
  transition: transform 0.15s ease;
}
.collapse-toggle[aria-expanded="false"]::before {
  transform: rotate(-90deg);
}

/* Detail view toolbar: back button on the left, global collapse/expand on the
   right. */
.detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.detail-toolbar-actions {
  margin-left: auto;
}

/* Group Stats: buffs, crit, and penetration as light inner panels stacked
   inside one collapsible card. */
.group-stats-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.group-stat {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* On narrow screens a section header (title + actions) can't fit on one row —
   worst on the main team card whose actions hold the encounters toggle, save
   status, and Delete button. Let the header wrap so the title takes the full
   width and the actions drop to their own row instead of overflowing. */
@media (max-width: 640px) {
  .section-head {
    flex-wrap: wrap;
  }
  .collapsible-head-main {
    flex-basis: 100%;
  }
  .section-head > .form-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .team-name-input {
    max-width: none;
    width: 100%;
    font-size: var(--font-size-lg);
  }
  .save-status {
    min-width: 0;
  }
}

/* Forms */
.form-group {
  margin-bottom: var(--space-4);
}
.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.input {
  width: 100%;
  padding: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}
.input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn--primary {
  background: var(--color-accent);
  color: #1a1a1a;
}
.btn--primary:hover {
  background: var(--color-accent-hover);
}
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--danger {
  background: transparent;
  color: var(--color-danger);
  border-color: rgba(224, 86, 79, 0.4);
}
.btn--danger:hover {
  background: rgba(224, 86, 79, 0.12);
  border-color: var(--color-danger);
}
.btn--block {
  width: 100%;
}
.btn--sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

/* Tabs */
.tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.tab {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  text-align: center;
  cursor: pointer;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-base);
}
.tab.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  /* Keep the nav (and brand "home" link) reachable while scrolling. Sits below
     the toast (z 1000) but above page content and the sticky encounters panel. */
  position: sticky;
  top: 0;
  z-index: 200;
}

/* Messages */
.message {
  padding: var(--space-3);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}
.message--error {
  color: var(--color-danger);
  background: rgba(224, 86, 79, 0.1);
  border: 1px solid rgba(224, 86, 79, 0.3);
}
.message--success {
  color: var(--color-success);
  background: rgba(91, 185, 140, 0.1);
  border: 1px solid rgba(91, 185, 140, 0.3);
}

/* Link-styled button: a plain <button> that reads as an inline text link (used
   for the forgot-password / back-to-sign-in toggles, which switch views rather
   than navigate). */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
}
.link-btn:hover {
  color: var(--color-accent-hover);
}
.is-hidden {
  display: none !important;
}

/* Toast: a fixed notification pinned to the top of the viewport, shown
   regardless of scroll position. Reuses .message--error/--success for the text
   and border colors, with a solid background for readability over content. */
.toast {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: max-content;
  max-width: min(92vw, 600px);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow);
  text-align: center;
}
.toast.message--error {
  background: #2a1c1c;
}
.toast.message--success {
  background: #16241d;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.toast:not(.is-hidden) {
  animation: toast-in 0.15s ease-out;
}

/* Top bar actions */
.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-4);
}

/* Mobile header: shrink the brand, let actions drop onto their own full-width
   row, and tighten button/spacing so nothing overflows on small screens. */
@media (max-width: 640px) {
  .topbar {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2) var(--space-3);
  }
  .brand {
    font-size: var(--font-size-lg);
  }
  .brand small {
    font-size: 0.75rem;
  }
  .topbar-actions {
    width: 100%;
    gap: var(--space-2) var(--space-3);
  }
  /* The "Signed in as …" label takes the leading space and truncates so the
     buttons stay reachable; the toggle/buttons sit to its right. */
  .topbar-actions .topbar-user {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
  }
  .topbar-actions .btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
  }
}

/* Inline checkbox toggle (e.g. enable/disable tooltips). */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}
.toggle input {
  cursor: pointer;
}

/* Section header (title + action) */
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.section-head h1 {
  margin: 0;
}

/* Form action rows */
.form-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.badge--owner {
  color: var(--color-accent);
  background: rgba(201, 162, 75, 0.12);
  border: 1px solid rgba(201, 162, 75, 0.35);
}
.badge--shared {
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}

/* Teams list: full-width rows, one team per row */
.teams-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.team-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.team-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.team-card-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.team-card-side {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.team-card-name {
  font-size: var(--font-size-lg);
  font-weight: 600;
}
.team-card-schedule {
  font-size: var(--font-size-sm);
}

/* Schedule controls */
.schedule-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.day-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.day-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  font-size: var(--font-size-sm);
}
.day-toggle:has(input:checked) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.day-toggle input {
  accent-color: var(--color-accent);
  cursor: pointer;
}
.day-toggle input:disabled {
  cursor: not-allowed;
}
.schedule-time-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.schedule-time-group {
  width: 160px;
  margin-bottom: 0;
}
.schedule-time-group .input {
  color-scheme: dark;
}

/* Editable team name */
.team-name-input {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-accent);
  max-width: 480px;
}

/* Members / sharing */
.members-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.member-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.share-form {
  display: flex;
  gap: var(--space-2);
  max-width: 600px;
}
.share-form #share-username {
  flex: 1;
}
.share-role-select {
  flex: 0 0 auto;
  width: auto;
}
.input--sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  width: auto;
}
.input:disabled,
.input[readonly] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Roster: a vertical stack of one player per row */
.roster-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.player-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  transition: background 0.15s ease, border-color 0.15s ease;
  /* Clear the sticky topbar + encounters panel when jumped to from the nav. */
  scroll-margin-top: 160px;
}
.player-head {
  cursor: pointer;
}
.player-head-name {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Role-based slot coloring: subtle background tint + saturated left accent bar
   so a player's role reads at a glance. */
.player-slot[data-role="tank"] {
  background: var(--role-tank-bg);
  border-left-color: var(--role-tank);
}
.player-slot[data-role="healer"] {
  background: var(--role-healer-bg);
  border-left-color: var(--role-healer);
}
.player-slot[data-role="dps"] {
  background: var(--role-dps-bg);
  border-left-color: var(--role-dps);
}
.player-slot[data-role="support_dps"] {
  background: var(--role-support-bg);
  border-left-color: var(--role-support);
}
.slot-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #1a1a1a;
  font-weight: 700;
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}
.player-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.slot-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: calc(-1 * var(--space-2));
}
.slot-actions .slot-copy {
  width: auto;
  max-width: 220px;
  font-size: var(--font-size-sm);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  color: var(--color-text-muted);
}
.player-fields {
  display: grid;
  grid-template-columns: 2fr 2fr 1.3fr 1.5fr;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
}
.player-fields .form-group {
  margin-bottom: 0;
  min-width: 0;
}

/* Conditional build controls (subclass toggle + skill-line/mastery selects) */
.player-build {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-3);
}
.subclass-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.subclass-toggle input {
  accent-color: var(--color-accent);
  cursor: pointer;
}
.build-selects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}
.build-selects .form-group {
  margin-bottom: 0;
  min-width: 0;
}
.build-hint {
  margin: 0;
  align-self: center;
}
@media (max-width: 720px) {
  .player-fields {
    grid-template-columns: 1fr 1fr;
  }
  .build-selects {
    grid-template-columns: 1fr 1fr;
  }
}

/* Encounters bar (team detail) */
.encounters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Encounter chip selector lives in its own titled box. By default it sits flush
   beneath the encounters card (the -1px top margin overlaps their borders and
   the squared top corners make it read as that card's bottom section). Only this
   panel is sticky: it pins just below the topbar once scrolled past so you can
   switch encounters while editing the roster below. The .is-stuck state (toggled
   from app.js once pinned) rounds it off and adds elevation so it visibly
   "splits off" into a floating bar. */
.encounters-panel {
  margin-top: -1px;
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  position: sticky;
  top: var(--topbar-height, 0);
  z-index: 100;
  transition: border-radius 0.15s ease, box-shadow 0.15s ease, margin 0.15s ease;
}
.encounters-panel.is-stuck {
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}
.encounters-panel-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}
/* Square the bottom corners so the chip panel attaches flush below this card. */
.encounters-manage-card {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.encounter-chip {
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.encounter-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}
/* The currently selected encounter (whose loadouts show in the roster). */
.encounter-chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
  font-weight: 600;
}
.encounter-chip.is-active:hover {
  color: var(--color-bg);
}
.add-encounter-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.add-encounter-form .form-group { min-width: 16rem; margin: 0; }

/* Controls for the selected encounter (name, rename, delete, save status). */
.encounter-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
/* Title row takes the remaining space and may shrink/wrap, while the actions
   (save status + Delete) stay pinned to the right even with a long name. */
.encounter-controls > .encounter-title-row {
  flex: 1;
  min-width: 0;
}
.encounter-controls > .form-actions {
  flex-shrink: 0;
}

/* Per-player loadout block in the roster (below the subclass build). */
.player-loadout {
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-3);
}

/* Encounter detail (loadouts) */
.encounter-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  min-width: 0;
  overflow-wrap: anywhere;
}
.encounter-title-row .input { max-width: 18rem; }

.loadout-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.loadout-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.loadout-player {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.loadout-name { font-weight: 600; }
.loadout-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  min-width: 0;
}
.loadout-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.loadout-col > label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
}
.chip-remove {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.chip-remove:hover { color: var(--color-danger); }

/* Groupings: named sets of numbered groups (ice cages, slayer stacks, …). */
.groupings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.grouping {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.grouping-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.grouping-name {
  flex: 1 1 12rem;
  min-width: 8rem;
  max-width: 18rem;
  font-weight: 600;
}
.grouping-count-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.grouping-count {
  width: 4.5rem;
}
.grouping-actions {
  margin-left: auto;
}
.grouping-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.grouping-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.grouping-group-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.grouping-group .chip-list {
  min-height: 1.5rem;
}
.grouping-add-player {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
@media (max-width: 640px) {
  .grouping-groups {
    grid-template-columns: 1fr 1fr;
  }
  .grouping-name {
    flex-basis: 100%;
    max-width: none;
  }
  .grouping-actions {
    margin-left: auto;
  }
}

/* Floating hover/focus tooltip (see initTooltips in components.js). Appended to
   <body> and positioned via fixed coordinates so it is never clipped. Used for
   gear set descriptions on both the picker options and the selected chips. */
.tooltip {
  position: fixed;
  z-index: 2000;
  max-width: 22rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  white-space: pre-line;
  pointer-events: none;
}
.tooltip.is-hidden { display: none; }

/* Small circled "i" badge signalling that an element has an explanatory tooltip
   (data-tip). Focusable so keyboard users can surface the same help. */
.info-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
  user-select: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.info-indicator:hover,
.info-indicator:focus {
  color: var(--color-accent);
  border-color: var(--color-accent);
  outline: none;
}
/* Searchable-select component (createSearchableSelect): full search + headers. */
.ss {
  position: relative;
  max-width: 16rem;
}
.ss-input {
  width: 100%;
}
.ss-panel {
  position: absolute;
  /* Above the sticky encounters panel (z-index 100) so the open list (e.g. the
     timezone picker) is never clipped behind it; still below the topbar (200). */
  z-index: 150;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ss-panel.is-hidden { display: none; }
.ss-group {
  position: sticky;
  top: 0;
  padding: var(--space-1) var(--space-3);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.ss-option {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.ss-option.is-active {
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 600;
  border-left-color: var(--color-accent-hover);
}
.ss-empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Autosave status indicator (replaces the old Save buttons). */
.save-status {
  align-self: center;
  min-width: 5rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}
.save-status.is-saved { color: var(--color-success); }
.save-status.is-error { color: var(--color-danger); }

@media (max-width: 720px) {
  .loadout-row { grid-template-columns: 1fr; }
  .loadout-lists { grid-template-columns: 1fr; }
}

/* Buffs coverage summary card */
.buffs-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.buffs-summary-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.buffs-count {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-muted);
}
.buffs-count.is-full { color: var(--color-success); }
.buffs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-3);
}
.buff-pip {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.buff-pip.is-met {
  background: var(--color-success);
  border-color: var(--color-success);
}
.buff-pip.is-unmet {
  background: transparent;
}

/* Modal (dialog) — dimmed full-screen overlay with a centered card. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  background: rgba(0, 0, 0, 0.6);
  overflow-y: auto;
}
.modal-overlay.is-hidden { display: none; }
.modal {
  width: 100%;
  max-width: 640px;
  margin: auto;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Per-buff breakdown list inside the modal. */
.buffs-modal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.buff-row {
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius);
}
.buff-row.is-met { border-left-color: var(--color-success); }
.buff-row.is-unmet { border-left-color: var(--color-danger); }
.buff-row-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.buff-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  font-weight: 700;
}
.buff-row.is-met .buff-status { color: var(--color-success); }
.buff-row.is-unmet .buff-status { color: var(--color-danger); }
.buff-name { font-weight: 600; }
.buff-providers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-left: calc(1.2rem + var(--space-2));
}
.buff-provider {
  font-size: var(--font-size-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
}

/* Crit damage summary card */
.crit-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.crit-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.crit-stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.crit-stat-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
}

/* Per-player crit-damage inputs (inside each roster slot's loadout area). */
.crit-setup {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.crit-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.crit-field > label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.armor-steppers {
  display: flex;
  gap: var(--space-2);
}
.armor-count {
  width: 3.5rem;
  text-align: center;
}
.crit-result { margin-left: auto; text-align: right; }
.crit-label {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-muted);
}
.crit-label.is-met { color: var(--color-success); }
.crit-label.is-met::before { content: "\2713 "; }
.crit-label.is-unmet { color: var(--color-danger); }
.crit-label.is-unmet::before { content: "\2717 "; }

/* Floating jump nav (desktop only): fixed to the left edge, lists the Top /
   Group Buffs anchors plus every player slot. Hidden on narrow viewports where
   there isn't room beside the content. */
.buffs-card {
  scroll-margin-top: 160px;
}
.player-nav {
  display: none;
}
@media (min-width: 1280px) {
  .player-nav {
    position: fixed;
    top: 50%;
    left: var(--space-4);
    transform: translateY(-50%);
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 190px;
    max-height: 84vh;
    overflow-y: auto;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }
}
.player-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.player-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  border-left: 3px solid transparent;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.player-nav-link:hover {
  background: var(--color-surface-alt);
  text-decoration: none;
}
.player-nav-anchor {
  font-weight: 600;
  color: var(--color-accent);
}
.player-nav-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-nav-role {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.player-nav-link[data-role="tank"] { border-left-color: var(--role-tank); }
.player-nav-link[data-role="healer"] { border-left-color: var(--role-healer); }
.player-nav-link[data-role="dps"] { border-left-color: var(--role-dps); }
.player-nav-link[data-role="support_dps"] { border-left-color: var(--role-support); }

/* Admin: user-management modal */
.admin-reg-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.admin-add-user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.admin-add-user .input {
  width: auto;
  flex: 1 1 140px;
}
.admin-users-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.admin-user-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.admin-user-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.admin-user-name { font-weight: 600; }
.admin-user-email {
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-user-admin { flex-shrink: 0; }

/* Utility text */
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }