/* ---------------------------------------------------------------------------
   Screen layouts. Anything reusable lives in components.css; this file only
   carries composition that is genuinely specific to one screen.

   Screens share a 12-column grid so panels line up across the app.
   --------------------------------------------------------------------------- */

/* `align-items: start` is load-bearing: without it every panel stretches to the
   tallest in its row, which is what turns a tall map into three giant empty
   cards beside it. */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--panel-gap);
  align-content: start;
  align-items: start;
}

.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

@media (max-width: 1400px) {
  .col-3 { grid-column: span 6; }
  .col-4, .col-5 { grid-column: span 6; }
  .col-7, .col-8, .col-9 { grid-column: span 12; }
}

@media (max-width: 1080px) {
  .col-3, .col-4, .col-5, .col-6 { grid-column: span 12; }
}

/* ---- Overview -----------------------------------------------------------
   Two independent stacks rather than a shared row grid: with rows, the tall
   map forces a matching gap beside every panel next to it. Columns pack. */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--panel-gap);
  align-items: start;
}

@media (max-width: 1180px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Equal columns, for screens that are a list of settings panels rather than a
   dashboard with one dominant element. */
.split--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split-col {
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
  min-width: 0;
}


.ov-econ {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--panel-gap);
}

.ov-econ__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--panel-pad);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  min-width: 0;
}

.ov-econ__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-1);
}

.ov-econ__foot .btn {
  margin-left: auto;
}

/* Compact map preview on the dashboard. Fixed aspect so the canvas has a
   stable box to measure before the first frame arrives. */
.ov-map {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 190px;
  /* Capped in both axes: this is a glanceable preview, not the Command
     screen's map, and the game map is roughly 1.56:1 -- extra width past that
     becomes letterbox, not more map. */
  max-height: 340px;
  max-width: 620px;
  border-radius: var(--radius);
  background: var(--bg-void);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.ov-map__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: rgba(8, 7, 15, 0.78);
  border: 1px solid var(--line);
  font-size: var(--text-2xs);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* auto-fill, not auto-fit: with one open session, auto-fit collapses the empty
   tracks and stretches that single card across the whole workspace. */
.ov-fleet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--panel-gap);
}

.ov-session {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--panel-pad);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  min-width: 0;
}

.ov-session.is-focused {
  border-color: var(--primary-wash-strong);
}

.ov-session__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.ov-session__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-session__head .status {
  margin-left: auto;
  flex: none;
}

.ov-session__meters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ov-session__actions {
  display: flex;
  gap: var(--space-2);
}

.ov-session__actions .btn {
  flex: 1;
}

.ov-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--panel-pad);
  border-bottom: 1px solid var(--line-soft);
}

.ov-alert:last-child {
  border-bottom: none;
}

.ov-alert__icon {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
}

.ov-alert__text {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.ov-alert__title {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.ov-alert[data-tone="warn"] .ov-alert__icon { color: var(--warn); }
.ov-alert[data-tone="error"] .ov-alert__icon { color: var(--bad); }
.ov-alert[data-tone="info"] .ov-alert__icon { color: var(--info); }

.ov-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4);
}

/* ---- Command ------------------------------------------------------------ */

.command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--panel-gap);
  flex: 1;
  min-height: 0;
  padding-bottom: var(--page-pad);
}

.command__bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--panel-pad);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.command__bar-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.command__bar-sep {
  width: 1px;
  height: 20px;
  background: var(--line);
  flex: none;
}

.command__bar-label {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

.command__map {
  position: relative;
  min-width: 0;
  min-height: 260px;
  background: var(--bg-void);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.command__map canvas {
  display: block;
}

.command__rail {
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Two meters carry more weight than the four single figures, so the columns
   are explicit rather than an auto-fit that wraps the last item to its own row. */
.command__status {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.4fr 1.4fr repeat(4, minmax(0, 0.8fr));
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--panel-pad);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (max-width: 1200px) {
  .command__status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-3);
  }
}

/* Map overlays. Positioned against the letterboxed viewport using the
   --map-inset-* custom properties the renderer publishes each layout pass. */
.map-overlay {
  position: absolute;
  z-index: var(--z-raised);
  pointer-events: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(8, 7, 15, 0.8);
  border: 1px solid var(--line);
  font-size: var(--text-2xs);
  line-height: 1.6;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.map-overlay--head {
  top: calc(var(--map-inset-top, 0px) + var(--space-3));
  left: calc(var(--map-inset-left, 0px) + var(--space-3));
}

.map-overlay--target {
  bottom: calc(var(--map-inset-bottom, 0px) + var(--space-3));
  left: calc(var(--map-inset-left, 0px) + var(--space-3));
  max-width: 260px;
}

.map-overlay__name {
  color: var(--text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
}

.map-hint {
  position: absolute;
  top: calc(var(--map-inset-top, 0px) + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-raised);
  pointer-events: none;
  font-size: var(--text-2xs);
  color: var(--text-3);
  white-space: nowrap;
}

.map-legend {
  position: absolute;
  right: calc(var(--map-inset-right, 0px) + var(--space-3));
  bottom: calc(var(--map-inset-bottom, 0px) + var(--space-3));
  z-index: var(--z-raised);
  pointer-events: none;
  display: grid;
  gap: 3px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(8, 7, 15, 0.8);
  border: 1px solid var(--line);
}

.map-legend__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--text-2);
}

.map-legend__mark {
  width: 9px;
  height: 9px;
  flex: none;
}

/* ---- Collect ------------------------------------------------------------ */

.collect-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--panel-pad);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.collect-card.is-enabled {
  border-color: var(--primary-wash-strong);
}

