/* Copyright (c) 2026 Pavel Bardukov. All rights reserved. See LICENSE. */
/* Ship browser - the main screen (ui/ships.js). Colours come from the fitwindow.css variables so
   the eleven faction themes repaint it too. */

.ships{display:flex; flex:1 1 auto; width:100%; height:100%; min-width:0; min-height:0}
.ships-status{margin:auto; padding:24px; font-size:14px}
.ships-status button.seg{margin-left:8px}

/* ── class tree ─────────────────────────────────────────────────────────────────────────── */
.ships-tree{flex:0 0 260px; overflow-y:auto; padding:8px 6px 12px;
  background-color:var(--bg-panel); border-right:1px solid var(--border)}
.ships-all,.ships-class,.ships-group{display:flex; align-items:center; gap:6px; padding:5px 8px;
  border-radius:3px; cursor:pointer; user-select:none; color:var(--text)}
.ships-all:hover,.ships-class:hover,.ships-group:hover{background-color:rgba(255,255,255,.05)}
.ships-all.on,.ships-class.on,.ships-group.on{background-color:var(--primary-bg); color:var(--accent);
  box-shadow:inset 2px 0 0 var(--accent)}
.ships-all,.ships-class{font-family:var(--font-display); letter-spacing:var(--display-tracking); font-size:12px}
.ships-all{margin-bottom:4px}
.ships-class{margin-top:2px}
.ships-group{padding-left:28px; font-size:12px}
.ships-caret{display:inline-block; width:10px; color:var(--dim); font-size:10px; transition:transform .12s}
.ships-class.open .ships-caret{transform:rotate(90deg)}
.ships-caret:hover{color:var(--accent)}
.ships-tree-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ships-count{color:var(--dim); font-family:"Segoe UI",Arial,sans-serif; font-size:11px; letter-spacing:0; font-weight:normal}
.ships-class.empty,.ships-group.empty{opacity:.45}

/* ── right side: filter bar + grid ──────────────────────────────────────────────────────── */
.ships-main{flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column}
.ships-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px 14px;
  background-color:var(--bg-panel); border-bottom:1px solid var(--border); flex:0 0 auto}
.ships-search{width:230px; padding:5px 8px; font-size:13px; font-family:"Segoe UI",Arial,sans-serif;
  background-color:var(--bg-card); color:var(--text); border:1px solid var(--border); border-radius:3px; outline:none}
.ships-search:focus{border-color:var(--accent)}
.ships-search::placeholder{color:var(--dim)}
.ships-chips{display:flex; flex-wrap:wrap; gap:3px}
.ships-chips + .ships-chips{border-left:1px solid var(--border); padding-left:12px}
button.ships-chip{padding:3px 7px; font-size:11px; color:var(--dim)}
button.ships-chip.active{background-color:var(--primary-bg); color:var(--accent); border-color:var(--accent)}
/* Icon chips (the factions): the picture IS the label, the name rides in title/aria.
   Inactive is greyed and dimmed, the picked one is full colour. */
button.ships-chip.ico{display:inline-flex; align-items:center; justify-content:center; padding:2px 5px}
button.ships-chip.ico img{display:block; filter:grayscale(1); opacity:.55;
  transition:filter .12s, opacity .12s}
button.ships-chip.ico:hover img,button.ships-chip.ico.active img{filter:none; opacity:1}
/* 2026-09-18: icons larger twice by 25 % (faction 20 -> 31) and the faction chips in TWO rows,
   read left to right: `--cols` = half the chips, set by `renderChips`. The tech-level chip row
   was dropped on 2026-09-20; only the faction (or race) row is a grid. */
/* Faction emblems are ALWAYS in their own colours (user's call, 2026-09-18): a pick shows only
   as the chip's frame. The greyscale made the dark ones (Blood Raiders) vanish anyway. */
button.ships-chip.ico-faction img{width:31px; height:31px; filter:none; opacity:1}
#ships-races{display:grid; grid-template-columns:repeat(var(--cols, 10), auto)}
/* "Paste fit" is a normal chip, just a touch roomier than a one-word filter chip. */
#ships-paste button.ships-chip{padding:4px 10px; color:var(--text)}
#ships-paste button.ships-chip:hover{color:var(--accent)}
/* The bar's status line: takes the rest of the row, disappears when there is nothing to say
   (an empty `.status` would still claim its min-height and push the bar taller). */
.ships-msg{flex:1 1 140px; min-width:0; padding-left:4px; font-size:12px}
.ships-msg:empty{display:none}

.ships-grid{flex:1 1 auto; min-height:0; overflow-y:auto; padding:4px 14px 18px;
  background-color:rgba(6,12,18,.55)}
.ships-class-head{margin:16px 0 2px; padding-bottom:3px; border-bottom:1px solid var(--accent2);
  font-family:var(--font-display); letter-spacing:var(--display-tracking); font-size:14px;
  color:var(--accent)}
.ships-group-head{margin:10px 0 6px; color:var(--dim); font-size:11px; font-weight:bold;
  text-transform:uppercase; letter-spacing:.6px}
.ships-group-head .ships-count{margin-left:4px}
.ships-cards{display:grid; grid-template-columns:repeat(auto-fill, 96px); gap:6px}
.ships-empty{padding:40px 0; text-align:center; font-size:14px}

/* ── hull card ──────────────────────────────────────────────────────────────────────────── */
.ship-card{width:96px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px 5px;
  background-color:var(--bg-card); border:1px solid var(--border); border-radius:3px;
  cursor:pointer; user-select:none; transition:border-color .12s, background-color .12s}
.ship-card:hover{border-color:var(--accent)}
.ship-card.selected{background-color:var(--primary-bg); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
/* The frame keeps its size when the capture-phase error listener hides a missing icon.
   `position:relative` anchors the saved-fits badge to its top-right corner. */
.ship-card-pic{position:relative; width:64px; height:64px; display:block;
  background-color:rgba(0,0,0,.35); border-radius:2px}
/* How many saved fits this hull has. Never a click target: the whole card picks the ship. */
.ship-fits{position:absolute; top:2px; right:2px; pointer-events:none;
  min-width:14px; padding:0 3px; box-sizing:border-box; text-align:center;
  font-family:"Segoe UI",Arial,sans-serif; font-size:10px; line-height:14px; font-weight:bold;
  color:var(--accent); background-color:rgba(6,12,18,.85); border:1px solid var(--accent);
  border-radius:7px}
.ship-card.selected .ship-fits{background-color:rgba(6,12,18,.95)}
.ship-card-ico{width:64px; height:64px; display:block}
.ship-card-name{width:100%; text-align:center; font-size:11px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ship-card:hover .ship-card-name,.ship-card.selected .ship-card-name{color:var(--accent)}