/* Inventory browse page — live SAP case-inv replacement.
   Dense, scanable, sales-oriented. Desktop = wide table.
   Mobile = stacked cards. */

.inv-body {
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
}

.inv-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 14px 18px 90px;
}

/* ── Controls ─────────────────────────────────────────────── */
.inv-controls {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.inv-search-wrap {
    position: relative;
    margin-bottom: 10px;
}
.inv-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    pointer-events: none;
}
.inv-search {
    width: 100%;
    font-size: 15px;
    padding: 11px 38px 11px 36px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    border-radius: 10px;
    color: var(--ink);
}
.inv-search:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
.inv-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: var(--ink-faint);
    color: var(--surface);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.inv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.inv-chip {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s ease;
}
.inv-chip:hover {
    border-color: var(--ink-faint);
    color: var(--ink);
}
.inv-chip.active {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}

.inv-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.inv-select {
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
}
.inv-select:focus { outline: none; border-color: var(--accent); }
.inv-sort-select {
    margin-left: auto;
}

.inv-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-2);
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    cursor: pointer;
}
.inv-check input { margin: 0; cursor: pointer; }

/* Searchable combobox — matches the look of .inv-select but with
   type-to-filter and a scrollable options list. Used for Region since
   there are ~110 of them (too many for a plain select). */
.inv-combo {
    position: relative;
}
.inv-combo-input {
    font-size: 13px;
    padding: 7px 24px 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
    min-width: 140px;
    width: 140px;
}
.inv-combo-input:focus {
    outline: none;
    border-color: var(--accent);
}
.inv-combo-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: var(--ink-faint);
    color: var(--surface);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.inv-combo-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 60;
}
.inv-combo-opt {
    padding: 7px 10px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}
.inv-combo-opt:last-child { border-bottom: none; }
.inv-combo-opt:hover,
.inv-combo-opt.highlighted {
    background: var(--accent-bg);
    color: var(--accent);
}
.inv-combo-opt-count {
    font-size: 11px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.inv-combo-opt-country {
    font-size: 10px;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.inv-combo-empty {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--ink-3);
}

.inv-price-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--ink-2);
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.inv-price-input {
    width: 56px;
    font-size: 13px;
    padding: 2px 4px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
}
.inv-price-input:focus { outline: none; }
.inv-price-label {
    font-size: 11px;
    color: var(--ink-3);
}

.inv-reset-btn {
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--ink-3);
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}
.inv-reset-btn:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ── Top bar extras ───────────────────────────────────────── */
.inv-bag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--accent-bg);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.12s ease;
}
.inv-bag-pill:hover {
    background: var(--accent);
    color: var(--surface);
}