.collect-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.collect-card__swatch {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.collect-card__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.collect-card__head .toggle {
  margin-left: auto;
}

.collect-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding-top: var(--space-1);
  border-top: 1px solid var(--line-soft);
}

/* ---- NPC targets -------------------------------------------------------- */

.npc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--panel-gap);
  align-items: start;
}

@media (max-width: 1240px) {
  .npc {
    grid-template-columns: minmax(0, 1fr);
  }
}

.npc__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.npc__search {
  width: 180px;
}

.npc__side {
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
}

.npc-variant {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.npc-variant[data-variant="normal"] { background: var(--surface-3); color: var(--text-2); }
.npc-variant[data-variant="hyper"] { background: var(--info-wash); color: var(--info); }
.npc-variant[data-variant="ultra"] { background: var(--primary-wash-strong); color: var(--primary-hi); }

.npc-table select {
  min-height: var(--control-h-sm);
  height: var(--control-h-sm);
  padding: 0 var(--space-5) 0 var(--space-2);
  font-size: var(--text-xs);
  background-position: right var(--space-2) center;
}

.npc-table input[type="number"] {
  min-height: var(--control-h-sm);
  height: var(--control-h-sm);
  width: 58px;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  text-align: center;
}

/* ---- Squads ------------------------------------------------------------- */

.squad-member {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--panel-pad);
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}

.squad-member:last-child {
  border-bottom: none;
}

.squad-member.is-self {
  background: var(--primary-wash);
}

.squad-member__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.squad-member__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.squad-member__state {
  font-size: var(--text-2xs);
  color: var(--text-3);
}

.squad-member__vitals {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 108px;
  flex: none;
}

.squad-member__actions {
  display: flex;
  gap: var(--space-1);
  flex: none;
}

.squad-slot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--panel-pad);
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-3);
  font-size: var(--text-sm);
}

.squad-slot:last-child {
  border-bottom: none;
}

.squad-slot__mark {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line-loud);
  flex: none;
}

/* ---- Hangar ------------------------------------------------------------- */

.hangar__ship {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}

.hangar__ship-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-4);
}

.hangar__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--panel-gap);
  align-items: start;
}

.hangar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--panel-pad);
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}

.hangar-item:last-child {
  border-bottom: none;
}

.hangar-item:hover {
  background: var(--surface-2);
}

.hangar-item__icon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.hangar-item__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hangar-item__name {
  font-size: var(--text-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hangar-item__meta {
  font-size: var(--text-2xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.hangar-item__actions {
  display: flex;
  gap: var(--space-1);
  flex: none;
}

.hangar-slots {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hangar-slot {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-3);
}

.hangar-slot__value {
  color: var(--text);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.hangar-slot.is-full .hangar-slot__value {
  color: var(--warn);
}

/* ---- Shop --------------------------------------------------------------- */

.shop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--panel-gap);
  align-items: start;
}

@media (max-width: 1240px) {
  .shop {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: var(--space-3);
  padding: var(--panel-pad);
}

.shop-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  min-width: 0;
  transition: border-color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}

.shop-card:hover {
  border-color: var(--line-loud);
  transform: translateY(-1px);
}

.shop-card.is-selected {
  border-color: var(--primary);
  background: var(--primary-wash);
}

.shop-card__thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.shop-card__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-card__price {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  font-size: var(--text-xs);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.shop-card__currency {
  display: inline-block;
  flex: none;
}

.shop__detail {
  position: sticky;
  top: 0;
}

.shop__props {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}

.shop__props dt { color: var(--text-3); }
.shop__props dd { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

.shop__buybar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.shop__buybar input {
  width: 74px;
  text-align: center;
}

.shop__total {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---- Economy ------------------------------------------------------------ */

.econ-quest {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--panel-pad);
  border-bottom: 1px solid var(--line-soft);
}

.econ-quest:last-child {
  border-bottom: none;
}

.econ-quest__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.econ-quest__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.econ-quest__desc {
  font-size: var(--text-xs);
  color: var(--text-3);
  line-height: 1.5;
}

.econ-quest__actions {
  display: flex;
  gap: var(--space-1);
  flex: none;
}

.econ-ads {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.econ-ad {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-2);
}

.econ-ad__count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ---- Behavior / Autobuy / Enrichment ------------------------------------ */

/* Wraps rather than squeezing: in a 300px rail the control drops to its own
   line instead of crushing the explanation into one word per line. */
.setting-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--panel-pad);
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-row__text {
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.setting-row__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.setting-row__help {
  font-size: var(--text-xs);
  color: var(--text-3);
  line-height: 1.5;
}

.setting-row__control {
  flex: 0 1 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.setting-row.is-inactive {
  opacity: 0.55;
}

.ammo-row__icon {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: var(--weight-bold);
  color: var(--text-2);
}

.stock-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--space-3);
  padding: var(--panel-pad);
}

.stock-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

.stock-card__label {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

.stock-card__value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---- Accounts ----------------------------------------------------------- */

.account-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--panel-pad);
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}

.account-row:last-child {
  border-bottom: none;
}

.account-row__avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.account-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-row__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.account-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--text-3);
}

.account-row__actions {
  flex: none;
  display: flex;
  gap: var(--space-2);
}

.update-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--panel-pad);
}

.update-state__text {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
}