/* Air (Airplane) Designer
 * The frame list, inline editor, slot cells, module picker and stats panel all
 * reuse the shared designer styles (designer-shared.css `.dx-*` + style.css
 * `.stats-*`) so the three designers stay visually consistent. This file styles
 * only the air-specific bits: the two-row slot grid (5 + 7), resource chips and
 * the loading hint.
 */

.air-build-loading {
    padding: 24px 12px;
    text-align: center;
    color: #8a8a8a;
    font-size: 13px;
}

/* Match the tank/ship module picker's remove action spacing. */
#air-picker-remove-action {
    padding: 1rem 15px 1.2rem;
    border-bottom: 1px solid #3a3a3a;
}

#air-picker-remove-action[hidden] {
    display: none !important;
}

/* Missions this frame + loadout can fly: a quiet, icon-forward capability line
 * under the module slots - no pill chrome. The mission icon carries the colour;
 * the label is muted text. Wider spacing between items (they lack pill borders)
 * keeps each icon+label pair legible. Reads as part of the editor, not a
 * callout. */
.air-missions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.air-missions-row[hidden] {
    display: none !important;
}

.air-mission-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Uniform chip footprint: transparent chrome at rest keeps the icon-forward,
       compact look while reserving the box so selecting a mission (which fills the
       chip) causes no layout shift. */
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #b3b3b3;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

/* Faint fill on hover hints the badge is clickable (selects the mission). */
.air-mission-badge:hover {
    color: #dcdcdc;
    background: rgba(255, 255, 255, 0.05);
}

/* Selected mission (clicked): neutral pressed-steel chip - a plain "this one's
   active" state with no hue, so it doesn't compete with the green selected-design
   card, the gold/amber invalid hints, or the oxblood mission lens strip. */
.air-mission-badge.is-active,
.air-mission-badge.is-active:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.air-mission-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .air-missions-row {
        gap: 6px 13px;
    }
    .air-mission-badge {
        font-size: 10px;
        padding: 2px 8px;
    }
    .air-mission-icon {
        width: 20px;
        height: 20px;
    }
}

/* Mission focus note — a strip welded to the TOP of the compare bar below it.
   It shares the compare bar's dark material and gold frame (with a faint warm
   wash so the strip reads as a distinct header zone), rounds only its top
   corners, and drops its bottom border so the compare bar's top border becomes
   the divider between the two. When a mission badge is pinned it slides/expands
   into view; when cleared it collapses away. The whole strip is a click target
   that clears back to base (at-rest) stats.

   Collapsed by default (max-height:0) and revealed via `.is-visible` so the
   show/hide can animate — never `display:none`, which can't transition. */
.air-mission-focus-note {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    box-sizing: border-box;
    /* Collapsed state — zero height and no border so nothing shows at rest. */
    max-height: 0;
    margin: 0;
    padding: 0 10px;
    border: 0 solid rgba(139, 122, 90, 0.45);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background:
        linear-gradient(180deg, rgba(120, 96, 52, 0.22) 0%, rgba(80, 66, 42, 0.08) 100%),
        #1a1a1a;
    color: #e8dcc2;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    overflow: hidden;
    pointer-events: none;
    /* Rise + fade + unfurl on reveal; reverse on collapse. */
    transition:
        max-height 0.24s ease,
        padding 0.24s ease,
        opacity 0.2s ease,
        transform 0.24s ease,
        margin 0.24s ease,
        border-color 0.12s ease;
}

.air-mission-focus-note.is-visible {
    max-height: 60px;
    margin-bottom: -1px; /* overlap the compare bar's top border → single seam */
    padding: 6px 10px;
    /* Full frame appears only when shown: top + sides, no bottom, so the compare
       bar's top border becomes the divider between the two. */
    border-width: 1px;
    border-bottom-width: 0;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* While the note is showing, square the compare bar's top corners so the two
   read as one continuous framed unit rather than two stacked rounded boxes. */
.air-mission-focus-note.is-visible + .comparison-tools-section {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.air-mission-focus-note.is-visible:hover {
    border-color: rgba(200, 169, 110, 0.7);
}

.air-mission-focus-note-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    pointer-events: none;
}

.air-mission-focus-note-text {
    flex: 1 1 auto;
    min-width: 0;
    color: #c9bda3;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.air-mission-focus-note-name {
    color: #fff;
    font-weight: 700;
}

/* Trailing × hints the strip is dismissible (clears back to base stats). */
.air-mission-focus-note-clear {
    flex-shrink: 0;
    color: #a08f6a;
    font-size: 14px;
    line-height: 1;
    transition: color 0.12s ease;
}

.air-mission-focus-note:hover .air-mission-focus-note-clear {
    color: #f0e6d0;
}

/* Respect reduced-motion: reveal instantly, no slide. */
@media (prefers-reduced-motion: reduce) {
    .air-mission-focus-note {
        transition: border-color 0.12s ease;
        transform: none;
    }
}

/* Sticky wrapper: the mission note + compare bar scroll together and stick as
   one unit at the top of the stats panel. The wrapper owns the stickiness (its
   top offset is bumped past the navbar on mobile by updateStickySectionPositions
   in main.js, which also measures this wrapper's height so the efficiency bar
   below stacks flush even while the note is expanded). The compare bar inside is
   made static so the two don't both fight for top:0. */
.air-stats-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    margin-bottom: 12px;
}

