/* frame.css — the inventory frame in the Office Dashboard layout (owner Oct 16 2026). Built only from Office
   values: the page header is the Purchase Orders header (18px / 800 title, small buttons on the right), the tab
   bar is the Fleet vehicle tabs (12px uppercase, orange underline), alert chips are the Office filter chip,
   location cards are the Office Home cards. The Back button and .back-bar are style.css's. */

.inv-frame { margin: 0 0 4px; }
.inv-frame .back-bar { padding: 0 0 6px; }
.inv-frame .back-btn { text-decoration: none; }
.inv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.inv-head h2 { font-size: 18px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--dark); line-height: 1.25; }
.inv-head .js-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.inv-head .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inv-head .acts:empty { display: none; }
.inv-gear { padding: 6px 10px; min-width: 36px; justify-content: center; color: var(--gray-700); }
.inv-gear svg { display: block; }
.inv-gear.on { border-color: var(--orange); color: var(--orange); background: var(--orange-light); }
.inv-sub { font-size: 13px; color: var(--gray-500); margin: -4px 0 12px; line-height: 1.5; }
.inv-sub a { color: var(--orange); font-weight: 700; text-decoration: none; }
.inv-sub a:hover { text-decoration: underline; }

/* Tab bar: one line; scrolls sideways on phones (never wraps) */
.inv-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--gray-100); margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.inv-tabs::-webkit-scrollbar { display: none; }
.inv-tabs a { display: flex; align-items: center; min-height: 44px; padding: 0 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #6b7280; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; flex: none; }
.inv-tabs a:hover { color: var(--dark); }
.inv-tabs a.on { color: #F47920; border-bottom-color: #F47920; }
.inv-tabs a .n { margin-left: 5px; min-width: 16px; text-align: center; background: #e53e3e; color: #fff; border-radius: 8px; font-size: 10px; padding: 1px 5px; letter-spacing: 0; }

/* Alert chips: small links to the tab that fixes it */
.inv-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.inv-chips a.clear-filter-btn { text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; }
@media (max-width: 768px) { .inv-chips a.clear-filter-btn { min-height: 44px; } }

/* Location cards (Overview, a Shop's Areas and Trucks): Office Home cards */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 0 0 20px; }
.loc-card { display: block; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .15s, transform .1s; min-height: 120px; }
.loc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.loc-card .home-card-title { justify-content: space-between; margin-bottom: 6px; gap: 8px; }
.loc-card .kind { font-size: 12px; color: var(--gray-500); margin-bottom: 8px; }
.loc-card .v { font-weight: 800; text-align: right; }
.loc-card .v.warn { color: var(--orange); }
.loc-card.is-installed { background: var(--gray-50); box-shadow: none; border: 1.5px dashed var(--gray-300); }
.loc-card.is-installed .home-card-title { color: var(--gray-500); }
.loc-card.add-card { border: 2px dashed var(--gray-300); box-shadow: none; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--gray-500); font-weight: 700; text-align: center; gap: 2px; }
.loc-card.add-card .small { font-weight: 600; }
.group-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-500); margin: 4px 0 10px; }

/* Filter bar (the Purchase Orders one) with the location picker first */
.po-filter-bar .form-group.wide { flex: 2; }
.po-filter-bar .inv-at { font-weight: 700; }
.po-filter-bar .btn { align-self: flex-end; }
.card.flush-card { padding: 0; overflow: hidden; }
.card.flush-card .card-header { padding: 14px 18px; }
.card-header .count { font-size: 13px; color: var(--gray-500); }
.po-table td .code { color: var(--orange); font-weight: 700; white-space: nowrap; }
.po-table .num { text-align: right; white-space: nowrap; }
.qty-low { color: #9b1c1c; font-weight: 800; }

@media (max-width: 768px) {
  .app-main { padding: 12px 16px 40px; }
  .inv-head .acts .btn, .inv-gear { min-height: 44px; }
  .po-filter-bar { padding: 12px; }
  .po-filter-bar .form-group, .po-filter-bar .form-group.wide { min-width: 100%; }
  .po-filter-bar .form-control { min-height: 44px; font-size: 16px; }
  .loc-grid { grid-template-columns: 1fr; }
  .hide-phone { display: none; }
}
.only-phone { display: none; }
@media (max-width: 768px) { .only-phone { display: block; } }
.link-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; min-height: 32px; }
.po-table tr[data-id], .po-table tr[data-href] { cursor: pointer; }

/* Custom catalogs */
.sl-qty { width: 96px; min-height: 36px; padding: 6px 8px; text-align: right; display: inline-block; }
.sl-results { max-height: 320px; overflow: auto; border-bottom: 1px solid var(--gray-100); }
.sl-pick { cursor: pointer; }
.sl-pick input { width: 22px; height: 22px; accent-color: var(--orange); flex: none; }
.sl-locs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 14px; }
.sl-import, .sl-plan { padding: 10px 18px; }
.sl-plan { padding: 10px 0 0; }
@media (max-width: 768px) { .sl-qty { min-height: 44px; width: 80px; } }

