/* cogitator/army-view-col3.css v11 */
/* Army Viewer Column 3 — "UNIT OPTIONS" panel styles. */

/* DevAgent22 - 2026-07-15
   What: v11 — Modal: max-height 85vh + scrollable body (header/footer pinned);
         inline Profile Name row (.av-col-3__name-row/-label/-input). Pills: removed
         the redundant self-contained .dsv-equip-* copy (Col2 v7 owns the recoloured
         base); modal unselected pills now render outline (transparent + lighter
         type-colour text) via .av-col-3__pill-btn--off; selected = solid base.
   Why:  Modal layout + global pill recolour (Jérôme). */

/* DevAgent22 - 2026-07-15
   What: v10 — .av-col-3__mrow-num (lighter, smaller "(model #n)" suffix on the bold
         model name).
   Why:  Jérôme review. */

/* DevAgent22 - 2026-07-15
   What: v9 — Per-model rows top-aligned (token flush to top, not centered); added
         .av-col-3__mrow-body + .av-col-3__mrow-name (bold model name above pills).
   Why:  Jérôme review. */

/* DevAgent22 - 2026-07-15
   What: v8 — Per-model loadout rows below the dropdown: .av-col-3__mrow (min-height
         80px), .av-col-3__mrow-token (60×60), .av-col-3__mrow-pills (wrapping).
   Why:  Jérôme — one row per model with a 60×60 token + selected pills. */

/* DevAgent22 - 2026-07-15
   What: v7 — Taller profile dropdown (padding 7px 10px + min-height 36px). */

/* DevAgent22 - 2026-07-15
   What: v6 — Unit Profile banner now hosts the profile dropdown centered between
         the title and the menu (grid 1fr auto 1fr): .av-col-3__section-head--profile,
         .av-col-3__profile-select(-wrap), .av-col-3__menu-wrap, .av-col-3__select-note.
         The chip-selector, field-button and per-figure display rules are now unused
         (see note below) — left as dead rules for a later cleanup.
   Why:  Jérôme — dropdown selector in the header; per-figure pills removed. */

/* DevAgent22 - 2026-07-15
   What: v5 — Section-title type now matches .ab-category-header exactly (Col1
         category headers): font-size calc(--text-base * 1.10), --heading-tracking,
         --heading-transform (was --text-sm / 0.1em / uppercase).
   Why:  Jérôme — labels should match the Col1 "Characters" category label size. */

/* DevAgent22 - 2026-07-15
   What: v4 — iPad polish: removed the panel's top padding so the first section
         banner sits flush under the UNIT OPTIONS column header (no gap); bumped
         .av-col-3__section-title from --text-xs to --text-sm to match the Col1
         section labels.
   Why:  Jérôme review. */

/* DevAgent22 - 2026-07-15
   What: v3 — iPad Gate-3 fixes:
         • Section headers are now full-width tinted banners (--surface-lo fill,
           uppercase heading), mirroring ArmyViewCol2's .dsv-admin-block, full-bleeding
           past the panel's side padding.
         • Added a SELF-CONTAINED copy of the .dsv-equip-* pill rules so pills render
           even when the deployed army-view-col2.css predates the pill rework (v4). The
           reused class NAMES are unchanged; the rules are byte-identical to Col2 v5, so
           there is no conflict if that stylesheet is also present.
   Why:  Pills rendered as bare text (no .dsv-equip-* on the page) and section headers
         read as thin underlines rather than banners. */

/* DevAgent22 - 2026-07-15
   What: v2 — Styles for the UNIT OPTIONS panel (Unit Profiles §1 live; §2–4 inert).
         Adds the .av-col-3__ panel/section/chip/figure/flag/modal classes and the
         generic .army-menu__item--disabled rule (grays the Datasheet-Default menu
         items).
   Why:  DevAgent22 — the "EQUIP UNIT" surface for Unit Profiles. */

/* DevAgent8 - 2026-05-28
   What: v1 — Body + empty-state styles for the Col3 stub. The header reuses the
         shared .ab-col__header / .ab-col__title primitives from
         army-builder-col1.css; only the scrollable body and empty state are
         owned here. */

/* ── Scrollable body ── */
.av-col-3__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── Empty state ── */
.av-col-3__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
  padding: var(--space-6) var(--space-4);
}

.av-col-3__empty-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
}

/* ── Panel + sections ── */
.av-col-3__panel {
  padding: 0 var(--space-3) var(--space-6);
}

.av-col-3__section {
  margin-bottom: var(--space-5);
}

/* Full-width tinted banner header (mirrors ArmyViewCol2's .dsv-admin-block look:
   --surface-lo fill, uppercase heading). Full-bleeds past the panel's side padding. */
.av-col-3__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 calc(-1 * var(--space-3)) var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-lo);
  border-top: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border);
}

.av-col-3__section-title {
  font-family: var(--font-heading);
  font-size: calc(var(--text-base) * 1.10);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--text-dim);
}

.av-col-3__section--inert .av-col-3__section-title { opacity: 0.7; }

