/* Scope the variable to only affect tabbed content */
.fx-pixijs-tabbed-content {
    --domain-height: 800px;
}

.fx-pixijs-tabbed-content,
.tabs-container,
.tab-content-container {
    height: auto !important;
    min-height: var(--domain-height) !important;
    overflow: visible !important;
}

.military-domains {
    background-color: #000000;
    color: #fff;
    position: relative;
    height: var(--domain-height);
    overflow: visible;
    /* Ensure proper stacking context for child overlays */
    isolation: isolate;
    transform: translateZ(0);
}

/* Edge browser specific fixes for domain containers */
@supports (-ms-ime-align: auto) {
    .military-domains,
    .law-enforcement-domains,
    .unmanned-systems-domains {
        height: var(--domain-height) !important;
        min-height: var(--domain-height) !important;
        max-height: var(--domain-height) !important;
        overflow: hidden !important;
    }
}

/* Modern Edge (Chromium-based) specific fixes */
_:-ms-lang(x), .military-domains,
_:-ms-lang(x), .law-enforcement-domains,
_:-ms-lang(x), .unmanned-systems-domains {
    height: var(--domain-height) !important;
    min-height: var(--domain-height) !important;
    max-height: var(--domain-height) !important;
    overflow: hidden !important;
}

#domain-slider-container {
    position: relative;
    width: 100%;
    height: var(--domain-height);
    background-color: #000000;
    overflow: visible;
}

.law-enforcement-domains {
    background-color: #000000;
    color: #fff;
    position: relative;
    height: var(--domain-height);
    overflow: visible;
    /* Ensure proper stacking context for child overlays */
    isolation: isolate;
    transform: translateZ(0);
}

.unmanned-systems-domains {
    background-color: #000000;
    color: #fff;
    position: relative;
    height: var(--domain-height);
    overflow: visible;
    /* Ensure proper stacking context for child overlays */
    isolation: isolate;
    transform: translateZ(0);
}

@media screen and (min-width: 2552px) {
    .law-enforcement-domains,
    .unmanned-systems-domains,
    .military-domains {
        background-color: #ffffff;
    }
    
    /* Ensure containers fill full width on ultra-wide screens */
    #domain-slider-container,
    #law-enforcement-slider-container,
    #unmanned-systems-slider-container {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
    }
    
    /* Ensure parent containers don't constrain width */
    .military-domains,
    .law-enforcement-domains,
    .unmanned-systems-domains {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
    }
}

.tab-content {
    height: var(--domain-height);
    overflow: visible;
}

/* Domain Sections */
.domain-section {
    display: none;
    position: relative;
}

.domain-section.active {
    display: block;
}

.domain-label {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 5px 15px;
    border-left: 3px solid #ff0000;
}

/* Domain Content */
.domain-content {
    position: relative;
    height: 500px;
}

.domain-item {
    position: absolute;
    cursor: pointer;
    transition: all 0.3s ease;
}

.domain-item .label {
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid #ff0000;
    padding: 8px 15px;
    font-size: 14px;
    white-space: nowrap;
    position: relative;
}

.domain-item .label::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 20px;
    background-color: #ff0000;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.domain-item:hover .label {
    background-color: #ff0000;
    color: #fff;
}

/* Domain Navigation */
.domain-tabs {
    position: absolute;
    top: 0;
    right: 93px;
    display: flex;
    gap: 10px;
    padding: 20px;
    z-index: 1;
}

.domain-tab {
    background: transparent;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.domain-tab:hover {
    color: #ff0000;
}

/* Domain Footer */
.domain-footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 20px;
}

.domain-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
}

.icon-military {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-color: #ff0000;
    /* Add your military icon as background-image */
}

.close-button {
    background: transparent;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
}

.close-button:hover {
    color: #ff0000;
}

/* Specific positioning for domain items */
.domain-item[data-item="mobile-command"] {
    top: 30%;
    left: 20%;
}

.domain-item[data-item="manned-vehicles"] {
    bottom: 30%;
    left: 25%;
}

.domain-item[data-item="camera-sensors"] {
    top: 40%;
    left: 40%;
}

.domain-item[data-item="dismounted"] {
    top: 35%;
    right: 30%;
}

.domain-item[data-item="ugv"] {
    bottom: 25%;
    right: 20%;
}

/* Network lines overlay */
.domain-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(45deg, #ff000015 1px, transparent 1px),
                      linear-gradient(-45deg, #ff000015 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

/* Canvas styling */
canvas {
    display: block !important;
    width: 100% !important;
    height: var(--domain-height) !important;
    min-height: var(--domain-height) !important;
}

/* Edge browser specific canvas fixes */
@supports (-ms-ime-align: auto) {
    canvas {
        height: 100% !important;
        min-height: 100% !important;
        max-height: var(--domain-height) !important;
    }
    
    #domain-slider-container {
        height: var(--domain-height) !important;
        min-height: var(--domain-height) !important;
        max-height: var(--domain-height) !important;
        overflow: hidden !important;
    }
}

/* Modern Edge (Chromium-based) specific fixes */
_:-ms-lang(x), canvas {
    height: 100% !important;
    min-height: 100% !important;
    max-height: var(--domain-height) !important;
}

_:-ms-lang(x), #domain-slider-container {
    height: var(--domain-height) !important;
    min-height: var(--domain-height) !important;
    max-height: var(--domain-height) !important;
    overflow: hidden !important;
}

/* Additional Edge fixes to prevent black space */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    canvas {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        min-height: 100% !important;
    }
}

/* Force all parent containers to respect height */
#domain-slider-container * {
    min-height: inherit;
}