/* ── Results ──────────────────────────────────────────────── */
.inv-results {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.inv-empty {
    padding: 40px 18px;
    text-align: center;
    color: var(--ink-3);
    font-size: 14px;
}

.inv-table-wrap {
    overflow-x: auto;
}
.inv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 960px;
}
.inv-table thead {
    background: var(--bg);
    border-bottom: 2px solid var(--border);
}
.inv-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    padding: 8px 10px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--bg);
}
.inv-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.1s ease;
}
.inv-table thead th.sortable:hover {
    color: var(--ink);
}
.inv-table thead th.sortable::after {
    content: "⇅";
    margin-left: 4px;
    font-size: 10px;
    color: var(--ink-faint);
    opacity: 0.5;
}
.inv-table thead th.sort-asc::after  { content: "▲"; color: var(--accent); opacity: 1; }
.inv-table thead th.sort-desc::after { content: "▼"; color: var(--accent); opacity: 1; }
.inv-table thead th.sort-asc,
.inv-table thead th.sort-desc {
    color: var(--ink);
}
.inv-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.08s ease;
}
.inv-table tbody tr:hover {
    background: var(--accent-bg);
}
.inv-table tbody td {
    padding: 8px 10px;
    vertical-align: middle;
}
.inv-table .c-avail,
.inv-table .c-order,
.inv-table .c-price,
.inv-table .c-msrp {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.inv-table .c-action {
    text-align: right;
    width: 1%;
}
.inv-table .c-eta {
    white-space: nowrap;
    color: var(--ink-2);
}
.inv-table .c-region {
    color: var(--ink-2);
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inv-table .c-press {
    color: var(--ink-2);
    font-size: 11px;
    max-width: 180px;
}

.inv-brand-cell {
    min-width: 220px;
}
.inv-brand-name {
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
}
.inv-sku-sub {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 2px;
}
.inv-sku-sub .inv-priority-dot {
    color: #d97706;
    font-weight: 700;
    margin-left: 4px;
}
.inv-brand-country {
    font-size: 11px;
    color: var(--ink-3);
    margin-top: 1px;
}

.inv-class-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.inv-class-tag.c-Red     { background: #fef2f2; color: #991b1b; }
.inv-class-tag.c-White   { background: #fefce8; color: #854d0e; }
.inv-class-tag.c-Rose    { background: #fdf2f8; color: #9d174d; }
.inv-class-tag.c-Orange  { background: #fff7ed; color: #9a3412; }
.inv-class-tag.c-Spirit  { background: #f1f5f9; color: #334155; }
.inv-class-tag.c-Sparkling { background: #ecfeff; color: #155e75; }

.inv-lifecycle-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: 2px;
}
.inv-lifecycle-badge.lc-clearance { background: #fef3c7; color: #92400e; }
.inv-lifecycle-badge.lc-fine      { background: #ede9fe; color: #5b21b6; }
.inv-lifecycle-badge.lc-core      { background: #d1fae5; color: #065f46; }
.inv-lifecycle-badge.lc-dnr       { background: #f1f5f9; color: #64748b; }

/* Availability chip — same vocabulary as the brand drawer */
.inv-avail-chip {
    display: inline-block;
    font-weight: 700;
    font-size: 12px;
}
.inv-avail-chip.ok       { color: #15803d; }
.inv-avail-chip.low      { color: #b45309; }
.inv-avail-chip.held     { color: #4338ca; }
.inv-avail-chip.water    { color: #0369a1; }
.inv-avail-chip.out      { color: var(--ink-3); }
.inv-avail-sub {
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 1px;
}

.inv-price-main {
    font-weight: 600;
    color: var(--ink);
}
.inv-price-best {
    font-size: 10px;
    color: var(--ink-3);
    margin-top: 1px;
}

.inv-add-btn {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    background: var(--ink);
    color: var(--surface);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s ease;
}
.inv-add-btn:hover {
    background: #1d2638;
}
.inv-add-btn.added {
    background: #15803d;
    color: #fff;
}
.inv-add-btn.added::before {
    content: "✓ ";
}

.inv-cap-notice {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--ink-3);
    background: var(--bg);
    border-top: 1px solid var(--border);
}

/* ── Floating action bar (when items in bag) ────────────── */
.inv-fab {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--surface);
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    gap: 10px;
    align-items: center;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
    z-index: 100;
}
.inv-fab a {
    color: #a5d3ff;
    text-decoration: none;
}

/* ── Mobile: stacked cards ──────────────────────────────── */
@media (max-width: 720px) {
    .inv-main { padding: 10px 12px 80px; }
    .inv-controls { padding: 10px; }
    .inv-search { font-size: 16px; }  /* iOS no-zoom */
    .inv-sort-select { margin-left: 0; }
    .inv-filters-row { gap: 6px; }

    .inv-table-wrap { overflow-x: visible; }
    .inv-table { display: none; }

    .inv-mobile-list { display: block; }
    .inv-mobile-card {
        padding: 12px;
        border-bottom: 1px solid var(--border);
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 10px;
    }
    .inv-mobile-card:last-child { border-bottom: none; }
    .inv-mobile-head { grid-column: 1 / -1; }
    .inv-mobile-name {
        font-weight: 600;
        color: var(--ink);
        font-size: 14px;
        line-height: 1.3;
    }
    .inv-mobile-sub {
        font-size: 11px;
        color: var(--ink-3);
        margin-top: 2px;
    }
    .inv-mobile-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        grid-column: 1 / -1;
    }
    .inv-mobile-row .label {
        color: var(--ink-3);
    }
    .inv-mobile-actions {
        grid-column: 1 / -1;
        display: flex;
        gap: 8px;
        margin-top: 6px;
    }
    .inv-mobile-actions .inv-add-btn { flex: 1; padding: 8px; }
}

@media (min-width: 721px) {
    .inv-mobile-list { display: none; }
}