/* cogitator/army-view.css v7 */
/* Army Viewer — layout shell (top header + 3-column 25/50/25 grid + states) */

/* DevAgent16 - 2026-06-02
   What: v7 — Header now carries a hamburger menu on the right (mirrors the back button):
         .army-view__header-menu positions it; a descendant override restyles the shared
         .army-menu__btn for the charcoal banner (light-on-dark). Removed the dead inline
         rename styles (.army-view__header-pencil, .army-view__header-name-input[*]) — the
         name is a plain label now and renaming moved into the menu's Edit Name modal.
   Why:  ArmyView.js v14 — army actions consolidated behind the shared hamburger menu. */

/* DebugAgent2 - 2026-06-02
   What: v6 — Header centring reworked to an overlay model. The header is now
         position:relative; the name block lives in a full-width absolutely-positioned
         centring layer (.army-view__header-center, inset:0, flex-centred,
         pointer-events:none) so it centres against the whole header regardless of the
         back button width. The back button is position:absolute on the left (z above
         the layer, pointer-events:auto). Interactive children of the centring layer
         re-enable pointer-events. A symmetric horizontal safe-zone keeps a long name
         clear of the controls (it ellipsises before reaching them). The v5
         .army-view__header-side flex zones are removed.
   Why:  Jérôme review — the wider button broke flex-zone centring; taking the
         controls out of flow removes their impact on the title. */

/* DebugAgent2 - 2026-06-02
   What: v5 — Back button restyled as a solid button mirroring the Army Builder
         "SAVE ARMY" button (.ab-col-3__save-btn): amber fill, --text-inv text,
         heading font, uppercase + heading-tracking, --radius corners, --shadow-sm.
         Sized to content (auto width, 36px tall, horizontal padding) rather than
         full-width — it sits in the header's left zone. Hover darkens to
         --amber-dim. The previous transparent text-link styling is replaced.
   Why:  Jérôme review — the back button should read as a button, consistent with
         the app's primary button styling. */

/* DebugAgent2 - 2026-06-02
   What: v4 — Back button now carries a text label ("← Back to Armies"), so it is
         no longer icon-only: font-size dropped to --text-base, white-space:nowrap,
         horizontal padding added, and the fixed min-width removed (min-height kept
         as the tap-height floor). The header is now a three-zone flex row — left
         side (.army-view__header-side--left), centred name, right side
         (--right) — with both sides flex:1 1 0 so the name stays centred regardless
         of the back button's width. The old .army-view__header-spacer is replaced
         by the right side zone.
   Why:  DebugAgent2 mission — visible back-button label; centring must survive a
         variable-width button. */

/* DevAgent8 - 2026-05-28
   What: v3 — Removed the top-right "Edit Army" button (replaced by a header
         spacer that balances the back button) and the now-unused column
         placeholder styles. */

/* DevAgent8 - 2026-05-28
   What: v2 — Top header gains a centred editable army name + rename pencil. */

/* DevAgent8 - 2026-05-28
   What: v1 — Layout shell for the read-only Army Viewer (#/army/:id).
         Mirrors the Army Builder shell structure but owns its own class names
         (.army-view*, .av-*) — no army.css class names are reused.
         Column content styles live in army-view-col1/2/3.css; the shared card
         and filter primitives are reused from army-builder-col1.css.
   Why:  The Army Viewer is a distinct screen and must not depend on the
         builder's layout classes. */

/* ============================================================
   ROOT — fills the viewport, fixed-height flex column
   ============================================================ */

.army-view {
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ============================================================
   TOP HEADER — charcoal banner (back + army name)
   ============================================================ */

.army-view__header {
  background: var(--banner);
  color: var(--banner-text);
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  flex-shrink: 0;
  position: relative;
}

.army-view__back-btn {
  position: absolute;
  left: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  background: var(--amber);
  color: var(--text-inv);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.army-view__back-btn:hover {
  background: var(--amber-dim);
}

/* DevAgent16 v7: hamburger menu on the header right, mirroring the back button.
   The shared .army-menu (ArmyActions.js) sits inside this positioned wrapper. */
.army-view__header-menu {
  position: absolute;
  right: var(--space-6);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

/* Restyle the shared menu button for the charcoal banner (light-on-dark). The
   descendant selector (0,2,0) outranks the base .army-menu__btn regardless of which
   stylesheet loads first. */
.army-view__header-menu .army-menu__btn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--banner-text);
}

.army-view__header-menu .army-menu__btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--banner-text);
}

/* Full-width centring layer — holds the name block, centred against the whole
   header. Absolutely positioned over the header; pointer-events:none so its empty
   areas don't block clicks. The symmetric horizontal safe-zone reserves room for the
   controls layered on top so a long name ellipsises before it reaches them. */
.army-view__header-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-48, 160px);
  pointer-events: none;
}

/* Centred army-name block — name + rename pencil */
.army-view__header-name {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 0;
  pointer-events: auto;
}

.army-view__header-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--banner-text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   COLUMN CONTAINER — fills remaining height
   ============================================================ */

.av-columns {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Base column — flex column, scrolls its own body */
.av-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: var(--bg);
}

/* Column proportions — 25 / 50 / 25.
   flex-shrink:1 lets each column be bounded by the container so inner
   overflow-y:auto scrolls correctly (same pattern as the builder). */
.av-col--1 { flex: 1 1 25%; width: 25%; max-width: 25%; border-right: 2px solid #444444; }
.av-col--2 { flex: 1 1 50%; width: 50%; max-width: 50%; background: var(--surface); border-right: 2px solid #444444; }
.av-col--3 { flex: 1 1 25%; width: 25%; max-width: 25%; background: var(--surface); }

/* ============================================================
   LOADING / ERROR STATES
   ============================================================ */

.army-view__status {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-16);
  color: var(--text-dim);
  font-size: var(--text-base);
}

.army-view__status--error {
  color: var(--red);
}