/*
 * Stockwell Inventory — module-specific styles.
 *
 * All classes namespaced .inv- to prevent collision with other modules
 * that share the same brand.css.
 *
 * Mobile-first: base styles are mobile; @media (min-width: 768px) adds
 * desktop adaptations. Always test mobile first.
 */

/* ─────────────────── App shell layout ─────────────────────────── */

.inv-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  /* Reserve space at the bottom for the mobile bottom nav (which is
     position: fixed). Desktop sidebar makes this a no-op via media query. */
  padding-bottom: var(--bottom-nav-height);
}

@media (min-width: 768px) {
  .inv-shell {
    padding-bottom: 0;
    flex-direction: row;
  }
}

.inv-main {
  flex: 1;
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .inv-main { padding: var(--space-6); }
}

/* ─────────────────── Header (page title + actions) ────────────── */

.inv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.inv-header__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .inv-header__title { font-size: var(--fs-2xl); }
}

.inv-header__actions {
  display: flex;
  gap: var(--space-2);
}

/* ─────────────────── Buttons ──────────────────────────────────── */

.inv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: background var(--duration-quick) var(--easing-standard),
              box-shadow var(--duration-quick) var(--easing-standard);
}

.inv-btn--primary {
  background: var(--color-coffee);
  color: var(--color-canvas);
}
.inv-btn--primary:hover { background: #1f1909; }
.inv-btn--primary:active { transform: translateY(1px); }

.inv-btn--secondary {
  background: var(--color-oat);
  color: var(--color-coffee);
}
.inv-btn--secondary:hover { background: #e3d4c8; }

.inv-btn--ghost {
  background: transparent;
  color: var(--color-fg);
}
.inv-btn--ghost:hover { background: rgba(40, 32, 14, 0.05); }

.inv-btn--small {
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--fs-xs);
}

/* ─────────────────── KPI strip ────────────────────────────────── */

.inv-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
  .inv-kpis { grid-template-columns: repeat(4, 1fr); }
}

.inv-kpi {
  background: white;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-coffee);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.inv-kpi--critical { border-left-color: var(--color-cherry); }
.inv-kpi--watch    { border-left-color: var(--color-sunshine); }
.inv-kpi--ok       { border-left-color: var(--color-seaglass); }

.inv-kpi__value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-fg);
}

@media (min-width: 768px) {
  .inv-kpi__value { font-size: var(--fs-3xl); }
}

.inv-kpi__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─────────────────── Alert bands ──────────────────────────────── */

.inv-alert {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  border-left: 4px solid;
}

.inv-alert--critical {
  background: var(--status-critical-bg);
  border-left-color: var(--status-critical-fg);
  color: var(--color-fg);
}
.inv-alert--watch {
  background: var(--status-watch-bg);
  border-left-color: var(--status-watch-fg);
}
.inv-alert--info {
  background: var(--color-seaglass-subtle);
  border-left-color: var(--color-seaglass);
}

.inv-alert__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.inv-alert__title-icon { display: inline-block; margin-right: var(--space-2); }

.inv-alert__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: white;
  border-radius: var(--radius-md);
}

@media (min-width: 768px) {
  .inv-alert__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.inv-alert__row-text { flex: 1; min-width: 0; }
.inv-alert__row-actions { display: flex; gap: var(--space-2); }

/* ─────────────────── Items table ──────────────────────────────── */

.inv-section {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.inv-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.inv-section__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.inv-table th,
.inv-table td {
  padding: var(--space-3) var(--space-2);
  text-align: left;
  border-bottom: 1px solid var(--color-border-muted);
}

.inv-table th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inv-table tr:last-child td { border-bottom: none; }

.inv-table__num { text-align: right; font-variant-numeric: tabular-nums; }

/* On mobile, the table stacks each row into a card. */
@media (max-width: 767px) {
  .inv-table { display: block; }
  .inv-table thead { display: none; }
  .inv-table tbody, .inv-table tr, .inv-table td { display: block; width: 100%; }
  .inv-table tr {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-muted);
  }
  .inv-table td {
    border: 0;
    padding: var(--space-1) 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
  }
  .inv-table td::before {
    content: attr(data-label);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .inv-table td.inv-table__name {
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-2);
  }
  .inv-table td.inv-table__name::before { display: none; }
}

/* ─────────────────── Status pill ──────────────────────────────── */

.inv-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}

.inv-pill--ok       { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.inv-pill--watch    { background: var(--status-watch-bg); color: var(--status-watch-fg); }
.inv-pill--short    { background: var(--status-short-bg); color: var(--status-short-fg); }
.inv-pill--critical { background: var(--status-critical-bg); color: var(--status-critical-fg); }

/* ─────────────────── Bottom nav (mobile only) ─────────────────── */

.inv-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background: white;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  z-index: 100;
  /* Respect iOS home indicator */
  padding-bottom: env(safe-area-inset-bottom);
}

.inv-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--color-fg-muted);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  min-height: var(--tap-target-min);
}

.inv-bottom-nav__item[aria-current="page"] { color: var(--color-coffee); }

.inv-bottom-nav__icon { font-size: 20px; line-height: 1; }

@media (min-width: 768px) {
  .inv-bottom-nav { display: none; }
}

/* ─────────────────── Drawer (slide-up on mobile, side panel on desktop) ── */

.inv-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(40, 32, 14, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--easing-standard);
  z-index: 200;
}

.inv-drawer {
  position: fixed;
  z-index: 201;
  background: var(--color-canvas);
  display: flex;
  flex-direction: column;
  /* Mobile: slide up from bottom, full-screen */
  inset: 0;
  transform: translateY(100%);
  transition: transform var(--duration-normal) var(--easing-decelerate);
}

@media (min-width: 768px) {
  /* Desktop: slide in from right, 480px wide */
  .inv-drawer {
    inset: 0 0 0 auto;
    width: 480px;
    transform: translateX(100%);
  }
}

.inv-drawer[aria-hidden="false"] { transform: translateY(0); }
@media (min-width: 768px) {
  .inv-drawer[aria-hidden="false"] { transform: translateX(0); }
}

.inv-drawer-backdrop[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.inv-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: white;
}

.inv-drawer__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.inv-drawer__close {
  min-width: var(--tap-target-min);
  min-height: var(--tap-target-min);
  font-size: 24px;
  color: var(--color-fg-muted);
}

.inv-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  -webkit-overflow-scrolling: touch;
}

.inv-drawer__footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  background: white;
  display: flex;
  gap: var(--space-3);
  /* Sticky bottom action bar — primary action always reachable by thumb on mobile */
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
}

