/* Inventory page: search + category tabs on top, item list on the left, item record with check-out/receive on the right. */

/* Category tabs: on the band, with the selected tab opening onto the page like a folder tab */
.tabs {
   display: flex;
   gap: 2px;
   overflow-x: auto;
   scrollbar-width: none;
}
.tab {
   border: 0;
   background: none;
   padding: 10px 14px 11px;
   border-radius: 8px 8px 0 0;
   font-weight: 600;
   color: color-mix(in srgb, var(--bar-fg) 78%, transparent);
   cursor: pointer;
   white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 6px;
}
.tab:hover {
   color: var(--bar-fg);
   background: color-mix(in srgb, var(--bar-fg) 10%, transparent);
}
.tab[aria-selected="true"] {
   color: var(--fg);
   background: var(--bg);
}
.tab .n {
   font-family: var(--font-mono);
   font-size: 11px;
   background: color-mix(in srgb, var(--bar-fg) 16%, transparent);
   border-radius: 99px;
   padding: 0 6px;
}
.tab[aria-selected="true"] .n {
   background: var(--surface);
   box-shadow: inset 0 0 0 1px var(--line);
}
.tab.alert .n {
   background: var(--warn-soft);
   box-shadow: none;
   color: var(--warn);
}

/* Stock summary: quiet totals, loud problems */
.stats {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px 20px;
}
.totals {
   margin: 0;
   color: var(--muted);
   font-size: 15px;
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 4px 6px;
}
.totals b {
   font-family: var(--font-display);
   font-size: 24px;
   color: var(--fg);
   font-variant-numeric: tabular-nums;
}
.totals span {
   margin-inline: 6px;
}
.alerts {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}
.alert-tile {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 200px;
   padding: 8px 18px 8px 16px;
   border-radius: 10px;
   border: 1px solid;
   text-align: left;
   cursor: pointer;
   transition: background 0.15s;
}
.alert-tile b {
   font-family: var(--font-display);
   font-size: 40px;
   line-height: 1;
   font-variant-numeric: tabular-nums;
}
.alert-tile span {
   display: flex;
   flex-direction: column;
   font-weight: 700;
   font-size: 15px;
}
.alert-tile small {
   font-weight: 500;
   font-size: 12px;
   color: var(--muted);
}
.alert-tile.bad {
   background: var(--bad-soft);
   border-color: color-mix(in srgb, var(--bad) 30%, transparent);
   color: var(--bad);
}
.alert-tile.bad:hover {
   background: color-mix(in srgb, var(--bad) 14%, var(--bad-soft));
}
.alert-tile.warn {
   background: var(--warn-soft);
   border-color: color-mix(in srgb, var(--warn) 30%, transparent);
   color: var(--warn);
}
.alert-tile.warn:hover {
   background: color-mix(in srgb, var(--warn) 14%, var(--warn-soft));
}
.all-stocked {
   margin: 0;
   padding: 8px 14px;
   border-radius: 99px;
   background: var(--ok-soft);
   color: var(--ok);
   font-weight: 600;
   font-size: 13px;
}
@media (max-width: 700px) {
   .alerts {
      width: 100%;
   }
   .alert-tile {
      flex: 1 1 0;
      min-width: 0;
   }
   .alert-tile b {
      font-size: 32px;
   }
}

/* Two-column layout */
.grid {
   display: grid;
   grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
   gap: 16px;
   align-items: start;
}
@media (max-width: 900px) {
   .grid {
      grid-template-columns: minmax(0, 1fr);
   }
}

