/* =============================================================================
   combat-ammo-hud.css - Map combat pill (volley, munition selector, reload)
   =============================================================================
   Reuses the tracker pill structure and shared classes from sidebar.css
   (.fv-pill-row / .fv-pill-step / .fv-pill-task / .fv-pill-bar). Only the
   container placement and combat-specific content are styled here.

   Layout: volley selector (left step + loadout drawer) · inline munition
   tiles (task segment) · reload readout (right step, always visible).

   Two modes driven by the --precombat class:
     - pre-combat: target in engage range → reload shows the ship's default
                   reload time; the animated hairline bar is hidden
     - in-combat:  encounter active → reload counts down and the pill's
                   bottom hairline doubles as the reload progress bar
   ============================================================================= */

#combat-ammo-hud {
    position: fixed;
    /* Match #ship-navigation-panel's horizontal anchor (navigation.css). */
    left: 40%;
    /* Sit above the context bar: 2.8rem bar offset + ~80px bar height + gap.
       When a drawer is open, --cab-drawer-h (viewport bottom → panel top + 16)
       takes over via max() so the bar clears the drawer too. */
    bottom: max(calc(2.8rem + 80px + 0.75rem), calc(var(--cab-drawer-h, 0px) + 0.75rem));
    transform: translateX(-50%);
    z-index: var(--z-map-controls);
    display: flex;
    flex-direction: column;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    /* Pill chrome - identical to the tracker pills in sidebar.css. */
    background: rgba(13, 14, 18, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 1.9rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

#combat-ammo-hud[hidden] {
    display: none;
}

/* ── Mobile (< 768px) ────────────────────────────────────────────────────────
   responsive.css re-anchors #ship-navigation-panel to left: 50% /
   bottom: 12.8dvh on phones, so mirror that here: centre the pill and sit it
   above the context bar (~72px tall with 42px slots) instead of the desktop
   offsets. */
@media (max-width: 767px) {
    #combat-ammo-hud {
        left: 50%;
        bottom: max(calc(12.8dvh + 72px + 0.75rem), calc(var(--cab-drawer-h, 0px) + 0.75rem));
        max-width: calc(100vw - var(--space-md) * 2);
    }
}

/* The combat pill is shorter than the quest pill. position: relative keeps
   the absolute reload hairline (.fv-pill-bar) pinned to the row, not to the
   pill bottom when the volley drawer is open. */
#combat-ammo-hud .fv-pill-row {
    position: relative;
    min-height: 3.2rem;
}

#combat-ammo-hud .fv-pill-task {
    padding: 0 1rem;
}

/* Volley and reload share a fixed width so the pill stays symmetrical. */
#combat-ammo-hud .combat-ammo-hud-volley,
#combat-ammo-hud .combat-ammo-hud-reload {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
    box-sizing: border-box;
}

/* ── Volley selector (left step segment) ─────────────────────────────────── */

/* The step is a <button>; strip default button chrome and make it clickable
   inside the pointer-events: none pill root. */
button.combat-ammo-hud-volley {
    pointer-events: auto;
    cursor: pointer;
    background: none;
    border-top: none;
    border-bottom: none;
    border-left: none;
    font: inherit;
    color: inherit;
    position: relative;
}

/* Chevron is out of the flex column so label + count center like Reload. */
#combat-ammo-hud .combat-ammo-hud-volley .fv-pill-switcher {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    margin: 0;
}

.combat-ammo-hud-volley-count {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: rgba(197, 160, 89, 0.6);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#combat-ammo-hud[data-volley-open='true'] .fv-pill-switcher svg {
    transform: rotate(180deg);
}

/* Volley drawer - cannon loadout tiles, opens below the pill row. */
#combat-ammo-hud[data-volley-open='true'] .combat-ammo-hud-volley-drawer {
    pointer-events: auto;
    display: block;
    padding: 0.8rem 1rem;
}

/* "Equipped n/N" heading above the tiles (reuses the drawer label style). */
.combat-ammo-hud-volley-drawer .fv-pill-drawer-label {
    margin-bottom: 0.5rem;
    text-align: center;
}

.combat-ammo-hud-volley-heading-count {
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
}

