/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a0a;
  --surface: #161616;
  --surface-raised: #1e1e1e;
  --border: #2a2a2a;
  --text: #f0f0f0;
  --text-muted: #888;
  --accent: #4f9cf7;
  --accent-hover: #3a8ae5;
  --danger: #e54d4d;
  --success: #4dcf82;
  --radius: 12px;
  --radius-sm: 8px;
  --nav-height: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }

/* === Layout === */
.app-main {
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 16px);
}

/* === Flash messages === */
.flash {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin: 12px 16px;
  font-size: 14px;
}
.flash--alert { background: #3a1c1c; color: #f5a5a5; border: 1px solid #5a2a2a; }
.flash--notice { background: #1c2e1c; color: #a5f5a5; border: 1px solid #2a5a2a; }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  width: auto;
}
/* Full-width buttons in native/mobile contexts */
.app-main .btn { width: 100%; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); }
.btn--danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); margin-top: 24px; }
/* Full-width button for web forms (opt-in) */
.btn--form { width: 100%; }

/* === Forms === */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"] {
  width: 100%;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s;
}
.field input:focus { border-color: var(--accent); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

/* === Auth screens === */
.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px;
}
.auth-screen h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
}
.auth-subtitle {
  color: var(--text-muted);
  margin-bottom: 32px;
}
.auth-form { width: 100%; max-width: 400px; }
.auth-link {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-muted);
}

/* === Camera / Scan screen === */
.scan-screen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
.camera-viewfinder {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #000;
}
.camera-viewfinder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camera-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-unavailable video,
.camera-unavailable canvas,
.camera-unavailable .viewfinder-overlay { display: none; }
.camera-unavailable::after {
  content: "Camera not available. Tap the button below to choose a photo.";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: 0.9375rem;
  background: var(--surface);
}

.viewfinder-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.viewfinder-bracket {
  width: 200px;
  height: 280px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
}
.viewfinder-hint {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.camera-controls { flex-shrink: 0; overflow: visible; }
.capture-bar {
  display: flex;
  justify-content: center;
  padding: 24px 20px calc(24px + var(--safe-bottom));
  background: var(--bg);
}
.btn-capture {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: transform 0.1s;
}
.btn-capture:active { transform: scale(0.92); }
.btn-capture__ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.preview-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.preview-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.preview-bar .btn { width: auto; flex: 1; padding: 10px 16px; }

/* === Scan result === */
.scan-result {
  padding: 16px;
  max-width: 480px;
  margin: 0 auto;
}
.scan-result__image {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.scan-result__image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.scan-form { margin-top: 8px; }
.manual-entry-hint {
  background: var(--surface-raised);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  color: var(--accent);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.fill-level { display: flex; align-items: center; gap: 12px; }
.fill-level input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
  height: 6px;
}
.fill-level input[type="number"] { flex: 1; min-width: 0; }
.fill-delta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.fill-delta__arrow--up { color: #f0b429; }   /* amber: fill going UP on an open bottle is suspicious */
.fill-delta__arrow--down { color: var(--text-muted); }
.chip--attention {
  display: inline-block;
  background: #3a2f1c;
  color: #f0b429;
  border: 1px solid #5a4a2a;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 100px;
  margin-bottom: 6px;
}
.capture-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin: 8px 0 12px;
}
.capture-hint__dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  margin-left: auto;
  padding: 0 4px;
}
.fill-level__display {
  font-size: 18px;
  font-weight: 700;
  min-width: 48px;
  text-align: right;
}
.scan-summary {
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  text-align: center;
  margin: 16px 0;
  color: var(--text-muted);
}
.scan-summary strong { color: var(--text); }
.form-actions { display: flex; gap: 12px; }
.form-actions .btn { flex: 1; }

/* === Inventory === */
.inventory-screen { padding: 16px; }
.inventory-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}
.inventory-header h1 { font-size: 28px; font-weight: 700; }
.badge {
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 100px;
}
.scan-list__date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 0 8px;
}
.scan-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.scan-card:hover { background: var(--surface-raised); }
.scan-card__thumb img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.scan-card__info { flex: 1; }
.scan-card__brand { display: block; font-size: 15px; }
.scan-card__volume { font-size: 13px; color: var(--text-muted); }
.scan-card__fill { display: flex; align-items: center; gap: 8px; }
.fill-bar {
  width: 24px;
  height: 40px;
  background: var(--surface-raised);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--border);
}
.fill-bar__level {
  width: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: height 0.3s;
}
.fill-bar__label { font-size: 13px; color: var(--text-muted); min-width: 36px; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 16px;
  color: var(--text-muted);
}
.empty-state .btn { width: auto; }