/* Item list */
.results {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden;
}
.results-head {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 8px;
   padding: 10px 14px;
   border-bottom: 1px solid var(--line);
   background: var(--surface-2);
   font-size: 12px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.06em;
}
.list {
   list-style: none;
   margin: 0;
   padding: 0;
   max-height: 70vh;
   overflow-y: auto;
}
@media (max-width: 900px) {
   .list {
      max-height: 44vh;
   }
}
.row {
   display: grid;
   grid-template-columns: 42px minmax(0, 1fr) auto;
   gap: 12px;
   align-items: center;
   width: 100%;
   text-align: left;
   background: none;
   border: 0;
   border-bottom: 1px solid var(--line);
   padding: 10px 14px;
   cursor: pointer;
}
.row:hover {
   background: var(--surface-2);
}
.row[aria-current="true"] {
   background: var(--accent-soft);
   box-shadow: inset 3px 0 0 var(--accent);
}
.thumb {
   width: 42px;
   height: 42px;
   border-radius: 6px;
   overflow: hidden;
   background: var(--surface-2);
   border: 1px solid var(--line);
   display: grid;
   place-items: center;
   color: var(--muted);
}
.row-name {
   display: block;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.row-meta {
   display: block;
   font-size: 12px;
   color: var(--muted);
   font-family: var(--font-mono);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.row-meta mark {
   background: var(--warn-soft);
   color: inherit;
   border-radius: 2px;
}
.qty {
   text-align: right;
}
.qty b {
   display: block;
   font-family: var(--font-mono);
   font-size: 18px;
   font-variant-numeric: tabular-nums;
}

/* Item detail */
.detail {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 8px;
   min-width: 0;
}
.d-top {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}
@media (max-width: 1080px) {
   .d-top {
      grid-template-columns: minmax(0, 1fr);
   }
}
.d-left {
   padding: 20px;
   border-right: 1px solid var(--line);
   display: flex;
   flex-direction: column;
   gap: 16px;
   min-width: 0;
}
@media (max-width: 1080px) {
   .d-left {
      border-right: 0;
      border-bottom: 1px solid var(--line);
   }
}
.d-right {
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 20px;
   min-width: 0;
}
.d-head {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   align-items: start;
}
.d-cat {
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--muted);
}
.d-name {
   font-family: var(--font-display);
   font-size: 27px;
   line-height: 1.1;
   margin: 2px 0 0;
   text-wrap: balance;
   overflow-wrap: anywhere;
}
.hero {
   position: relative;
   aspect-ratio: 16 / 9;
   max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
   background: var(--surface-2);
   border: 1px solid var(--line);
   display: grid;
   place-items: center;
   color: var(--muted);
}
.thumb.photo,
.hero.photo {
   background: var(--photo-bg);
}
.thumb img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
   padding: 2px;
}
/* Pinned to the frame so tall or wide photos are always shown whole and centered. */
.hero img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   display: block;
   padding: 14px;
}
.photo-btn {
   position: absolute;
   right: 8px;
   bottom: 8px;
   font-size: 12px;
   padding: 5px 10px;
   background: var(--surface);
}
.codes {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   gap: 6px 14px;
   margin: 0;
   font-size: 13px;
}
.codes dt {
   color: var(--muted);
}
.codes dd {
   margin: 0;
   min-width: 0;
   overflow-wrap: anywhere;
}
.codes dd.mono {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
}
.copy {
   border: 1px solid var(--line);
   background: var(--surface-2);
   border-radius: 4px;
   font-size: 11px;
   padding: 1px 6px;
   cursor: pointer;
   color: var(--muted);
   font-family: var(--font-body);
}
@media (pointer: coarse) {
   .copy {
      padding: 5px 10px;
      font-size: 12px;
   }
}

/* Availability */
.avail {
   display: flex;
   align-items: center;
   gap: 14px;
   border: 2px solid var(--fg);
   border-radius: 6px;
   padding: 14px 16px;
}
.avail.zero {
   border-color: var(--bad);
}
.avail .ico {
   flex: none;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: var(--ok);
}
.avail.low .ico {
   background: var(--warn);
}
.avail.zero .ico {
   background: var(--bad);
}
.avail-num {
   font-family: var(--font-mono);
   font-size: 30px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
}
.avail-txt {
   font-weight: 600;
}
.subbox {
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 10px 16px;
   margin-top: 8px;
   display: flex;
   justify-content: space-between;
   gap: 8px;
   flex-wrap: wrap;
   font-size: 13px;
}
.subbox .muted {
   color: var(--muted);
}

/* Update stock (Check out / Receive / Set count) */
.actions {
   border: 1px solid var(--line);
   border-radius: 8px;
   overflow: hidden;
}
.act-form {
   padding: 14px;
   display: grid;
   grid-template-columns: 110px minmax(0, 1fr);
   gap: 10px;
   align-items: end;
}
.act-form .full {
   grid-column: 1 / -1;
}
@media (max-width: 480px) {
   .act-form {
      grid-template-columns: minmax(0, 1fr);
   }
}