/* Warehouse Catalog — design system (task 33).
   Bootstrap 5.3 itself is loaded from CDN on every page; this file
   layers the app's own identity on top via Bootstrap's own CSS custom
   properties (so components — cards, modals, dropdowns, forms, tables —
   pick the theme up automatically) plus the handful of bits Bootstrap
   has no component for (QR code sizing, photo thumbnail grids, the
   lightbox, the catalog table's mobile card transform).

   Mobile-first throughout: unqualified rules are the phone layout: any
   `@media (min-width: ...)` block *adds* a desktop enhancement on top.
   There is no `max-width` breakpoint anywhere in this file — that was
   the root cause of the mobile card layout not triggering reliably on
   some phones (a wide-viewport Samsung flagship simply fell through an
   upper-bound check it didn't match). Building phone-first removes that
   whole failure mode: there's no upper bound to get wrong.

   Two themes, "amber on charcoal" (default) and a warm-cream companion
   for bright warehouse lighting, switched via Bootstrap's own
   `data-bs-theme` attribute (see includes/partials/theme_init.php for
   the load-time switch, and account.php, task 35, for the user-facing
   toggle). `data-bs-theme="dark"` is the true default regardless of the
   visitor's OS preference — that's the chosen brand identity, not just
   one of two OS-driven options; light is the companion for bright
   conditions, reachable via prefers-color-scheme or the manual toggle. */

:root,
[data-bs-theme="dark"] {
    --bs-body-bg: #2B2A28;
    --bs-body-color: #F3EDE4;
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: #C9C0B4;
    --bs-border-color: #4A453F;
    --bs-border-color-translucent: #4A453F;
    --bs-tertiary-bg: #3F3B36;
    --bs-card-bg: #35322F;
    --bs-modal-bg: #35322F;
    --bs-dropdown-bg: #35322F;
    --bs-primary: #E8A33D;
    --bs-primary-rgb: 232, 163, 61;
    --bs-link-color: #E8A33D;
    --bs-link-color-rgb: 232, 163, 61;
    --bs-link-hover-color: #F0B563;
    --bs-link-hover-color-rgb: 240, 181, 99;

    --color-surface: #35322F;
    --color-accent-2: #D9773F;
    --color-accent-contrast: #2B2A28;

    --bs-border-radius: 12px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-xl: 20px;
}

[data-bs-theme="light"] {
    --bs-body-bg: #F9F6F2;
    --bs-body-color: #33302C;
    --bs-emphasis-color: #000000;
    --bs-secondary-color: #6B655D;
    --bs-border-color: #E4DACB;
    --bs-border-color-translucent: #E4DACB;
    --bs-tertiary-bg: #F3ECE1;
    --bs-card-bg: #FFFFFF;
    --bs-modal-bg: #FFFFFF;
    --bs-dropdown-bg: #FFFFFF;
    --bs-primary: #C1622D;
    --bs-primary-rgb: 193, 98, 45;
    --bs-link-color: #C1622D;
    --bs-link-color-rgb: 193, 98, 45;
    --bs-link-hover-color: #9C4E24;
    --bs-link-hover-color-rgb: 156, 78, 36;

    --color-surface: #FFFFFF;
    --color-accent-2: #9C4E24;
    --color-accent-contrast: #FFFFFF;
}

/* Bootstrap ships .btn-primary with its own bg/border/color baked in at
   build time — overriding --bs-primary alone doesn't reach it, same
   pattern the app already used pre-task-33 for the old brand blue. */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: var(--color-accent-contrast);
    --bs-btn-hover-bg: var(--color-accent-2);
    --bs-btn-hover-border-color: var(--color-accent-2);
    --bs-btn-hover-color: var(--color-accent-contrast);
    --bs-btn-active-bg: var(--color-accent-2);
    --bs-btn-active-border-color: var(--color-accent-2);
    --bs-btn-active-color: var(--color-accent-contrast);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--color-accent-contrast);
}

.bg-brand {
    background-color: var(--bs-primary) !important;
    color: var(--color-accent-contrast) !important;
}

.navbar-brand {
    color: var(--bs-primary);
    font-weight: 600;
}

/* Top bar (task 34) — brand + desktop nav + primary action + account
   icon. Bottom tab bar below is the mobile-first primary nav instead. */
.topbar {
    border-bottom: 1px solid var(--bs-border-color);
}

/* Bottom tab bar (task 34) — mobile-only primary navigation, exactly
   two destinations (Capture, Catalog) per the UI/UX interview. */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: var(--color-surface);
    border-top: 1px solid var(--bs-border-color);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 1030;
}
.tabbar-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.5rem 0.25rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: 0.75rem;
}
.tabbar-link i {
    font-size: 1.25rem;
}
.tabbar-link.active {
    color: var(--bs-primary);
}

/* Reserves space so the fixed .tabbar doesn't cover page content on
   phone-width screens; the tab bar itself is hidden (`d-lg-none`) at
   the same breakpoint this resets at. */
.has-tabbar {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 992px) {
    .has-tabbar {
        padding-bottom: 0;
    }
}

/* Brand mark (task 33) — small icon next to the "Warehouse Catalog"
   wordmark, e.g. login.php's card header and the navbar brand. */
.brand-mark {
    color: inherit;
    margin-right: 0.35rem;
}

/* Auth page: centered card. Backdrop is just the themed body background
   (data-bs-theme handles it) — no separate hardcoded color needed. */
.auth-page {
    min-height: 100vh;
}

/* Drop zone QR code */
#qr {
    width: 220px;
    height: 220px;
    margin: 0 auto;
}
#qr img, #qr canvas {
    width: 220px !important;
    height: 220px !important;
}

