/* =====================================================
 * 13-responsive.css - Mobile Responsiveness System
 * Custom logic to ensure UI adapts gracefully.
 * ===================================================== */

/* Global Mobile Backdrop */
.mobile-sidebar-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 95;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-sidebar-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* Hamburger Menu Button */
.hamburger-menu-btn {
    background: transparent;
    border: none;
    color: var(--text-dark);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    margin-right: 10px;
}

/* =====================================================
 * Tablets and Small Screens (< 1024px)
 * ===================================================== */
@media (max-width: 1024px) {
    /* Topbar adjustments */
    .topbar-search-input {
        width: 200px;
    }
    
    /* Stats Layout */
    .orders-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
 * Mobile Phones (< 768px)
 * ===================================================== */
@media (max-width: 768px) {
    /* Layout Shell */
    :root {
        --margin-main: 15px;
        --spacing-card: 15px;
    }

    /* Topbar */
    .app-topbar {
        padding: 0 15px;
        height: 70px !important; /* Slightly more compact on mobile */
        min-height: 70px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        z-index: 1000 !important; /* Ensure it's above content but below modals */
    }

    .hamburger-menu-btn {
        display: block !important;
    }

    /* Hide Brand Text on very small screens, keep logo */
    .topbar-brand-name {
        display: none;
    }
    .topbar-logo {
        height: 32px;
    }

    .topbar-search-box {
        display: none !important;
    }

    .search-mobile-trigger {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        background: #f1f5f9;
        border: none;
        color: var(--primary);
        font-size: 1.1rem;
        cursor: pointer;
        transition: 0.2s;
    }

    .search-mobile-trigger:active {
        transform: scale(0.9);
        background: #e2e8f0;
    }

    /* Sidebar Off-Canvas */
    .sidebar {
        position: fixed;
        right: 0; /* RTL alignment */
        top: 0;
        bottom: 0;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        width: 260px;
        z-index: 100;
        box-shadow: -4px 0 15px rgba(0,0,0,0.1);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Tables (Horizontal Scroll) */
    .orders-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 800px; /* Force table to keep its minimum beautiful width */
        width: 100%;
    }

    /* Target specific subviews that might collapse */
    .orders-container, .orders-table-container {
        width: 100% !important;
    }

    /* Ensure subview table wrappers allow scrolling without breaking flex */
    .orders-table-container {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Modals & Forms */
    .orders-modal-container {
        width: 95% !important;
        margin: auto;
    }

    .orders-form-grid {
        grid-template-columns: 1fr; /* Switch to 1 column format */
        gap: 12px;
    }

    .orders-modal-footer {
        flex-direction: column;
        gap: 10px;
    }

    .orders-modal-footer button {
        width: 100%;
    }

    /* Views specific overrides */
    .orders-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .orders-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .orders-filters-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .orders-search-bar {
        width: 100%;
    }

    .orders-status-filter {
        width: 100%;
    }

    .orders-stats-row {
        grid-template-columns: 1fr;
    }

    /* Pagination / Bottom actions (Footer) */
    .app-bottom-bar {
        height: auto !important;
        padding: 12px 15px !important;
        flex-direction: column !important;
        gap: 12px !important;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.08) !important;
        background: white !important;
        position: relative !important;
        display: flex !important;
        flex-shrink: 0 !important;
        z-index: 90 !important;
    }

    .footer-actions-right, .footer-pagination-left {
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        gap: 8px !important;
    }
    
    .bottom-bar-btn {
        flex: 1 !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
        padding: 0 10px !important;
        height: 44px !important; /* Larger touch target */
    }

    /* Search Overlay (Full screen) */
    .search-overlay-mobile {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: white;
        z-index: 2000;
        display: none;
        flex-direction: column;
        animation: searchSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .search-overlay-mobile.active { display: flex; }

    @keyframes searchSlideIn {
        from { transform: translateY(-30px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .search-overlay-header {
        display: flex;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid var(--border);
        gap: 10px;
    }

    .search-overlay-close {
        background: transparent;
        border: none;
        font-size: 1.4rem;
        color: var(--text-dark);
        padding: 5px;
        cursor: pointer;
    }

    .search-overlay-input-wrapper {
        flex: 1;
    }

    .search-overlay-input-wrapper input {
        width: 100%;
        border: none;
        font-size: 1.1rem;
        outline: none;
        font-family: inherit;
        background: #f1f5f9;
        padding: 10px 15px;
    }

    .search-mobile-results {
        flex: 1;
        overflow-y: auto;
        padding: 0;
    }

    /* Reuse existing search result styles but make them mobile-friendly */
    .search-mobile-results .search-item {
        padding: 15px 20px !important;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on mobile */
        gap: 10px !important;
    }

    .product-card {
        border-radius: 0 !important;
    }

    .pos-item-info {
        padding: 6px;
    }

    .pos-item-name {
        font-size: 0.8rem;
    }

    .pos-item-price {
        font-size: 0.9rem;
    }

    .product-footer {
        padding: 5px;
        gap: 8px;
    }

    .product-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    /* Tabs improvement */
    .pos-category-tabs-container {
        -webkit-mask-image: none !important; /* Remove mask on mobile to avoid blurry edges on small screens */
        mask-image: none !important;
        padding-bottom: 5px;
    }
    
    .pos-tab-label {
        padding: 0 15px;
        font-size: 0.85rem;
    }

    /* POS View Improvements */
    .pos-layout {
        display: block !important;
        height: auto !important;
        overflow-y: visible !important;
    }

    .pos-products-section {
        height: auto !important;
        overflow: visible !important;
        margin-bottom: 20px;
    }

    .pos-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 10px !important;
    }

    .pos-item-card {
        min-height: 180px;
    }

    .pos-item-img {
        display: block !important;
        height: 140px !important; /* Fixed height for image area on mobile */
        width: 100% !important;
    }

    .pos-category-tabs-container {
        position: sticky;
        top: 0;
        background: var(--bg-main);
        z-index: 10;
        padding-top: 5px;
        margin-bottom: 15px !important;
    }

    .pos-cart-section {
        margin-top: 30px;
        height: auto !important;
        overflow: visible !important;
        border-top: 2px solid var(--primary);
    }

    .pos-cart-list {
        max-height: none !important; /* Let it grow on mobile */
        overflow: visible !important;
    }

    .pos-cart-summary {
        position: sticky;
        bottom: 0;
        z-index: 20;
        background: white;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.05);
    }

    /* Stats / Dashboard Sweep */
    .stats-kpi-grid {
        grid-template-columns: 1fr !important;
    }
    
    .stats-main-grid, 
    .stats-grid-balanced {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .stats-section-card {
        margin-top: 15px !important;
    }

    /* Finance / Settings Sweep */
    .settings-tabs-flex {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        padding-bottom: 10px !important;
        -webkit-overflow-scrolling: touch;
        gap: 8px !important;
    }

    .settings-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    .settings-info {
        width: 100% !important;
    }

    .settings-input {
        width: 100% !important;
        max-width: none !important;
    }

    /* Lock Screen Sweep */
    .lock-card {
        width: 90% !important;
        padding: 30px 20px !important;
    }

    .lock-input-passcode {
        letter-spacing: 5px !important;
    }

    /* Global Utility */
    .orders-container {
        padding: 10px !important;
    }

    /* Kanban Board Sweep */
    .kanban-board {
        display: block !important; /* Stack columns vertically */
    }

    .kanban-column {
        margin-bottom: 20px !important;
        min-height: auto !important;
        max-height: 500px;
        overflow-y: auto;
    }

    .kanban-list {
        grid-template-columns: 1fr !important; /* Single column for cards inside each category */
    }

    /* Inventory & General Tables Sweep */
    .orders-table-container table th, 
    .orders-table-container table td {
        padding: 8px 4px !important;
        font-size: 0.85rem !important;
    }

    /* Finance Specific Tweaks */
    #finance-tab-suppliers .orders-stats-row, 
    #finance-tab-employees .orders-stats-row {
        grid-template-columns: 1fr !important;
    }

    /* Print Preview / Invoice Fix for mobile visibility */
    .print-invoice {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        font-size: 10px !important;
    }
}