/* Cannon loadout tiles - command-panel sp-hold-slot structure, compact. */
.combat-ammo-hud-loadout {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.combat-ammo-hud-lo-slot {
    width: 3rem;
}

.combat-ammo-hud-lo-slot:not(.sp-hold-slot--empty) {
    cursor: pointer;
}

.combat-ammo-hud-lo-slot .sp-hold-slot-icon,
.combat-ammo-hud-lo-slot .sp-hold-slot-icon img {
    width: 25px;
    height: 25px;
}

/* Cannons included in the current volley (first n in loadout order).
   Doubled-up selector out-specifies .sp-hold-slot's base + hover borders. */
.sp-hold-slot.combat-ammo-hud-lo-slot--selected,
.sp-hold-slot.combat-ammo-hud-lo-slot--selected:hover {
    border-color: var(--gold);
}

/* ── Reload readout (right step segment, always visible) ─────────────────── */

/* Mirror .fv-pill-step's divider on the left edge instead of the right. */
#combat-ammo-hud .combat-ammo-hud-reload {
    border-right: none;
    border-left: 1px solid rgb(39 35 28);
}

#combat-ammo-hud .combat-ammo-hud-reload-time {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: rgba(197, 160, 89, 0.6);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#combat-ammo-hud.combat-ammo-hud--ready .combat-ammo-hud-reload-time {
    color: var(--text-gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Pre-combat the reload segment shows the ship's static default reload time;
   only the animated hairline bar is hidden. */
#combat-ammo-hud.combat-ammo-hud--precombat .fv-pill-bar {
    display: none;
}

/* Reload fill inside the pill's bottom hairline (.fv-pill-bar). */
#combat-ammo-hud .combat-ammo-hud-reload-fill {
    height: 100%;
    width: 0%;
    background: var(--gold);
    transition: width 80ms linear;
}

/* ── Munition selector (inline tiles in the pill's task segment) ─────────── */

.combat-ammo-hud-munitions {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Top padding gives the qty badges room to bleed above the tiles inside
       the pill's overflow: hidden rounding. */
    padding: 10px 0 6px;
}

/* Same scale as the volley loadout tiles (.combat-ammo-hud-lo-slot). The
   con-tiles are the quick-use repair kit / food after the divider. */
.combat-ammo-hud-mun-tile,
.combat-ammo-hud-con-tile {
    width: 3rem;
    cursor: pointer;
}

.combat-ammo-hud-mun-tile .sp-hold-slot-icon,
.combat-ammo-hud-mun-tile .sp-hold-slot-icon img,
.combat-ammo-hud-con-tile .sp-hold-slot-icon,
.combat-ammo-hud-con-tile .sp-hold-slot-icon img {
    width: 25px;
    height: 25px;
}

/* Qty badges on munition tiles - smaller than inventory defaults. */
#combat-ammo-hud .mp-badge-count {
    font-size: 0.7rem;
}

.combat-ammo-hud-mun-tile .mp-badge-count,
.combat-ammo-hud-con-tile .mp-badge-count {
    padding: 2px 4px 1px;
    top: -8px;
    left: -8px;
}

/* Divider between the munition selection and the quick-use consumables. */
.combat-ammo-hud-con-sep {
    align-self: center;
    width: 1px;
    height: 2.4rem;
    background: rgba(197, 160, 89, 0.2);
}

/* Currently selected munition (same gold outline as the volley loadout).
   Doubled-up selector out-specifies .sp-hold-slot's base + hover borders. */
.sp-hold-slot.combat-ammo-hud-mun-tile--selected,
.sp-hold-slot.combat-ammo-hud-mun-tile--selected:hover {
    border-color: var(--gold);
    background: rgba(197, 160, 89, 0.08);
}

/* No munitions in the hold at all. */
.combat-ammo-hud-item-empty {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-danger);
}

/* Selected munition ran dry - red badge until the server falls back. */
#combat-ammo-hud.combat-ammo-hud--empty .combat-ammo-hud-mun-tile--selected .mp-badge-count {
    color: var(--text-danger);
    border-color: var(--text-danger);
}

.combat-ammo-hud-con-tile--empty {
    cursor: default;
    opacity: 0.55;
}

.combat-ammo-hud-con-tile--empty .mp-badge-count {
    color: var(--text-danger);
    border-color: var(--text-danger);
}