/* Enhanced Mobile Responsiveness */
/* Mobile fixes for breadcrumb and search controls */
@media (max-width: 1024px) {
    /* Allow breadcrumb to wrap on very small screens */
    .breadcrumb-path {
        flex-wrap: wrap !important;
    }
    
    .breadcrumb-path a,
    .breadcrumb-path span:not(.breadcrumb-separator) {
        white-space: nowrap;
    }
    
    /* Separator stays inline */
    .breadcrumb-separator {
        white-space: nowrap;
    }
    
    /* Stack navigation and search controls below breadcrumb */
    .breadcrumb-container > div:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem;
    }
    
    /* Make search controls full width on smaller screens */
    .breadcrumb-container > div:last-child > div:last-child {
        width: 100% !important;
        justify-content: stretch !important;
    }
    
    /* Make search input flexible width */
    .breadcrumb-container input[type="text"] {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
    }
    
    /* Make selects flexible too */
    .breadcrumb-container select {
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 0 1rem;
    }
    
    .nav-container {
        height: auto;
        min-height: 60px;
        padding: 1rem 0;
        flex-wrap: wrap;
    }
    
    .logo {
        font-size: 18px;
        order: 1;
    }
    
    .logo img {
        height: 24px !important;
    }
    
    .discord-login {
        padding: 8px 12px;
        font-size: 12px;
        order: 2;
    }
    
    .search-container {
        order: 3;
        width: 100%;
        max-width: none;
        margin-top: 0.5rem;
        flex-basis: 100%;
    }
}

/* Landscape mobile - keep inline layout like desktop */
@media (min-width: 569px) and (max-width: 926px) and (orientation: landscape) {
    .nav-container {
        flex-wrap: nowrap !important;
        height: 70px;
        padding: 0 !important;
    }
    
    .logo {
        order: 1;
        font-size: 18px;
    }
    
    .search-container {
        order: 2 !important;
        flex: 1 !important;
        max-width: 400px !important;
        margin-top: 0 !important;
        flex-basis: auto !important;
        width: auto !important;
    }
    
    .discord-login {
        order: 3;
    }
}

@media (max-width: 768px) {
    /* Wrap table in a scrollable container instead of breaking table structure */
    .data-table {
        /* DO NOT use display: block - it breaks expandable rows! */
        /* Instead, wrap tables in div with overflow-x: auto */
        width: 100%;
        border-radius: 12px;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.75rem 0.5rem;
        font-size: 13px;
        /* Removed white-space: nowrap to allow text wrapping in cells */
    }
    
    /* Stack ALL two-column layouts */
    .page-two-col,
    .two-column-layout,
    .split-view,
    .grid-2-cols {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    
    .page-two-col > *,
    .two-column-layout > *,
    .split-view > *,
    .grid-2-cols > * {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1.5rem;
    }
    
    /* Company info grid - stack on mobile */
    div[style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Stats grid - single column */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    /* Cards */
    .card {
        padding: 1rem;
        margin-bottom: 1rem !important;
    }
    
    /* Release cards */
    .release-card {
        padding: 1rem;
    }
    
    .release-header {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .release-title {
        font-size: 16px;
    }
    
    .release-content {
        font-size: 14px;
    }
    
    /* Tab navigation - scroll horizontally */
    .tab-navigation {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding: 0;
        gap: 0;
    }
    
    .tab-link {
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 13px;
        flex-shrink: 0;
    }
    
    /* Remove flashy animation on mobile */
    .tab-link::before {
        display: none !important;
    }
    
    .tab-link:hover {
        background: transparent;
    }
    
    /* Content areas */
    .container {
        padding: 0.5rem;
    }
    
    .content-header {
        padding: 1.5rem 1rem;
    }
    
    .content-header h1 {
        font-size: 20px;
    }
    
    .content-body {
        padding: 1rem;
    }
    
    /* Breadcrumb */
    .breadcrumb {
        padding: 0.75rem 1rem;
    }
    
    .breadcrumb-path {
        font-size: 12px;
    }
    
    .company-title {
        font-size: 20px;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    /* Market badges */
    .market-badge {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    /* TradingView chart container */
    .tv-chart-wrap {
        height: 400px !important;
    }
    
    /* Company header - stack on mobile */
    h2[style*="display: flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    /* Stat numbers in company cards */
    .stat-number {
        font-size: 20px !important;
    }
    
    /* Make inline flex layouts stack - BUT exclude short stat headers and card headers */
    div[style*="display: flex; justify-content: space-between"]:not([style*="margin-bottom: 5px"]):not([style*="gap: 10px"]):not([style*="gap: 8px"]) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem;
    }
    
    /* Scale down press release titles on mobile */
    .data-table td a {
        font-size: 13px !important;
    }
}

/* Very small mobile devices */
@media (max-width: 480px) {
    .nav-container {
        gap: 0.5rem;
    }
    
    .logo {
        font-size: 16px;
    }
    
    .stats-grid {
        gap: 0.75rem;
    }
    
    .stat-number {
        font-size: 18px !important;
    }
    
    .stat-label {
        font-size: 12px;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.5rem 0.25rem;
        font-size: 12px;
    }
    
    .tab-link {
        padding: 8px 10px;
        font-size: 12px;
    }
    
    .tv-chart-wrap {
        height: 300px !important;
    }
}