/* ==========================================================================
   Workbench UI ("Live Workbench" redesign)
   - two-pane desktop layout: inputs (left) + live plan (right)
   - sticky bottom bar: totals + Create Battle Plan
   - toolbar: title, theme toggle (bundle-rendered), profile hub
   - builds on top of main.css theme variables (dark default, body.light)
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --wb-radius: 12px;
  --wb-radius-sm: 8px;
  --wb-gap: 14px;
  --wb-accent: var(--theme-heading, #d9ab63);
  --wb-bar-h: 64px;
  --wb-toolbar-h: 44px;
}

html,
body {
  margin: 0;
}
body.prerender {
  background: var(--theme-bg);
  color: var(--theme-text);
}

.page {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 18px 96px; /* bottom padding clears the sticky bar */
}

/* ---------- toolbar ---------- */
.wb-toolbar,
header.wb-card.wb-toolbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--wb-toolbar-h);
  padding: 3px 12px;
  margin: 10px 0 0;
  background: var(--theme-surface-1);
  border: 1px solid var(--theme-border);
  border-radius: var(--wb-radius);
  backdrop-filter: blur(6px);
}
/* the profile hub ships wrapped in Bootstrap spacing helpers — kill them
   inside the toolbar or they inflate the bar height */
.wb-toolbar-controls .section {
  margin: 0 !important;
}
.wb-toolbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--theme-heading);
  white-space: nowrap;
}
.wb-toolbar-title i {
  font-size: 15px;
}
.wb-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* profile hub becomes compact inside the toolbar */
.wb-toolbar .profile-hub {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.wb-toolbar .profile-hub-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  grid-template-areas: none;
  grid-template-columns: none;
  row-gap: 0;
}
.wb-toolbar .profile-hub-label-wrap {
  display: none;
}
.wb-toolbar .profile-selector-meta {
  display: none; /* hint row under the dropdown — noise in a slim bar */
}
.wb-toolbar .profile-hub-actions .btn {
  padding: 3px 10px;
  font-size: 12px;
  min-height: 0;
  min-width: 0;
}
.wb-toolbar .profile-selector-toggle {
  min-height: 0;
  padding: 3px 10px;
  font-size: 12px;
}
@media screen and (min-width: 980px) {
  .wb-toolbar-controls {
    flex-wrap: nowrap;
  }
}
.wb-toolbar .profile-hub-utility {
  display: none; /* transfer tools live in the settings area, not the header */
}
.wb-toolbar #light-theme-toggle-root {
  display: flex;
  align-items: center;
}

/* ---------- shell: two panes ---------- */
.wb-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--wb-gap);
  align-items: start;
  margin-top: var(--wb-gap);
}

/* ---------- cards ---------- */
.wb-card {
  background: var(--theme-surface-1);
  border: 1px solid var(--theme-border);
  border-radius: var(--wb-radius);
  padding: 16px;
}
.wb-inputs .wb-card + .wb-card {
  margin-top: var(--wb-gap);
}
.wb-inputs .wb-card::before {
  content: attr(data-wb-label);
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--theme-text-muted);
}
/* neutralize old separator visuals if any remain */
.wb-inputs .separator {
  display: none;
}

/* tighten the old form sections inside cards */
.wb-card .section {
  padding: 0;
  margin: 0 0 14px;
}
.wb-card .section:last-child {
  margin-bottom: 0;
}
.wb-card .text-label {
  font-size: 13px;
}
.wb-card .text-description {
  font-size: 12.5px;
  color: var(--theme-text-muted);
}

/* unit selection: category grid flows naturally; keep old behavior */
.wb-card .flex-row-container {
  flex-wrap: wrap;
}

/* LAD row: 2x2 grid that fits the left pane */
.wb-card .flex-row-container:has(#available-leadership) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.wb-card .flex-row-container:has(#available-leadership) .flex-element {
  width: auto;
  max-width: none;
}
.wb-card #monster-health-hint {
  grid-column: 1 / -1;
}

