/* ==========================================================================
   Universal Mobile Layout Optimizer for Orient BI
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Universal Grid Column Stacking
       Forces columns to stack vertically to prevent overlapping metrics/charts. */
    .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* 2. Heading Sizing
       Reduces title heights so they fit on portrait viewports without wrapping into multiple lines. */
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.2rem !important; }
    h4, h5, h6 { font-size: 1.1rem !important; }

    /* 3. Dropdowns & Input Filters
       Makes select fields full-width on mobile and adjusts padding/placeholder sizes. */
    .dash-dropdown, .Select, .Select-control, input.form-control, .form-control {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }
    
    /* Ensure placeholder/faded text inside filters stays visible and readable */
    .Select-placeholder, .Select-input {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    /* 4. KPI Cards
       Adapts card heights and paddings. Shrinks fonts inside tiny cards to avoid text clipping. */
    .card, .inv-kpi-card-gold, .inv-gold-card {
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    .card-body {
        padding: 10px 12px !important;
    }

    .inv-kpi-card-gold div {
        font-size: 12px !important;
    }
    
    .inv-kpi-card-gold div:last-child {
        font-size: 16px !important;
    }

    /* 5. Charts & Visual Elements
       Forces Plotly graphs to scale to 100% of their mobile container's width. */
    .js-plotly-plot, .plotly {
        width: 100% !important;
        height: auto !important;
        min-height: 300px !important;
    }
    
    /* Prevent graph titles/legends from pushing outside screen edges */
    .gtitle, .legendtext {
        font-size: 10px !important;
    }

    /* 6. DataTables
       Allows tables to scroll horizontally on swipe instead of pushing the viewport wide. */
    .dash-table-container, .dash-spreadsheet-container {
        width: 100% !important;
        overflow-x: auto !important;
    }

    /* Prevent DataTable text clipping */
    .dash-spreadsheet td, .dash-spreadsheet th {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }

    /* 7. Logos & Brand Images
       Ensures headers/navigation logos fit the mobile screens without stretching or overlapping. */
    img, .logo {
        max-width: 100% !important;
        height: auto !important;
    }
}