/* Tables scroll inside their own box; position: relative keeps absolutely placed bits (screen-reader labels)
   inside it too, so the page itself never scrolls sideways (found on a 1024-wide unfolded screen). */
.table-wrap, .po-table-wrap { position: relative; max-width: 100%; }

/* Narrow phones (folded): tables become cards, one per row, each value with its column label (data-label
   is set by shell.js). From 640px (a foldable unfolded, a tablet, a computer) the table shows as a table.
   Tables with their own phone layout (Stock levels .lv-table, Low stock .ls-table, value .rtable) keep it. */
@media (max-width: 639.98px) {
  .inv table.po-table:not(.lv-table):not(.ls-table):not(.rtable) thead,
  .inv table.data:not(.lv-table):not(.ls-table):not(.rtable):not(.changes) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .inv table.po-table:not(.lv-table):not(.ls-table):not(.rtable), .inv table.po-table:not(.lv-table):not(.ls-table):not(.rtable) tbody,
  .inv table.data:not(.lv-table):not(.ls-table):not(.rtable):not(.changes), .inv table.data:not(.lv-table):not(.ls-table):not(.rtable):not(.changes) tbody { display: block; width: 100%; }
  .inv table.po-table:not(.lv-table):not(.ls-table):not(.rtable) tr,
  .inv table.data:not(.lv-table):not(.ls-table):not(.rtable):not(.changes) tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--gray-100); }
  .inv table.po-table:not(.lv-table):not(.ls-table):not(.rtable) td,
  .inv table.data:not(.lv-table):not(.ls-table):not(.rtable):not(.changes) td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; border: 0; text-align: right; min-width: 0; }
  .inv table.po-table:not(.lv-table):not(.ls-table):not(.rtable) td::before,
  .inv table.data:not(.lv-table):not(.ls-table):not(.rtable):not(.changes) td::before { content: attr(data-label); flex: none; font-size: 12px; font-weight: 700; color: var(--gray-500); text-align: left; text-transform: none; }
  .inv table.po-table:not(.lv-table):not(.ls-table):not(.rtable) td:first-child,
  .inv table.data:not(.lv-table):not(.ls-table):not(.rtable):not(.changes) td:first-child { display: block; text-align: left; padding-bottom: 6px; }
  .inv table.po-table:not(.lv-table):not(.ls-table):not(.rtable) td:first-child::before,
  .inv table.data:not(.lv-table):not(.ls-table):not(.rtable):not(.changes) td:first-child::before,
  .inv table.po-table:not(.lv-table):not(.ls-table):not(.rtable) td[data-label=""]::before,
  .inv table.data:not(.lv-table):not(.ls-table):not(.rtable):not(.changes) td[data-label=""]::before { content: none; }
  .inv table.po-table:not(.lv-table):not(.ls-table):not(.rtable) td.hide-phone, .inv table.data:not(.lv-table):not(.ls-table):not(.rtable):not(.changes) td.hide-phone { display: flex; }   /* a card shows every column */
  .inv .po-table td .only-phone { display: none; }   /* the value has its own labelled row now */
  .inv table.po-table td .row-move, .inv table.po-table td .btn { margin: 4px 0 0; }
}

/* Safe areas (inventory pages use viewport-fit=cover): side notches in landscape, the home bar at the bottom.
   (FieldHub's other pages leave viewport-fit off, so Safari keeps them inside the safe area by itself.) */
.fh-office .main-content, .fh-field .main-content { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.inv .app-main { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
.fh-office .sidebar { padding-left: env(safe-area-inset-left); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }
.fh-office .sidebar-toggle { right: calc(12px + env(safe-area-inset-right)); top: calc(6px + env(safe-area-inset-top)); }
.fh-office .office-topbar, .fh-field .office-topbar { padding-top: max(6px, env(safe-area-inset-top)); }

/* Round 4 (owner Oct 20 2026): Price lists, New items to review, Recently deleted, item Delete, "No weight yet",
   the load-price-list note, Overview's list of locations. Every control 44px high. */
.pl-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.pl-link, .ni-btn, .rd-btn, .item-del-btn { min-height: 44px; }
.item-add-weight, .home-loc-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.rd-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--gray-100); }
.rd-row:first-child { border-top: 0; }
.rd-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-main a { display: inline-flex; align-items: center; min-height: 44px; }
.imp-nonstock { background: var(--warn-bg, #fff7ed); border-left: 4px solid var(--orange, #F47920); padding: 8px 12px; border-radius: 6px; }