/* Mobile-optimized styles for Sales Processing */

/* Scanner Dialog */
.scanner-dialog {
    max-width: 95vw !important;
    max-height: 90vh !important;
}

.scanner-container {
    position: relative;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

#reader {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    min-height: 300px;
    max-width: 100%;
}

/* Shopping Cart */
.cart-item {
    transition: transform 0.2s ease-in-out;
}

.cart-item:hover {
    transform: translateY(-1px);
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sales Processing Header Optimizations */
.sales-header {
    background: linear-gradient(135deg, var(--mud-palette-primary-lighten) 0%, var(--mud-palette-background) 100%);
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
}

/* Streamlined button styles */
.mud-button-filled {
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: 0.025em;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .scanner-dialog .mud-dialog-content {
        padding: 12px !important; /* Reduced padding */
    }
    
    #reader {
        min-height: 250px;
    }
    
    .scanner-container {
        margin: 0 -2px; /* Less negative margin */
    }

    .cart-item .mud-card-content {
        padding: 6px !important; /* More compact */
    }
    
    /* Compact mobile buttons */
    .mud-button-filled {
        min-height: 44px; /* Slightly smaller than before */
        padding: 8px 16px;
    }
    
    .mud-icon-button {
        min-width: 40px;
        min-height: 40px;
    }
    
    /* Tighter spacing on mobile */
    .mud-stack.mud-stack-spacing-3 > .mud-stack-item:not(:last-child) {
        margin-bottom: 12px !important;
    }
    
    .mud-stack.mud-stack-spacing-2 > .mud-stack-item:not(:last-child) {
        margin-bottom: 8px !important;
    }
}

@media (max-width: 480px) {
    #reader {
        min-height: 220px; /* Slightly smaller for very small screens */
    }
    
    /* Even more compact on small screens */
    .mud-button-filled {
        padding: 6px 12px;
        font-size: 0.875rem;
    }
}

/* High contrast for better mobile visibility */
@media (max-width: 768px) {
    .mud-chip {
        font-weight: 500;
        font-size: 0.75rem;
    }
    
    .mud-alert {
        border-radius: 8px;
        padding: 12px;
    }
    
    /* Streamlined paper components */
    .mud-paper {
        border-radius: 8px;
    }
    
    /* Tighter text spacing */
    .mud-typography-h5 {
        margin-bottom: 0;
        font-weight: 600;
    }
}