/**
 * MOBILE NUCLEAR FIX
 * Maximum priority CSS that overrides everything
 */

/* ===========================================
   NUCLEAR MOBILE LAYOUT FIX - MAXIMUM PRIORITY
   =========================================== */

/* Force mobile layout at ALL costs */
@media screen and (max-width: 768px) {
    
    /* NUCLEAR OPTION: Force everything within viewport */
    * {
        max-width: 100vw !important;
        max-width: calc(100vw - 10px) !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    html, body {
        overflow-x: hidden !important;
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* NUCLEAR: Force navigation to wrap */
    div[class*="nav"], div[class*="tab"], nav, .navigation,
    .nav-tabs, .client-tabs, .dashboard-tabs, .nav-pills,
    .top-nav, .header-nav, .main-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-around !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 5px !important;
        margin: 5px 0 !important;
        gap: 2px !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    /* NUCLEAR: Force navigation buttons to fit */
    div[class*="nav"] button, div[class*="tab"] button,
    .nav-tabs button, .client-tabs button, .dashboard-tabs button,
    .nav-tabs .nav-link, .nav-pills .nav-link,
    button[class*="tab"], button[class*="nav"] {
        width: 19% !important;
        max-width: 19% !important;
        min-width: 0 !important;
        flex: 1 1 19% !important;
        margin: 1px !important;
        padding: 5px 2px !important;
        font-size: 9px !important;
        line-height: 1 !important;
        height: 32px !important;
        border-radius: 10px !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* NUCLEAR: Force dashboard to single column */
    div[class*="dashboard"], div[class*="grid"], div[class*="row"],
    .dashboard-grid, .dashboard-layout, .dashboard-content,
    .row, .grid, .d-flex, .flex-container, .container-fluid,
    .stats-grid, .summary-grid, .portfolio-stats, .dashboard-stats {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100vw !important;
        gap: 10px !important;
        padding: 5px !important;
        margin: 5px 0 !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        column-count: 1 !important;
    }
    
    /* NUCLEAR: Force ALL cards/boxes to single column */
    div[class*="card"], div[class*="box"], div[class*="summary"],
    .dashboard-box, .dashboard-card, .summary-card, .info-card,
    .stats-card, .portfolio-card, .card, .panel, .widget,
    .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    .col-sm, .col-md, .col-lg, .col-xl,
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 8px 0 !important;
        padding: 12px !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        flex: none !important;
        grid-column: span 1 !important;
        position: relative !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
    }
    
    /* NUCLEAR: Override any inline styles */
    [style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    [style*="float"] {
        float: none !important;
        clear: both !important;
    }
    
    [style*="display: grid"] {
        display: flex !important;
        flex-direction: column !important;
    }
    
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    [style*="flex-direction: row"] {
        flex-direction: column !important;
    }
    
    /* NUCLEAR: Portfolio value prominent */
    div[class*="portfolio"], div[class*="total"],
    .portfolio-value, .total-value {
        font-size: 24px !important;
        padding: 20px !important;
        text-align: center !important;
        background: #10B981 !important;
        color: white !important;
        border-radius: 12px !important;
        margin: 15px 0 !important;
        width: 100% !important;
        display: block !important;
    }
}

/* ===========================================
   ULTRA SMALL MOBILE (iPhone SE)
   =========================================== */

@media screen and (max-width: 480px) {
    
    /* Even smaller navigation buttons */
    div[class*="nav"] button, .nav-tabs button, .client-tabs button {
        width: 48% !important;
        max-width: 48% !important;
        flex: 1 1 48% !important;
        font-size: 8px !important;
        padding: 4px 1px !important;
        height: 28px !important;
    }
    
    /* Ensure 2 buttons per row on very small screens */
    div[class*="nav"] {
        justify-content: space-between !important;
    }
}

/* ===========================================
   EMERGENCY OVERRIDES
   =========================================== */

/* Apply to EVERYTHING on mobile */
@media screen and (max-width: 768px) {
    
    /* Force body to never scroll horizontally */
    body {
        overflow-x: hidden !important;
        width: 100vw !important;
        position: relative !important;
    }
    
    /* Force main app container */
    #root, #app, .app, .main-app {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }
    
    /* Force React components to behave */
    div[class*="Component"], 
    div[class*="component"],
    [data-reactroot] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Override any vendor CSS */
    .bootstrap-override, .framework-override {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 5px 0 !important;
    }
    
    /* Force any remaining grid systems */
    .grid-system, .layout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .grid-system > *, .layout-grid > * {
        width: 100% !important;
        margin: 5px 0 !important;
        flex: none !important;
    }
}

/* ===========================================
   HIGHEST PRIORITY OVERRIDES
   =========================================== */

/* These styles have maximum specificity */
html body div.dashboard-container div.nav-tabs button,
html body div.dashboard-container div.client-tabs button,
html body nav button,
html body .navigation button {
    width: 19% !important;
    max-width: 19% !important;
    font-size: 9px !important;
    padding: 4px 1px !important;
    margin: 1px !important;
    height: 30px !important;
    flex: 1 1 19% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1 !important;
    text-align: center !important;
    border-radius: 8px !important;
}

html body div[class*="dashboard"] div[class*="card"],
html body div[class*="dashboard"] div[class*="box"],
html body .dashboard-box,
html body .dashboard-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    flex: none !important;
    grid-column: span 1 !important;
}

/* ===========================================
   COMPLIANCE & SUPPORT BOX FIX
   =========================================== */

/* Fix Compliance & Support section on mobile */
@media screen and (max-width: 768px) {
    
    /* Target Compliance & Support card/box - very broad selectors */
    div[class*="compliance"],
    div[class*="support"],
    div[class*="Compliance"],
    div[class*="Support"],
    [class*="compliance"],
    [class*="support"],
    div:has(> *:contains("Compliance")),
    div:has(> *:contains("Support")) {
        width: 100% !important;
        max-width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        padding: 12px !important;
        margin: 10px auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        position: relative !important;
    }
    
    /* Fix all child elements inside Compliance & Support */
    div[class*="compliance"] *,
    div[class*="support"] *,
    div[class*="Compliance"] *,
    div[class*="Support"] *,
    [class*="compliance"] *,
    [class*="support"] * {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    
    /* Fix email addresses that might overflow */
    a[href*="mailto"],
    a[href*="@"] {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
        display: inline-block !important;
    }
    
    /* Fix any text containing email addresses */
    *:contains("@") {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }
    
    /* Fix flex containers in Compliance section */
    div[class*="compliance"] > *,
    div[class*="support"] > *,
    [class*="compliance"] > *,
    [class*="support"] > * {
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Fix icon and text layout - make icon smaller and stack on mobile */
    div[class*="compliance"] img,
    div[class*="support"] img,
    div[class*="compliance"] svg,
    div[class*="support"] svg,
    [class*="compliance"] img,
    [class*="support"] img,
    [class*="compliance"] svg,
    [class*="support"] svg {
        max-width: 50px !important;
        width: 50px !important;
        height: auto !important;
        flex-shrink: 0 !important;
        margin-bottom: 8px !important;
        margin-right: 0 !important;
    }
    
    /* Force flex containers to stack vertically on mobile */
    div[class*="compliance"] > div[style*="flex"],
    div[class*="support"] > div[style*="flex"],
    [class*="compliance"] > div[style*="flex"],
    [class*="support"] > div[style*="flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    /* Force text to wrap properly */
    div[class*="compliance"] > div,
    div[class*="support"] > div,
    [class*="compliance"] > div,
    [class*="support"] > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Fix paragraph and text elements */
    div[class*="compliance"] p,
    div[class*="support"] p,
    div[class*="compliance"] span,
    div[class*="support"] span,
    [class*="compliance"] p,
    [class*="support"] p,
    [class*="compliance"] span,
    [class*="support"] span {
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        margin: 4px 0 !important;
    }
    
    /* Fix Important Notice section */
    div[class*="notice"],
    div[class*="Notice"],
    div[class*="important"],
    div[class*="Important"],
    [class*="notice"],
    [class*="Important"],
    div:has(> *:contains("IMPORTANT NOTICE")),
    div:has(> *:contains("Important Notice")) {
        width: 100% !important;
        max-width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        padding: 12px !important;
        margin: 10px auto !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Fix text in Important Notice */
    div[class*="notice"] *,
    div[class*="Important"] *,
    [class*="notice"] *,
    [class*="Important"] * {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
    
    /* Fix any card or container that might contain these sections */
    .card,
    [class*="card"],
    [class*="box"],
    [class*="container"] {
        max-width: calc(100vw - 20px) !important;
        width: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
}

/* Maximum specificity for Compliance & Support */
html body div[class*="compliance"],
html body div[class*="support"],
html body div[class*="Compliance"],
html body div[class*="Support"],
html body [class*="compliance"],
html body [class*="support"],
html body div[data-testid*="compliance"],
html body div[data-testid*="support"] {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    padding: 12px !important;
    margin: 10px auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

html body div[class*="compliance"] *,
html body div[class*="support"] *,
html body div[class*="Compliance"] *,
html body div[class*="Support"] *,
html body [class*="compliance"] *,
html body [class*="support"] *,
html body div[data-testid*="compliance"] *,
html body div[data-testid*="support"] * {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

/* Universal fix for any element containing text that might overflow */
@media screen and (max-width: 768px) {
    /* Force all text elements to wrap */
    p, span, div, a, h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Fix any element with inline styles that might cause overflow */
    [style*="width"] {
        max-width: 100% !important;
    }
    
    /* Fix flex containers to prevent overflow */
    [style*="display: flex"],
    [style*="display:flex"] {
        flex-wrap: wrap !important;
    }
}

/* Import safety override */
@import url("data:text/css,@media screen and (max-width: 768px) { * { max-width: 100vw !important; } }");