/* ─────────────────── Form controls ────────────────────────────── */

.inv-input {
  width: 100%;
  min-height: var(--tap-target-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: white;
  font-size: var(--fs-md);  /* 16px to prevent iOS zoom on focus */
  color: var(--color-fg);
}

.inv-input:focus {
  border-color: var(--color-seaglass);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-seaglass-subtle);
}

.inv-input--num { text-align: right; font-variant-numeric: tabular-nums; }

.inv-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

/* ─────────────────── Empty state ──────────────────────────────── */

.inv-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-fg-muted);
}

.inv-empty__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-fg);
  margin-bottom: var(--space-2);
}

/* ─────────────────── Skeleton loader ──────────────────────────── */

.inv-skeleton {
  background: linear-gradient(90deg,
    rgba(40, 32, 14, 0.05) 0%,
    rgba(40, 32, 14, 0.10) 50%,
    rgba(40, 32, 14, 0.05) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: inv-shimmer 1.4s linear infinite;
}

@keyframes inv-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .inv-skeleton { animation: none; }
}

/* ─────────────────── Count drawer ──────────────────────────────── */

.inv-count__sync {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-fg-muted);
  margin-left: var(--space-2);
}
.inv-count__sync[data-state="saving"]  { color: var(--color-fg-muted); }
.inv-count__sync[data-state="saved"]   { color: var(--color-seaglass); }
.inv-count__sync[data-state="offline"] { color: var(--color-sunshine); }
.inv-count__sync[data-state="error"]   { color: var(--color-cherry); }

.inv-count__progress {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  margin: 0 0 var(--space-3) 0;
}

.inv-count__entries {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.inv-count__entry {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-muted);
  transition: border-color var(--duration-quick) var(--easing-standard);
}

.inv-count__entry:focus-within {
  border-color: var(--color-seaglass);
  box-shadow: 0 0 0 3px var(--color-seaglass-subtle);
}

.inv-count__entry--filled { background: var(--color-oat); }

.inv-count__entry-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.inv-count__entry-location {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-semibold);
}

.inv-count__entry-prior {
  font-size: var(--fs-xs);
  color: var(--color-fg-faint);
}

.inv-count__entry-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
}

/* ─────────────────── Anomaly review row ────────────────────────── */

.inv-count__review-intro {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  margin: 0 0 var(--space-3) 0;
}

.inv-anomaly {
  background: white;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-sunshine);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.inv-anomaly--severe { border-left-color: var(--color-cherry); }

.inv-anomaly__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.inv-anomaly__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.inv-anomaly__variance {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-cherry);
}
.inv-anomaly__variance--mild { color: var(--color-sunshine); }

.inv-anomaly__detail {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-3);
}
.inv-anomaly__detail strong { color: var(--color-fg); }

.inv-anomaly__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ─────────────────── Count view switching ─────────────────────── */

.inv-count-view[hidden] { display: none; }


/* ─────────────────── Generic form layout (shared by quick-edit + transfer) ── */

.inv-form__field {
  display: block;
  margin-bottom: var(--space-4);
}

.inv-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.inv-form__hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
}

.inv-form__intro {
  margin: 0 0 var(--space-4) 0;
}

.inv-form__error {
  margin: var(--space-3) 0 0 0;
  padding: var(--space-3);
  background: var(--status-critical-bg);
  border-left: 3px solid var(--status-critical-fg);
  border-radius: var(--radius-md);
  color: var(--status-critical-fg);
  font-size: var(--fs-sm);
}

/* Native select gets the same look as inv-input */
select.inv-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2328200E' opacity='0.6' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: 32px;
}

/* ─────────────────── Toggle (checkbox + label combo) ─────────────── */

.inv-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  min-height: var(--tap-target-min);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.inv-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-seaglass);
  cursor: pointer;
}

/* ─────────────────── Quick Edit per-location row ─────────────────── */

.inv-quickedit__loc {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-muted);
  margin-bottom: var(--space-2);
}

.inv-quickedit__loc-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inv-quickedit__loc-name {
  font-weight: var(--fw-semibold);
}

.inv-quickedit__loc-prior {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
}

.inv-quickedit__notes-wrap {
  display: block;
  margin-top: var(--space-4);
}


/* ─────────────────── Order list (dashboard section) ────────────── */

.inv-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.inv-order-list__item { display: block; }

.inv-order-list__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: white;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-quick) var(--easing-standard),
              box-shadow var(--duration-quick) var(--easing-standard);
  min-height: var(--tap-target-min);
}

.inv-order-list__btn:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.inv-order-list__main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.inv-order-list__cost {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─────────────────── Order drawer — line cards ────────────────── */

.inv-order-line {
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-muted);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.inv-order-line__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.inv-order-line__item {
  font-weight: var(--fw-semibold);
  margin: 0;
}

.inv-order-line__vendor {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
}

.inv-order-line__qty {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}

.inv-order-line__cost {
  font-weight: var(--fw-bold);
  color: var(--color-seaglass);
  font-variant-numeric: tabular-nums;
}

.inv-order-line__detail {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  margin: var(--space-2) 0;
}

/* Receipt-form rows: per-location split inputs */

.inv-order-receive {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-oat);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

.inv-order-receive__row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: var(--space-3);
  align-items: center;
}

.inv-order-receive__row-label {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
}

.inv-order-receive__sum {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.inv-order-receive__sum--mismatch {
  color: var(--color-cherry);
  font-weight: var(--fw-semibold);
}

/* Order summary card at the top of the suggest pane */

.inv-order-summary {
  background: var(--color-seaglass-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.inv-order-summary__label {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-semibold);
}

.inv-order-summary__value {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}


/* ─────────────────── Auth pages (login, accept-invite) ────────────── */

.inv-auth-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--color-canvas);
  padding: var(--space-5) var(--space-4);
}

.inv-auth-shell {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.inv-auth-brand {
  text-align: center;
  margin: var(--space-6) 0 var(--space-5) 0;
}

.inv-auth-brand__name {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-coffee);
  margin: 0;
  letter-spacing: -0.02em;
}

.inv-auth-brand__sub {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  margin: var(--space-1) 0 0 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.inv-auth-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
}

.inv-auth-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4) 0;
}

.inv-auth-form { display: flex; flex-direction: column; }

.inv-auth-form__submit {
  width: 100%;
  margin-top: var(--space-2);
}

/* Visual divider between password form and Google button */
.inv-auth-or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--color-fg-faint);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-semibold);
}

