/* Legacy modal namespaces → unified gunmetal + gold design (style-only bridge) */

/* --- Bootstrap building-modal pattern (Warehouse, Marketplace, EndedBattles) --- */

.building-modal-overlay {
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 767.98px) {
    .building-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .building-modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .building-modal-content {
        border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        border: 1px solid var(--border-subtle) !important;
        border-bottom: none !important;
    }

    .building-modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .building-modal-footer {
        flex-shrink: 0 !important;
        flex-direction: column-reverse !important;
    }

    .building-modal-footer .building-action-btn,
    .building-modal-footer .btn {
        width: 100% !important;
        min-height: 44px !important;
    }
}

.building-modal-content {
    background: var(--bg-surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-overlay), var(--sh-bevel) !important;
}

.building-modal-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: var(--s-3) var(--s-4) !important;
    flex-shrink: 0;
}

.building-modal-title {
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
    font-size: var(--fs-xl) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-shadow: none !important;
}

.building-modal-subtitle {
    color: var(--accent-primary) !important;
    font-size: var(--fs-sm) !important;
}

.building-modal-close,
.btn-close.building-modal-close {
    background: transparent !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-sm) !important;
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    min-width: 36px !important;
    min-height: 36px !important;
    transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease) !important;
}

.building-modal-close:hover,
.btn-close.building-modal-close:hover {
    background: var(--accent-primary-wash) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    transform: none !important;
}

.building-modal-body {
    background: var(--bg-surface-1) !important;
    padding: var(--s-4) !important;
    color: var(--text-primary) !important;
}

.building-modal-footer {
    background: var(--bg-surface-1) !important;
    border-top: 1px solid var(--border-subtle) !important;
    padding: var(--s-3) var(--s-4) !important;
    padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0)) !important;
    gap: var(--s-2) !important;
}

@media (min-width: 768px) {
    .building-modal-dialog {
        max-width: min(640px, 100%) !important;
        margin: var(--s-4) auto !important;
    }

    .building-modal-footer {
        padding-bottom: var(--s-3) !important;
    }
}

/* --- Research modal --- */

.research-modal-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

@media (max-width: 767.98px) {
    .research-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .research-modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .research-modal-sheet {
        max-height: 100dvh !important;
        height: 100dvh !important;
        border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    }

    .research-modal-grab {
        display: block !important;
    }

    .research-modal-footer {
        flex-direction: column-reverse !important;
    }

    .research-modal-btn {
        width: 100% !important;
        min-height: 44px !important;
    }
}

.research-modal-sheet {
    background: var(--bg-surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-overlay), var(--sh-bevel) !important;
}

.research-modal-header {
    border-bottom: 1px solid var(--border-subtle) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%) !important;
}

.research-modal-title {
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.research-modal-close {
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-sm) !important;
    background: transparent !important;
}

.research-modal-close:hover {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    background: var(--accent-primary-wash) !important;
}

.research-modal-body {
    color: var(--text-primary) !important;
}

.research-modal-footer {
    border-top: 1px solid var(--border-subtle) !important;
    background: var(--bg-surface-1) !important;
}

.research-modal-btn-primary {
    background: linear-gradient(180deg, var(--accent-primary-hover) 0%, var(--accent-primary) 100%) !important;
    color: var(--text-on-accent) !important;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 60%, #000) !important;
    border-radius: var(--r-sm) !important;
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    box-shadow: var(--sh-bevel) !important;
}

.research-modal-btn-primary:hover {
    box-shadow: var(--glow), var(--sh-bevel) !important;
}

.research-modal-btn-secondary {
    background: var(--bg-surface-2) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    border-radius: var(--r-sm) !important;
    font-family: var(--font-ui) !important;
}

.research-modal-btn-secondary:hover {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.research-modal-prereq-item.is-done {
    color: var(--status-success) !important;
}

/* --- Alliance modal --- */

.alliance-modal-backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
    align-items: flex-end !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .alliance-modal-backdrop {
        align-items: center !important;
        padding: var(--s-4) !important;
    }
}

