/* =================================================================
   GARRISON PANEL
   Which facility each unit is housed in, and renting Field Training
   Tents. See frontend/game/js/garrisonPanel.js.
   ================================================================= */

.gr-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(26, 39, 68, 0.5);
    border: 1px solid var(--color-primary-700);
    border-radius: 4px;
}

.gr-summary-label {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 1.1px;
    color: var(--color-text-secondary);
}

.gr-summary-value {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--color-accent-gold);
}

.gr-summary-note {
    flex-basis: 100%;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

/* Over capacity is the state this whole screen exists to resolve, so it is
   coloured rather than left as another line of grey text. */
/* --color-danger resolves to --color-accent-red (#dc2626), which measures
   3.93:1 on this panel — the fallback in the declaration was never reached
   and the text was quietly failing AA. The light red is the one the rest of
   the HUD uses for red-on-dark text (5.03:1). */
.gr-over {
    border-color: var(--color-accent-red-light, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}
.gr-over .gr-summary-value,
.gr-over .gr-summary-note { color: var(--color-accent-red-light, #ef4444); }

/* --- The tent offer ------------------------------------------------- */

.gr-offer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid var(--color-accent-gold-dark);
    border-radius: 4px;
}

.gr-offer-main { flex: 1; min-width: 180px; }

.gr-offer-title {
    display: block;
    font-family: var(--font-display);
    font-size: 0.78rem;
    color: var(--color-accent-gold);
}

.gr-offer-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.gr-offer-muted {
    background: rgba(26, 39, 68, 0.4);
    border-color: var(--color-primary-700);
    color: var(--color-text-secondary);
    font-size: 0.82rem;
}

/* --- Facilities ----------------------------------------------------- */

.gr-facilities { display: flex; flex-direction: column; gap: 10px; }

.gr-facility {
    padding: 10px 12px;
    background: rgba(17, 24, 39, 0.6);
    border: 1px solid var(--color-primary-700);
    border-radius: 4px;
}

/* A rented facility is temporary, and the whole point of this screen is that
   the player can see which ones those are at a glance. Dashed, because the
   thing it denotes is impermanence. */
.gr-rented { border-style: dashed; border-color: var(--color-accent-gold-dark); }

.gr-offline { opacity: 0.75; }

.gr-unassigned { border-style: dotted; }

.gr-fac-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.gr-fac-name {
    font-family: var(--font-display);
    font-size: 0.86rem;
    color: var(--color-text-primary);
}

.gr-fac-space {
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--color-accent-gold);
    white-space: nowrap;
}

.gr-fac-note {
    margin-top: 4px;
    font-size: 0.76rem;
    color: var(--color-text-secondary);
}

.gr-warn { color: var(--color-accent-red-light, #ef4444); }

.gr-units {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.gr-unit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* 44px high: this is the primary control on the screen and is tapped
       repeatedly while reorganising a base (WCAG 2.5.5). */
    min-height: 44px;
    padding: 0 10px;
    background: rgba(26, 39, 68, 0.8);
    border: 1px solid var(--color-primary-700);
    border-radius: 3px;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
}

.gr-unit strong { color: var(--color-accent-gold); }
.gr-unit:hover { border-color: var(--color-accent-gold); }
.gr-unit:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
}

.gr-empty {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--color-text-secondary);
}

.gr-fac-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.gr-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.gr-toggle input { width: 16px; height: 16px; accent-color: var(--color-accent-gold); }

/* --- Buttons -------------------------------------------------------- */

.gr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    background: rgba(26, 39, 68, 0.9);
    border: 1px solid var(--color-primary-700);
    border-radius: 3px;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
}

.gr-btn:hover:not(:disabled) { border-color: var(--color-accent-gold); }
.gr-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gr-btn:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
}

.gr-btn-primary {
    background: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
    color: #0a0f1a;
    font-weight: 600;
}
.gr-btn-primary:hover:not(:disabled) { background: var(--color-accent-gold-light); }

/* --- Moving units --------------------------------------------------- */

.gr-move {
    padding: 10px 12px;
    margin-bottom: 12px;
    background: rgba(26, 39, 68, 0.75);
    border: 1px solid var(--color-accent-gold);
    border-radius: 4px;
}

.gr-move-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text-primary);
}

.gr-move-cancel {
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.gr-move-cancel:hover { color: var(--color-text-primary); }

.gr-move-qty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 10px;
}

.gr-move-qty #gr-qty {
    min-width: 2ch;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-accent-gold);
}

.gr-move-max { font-size: 0.78rem; color: var(--color-text-secondary); }

.gr-move-targets { display: flex; flex-wrap: wrap; gap: 6px; }

.gr-target span {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .gr-offer { flex-direction: column; align-items: stretch; }
    .gr-offer .gr-btn { width: 100%; }
}

/* =================================================================
   COMMITTED TROOPS AND BREAKING VEHICLES UP

   Two additions that both exist because a stack on this screen is no
   longer always something the player can act on.
   ================================================================= */

/* Troops locked to an in-flight vehicle assembly. Rendered as a span,
   not a button, so it neither invites a tap nor takes focus.

   The state is carried by the border, the tag and the cursor — never
   by fading the row. docs/TYPE-LEGIBILITY.md found "NO FACILITY" at
   1.61:1 for exactly this reason: the line explaining why something
   is unavailable is the last line that should be hard to read. So
   this row sits at the same full-strength text colour as a live one. */
.gr-unit-locked {
    cursor: default;
    border-style: dashed;
    border-color: var(--color-accent-cyan);
    background: rgba(6, 182, 212, 0.1);
}

.gr-unit-locked strong { color: var(--color-accent-cyan-light); }

.gr-unit-tag {
    /* 12px is the floor, and this is the label that says why the row
       cannot be moved — the size is not negotiable for density. */
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-accent-cyan-light);
}

.gr-move-breakup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-primary-700);
}

.gr-move-note {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.gr-move-breakup .gr-move-note { margin-top: 0; }

/* Destructive, and coloured like it. --color-accent-red-dark rather
   than the lighter red: white on the light one measures 3.58:1. */
.gr-btn-danger {
    background: var(--color-accent-red-dark);
    border-color: var(--color-accent-red-bright);
    color: var(--color-text-primary);
}

.gr-btn-danger:hover:not(:disabled) {
    background: var(--color-accent-red);
    border-color: var(--color-accent-red-bright);
}