#air-comparison-tools {
    position: static;
    top: auto;
    z-index: auto;
    margin-bottom: 0;
}

/* Make the sticky unit touch the navbar (no gap) when the stats scroll. On
   desktop the right panel scrolls internally, so a sticky child sticks to the
   panel's *content* box — below its 15px top padding — leaving a gap through
   which the parchment scrolls. Move that top spacing off the panel's padding and
   onto the parchment's margin: the sticky compare-bar unit then sticks flush to
   the navbar, while the card keeps the same resting breathing room. Desktop only
   — on mobile the page scrolls (panel is position:relative) and the header
   already sits flush under the navbar via the JS navbar offset. */
@media (min-width: 769px) {
    #air-right-panel {
        padding-top: 0;
    }
    #air-right-panel .stats-parchment {
        margin-top: 15px;
    }
}

/* The active (in-edit) card uses the shared GREEN `.is-active` highlight from
   designer-shared.css (same as tank/ship) - green is this app's unambiguous
   "selected" language and won't be confused with the gold/olive invalid border. The
   air-doctrine oxblood identity lives on the mission pill above, not this border. */

/* ── Module slots: two fixed rows (5 armament + 7 engine/equipment) ────────
 * Mirrors the tank designer edit layout: tiled .dx-slot-cell rows, no per-row
 * labels, same tile sizing as the tank top/bottom slots. */

.air-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.air-slots-row {
    display: grid;
    gap: 8px;
}