.alliance-modal {
    background: var(--bg-surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    color: var(--text-primary) !important;
    box-shadow: var(--sh-overlay), var(--sh-bevel) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
}

@media (min-width: 768px) {
    .alliance-modal {
        width: min(100%, 480px) !important;
        border-radius: var(--r-lg) !important;
    }
}

/* --- Equipment modal --- */

.equipment-modal-backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
    align-items: flex-end !important;
}

@media (min-width: 768px) {
    .equipment-modal-backdrop {
        align-items: center !important;
    }
}

.equipment-modal {
    background: var(--bg-surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    color: var(--text-primary) !important;
    box-shadow: var(--sh-overlay), var(--sh-bevel) !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100dvh !important;
}

@media (min-width: 768px) {
    .equipment-modal {
        width: 90% !important;
        max-width: 480px !important;
        max-height: 90dvh !important;
        border-radius: var(--r-lg) !important;
    }
}

.equipment-modal h4 {
    color: var(--accent-primary) !important;
    font-family: var(--font-ui) !important;
    text-transform: uppercase !important;
}

.equipment-modal-item:hover {
    background: var(--accent-primary-wash) !important;
    border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent) !important;
}

.equipment-modal-item small {
    color: var(--text-secondary) !important;
}

/* --- General management modal --- */

.general-mgmt-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
}

.general-mgmt-modal {
    background: var(--bg-surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-overlay), var(--sh-bevel) !important;
    font-family: var(--font-ui) !important;
}

@media (max-width: 767.98px) {
    .general-mgmt-modal {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
}

.general-mgmt-header {
    border-bottom: 1px solid var(--border-subtle) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%) !important;
}

.general-mgmt-title {
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
    text-transform: uppercase !important;
}

.general-mgmt-close-btn {
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-sm) !important;
    color: var(--text-secondary) !important;
}

.general-mgmt-close-btn:hover {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    background: var(--accent-primary-wash) !important;
}

.general-mgmt-footer {
    border-top: 1px solid var(--border-subtle) !important;
    background: var(--bg-surface-1) !important;
}

.general-mgmt-tab.active {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    background: var(--accent-primary-wash) !important;
}

/* --- Military unit modals --- */

.mu-modal-backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
}

.mu-modal--help,
.mu-modal {
    background: var(--bg-surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-lg) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--sh-overlay), var(--sh-bevel) !important;
    font-family: var(--font-ui) !important;
}

@media (max-width: 767.98px) {
    .mu-modal--help,
    .mu-modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
        max-height: 100dvh !important;
    }
}

.mu-mobile-more-backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
}

.mu-mobile-more-sheet {
    background: var(--bg-surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    box-shadow: var(--sh-overlay) !important;
}

/* --- Profile medal modal --- */

.profile-medal-modal-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
}

.profile-medal-modal {
    background: var(--bg-surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-lg) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--sh-overlay), var(--sh-bevel) !important;
    font-family: var(--font-ui) !important;
}

.profile-medal-modal-header h3 {
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
}

.profile-medal-modal-status {
    color: var(--accent-primary) !important;
}

.profile-medal-modal-close {
    color: var(--text-secondary) !important;
}

.profile-medal-modal-close:hover {
    color: var(--accent-primary) !important;
}

/* --- Battle round stats modal (rsm) --- */

.rsm-backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
}

.rsm-panel {
    background: var(--bg-surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-overlay), var(--sh-bevel) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
}

@media (max-width: 767.98px) {
    .rsm-panel {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100dvh !important;
        border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    }
}

.rsm-head {
    border-bottom: 1px solid var(--border-subtle) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%) !important;
}

/* --- Chat popup --- */

.chat-popup-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
}

.chat-popup-container {
    background: var(--bg-surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-overlay), var(--sh-bevel) !important;
    font-family: var(--font-ui) !important;
}

.chat-popup-header {
    border-bottom: 1px solid var(--border-subtle) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%) !important;
    color: var(--text-primary) !important;
}

/* --- Deploy help mini-modals --- */

.deploy-help-modal-backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px);
}

.deploy-help-modal {
    background: var(--bg-surface-1) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--r-lg) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--sh-overlay), var(--sh-bevel) !important;
    font-family: var(--font-ui) !important;
}