/* =============================================
   WALINGA TRIKES — MOBILE WAREHOUSE UI
   ============================================= */

/* ── Scan page ── */
.scan-container { padding: 0 12px 12px; }
.scan-video-wrap {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16/7;
    max-height: 240px;
}
.scan-video-wrap video { width:100%; height:100%; object-fit:cover; display:block; }
.scan-overlay {
    position: absolute;
    border: 2px solid rgba(255,255,255,0.8);
    border-radius: 4px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
    pointer-events: none;
    top: 50%; left: 8%; right: 8%;
    transform: translateY(-50%);
    height: 55%;
}
.scan-status { text-align:center; font-size:13px; color:#73726c; margin:8px 0; }
.scan-mode-buttons { display:grid; gap:6px; margin-bottom:12px; }
.scan-mode-btn {
    padding: 10px 8px;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.scan-mode-btn.active { background:#1a1a18; color:#fff; border-color:#1a1a18; }
.scan-manual-input { display:flex; gap:8px; margin:8px 0; }
.scan-manual-input input { flex:1; padding:10px 12px; border:1px solid #d3d1c7; border-radius:8px; font-size:15px; }
.scan-result-card { background:#fff; border:1px solid #e2e1db; border-radius:10px; padding:16px; margin-top:8px; }
.scan-result-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f0efe8; font-size:14px; }
.scan-result-row:last-child { border-bottom:none; }
.scan-result-row .label { color:#73726c; }
.scan-result-row .value { font-weight:500; }

/* =============================================
   MOBILE BOTTOM NAV
   ============================================= */
.mobile-bottom-nav {
    display: none; /* hidden by default, shown on mobile */
}

@media (max-width: 768px) {
    /* ── Show bottom nav ── */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #1a1a18;
        z-index: 200;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid #333;
    }
    .mobile-bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px 4px 8px;
        color: #73726c;
        text-decoration: none;
        font-size: 10px;
        gap: 4px;
        transition: color 0.15s;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-bottom-nav a.active { color: #fff; }
    .mobile-bottom-nav .nav-icon { font-size: 20px; line-height: 1; }
    .mobile-bottom-nav a.nav-center { color: #fff; }
    .mobile-bottom-nav a.nav-center .nav-icon {
        background: #0F6E56;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-top: -14px;
        box-shadow: 0 2px 10px rgba(15,110,86,0.5);
    }

    /* ── Hide desktop header nav on mobile ── */
    header.site-header { display: none; }

    /* ── Body padding for bottom nav ── */
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

    /* ── Container ── */
    .container { padding: 12px; }

    /* ── Scanner fullscreen ── */
    .scan-container { padding: 0; }
    .scan-video-wrap {
        aspect-ratio: unset;
        height: 260px;
        max-height: 260px;
        border-radius: 0;
    }
    .scan-overlay {
        top: 10%;
        left: 5%;
        right: 5%;
        height: 80%;
        border-width: 2px;
        border-color: #5DCAA5;
        transform: none;
    }
    .scan-mode-buttons {
        grid-template-columns: repeat(4, 1fr);
        padding: 8px 10px 0;
        gap: 5px;
    }
    .scan-mode-btn { font-size: 11px; padding: 8px 4px; }
    .scan-manual-input { padding: 0 10px; }
    .scan-manual-input input { font-size: 16px; }
    #scanResult, #assignForm, #vitrineSelector, #vitrineCountForm, #liveSearchResults { padding: 0 10px; }
    .scan-status { padding: 6px 10px; }

    /* ── Mobile product cards ── */
    .mobile-product-list { display:flex; flex-direction:column; gap:8px; }
    .mobile-product-card {
        background: #fff;
        border: 1px solid #e2e1db;
        border-radius: 10px;
        padding: 14px;
        text-decoration: none;
        color: inherit;
        display: block;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-product-card:active { background: #fafaf7; }
    .product-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
    .product-name { font-size:15px; font-weight:500; flex:1; margin-right:12px; line-height:1.3; }
    .product-stock { font-size:22px; font-weight:700; min-width:32px; text-align:right; }
    .product-stock.in-stock { color:#0F6E56; }
    .product-stock.out-stock { color:#A32D2D; }
    .product-meta { display:flex; gap:10px; font-size:12px; color:#73726c; flex-wrap:wrap; }
    .product-meta code { font-family:monospace; background:#f5f5f0; padding:1px 5px; border-radius:3px; font-size:11px; }

    /* ── Mobile search ── */
    .mobile-search-wrap {
        position: sticky;
        top: 0;
        background: #f5f5f0;
        padding: 10px 0 8px;
        z-index: 10;
    }
    .mobile-search-wrap input {
        width: 100%;
        padding: 12px 16px;
        font-size: 16px;
        border: 1px solid #d3d1c7;
        border-radius: 10px;
        background: #fff;
    }

    /* ── Hide desktop table on mobile ── */
    .desktop-table-wrap { display: none !important; }

    /* ── Show mobile product list ── */
    .mobile-list-wrap { display: block; }

    /* ── h1 on mobile ── */
    h1 { font-size: 20px; margin-bottom: 1rem; }
}

/* ── Desktop: hide mobile elements ── */
@media (min-width: 769px) {
    .mobile-list-wrap { display: none !important; }
    .mobile-search-wrap { display: none !important; }
}

/* ── Hide desktop header on mobile, fix scan, fix products ── */
@media (max-width: 768px) {
    /* Hide top nav */
    header.site-header { display: none !important; }
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }

    /* Products: smaller stock number, bigger name */
    .product-stock { font-size: 18px !important; min-width: 28px !important; }
    .product-name { font-size: 16px !important; }
    .mobile-product-card { padding: 12px 14px !important; }

    /* Search bar full width and bigger */
    .mobile-search-wrap input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px 16px !important;
    }
}