.inv-auth-or::before,
.inv-auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-muted);
}

.inv-auth-google {
  width: 100%;
  background: white;
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  font-weight: var(--fw-medium);
}

.inv-auth-google:hover {
  background: var(--color-oat);
}

.inv-auth-google svg { display: inline-block; }

.inv-auth-hint {
  text-align: center;
  margin: var(--space-4) 0 var(--space-2) 0;
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
}


/* ─────────────────── Account drawer ─────────────────────────────── */

.inv-account-section {
  margin-bottom: var(--space-5);
}

.inv-account-section__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-2) 0;
}

.inv-account-self {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  border: 1px solid var(--color-border-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.inv-account-self div { display: flex; align-items: center; gap: var(--space-2); }

.inv-account-team {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.inv-account-member {
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-muted);
  padding: var(--space-3);
}

.inv-account-member--removed { opacity: 0.55; }

.inv-account-member__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.inv-account-member__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.inv-account-member__name {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
}

.inv-account-member__you {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  font-style: italic;
}

.inv-account-member__meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}

.inv-account-member__methods {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  display: inline-flex;
  gap: var(--space-1);
}

.inv-account-member__role {
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
  margin: 0;
}

.inv-account-member__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-muted);
}

/* Smaller select for inline role-change in the team row */
.inv-input--small {
  min-height: 36px;
  padding: 0 var(--space-2);
  font-size: var(--fs-sm);
  width: auto;
}

.inv-account-invite-form {
  display: flex;
  flex-direction: column;
}

.inv-account-invite-result {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-seaglass-subtle);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-seaglass);
}

.inv-account-invite-link {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  margin: var(--space-2) 0;
}

.inv-account-invite-link .inv-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}


/* ─── Admin pages ─────────────────────────────────────────────── */