/* Unit Profile banner: title (left) · profile dropdown (centered) · menu (right). */
.av-col-3__section-head--profile {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.av-col-3__profile-select-wrap {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.av-col-3__menu-wrap {
  display: flex;
  justify-content: flex-end;
}

.av-col-3__profile-select {
  max-width: 160px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 7px 10px;
  min-height: 36px;
  border-radius: 6px;
  border: var(--border-width) solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.av-col-3__select-note {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-dim);
}

/* NOTE (v6): .av-col-3__chips/-chip*, -field-row/-field-btn, -display, -pill--unresolved,
   -pill-note, -flag* are no longer emitted (chip selector + per-figure display removed).
   Retained as dead rules for now; safe to drop at a later cleanup. */

.av-col-3__section-soon {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-dim);
}

.av-col-3__note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-dim);
  padding: var(--space-2) 0;
}

.av-col-3__note--error { color: #c0392b; }

.av-col-3__gate {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--text-dim);
  padding: var(--space-3) 0;
}

/* ── Profile chips (browse; ✓ = fielded) ── */
.av-col-3__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.av-col-3__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  padding: 4px 10px;
  border-radius: 999px;
  border: var(--border-width) solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.av-col-3__chip--active {
  border-color: var(--dsv-faction-color);
  box-shadow: inset 0 0 0 1px var(--dsv-faction-color);
}

.av-col-3__chip-check { color: var(--dsv-faction-color); font-weight: 700; }

.av-col-3__chip-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--dsv-faction-color);
  color: var(--dsv-faction-color-text);
}

/* ── Field-on-this-unit ── */
.av-col-3__field-row { margin-bottom: var(--space-3); }

.av-col-3__field-btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  border: var(--border-width) solid var(--dsv-faction-color);
  background: var(--dsv-faction-color);
  color: var(--dsv-faction-color-text);
  cursor: pointer;
}

.av-col-3__field-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Per-figure display + modal rows ── */
.av-col-3__display { margin-top: var(--space-1); }

/* Per-model loadout row: 60×60 token + model name (bold) over its wargear pills. */
.av-col-3__mrow {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 80px;
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--border);
}

.av-col-3__mrow:first-child { border-top: none; }

.av-col-3__mrow-token {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
}

.av-col-3__mrow-token--empty {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
}

.av-col-3__mrow-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.av-col-3__mrow-name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

.av-col-3__mrow-num {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.av-col-3__mrow-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.av-col-3__fig {
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--border);
}

.av-col-3__fig:first-child { border-top: none; }

.av-col-3__fig-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 4px;
}

.av-col-3__fig-icon {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  object-fit: cover;
  flex: none;
}

.av-col-3__fig-icon--empty {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
}

.av-col-3__fig-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.av-col-3__fig-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.av-col-3__fig-none {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-dim);
}

/* ── Unresolved / orphaned flags ── */
.av-col-3__pill--unresolved {
  border-style: dashed;
  color: var(--text-dim);
}

.av-col-3__pill-note { font-style: italic; }

.av-col-3__flag {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-width) dashed var(--border);
}

.av-col-3__flag-head {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-dim);
  margin-bottom: 4px;
}

/* ── Equipment pills — the .dsv-equip-* base (now type-coloured, solid) lives in
   army-view-col2.css v7, which is loaded wherever this panel renders. Col3 only adds
   the modal's unselected/outline override (below). ── */

/* ── Modal ── */
.av-col-3__modal {
  max-width: 560px;
  width: 92vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

/* Scrollable body — header (title) + footer (Cancel/Save) stay pinned. */
.av-col-3__modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Profile Name — label + field on one row. */
.av-col-3__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.av-col-3__name-label { flex: none; margin: 0; }
.av-col-3__name-input { flex: 1 1 auto; min-width: 0; }

.av-col-3__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.av-col-3__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 6px;
  border: var(--border-width) solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.av-col-3__toggle-box {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: var(--border-width) solid var(--border);
  background: transparent;
}

.av-col-3__toggle--on { border-color: var(--dsv-faction-color); }
.av-col-3__toggle--on .av-col-3__toggle-box {
  background: var(--dsv-faction-color);
  border-color: var(--dsv-faction-color);
}

.av-col-3__wargear-wrap {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.av-col-3__wargear-head {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.av-col-3__wargear-line {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text);
}

.av-col-3__wargear-line--sub { padding-left: var(--space-3); }

.av-col-3__figs { margin-top: var(--space-3); }

/* Togglable pills in the modal — selected = solid (the .dsv-equip-pill base);
   unselected = outline (transparent fill, type-colour border + lighter type-colour
   text). The 2-class selector beats the equipment dark-text base rule. */
.av-col-3__pill-btn { cursor: pointer; }

.dsv-equip-pill.av-col-3__pill-btn--off {
  background: transparent;
  color: var(--pill-c);
}

.dsv-equip-pill.av-col-3__pill-btn--off .dsv-equip-pill__type {
  color: var(--pill-c);
}

/* ── Generic: disabled ArmyMenu item (ArmyActions v4) ── */
.army-menu__item--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}