/* Photo thumbnail grids (drop zone + modal clarifying-question layout) */
.thumb-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.thumb-grid img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--bs-border-radius-sm);
    border: 1px solid var(--bs-border-color);
}

/* Catalog table thumbnails */
.catalog-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--bs-border-radius-sm);
    border: 1px solid var(--bs-border-color);
}
.catalog-thumb-empty {
    width: 56px;
    height: 56px;
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-tertiary-bg);
}

/* Catalog table <-> stacked mobile cards (task 23, restructured
   mobile-first in task 33). Default/unqualified rules below are the
   phone layout — no media query needed to activate them, so there's no
   viewport-width guess to get wrong. The `min-width: 768px` block is
   the desktop enhancement, restoring the plain table. Task 36 covers
   the mobile card's *visual* redesign (bigger photo, warm styling,
   value chip); this task only fixes the structural breakpoint bug. */
.table-mobile-cards,
.table-mobile-cards tbody,
.table-mobile-cards tr,
.table-mobile-cards td {
    display: block;
    width: 100%;
}
.table-mobile-cards thead {
    display: none;
}
.table-mobile-cards tbody tr {
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.75rem;
    background: var(--color-surface);
}
.table-mobile-cards tbody td {
    border: none;
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.table-mobile-cards tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}
.table-mobile-cards tbody td.catalog-tile-thumb {
    justify-content: center;
    padding-bottom: 0.5rem;
}
.table-mobile-cards tbody td.catalog-tile-thumb .catalog-thumb,
.table-mobile-cards tbody td.catalog-tile-thumb .catalog-thumb-empty {
    width: 100%;
    max-width: 260px;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--bs-border-radius);
}
/* Photo-forward mobile card face (task 36): only the photo, name, and
   value are shown by default — everything else (SKU, category,
   location, condition, confidence, processed date) is one tap away
   instead of listed on every card, per the UI/UX interview. Restored
   at desktop, where the table shows every column regardless. */
.table-mobile-cards tbody td.catalog-tile-secondary {
    display: none;
}
.table-mobile-cards tbody td.catalog-tile-name {
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    padding-top: 0.25rem;
}
.table-mobile-cards tbody td.catalog-tile-name::before {
    content: none;
}

@media (min-width: 768px) {
    .table-mobile-cards,
    .table-mobile-cards tbody,
    .table-mobile-cards tr,
    .table-mobile-cards td {
        display: table;
        width: auto;
    }
    .table-mobile-cards tbody {
        display: table-row-group;
    }
    .table-mobile-cards tr {
        display: table-row;
    }
    .table-mobile-cards td {
        display: table-cell;
    }
    .table-mobile-cards thead {
        display: table-header-group;
    }
    .table-mobile-cards tbody tr {
        margin-bottom: 0;
        border: none;
        border-radius: 0;
        padding: 0;
        background: none;
    }
    .table-mobile-cards tbody td {
        border-bottom: 1px solid var(--bs-border-color);
        padding: 0.5rem;
        display: table-cell;
    }
    .table-mobile-cards tbody td[data-label]::before {
        content: none;
    }
    .table-mobile-cards tbody td.catalog-tile-thumb {
        padding-bottom: 0.5rem;
    }
    .table-mobile-cards tbody td.catalog-tile-thumb .catalog-thumb,
    .table-mobile-cards tbody td.catalog-tile-thumb .catalog-thumb-empty {
        width: 56px;
        max-width: none;
        height: 56px;
        aspect-ratio: auto;
        border-radius: var(--bs-border-radius-sm);
    }
    .table-mobile-cards tbody td.catalog-tile-secondary {
        display: table-cell;
    }
    .table-mobile-cards tbody td.catalog-tile-name {
        font-size: inherit;
        font-weight: inherit;
        text-align: left;
        padding-top: 0.5rem;
    }
}

/* Whole row/tile is the tap target (replaces the old per-row Edit
   button) — visible highlight on hover/focus so it reads as clickable
   in both the mobile card layout and the desktop table. */
.table-mobile-cards tbody tr.row-clickable {
    cursor: pointer;
}
.table-mobile-cards tbody tr.row-clickable:hover,
.table-mobile-cards tbody tr.row-clickable:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}
.table-mobile-cards tbody tr.row-clickable:focus-visible {
    outline-offset: 0;
}

/* Estimated-value pill (task 36) — used in both the mobile card and the
   desktop table cell, ties the catalog view to the accent color. */
.value-chip {
    display: inline-block;
    background: var(--bs-primary);
    color: var(--color-accent-contrast);
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--bs-border-radius-lg);
}

/* Condition/confidence level meter — a language-free filled/unfilled
   segment bar (the stored value is now just a number, see
   items_data.php's renderLevelMeter()), used in the catalog and item
   detail views. Segment count varies by field (6 for condition, 3 for
   confidence); the markup only ever sets/omits .filled. */
.level-meter {
    display: inline-flex;
    gap: 3px;
    vertical-align: middle;
}
.level-seg {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--bs-border-color);
}
.level-seg.filled {
    background: var(--bs-primary);
}

/* Edit-modal photo strip (superseded by item/view.php in task 37, kept
   themed until then) */
#modalThumbs img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--bs-border-radius-sm);
    border: 1px solid var(--bs-border-color);
    cursor: pointer;
}

/* Full-screen photo preview, opened from thumbnails. Bootstrap's own
   modal stacks at z-index 1055 — this sits above it. */
#lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
    z-index: 1080;
    cursor: pointer;
}
#lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
}