/* ---------- live plan pane ---------- */
.wb-plan {
  position: sticky;
  top: calc(var(--wb-toolbar-h) + 24px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--wb-toolbar-h) - var(--wb-bar-h) - 48px);
}
.wb-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--theme-border);
}
.wb-plan-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--theme-text-muted);
}
.wb-plan-live {
  font-size: 11px;
  color: var(--theme-status-success-fg, #7dd48a);
}
.wb-plan-live i {
  font-size: 8px;
  vertical-align: 1px;
}
#wb-plan-body {
  overflow-y: auto;
  min-height: 120px;
  flex: 1 1 auto;
  scrollbar-gutter: stable; /* scrollbar never eats into the numbers */
  /* Scroll shadows (Lea Verou technique): the two "cover" gradients ride
     with the content (local) and slide away once you scroll, revealing the
     edge-pinned shadows (scroll) — so each fade is visible only while content
     is actually hidden under that edge. Per-layer positions are ONLY legal
     in the `background` shorthand (a background-image longhand with a
     position is invalid and the whole declaration gets dropped). */
  background:
    linear-gradient(var(--theme-surface-1) 30%, rgba(0, 0, 0, 0)) top / 100% 44px local no-repeat,
    linear-gradient(rgba(0, 0, 0, 0), var(--theme-surface-1) 70%) bottom / 100% 44px local no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) top / 100% 16px scroll no-repeat,
    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)) bottom / 100% 16px scroll no-repeat;
  background-color: var(--theme-surface-1);
}
.wb-plan-empty {
  padding: 28px 10px;
  text-align: center;
  color: var(--theme-text-muted);
  font-size: 13px;
}
.wb-plan-ref {
  font-size: 12px;
  color: var(--theme-text-muted);
  margin-bottom: 8px;
}
.wb-plan-ref strong {
  color: var(--theme-text);
}
.wb-plan-cat {
  margin-bottom: 12px;
}
.wb-plan-cat-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--theme-heading);
  padding: 4px 0;
  border-bottom: 1px dashed var(--theme-border);
}
.wb-plan-cat-sum {
  font-weight: 400;
  color: var(--theme-text-muted);
}
.wb-plan-rows {
  padding-top: 4px;
}
.wb-plan-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  padding: 3px 0;
}
.wb-plan-row-name {
  flex: 1 1 auto;
  min-width: 0; /* let the name shrink so the ellipsis engages */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-plan-row-n {
  flex: 0 0 auto; /* the count always stays fully visible */
  color: var(--theme-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wb-plan-note {
  font-size: 11.5px;
  color: var(--theme-text-muted);
  padding: 2px 0 0;
  font-style: italic;
}
.wb-plan-foot {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--theme-border);
}
.wb-plan-foot .wb-mini {
  flex: 1;
  font-size: 12px;
  padding: 5px 8px;
}

/* ---------- sticky bottom bar ---------- */
.wb-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--wb-bar-h);
  padding: 10px max(18px, calc((100% - 1560px) / 2 + 18px));
  background: color-mix(in srgb, var(--theme-surface-1) 88%, transparent);
  border-top: 1px solid var(--theme-border);
  backdrop-filter: blur(8px);
}
.wb-bar-totals {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
.wb-chip {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-items: baseline;
  padding: 5px 12px 7px;
  background: var(--theme-surface-2);
  border: 1px solid var(--theme-border);
  border-radius: var(--wb-radius-sm);
  min-width: 130px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.wb-chip-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--theme-text-muted);
}
.wb-chip-v {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  grid-column: 2;
}
.wb-chip-c {
  grid-column: 2;
  grid-row: 2;
  font-size: 10.5px;
  color: var(--theme-text-muted);
  font-variant-numeric: tabular-nums;
}
.wb-chip-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: color-mix(in srgb, var(--theme-border) 55%, transparent);
}
.wb-chip-bar i {
  display: block;
  height: 100%;
  background: var(--wb-accent);
  transition: width 0.25s ease;
}
.wb-chip-over .wb-chip-v,
.wb-chip-over .wb-chip-c {
  color: var(--theme-danger-fg, #ff8484);
}
.wb-chip-over .wb-chip-bar i {
  background: var(--theme-danger-fg, #ff8484);
}
.wb-chip-fit {
  border-color: color-mix(in srgb, var(--wb-accent) 55%, var(--theme-border));
}
.wb-chip-fit .wb-chip-v {
  color: var(--wb-accent);
  font-size: 12.5px;
}

/* the CTA lives in the bar now */
.wb-bar #generate-report {
  flex: 0 0 auto;
  font-weight: 700;
  padding: 10px 26px;
  background: var(--wb-accent);
  border-color: var(--wb-accent);
  color: #14161a;
}
.wb-bar #generate-report:disabled {
  opacity: 0.45;
  filter: grayscale(0.4);
}
.wb-bar #generate-report:not(:disabled):hover {
  filter: brightness(1.08);
}