/* === Bottom nav === */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 100;
}
.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s;
}
.bottom-nav__item svg { width: 24px; height: 24px; }
.bottom-nav__item.active { color: var(--accent); }

/* === Loading overlay === */
.scan-screen--loading::after {
  content: "Analyzing bottle...";
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  z-index: 100;
}

/* Hide web camera viewfinder when native camera bridge is active */
[data-bridge-components~="camera"] .camera-viewfinder {
  display: none;
}

/* === Scanning overlay (shown during upload+identify wait) === */
.scan-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  animation: overlay-fade-in 0.2s ease-out;
}
.scan-overlay[hidden] { display: none; }
/* Inline flavor: the confirm page's async "identifying" state — same
   animation, no fixed full-screen chrome. */
.scan-overlay--inline {
  position: static;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: auto;
  animation: none;
  padding: 48px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.identifying-screen { text-align: center; }
.identifying-screen__hint {
  color: var(--text-muted);
  font-size: 14px;
  padding: 0 24px 32px;
}

@keyframes overlay-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.scan-overlay__bottle {
  position: relative;
  width: 120px;
  height: 300px;
  color: var(--accent);
}
.scan-overlay__svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 16px rgba(79, 156, 247, 0.4));
}
.scan-overlay__line {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
  border-radius: 999px;
  box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent);
  top: 5%;
  animation: scan-line 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes scan-line {
  0%   { top: 5%;  opacity: 0; }
  10%  { opacity: 1; }
  50%  { top: 92%; opacity: 1; }
  60%  { opacity: 0; }
  100% { top: 5%;  opacity: 0; }
}

.scan-overlay__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
  animation: label-pulse 1.6s ease-in-out infinite;
}
@keyframes label-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* === Confirm screen === */
.confirm-screen {
  padding: 16px;
  padding-bottom: calc(120px + var(--safe-bottom));
}
.confirm-screen__header {
  padding: 12px 0 20px;
}
.confirm-screen__header h1 {
  font-size: 24px;
  font-weight: 700;
}
.confirm-screen__subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 4px;
}

.confirm-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.confirm-card {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.confirm-card__discard {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.confirm-card__discard:hover,
.confirm-card__discard:active {
  background: var(--danger);
  color: #fff;
}
.confirm-card__image {
  flex-shrink: 0;
  width: 88px;
  height: 110px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-raised);
}
.confirm-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.confirm-card__fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.confirm-card__fields .field {
  margin-bottom: 0;
}
.confirm-card__fields .field-row {
  gap: 8px;
}

.confirm-actions {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 8px);
  left: 16px;
  right: 16px;
  display: flex;
}
.confirm-actions .btn {
  flex: 1;
  width: 100%;
}

/* === Organizations === */
.org-screen { padding: 16px; }
.org-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.org-header h1 { font-size: 28px; font-weight: 700; }

.org-list { margin-bottom: 24px; }
.org-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.org-card--active { border: 1px solid var(--accent); }
.org-card__info { display: flex; flex-direction: column; gap: 2px; }
.org-card__name { font-size: 16px; font-weight: 600; }
.org-card__meta { font-size: 13px; color: var(--text-muted); }
.org-card__actions { display: flex; align-items: center; gap: 8px; }
.org-card__link { font-size: 14px; }

.org-form-screen {
  padding: 24px;
  max-width: 480px;
  margin: 0 auto;
}
.org-form-screen h1 { font-size: 28px; font-weight: 700; margin-bottom: 4px; }

.org-detail-screen { padding: 16px; max-width: 480px; margin: 0 auto; }
.org-edit-link { font-size: 14px; }

.section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 0 8px;
}

.member-list { margin-bottom: 24px; }
.member-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.member-card__info { display: flex; flex-direction: column; gap: 2px; }
.member-card__name { font-size: 15px; }
.member-card__role { font-size: 12px; color: var(--text-muted); }
.member-card__remove { background: none; border: none; color: var(--danger); font-size: 13px; cursor: pointer; padding: 4px 8px; }

.invite-section { margin-bottom: 24px; }
.invite-form .field-row { align-items: flex-end; }
.invite-form .btn { width: auto; white-space: nowrap; }

.btn--sm { padding: 8px 16px; font-size: 14px; }

