/* ============================================================
   RESPONSIVE CSS — Mobile-first media queries
   Applied after style.css / Content/css/style.css
   ============================================================ */

/* ==================== NAVBAR ==================== */
@media (max-width: 768px) {
    .nav-bg .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .navbar-brand span {
        margin-right: 0 !important;
        font-size: 20px !important;
    }
    .navbar-brand span span {
        font-size: 14px !important;
    }
    .navbar-toggler {
        border-color: rgba(255,255,255,0.3) !important;
    }
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    .menu {
        flex-basis: 100% !important;
    }
    .nav-bg .menu ul.navbar-nav {
        text-align: center;
        padding: 10px 0;
    }
    .nav-bg .menu ul.navbar-nav li a.nav-link {
        padding: 8px 15px;
    }
    .log_out.pgbtn {
        margin-top: 5px;
    }
    .search-box {
        padding: 10px 0;
    }
    .search-box input {
        min-width: 150px;
        max-width: 100%;
    }
}

/* ==================== BANNER ==================== */
@media (max-width: 768px) {
    .banner_images,
    .banner_images1 {
        padding: 20px 15px;
        margin-bottom: 10px;
    }
    .banner-info-img {
        flex-direction: column;
        text-align: center;
    }
    .banner-info-img img {
        margin-right: 0;
        margin-bottom: 10px;
        max-width: 80px;
    }
    .banner-info-img h1 {
        font-size: 22px !important;
        line-height: 28px !important;
    }
    .banner-info-img h5 {
        font-size: 14px !important;
        line-height: 18px !important;
    }
    .btn_flexs {
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
    }
    .banner_listes {
        justify-content: center;
        flex-wrap: wrap;
    }
    .banner_listes li {
        margin-left: 8px;
        margin-right: 8px;
        font-size: 12px;
    }
}

/* ==================== VERTICAL PILLS (Industry/Company/Home) ==================== */
@media (max-width: 768px) {
    .vertical-pills .d-flex.align-items-start {
        flex-direction: column !important;
    }
    .tab-left-bg {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 10px;
        border-radius: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tab-left-bg .nav-pills {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tab-left-bg .nav-pills .nav-link {
        border-left: none !important;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 12px;
    }
    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
        border-left: none !important;
        border-bottom: 3px solid #0d6efd;
    }
    .vertical-pills .nav-link:hover {
        border-left: none !important;
        border-bottom: 3px solid #0d6efd;
    }
    .tab-right-bg {
        width: 100% !important;
        border-radius: 8px;
    }

    /* Override the JS-injected .col-md-9 width */
    .col-md-9 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .col-md-3 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 15px;
    }
}