.inv-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.inv-admin-card {
  display: block;
  padding: 1.25rem;
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #e6dfd9);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms, transform 120ms;
}
.inv-admin-card:hover {
  border-color: var(--color-coffee, #28200E);
  transform: translateY(-1px);
}
.inv-admin-card--stub {
  opacity: 0.5;
  cursor: not-allowed;
}
.inv-admin-card--stub:hover { transform: none; border-color: var(--color-border, #e6dfd9); }
.inv-admin-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.inv-admin-card__title {
  font-size: var(--fs-lg, 1.125rem);
  margin: 0;
}
.inv-admin-card__count {
  font-size: var(--fs-xl, 1.5rem);
  font-weight: 600;
  color: var(--color-coffee, #28200E);
  font-variant-numeric: tabular-nums;
}
.inv-admin-card__desc {
  margin: 0 0 0.5rem;
  color: var(--color-fg-muted, #6b6360);
  font-size: var(--fs-sm, 0.875rem);
}
.inv-admin-card__meta {
  margin: 0;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-fg-muted, #6b6360);
}

/* ─── Status filter tabs ──────────────────────────────────────── */
.inv-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border, #e6dfd9);
  margin-bottom: 1rem;
}
.inv-tab {
  padding: 0.5rem 0.875rem;
  text-decoration: none;
  color: var(--color-fg-muted, #6b6360);
  border-bottom: 2px solid transparent;
  font-size: var(--fs-sm, 0.875rem);
  margin-bottom: -1px;
}
.inv-tab--active {
  color: var(--color-coffee, #28200E);
  border-bottom-color: var(--color-coffee, #28200E);
  font-weight: 600;
}

/* ─── Bulk action bar ────────────────────────────────────────── */
.inv-bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-oat, #EEE2D9);
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: var(--fs-sm, 0.875rem);
  flex-wrap: wrap;
}
.inv-bulk-bar__count {
  font-weight: 600;
  color: var(--color-coffee, #28200E);
  font-variant-numeric: tabular-nums;
}
.inv-bulk-bar__actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
  flex-wrap: wrap;
  align-items: center;
}

/* ─── Category create row ────────────────────────────────────── */
.inv-cat-create {
  display: grid;
  grid-template-columns: 2fr 1fr 0.5fr auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem;
  background: var(--color-oat, #EEE2D9);
  border-radius: 8px;
  margin-bottom: 1rem;
}
@media (max-width: 600px) {
  .inv-cat-create { grid-template-columns: 1fr; }
}

/* The HTML `hidden` attribute should always win over flex/grid display
   rules — without this, anything with display:grid|flex stays visible. */
[hidden] { display: none !important; }

/* ─── Compact urgent-items strip (replaces the big alert section) ── */
.inv-urgent-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: #fde7e7;
  border-left: 3px solid var(--color-cherry, #E8581B);
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: var(--fs-sm, 0.875rem);
}
.inv-urgent-strip__icon {
  font-size: 1.1rem;
}

/* ─── Item card grid ───────────────────────────────────────── */
.inv-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
.inv-item-card {
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #e6dfd9);
  border-left: 4px solid var(--color-border, #e6dfd9);
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 120ms;
}
.inv-item-card:hover {
  border-color: var(--color-coffee, #28200E);
}
.inv-item-card--ok        { border-left-color: var(--color-seaglass, #006976); }
.inv-item-card--watch     { border-left-color: var(--color-sunshine, #F2A408); }
.inv-item-card--short     { border-left-color: var(--color-terracotta, #9F543F); }
.inv-item-card--critical  { border-left-color: var(--color-cherry, #E8581B); background: #fff8f6; }
.inv-item-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.inv-item-card__name {
  margin: 0;
  font-size: var(--fs-md, 1rem);
  line-height: 1.2;
}
.inv-item-card__meta {
  margin: 0.15rem 0 0;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-fg-muted, #6b6360);
}
.inv-item-card__locs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-border, #e6dfd9);
}
.inv-item-card__loc {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.25rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
}
.inv-item-card__loc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
}
.inv-item-card__loc-name {
  font-size: var(--fs-xs, 0.7rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-fg-muted, #6b6360);
  font-weight: 600;
}
.inv-item-card__loc-edit {
  background: transparent;
  border: none;
  padding: 2px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 0;
  color: var(--color-cherry);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 100ms, background 100ms;
}
.inv-item-card__loc-edit svg {
  display: block;
  /* SVG drawn horizontal (tip-left); rotated so the tip points
     down-left toward the qty number that sits below+left of the button. */
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
}
.inv-item-card__loc-edit:hover {
  background: rgba(232, 88, 27, 0.10);
  transform: rotate(-8deg);
}
.inv-item-card__loc-qty {
  font-size: var(--fs-md, 1rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.inv-item-card__loc-days {
  font-size: var(--fs-xs, 0.7rem);
  color: var(--color-fg-muted, #6b6360);
}
.inv-item-card__loc-runout {
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.inv-item-card__loc-runout--ok {
  color: var(--color-seaglass, #006976);
}
.inv-item-card__loc-runout--soon {
  color: var(--color-cherry, #E8581B);
}
.inv-item-card__loc-runout--unknown {
  color: var(--color-fg-muted, #6b6360);
  font-weight: 400;
  font-style: italic;
}
.inv-item-card__actions {
  display: flex;
  gap: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--color-border, #e6dfd9);
}
.inv-item-card__actions .inv-btn {
  flex: 1;
  font-size: var(--fs-xs, 0.75rem);
}

/* On wider screens, fit more cards per row */
@media (min-width: 1100px) {
  .inv-item-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
/* Phones: single column for max readability — "containers" never crowds */
@media (max-width: 540px) {
  .inv-item-grid { grid-template-columns: 1fr; }
}

/* ─── Suggested orders ───────────────────────────────────────
   Per-vendor cards. Same visual language as the item cards above:
   colored left rail = urgency, lines stacked inside. */
.inv-suggest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.75rem;
}
.inv-suggest-card {
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #e6dfd9);
  border-left: 4px solid var(--color-border, #e6dfd9);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.inv-suggest-card--ok        { border-left-color: var(--color-seaglass, #006976); }
.inv-suggest-card--watch     { border-left-color: var(--color-sunshine, #F2A408); }
.inv-suggest-card--short     { border-left-color: var(--color-terracotta, #9F543F); }
.inv-suggest-card--critical  { border-left-color: var(--color-cherry, #E8581B); background: #fff8f6; }
.inv-suggest-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border, #e6dfd9);
}
.inv-suggest-card__vendor {
  margin: 0;
  font-size: var(--fs-md, 1rem);
  line-height: 1.2;
}
.inv-suggest-card__deadline {
  margin: 0.2rem 0 0;
  font-size: var(--fs-sm, 0.875rem);
}
.inv-suggest-card__overdue {
  color: var(--color-cherry, #E8581B);
  font-weight: 600;
  margin-left: 0.25rem;
}
.inv-suggest-card__inline-muted {
  color: var(--color-fg-muted, #6b6360);
  font-size: var(--fs-xs, 0.75rem);
  margin-left: 0.25rem;
}
.inv-suggest-card__delivery {
  margin: 0.2rem 0 0;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-fg-muted, #6b6360);
}
.inv-suggest-card__total {
  font-size: var(--fs-lg, 1.125rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.inv-suggest-card__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.inv-suggest-card__line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--fs-sm, 0.875rem);
}
.inv-suggest-card__line-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.inv-suggest-card__line-meta {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-fg-muted, #6b6360);
}
/* "Or transfer N from X → Y" inline alternative.
   Looks like a chip; clicking opens the transfer drawer pre-filled. */
.inv-suggest-card__line-alt {
  align-self: flex-start;
  margin-top: 0.3rem;
  background: var(--color-oat, #EEE2D9);
  color: var(--color-coffee, #28200E);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
  transition: background 100ms, border-color 100ms;
}
.inv-suggest-card__line-alt:hover {
  background: #e3d2c2;
  border-color: var(--color-seaglass, #006976);
}
.inv-suggest-card__line-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}
.inv-suggest-card__line-cost {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.inv-suggest-card__line-runway {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-fg-muted, #6b6360);
}
.inv-section__subtitle {
  margin: 0 0 0.75rem;
  font-size: var(--fs-md, 1rem);
  color: var(--color-fg-muted, #6b6360);
  font-weight: 600;
}

/* ─── Count drawer: location picker ──────────────────────────── */
.inv-count__location-picker {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}
.inv-count__location-btn {
  padding: 1.25rem;
  font-size: var(--fs-lg, 1.125rem);
  text-align: left;
}

/* ─── Item edit drawer: per-location rows ──────────────────── */
.inv-form__fieldset {
  border: 1px solid var(--color-border, #e6dfd9);
  border-radius: 8px;
  padding: 0.75rem 1rem 1rem;
  margin: 0.75rem 0;
}
.inv-form__fieldset legend {
  font-weight: 600;
  padding: 0 0.5rem;
}
.inv-form__hint {
  margin: 0 0 0.75rem;
  color: var(--color-fg-muted, #6b6360);
  font-size: var(--fs-xs, 0.75rem);
}
.inv-loc-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  align-items: end;
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-border, #e6dfd9);
}
.inv-loc-row:first-of-type { border-top: none; }
.inv-loc-row__check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}
.inv-loc-row__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-fg-muted, #6b6360);
}
@media (max-width: 600px) {
  .inv-loc-row { grid-template-columns: 1fr; }
}

/* ─── Account drawer: profile / password panels ───────────────── */
.inv-account-self__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.inv-account-self__panel {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--color-oat, #EEE2D9);
  border-radius: 8px;
}
.inv-notif-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-border, #e6dfd9);
}
.inv-notif-row:first-child { border-top: none; }
.inv-notif-row__label { display: flex; flex-direction: column; gap: 0.1rem; }
.inv-notif-row__cb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm, 0.875rem);
}
@media (max-width: 600px) {
  .inv-notif-row { grid-template-columns: 1fr 1fr 1fr; }
}

/* ─── Vendor SKU create row ──────────────────────────────────── */
.inv-sku-create {
  display: grid;
  grid-template-columns: 2fr 2fr 0.6fr 0.6fr 0.8fr 0.7fr auto auto auto;
  gap: 0.5rem;
  align-items: end;
  padding: 0.75rem;
  background: var(--color-oat, #EEE2D9);
  border-radius: 8px;
  margin-bottom: 1rem;
}
@media (max-width: 900px) {
  .inv-sku-create { grid-template-columns: 1fr 1fr; }
}

/* ─── Table extras for admin ─────────────────────────────────── */
.inv-table__check {
  width: 2rem;
  text-align: center;
}
.inv-table__check input {
  width: 1.1rem;
  height: 1.1rem;
}
.inv-table__sub {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-fg-muted, #6b6360);
  margin-top: 0.25rem;
}
.inv-input--small {
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-sm, 0.875rem);
}

/* ─── Reports page ──────────────────────────────────────────── */
.inv-table-wrap {
  overflow-x: auto;
  width: 100%;
}
.inv-text--cherry { color: var(--color-cherry, #E8581B); }
.inv-text--seaglass { color: var(--color-seaglass, #006976); }

.inv-reports-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 900px) {
  .inv-reports-grid { grid-template-columns: 1fr 1fr; }
}

/* Bar chart — no JS, pure CSS rows. */
.inv-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.inv-bar-chart__row {
  display: grid;
  grid-template-columns: 80px 1fr 130px;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm, 0.875rem);
}
.inv-bar-chart__label {
  color: var(--color-fg-muted, #6b6360);
  font-variant-numeric: tabular-nums;
}
.inv-bar-chart__track {
  background: var(--color-oat, #EEE2D9);
  border-radius: 4px;
  height: 18px;
  overflow: hidden;
}
.inv-bar-chart__bar {
  background: var(--color-seaglass, #006976);
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  transition: width 200ms;
}
.inv-bar-chart__value {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.inv-bar-chart__value small {
  font-weight: 400;
  color: var(--color-fg-muted, #6b6360);
  margin-left: 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────
   ──────────────  TRAPPER-KEEPER / STICKER POP RESTYLE  ─────────
   Comic-book offset shadows, slightly rotated stickers, paper +
   solid color pop cards. Matches Front Desk Hub mockup-3 + Instructor
   App. These rules INTENTIONALLY override the earlier flat styles
   above — they share class names with existing markup so we don't
   need template-wide refactors.
   ───────────────────────────────────────────────────────────────── */

/* Page background — beige + radial brand glows.
   Tokens lifted verbatim from buyouts-dashboard so all three apps in
   the TSP portal share one visual palette. */
html, body {
  background:
    radial-gradient(circle at top left,  rgba(159, 84, 63, 0.10), transparent 28%),
    radial-gradient(circle at top right, rgba(0, 105, 118, 0.08), transparent 24%),
    linear-gradient(180deg, #f8f2ed 0%, #f4ede7 46%, #efe5dc 100%);
  background-attachment: fixed;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #28200e;
}

/* Eyebrow label — small uppercase terracotta tag above section titles */
.inv-eyebrow {
  display: block;
  font-family: -apple-system, "Work Sans", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 6px;
}

/* Header restyle — left side has eyebrow + h1 stacked, right side has buttons */
.inv-header { align-items: flex-end; flex-wrap: wrap; row-gap: 14px; }
.inv-header__title {
  font-size: 32px;
  font-weight: 700;
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
}
@media (min-width: 768px) {
  .inv-header__title { font-size: 40px; }
}
.inv-header__title .star { color: var(--color-sunshine); }

/* Buttons — paper + comic offset shadow; primary = sunshine + tilt */
.inv-btn {
  font-family: -apple-system, sans-serif;
  font-weight: 700;
  border-radius: 10px;
  border: 2px solid var(--color-coffee);
  padding: 8px 16px;
  background: white;
  color: var(--color-coffee);
  box-shadow: 3px 3px 0 var(--color-coffee);
  transition: transform 100ms, box-shadow 100ms;
}
.inv-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--color-coffee);
}
.inv-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--color-coffee);
}
.inv-btn--primary {
  background: var(--color-sunshine);
  color: var(--color-coffee);
  border-width: 2.5px;
  box-shadow: 4px 4px 0 var(--color-coffee);
  transform: rotate(-1deg);
}
.inv-btn--primary:hover {
  background: var(--color-sunshine);
  transform: rotate(-1deg) translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--color-coffee);
}
.inv-btn--ghost {
  background: white;
  box-shadow: 3px 3px 0 var(--color-coffee);
}
.inv-btn--ghost:hover { background: white; }
.inv-btn--secondary { background: var(--color-oat); }
.inv-btn--secondary:hover { background: var(--color-oat); }
.inv-btn--small { padding: 6px 12px; font-size: 12px; box-shadow: 2px 2px 0 var(--color-coffee); }

/* KPI strip — solid color "pop" cards with offset-pseudo shadow.
   The ::after sits BEHIND the parent (z-index: -1) and is offset
   down-right so only that strip is visible. The parent must NOT have
   its own stacking context (no z-index here), or the ::after gets
   trapped in front of the parent's background. */
.inv-kpis { gap: 22px; margin-bottom: 28px; }
.inv-kpi {
  position: relative;
  background: var(--color-seaglass);
  color: white;
  border: 2.5px solid var(--color-coffee);
  border-left: 2.5px solid var(--color-coffee);  /* override color rail */
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: none;
  font-family: "Playfair Display", Georgia, serif;
}
.inv-kpi::after {
  content: "";
  position: absolute;
  inset: 6px -6px -6px 6px;
  border-radius: 16px;
  background: var(--color-cherry);
  z-index: -1;
}
/* Always-on color variants — each KPI slot gets its own distinct pop color
   so the strip looks like the mockup regardless of count values. */
.inv-kpi--items     { background: var(--color-seaglass);   color: white; }
.inv-kpi--items::after     { background: var(--color-cherry); }
.inv-kpi--critical  { background: var(--color-cherry);     color: white; }
.inv-kpi--critical::after  { background: var(--color-coffee); }
.inv-kpi--transfer  { background: var(--color-sunshine);   color: var(--color-coffee); }
.inv-kpi--transfer::after  { background: var(--color-cherry); }
.inv-kpi--next      { background: var(--color-terracotta); color: white; }
.inv-kpi--next::after      { background: var(--color-sunshine); }
/* Reports-page slots — different palette so it doesn't echo the dashboard */
.inv-kpi--money     { background: var(--color-seaglass);   color: white; }
.inv-kpi--money::after     { background: var(--color-sunshine); }
.inv-kpi--projected { background: var(--color-terracotta); color: white; }
.inv-kpi--projected::after { background: var(--color-cherry); }
.inv-kpi--ytd       { background: var(--color-cherry);     color: white; }
.inv-kpi--ytd::after       { background: var(--color-coffee); }
.inv-kpi--commit    { background: var(--color-sunshine);   color: var(--color-coffee); }
.inv-kpi--commit::after    { background: var(--color-terracotta); }
/* Legacy modifiers retained as aliases (for any other templates that use them) */
.inv-kpi--watch { background: var(--color-sunshine); color: var(--color-coffee); }
.inv-kpi--watch::after { background: var(--color-cherry); }
.inv-kpi--ok    { background: var(--color-terracotta); color: white; }
.inv-kpi--ok::after { background: var(--color-sunshine); }

.inv-kpi__value {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.05;
  margin: 4px 0 6px;
  color: inherit;
}
@media (min-width: 768px) { .inv-kpi__value { font-size: 48px; } }
.inv-kpi__label {
  font-family: -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
  color: inherit;
}

/* Sticker badge pin — sits on the KPI / vendor card top-right corner */
.inv-sticker {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: white;
  color: var(--color-coffee);
  border: 2.5px solid var(--color-coffee);
  display: grid;
  place-items: center;
  font-size: 22px;
  box-shadow: 2px 2px 0 var(--color-coffee);
  transform: rotate(8deg);
  z-index: 2;
}

/* Section headers — bigger, bolder, with star/sparkle accent */
.inv-section__title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.inv-section__title .star { color: var(--color-sunshine); }
.inv-section__subtitle { font-family: "Playfair Display", Georgia, serif; }

/* Item cards — paper with comic offset shadow colored by status */
.inv-item-grid { gap: 18px; }
.inv-item-card {
  background: white;
  border: 2.5px solid var(--color-coffee);
  border-left-width: 2.5px;  /* keep border uniform, color via shadow */
  border-radius: 16px;
  padding: 16px;
  box-shadow: 4px 4px 0 var(--color-seaglass);
  transition: transform 120ms, box-shadow 120ms;
}
.inv-item-card:hover {
  transform: translate(-1px, -1px);
  border-color: var(--color-coffee);
  box-shadow: 5px 5px 0 var(--color-seaglass);
}
.inv-item-card--ok       { box-shadow: 4px 4px 0 var(--color-seaglass); }
.inv-item-card--watch    { box-shadow: 4px 4px 0 var(--color-sunshine); }
.inv-item-card--short    { box-shadow: 4px 4px 0 var(--color-terracotta); }
.inv-item-card--critical { box-shadow: 4px 4px 0 var(--color-cherry); background: #fff8f6; }
.inv-item-card--ok:hover       { box-shadow: 5px 5px 0 var(--color-seaglass); }
.inv-item-card--watch:hover    { box-shadow: 5px 5px 0 var(--color-sunshine); }
.inv-item-card--short:hover    { box-shadow: 5px 5px 0 var(--color-terracotta); }
.inv-item-card--critical:hover { box-shadow: 5px 5px 0 var(--color-cherry); }

.inv-item-card__name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 17px;
  font-weight: 800;
}
.inv-item-card__meta {
  font-family: -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-terracotta);
}

/* Per-location panel — oat tile with dashed top border around the row group */
.inv-item-card__locs {
  border-top: 2px dashed rgba(40, 32, 14, 0.18);
  padding-top: 10px;
  gap: 8px;
}
.inv-item-card__loc {
  background: var(--color-oat);
  border: 1.5px solid var(--color-coffee);
  border-radius: 10px;
  padding: 8px 10px;
}
.inv-item-card--critical .inv-item-card__loc { background: rgba(238, 226, 217, 0.7); }
.inv-item-card__loc-name {
  font-family: -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.inv-item-card__loc-qty {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 4px;
  row-gap: 0;
  min-width: 0;
}
.inv-item-card__loc-qty-num {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.inv-item-card__loc-qty-unit {
  font-family: -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-fg-muted);
  /* Soft-wrap long unit labels (containers/refills) without overflow */
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.inv-item-card__loc-runout {
  font-family: -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.inv-item-card__actions {
  border-top: none;
  padding-top: 10px;
}
.inv-item-card__actions .inv-btn {
  font-size: 12px;
  padding: 6px 10px;
  box-shadow: 2px 2px 0 var(--color-coffee);
}

/* Status pills — rotated stickers with comic shadow */
.inv-pill {
  border: 2px solid var(--color-coffee);
  border-radius: 999px;
  padding: 3px 10px;
  font-family: -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 var(--color-coffee);
  transform: rotate(2deg);
  white-space: nowrap;
  display: inline-block;
}
.inv-pill--ok       { background: var(--color-seaglass); color: white; }
.inv-pill--watch    { background: var(--color-sunshine); color: var(--color-coffee); }
.inv-pill--short    { background: var(--color-terracotta); color: white; }
.inv-pill--critical { background: var(--color-cherry); color: white; }

/* Suggested-order vendor cards — paper with comic shadow + sticker badge */
.inv-suggest-grid { gap: 22px; }
.inv-suggest-card {
  background: white;
  border: 2.5px solid var(--color-coffee);
  border-left-width: 2.5px;  /* uniform border, color via shadow */
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 5px 5px 0 var(--color-seaglass);
  position: relative;
}
.inv-suggest-card--ok       { box-shadow: 5px 5px 0 var(--color-seaglass); }
.inv-suggest-card--watch    { box-shadow: 5px 5px 0 var(--color-sunshine); }
.inv-suggest-card--short    { box-shadow: 5px 5px 0 var(--color-terracotta); }
.inv-suggest-card--critical { box-shadow: 5px 5px 0 var(--color-cherry); background: #fff8f6; }
.inv-suggest-card__vendor {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  font-weight: 800;
}
.inv-suggest-card__deadline {
  font-family: -apple-system, sans-serif;
  font-weight: 700;
}
.inv-suggest-card__deadline strong { font-weight: 800; }
.inv-suggest-card__delivery { font-family: -apple-system, sans-serif; }
.inv-suggest-card__total {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-weight: 800;
}
.inv-suggest-card__header {
  border-bottom: 2px dashed rgba(40, 32, 14, 0.2);
  padding-bottom: 12px;
}
.inv-suggest-card__line {
  border-bottom: 1px dashed rgba(40, 32, 14, 0.15);
  padding-bottom: 10px;
  font-family: -apple-system, sans-serif;
}
.inv-suggest-card__line:last-child { border-bottom: none; }
.inv-suggest-card__line-cost { font-family: "Playfair Display", Georgia, serif; }

/* Transfer-alt chip — sunshine sticker, slightly rotated */
.inv-suggest-card__line-alt {
  background: var(--color-sunshine);
  color: var(--color-coffee);
  border: 2px solid var(--color-coffee);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  font-family: -apple-system, sans-serif;
  box-shadow: 2px 2px 0 var(--color-coffee);
  transform: rotate(-1deg);
}
.inv-suggest-card__line-alt:hover {
  background: var(--color-sunshine);
  transform: rotate(-1deg) translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--color-coffee);
  border-color: var(--color-coffee);
}

/* Reports bar chart — bars get coffee border + offset shadow */
.inv-bar-chart__bar {
  background: var(--color-seaglass);
  border: 2px solid var(--color-coffee);
  box-shadow: 2px 2px 0 var(--color-coffee);
  border-radius: 6px;
}

/* Tables — slightly bolder header */
.inv-table th {
  font-family: -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Drawer titles match the rest */
.inv-drawer__title { font-family: "Playfair Display", Georgia, serif; font-weight: 800; }

/* Section wrapper used in templates — just rhythm spacing, no chrome */
.inv-section { margin-bottom: 28px; }

/* ─── Past counts: collapsed session rows ─────────────────────
   Each <details> is one counting session (or a single adjustment).
   Native disclosure widget — no JS required. */
.inv-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inv-history-session {
  background: white;
  border: 2px solid var(--color-coffee);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--color-seaglass);
  overflow: hidden;
  transition: box-shadow 120ms;
}
.inv-history-session--adjustment { box-shadow: 3px 3px 0 var(--color-sunshine); }
.inv-history-session[open] { box-shadow: 4px 4px 0 var(--color-coffee); }

/* Row layout — uses CSS grid to keep columns aligned across rows */
.inv-history-session__row {
  display: grid;
  grid-template-columns: 110px 130px 110px 1fr 160px 24px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  font-family: -apple-system, sans-serif;
  font-size: 13px;
}
.inv-history-session__row::-webkit-details-marker { display: none; }
.inv-history-session__row:hover { background: rgba(0, 105, 118, 0.04); }
.inv-history-session__date { font-variant-numeric: tabular-nums; color: var(--color-fg-muted); }
.inv-history-session__loc { font-weight: 800; }
.inv-history-session__pill { /* pill comes from .inv-pill */ }
.inv-history-session__summary { font-family: "Playfair Display", Georgia, serif; font-size: 14px; }
.inv-history-session__summary strong { font-weight: 800; }
.inv-history-session__note {
  color: var(--color-fg-muted);
  font-family: -apple-system, sans-serif;
  font-size: 12px;
}
.inv-history-session__by {
  color: var(--color-fg-muted);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-history-session__chevron {
  color: var(--color-fg-muted);
  font-size: 11px;
  transition: transform 160ms;
  text-align: right;
}
.inv-history-session[open] .inv-history-session__chevron {
  transform: rotate(90deg);
}

/* Expanded body — list of items in the session */
.inv-history-session__body {
  border-top: 2px dashed rgba(40, 32, 14, 0.18);
  padding: 12px 16px 14px;
  background: var(--color-oat);
}
.inv-history-session__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px 18px;
}
.inv-history-session__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(40, 32, 14, 0.12);
  font-family: -apple-system, sans-serif;
  font-size: 13px;
}
.inv-history-session__item-name { font-weight: 700; }
.inv-history-session__item-qty {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.inv-history-session__item-notes {
  grid-column: 1 / -1;
  color: var(--color-fg-muted);
  font-size: 12px;
  font-style: italic;
}

@media (max-width: 900px) {
  .inv-history-session__row {
    grid-template-columns: 90px 1fr 100px 24px;
    grid-template-areas:
      "date loc loc chevron"
      "pill summary by by";
    row-gap: 4px;
  }
  .inv-history-session__date    { grid-area: date; }
  .inv-history-session__loc     { grid-area: loc; }
  .inv-history-session__pill    { grid-area: pill; }
  .inv-history-session__summary { grid-area: summary; }
  .inv-history-session__by      { grid-area: by; text-align: left; }
  .inv-history-session__chevron { grid-area: chevron; }
}
@media (max-width: 540px) {
  .inv-history-session__items { grid-template-columns: 1fr; }
}

/* ─── Unified TSP Management Portal nav ──────────────────────
   Shared across Buyouts, Inventory, and Front Desk Hub. Same
   markup + tokens in all three repos so cross-app jumps feel
   like the same product. */
.tsp-portal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 24px;
  background: var(--color-coffee, #28200E);
  color: var(--color-cream, #FAF5EC);
  border-bottom: 3px solid var(--color-coffee, #28200E);
  font-family: -apple-system, "Work Sans", sans-serif;
}
.tsp-portal-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.tsp-portal-nav__badge {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-sunshine, #F2A408);
  color: var(--color-coffee, #28200E);
  border: 2px solid var(--color-cream, #FAF5EC);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  transform: rotate(-4deg);
}
.tsp-portal-nav__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.tsp-portal-nav__wordmark strong {
  font-family: Georgia, "DM Serif Display", serif;
  font-weight: 800;
  font-size: 16px;
}
.tsp-portal-nav__wordmark em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sunshine, #F2A408);
}
.tsp-portal-nav__list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0; padding: 0;
}
.tsp-portal-nav__item {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 13px;
  color: var(--color-cream, #FAF5EC);
  text-decoration: none;
  transition: background 100ms, border-color 100ms;
}
.tsp-portal-nav__item:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.tsp-portal-nav__item--active {
  background: var(--color-sunshine, #F2A408);
  color: var(--color-coffee, #28200E);
  border-color: var(--color-cream, #FAF5EC);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  transform: rotate(-1deg);
}
.tsp-portal-nav__item--active:hover {
  background: var(--color-sunshine, #F2A408);
  border-color: var(--color-cream, #FAF5EC);
}
@media (max-width: 640px) {
  .tsp-portal-nav { padding: 8px 12px; gap: 8px; }
  .tsp-portal-nav__wordmark em { display: none; }
  .tsp-portal-nav__wordmark strong { font-size: 14px; }
  .tsp-portal-nav__list { gap: 4px; }
  .tsp-portal-nav__item { padding: 5px 10px; font-size: 12px; }
}

/* ─── Members admin: row save flash + invite form ──────────── */
.inv-members-row--saving { opacity: 0.6; }
.inv-members-row--saved {
  background: rgba(0, 105, 118, 0.08);
  transition: background 800ms ease-out;
}
.inv-members-table select { min-width: 180px; }
.inv-members-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  white-space: nowrap;
}
.inv-members-actions .inv-btn { font-size: 11px; padding: 4px 10px; }
.inv-btn--danger {
  color: var(--color-cherry, #E8581B);
  border-color: var(--color-cherry, #E8581B) !important;
  box-shadow: 2px 2px 0 var(--color-cherry, #E8581B) !important;
}
.inv-btn--danger:hover {
  background: rgba(232, 88, 27, 0.08);
}
.inv-members-removed {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  background: rgba(159, 84, 63, 0.04);
  border: 1px dashed rgba(40, 32, 14, 0.2);
  border-radius: 10px;
}
.inv-members-removed > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-fg-muted);
  list-style: none;
}
.inv-members-removed > summary::before { content: "▸ "; transition: transform 200ms; display: inline-block; }
.inv-members-removed[open] > summary::before { content: "▾ "; }

/* ─── Reports: tax export bar ──────────────────────────────── */
.inv-export-bar {
  background: white;
  border: 2px solid var(--color-coffee, #28200E);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 4px 4px 0 var(--color-seaglass, #006976);
}
.inv-export-bar__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ─── Tracking-vs-prediction callout ─────────────────────── */
.inv-tracking-card {
  border: 2.5px solid var(--color-coffee, #28200E);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 5px 5px 0 var(--color-seaglass, #006976);
}
.inv-tracking-card--on_track { box-shadow: 5px 5px 0 var(--color-seaglass, #006976); background: rgba(0, 105, 118, 0.06); }
.inv-tracking-card--under    { box-shadow: 5px 5px 0 var(--color-seaglass, #006976); background: rgba(0, 105, 118, 0.10); }
.inv-tracking-card--over     { box-shadow: 5px 5px 0 var(--color-cherry,   #E8581B); background: rgba(232, 88, 27, 0.06); }
.inv-tracking-card__headline {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  margin: 6px 0 8px;
  letter-spacing: -0.01em;
}
.inv-tracking-card__detail { margin: 0; font-size: 14px; color: var(--color-fg-muted); }

/* ─── Bar chart overlay variant (actual + projected) ──────── */
.inv-bar-chart__track--overlay { position: relative; height: 22px; }
.inv-bar-chart__bar--projected {
  background: var(--color-sunshine, #F2A408);
  border: 2px solid var(--color-coffee, #28200E);
  box-shadow: 2px 2px 0 var(--color-coffee, #28200E);
  border-radius: 6px;
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  opacity: 0.55;
}
.inv-bar-chart__bar--actual {
  background: var(--color-seaglass, #006976);
  border: 2px solid var(--color-coffee, #28200E);
  box-shadow: 2px 2px 0 var(--color-coffee, #28200E);
  border-radius: 6px;
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
}

.inv-members-invite {
  background: white;
  border: 2px solid var(--color-coffee);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 4px 4px 0 var(--color-sunshine);
  margin-bottom: 20px;
}
.inv-members-invite__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.inv-members-invite__actions { display: flex; align-items: end; }
.inv-members-invite__result {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--color-oat);
  border: 1.5px dashed var(--color-coffee);
  border-radius: 10px;
}
.inv-members-invite__link {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.inv-members-invite__link input {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
@media (max-width: 720px) {
  .inv-members-invite__grid { grid-template-columns: 1fr; }
}

/* ─── Next count due banner (dashboard) ─────────────────────── */
.inv-count-due-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 18px;
  background: rgba(0, 105, 118, 0.08);
  border: 2px solid var(--color-coffee);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--color-seaglass);
  font-family: -apple-system, sans-serif;
  font-size: 14px;
}
.inv-count-due-strip--soon {
  background: rgba(232, 88, 27, 0.10);
  box-shadow: 3px 3px 0 var(--color-cherry);
}
.inv-count-due-strip__icon { font-size: 20px; }

/* ─── Schedule assignee checkboxes (admin form) ─────────────── */
.inv-schedule-assignees {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
}
.inv-schedule-assignee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-oat);
  border: 1.5px solid var(--color-coffee);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}
.inv-schedule-assignee input { margin: 0; }

/* ─── Offline banner ─────────────────────────────────────────
   Injected by app.js when navigator.onLine flips to false. Sticks
   to the top of the viewport above the header. */
.inv-offline-banner {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-sunshine, #F2A408);
  color: var(--color-coffee, #28200E);
  border-bottom: 2px solid var(--color-coffee, #28200E);
  padding: 8px 16px;
  font-family: -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 2px 0 rgba(40, 32, 14, 0.15);
}

/* ────────────── Responsive: tablet (≤900px) ────────────── */
@media (max-width: 900px) {
  /* KPIs drop the offset shadow size to keep cards tight */
  .inv-kpis { gap: 14px; }
  .inv-kpi { padding: 14px 16px; }
  .inv-kpi__value { font-size: 36px; }
  .inv-kpi::after { inset: 5px -5px -5px 5px; }
  .inv-sticker { width: 38px; height: 38px; font-size: 18px; top: -10px; right: -10px; }

  /* Suggested-order cards squeeze padding so the chip + cost still fit */
  .inv-suggest-card { padding: 14px 16px; }
  .inv-suggest-card__total { font-size: 20px; }
}

/* ────────────── Responsive: mobile (≤540px) ────────────── */
@media (max-width: 540px) {
  /* KPIs go 2-up on phones; values shrink so labels still fit */
  .inv-kpis { grid-template-columns: 1fr 1fr; gap: 12px; }
  .inv-kpi { padding: 12px 14px; min-width: 0; }
  .inv-kpi__value { font-size: 28px; }
  .inv-kpi__label { font-size: 10px; }

  /* Header stacks: actions wrap below the title block */
  .inv-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .inv-header__actions { width: 100%; flex-wrap: wrap; }
  .inv-header__title { font-size: 28px; }

  /* Item card: tighter, qty stacks num over unit so 'containers' never overflows */
  .inv-item-card { padding: 14px; }
  .inv-item-card__loc { padding: 7px 9px; }
  .inv-item-card__loc-qty { flex-direction: column; align-items: flex-start; }
  .inv-item-card__loc-qty-num { font-size: 20px; }
  .inv-item-card__loc-runout { font-size: 10px; }

  /* Vendor cards full bleed */
  .inv-suggest-grid { grid-template-columns: 1fr; gap: 16px; }
  .inv-suggest-card { padding: 14px 16px; }
  .inv-suggest-card__vendor { font-size: 18px; }
  .inv-suggest-card__total { font-size: 20px; }
  .inv-suggest-card__line-alt { white-space: normal; line-height: 1.3; }

  /* Reports two-col grid → single column */
  .inv-reports-grid { grid-template-columns: 1fr; }
  .inv-bar-chart__row { grid-template-columns: 60px 1fr 100px; font-size: 12px; }
}

/* ────────────── Responsive: very narrow (≤380px iPhone SE) ────────────── */
@media (max-width: 380px) {
  body, .inv-main { padding-left: 14px; padding-right: 14px; }
  .inv-item-card__locs { grid-template-columns: 1fr; gap: 6px; }
  .inv-item-card__loc-qty { flex-direction: row; align-items: baseline; }
  .inv-kpi__value { font-size: 24px; }
}