/* Mobile store-restocking module — full-screen shell, camera scanning, and the grouped picking
   list. Large touch targets and safe-area padding throughout since this is used one-thumb, phone
   in hand, walking around a store. */

.restock-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--bg-canvas);
    color: var(--text-primary);
    font-size: 1rem;
}

.restock-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-4) var(--space-3);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}

/* Thin brand accent stripe along the top edge — the same "this is part of Freshyto OneWorld,
   not a bare utility screen" touch used on the login pages. */
.restock-topbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--lime));
}

.restock-topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 650;
    font-size: var(--text-lg);
}

.restock-topbar-logo {
    height: 34px;
    width: 34px;
}

.restock-exit {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-surface-2);
}

.restock-body {
    position: relative;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

/* Bottom tab bar — shared between the scan and list pages. */
.restock-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    z-index: 20;
}

.restock-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-2);
    min-height: 52px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: 600;
}

.restock-tab.active {
    color: var(--accent);
    background: var(--accent-soft-bg);
}

.restock-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}

/* Always-on camera stage: the video never unmounts while scanning is active — detected products
   and search results float on top of it instead of replacing it, so scanning the next item never
   feels like leaving the page. */
.restock-scan-stage {
    position: absolute;
    inset: 0;
    background: #000;
    overflow: hidden;
}

/* Inventory Count's scan-entry page reuses this scanner stage but lives inside the normal admin
   layout (sidebar/topbar/PageHeader) rather than Restock's dedicated full-viewport RestockLayout —
   `position: absolute; inset: 0` there covers the whole content area (hiding the page header and
   anything below), since its nearest positioned ancestor is the page content wrapper, not a
   purpose-built full-height shell. This override keeps the same look (still establishes a
   positioned box for the video/overlay children) but sizes it in normal flow instead. */
.count-scan-stage {
    position: relative;
    inset: auto;
    height: 60vh;
    min-height: 420px;
    border-radius: var(--radius-lg);
}

.restock-scan-stage video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Branded corner-bracket viewfinder (à la modern camera-scan UIs) instead of a plain dashed
   rectangle — the lime accent corners tie the scan stage back to the rest of the app's identity
   without a heavy border that fights the live camera feed underneath. */
.restock-scan-guide {
    position: absolute;
    inset: 16% 14% 42%;
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, .28);
    pointer-events: none;
}

.restock-scan-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 3px solid var(--lime);
}

.restock-scan-corner.tl { top: -3px; left: -3px; border-right: none; border-bottom: none; border-top-left-radius: var(--radius-lg); }
.restock-scan-corner.tr { top: -3px; right: -3px; border-left: none; border-bottom: none; border-top-right-radius: var(--radius-lg); }
.restock-scan-corner.bl { bottom: -3px; left: -3px; border-right: none; border-top: none; border-bottom-left-radius: var(--radius-lg); }
.restock-scan-corner.br { bottom: -3px; right: -3px; border-left: none; border-top: none; border-bottom-right-radius: var(--radius-lg); }

.restock-scan-hint {
    position: absolute;
    top: 60%;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    pointer-events: none;
}

/* Flashlight toggle — shown only when the active camera track actually supports a torch
   (see restockScanner.js), positioned clear of the search overlay above and the guide below. */
.restock-torch-btn {
    position: absolute;
    top: calc(var(--space-3) + env(safe-area-inset-top) + 64px);
    right: var(--space-3);
    z-index: 9;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(10, 14, 12, .55);
    backdrop-filter: blur(8px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.restock-torch-btn.active {
    background: var(--lime);
    border-color: var(--lime);
    color: #0a1f10;
}

.restock-scan-fallback-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bg-canvas);
}

/* Floating detected-product card — overlays the bottom of the live camera feed rather than
   replacing the whole scan view, so the camera is always visibly "still on". */
.restock-detect-card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    max-height: 72%;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--bg-elevated);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .35);
    animation: restock-card-up .22s var(--ease);
}

@keyframes restock-card-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.restock-detect-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }

.restock-detect-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--bg-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.restock-product-name {
    font-size: var(--text-xl);
    font-weight: 700;
}

.restock-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    color: var(--text-secondary);
    font-size: var(--text-base);
}

.restock-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.restock-qty-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.restock-qty-label .hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.restock-stepper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.restock-stepper button {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--bg-surface-2);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.restock-stepper input {
    width: 64px;
    text-align: center;
    font-size: var(--text-lg);
    font-weight: 700;
    min-height: 44px;
}

.restock-sheet-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.restock-sheet-actions .btn {
    min-height: 52px;
    font-size: var(--text-md);
}

/* Grouped restock list */
.restock-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-2);
}

.restock-list-actions {
    display: flex;
    gap: var(--space-2);
}

.restock-rack-group {
    padding: 0 var(--space-4);
}

.restock-rack-header {
    position: sticky;
    top: 0;
    background: var(--bg-canvas);
    padding: var(--space-2) 0;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.restock-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
}

.restock-item-info {
    flex: 1;
    min-width: 0;
}

.restock-item-name {
    font-weight: 600;
    font-size: var(--text-base);
}

.restock-item-qty {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--accent);
    min-width: 44px;
    text-align: right;
}

.restock-item-actions {
    display: flex;
    gap: var(--space-1);
}

.restock-item-actions button {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.restock-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}

/* Share picker (rendered inside the shared <Modal>, so uses the app's normal desktop-scale spacing) */
.restock-user-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 320px;
    overflow-y: auto;
}

.restock-user-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.restock-user-option:hover {
    background: var(--bg-hover);
}

.restock-user-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

/* Persistent search — floats over the top of the live camera feed so typing works without ever
   leaving scan mode or stopping the camera. */
.restock-search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8;
    padding: calc(var(--space-3) + env(safe-area-inset-top)) var(--space-3) var(--space-3);
    /* A gradient fade-to-transparent alone isn't reliable contrast — a bright patch of the live
       camera feed (a window, an overhead light) behind it can still wash out light text. The solid
       stop up front guarantees a dark backing regardless of what the camera sees. */
    background: linear-gradient(rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .55) 70%, transparent 100%);
}

/* Was ~12%-opacity white glass with white text over a live camera feed — unreadable whenever the
   feed itself was bright (a window, overhead lighting). A reliably-dark, near-opaque backing keeps
   white text legible no matter what the camera sees behind it. */
.search-input.glass {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: var(--text-md);
    background: rgba(8, 14, 11, .82);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-lg);
}

.search-input.glass input {
    flex: 1;
    min-width: 0;
    font-size: var(--text-md);
    color: #fff;
    background: transparent;
    border: none;
    box-shadow: none;
}

.search-input.glass input::placeholder { color: rgba(255, 255, 255, .68); }
.search-input.glass svg { color: var(--lime); }

.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .15);
}

.restock-search-hint {
    padding: var(--space-2) var(--space-1) 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.restock-search-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
    max-height: 60vh;
    overflow-y: auto;
}

.restock-search-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md);
    text-align: left;
}

.restock-search-result.added { border-color: var(--success); }

.restock-search-result-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-weight: 600;
    font-size: var(--text-base);
}

.restock-search-added-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--success-soft-bg);
    color: var(--success-soft-text);
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}