/* assets/css/responsive.css */
/* Tablet */
@media (max-width: 1024px) {
    .transaction-container {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .top-bar {
        padding: 10px 15px;
        flex-wrap: wrap;
    }
    
    .top-bar h2 {
        font-size: 16px;
    }
    
    .content-wrapper {
        padding: 10px;
    }
    
    .stat-card .stat-value {
        font-size: 20px;
    }
    
    .payment-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .payment-buttons .btn-block {
        padding: 12px;
        font-size: 13px;
    }
    
    .barcode-input {
        flex-direction: column;
    }
    
    .barcode-input input {
        width: 100% !important;
    }
    
    .barcode-input button {
        width: 100%;
    }
    
    /* Modal fullscreen on mobile */
    .modal-content {
        margin: 10px;
        padding: 15px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-content.receipt-content {
        max-width: 100%;
    }
    
    .receipt {
        max-width: 100% !important;
        padding: 5px !important;
    }
    
    /* Table scroll */
    .table-container {
        padding: 10px;
        overflow-x: auto;
    }
    
    table {
        font-size: 13px;
    }
    
    table th, table td {
        padding: 8px;
        min-width: 80px;
    }
    
    /* Form on mobile */
    .form-group input, 
    .form-group select, 
    .form-group textarea {
        padding: 12px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Buttons mobile */
    .btn-primary, .btn-success, .btn-danger {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px; /* Touch friendly */
    }
    
    /* Install page mobile */
    .install-container {
        padding: 20px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .login-box {
        padding: 20px;
        margin: 10px;
    }
    
    .login-logo {
        width: 60px;
        height: 60px;
    }
    
    .payment-buttons {
        grid-template-columns: 1fr 1fr;
    }
    
    .sidebar {
        width: 280px;
    }
    
    .cart-item {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .cart-item-info {
        width: 100%;
    }
    
    .receipt {
        font-size: 12px;
    }
}