/* ===================================================
   Remitrix – Responsive overrides
   =================================================== */

/* ---- Auth pages (login, sign-up, registration steps) ---- */
@media (max-width: 991px) {
    .auth-section {
        min-height: calc(100vh - 80px);
    }

    .auth-section > .d-flex {
        min-height: inherit;
        align-items: center;
    }
}

@media (max-width: 575px) {
    .auth-section .log-in-card {
        padding-inline: 1.25rem !important;
    }
}

/* ================================================================
   Dashboard – Mobile Layout
   Below 1200px: sidebar becomes a slide-in drawer, content is full width
   ================================================================ */
@media (max-width: 1199px) {

    /* Force the dashboard row to be a simple block stack */
    .dashboard-item {
        display: block !important;
        margin-top: 0 !important;
    }

    /* Hide the sidebar entirely — display:none beats transform tricks */
    .dashboard-slidebar {
        display: none;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 300px !important;
        height: 100vh !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
        background: #fff;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        transform: none !important; /* cancel main.css transform — we use display instead */
    }

    /* Slide in when the Menu button is pressed */
    .dashboard-slidebar.active {
        display: block !important;
    }

    /* Main content fills the full width */
    .dashboard-body {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---- Dashboard: breadcrumb banner height on mobile ---- */
@media (max-width: 767px) {
    .dashboard-breadcrumb {
        height: auto !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .dashboard-breadcrumb h1 {
        font-size: 1.5rem;
    }
}

/* ---- Dashboard: sidebar backdrop overlay ---- */
.dashboard-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    cursor: pointer;
}

.dashboard-sidebar-backdrop.active {
    display: block;
}

/* ---- Dashboard: reduce content card padding on small screens ---- */
@media (max-width: 767px) {
    .dashboard-content-card {
        padding: 1.25rem !important;
    }
}

@media (max-width: 575px) {
    .dashboard-content-card {
        padding: 1rem !important;
    }
}