/* 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;
    }
}

/* 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;
}