/**
 * Responsive Behavior Styles
 * Breakpoints: 320px, 480px, 768px, 1024px, 1280px, 1920px+
 */

/* Overlay backdrop when mobile sidebar is open */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 995;
    transition: opacity 0.25s ease-in-out;
}

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

/* Tablet & Mobile Screens (<= 991.98px) */
@media (max-width: 991.98px) {
    #sidebar {
        margin-left: calc(-1 * var(--sidebar-width));
    }

    #sidebar.show {
        margin-left: 0;
        box-shadow: 10px 0 25px -5px rgba(0, 0, 0, 0.3);
    }

    #content-wrapper {
        margin-left: 0 !important;
        width: 100%;
    }

    .top-navbar {
        padding: 0 1rem;
    }

    .main-content {
        padding: 1rem;
    }

    .stat-card {
        margin-bottom: 1rem;
    }

    .pos-container {
        height: auto;
    }

    .pos-cart-panel {
        margin-bottom: 1.5rem;
    }
}

/* Mobile Screens (<= 576px) */
@media (max-width: 575.98px) {
    .main-content {
        padding: 0.75rem;
    }

    .top-navbar {
        height: 56px;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .stat-icon {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    /* Modal dialogs take full screen width on tiny devices */
    .modal-dialog {
        margin: 0.5rem;
    }

    /* Table text slightly smaller for phone screens */
    .table td, .table th {
        padding: 0.5rem 0.6rem;
        font-size: 0.825rem;
    }

    /* POS keypad and cart adjustments */
    .pos-cart-table-wrapper {
        max-height: 260px;
    }
}

/* Ultra small screens (320px - 375px) */
@media (max-width: 375px) {
    body {
        font-size: 13px;
    }
    
    .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }
}