/* --- X Capital Network 1-BP (Body Portal) Responsive System --- */

/* 1. Global Resilience */
* {
    -webkit-tap-highlight-color: transparent;
}

#app {
    overflow-x: hidden;
    width: 100%;
}

/* 2. Fluid Typography Scale */
h1 {
    font-size: var(--font-h1);
    line-height: 1.1;
}

h2 {
    font-size: var(--font-h2);
    line-height: 1.2;
}

h3 {
    font-size: var(--font-h3);
}

p.hero-sub {
    font-size: var(--font-hero-sub);
}

/* 3. Global Container System */
.responsive-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--container-padding);
    box-sizing: border-box;
}

/* 4. Adaptive Grid & Flex Systems */
.grid-adaptive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 300px), 1fr));
    gap: var(--grid-gap);
}

.stack-tablet {
    display: flex;
    flex-direction: row;
    gap: var(--grid-gap);
}

.stack-mobile {
    display: flex;
    flex-direction: row;
    gap: var(--grid-gap);
}

/* 5. Fluid Breakpoint Overrides */

/* --- Tablet (1024px) --- */
@media (max-width: 1024px) {
    .stack-tablet {
        flex-direction: column;
    }
    
    .tablet-hidden {
        display: none !important;
    }
    
    .tablet-show {
        display: block !important;
    }

    .sidebar-layout-left,
    .sidebar-layout-right {
        grid-template-columns: 1fr !important;
    }
}

/* --- Small Tablet / Mobile (768px) --- */
@media (max-width: 768px) {
    .stack-mobile {
        flex-direction: column;
    }

    .responsive-grid-4,
    .responsive-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .mobile-px-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .mobile-full-bleed {
        width: 100vw !important;
        margin-left: calc(-1 * var(--container-padding)) !important;
        border-radius: 0 !important;
    }
}

/* --- Small Mobile (480px) --- */
@media (max-width: 480px) {
    .responsive-grid-4,
    .responsive-grid-3,
    .responsive-grid-2,
    .responsive-grid-generic {
        grid-template-columns: 1fr !important;
    }
    .flex-column-mobile {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .text-left-mobile {
        text-align: left !important;
        margin-left: 0 !important;
    }
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    /* Root container enforcement - Zero Black Area Protocol */
    [data-export-root="true"] {
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
}

/* 5.1 Table to Card Stack Transformation - Triggered at 900px for complex data */
@media (max-width: 900px) {
    .responsive-table {
        display: block !important;
    }

    .responsive-table thead {
        display: none !important;
    }

    .responsive-table tr {
        display: block !important;
        margin-bottom: 1.5rem !important;
        padding: 1.25rem !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid var(--glass-border) !important;
        border-radius: 14px !important;
    }

    .responsive-table td {
        display: flex !important;
        justify-content: space-between !important;
        padding: 0.6rem 0 !important;
        border: none !important;
        font-size: 0.85rem !important;
        text-align: right !important;
    }

    .responsive-table td::before {
        content: attr(data-label);
        font-weight: 800;
        color: #fca311;
        text-transform: uppercase;
        font-size: 0.62rem;
        margin-right: 15px;
        flex-shrink: 0;
        text-align: left;
        letter-spacing: 0.05em;
    }
}

/* 6. Header & Mobile Nav Overrides */

/* --- Visibility Core --- */
.tablet-show { display: none !important; }
.desktop-only, .tablet-hidden { display: flex !important; }

@media (max-width: 1024px) {
    .tablet-hidden,
    .desktop-only,
    #main-nav,
    #header-search-trigger,
    #header-signal-trigger,
    #header-profile-trigger span { 
        display: none !important; 
    }
    
    .tablet-show,
    #omni-hamburger { 
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .omni-header {
        padding: 0 12px !important;
    }
}

/* Specific Fix for AI Drawer translation issues noted in V7 */
#deal-insight-drawer.open,
#nexus-panel.open {
    transform: none !important;
    right: 0 !important;
    visibility: visible !important;
}

@media (max-width: 768px) {
    #header-search-trigger {
        min-width: 40px !important;
    }
    #header-search-trigger span:nth-child(2),
    #header-search-trigger span:nth-child(3) {
        display: none !important;
    }
}

/* 7. Strategic Animations */
@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(212,175,55,0.5); }
    50% { box-shadow: 0 0 35px rgba(212,175,55,0.8); }
}

/* 8. Utility Overrides */
.full-width { width: 100% !important; }
.text-center-mobile { text-align: left; }
@media (max-width: 768px) {
    .text-center-mobile { text-align: center !important; }
}

/* 9. Permission Mask Safety — Never block the chat input */
#input-container-box .nexus-permission-mask,
#message-input .nexus-permission-mask,
#channel-message-stream .nexus-permission-mask {
    display: none !important;
}
#input-container-box,
#message-input {
    pointer-events: auto !important;
    user-select: text !important;
}

/* 10. Channels View — Hide all floating overlays that obscure the chat input */
/* These are hidden programmatically by channels.js, CSS is a belt-and-suspenders safety net */
body.view-channels #nexus-fab,
body.view-channels #omni-sentry-hud,
body.view-channels #evey-ultimate-root {
    display: none !important;
}