/* squads.css: Squad manager (.sq2-*). */
/* ==========================================================================
   SQUAD MANAGER — pets/views.py::squad_manager
   --------------------------------------------------------------------------
   One contiguous block in its own .sq2-* namespace, appended at the end of the file
   so the squad presentation stays isolated from the Incursion board and can be audited
   as one unit.

   Every colour here is an existing token, so all ten Legacy palettes and both
   Frontier modes come along for free. The only literal hex are the four dice pip
   colours, which are semantic (a red die is red in every theme) and deliberately
   match the existing .die-* / .squad-preview-stat--* treatment rather than following
   the page.
   ========================================================================== */

/* ---- header ------------------------------------------------------------- */
.sq2-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.sq2-header__titles { min-width: 0; }
.sq2-header__titles .eyebrow { display: block; margin-bottom: 2px; }
/* One line keeps the page's primary content visible on a 375px phone before any squad. */
.sq2-subtitle {
    margin: 4px 0 0;
    max-width: 60ch;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}
.sq2-header__actions { flex: 0 0 auto; }

.sq2-explainer {
    margin: 0 0 18px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.sq2-explainer__summary {
    padding: 10px 14px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.sq2-explainer__summary::-webkit-details-marker { display: none; }
.sq2-explainer__summary::before { content: '\25B8  '; color: var(--text-muted); }
.sq2-explainer[open] .sq2-explainer__summary::before { content: '\25BE  '; }
@media (hover: hover) { .sq2-explainer__summary:hover { color: var(--text-primary); } }
.sq2-explainer__summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sq2-explainer__body { padding: 0 14px 12px; }
.sq2-explainer__body > :last-child { margin-bottom: 0; }

/* ---- the list ----------------------------------------------------------- */
/* Rows, not a card grid: a squad is at most squad_size_limit (3) pets, so the live
   page's two-column 380px-minimum card grid gave a very small amount of content a
   very large box. A full-width row fits the three slots side by side and stacks
   cleanly on a phone. */
.sq2-list { display: flex; flex-direction: column; gap: 10px; }
.sq2-row {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
}
/* The active squad is marked by an edge, plus the existing .badge-active word beside
   the name: never colour alone. */
.sq2-row--active { border-color: var(--color-primary); box-shadow: inset 3px 0 0 0 var(--color-primary); }
.sq2-row__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sq2-row__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sq2-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-lg);
}
.sq2-head-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ---- dice readout ------------------------------------------------------- */
/* One figure, not five chips: the total is what a player compares squads by, and the
   per-colour split is the detail beneath it. */
.sq2-dice { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.sq2-dice__total { color: var(--text-primary); font-family: var(--font-mono); font-size: var(--font-size-lg); font-weight: 700; }
.sq2-dice__label { color: var(--text-muted); font-size: var(--font-size-xs); }
.sq2-dice__split { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: 2px; }
.sq2-pip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

/* ---- the menu ----------------------------------------------------------- */
/* .sq2-menu-wrap MUST stay position: relative: .sq2-menu is absolute, and without a
   positioned ancestor it resolves against the initial containing block and renders a
   full viewport-height down the page at the far left, while still "working". Same
   wrap/button/panel shape as the barracks group menu. Guard:
   game/test_css_positioning.py. */
.sq2-menu-wrap { position: relative; display: inline-flex; }
.sq2-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
@media (hover: hover) { .sq2-menu-btn:hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--color-primary); } }
.sq2-menu-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sq2-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 208px;
    padding: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.sq2-menu form { display: block; }
.sq2-menu__item {
    display: block;
    width: 100%;
    padding: 8px 10px;
    color: var(--text-primary);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
@media (hover: hover) { .sq2-menu__item:hover { background: var(--bg-hover); } }
.sq2-menu__item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
/* Delete is still clearly destructive, but as one item in a menu rather than the
   loudest element on the page repeated once per squad. */
.sq2-menu__item--danger { color: var(--color-error-text); }
@media (hover: hover) { .sq2-menu__item--danger:hover { background: var(--color-error-bg); } }
.sq2-menu__sub { display: block; }
.sq2-rename { display: flex; gap: 6px; padding: 4px 6px 6px; }
.sq2-rename .input { min-width: 0; flex: 1; }
.sq2-menu__reorder {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 2px;
}
.sq2-menu__reorder-label { color: var(--text-muted); font-size: var(--font-size-xs); }
.sq2-menu__nudge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
@media (hover: hover) { .sq2-menu__nudge:hover { color: var(--text-primary); border-color: var(--color-primary); } }
.sq2-menu__nudge:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- the three slots ---------------------------------------------------- */
/* The point of the redesign: the squad's actual contents, at a size that reads as the
   subject of the row. minmax(0, 1fr) per column, never a bare 1fr, so a long pet name
   cannot push the row wider than the page (see game/test_mobile_layout.py). */
.sq2-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
}
.sq2-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font: inherit;
    text-align: left;
}
.sq2-slot--filled {
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    text-decoration: none;
    color: inherit;
}
@media (hover: hover) { .sq2-slot--filled:hover { border-color: var(--color-primary); background: var(--bg-hover); } }
.sq2-slot--filled:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* An empty slot is a real control, not a gap: it is what makes the cap self-evident
   and gives an empty squad something to do besides read a sentence. */
