/* ============================================================
   CF Datepicker & Responsive Layout Fixes
   Phase 22 — Date Pickers & Layout Responsivo (v6.2 QA Audit)
   ============================================================ */

/* === DATE-01: Flatpickr mobile containment === */
@media (max-width: 576px) {
    .flatpickr-calendar {
        max-width: calc(100vw - 20px) !important;
        left: 10px !important;
        right: 10px !important;
    }
    .flatpickr-calendar.arrowTop::before,
    .flatpickr-calendar.arrowTop::after,
    .flatpickr-calendar.arrowBottom::before,
    .flatpickr-calendar.arrowBottom::after {
        display: none;
    }
    /* Month-select plugin containment */
    .flatpickr-monthSelect-months {
        max-width: calc(100vw - 20px);
    }
}

/* === RESP-01: Global overflow containment === */
.section-content {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Prevent any card-body from causing overflow on mobile */
@media (max-width: 576px) {
    .section-content .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Force tables to stay in scroll wrapper */
    .section-content .table-responsive,
    .section-content .cf-table-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* Prevent inline styles from causing overflow */
    .section-content [style*="min-width"],
    .section-content [style*="width:"] {
        max-width: 100% !important;
    }
    /* Fix nav-tabs overflow on very small screens */
    .section-content .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .section-content .nav-tabs::-webkit-scrollbar {
        display: none;
    }
}

/* === RESP-03: KPI card responsive grid === */
/* Mobile: 1 column */
@media (max-width: 575.98px) {
    .section-content .row > [class*="col-md-3"],
    .section-content .row > [class*="col-lg-3"],
    .section-content .row > [class*="col-xl-3"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* 2-col KPI pairs stay 2-col only if col-6 is explicit */
    .section-content .row > .col-6[class*="col-md-3"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Tablet: 2 columns */
@media (min-width: 576px) and (max-width: 991.98px) {
    .section-content .row > [class*="col-lg-3"]:not([class*="col-md-"]):not([class*="col-sm-"]) {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* === RESP-04: Chart.js responsive containers === */
/* Ensure canvas wrapper never collapses to 0 */
.section-content canvas {
    max-width: 100% !important;
    display: block;
    width: 100% !important;
}

/* Override any inline height on chart containers on mobile */
@media (max-width: 576px) {
    .section-content [style*="height"] canvas,
    .section-content .chart-container canvas {
        min-height: 200px;
    }
    /* Chart wrappers with fixed height */
    .section-content div[style*="height"]:has(canvas) {
        height: auto !important;
        min-height: 200px;
    }
}