/* ── Ship Designer Styles ─────────────────────────────────────────────────── */
/* Shared list / card / modal / inline-editor / slot-cell rules now live in
   designer-shared.css (dx-* prefix). This file holds only ship-specific
   structure: custom + fixed slot grids, slot section labels. Name input uses
   shared .division-name-input styles (same as tank designer). */

#sd-resources-row[hidden] {
    display: none !important;
}

#ship-right-panel .stat-label {
    position: relative;
}

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

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

/* ── Custom slots (top section - front/mid/rear, always 7 cells) ────────── */
.sd-custom-slots {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.sd-custom-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 7px 3px 5px;
    cursor: pointer;
    min-height: 68px;
    min-width: 0;
}

.sd-custom-slot.is-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ── Fixed slots (bottom row: 7 cols - hull fixed slots left, phantoms right) ─ */
.sd-fixed-section {
    margin-top: 8px;
}

.sd-fixed-slots {
    display: grid;
    grid-template-columns: repeat(var(--sd-fixed-cols, 7), minmax(0, 1fr));
    gap: 5px;
}

.dx-slot-cell.sd-fixed-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 3px 5px;
    cursor: pointer;
    min-height: 68px;
    min-width: 0;
}

.dx-slot-cell.sd-fixed-slot.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* ── Phantom locked cells ─────────────────────────────────────────────────── */
.sd-slot-phantom {
    cursor: default;
}

.sd-slot-phantom .dx-slot-icon-empty {
    color: #383838;
}

.sd-slots-section-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #444;
    padding: 6px 0 2px;
}

/* ── Mobile slot grids ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sd-custom-slots,
    .sd-fixed-slots {
        gap: 3px;
    }

    .sd-custom-slots .sd-custom-slot,
    .sd-fixed-section .dx-slot-cell.sd-fixed-slot {
        min-height: 0;
        padding: 4px 2px 3px;
        gap: 0;
    }

    .sd-custom-slots .dx-slot-label,
    .sd-fixed-section .sd-fixed-slot .dx-slot-label {
        display: none;
    }

    .sd-custom-slots .dx-slot-icon-wrap,
    .sd-fixed-section .sd-fixed-slot .dx-slot-icon-wrap {
        width: 28px;
        height: 28px;
    }

    .sd-custom-slots .dx-slot-icon-empty,
    .sd-fixed-section .sd-fixed-slot .dx-slot-icon-empty {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .sd-custom-slots .dx-slot-icon,
    .sd-fixed-section .sd-fixed-slot .dx-slot-icon {
        width: 24px;
        height: 24px;
    }

    .sd-fixed-section {
        margin-top: 5px;
    }

    /*
     * Inline ship editor: row 1 = name (full width, no variant); row 2 = flex row (trash + Save + Share).
     * Delete is a header sibling (left of name on desktop); when visible it sits in column 1 on row 2.
     */
    .dx-inline-editor-inner .sd-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 name name"
            "actions actions actions actions actions actions";
    }

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

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

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

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

    .dx-inline-editor-inner .sd-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 .sd-editor-header-actions #sd-save-btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

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

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

/* Ship active card uses a teal accent rather than tank's green */
#ship-left-panel .dx-build-card.is-active,
#ship-left-panel .dx-saved-design-card.is-active {
    border-color: #4a6a8a;
    box-shadow: 0 0 0 1px rgba(74, 106, 138, 0.28);
}

#ship-left-panel .dx-saved-design-card.is-invalid {
    opacity: 0.5;
    border-color: #d4900a;
}

/* ── Share split-menu inside the ship editor header ──────────────────────── */
.sd-editor-header .sd-editor-header-actions .pub-split {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

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

/*
 * The default .pub-split-menu opens to the right of the button (style.css).
 * The inline editor wrapper sets overflow:hidden for the open/close animation,
 * so a right-opening menu would be clipped. Anchor the menu to the button's
 * right edge and open it downward instead.
 */
.sd-editor-header .pub-split-menu {
    left: auto;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1200;
}

/* ── Ship share card (overrides on top of `.td-share-card-*`) ─────────────── */
/*
 * The ship share card reuses the tank card's `.td-share-card-*` styling for
 * visual fidelity. Only the slot-row column counts diverge:
 *  - custom row: always 7 cells (CANONICAL_CUSTOM_SLOTS)
 *  - fixed row: always 7 cells (deck slots first when present, then canonical fixed order)
 *
 * The modules column is scaled by 7/6 vs the tank card (which is 280px / 6 cols)
 * so each ship cell is the same physical size as a tank cell.
 */
.sd-card .td-share-card-modules {
    flex: 0 0 calc(280px * 7 / 6);
}

.sd-card .sd-card-custom-row {
    grid-template-columns: repeat(7, 1fr);
}

.sd-card .sd-card-fixed-row {
    grid-template-columns: repeat(var(--sd-card-fixed-cols, 7), 1fr);
}

/* Footer: resources on the left (handled by the base .td-share-card-footer
   space-between layout), dominance + production cost grouped together on
   the right. */
.sd-card .td-share-card-footer-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ─── Naval Doctrine (inside shared doctrine modal) ──────────────────────── */

.naval-sub-doctrine-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .naval-sub-doctrine-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sd-naval-dominance-icon {
    height: 14px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: pixelated;
}