.sq2-slot--empty {
    background: transparent;
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
}
@media (hover: hover) { .sq2-slot--empty:hover { border-color: var(--color-primary); color: var(--text-secondary); background: var(--bg-hover); } }
.sq2-slot--empty:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sq2-slot__art {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-hover);
}
.sq2-slot__art--pending { display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.sq2-slot__plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px dashed var(--border-color);
    font-size: 1.1rem;
    line-height: 1;
}
.sq2-slot__name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sq2-slot__name--empty { color: var(--text-muted); font-weight: 500; }
.sq2-slot__meta { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.sq2-slot__star { color: var(--color-warning); }
.sq2-slot__trait {
    max-width: 11ch;
    overflow: hidden;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- disclosures -------------------------------------------------------- */
.sq2-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sq2-toggle {
    padding: 6px 10px;
    color: var(--text-secondary);
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    cursor: pointer;
}
@media (hover: hover) { .sq2-toggle:hover { color: var(--text-primary); border-color: var(--color-primary); } }
.sq2-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Editing the roster is this page's primary job, so its control is the emphasised one. */
.sq2-toggle--primary { color: var(--text-primary); border-color: var(--border-color); }
.sq2-roster-wrap { display: contents; }
.sq2-xpbudget-wrap { display: contents; }
.sq2-xpbudget {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.sq2-xpbudget__row { display: flex; flex-direction: column; gap: 3px; }
.sq2-details { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 2px; }
/* Same scrolling cap as the live roster, so a large crew is scannable without making
   the row unbounded. */
.sq2-roster {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-height: min(420px, 60dvh);
    margin-top: 4px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
/* Frozen at the top of the scroll box rather than scrolling away with the roster:
   sticky (not fixed) so it stays inside .sq2-roster's own bounds and never floats over
   sibling squad cards. Needs its own opaque background (inherited from the shared
   input[type="search"] rule) so rows scrolling underneath don't show through, and a
   z-index above the plain-flow rows below it. */
.sq2-roster__search {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
}

/* ---- phones ------------------------------------------------------------- */
@media (width < 640px) {
    .sq2-header { gap: 10px; }
    .sq2-header__actions { width: 100%; }
    .sq2-header__actions > .btn { width: 100%; }
    .sq2-row__head { flex-direction: column; align-items: stretch; gap: 8px; }
    .sq2-head-right { justify-content: space-between; }
    .sq2-dice { justify-content: flex-start; }
    /* One slot per line: three across a 375px screen leaves no room for a name. */
    .sq2-slots { grid-template-columns: minmax(0, 1fr); }
    .sq2-toggle { flex: 1; text-align: center; }
    /* Anchored to the button rather than the row's right edge, so it cannot hang off
       the side of a narrow screen. */
    .sq2-menu { right: auto; left: 0; min-width: min(260px, calc(100vw - 48px)); }
}

/* ---- coarse pointer ------------------------------------------------------
   At the END of the squad-manager block, for the same cascade reason the live squad card and the
   ib2 board both take theirs last: several of these also carry .btn-xs/.btn-sm, whose
   min-height is declared later in this file at equal specificity, so a coarse rule
   written earlier silently loses. */
@media (pointer: coarse) {
    .sq2-menu-btn,
    .sq2-menu__nudge,
    .sq2-toggle,
    .sq2-menu__item,
    .sq2-explainer__summary { min-height: 44px; }
    .sq2-menu-btn { min-width: 44px; }
    .sq2-menu__nudge { min-width: 44px; }
    .sq2-slot { min-height: 56px; }
    .sq2-toggle,
    .sq2-menu-btn,
    .sq2-menu__nudge { display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- direct Incursion reward corrections --------------------------------
   The correction screen is a review surface first: the run list stays useful beside
   the preview on a wide staff screen, then becomes a single readable flow on tablets
   and phones. */
.staff-correction-grid {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.5fr);
    gap: 18px;
    align-items: start;
}
.staff-correction-grid > .panel { min-width: 0; }
.staff-correction-search-panel,
.staff-correction-detail,
.staff-correction-empty { padding: 20px; }
.staff-correction-search-panel { position: sticky; top: 1rem; }
.staff-correction-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.staff-correction-search-form .staff-search-form__field { min-width: 0; }
.staff-correction-search-form .input { width: 100%; }
.staff-correction-results { margin-top: 16px; }
.staff-correction-run-list { display: grid; gap: 8px; }
.staff-correction-run {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}
.staff-correction-run:focus-visible { border-color: var(--color-primary); background: var(--surface-raised); }
@media (hover: hover) {
    .staff-correction-run:hover { border-color: var(--color-primary); background: var(--surface-raised); }
}
.staff-correction-run__main,
.staff-correction-run__meta { display: grid; gap: 3px; min-width: 0; }
.staff-correction-run__main span,
.staff-correction-run__meta { color: var(--text-secondary); font-size: .82rem; }
.staff-correction-run__main span { overflow-wrap: anywhere; }
.staff-correction-run__meta { justify-items: end; text-align: right; white-space: nowrap; }
.staff-correction-run__arrow { color: var(--color-primary); font-size: 1.2rem; }
.staff-correction-detail .panel__header { gap: 12px; }
.staff-correction-detail .panel-intro { overflow-wrap: anywhere; }
.staff-correction-callout { display: grid; gap: 4px; margin: 14px 0; padding: 12px 14px; border-left: 3px solid var(--color-primary); background: color-mix(in srgb, var(--surface-raised) 82%, transparent); }
.staff-correction-callout--success { border-left-color: var(--color-reward-ink); }
.staff-correction-callout--warning { border-left-color: var(--color-warning-ink); }
.staff-correction-callout ul { margin: 4px 0 0 18px; }
.staff-correction-summary { display: grid; gap: 10px; margin: 16px 0; }
.staff-correction-summary div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
.staff-correction-summary dt { color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.staff-correction-summary dd { margin: 0; overflow-wrap: anywhere; }
.staff-correction-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.staff-correction-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.staff-correction-table caption { padding: 10px 12px; color: var(--text-secondary); font-size: .82rem; text-align: left; }
.staff-correction-table th,
.staff-correction-table td { padding: 10px 12px; border-top: 1px solid var(--border-color); text-align: left; }
.staff-correction-table thead th { color: var(--text-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; border-top: 0; }
.staff-correction-table td:not(:first-child),
.staff-correction-table th:not(:first-child) { text-align: right; white-space: nowrap; }
.staff-correction-negative { color: var(--color-error-ink); font-weight: 700; }
.staff-correction-reason { display: grid; gap: 6px; margin-top: 18px; }
.staff-correction-reason > span { font-weight: 700; }
.staff-correction-reason textarea { width: 100%; min-height: 100px; resize: vertical; }
.staff-correction-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
.staff-correction-empty { min-height: 280px; display: grid; place-content: center; gap: 8px; text-align: center; }
.staff-correction-empty__icon { font-size: 2rem; }
.inventory-item__qty--debt { color: var(--color-error-ink); font-weight: 700; }
.squad-pet-pick__meta { min-width: 0; overflow-wrap: anywhere; }
.squad-pet-pick .state-chip { white-space: normal; }

@media (width <= 900px) {
    .staff-correction-grid { grid-template-columns: 1fr; }
    .staff-correction-search-panel { position: static; }
}
@media (width <= 600px) {
    .staff-correction-search-panel,
    .staff-correction-detail,
    .staff-correction-empty { padding: 15px; }
    .staff-correction-search-form { grid-template-columns: 1fr; }
    .staff-correction-search-form .btn { width: 100%; }
    .staff-correction-run { grid-template-columns: minmax(0, 1fr) auto; }
    .staff-correction-run__meta { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; text-align: left; }
    .staff-correction-run__arrow { grid-column: 2; grid-row: 1; }
    .staff-correction-summary div { grid-template-columns: 1fr; gap: 3px; }
}