/* Hide bottom nav on scan/camera screen -- full-bleed camera needs all the space */
body:has(.scan-screen) .bottom-nav { display: none; }
body:has(.scan-screen) .app-main { padding-bottom: 0; }

/* ============================================
   Native Layout
   ============================================ */

/* --- Native overrides --- */

/* Hide web-style scrollbars. Scrolling itself stays on the document --
   Hotwire Native's pull-to-refresh drives the WKWebView's own scroll view,
   so we never move scrolling into an inner overflow container. */
body.native::-webkit-scrollbar,
body.native ::-webkit-scrollbar { display: none; }
body.native { scrollbar-width: none; }

/* Stop scroll chaining at the document edge so overscroll feels less like
   a web page. The bounce animation itself belongs to the WKWebView's
   scroll view and can only be disabled native-side. */
body.native { overscroll-behavior-y: none; }

/* viewport-fit=cover (required so --safe-bottom resolves for the bottom nav)
   lays the page out into the full display area, including under the
   translucent native nav bar. Pad the scrolled content down past the unsafe
   top region (status bar + nav bar) so every page starts below the header.
   Fixed elements (.scan-overlay, .bottom-nav, .toast) position against the
   viewport, not the content flow, so they stay full-bleed. */
body.native .app-main { padding-top: var(--safe-top); }

/* ============================================
   Web Layout
   ============================================ */

/* --- Web overrides --- */
body.web { --radius: 8px; --radius-sm: 6px; }

/* --- Top nav --- */
.top-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.top-nav__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 24px;
  height: 64px;
}
.top-nav__brand {
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.top-nav__links {
  display: flex;
  gap: 24px;
  flex: 1;
}
.top-nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.15s;
}
.top-nav__link:hover { color: var(--text); }
.top-nav__link.active { color: var(--text); }
.top-nav__link--muted { font-size: 13px; }
.top-nav__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.top-nav__org {
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 100px;
}

/* --- Web main --- */
.web-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* --- Dashboard --- */
.dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 32px;
}
.dashboard__header h1 {
  font-size: 28px;
  font-weight: 700;
}
.dashboard__subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* --- Scan table --- */
.scan-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.scan-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.scan-table__row {
  cursor: pointer;
  transition: background 0.15s;
}
.scan-table__row:hover {
  background: var(--surface-raised);
}
.scan-table tbody td {
  padding: 16px 20px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.scan-table tbody tr:last-child td {
  border-bottom: none;
}
.scan-table__brand {
  font-weight: 600;
}
.scan-table__date {
  color: var(--text-muted);
}
.scan-table__fill {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fill-bar--inline {
  width: 20px;
  height: 32px;
}

/* --- Web scan (upload) --- */
.web-scan {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 0;
}
.web-scan h1 {
  font-size: 28px;
  font-weight: 700;
}
.web-scan__subtitle {
  color: var(--text-muted);
  margin: 4px 0 32px;
}
.web-scan__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- Upload zone --- */
.upload-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  overflow: hidden;
}
.upload-zone:hover,
.upload-zone--dragover {
  border-color: var(--accent);
  background: rgba(79, 156, 247, 0.05);
}
.upload-zone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.upload-zone__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}
.upload-zone__icon {
  width: 48px;
  height: 48px;
}
.upload-zone__preview {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* --- Web scan detail --- */
.web-scan-detail {
  max-width: 860px;
  margin: 0 auto;
}
.web-scan-detail__header {
  padding: 8px 0 32px;
}
.web-scan-detail__header h1 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 8px;
}
.back-link {
  font-size: 14px;
  color: var(--text-muted);
}
.back-link:hover { color: var(--text); }
.web-scan-detail__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.web-scan-detail__image {
  border-radius: var(--radius);
  overflow: hidden;
}
.web-scan-detail__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
}
.web-scan-detail__form {
  min-width: 0;
}
@media (max-width: 640px) {
  .web-scan-detail__body {
    grid-template-columns: 1fr;
  }
}

/* -- Locations -- */
.location-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.location-tab {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  padding: 6px 14px;
  border-radius: 100px;
}
.location-tab--active {
  color: #fff;
  background: var(--accent);
}
.location-chip {
  display: inline-block;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--surface);
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.location-chip strong { color: var(--accent); }
.confirm-location {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* === Count report === */
.report-total {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.report-total__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.report-total__value { font-size: 24px; }
.report-total__hint { font-size: 13px; color: var(--text-muted); }
.inventory-header__link {
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}