/* 
 * ========================================== 
 * DP RESPONSIVE BREAKPOINTS 
 * ========================================== 
 */

/* 1440px - Large Desktop Monitors */
@media (max-width: 1440px) {
    /* Large Desktop specific styles */
}

/* 1024px - Landscape Tablets & Laptops */
@media (max-width: 1024px) {
    /* Tablet Landscape specific styles */
}

/* 991px - Standard Tablets */
@media (max-width: 991px) {

    /* Tablet specific styles */
    .dp-portal-wrapper {
        flex-direction: column;
        padding-top: 70px; /* Space for sticky header */
    }

    .dp-sidebar-desktop-header {
        display: none !important;
    }

    .dp-portal-sidebar {
        width: 100% !important;
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 999;
        height: auto !important;
        background: var(--dp-darker) !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .dp-header-mobile-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        height: 70px;
    }

    .dp-brand-logo {
        display: flex;
        align-items: center;
        border-bottom: none !important;
        padding: 0 !important;
    }

    .dp-mobile-menu-toggle {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        padding: 5px;
        width: 40px;
        height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .dp-brand-mark {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .dp-sidebar-nav-content {
        display: none; /* Toggle this with JS */
        background: var(--dp-darker);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .dp-portal-menu {
        padding: 10px 0 !important;
    }

    .dp-portal-menu li a {
        padding: 15px 25px !important;
    }

    .dp-nav-footer {
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        margin-top: 15px;
        padding: 20px 25px;
    }

    .dp-profile-card {
        margin: 0 auto 15px !important;
        width: 100% !important;
    }

    .dp-logout-link {
        border-top: none !important;
        padding: 12px 0 !important;
        justify-content: flex-start !important;
    }

    .dp-portal-content {
        padding: 20px !important;
    }

    .dp-login-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
}

/* 767px - Mobile Landscape & Small Tablets */
@media (max-width: 767px) {

    /* Frontend Login Layout adjustments */
    .dp-login-wrapper {
        flex-direction: column;
    }

    .dp-login-left {
        width: 100%;
        padding: 48px 24px;
    }

    .dp-login-right {
        width: 100%;
        padding: 32px 24px;
    }

    .dp-login-card {
        padding: 32px;
        box-shadow: none;
        background: transparent;
    }

    /* Backend Admin Dashboard adjustments */
    .dp-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* 480px - Mobile Portrait */
@media (max-width: 480px) {

    /* Smartphone specific styles */
    .dp-stats-grid {
        grid-template-columns: 1fr;
    }

    .dp-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .dp-header-actions {
        width: 100%;
        display: flex;
    }

    .dp-header-actions button {
        flex: 1;
        margin-left: 0;
        margin-right: 10px;
    }

    .dp-header-actions button:last-child {
        margin-right: 0;
    }

    .dp-table-toolbar {
        flex-direction: column;
        gap: 15px;
    }

    .dp-search-wrapper {
        width: 100%;
    }

    .dp-records-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .dp-customers-table-wrapper {
        overflow-x: auto;
    }

    .dp-modern-table {
        min-width: 800px;
        /* Force scroll on tiny devices */
    }

    .dp-pagination-strip {
        flex-direction: column;
        gap: 15px;
    }
}

/* Tablet Landscape specific styles */
@media (max-width: 1024px) and (min-width: 481px) {
    .dp-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dp-stat-card:nth-child(2) {
        border-right: none;
    }

    .dp-stat-card:nth-child(1),
    .dp-stat-card:nth-child(2) {
        border-bottom: 1px solid #f0f0f0;
    }

    .dp-search-wrapper {
        width: 250px;
    }
}