.air-slots-row[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.air-slots-row[data-cols="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* Match the tank designer's slot tile sizing (see .td-top-slot). */
.dx-slot-cell.air-slot-cell {
    padding: 8px 3px 6px;
    min-height: 72px;
    gap: 5px;
}

/* Empty / unavailable slots for this airframe: shown dimmed, not clickable. */
.dx-slot-cell.air-slot-phantom {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

@media (max-width: 768px) {
    /* Tighter gaps so the 7-cell engine/equipment row fits a phone width without
       the cells being squeezed. */
    .air-slots {
        gap: 5px;
    }
    .air-slots-row {
        gap: 3px;
    }

    /* Compact tiles like the ship designer's slot cells (its fixed row is also 7
       wide): drop the fixed min-height and shrink the icon so 7 cells sit
       comfortably instead of an oversized icon jammed into a ~43px cell. */
    .dx-slot-cell.air-slot-cell {
        min-height: 0;
        padding: 5px 2px 4px;
        gap: 0;
    }
    /* Hide the per-slot label on mobile (icon-only), same as tank/ship. */
    .air-slots .dx-slot-cell.air-slot-cell .dx-slot-label {
        display: none;
    }
    .air-slots .dx-slot-cell.air-slot-cell .dx-slot-icon-wrap {
        width: 28px;
        height: 28px;
    }
    .air-slots .dx-slot-cell.air-slot-cell .dx-slot-icon-empty {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .air-slots .dx-slot-cell.air-slot-cell .dx-slot-icon {
        width: 24px;
        height: 24px;
    }
}

/* ── Derived aircraft role badge (assigned by modules) ──────────────────── */

.air-design-type {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    /* Height conforms to the name input / Save-Share buttons beside it; the text
       stays small (this is a metadata label, not a heading). */
    min-height: 32px;
    padding: 0 12px;
    /* Warm neutral (stone/taupe): a desaturated, slightly warm grey so the pill
       reads as a plain metadata label rather than an accent. Deliberately not
       the maroon accent - keeps it from competing with the Share button and
       stays clear of the gold/amber invalid-design hints. */
    border: 1px solid rgba(168, 150, 132, 0.26);
    border-radius: 999px;
    background: rgba(168, 150, 132, 0.07);
    color: #bdb4ac;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ── Editor header: name + type badge + Save/Share/trash ─────────────────────
 * Mirrors the tank editor's `[trash] [name] [type] [Save + Share]` structure on
 * both desktop and mobile (the aircraft's derived-role badge plays the same
 * "type" role the tank's variant dropdown does). The shared `.dx-editor-header`
 * gives the flex row + `.dx-name-wrap { flex: 2 }`; these add the air specifics:
 * a compact type badge (it's a read-only pill, not a full dropdown, so it stays
 * natural-width rather than filling a third), equal-width Save/Share, and the
 * Share menu opening downward (the inline editor's overflow clips a right-open
 * menu). */
.air-editor-header > .dx-delete-design-btn {
    flex: 0 0 auto;
}

.air-editor-header .air-design-type {
    flex: 0 0 auto;
}

.air-editor-header-actions #air-save-btn {
    flex: 1 1 0;
    min-width: 0;
}

.air-editor-header-actions .pub-split {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.air-editor-header-actions .pub-split-btn,
.air-editor-header-actions #air-save-btn {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.air-editor-header-actions .pub-split-btn {
    width: 100%;
}

.air-editor-header .pub-split-menu {
    left: auto;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1200;
}

/* Mobile: row 1 = name + type; row 2 = (trash) + Save + Share. Same 6-col grid
 * as the tank inline editor so the two designers lay out identically. */
@media (max-width: 768px) {
    .dx-inline-editor-inner .air-editor-header {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        column-gap: 8px;
        row-gap: 8px;
        align-items: stretch;
        overflow: visible;
        position: relative;
        z-index: 45;
        grid-template-areas:
            "name name name name type type"
            "actions actions actions actions actions actions";
    }

    .dx-inline-editor-inner .air-editor-header:not(:has(#air-delete-design-btn[hidden])) {
        grid-template-areas:
            "name name name name type type"
            "del act act act act act";
    }

    .dx-inline-editor-inner .air-editor-header:not(:has(#air-delete-design-btn[hidden])) .dx-delete-design-btn {
        grid-area: del;
    }

    .dx-inline-editor-inner .air-editor-header:not(:has(#air-delete-design-btn[hidden])) .air-editor-header-actions {
        grid-area: act;
    }

    .dx-inline-editor-inner .air-name-wrap {
        grid-area: name;
        min-width: 0;
    }

    .dx-inline-editor-inner .air-design-type {
        grid-area: type;
        justify-self: start;
        align-self: center;
        min-width: 0;
        /* Long roles ("Close Air Support", "Maritime Patrol") would otherwise run
           the nowrap pill past the editor's right edge on a phone. Cap it to its
           grid cell and ellipsis the overflow (short roles still hug their text) —
           matching how the tank editor's variant control truncates on mobile.
           inline-block (not the default inline-flex) is what lets text-overflow
           apply; line-height keeps the single-line label vertically centred. */
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 30px;
    }

    .dx-inline-editor-inner .air-editor-header-actions {
        grid-area: actions;
        display: flex;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
        margin-left: 0;
        margin-inline-start: 0;
        justify-self: stretch;
        width: 100%;
    }

    .dx-inline-editor-inner .air-editor-header-actions #air-save-btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    .dx-inline-editor-inner .air-editor-header-actions .pub-split {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    .dx-inline-editor-inner .air-editor-header-actions .pub-split-btn {
        width: 100%;
    }
}

/* ── Stats sections ─────────────────────────────────────────────────────────
 * The air stats render into the #air-stats-body wrapper, so the shared
 * `.stats-card > .stats-section` padding + dashed separators (style.css) don't
 * reach them (that rule uses a direct-child combinator, and tank/ship put their
 * sections directly in .stats-card). Re-apply the same treatment one level down
 * so the air panel isn't flush against the card edge. */
/* Anchor delta carets / indicator marks inside the label (matches tank/ship). */
#air-right-panel .stat-label {
    position: relative;
}

.stats-card > #air-stats-body > .stats-section {
    padding: 14px 16px;
    margin: 0;
    border-bottom: 1px dashed rgba(80, 66, 42, 0.25);
}

.stats-card > #air-stats-body > .stats-section:last-child {
    border-bottom: 0;
}

/* Engine slot flagged when the plane is over-weight (needs more thrust). The
   issue is surfaced on the module causing it (not a panel banner); hovering the
   slot shows the standard invalid-warning tooltip. AMBER = "needs attention",
   deliberately not the maroon air identity. */
.dx-slot-cell.air-slot-cell.air-slot-needs-power {
    border: 2px solid #c8922e;
    box-shadow: 0 0 0 1px rgba(210, 150, 40, 0.28);
}

/* ── Resources ───────────────────────────────────────────────────────────────
 * Rendered as the Resources row inside the Production section. Mirrors the tank
 * designer's `.td-resource-icons` / `.td-resource-item`: numbers inherit the
 * stat-value color (no hardcoded white/bold) so they match the other stats. */

.air-resources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.air-resource-chip {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
}

.air-resource-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}