/* ══════════════════════════════════════════════════════════════
   Component — Roster (left panel)
   Extracted from shoot/v0.4/style.css
══════════════════════════════════════════════════════════════ */

/* App grid */
#app { display: grid; grid-template-columns: 230px 1fr; width: 100vw; height: 100vh; transition: grid-template-columns .3s; }
#app.collapsed { grid-template-columns: 40px 1fr; }

/* Roster panel */
#roster {
  grid-column: 1;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 20; transition: width .3s;
}

.roster-header {
  height: 36px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.roster-title {
  font: 700 10px/1 'Rajdhani', sans-serif;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-muted);
}
.roster-collapse-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px;
  transition: color .15s; padding: 2px;
}
.roster-collapse-btn:hover { color: var(--text-primary); }
.roster-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
.roster-scroll::-webkit-scrollbar { width: 2px; }
.roster-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--faction-a) 7%, transparent); }

/* Faction section header */
.faction-section { border-top: 1px solid var(--border); }
.faction-header {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; cursor: pointer; user-select: none;
  transition: background .15s;
}
.faction-header:hover { background: rgba(255,255,255,.03); }
.faction-band { width: 2px; height: 14px; border-radius: 1px; flex-shrink: 0; }
.faction-band.side-a { background: var(--faction-a-dim); }
.faction-band.side-b { background: var(--faction-b-dim); }
.faction-icon { font-size: 11px; }
.faction-label { flex: 1; font: 700 10px/1 'Rajdhani', sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.faction-label.side-a { color: var(--faction-a); }
.faction-label.side-b { color: var(--faction-b); }
.faction-chevron { font-size: 8px; color: var(--text-dis); transition: transform .25s; }
.faction-body { overflow: hidden; max-height: 600px; transition: max-height .3s ease; }
.faction-body.closed { max-height: 0; }

/* Per-faction totals under each faction body (scenario-editor). Kept minimal —
   a muted flex row with a top border that visually separates it from the
   last unit row. Styling intentionally understated; units + header are the
   focal points. */
.faction-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  font: 600 10px/1 'Rajdhani', sans-serif;
  letter-spacing: 1.5px;
  color: var(--text-dis);
  text-transform: uppercase;
}

/* Roster rows (styled on top of .rail-unit for JS compat) */
.rail-unit {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--border);
  transition: background .12s, border-left-color .12s;
  position: relative;
}
/* Subtle hover: background bump only, scoped to non-selected rows.
   Selected rows already have a faction-coloured border + glow; flashing
   them to grey reads as deselection and fights the selected styling. */
.rail-unit:not(.active):hover { background: rgba(255,255,255,.04); }
.rail-unit-leader-sub {
  padding-left: 24px; opacity: 0.7;
  border-left: 2px solid rgba(201,163,82,0.3);
}
.leader-sub-name { color: #c9a352; }

/* Transport / Embarked roster styling (PR3 of #181) — themed to the
   passenger's owning faction (rail-unit-passenger-sub carries the
   side-a/b class set by game-roster.js). */
.rail-unit-passenger-sub {
  padding-left: 24px; opacity: 0.85;
  border-left: 2px solid color-mix(in srgb, var(--owning-faction) 30%, transparent);
  cursor: default;
}
.passenger-sub-name { color: #4ec9d6; }
/* Passenger sub-rows wrap their composition tag (🔗 Leader / ⊕ Wardens) to
   a second line below the bodyguard row so the rail's ~240px width can
   show bodyguard name, count, points and unload button on line 1 while
   the (often long) leader name takes the full row on line 2. */
.rail-unit-passenger-sub { flex-wrap: wrap; row-gap: 2px; }
.passenger-sub-attach-tag,
.passenger-sub-merge-tag {
  /* line-height: 1.4 leaves room for the 🔗 / ⊕ emoji glyphs which
     overflow a tight 1.0 box and get clipped at the bottom otherwise. */
  font: 600 10px/1.4 'Rajdhani', sans-serif;
  color: #c9a352;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* `order: 99` puts the tag AFTER count/points/unload in the flex order,
     so when `flex: 0 0 100%` triggers a wrap, only the tag drops to line 2.
     Otherwise the count/points would also wrap (they sit AFTER the tag in
     DOM order). */
  order: 99;
  flex: 0 0 100%;
  margin: 2px 0 0 24px;
  padding-right: 4px;
}
.rail-unit-embarked { opacity: 0.5; }
.rail-unit-embarked:hover { opacity: 0.75; }
.rt-chip {
  font: 600 9px/1 'Rajdhani', sans-serif; letter-spacing: 1px;
  /* Transport capacity chip — themed to the transport unit's owner. */
  padding: 2px 5px; background: color-mix(in srgb, var(--owning-faction) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--owning-faction) 35%, transparent); color: #4ec9d6;
  border-radius: 2px; white-space: nowrap;
}
.rt-embark-badge {
  display: inline-block; margin-left: 5px;
  font-size: 10px; color: #4ec9d6;
  vertical-align: middle;
}

/* Hover-pulse highlight from the transport-choice popup. Pulses the
   target row's owning faction (the unit being considered for embark). */
@keyframes rt-hover-pulse-anim {
  0%, 100% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--owning-faction) 40%, transparent)); }
  50%      { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--owning-faction) 100%, transparent)); }
}
.rt-hover-pulse {
  animation: rt-hover-pulse-anim 0.9s ease-in-out infinite;
}
/* Selected roster row — themed to that row's OWNING faction so a
   selected UM unit shows cobalt regardless of whose turn it is. The
   .active-enemy split is preserved for legacy callers, but the
   .side-a/.side-b cascade now does the heavy lifting. */