/* ==================== CHARTS ==================== */
@media (max-width: 768px) {
    .chart-pic,
    .chart-pic2,
    .chart-display,
    .upload_download_graph {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .chart-pic {
        padding: 15px 0;
    }
    .chart-pic img,
    .chart-display img {
        max-width: 100%;
        height: auto;
    }
    /* D3/SVG chart containers */
    #SizeScaleProfitibilitycontainer,
    #ValuationAndReturnContainer,
    #SegmentationContainer,
    #MarketProjection,
    #ScaleContainer,
    #LiquidityContainer,
    #ProfitibilityContainer,
    #ValuationContainer,
    #QuaterlyContainer {
        height: auto !important;
        min-height: 300px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==================== SIDEBAR / NEWS ==================== */
@media (max-width: 768px) {
    .right-bg {
        margin-top: 15px;
    }
    .news_scroll {
        max-height: 400px;
        overflow-y: auto;
    }
    .news-sidebar {
        min-height: auto !important;
    }
}

/* ==================== INDUSTRY INDEX (Grid) ==================== */
@media (max-width: 768px) {
    .industry-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    .industry-grid {
        grid-template-columns: repeat(12, 100px);
        gap: 2px;
    }
    .cell {
        font-size: 9px;
        padding: 3px;
        min-height: 50px;
    }
}
@media (max-width: 480px) {
    .industry-grid {
        grid-template-columns: repeat(12, 85px);
        gap: 1px;
    }
    .cell {
        font-size: 8px;
        padding: 2px;
        min-height: 45px;
    }
}

/* ==================== COMPANY INDEX (Compare section) ==================== */
@media (max-width: 768px) {
    .upload_download .row .col-md-8,
    .upload_download .row .col-md-4 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }
    .left-bg {
        margin-top: 15px;
    }
    /* DataTable responsive */
    .table-responsive,
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==================== TOPIC INDEX (Grid boxes) ==================== */
@media (max-width: 768px) {
    .topics-row .col-md-2 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .topic-box {
        height: 80px;
        font-size: 13px;
        padding: 10px;
    }
    .topic-box h4 {
        font-size: 13px;
    }
}
@media (max-width: 400px) {
    .topics-row .col-md-2 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ==================== TOPIC VIEW (Detail cards) ==================== */
@media (max-width: 768px) {
    .topic-detail-box {
        height: auto;
        min-height: 100px;
    }
    .topic-overview-box {
        padding: 12px !important;
    }
    .overview-content {
        font-size: 13px !important;
    }
    /* Popup */
    .info-popup {
        width: 95% !important;
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* ==================== HOME PAGE (Hero + Sections) ==================== */
@media (max-width: 768px) {
    /* Hero header */
    .header {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px;
    }
    .hero-image {
        width: 100% !important;
        max-width: 300px;
    }
    .audience-left {
        line-height: 2.2 !important;
        font-size: 15px !important;
        text-align: center;
        padding-right: 0 !important;
    }
    .discover-bar {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        width: auto !important;
        padding: 8px 20px !important;
        letter-spacing: 3px !important;
        font-size: 14px !important;
    }
    .audience-right {
        padding-left: 0 !important;
        line-height: 2.2 !important;
        font-size: 14px !important;
        text-align: center;
    }

    /* Three sections */
    .sections {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .section {
        text-align: center;
    }
    .section h2 {
        font-size: 20px !important;
    }
    .section h3 {
        font-size: 15px !important;
    }
    .section img {
        max-width: 100%;
        height: auto;
    }
}

/* ==================== DASHBOARD LEFT/RIGHT ==================== */
@media (max-width: 768px) {
    .dasbordLeftsec {
        margin-top: 10px;
    }
    .dasbordRightlink {
        margin-top: 10px;
    }
    .dasbordRightBody {
        margin-top: 10px;
        min-height: auto;
    }
    .mainDasbordsec {
        padding-bottom: 20px;
    }
}

/* ==================== PERFORMANCE HIGHLIGHTS ==================== */
@media (max-width: 768px) {
    .performance_highlights_list_bx {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .expandable-header h2 {
        font-size: 14px;
    }
}

/* ==================== ACCORDION (Industry Overview) ==================== */
@media (max-width: 768px) {
    #accordion .btn-link {
        font-size: 14px !important;
        padding: 8px 5px;
    }
    .card-body {
        font-size: 13px;
        padding: 10px;
    }
}

/* ==================== TABLES ==================== */
@media (max-width: 768px) {
    .table {
        font-size: 12px;
    }
    .market-share-table {
        font-size: 12px;
    }
    div#example_length label,
    div#example_filter label {
        font-size: 12px;
        flex-wrap: wrap;
    }
}

/* ==================== FOOTER ==================== */
@media (max-width: 768px) {
    .footer {
        text-align: center;
        padding: 10px;
    }
    .footer .bigger-120 {
        font-size: 12px;
    }
}

/* ==================== GENERAL UTILITIES ==================== */
@media (max-width: 768px) {
    body {
        padding: 10px !important;
    }
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .p-15 {
        padding: 10px;
    }
    .mb-25 {
        margin-bottom: 15px;
    }
    /* Prevent horizontal body overflow */
    html, body {
        overflow-x: hidden;
    }
    /* Make images responsive by default */
    img {
        max-width: 100%;
        height: auto;
    }
}