/* ===================================================================
   RESPONSIVE — responsive.css
   Breakpoint overrides. Mirrors Bootstrap's lg (992px) and sm (576px).
   =================================================================== */

/* ── Tablet / Mobile  (< 992px) ──────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Sidebar slides off-screen; toggled by JS */
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .sidebar-overlay.show {
        display: block;
    }

    /* Main content fills full width */
    .main-content {
        margin-left: 0 !important;
    }

    /* Show the hamburger toggle */
    .topbar-toggle {
        display: flex;
    }

    /* Adjust stat grid */
    .stat-card {
        padding: 16px;
    }

    /* ── Key: prevent any page content from causing horizontal page scroll.
       table-responsive children still scroll internally via overflow-x:auto. ── */
    .page-content {
        overflow-x: hidden;
        overscroll-behavior-y: contain;
    }

    /* ── Left-align all page-level headings on mobile/tablet ── */
    .page-header,
    .page-header > *,
    .page-title,
    .page-subtitle {
        text-align: left;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header > *:last-child {
        align-self: flex-start;
    }

    /* Card headers with flex rows: left-align text */
    .card-header .d-flex,
    .card-header h5,
    .card-header h6,
    .card-header .fw-semibold,
    .card-header .fw-bold {
        text-align: left;
    }
}

/* ── Small Mobile  (< 576px) ─────────────────────────────────────── */
@media (max-width: 575.98px) {
    .page-content {
        padding: 12px;   /* tighter on phone */
        overflow-x: hidden;
        overscroll-behavior-y: contain;
    }

    .page-title { font-size: 18px; }

    .login-card-header { padding: 28px 24px 16px; }
    .login-card-body   { padding: 0 24px 28px; }

    .stat-value { font-size: 22px; }

    /* page-header already handled in < 992px block above */

    /* Full-width table scrolls horizontally */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Cards: tighter inner padding on very small screens */
    .bg-white.rounded-3.shadow-sm {
        border-radius: 10px !important;
    }

    /* Topbar: shrink company name area to fit smaller screens */
    .topbar { padding: 0 12px; gap: 8px; }
}

/* ── Large desktop (≥ 1400px) ────────────────────────────────────── */
@media (min-width: 1400px) {
    .page-content { padding: 32px; }
}