/* ---------- responsive ---------- */
@media (max-width: 979px) {
  .wb-shell {
    grid-template-columns: 1fr;
  }
  .wb-plan {
    position: static;
    max-height: none;
    order: -1; /* plan above inputs on tablets/phones */
  }
  .wb-toolbar {
    position: static;
  }
  .wb-toolbar .profile-hub-actions {
    display: none; /* profiles manageable via dropdown only on small screens */
  }
  .wb-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 14px;
  }
  .wb-bar #generate-report {
    width: 100%;
  }
  .wb-chip {
    min-width: 108px;
  }
  .wb-card .flex-row-container:has(#available-leadership) {
    grid-template-columns: 1fr;
  }
}

/* ---------- light theme adjustments ---------- */
body.light .wb-bar {
  background: color-mix(in srgb, var(--theme-surface-1) 92%, transparent);
}
body.light .wb-bar #generate-report {
  color: #fff;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wb-chip-bar i {
    transition: none;
  }
}

/* ---------- collapsible folds (advanced sections) ---------- */
.wb-fold {
  border: 1px solid var(--theme-border);
  border-radius: var(--wb-radius-sm);
  margin: 0 0 14px;
  background: color-mix(in srgb, var(--theme-surface-2) 55%, transparent);
  overflow: hidden;
}
.wb-inputs .wb-card .wb-fold:last-child {
  margin-bottom: 0;
}
.wb-fold-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  min-height: 44px; /* touch target */
  font-size: 13px;
  font-weight: 700;
  color: var(--theme-text);
}
.wb-fold-summary::-webkit-details-marker {
  display: none;
}
.wb-fold-summary:hover {
  background: color-mix(in srgb, var(--theme-surface-3) 60%, transparent);
}
.wb-fold-title {
  flex: 1;
}
.wb-fold-chevron {
  font-size: 11px;
  color: var(--theme-text-muted);
  transition: transform 0.18s ease;
}
.wb-fold[open] .wb-fold-chevron {
  transform: rotate(180deg);
}
.wb-fold-badge {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--wb-accent);
  color: #14161a;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.wb-fold-badge[data-empty="1"] {
  display: none;
}
.wb-fold-body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--theme-border);
  background: var(--theme-surface-1);
}
.wb-fold-body .section {
  margin-bottom: 14px;
}
.wb-fold-body .section:last-child {
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wb-fold-chevron {
    transition: none;
  }
}

/* ---------- left drawer: unit selection ---------- */
.wb-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1050;
  width: min(760px, 94vw);
  display: flex;
  flex-direction: column;
  background: var(--theme-bg);
  border-right: 1px solid var(--theme-border);
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.35);
  transform: translateX(-102%);
  transition: transform 0.22s ease;
  visibility: hidden;
}
.wb-drawer.wb-open {
  transform: translateX(0);
  visibility: visible;
}
.wb-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface-1);
}
.wb-drawer-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--theme-heading);
}
.wb-drawer-title i {
  margin-right: 6px;
}
.wb-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 28px;
}
/* the drawer hosts ONLY the five category columns — one per row so unit
   names get full width and never wrap into a packed multi-column grid */
