/* cogitator/army-builder-col1.css v44 */
/* Army Builder Column 1 — Unit Browser content styles */

/* DevAgent4 - 2026-05-27
   What: v7 — View-mode card height and element positioning.
         - .ub-card--statblock: height 76px (+6px over base 70px)
         - .ub-card--ai: height 90px (+20px over base 70px)
         - .ub-card__stats margin: -8px → -4px (4px lower)
         - .ub-card__ai-summary: margin-top -4px (4px higher)
   Why: Each view mode needs the card to be tall enough for its content. */

/* DevAgent4 - 2026-05-27
   What: v6 — AI summary wired up.
         (actual text display, 2-line clamp) and .ub-card__ai-summary--empty
         (dim italic fallback when ai_summary is null).
   Why: AI summary is in the DB; no generation needed. */

/* DevAgent4 - 2026-05-27
   What: v5 — Four targeted fixes.
         - .ab-col__title: color set to #fff (white, readable on dark faction bg)
         - .ub-card__stats: margin-top -8px (moves stat block up 10px from 2px)
         - .ub-card__stat-value: bg → var(--bg) parchment, gray border outline
         - Faction filter fully removed in JS v3; CSS needs no change (uf-dropdown
           stays for ability filter dropdowns)
   Why: White title readable on faction colour. Stat block visual refinement. */

/* DevAgent4 - 2026-05-27
   What: v4 — Header title +15% again (now ×1.3225 total from base).
         Faction bg applied via inline style in JS (no CSS change needed).
         .ab-view-toggle and .ab-view-toggle__btn removed (Simple/Stat Block bar gone).
         Added .ab-col__view-btn — icon button right-aligned in header.
         Added .ub-card__ai-placeholder for AI mode stub.
   Why: Icon toggle replaces full-width bar; faction colour via inline style. */

/* DevAgent4 - 2026-05-27
   What: v3 — Card and header sizing tweaks.
         - .ab-col__title: font-size increased by 15% (base → *1.15)
         - .ub-card__name: font-size increased by 10%
         - .ub-card__pts: font-size increased by 10%
         - .ub-card__photo: margin-left 6px
         - .ub-card__info: padding-left reduced by 4px
   Why: Improved readability and visual balance per Jérôme review. */

/* DevAgent4 - 2026-05-27
   What: v2 — Unit card visual fixes + header centering.
         - .ub-card: fixed height 70px, no min-height expansion
         - .ub-card__photo: 70px wide × 70px tall, object-fit:cover (crops to fit,
           no distortion), border-right removed, background matches card surface
         - .ub-card__photo-img: object-fit:cover so portrait images zoom/crop
         - .ub-card__photo-placeholder: matches card background exactly
         - .ab-col__header: centered title via justify-content:center
         - .ab-view-toggle: removed (replaced by icon button in header, Chunk 2)
   Why: Cards must be uniform height regardless of image proportion. No visible
        separation between image and text areas. */

/* DevAgent4 - 2026-05-27
   What: v1 — initial implementation
         Covers: column header/filters, filter panel, view toggle,
         unit browser cards (ub-card), filter popovers (uf-*).
   Why: Column 1 is independently owned by DevAgent4. Isolating styles
        means DevAgent5/6 never touch this file. */

/* ── Column 1 header ── */

.ab-col__header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ab-col__title {
  font-family: var(--font-heading);
  font-size: calc(var(--text-base) * 1.3225);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: #fff;
  flex: 1;
  text-align: center;
}

/* View mode icon button — right side of header */
.ab-col__view-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--text-base);
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.ab-col__view-btn:hover {
  background: rgba(255,255,255,0.25);
}

/* When header has no faction colour (default surface bg), use darker button */
.ab-col__header:not([style]) .ab-col__view-btn,
.ab-col__header[style=''] .ab-col__view-btn {
  background: var(--surface-lo);
  border-color: var(--border);
  color: var(--text-dim);
}

.ab-col__header:not([style]) .ab-col__view-btn:hover,
.ab-col__header[style=''] .ab-col__view-btn:hover {
  background: var(--border);
  color: var(--text);
}

/* ── Filter button bar ── */

.ab-col__filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

/* Remove bottom border when panel is open so bar and panel look connected */
/* (no panel-open modifier needed) */
.uf-btn-group { display: flex; gap: var(--space-2); }

.uf-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  min-height: var(--touch-target);
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.uf-btn:hover              { border-color: var(--border-hi); color: var(--text); }
.uf-btn--active            { border-color: var(--amber); color: var(--amber-dim); background: var(--amber-light); }
.uf-btn--open              { border-color: var(--border-hi); color: var(--text); background: var(--surface-lo); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.uf-btn--active.uf-btn--open { border-color: var(--amber); background: var(--amber-light); }

.uf-btn__badge {
  background: var(--amber);
  color: var(--text-inv);
  border-radius: 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 1px 5px;
  line-height: 1.4;
}

/* Sort dropdown */
.ab-sort-select {
  flex: 0 0 120px;
  width: 120px;
  height: 34px;
  min-height: var(--touch-target);
  margin-left: auto;
  padding: 0 var(--space-6) 0 var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  appearance: none;
  text-align-last: right;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6560' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.ab-sort-select:focus {
  outline: none;
  border-color: var(--amber);
  color: var(--text);
}

/* ── Inline filter panel ── */

.ab-filter-panel {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-lo);
  padding: var(--space-2) var(--space-3);
  flex-shrink: 0;
}