/* Responsive breakpoints for domain slider */
/* Base styles for 1920x1080 and above - NO CHANGES */
@media screen and (min-width: 1920px) {
    .fx-pixijs-tabbed-content {
        --domain-height: 800px;
    }
    
    .domain-label {
        font-size: 24px;
        top: 20px;
        left: 20px;
        padding: 5px 15px;
    }
    
    .domain-tab {
        padding: 10px 20px;
        font-size: 16px;
    }
    
    .domain-title {
        font-size: 18px;
    }
    
    .domain-item .label {
        padding: 8px 15px;
        font-size: 14px;
    }
}

/* MacBook Pro 16" and similar 1440+ resolution displays */
@media screen and (min-width: 1440px) and (max-width: 1919px) {
    .fx-pixijs-tabbed-content {
        --domain-height: 600px; /* 800px * 0.75 */
    }
    
    .domain-label {
        font-size: 18px; /* 24px * 0.75 */
        top: 15px; /* 20px * 0.75 */
        left: 15px; /* 20px * 0.75 */
        padding: 4px 11px; /* 5px * 0.75, 15px * 0.75 */
    }
    
    .domain-tab {
        padding: 8px 15px; /* 10px * 0.75, 20px * 0.75 */
        font-size: 12px; /* 16px * 0.75 */
    }
    
    .domain-title {
        font-size: 14px; /* 18px * 0.75 */
    }
    
    .domain-item .label {
        padding: 6px 11px; /* 8px * 0.75, 15px * 0.75 */
        font-size: 11px; /* 14px * 0.75 */
    }
    
    .domain-footer {
        bottom: 15px; /* 20px * 0.75 */
        padding: 0 15px; /* 20px * 0.75 */
    }
    
    .domain-tabs {
        right: 70px; /* 93px * 0.75 */
        padding: 15px; /* 20px * 0.75 */
        gap: 8px; /* 10px * 0.75 */
    }
}

/* Standard laptop displays (1366x768, 1280x800, etc.) */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
    .fx-pixijs-tabbed-content {
        --domain-height: 500px; /* 800px * 0.625 */
    }
    
    .domain-label {
        font-size: 15px; /* 24px * 0.625 */
        top: 13px; /* 20px * 0.625 */
        left: 13px; /* 20px * 0.625 */
        padding: 3px 9px; /* 5px * 0.625, 15px * 0.625 */
    }
    
    .domain-tab {
        padding: 6px 13px; /* 10px * 0.625, 20px * 0.625 */
        font-size: 10px; /* 16px * 0.625 */
    }
    
    .domain-title {
        font-size: 11px; /* 18px * 0.625 */
    }
    
    .domain-item .label {
        padding: 5px 9px; /* 8px * 0.625, 15px * 0.625 */
        font-size: 9px; /* 14px * 0.625 */
    }
    
    .domain-footer {
        bottom: 13px; /* 20px * 0.625 */
        padding: 0 13px; /* 20px * 0.625 */
    }
    
    .domain-tabs {
        right: 58px; /* 93px * 0.625 */
        padding: 13px; /* 20px * 0.625 */
        gap: 6px; /* 10px * 0.625 */
    }
}

/* Tablet landscape and smaller laptops */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .fx-pixijs-tabbed-content {
        --domain-height: 400px; /* 800px * 0.5 */
    }
    
    .domain-label {
        font-size: 12px; /* 24px * 0.5 */
        top: 10px; /* 20px * 0.5 */
        left: 10px; /* 20px * 0.5 */
        padding: 3px 8px; /* 5px * 0.5, 15px * 0.5 */
    }
    
    .domain-tab {
        padding: 5px 10px; /* 10px * 0.5, 20px * 0.5 */
        font-size: 8px; /* 16px * 0.5 */
    }
    
    .domain-title {
        font-size: 9px; /* 18px * 0.5 */
    }
    
    .domain-item .label {
        padding: 4px 8px; /* 8px * 0.5, 15px * 0.5 */
        font-size: 7px; /* 14px * 0.5 */
    }
    
    .domain-footer {
        bottom: 10px; /* 20px * 0.5 */
        padding: 0 10px; /* 20px * 0.5 */
    }
    
    .domain-tabs {
        right: 47px; /* 93px * 0.5 */
        padding: 10px; /* 20px * 0.5 */
        gap: 5px; /* 10px * 0.5 */
    }
}

/* Mobile and tablet portrait */
@media screen and (max-width: 768px) {
    .fx-pixijs-tabbed-content {
        --domain-height: 320px; /* 800px * 0.4 */
    }
    
    .domain-label {
        font-size: 10px; /* 24px * 0.4 */
        top: 8px; /* 20px * 0.4 */
        left: 8px; /* 20px * 0.4 */
        padding: 2px 6px; /* 5px * 0.4, 15px * 0.4 */
    }
    
    .domain-tab {
        padding: 4px 8px; /* 10px * 0.4, 20px * 0.4 */
        font-size: 6px; /* 16px * 0.4 */
    }
    
    .domain-title {
        font-size: 7px; /* 18px * 0.4 */
    }
    
    .domain-item .label {
        padding: 3px 6px; /* 8px * 0.4, 15px * 0.4 */
        font-size: 6px; /* 14px * 0.4 */
    }
    
    .domain-footer {
        bottom: 8px; /* 20px * 0.4 */
        padding: 0 8px; /* 20px * 0.4 */
    }
    
    .domain-tabs {
        right: 37px; /* 93px * 0.4 */
        padding: 8px; /* 20px * 0.4 */
        gap: 4px; /* 10px * 0.4 */
    }
}

/* Edge Browser Specific Height Adjustments - Removed */
/* Edge detection is now handled entirely in JavaScript to avoid affecting Chrome */