/* Dominguez Clinic & SaaS Shell - Comprehensive Responsive Design System */

/* ── 1. Mobile & Tablet Drawer Sidebar & Backdrop (< 992px) ── */
@media (max-width: 991.98px) {
    .saas-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 16.5rem !important;
        min-width: 16.5rem !important;
        transform: translateX(-100%) !important;
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1055 !important;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.25) !important;
        background-color: var(--dda-navy-900, #122A50) !important;
    }
    
    .saas-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    /* Force full label & brand visibility on mobile drawer even if collapsed class was active */
    .saas-sidebar .saas-nav-link-label,
    .saas-sidebar .saas-logout-label,
    .saas-sidebar .saas-brand-text,
    .saas-sidebar .section-label {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .saas-sidebar .saas-nav-link {
        justify-content: flex-start !important;
        padding: 0.5rem 0.75rem !important;
        gap: 0.75rem !important;
    }

    .saas-sidebar-backdrop {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(18, 42, 80, 0.5) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 1054 !important;
    }

    /* Hide desktop-only edge toggles on mobile & tablet */
    .saas-edge-toggle,
    .saas-nav-expand-wrap {
        display: none !important;
    }

    /* Main Content Area Takes Full Width on Mobile & Tablet */
    .saas-main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Content Area Padding Adjustment */
    .saas-content-area,
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* KPI Metrics 2x2 Grid on Mobile/Tablet */
    .dcc-kpi-card {
        flex: 1 1 calc(50% - 0.5rem) !important;
        min-width: 140px !important;
    }

    .dcc-kpi-value {
        font-size: 1.35rem !important;
    }

    .dcc-kpi-label {
        font-size: 0.7rem !important;
    }

    /* Table Font & Padding Scaling */
    .table th {
        font-size: 0.7rem !important;
        padding: 0.35rem 0.25rem !important;
    }

    .table td {
        font-size: 0.8rem !important;
        padding: 0.35rem 0.25rem !important;
    }

    .card-title-text {
        font-size: 0.92rem !important;
    }
}

/* ── 4. Medium Screens & Laptop Responsiveness (992px - 1227px) ── */
@media (min-width: 992px) and (max-width: 1227px) {
    /* When Sidebar is Expanded (Full 17rem width) on Medium Screens, stack master rows gracefully */
    body:not(:has(#saasSidebar.collapsed)) .row.g-4 > .col-lg-4,
    body:not(:has(#saasSidebar.collapsed)) .row.g-4 > .col-lg-8,
    body:not(:has(#saasSidebar.collapsed)) .row.g-4 > .col-xxl-7,
    body:not(:has(#saasSidebar.collapsed)) .row.g-4 > .col-xxl-5 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Keep the 4 operational subcards in a clean 2x2 grid */
    .dcc-subcard-col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Live Queue internal row scaling */
    .dcc-live-queue .row > .col-lg-5 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .dcc-live-queue .row > .col-lg-4,
    .dcc-live-queue .row > .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    /* Table text & padding fine-tuning for medium screens */
    .table th {
        font-size: 0.72rem !important;
        padding: 0.4rem 0.3rem !important;
    }
    .table td {
        font-size: 0.82rem !important;
        padding: 0.38rem 0.3rem !important;
    }
}

/* ── 5. Smooth Transitions & Global Element Safeguards ── */
.saas-sidebar,
.saas-content-area,
.card,
.table {
    transition: all 0.2s ease-in-out;
}

/* Fix Modal Overlay Stacking in Mobile Drawer State */
.modal-backdrop {
    z-index: 1060 !important;
}
.modal {
    z-index: 1065 !important;
}

/* Mobile Floating Bulk Action Bar Responsive Adjustments */
@media (max-width: 767.98px) {
    #bulkActionBar {
        width: 92% !important;
        max-width: 380px !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.82rem !important;
        gap: 0.5rem !important;
        border-radius: 40px !important;
        justify-content: space-between !important;
    }
    #bulkActionBar.visible {
        bottom: 15px !important;
    }
    #bulkActionBar .fs-5 {
        font-size: 0.88rem !important;
    }
    #bulkActionBar .btn {
        padding: 0.35rem 0.75rem !important;
        font-size: 0.78rem !important;
    }
}