/* assets/picking.css - Warehouse Display Optimizations */

/* Full-screen mode overrides */
.picking-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    background-color: var(--mantine-color-body) !important;
    overflow: auto !important;
    padding: 1rem !important;
}

/* Hide sidebar and topbar in fullscreen */
.picking-fullscreen ~ #sidebar,
.picking-fullscreen ~ #topbar {
    display: none !important;
}

/* Larger touch targets for warehouse environment */
.picking-station button {
    min-height: 48px;
    min-width: 48px;
    font-size: 1.1rem;
}

/* Enhanced slot cards for better visibility from distance */
.staging-slot-card {
    min-height: 200px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.staging-slot-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Pulse animation for active scanner */
@keyframes scanner-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.scanner-active {
    animation: scanner-pulse 2s ease-in-out infinite;
}

/* High contrast mode for bright warehouse environments */
@media (prefers-contrast: high) {
    .staging-slot-card {
        border-width: 3px !important;
    }

    .mantine-Badge-root {
        border: 2px solid currentColor !important;
    }
}

/* Large screen optimizations (warehouse monitors) */
@media (min-width: 1920px) {
    .staging-grid {
        font-size: 1.2rem;
    }

    .staging-slot-card {
        min-height: 250px;
    }
}

/* Dark mode for picking page */
[data-mantine-color-scheme="dark"] .staging-slot-card {
    background-color: var(--mantine-color-dark-6);
    border-color: var(--mantine-color-dark-4);
    color: var(--mantine-color-dark-0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-mantine-color-scheme="dark"] .staging-slot-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* Print styles for picklists */
@media print {
    #fullscreen-toggle-btn,
    #picking-refresh-btn,
    .no-print {
    display: none !important;
    }
}

/* ── Double-scan: active cart banner ──────────────────── */
.staging-slot-banner {
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.staging-slot-banner .mantine-Paper-root {
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* Progress card hover effect */
.progress-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.progress-card-hover:active {
    transform: translateY(0);
}