.wb-drawer .wb-drawer-cats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wb-drawer .wb-drawer-cats > .troop-category {
  flex: 1 1 auto;
  max-width: 100%;
  min-width: 0;
}
.wb-drawer .wb-drawer-cats .category-container {
  min-width: 0;
  padding: 12px 14px;
}
.wb-drawer .wb-drawer-cats .troop-families-container {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  column-gap: 18px;
  row-gap: 16px;
}
.wb-drawer .wb-drawer-cats .troop-item {
  padding: 2px 5px;
}
.wb-drawer .wb-drawer-cats .troop-type-label {
  flex-wrap: wrap;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.wb-drawer .wb-drawer-cats .category-name {
  font-size: 110%;
  margin-bottom: 10px;
}
.wb-drawer .wb-drawer-cats .tier-collapse-content {
  padding: 6px 8px 9px;
}
/* small laptops: don't let the drawer swallow the screen; single column so
   unit names keep their full one-line width. Must sit AFTER the base
   drawer rules — media queries don't add specificity, cascade order rules. */
@media screen and (max-width: 1280px) {
  .wb-drawer {
    width: min(560px, 94vw);
  }
  /* all five categories render as collapsible tier panels; the 2-col split
     inside them comes from .tier-panel-columns, so that's what must collapse */
  .wb-drawer .wb-drawer-cats .tier-panel-columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .wb-drawer .wb-drawer-cats .tier-panel-column + .tier-panel-column {
    margin-top: 10px;
  }
  .wb-drawer .wb-drawer-cats .troop-families-container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }
  .wb-drawer .wb-drawer-cats .troop-item {
    padding: 2px 4px;
  }
}
/* phones: full-width sheet */
@media screen and (max-width: 640px) {
  .wb-drawer {
    width: 100vw;
  }
}
/* stacking & loss-order toggles live in card 3 now */
.wb-stacking-slot {
  padding-top: 4px;
}
.wb-stacking-slot .section,
.wb-stacking-slot .flex-column-container {
  margin-bottom: 12px;
}
.wb-stacking-slot .form-check {
  margin-bottom: 10px;
}
.wb-drawer-body .flex-row-container {
  flex-wrap: wrap;
  gap: 14px !important;
  margin-bottom: 18px !important;
}
#wb-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1045;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
#wb-drawer-backdrop.wb-open {
  opacity: 1;
  pointer-events: auto;
}

/* card 1 becomes a compact launcher */
.wb-drawer-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.wb-units-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--wb-accent);
  color: #14161a;
  font-size: 12px;
  font-weight: 700;
}
.wb-units-badge[data-empty="1"] {
  background: var(--theme-surface-3);
  color: var(--theme-text-muted);
}

/* toolbar "Units" toggle (secondary entry point) */
.wb-toolbar-units {
  font-size: 12.5px;
  padding: 5px 12px;
}

@media (prefers-reduced-motion: reduce) {
  .wb-drawer,
  #wb-drawer-backdrop {
    transition: none;
  }
}

/* ---------- card 1: launcher row (drawer open + clear + legend) ---------- */
.wb-inputs .wb-clear-btn {
  padding: 6px 12px;
  font-size: 12.5px;
  margin-left: 10px;
}
.wb-inputs .section:has(> .wb-drawer-open) .unit-icon-legend-chip {
  margin-left: 14px;
  vertical-align: middle;
}
.wb-inputs .section:has(> .wb-drawer-open) .text-description {
  margin-bottom: 10px;
}

/* ---------- live plan rows: keep the count above the bottom fade ----------
   The scroll-shadow backgrounds at the pane's bottom edge can slightly tint
   the last row. Rows are spaced so the count never sits inside the darkest
   strip, and both columns stay clear of the scrollbar. */
#wb-plan-body .wb-plan-row {
  padding: 4px 0;
}
#wb-plan-body .wb-plan-row:last-child {
  margin-bottom: 14px; /* extra breathing room above the bottom fade */
}