/* Override create-army__select defaults inside the filter panel —
   use compact size matching range inputs (34px / text-sm) */
.ab-filter-panel .create-army__select {
  height: 34px;
  font-size: var(--text-sm);
  padding: 0 var(--space-8) 0 var(--space-3);
}

/* Range fields */
.uf-ranges { display: flex; flex-direction: column; gap: var(--space-3); }

.uf-range-field { display: flex; align-items: center; gap: var(--space-3); }

.uf-range-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-dim);
  width: 72px;
  flex-shrink: 0;
}

.uf-range-inputs { display: flex; align-items: center; gap: var(--space-2); flex: 1; }

.uf-range-input {
  width: 68px;
  height: 34px;
  padding: 0 var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}
.uf-range-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
.uf-range-sep { color: var(--text-dim); font-size: var(--text-sm); }

/* Ability dropdowns */
.uf-dropdowns { display: flex; flex-direction: column; gap: var(--space-3); }

.uf-dropdown-field { display: flex; flex-direction: column; gap: var(--space-1); }

.uf-dropdown-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Row wrapping select + clear button */
.uf-dropdown-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.uf-dropdown-row .create-army__select {
  flex: 1;
  max-width: calc(100% - 60px);
}

/* Inline × clear button — used in both dropdowns and range fields */
.uf-clear-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-dim);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.uf-clear-btn:hover {
  background: var(--red-light);
  border-color: var(--red);
  color: var(--red);
}

/* ── Scrollable unit list ── */

/* DevAgent4 - 2026-05-27
   What: Plain block container — no flex, no flex-direction, no gap.
         Cards are normal block elements that stack by document flow.
         Spacing between cards via margin-bottom on .ub-card.
         The column provides the bounded height via the viewport chain;
         this list simply overflows and scrolls within it.
   Why: Using display:flex on the list made cards flex items, which caused
        flex sizing rules to compress them instead of the list scrolling. */
.ab-col__list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: var(--space-2);
}

/* Category header — shown in Categories sort mode */
.ab-category-header {
  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);
  padding: var(--space-3) var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-2);
}

.ab-category-header:first-child {
  padding-top: var(--space-1);
}

/* Status messages (loading / error / empty) */
.ab-col__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-4);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--text-sm);
}

.ab-col__status--error { color: var(--red); }

/* ── Unit browser card ── */

.ub-card {
  display: flex;
  align-items: stretch;
  height: 70px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  margin-bottom: var(--space-2);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ub-card:last-child {
  margin-bottom: 0;
}

.ub-card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow-sm);
}

/* Height variants per view mode */
.ub-card--statblock { height: 86px; }
.ub-card--ai        { height: 108px; }

/* Selected state — box-shadow follows border-radius, equal visual gap all sides */
.ub-card--selected {
  box-shadow: 0 0 0 3px var(--amber);
  border-color: var(--amber);
  position: relative;
}

/* Photo slot — fixed 70×70, crops to fit, no separator, same bg as card */
/* Photo slot — background-image approach.
   background-size:cover fills the 70px width; background-position:center top
   anchors to the top so portrait images reveal more as the card grows taller. */
.ub-card__photo {
  width: 70px;
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

.ub-card__photo-icon {
  font-size: 1.25rem;
  color: var(--border-hi);
  user-select: none;
}

/* Info section */
.ub-card__info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ub-card__name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.ub-card__name {
  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-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.ub-card__pts {
  font-family: var(--font-heading);
  font-size: calc(var(--text-sm) * 1.10);
  font-weight: var(--heading-weight);
  color: var(--amber-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.ub-card__pts--none {
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: normal;
}

/* Stat block row */
.ub-card__stats {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: -2px 0 2px;
  align-self: center;
}

.ub-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ub-card__stat-label {
  font-size: 0.6175rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.ub-card__stat-value {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid #b8b3aa;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: var(--heading-weight);
  color: var(--text-hi);
  line-height: 1;
}

/* Category badge */
.ub-card__category {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: flex-start;
}

.ub-card__category--character {
  background: #fdf3e0;
  color: var(--amber-dim);
  border: 1px solid rgba(200,134,10,0.3);
}

.ub-card__category--battleline {
  background: #eef5fb;
  color: #1a3a6b;
  border: 1px solid rgba(26,58,107,0.25);
}

.ub-card__category--dedicated_transport {
  background: #f0faf3;
  color: var(--green);
  border: 1px solid rgba(26,92,46,0.25);
}

.ub-card__category--other {
  background: var(--surface-lo);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* AI summary — from unit.ai_summary in DB */
.ub-card__ai-summary {
  font-size: var(--text-xs);
  color: var(--text);
  font-style: italic;
  line-height: 1.4;
  margin-top: -2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.ub-card__ai-summary--empty {
  color: var(--text-dim);
  font-style: italic;
}