.rail-unit.active { background: color-mix(in srgb, var(--owning-faction) 14%, transparent); border-left-color: var(--owning-faction); }
.rail-unit.active.active-enemy { background: var(--faction-b-tint); border-left-color: var(--faction-b); }

/* ri (roster icon) */
.ri {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ri.side-a { background: var(--faction-a-tint); border: 1px solid var(--faction-a-dim); color: var(--faction-a); }
.ri.side-b { background: var(--faction-b-tint); border: 1px solid var(--faction-b-dim); color: var(--faction-b); }
.ri svg { width: 12px; height: 12px; }

/* rn / rc */
.rn {
  flex: 1; font: 500 13px/1 'Rajdhani', sans-serif;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Selected unit name + count text colour follows the row's OWNING faction. */
.rail-unit.active .rn { color: var(--owning-faction); }
.rail-unit.active.active-enemy .rn { color: var(--faction-b); }
.rc { font-size: 10px; font-weight: 600; color: var(--text-dis); flex-shrink: 0; }
.rail-unit.active .rc { color: color-mix(in srgb, var(--owning-faction) 70%, var(--bg-primary)); }
.rail-unit.active.active-enemy .rc { color: var(--faction-b-dim); }

/* Points label (per-row cost) */
.ru-pts { font: 600 10px/1 'Rajdhani', sans-serif; color: var(--gold); flex-shrink: 0; margin-left: 2px; }

/* ── Leader attachment UI ────────────────────────────── */
.leader-link-btn, .leader-unlink-btn {
  background: none; border: none; cursor: pointer;
  font-size: 14px; padding: 0 4px; line-height: 1;
  opacity: 0.6; transition: opacity 0.15s;
  color: inherit;
}
.leader-link-btn:hover { opacity: 1; }
.leader-unlink-btn { font-size: 12px; color: var(--text-muted); }
.leader-unlink-btn:hover { color: #ff6b52; opacity: 1; }
.forge-dimmed { opacity: 0.25; pointer-events: none; }
.forge-compatible {
  /* Compatible-leader hint — themed to the candidate row's own faction. */
  background: color-mix(in srgb, var(--owning-faction) 6%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--owning-faction) 40%, transparent);
  animation: forge-compatible-pulse 1s ease-in-out infinite;
}
@keyframes forge-compatible-pulse {
  0%, 100% { background: color-mix(in srgb, var(--owning-faction) 3%, transparent); }
  50% { background: color-mix(in srgb, var(--owning-faction) 10%, transparent); }
}

/* ── Pre-game transport loading ─────────────────────── */
.transport-load-btn {
  background: none; border: none; cursor: pointer;
  font-size: 12px; padding: 0 4px; line-height: 1;
  color: var(--gold); opacity: 0.7; transition: opacity 0.15s;
  letter-spacing: -1px;
}
.transport-load-btn:hover { opacity: 1; }
.rail-unit.forge-load-active {
  background: rgba(201,163,82,0.06);
  border-left: 2px solid rgba(201,163,82,0.5);
}

/* Army abilities */
.aa-section { border-top: 1px solid var(--border); }
.aa-header {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; cursor: pointer; user-select: none;
  background: rgba(255,255,255,.02);
  font: 600 9px/1 'Rajdhani', sans-serif; letter-spacing: 2px;
  color: var(--text-muted); text-transform: uppercase;
  transition: color .15s;
}
.aa-header:hover { color: var(--text-sec); }
.aa-chev { font-size: 8px; margin-left: auto; transition: transform .25s; }
.aa-body { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.aa-body.open { max-height: 300px; }
.aa-row {
  display: flex; align-items: center;
  padding: 5px 10px 5px 14px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  gap: 6px; cursor: help;
}
/* Army-abilities row — phase-active highlight follows the section's
   owning faction. (.aa-section.side-a / .side-b alias --owning-faction
   in colors.css, so this resolves correctly under each side's section.) */
.aa-row.phase-active { background: color-mix(in srgb, var(--owning-faction) 14%, transparent); }
.aa-name {
  font: 600 11px/1 'Rajdhani', sans-serif;
  color: var(--text-sec); flex: 1; text-transform: uppercase;
}
.aa-timing {
  font: 600 8px/1 'Rajdhani', sans-serif; letter-spacing: 1px;
  padding: 2px 5px; background: rgba(255,255,255,.04);
  border: 1px solid var(--text-dis); color: var(--text-muted);
  text-transform: uppercase; white-space: nowrap;
}

/* Collapsed state */
#app.collapsed #roster { width: 40px; }
#app.collapsed .rn,
#app.collapsed .rc,
#app.collapsed .faction-label,
#app.collapsed .faction-band,
#app.collapsed .faction-chevron,
#app.collapsed .faction-icon,
#app.collapsed .aa-section,
#app.collapsed .roster-title { display: none; }
#app.collapsed .faction-header { padding: 4px 6px; justify-content: center; border: none; }
#app.collapsed .rail-unit { padding: 4px 6px; justify-content: center; border-left: none; }
#app.collapsed .rail-unit.active { background: color-mix(in srgb, var(--owning-faction) 8%, transparent); }
#app.collapsed .ri { margin: 0 auto; }
#app.collapsed .roster-collapse-btn { transform: scaleX(-1); }
#app.collapsed .roster-header { justify-content: center; padding: 0 4px; }