/* ─── Design tokens ────────────────────────────────────────────────────── */
:root {
  --sidebar-w: 220px;
  --sidebar-w-expanded: 220px;
  --sidebar-w-collapsed: 52px;
  --topbar-h: 52px;
  --app-bg: #FAFAF7;
  --surface: #ffffff;
  --text-inverse: #ffffff;
  --surface-muted: #F5F4EF;
  --surface-hover: #EEEDE7;
  --border: #E5E5E0;
  --border-strong: #C9C9C2;
  --text: #1A1A1A;
  --muted: #6B6B6B;
  --accent: #5B4FE5;
  --accent-soft: #EEEBFC;
  --accent-hover: #4A3FD0;
  --success: #1A7A55;
  --success-soft: #E6F6EE;
  --warning: #A66B12;
  --warning-soft: #FBF1DA;
  --danger: #B23A2A;
  --danger-soft: #FCE7E3;
  --card-peach: #FCEFE3;
  --card-peach-text: #8A4A1A;
  --card-mint: #E6F4EA;
  --card-mint-text: #1F6A3C;
  --card-sky: #E4EFFB;
  --card-sky-text: #1F4A82;
  --card-lavender: #EFEAFB;
  --card-lavender-text: #4A3FD0;
  --badge-review: #fed7aa;
  --badge-review-text: #9a3412;
  --badge-processed: #e6f5ea;
  --badge-processed-text: #1e7a3d;
  --badge-suspect: #F4D0CC;
  --badge-suspect-text: #8A2515;
  --badge-locked: #E5E5E0;
  --badge-locked-text: #6B6B6B;
  --type-display-size: 22px;
  --type-display-weight: 700;
  --type-heading-size: 17px;
  --type-heading-weight: 600;
  --type-body-size: 14px;
  --type-body-weight: 400;
  --type-label-size: 12px;
  --type-label-weight: 600;
  --type-label-letter-spacing: 0.04em;
  --type-numeral-size: 22px;
  --type-numeral-weight: 700;
  --text-header: var(--type-heading-size);
  --text-body: var(--type-body-size);
  --text-sub: var(--type-label-size);
  /* B0b numeral consumers should apply font-variant-numeric: tabular-nums. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.25);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--type-body-size);
  background: var(--app-bg);
  color: var(--text);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

.visually-hidden {
  position: fixed;
  left: -100vw;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--text-inverse); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover:not(:disabled) { background: var(--accent-soft); }
.btn-danger { background: var(--danger-soft); color: var(--danger); border: 1px solid #e8c4bf; }
.btn-danger:hover:not(:disabled) { background: #f9e0dc; border-color: #d9aaa3; }
.btn-sm { height: 30px; padding: 0 10px; font-size: var(--type-label-size); }
.btn-xs { height: 24px; padding: 0 8px; font-size: 11px; border-radius: 5px; }
.large-btn { height: 44px; padding: 0 24px; font-size: var(--type-body-size); }
.icon-btn { background: none; border: none; cursor: pointer; font-size: 18px; padding: 4px 8px; color: var(--muted); border-radius: 4px; }
.icon-btn:hover:not(:disabled) { background: var(--surface-hover); }
button,
.btn:not(a),
[class^="btn-"]:not(a),
[class*=" btn-"]:not(a) {
  transition: background 0.15s, opacity 0.15s, transform 80ms ease, box-shadow 80ms ease;
}
button:active,
.btn:not(a):active,
[class^="btn-"]:not(a):active,
[class*=" btn-"]:not(a):active {
  transform: scale(0.96);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
}
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
a:focus-visible,
.icon-btn:focus-visible,
.pill-toggle__option:focus-visible,
.flat-card__header:focus-visible,
.export-copy-btn:focus-visible,
.export-combobox-option:focus-visible,
.export-combobox-addcustom:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ─── App confirmation dialogs ─────────────────────────────────────────── */
.ui-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(26, 26, 26, 0.36);
}

.ui-prompt-card {
  width: min(420px, 100%);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-modal);
}

.ui-text-prompt-card {
  width: min(560px, calc(100vw - 32px));
}

.ui-prompt-body {
  display: grid;
  gap: 8px;
  padding: 20px 20px 12px;
}

.ui-text-prompt-card .ui-prompt-body {
  gap: 14px;
  padding: 26px 28px 16px;
}

.ui-prompt-title {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
}

.ui-prompt-message {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-line;
}

.ui-text-prompt-card .ui-prompt-title {
  font-size: 20px;
}

.ui-text-prompt-card .ui-prompt-message {
  font-size: 14px;
}

.ui-text-prompt-card .field-stack {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.ui-text-prompt-card #uiTextPromptInput {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 15px;
}

.ui-text-prompt-hint {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.ui-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
}

.ui-text-prompt-card .ui-prompt-actions {
  gap: 10px;
  padding: 16px 28px 24px;
}

.ui-text-prompt-card .ui-prompt-actions .btn {
  min-width: 116px;
}

@media (max-width: 480px) {
  .ui-prompt-overlay {
    align-items: flex-end;
    padding: 12px;
  }
  .ui-text-prompt-card {
    width: 100%;
  }
  .ui-text-prompt-card .ui-prompt-body {
    padding: 22px 18px 14px;
  }
  .ui-text-prompt-card .ui-prompt-actions {
    padding: 14px 18px 18px;
  }
  .ui-prompt-actions {
    flex-direction: column-reverse;
  }
  .ui-prompt-actions .btn {
    width: 100%;
  }
}

/* ─── Landing page ──────────────────────────────────────────────────────── */
.browser-home {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(90deg, rgba(245, 247, 248, 0.94), rgba(245, 247, 248, 0.7) 46%, rgba(245, 247, 248, 0.94)),
    url("/static/assets/receipt-bot-backdrop.png?v=20260510") center / cover no-repeat;
}
.home-panel {
  width: min(860px, 100%);
  display: grid;
  gap: 22px;
  background: rgba(255, 255, 255, 0.93);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: 0 18px 50px rgba(23, 32, 38, 0.08);
  backdrop-filter: blur(10px);
}
.home-mark { width: 78px; height: 78px; border-radius: 18px; border: 1px solid rgba(37, 111, 135, 0.2); box-shadow: 0 12px 34px rgba(23, 32, 38, 0.15); object-fit: cover; }
.home-copy { display: grid; gap: 8px; }
.home-kicker { color: var(--accent); font-size: 13px; font-weight: 800; margin: 0; }
.home-copy h1 { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 700; max-width: 680px; }
.home-copy p:not(.home-kicker) { margin: 0; max-width: 680px; color: var(--muted); line-height: 1.5; }
.home-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.home-link { height: 44px; padding: 0 20px; border-radius: var(--radius-sm); text-decoration: none; font-size: var(--type-body-size); font-weight: 600; }
.banned-notice {
  border: 1px solid rgba(192, 57, 43, 0.24);
  border-radius: 8px;
  background: #fff1ef;
  color: var(--text);
  padding: 16px 18px;
}
.banned-notice h2 { margin: 0 0 6px; font-size: 18px; color: var(--danger); }
.banned-notice p { margin: 0; color: var(--muted); line-height: 1.45; }
.home-guide { display: grid; gap: 12px; border-top: 1px solid var(--border); padding-top: 16px; }
.home-guide div { display: flex; gap: 8px; font-size: 13px; }
.home-guide strong { color: var(--text); min-width: 80px; }
.home-guide span { color: var(--muted); }

#loginScreen.browser-home {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(245, 244, 239, 0.96), rgba(250, 250, 247, 0.98)),
    #FAFAF7;
  padding: 24px;
}
#loginScreen .home-panel {
  width: min(460px, 100%);
  max-width: 460px !important;
  gap: 22px;
  background: var(--surface);
  border-color: var(--border);
  border-radius: 8px;
  padding: 34px 34px 28px;
  box-shadow: 0 18px 54px rgba(26, 26, 26, 0.12), 0 2px 8px rgba(26, 26, 26, 0.05);
  backdrop-filter: none;
}
.login-brand-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
}
#loginScreen .home-mark {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
#loginScreen .home-copy { gap: 4px; }
#loginScreen .home-kicker {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#loginScreen .home-copy h1 {
  font-size: 22px;
  font-weight: 800;
}
#loginScreen .home-copy p:not(.home-kicker) {
  color: var(--muted);
  font-size: 13px;
}

/* ─── Login form (PD3 R27) ──────────────────────────────────────────────── */
/* I4.B6 — read-only demo: greyed, non-interactive admin user-mgmt actions. */
button[disabled].user-action-btn { opacity: 0.6; cursor: not-allowed; }

.login-form {
  display: grid;
  gap: 14px;
  margin-top: 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.login-form .field-label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.login-mode-wrap {
  display: grid;
  gap: 6px;
}
.login-mode-wrap .field-label { margin: 0; }
.login-demo-note {
  border: 1px solid rgba(26, 122, 85, 0.22);
  border-radius: var(--radius-sm);
  background: var(--success-soft);
  color: var(--success);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 10px;
}
.login-remember-toggle { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.login-remember-toggle input { width: 16px; height: 16px; margin: 0; }
.login-inline-actions { display: flex; justify-content: flex-end; margin-top: -4px; }
.login-link-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-link-button:hover { color: #0a5c7b; }
.login-link-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.login-form input[type="email"],
.login-form input[type="text"],
.login-form input[type="password"],
.login-form select {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--type-body-size);
  background: var(--surface);
  color: var(--text);
}
.login-form input:disabled {
  background: var(--surface-muted);
  color: var(--muted);
  cursor: not-allowed;
}
.login-password-control {
  position: relative;
  display: block;
}
.login-password-control #loginPassword {
  width: 100%;
  padding-right: 44px;
}
.login-password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.login-password-toggle:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
.login-password-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.login-password-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-form input:focus,
.login-form select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.login-form .btn-primary { height: 44px; font-size: var(--type-body-size); font-weight: 600; }
.login-error {
  background: #fff1ef;
  border: 1px solid rgba(192, 57, 43, 0.24);
  color: var(--danger);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
}
/* PD5 R29 — reset flow success banner + supporting bits. Green palette
   for unambiguous success cue; same padding/radius as .login-error. */
.login-success {
  background: #e8f6ec;
  border: 1px solid rgba(46, 125, 50, 0.28);
  color: #1b5e20;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
}
.login-form--secondary {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}
.login-actions { display: flex; gap: 8px; }
.login-actions .btn { flex: 1; }
.sidebar-logout { padding: 10px 12px 14px; }
.sidebar-logout .btn { width: 100%; }

@media (max-width: 560px) {
  #loginScreen.browser-home { padding: 16px; }
  #loginScreen .home-panel {
    padding: 26px 22px 22px;
  }
  .login-brand-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ─── App shell layout ───────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}
body.sidebar-collapsed {
  --sidebar-w: var(--sidebar-w-collapsed);
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  overflow-y: auto;
  transition: width 150ms ease-out, min-width 150ms ease-out;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.sidebar-brand img { border-radius: 6px; }
.sidebar-collapse-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: calc(100% - 16px);
  min-height: 28px;
  margin: 8px 8px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 1;
}
.sidebar-collapse-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 8px;
  flex: 1;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: background 0.12s, color 0.12s;
}
.sidebar-link:hover { background: var(--surface-hover); color: var(--text); }
.sidebar-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-group-header {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.nav-group-header:hover { color: var(--accent); }
.nav-chevron {
  display: inline-flex;
  width: 14px;
  justify-content: center;
  color: var(--muted);
  font-size: 10px;
  transition: transform 120ms ease;
  transform-origin: center;
}
.nav-group.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-group-icon { font-size: 14px; line-height: 1; flex: 0 0 auto; }
.nav-group-label { flex: 0 1 auto; }
.nav-group-lock {
  color: var(--muted);
  font-size: 11px;
  opacity: 0.7;
}
.nav-group-items { display: block; }
.nav-group.collapsed .nav-group-items { display: none; }
.nav-group-items .sidebar-link { padding-left: 24px; }
.nav-group-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
}
body.admin-off .nav-group[data-group="setup"] { display: none; }
/* B-fu-4: Tenants (admin) group is superuser-gated via setSuperuserClass(), NOT via admin toggle.
   Explicit override ensures admin-off never accidentally cascades to hide the Tenants link. */
body.admin-off .nav-group[data-group="admin"] { display: block; }
body.is-not-admin .sidebar-link[data-view="adminUsers"] { display: none; }
.nav-icon { font-size: 14px; width: 18px; text-align: center; }
.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
}
.sidebar-admin-toggle {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}
.admin-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(37, 111, 135, 0.24);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
}
.admin-toggle-btn[data-state="off"] {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--muted);
}
.admin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.admin-toggle-btn[data-state="off"] .admin-dot { background: var(--muted); }
.sidebar-user {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
/* I4.B5 — switch-role badge card inside the sidebar user area. */
.sidebar-user-card { display: grid; gap: 6px; }
.sidebar-user-email { font-weight: 700; color: var(--text, #222); word-break: break-all; }
.sidebar-user-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.sidebar-user-tenant, .sidebar-user-role { padding: 1px 7px; border-radius: 999px; background: var(--surface-muted); font-size: 11px; font-weight: 600; }
.sidebar-user-role { text-transform: capitalize; }
.sidebar-switch-role { margin-top: 2px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 12px; font-weight: 600; cursor: pointer; }
.sidebar-switch-role:hover { background: #eef3fb; border-color: #cdddf3; }

.sidebar {
  background: #fbfbfc;
  border-right: 1px solid #ececef;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
}
.sidebar-brand {
  width: 100%;
  justify-content: center;
  gap: 0;
  padding: 12px 0 14px;
  border-bottom: 0;
}
.sidebar-brand img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.sidebar-brand span { display: none; }
.sidebar-tenant-switcher {
  width: calc(100% - 20px);
  margin: 0 10px 8px;
  display: grid;
  gap: 4px;
}
.sidebar-tenant-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.sidebar-tenant-select {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 7px;
}
.sidebar-collapse-btn {
  display: inline-flex;
  width: 40px;
  min-height: 30px;
  margin: 0 0 8px;
  border-color: #ececef;
  background: #fff;
}
.shell-rail-sections {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  padding: 0 10px 12px;
}
.shell-section-btn {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #5b5b66;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: inherit;
  padding: 4px 2px;
}
.shell-section-btn:hover {
  background: #f4f4f6;
  color: #1d1d22;
}
.shell-section-btn.active {
  background: #eeedfb;
  color: #5b53e8;
  font-weight: 700;
}
.shell-section-icon {
  font-size: 18px;
  line-height: 1;
}
.shell-section-label {
  max-width: 112px;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.1;
}
.shell-canonical-nav { display: none !important; }
.shell-tree-group {
  width: 100%;
}
.shell-tree-header {
  min-height: 34px;
  padding: 8px 8px;
  border-radius: 8px;
  color: #3e3e48;
}
.shell-tree-header:hover {
  background: #f4f4f6;
  color: #1d1d22;
}
.shell-tree-items {
  padding: 1px 0 4px 18px;
}
.shell-tree-page {
  min-height: 32px;
  padding: 7px 8px;
  border-radius: 8px;
  color: #5b5b66;
}
.shell-tree-page .nav-icon {
  flex: 0 0 18px;
}
.shell-tree-page-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-tree-single {
  font-weight: 700;
  color: #3e3e48;
}
.shell-tree-single.active,
.shell-tree-page.active {
  background: #eeedfb;
  color: #5b53e8;
  font-weight: 700;
}
.sidebar-admin-toggle,
.sidebar-user,
.sidebar-logout {
  width: 100%;
  padding: 8px;
}
.sidebar-admin-toggle { display: none; }
body.sidebar-collapsed .shell-section-label { display: none; }
body.sidebar-collapsed .shell-rail-sections {
  align-items: center;
  padding-left: 6px;
  padding-right: 6px;
}
body.sidebar-collapsed .shell-section-btn {
  width: 40px;
  min-height: 40px;
}
body.sidebar-collapsed .sidebar-brand img {
  width: 34px;
  height: 34px;
}
body.sidebar-collapsed .sidebar-tenant-switcher {
  display: none;
}

.main-wrap {
  background: #fff;
}
.app-header {
  border-bottom: 1px solid #ececef;
  background: #fff;
  padding: 0 22px;
  flex: 0 0 auto;
}
.app-header-top {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
}
.app-header-title-group {
  min-width: 0;
}
.app-header-title-group h1 {
  margin: 0;
  color: #1d1d22;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
}
.app-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.shell-profile-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.shell-switch-role-btn {
  height: 34px;
  border: 1px solid #ececef;
  border-radius: 8px;
  background: #fff;
  color: #5b5b66;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
  white-space: nowrap;
}
.shell-switch-role-btn:hover {
  background: #f6f6f8;
  border-color: #d8d8df;
}
.shell-profile-btn {
  min-width: 0;
  max-width: 220px;
  height: 34px;
  border: 1px solid #ececef;
  border-radius: 8px;
  background: #fff;
  color: #5b5b66;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 4px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
.shell-profile-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #5b53e8;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 11px;
}
.shell-profile-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-subnav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  overflow-x: auto;
}
.app-subnav.single { min-height: 0; }
.app-subnav-link {
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #5b5b66;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.app-subnav-link:hover {
  background: #f4f4f6;
  color: #1d1d22;
}
.app-subnav-link.active {
  background: #eeedfb;
  color: #5b53e8;
}
.app-subnav-badge {
  /* HFB8b-2 truncation/panels/affordances/page-specific/minor: reuse tokens for clean consistent UI */
}

/* HFB8b-2: Receipts/Companies/Users no chronic ellipsis on key cols; let breathe */
.rtable .col-batch,
.rtable .col-filename,
.rtable td.export-batch-cell,
.companies-name-col,
.users-actions-col,
.users-last-active-col {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  min-width: 120px;
  max-width: none;
}
.rtable .col-batch,
.rtable .col-filename {
  min-width: 140px;
}

/* Companies: wider name, no clip in panel */
.companies-name-col { min-width: 220px; }
.company-detail-panel .receipt-inspector-file { white-space: normal; overflow: visible; }

/* Users: actions/date not clipped */
.users-actions-col,
.users-last-active-col { min-width: 100px; white-space: normal; }

/* Vendors inspector affordance (reuse reports rail pattern) */
#vendorInspector,
.vendor-inspector {
  border-left: 1px solid var(--border);
}
.vendor-inspector-toggle,
#vendorInspectorToggle,
#vendorInspectorReopen {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--type-label-size);
  color: var(--muted);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
}
.vendor-inspector-toggle:hover { background: var(--surface-hover); }

/* Review Queue empty state */
.review-inspector-empty,
#reviewInspector .empty-hint {
  padding: 16px;
  color: var(--muted);
  font-size: var(--type-label-size);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
}

/* Business Categories affordances: disable + CTA */
.business-cat-list button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-muted);
}
.business-cat-empty-cta {
  display: block;
  margin-top: 8px;
  font-size: var(--type-label-size);
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* Holding: wider dropdowns, condense send btns */
.holding-bulk-apply-select {
  min-width: 110px;
  font-size: var(--type-label-size);
}
.holding-batch-group__actions .btn {
  font-size: 11px;
  padding: 1px 6px;
}

/* Data Export: compact filter (reuse reports) */
#exportFiltersPanel.export-filters--collapsed .export-filter-fields {
  display: none;
}
.export-filters-toggle {
  font-size: var(--type-label-size);
  color: var(--muted);
}

/* Email Setup: clean banners, no dev leak, fix checkbox, clarify */
.email-setup-banner { display: none; } /* remove double */
.email-setup-dev-copy { display: none; } /* stop leak */
.email-setup .checkbox-label { display: inline-flex; align-items: center; gap: 4px; }
.sandbox-label { font-style: italic; color: var(--muted); font-size: var(--type-label-size); }

/* Admin Cats: density (condense sidebar, use detail, dedup) */
.admin-cat-sidebar li,
.axis-label-btn {
  font-size: var(--type-label-size);
  line-height: 1.15;
  padding: 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-cat-detail .full-desc { white-space: normal; }
.admin-cat-slug-dup { display: none; }

/* Minor: no double headings */
.vendor-detail-topbar h1 + .breadcrumb,
.companies-topbar h1 + .breadcrumb { display: none; }

/* Branches select no bleed */
.branch-inline-select {
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--type-label-size);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Settings inline */
.settings-threshold {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Companies: tone red archive */
.archive-btn-inline {
  background: var(--surface-muted);
  color: var(--muted);
  border-color: var(--border);
  font-size: var(--type-label-size);
}
.archive-btn-inline:hover { background: var(--danger-soft); color: var(--danger); }

/* Dashboard sidebar trunc, detail legend */
.sidebar-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.receipt-detail-money-legend { opacity: 0.85; white-space: normal; }

/* Cross badge/button/table consistency (reuse tokens) */
.badge, .nav-badge, .app-subnav-badge {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  padding: 1px 6px;
}
.rtable td, .rtable th { font-size: var(--type-body-size); }
.btn-xs, .btn-sm { font-size: var(--type-label-size); }

  min-width: 15px;
  border-radius: 9px;
  background: #c0392b;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
  padding: 0 6px;
  text-align: center;
}

/* ─── Main wrap ─────────────────────────────────────────────────────────── */
.main-wrap {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ─── Top bar (mobile) ─────────────────────────────────────────────────── */
.topbar {
  display: none;
  align-items: center;
  gap: 10px;
  height: var(--topbar-h);
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-title { flex: 1; font-weight: 700; font-size: 15px; }

/* ─── Status bar ────────────────────────────────────────────────────────── */
.status-bar {
  padding: 10px 20px;
  background: var(--warning-soft);
  border-bottom: 1px solid #e8d49c;
  font-size: 13px;
  color: var(--warning);
}
.status-bar.error { background: var(--danger-soft); border-color: #e8c4bf; color: var(--danger); }
.status-bar.success { background: var(--success-soft); border-color: #b0e0c8; color: var(--success); }
.status-bar.approval-toast {
  background: #fff7df;
  border-color: #efd088;
  color: #6a4700;
}
.approval-toast-link {
  color: #15538a;
  font-weight: 800;
  text-decoration: underline;
}
.save-popup {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--success);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.save-popup.is-visible { opacity: 1; }
.god-mode-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 1px solid #b45309;
  background: #fef3c7;
  color: #78350f;
  font-size: 13px;
  font-weight: 700;
}
.god-mode-banner.is-acting {
  border-bottom-color: #991b1b;
  background: #fee2e2;
  color: #7f1d1d;
}
.god-mode-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.god-mode-readonly {
  color: #92400e;
  font-weight: 900;
}
.god-mode-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid rgba(120, 53, 15, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.god-mode-banner.is-acting .god-mode-actions {
  border-color: rgba(127, 29, 29, 0.38);
}
.god-mode-actions input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #b91c1c;
}
.god-mode-actions input:disabled,
.god-mode-actions input:disabled + span {
  cursor: wait;
  opacity: 0.72;
}
.god-mode-exit {
  border: 0;
  background: transparent;
  color: #7c2d12;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}
.god-mode-exit:hover { color: #9a3412; }
body.impersonation-readonly [data-impersonation-disabled="1"],
body.impersonation-readonly button:disabled[title*="Read-only impersonation"] {
  cursor: not-allowed;
  opacity: 0.58;
}

/* ─── Views ─────────────────────────────────────────────────────────────── */
.view { padding: 24px 28px; }
.view.active { display: block; }
.view:not(.active) { display: none; }

.view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.view-header h1 { margin: 0; font-size: 22px; font-weight: 700; flex: 1; }
.view-actions { display: flex; align-items: center; gap: 8px; }
.view-desc { margin: -12px 0 20px; color: var(--muted); font-size: 13px; }
.view-section { margin-top: 28px; }
.view-section h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.count-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

/* ─── Dashboard stat cards ─────────────────────────────────────────────── */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
}
.stat-card .stat-val { font-size: 28px; font-weight: 700; color: var(--accent); }
.stat-card .stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

body.shell-dashboard-active .view#dashboardView {
  min-height: calc(100vh - 99px);
  padding: 20px 22px;
  background: #fff;
}
body.shell-dashboard-active #dashboardView .shell-page-local-header {
  display: none;
}
.dashboard-shell {
  display: grid;
  gap: 18px;
}
.dashboard-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 0;
}
.dashboard-stats .stat-card {
  position: relative;
  overflow: hidden;
  border-color: #ececef;
  border-radius: 10px;
  padding: 15px 17px;
  box-shadow: none;
}
.dashboard-stats .stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: #5b53e8;
}
.dashboard-stats .stat-card.stat-green::before { background: #2f8a4e; }
.dashboard-stats .stat-card.stat-amber::before { background: #b97309; }
.dashboard-stats .stat-card.stat-gray::before { background: #cfcfd6; }
.dashboard-stats .stat-val {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.dashboard-stats .stat-label {
  color: #8a8a96;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  text-transform: uppercase;
}
.dashboard-stats .stat-sub {
  color: #8a8a96;
  font-size: 11.5px;
  margin-top: 4px;
}
.dashboard-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 300px;
}
.dashboard-main-card,
.dashboard-side-card {
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 10px;
  overflow: hidden;
}
.dashboard-card-head {
  align-items: center;
  border-bottom: 1px solid #ececef;
  display: flex;
  justify-content: space-between;
  min-height: 47px;
  padding: 13px 18px;
}
.dashboard-card-head h2 {
  font-size: 13.5px;
  font-weight: 800;
  margin: 0;
}
.dashboard-card-sub {
  color: #8a8a96;
  font-size: 12px;
}
.link-button {
  border: 0;
  background: transparent;
  color: #5b53e8;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 0;
}
.dashboard-recent-table {
  border: 0;
  border-radius: 0;
  overflow-x: auto;
}
.dashboard-recent-table .proc-cards {
  padding: 16px 18px 0;
}
.dashboard-recent-table table.rtable th {
  background: #fafafb;
  color: #8a8a96;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 9px 14px;
  text-transform: uppercase;
}
.dashboard-recent-table table.rtable td {
  border-bottom-color: #f2f2f4;
  font-size: 12.5px;
  padding: 11px 14px;
  white-space: nowrap;
}
.dashboard-recent-table table.rtable th:nth-child(7),
.dashboard-recent-table table.rtable td:nth-child(7),
.dashboard-recent-table table.rtable th:nth-child(9),
.dashboard-recent-table table.rtable td:nth-child(9) {
  display: none;
}
.dashboard-side {
  display: grid;
  gap: 16px;
}
.dashboard-status-list,
.dashboard-activity-list {
  font-size: 12.5px;
}
.dashboard-status-row {
  align-items: center;
  border-bottom: 1px solid #f2f2f4;
  display: flex;
  justify-content: space-between;
  padding: 9px 18px;
}
.dashboard-status-row:last-child,
.dashboard-activity-row:last-child {
  border-bottom: 0;
}
.dashboard-status-row span:first-child {
  color: #5b5b66;
  font-weight: 700;
}
.dashboard-status-row strong {
  font-variant-numeric: tabular-nums;
}
.dashboard-actions {
  display: grid;
  gap: 8px;
  padding: 18px;
}
.dashboard-actions .btn {
  height: 38px;
  justify-content: center;
}
.action-badge {
  background: #c0392b;
  border-radius: 9px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
  min-width: 15px;
  padding: 0 6px;
}
.dashboard-activity-row {
  border-bottom: 1px solid #f2f2f4;
  color: #5b5b66;
  line-height: 1.35;
  padding: 9px 18px;
}
.dashboard-activity-row strong {
  color: #1d1d22;
}

/* ─── Receipt table ─────────────────────────────────────────────────────── */
.receipt-paging-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  font-size: 13px;
  flex-wrap: wrap;
}
.receipt-paging-row label { display: inline-flex; align-items: center; gap: 6px; }
.receipt-paging-row select { padding: 4px 8px; font-size: 13px; }
.receipt-paging-row .page-info { margin-left: auto; color: var(--text-muted, #666); }
/* Keep Prev/Next together as one unit so they never split across rows when the
   paging row reflows (e.g. when the Receipt Preview is open and space narrows). */
.receipt-paging-row .paging-nav { display: inline-flex; gap: 8px; flex-shrink: 0; }
.receipt-view-tabs { flex-shrink: 0; }
.receipt-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.receipt-table-scroll { overflow-x: auto; }
body.shell-receipts-active .view#receiptsView,
body.shell-review-active .view#reviewView,
body.shell-held-active .view#heldBucketView {
  padding: 0;
  min-height: calc(100vh - 99px);
}
body.shell-receipts-active #receiptsView .shell-page-local-header,
body.shell-review-active #reviewView .shell-page-local-header,
body.shell-held-active #heldBucketView .shell-page-local-header {
  display: none;
}
.shell-page-split {
  display: flex;
  min-width: 0;
  min-height: calc(100vh - 99px);
}
.shell-page-primary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* HFB8b-3: bounded layout for Review Queue + Companies to prevent inspector overflow/clip (reuse Reports 3-col pattern exactly: grid + minmax(0,1fr) on primary track, bounded right, no fixed that overflows viewport). Fits table+inspector at 1440 and 1100. */
.shell-page-split.review-shell-split,
.companies-layout-container.shell-page-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); /* 1fr primary (table) bounded inspector; total always <=100% */
  gap: 0;
  min-width: 0;
}
/* Review Queue: when preview collapsed, expand table to full width (single 1fr + thin 40px tab for reopen; fixes STATUS cutoff). Mirrors receipts flex reclaim when inspector hidden. */
.shell-page-split.review-shell-split.review-preview-collapsed {
  grid-template-columns: minmax(0, 1fr) 40px;
}
.shell-page-split.review-shell-split .shell-page-primary,
.companies-layout-container.shell-page-split .shell-page-primary {
  min-width: 0;
  overflow: hidden; /* contain table */
}
.shell-page-split.review-shell-split .receipt-inspector,
.companies-layout-container.shell-page-split .receipt-inspector {
  width: auto; /* no fixed overriding the track */
  flex: none;
  min-width: 0;
  max-width: 340px;
  overflow: hidden;
}
/* ensure inner table/scrolls shrink */
.shell-page-split.review-shell-split .receipt-table-scroll,
.companies-layout-container.shell-page-split .company-list-shell {
  min-width: 0;
  overflow-x: auto;
}
body.shell-receipts-active .receipt-table-wrap {
  flex: 1;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
body.shell-review-active #reviewView .receipt-table-wrap {
  flex: 1;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
body.shell-receipts-active .receipt-paging-row,
body.shell-review-active .receipt-paging-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 22px;
  border-bottom: 1px solid #f2f2f4;
  background: #fff;
  flex-wrap: wrap;
}
.receipt-search {
  position: relative;
  width: 300px;
  flex: 0 1 300px;
  display: block;
}
.receipt-search .receipt-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #8a8a96;
  font-size: 13px;
  pointer-events: none;
}
.receipt-search input {
  width: 100%;
  height: 32px;
  border: 1px solid #ececef;
  border-radius: 8px;
  background: #fafafb;
  color: #5b5b66;
  font: inherit;
  font-size: 13px;
  padding: 0 12px 0 32px;
}
.receipt-search input:focus {
  outline: 0;
  border-color: #d8d6f6;
  box-shadow: 0 0 0 3px #eeedfb;
}
body.shell-receipts-active .receipt-paging-row label {
  color: #8a8a96;
  font-size: 12.5px;
}
body.shell-receipts-active .receipt-paging-row select {
  height: 28px;
  border: 1px solid #ececef;
  border-radius: 7px;
  background: #fff;
  color: #5b5b66;
  padding: 0 6px;
}
body.shell-receipts-active .receipt-view-tabs {
  border: 1px solid #ececef;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
body.shell-receipts-active .receipt-view-tabs .category-tab {
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #5b5b66;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
}
body.shell-receipts-active .receipt-view-tabs .category-tab.active {
  background: #eeedfb;
  color: #5b53e8;
}
body.shell-receipts-active .receipt-paging-row .page-info {
  margin-left: auto;
  color: #8a8a96;
  font-size: 12.5px;
}
body.shell-review-active .receipt-paging-row .page-info {
  margin-left: auto;
  color: #8a8a96;
  font-size: 12.5px;
}
body.shell-receipts-active .receipt-table-scroll,
body.shell-review-active .receipt-table-scroll {
  flex: 1;
  overflow: auto;
}
body.shell-receipts-active table.rtable th,
body.shell-review-active table.rtable th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fafafb;
  border-bottom: 1px solid #ececef;
  color: #8a8a96;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 9px 14px;
  text-transform: uppercase;
}
body.shell-receipts-active table.rtable td,
body.shell-review-active table.rtable td {
  border-bottom: 1px solid #f2f2f4;
  color: #1d1d22;
  font-size: 12.5px;
  padding: 11px 14px;
  white-space: nowrap;
}
body.shell-receipts-active table.rtable tr:hover td,
body.shell-review-active table.rtable tr:hover td {
  background: #fafafc;
}
body.shell-receipts-active table.rtable tr.sel td,
body.shell-review-active table.rtable tr.sel td {
  background: #eeedfb;
  border-bottom-color: #e2e0f7;
}
body.shell-receipts-active .derived-total-footnote {
  margin: 0;
  padding: 8px 22px 12px;
  color: #8a8a96;
  font-size: 11.5px;
}
.receipt-inspector {
  width: 340px;
  flex: 0 0 340px;
  border-left: 1px solid #ececef;
  background: #fcfcfd;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.receipt-inspector-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid #ececef;
}
.receipt-inspector-title {
  color: #1d1d22;
  font-size: 13px;
  font-weight: 800;
}
.receipt-inspector-toggle {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: 1px solid #ececef;
  border-radius: 7px;
  background: #fff;
  color: #5b5b66;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.receipt-inspector-toggle:hover,
.receipt-inspector-toggle:focus-visible {
  background: #f6f6f8;
  border-color: #d6d6dd;
  color: #1d1d22;
}
.receipt-inspector-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}
.receipt-inspector-empty {
  min-height: 220px;
  border: 1px dashed #d6d6dd;
  border-radius: 10px;
  background: #f6f6f8;
  color: #8a8a96;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-size: 12.5px;
}
.receipt-inspector-empty-icon { font-size: 30px; }
.receipt-inspector-thumb {
  height: 160px;
  border: 1px dashed #d6d6dd;
  border-radius: 10px;
  background: #f6f6f8;
  color: #8a8a96;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}
.receipt-inspector-thumb span { font-size: 32px; }
.receipt-inspector-thumb small { font-size: 11px; }
.receipt-inspector-file {
  color: #1d1d22;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.receipt-inspector-section-label {
  color: #8a8a96;
  font-size: 11px;
  font-weight: 800;
  margin: 14px 0 4px;
  text-transform: uppercase;
}
.receipt-inspector-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #f2f2f4;
  font-size: 12.5px;
}
.receipt-inspector-row span {
  color: #8a8a96;
  font-weight: 700;
}
.receipt-inspector-row strong {
  color: #1d1d22;
  font-weight: 700;
  text-align: right;
}
.receipt-inspector-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid #ececef;
}
.receipt-inspector-actions .btn {
  justify-content: center;
  height: 36px;
}
.receipt-inspector-collapsed {
  width: 40px;
  flex: 0 0 40px;
  border: 0;
  border-left: 1px solid #ececef;
  background: #fcfcfd;
  color: #8a8a96;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
}
.receipt-inspector-collapsed:hover,
.receipt-inspector-collapsed:focus-visible {
  background: #f6f6f8;
  color: #1d1d22;
}
.receipt-inspector-collapsed span:last-child {
  writing-mode: vertical-rl;
}
/* Ensure thin reopen tab fits the 40px collapsed track in review grid (single-col full table). */
.shell-page-split.review-shell-split.review-preview-collapsed .receipt-inspector-collapsed {
  width: 100%;
  flex: none;
  min-height: 100%;
  align-items: center;
  padding-top: 10px;
}
table.rtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.rtable th {
  text-align: left;
  padding: 10px 14px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
table.rtable td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.rtable tr:last-child td { border-bottom: none; }
table.rtable tr:hover td { background: var(--surface-hover); cursor: pointer; }
table.rtable .col-check { width: 36px; padding: 9px 8px 9px 14px; cursor: default; }
table.rtable th.col-check { padding: 10px 8px 10px 14px; }
table.rtable tr:hover td.col-check { background: var(--surface); }
.receipt-grouped-table tr.receipt-group-parent td,
.receipt-grouped-table tr.receipt-batch-parent td {
  cursor: default;
}
.receipt-grouped-table tr.receipt-batch-parent td:first-child { padding-left: 32px; }
.receipt-grouped-table tr.receipt-group-receipt td:first-child { padding-left: 44px; }
.receipt-grouped-table tr.receipt-group-receipt td:nth-child(2) { padding-left: 28px; }
.empty-hint { padding: 32px; text-align: center; color: var(--muted); font-size: 13px; }

/* ─── Status badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-auto { background: var(--success-soft); color: var(--success); }
.badge-processed { background: #e6f5ea; color: #1e7a3d; font-weight: 700; }
.badge-confirm   { background: #fef08c; color: #713f12; font-weight: 700; } /* YELLOW per addendum */
.badge-review    { background: #fed7aa; color: #9a3412; font-weight: 700; } /* ORANGE */
.badge-failed    { background: #ffebee; color: #b71c1c; font-weight: 700; }
.badge-queued    { background: #eeeeee; color: #555; font-weight: 700; }
.badge-processing {
  background: #fff9c4; color: #8a5b00; font-weight: 700;
  animation: badge-pulse 1.6s ease-in-out infinite;
}
.badge-verified  { background: #dcfce7; color: #166534; font-weight: 700; } /* GREEN */
.badge-approved  { background: #fef3c7; color: #854d0e; font-weight: 700; } /* GOLD */
.badge-saved     { background: #f3f4f6; color: #374151; font-weight: 700; } /* grey */
.status-cell-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.status-cell-explanation {
  display: block;
  width: 100%;
  font-size: 11px;
  color: var(--color-text-muted, #888);
  line-height: 1.3;
  margin-top: 2px;
}
.math-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.math-ok { color: var(--success); }
.math-fail { color: var(--danger); }
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.badge-saved { background: #f3f4f6; color: #374151; }
.badge-ignored { background: #eee; color: #888; font-weight: 600; }
.pending-approval-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff7df;
  color: #7c5200;
  border: 1px solid #efd088;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.vendor-detail-pending {
  margin-bottom: 10px;
}
/* PC7 (R25) — "Downloaded" pill in the export preview table; muted blue
   to distinguish it from the green status badges. Tooltip carries the
   full downloaded_at ISO timestamp. */
.badge-downloaded {
  background: #e3f2fd;
  color: #15538a;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
}
/* PC7 (R25) — per-row Redownload button next to the Downloaded pill;
   xs size so it doesn't dominate the cell. */
.btn-xs {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.2;
}
.export-redownload-btn { margin-left: 4px; }
.row-ignored td { opacity: 0.55; }
/* PB4 (R15) — soft-deleted vendor visual treatment. */
.badge-deleted {
  background: #fde2e2;
  color: #a93226;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.row-deleted, .vendor-row.row-deleted {
  opacity: 0.65;
  background: linear-gradient(0deg, rgba(253,226,226,0.18), rgba(253,226,226,0.18));
}
.vendor-filter-deleted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  user-select: none;
}
.vendor-filter-deleted input[type="checkbox"] {
  margin: 0;
}
.review-reason-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.review-row-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
  vertical-align: middle;
}
.review-needs-vendor-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid #ead598;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.badge-yellow { background: var(--warning-soft); color: var(--warning); border: 1px solid #ead598; }
.badge-orange { background: #fff1e6; color: #9a4b0c; border: 1px solid #f0bf94; }
.badge-red { background: var(--danger-soft); color: var(--danger); border: 1px solid #e8c4bf; }
.review-reason-empty { color: var(--muted); font-size: 12px; }
.review-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 160px;
}
.review-reason-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: -10px 0 14px;
}
.review-reason-row {
  align-items: center;
  flex-wrap: wrap;
}

/* Vendor status tags */
.vtag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.vtag-matched { background: var(--success-soft); color: var(--success); }
.vtag-new { background: var(--warning-soft); color: var(--warning); }
.vtag-unknown { background: #f0f0f0; color: #777; }
.vtag-pinned { background: var(--accent-soft); color: var(--accent); }
.vtag-supp { margin-left: 4px; font-size: 10px; padding: 0 5px; opacity: 0.85; }

/* Receipt list */
.col-comment { color: #777; font-style: italic; font-size: 12px; max-width: 220px; white-space: normal; }
.col-batch { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text); }
.col-filename { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.col-merchant { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conf { font-weight: 600; font-size: 12px; }
.conf-fallback { color: #999; font-weight: 400; margin-left: 1px; }
.conf-muted { color: #aaa; }
.conf-gold { color: var(--warning); font-weight: 700; }
.action-none { color: #999; }
.action-text { font-size: 12px; color: #2a4f8a; }
.action-muted { color: #888; font-size: 12px; }
.action-reprocess { color: #b71c1c; background: none; border: none; cursor: pointer; font-size: 12px; padding: 0; text-decoration: underline; }
.action-reprocess:disabled { color: #999; opacity: 0.6; cursor: not-allowed; text-decoration: none; }

/* VAT source badge for detail view */
.vat-source-badge {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  border-radius: 3px; font-size: var(--text-sub); font-weight: 700;
  background: #eef0f3; color: #555;
}
.vat-source-badge[data-src="pulled"]   { background: #e6f5ea; color: #1e7a3d; }
.vat-source-badge[data-src="computed"] { background: #fff1e0; color: #b1530c; }
.vat-source-badge[data-src="mixed"]    { background: #e3f2fd; color: #15538a; }

/* B1b — VAT source label (R5) + override annotation (R3) */
.vat-source-label {
  font-size: var(--text-body);
  font-weight: 650;
  color: var(--text);
}
.vat-override-annotation {
  background: #fff8e1;
  color: #7a5500;
  border: 1px solid #ffe082;
  border-radius: 5px;
  padding: 6px 10px;
  font-size: var(--text-sub);
  font-weight: 600;
  margin-bottom: 8px;
}

/* Stats page */
.stats-header {
  margin-bottom: var(--space-4);
}
.stats-title-row {
  display: grid;
  gap: 4px;
}
.stats-header-subline {
  color: var(--muted);
  font-size: var(--type-body-size);
  line-height: 1.4;
}
.stats-header-actions .btn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
}
.stats-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.stats-filterbar label {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: var(--muted);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
}
.stats-filterbar select,
.stats-filterbar input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--type-body-size);
  text-transform: none;
}
.stats-filterbar select:focus,
.stats-filterbar input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.stats-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.stats-kpi-strip.is-loading .stat-tile {
  opacity: 0.65;
}
.stats-kpi-tile {
  min-width: 0;
  background: var(--surface-muted);
  box-shadow: var(--shadow-card);
}
.stats-kpi-tile .stat-tile__value {
  font-size: var(--type-numeral-size);
  font-weight: var(--type-numeral-weight);
}
.stats-kpi-success { border-color: var(--success-soft); }
.stats-kpi-success .stat-tile__value { color: var(--success); }
.stats-kpi-review { border-color: var(--warning-soft); }
.stats-kpi-review .stat-tile__value { color: var(--warning); }
.stats-kpi-failed { border-color: var(--danger-soft); }
.stats-kpi-failed .stat-tile__value { color: var(--danger); }
.stats-kpi-reprocessed { border-color: var(--accent-soft); }
.stats-kpi-reprocessed .stat-tile__value { color: var(--accent); }
.stats-panel {
  margin: 0 0 var(--space-4);
}
.stats-panel-header {
  cursor: default;
}
.stats-panel-header:hover {
  background: transparent;
}
.stats-panel .flat-card__meta {
  font-size: var(--type-body-size);
  line-height: 1.4;
}
.stats-chart {
  min-height: 190px;
  overflow-x: auto;
}
.stats-bars-svg {
  display: block;
  width: 100%;
  min-width: 320px;
  height: 190px;
}
.stats-chart-axis { stroke: var(--border); stroke-width: 1; }
.stats-bar { fill: var(--accent); }
.stats-bar-count {
  fill: var(--text);
  font-size: 11px;
  font-weight: 700;
}
.stats-bar-label {
  fill: var(--muted);
  font-size: 11px;
}
.stats-table-wrap { overflow-x: auto; }
.stats-breakdown-table {
  margin: 0;
  min-width: 420px;
  font-variant-numeric: tabular-nums;
}
.stats-breakdown-table th {
  color: var(--muted);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
}
.stats-breakdown-table th,
.stats-breakdown-table td {
  padding-top: 7px;
  padding-bottom: 7px;
  line-height: 1.25;
}

/* B27b — owner stats monthly drill-down + trend */
.owner-stats-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--border);
}
.owner-stats-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.owner-stats-tab.is-active {
  color: var(--accent, #5B4FE5);
  border-bottom-color: var(--accent, #5B4FE5);
}
.owner-stats-scope-chip {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12px;
  font-weight: 600;
}
.owner-stats-range-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  align-self: end;
  margin-bottom: 4px;
}
.owner-stats-range-btn {
  appearance: none;
  border: 0;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}
.owner-stats-range-btn.is-active {
  background: var(--accent, #5B4FE5);
  color: #fff;
}
.owner-stats-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.owner-stats-chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.owner-stats-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--accent, #5B4FE5);
}
.owner-stats-chart-hint {
  margin: 4px 0 10px;
  font-size: 12px;
}
.owner-stats-trend-chart {
  min-height: 200px;
  overflow-x: auto;
}
.owner-stats-trend-svg {
  min-height: 200px;
}
.owner-stats-trend-line {
  pointer-events: none;
}
.owner-stats-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) {
  .owner-stats-split-row { grid-template-columns: 1fr; }
}
.btn-link.owner-stats-view-monthly {
  color: var(--accent, #5B4FE5);
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn-link.owner-stats-view-monthly:hover {
  text-decoration: underline;
}
.stats-breakdown-table th.num,
.stats-breakdown-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stat-card-wide { grid-column: span 2; }
.stat-num { font-size: 26px; font-weight: 700; line-height: 1.1; }
.stat-num.stat-green  { color: #1e7a3d; }
.stat-num.stat-blue   { color: #15538a; }
.stat-num.stat-orange { color: #b1530c; }
.stat-num.stat-red    { color: #b71c1c; }
.stat-label { font-size: 12px; color: #777; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

/* B17c — shared dashboard kit (Usage & Cost, Receipt Stats) */
.dash-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
}
.dash-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  min-width: 0;
}
.dash-kpi-card--hero {
  border-color: var(--success-soft);
  background: linear-gradient(180deg, var(--success-soft) 0%, var(--surface) 72%);
}
.dash-kpi-card--hero .dash-kpi-card__value {
  color: var(--success);
  font-size: 28px;
}
.dash-kpi-card--loading {
  opacity: 0.65;
}
.dash-kpi-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
}
.dash-sparkline {
  display: block;
  width: 120px;
  height: 32px;
  flex-shrink: 0;
}
.dash-delta {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-muted);
}
.dash-delta-up { color: var(--success); }
.dash-delta-down { color: var(--danger); }
.dash-kpi-card__label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
  color: var(--muted);
}
.dash-kpi-card__value {
  font-size: var(--type-numeral-size);
  font-weight: var(--type-numeral-weight);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}
.dash-kpi-card__sub {
  font-size: 12px;
  color: var(--muted);
}
.dash-chart-panel {
  padding: 16px 18px;
  margin-bottom: var(--space-3);
}
.dash-chart-panel__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}
.dash-chart-panel__body {
  min-height: 120px;
}
.dash-stacked-chart--empty {
  padding: 12px 0;
}
.dash-stacked-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 168px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.dash-stacked-bar-col {
  flex: 1 1 48px;
  min-width: 48px;
  max-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
  cursor: default;
}
.dash-bar-tooltip {
  position: fixed;
  z-index: 1200;
  min-width: 168px;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #f5f5f7;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
}
.dash-bar-tooltip__date {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #ffffff;
}
.dash-bar-tooltip__rows {
  display: grid;
  gap: 5px;
}
.dash-bar-tooltip__row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
}
.dash-bar-tooltip__row--total {
  grid-template-columns: 1fr auto;
  font-weight: 600;
  color: #ffffff;
}
.dash-bar-tooltip__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.dash-bar-tooltip__label {
  color: #d1d1d6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-bar-tooltip__value {
  font-variant-numeric: tabular-nums;
  color: #f5f5f7;
  font-weight: 500;
}
.dash-bar-tooltip__row--total .dash-bar-tooltip__value {
  font-weight: 700;
}
.dash-bar-tooltip__divider {
  height: 1px;
  margin: 8px 0 6px;
  background: rgba(255, 255, 255, 0.14);
}
.dash-stacked-bar {
  width: 100%;
  max-width: 40px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  min-height: 4px;
  background: var(--surface-muted);
}
.dash-stacked-bar__seg {
  width: 100%;
  min-height: 2px;
}
.dash-stacked-bar__seg--empty {
  flex: 1;
  background: var(--border);
  opacity: 0.35;
}
.dash-stacked-bar-col__total {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-stacked-bar-col__day {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}
.dash-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.dash-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}
.dash-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.dash-table-details {
  padding: 0;
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.dash-table-details__summary {
  cursor: pointer;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
}
.dash-table-details__summary::-webkit-details-marker { display: none; }
.dash-table-details__summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.dash-table-details[open] .dash-table-details__summary::before {
  transform: rotate(90deg);
}
.dash-table-details .stats-table-wrap {
  padding: 0 18px 14px;
}
body.shell-usageCost-active .dash-kpi-strip {
  gap: var(--space-3);
}
body.shell-usageCost-active .dash-kpi-card {
  box-shadow: var(--shadow-card);
}
.dash-kpi-strip--stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.dash-chart-panel--hero {
  border-color: var(--accent-soft);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 48%);
}
.dash-chart-panel__meta {
  margin: -6px 0 12px;
  font-size: 12px;
  color: var(--muted);
}
.dash-top-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.dash-top-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-top-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.dash-top-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.dash-top-list__name {
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-top-list__meta {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.shell-stats-active .dash-kpi-strip {
  gap: var(--space-3);
}
body.shell-stats-active .dash-kpi-card,
body.shell-stats-active .dash-chart-panel {
  box-shadow: var(--shadow-card);
}
.rtable td.num, .rtable th.num { text-align: right; }
.muted { color: #888; font-size: 12px; }
.stats-table tr.stats-parent { background: #f7f9fc; }
.stats-table tr.stats-parent td:first-child { padding-left: 4px; }
.stats-table tr.stats-child td:first-child { padding-left: 32px; color: #555; }
.stats-table tr.stats-child td.stats-child-cell::before { content: '└─ '; color: #aaa; margin-right: 4px; }
.stats-toggle { background: none; border: none; cursor: pointer; font-size: 12px; color: #666; margin-right: 4px; padding: 0 4px; }
.stats-toggle.collapsed { color: #999; }

/* Detail image: indicate it's clickable */
.image-card { position: relative; }
/* PB6: compact image box — bounded height, scroll inside if image is taller */
.receipt-image-box {
  position: relative;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f4f5f7;
  border-radius: 6px;
  display: block;
}
.receipt-image-box #detailImage {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  cursor: zoom-in;
  transition: opacity 0.15s;
}
.receipt-image-box #detailImage:hover { opacity: 0.92; }
.receipt-pdf-embed {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: min(72vh, 900px);
  border: 0;
  background: #fff;
}
.receipt-pdf-embed--rail {
  height: 260px;
  min-height: 260px;
  display: block;
}
.receipt-media-open-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  padding: 0;
}
.receipt-media-open-overlay:focus-visible {
  outline: 3px solid var(--accent, #635bff);
  outline-offset: -3px;
}
.receipt-media-open-overlay:hover {
  background: rgba(0, 0, 0, 0.04);
}
.receipt-pdf-fallback {
  padding: 16px;
  color: var(--text);
  background: #fff;
}
.image-card-hint {
  font-size: 11px;
  color: #888;
  text-align: center;
  margin-top: 6px;
  display: grid;
  gap: 8px;
  justify-items: center;
}
.receipt-open-image-btn {
  min-width: 128px;
}

/* PB6: Closeable receipt image zoom MODAL (replaces former full-screen "view") */
body.no-scroll { overflow: hidden; }
.image-viewer {
  position: fixed; inset: 0; z-index: 9999;
  /* darker backdrop to read as a modal overlay (not a page) */
  background: rgba(10, 10, 12, 0.92);
  display: flex; flex-direction: column;
  /* allow fade-in feel without animation deps */
}
.image-viewer-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: rgba(28, 28, 32, 0.95); color: #eee;
  border-bottom: 1px solid #333;
}
.image-viewer-controls { display: flex; align-items: center; gap: 6px; }
.image-viewer-controls .btn { background: #333; color: #eee; border: 1px solid #444; }
.image-viewer-controls .btn:hover { background: #444; }
.image-viewer-zoom { color: #ddd; font-size: 13px; min-width: 50px; text-align: center; font-variant-numeric: tabular-nums; }
/* Legacy circular close button; retained for old markup paths. */
.image-viewer-close {
  background: transparent; color: #eee; border: 1px solid #555;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; padding: 0; line-height: 1;
}
.image-viewer-close:hover { background: rgba(255,255,255,0.12); border-color: #888; }
.image-viewer-back {
  background: #333;
  color: #eee;
  border: 1px solid #555;
  border-radius: 6px;
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.image-viewer-back:hover {
  background: #444;
  border-color: #777;
}
.image-viewer-stage {
  flex: 1; overflow: auto; position: relative;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 14px;
  box-sizing: border-box;
  cursor: grab; touch-action: pan-y pinch-zoom; user-select: none;
}
.image-viewer-stage.dragging { cursor: grabbing; }
.image-viewer-stage img,
.image-viewer-stage object {
  width: 100%;
  max-width: none;
  max-height: none;
  transform-origin: top center;
  will-change: width, transform; user-select: none; pointer-events: none;
  touch-action: none;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.image-viewer-stage img {
  height: auto;
}
.image-viewer-stage object {
  height: calc(100vh - 118px);
  min-height: 520px;
  border: 0;
  pointer-events: auto;
}
.image-viewer-hint {
  text-align: center; padding: 8px; background: rgba(28, 28, 32, 0.95); color: #999;
  font-size: 11px; border-top: 1px solid #333;
}
.btn-ghost { background: transparent; border: 1px solid var(--border); }
.upload-contract-note {
  background: #fff8e1; border: 1px solid #ffd54f; color: #5d4500;
  padding: 10px 12px; border-radius: 6px; font-size: 13px; margin: 8px 0 14px;
  line-height: 1.45;
}
.upload-contract-note strong { color: #4a3700; }

/* Developer-info collapsible (hides cascade flags / math gate scores / OCR chain) */
.dev-details {
  margin-top: 12px; padding: 8px 10px; background: #fafbfc;
  border: 1px dashed #d0d6df; border-radius: 6px; font-size: 12px;
}
.dev-details summary {
  cursor: pointer; color: #6b7686; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 0;
  user-select: none;
}
.dev-details summary:hover { color: #2a4f8a; }
.dev-details[open] summary { margin-bottom: 8px; border-bottom: 1px solid #e3e7ee; }
.dev-grid { display: grid; gap: 6px; }
.dev-grid > div { line-height: 1.4; }
.dev-grid b { font-weight: 600; color: #444; }
.dev-flag-list { margin-top: 4px; padding-left: 12px; }
.dev-flag { font-family: monospace; font-size: 11px; color: #777; padding: 1px 0; }

/* Friendly review/failed notes */
.friendly-note { color: #b1530c; font-size: var(--text-sub); font-style: italic; }

/* Review-queue tab bar */
.review-tabs {
  margin: 0;
}
#reviewView .view-desc { margin: 0; color: #6b7280; font-size: 12.5px; }
body.shell-review-active #reviewView .view-desc {
  flex: 1 0 100%;
  color: #5b53e8;
  font-size: 11.5px;
}
body.shell-review-active .review-toolbar-row {
  align-items: flex-start;
  row-gap: 8px;
}
body.shell-review-active .review-tabs,
body.shell-review-active .review-confirm-subtabs {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ececef;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
body.shell-review-active .review-search {
  flex-basis: 240px;
  width: 240px;
}
/* Inline filters for Review Queue (status/batch/date_from/date_to parity with receipts rail filters) */
body.shell-review-active .review-inline-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
body.shell-review-active .review-inline-filter {
  font: inherit;
  font-size: 12px;
  height: 26px;
  padding: 2px 6px;
  border: 1px solid #ececef;
  border-radius: 4px;
  background: #fff;
  min-width: 78px;
  color: #333;
}
body.shell-review-active .review-inline-filter:focus {
  outline: none;
  border-color: #c0c0d0;
}

/* Settings: V4 pipeline visualization */
.settings-pipeline-info { display: flex; flex-direction: column; gap: 6px; }
.settings-pipeline-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; background: #fafbfc;
  border: 1px solid var(--border); border-radius: 8px;
}
.settings-pipeline-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  background: #15538a; color: #fff;
  border-radius: 50%; font-weight: 700; font-size: 13px;
}
.settings-pipeline-step > div, .settings-pipeline-step > label { flex: 1; }
.settings-pipeline-arrow { color: #9ca3af; text-align: center; font-size: 16px; padding: 2px 0; }
.settings-pipeline-cond { font-size: 11px; color: #9ca3af; font-style: italic; margin-left: 4px; }
.settings-label-inline { display: flex; flex-direction: column; gap: 6px; }
.settings-label-inline select { width: 100%; max-width: 320px; }
.review-tab {
  min-height: 34px;
}
body.shell-review-active .review-tab {
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #5b5b66;
  font-size: 12.5px;
  padding: 7px 14px;
}
body.shell-review-active .review-tab.pill-toggle__option--selected {
  background: #eeedfb;
  color: #5b53e8;
}
.review-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  background: #e5e7eb; color: #4b5563; font-size: 11px; font-weight: 700;
  border-radius: 10px;
}
.review-tab.pill-toggle__option--selected .review-tab-count { background: rgba(255,255,255,0.65); color: var(--accent); }

#reviewView .review-empty-state {
  padding-block: var(--space-6);
  padding-inline: var(--space-4);
  color: var(--muted);
  text-align: center;
}
.review-flat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-flat-card__header {
  min-height: 68px;
}
.review-flat-card__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  cursor: default;
}
.review-flat-card__status {
  display: inline-flex;
  flex: 0 0 auto;
}
.review-flat-card__summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.review-flat-card__merchant {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-flat-card__meta,
.review-flat-card__context {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}
.review-flat-card__context {
  flex-wrap: wrap;
  row-gap: 4px;
}
.review-flat-card__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  max-width: 320px;
  flex-wrap: wrap;
}
.review-flat-card:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .review-flat-card__header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .review-flat-card__summary {
    flex-basis: calc(100% - 120px);
  }
  .review-flat-card__actions {
    width: 100%;
    justify-content: flex-start;
    padding-left: 34px;
  }
}

.review-confirm-subtabs {
  display: flex; gap: 6px; margin: 6px 0 14px; flex-wrap: wrap;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 8px;
}
body.shell-review-active .review-confirm-subtabs {
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  border-bottom: 0;
}
.review-confirm-subtab {
  background: none; border: 1px solid var(--border); padding: 7px 12px;
  font-size: 13px; font-weight: 700; color: #6b7280; cursor: pointer;
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
body.shell-review-active .review-confirm-subtab {
  height: 30px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #5b5b66;
  font-size: 12.5px;
  padding: 0 14px;
}
body.shell-review-active .review-confirm-subtab.active {
  background: #111318;
  color: #fff;
}
body.shell-review-active .review-confirm-subtab:hover {
  background: #fafafb;
}
body.shell-review-active .review-confirm-subtab.active:hover {
  background: #111318;
}
.review-confirm-subtab:hover { color: #1f2937; background: #fafbfc; }
.review-confirm-subtab.active { background: #15538a; color: #fff; border-color: #15538a; }
.review-confirm-subtab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  background: #e5e7eb; color: #4b5563; font-size: 10px; font-weight: 700;
  border-radius: 9px;
}
.review-confirm-subtab.active .review-confirm-subtab-count { background: rgba(255,255,255,0.25); color: #fff; }

/* Class badges — match the mockup palette
   (categorization_proposal.html lines 26-31). */
.class-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px;
}
.class-badge-structured { background: #d4eedb; color: #1b5e20; }
.class-badge-minimal-voucher { background: #dbeafe; color: #1e3a8a; }
.class-badge-voucher    { background: #e1d4f0; color: #4a148c; }
.class-badge-manual     { background: #fff3cd; color: #6b4f00; }
.class-badge-derived    {
  background: #fde8a8; color: #5a4400;
  border: 1px dashed #b88a00; font-size: 10px;
}

/* PB8 — derived total marker (R19). Mirrors the mockup palette
   (categorization_proposal.html line 36-37). The asterisk + tooltip flag
   manual-tag carve-out rows where the cascade auto-derived the total from
   vision; user should confirm before relying on it. Subtle, not error-red. */
.total-derived {
  color: #6b4f00;
  font-weight: 600;
  cursor: help;
  border-bottom: 1px dashed #b88a00;
}
.total-derived-marker {
  display: inline-block;
  color: #b88a00;
  font-weight: 700;
  margin-left: 4px;
  cursor: help;
}
.derived-total-footnote {
  margin: 8px 4px 0;
  padding: 6px 10px;
  font-size: 11px;
  color: #6b4f00;
  background: #fff8e1;
  border-left: 3px solid #b88a00;
  border-radius: 3px;
}

/* PB7 detail header — class badge sits above the form, naming the active class. */
.detail-class-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 10px;
  background: #fafbfc; border: 1px solid var(--border); border-radius: 8px;
}
.detail-class-note { color: #4b5563; font-size: var(--text-sub); }

/* PB7 simplified Manual Tag form (4-field per mockup, JROM signature UX). */
.manual-tag-form {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  max-width: 520px;
}
.manual-tag-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--text-sub); color: #555;
}
.manual-tag-form input, .manual-tag-form textarea, .manual-tag-form select {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
  font-size: var(--text-body); font-family: inherit;
}
.manual-tag-form textarea { min-height: 70px; resize: vertical; }

/* PB7 cash voucher particulars textarea spans the row. */
.field-section label.full-row {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 12px; font-size: var(--text-sub); color: #555;
}
.field-section label.full-row textarea {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
  font-size: var(--text-body); font-family: inherit; resize: vertical;
}

/* PB7 — class sections start hidden; JS toggles via [data-active-class] on the form. */
/* B-fu-1 — voucher + cash_voucher now use the same standard sections as structured. */
#detailForm [data-class-section] { display: none; }
#detailForm[data-active-class="structured"] [data-class-section~="structured"],
#detailForm[data-active-class="voucher"] [data-class-section~="voucher"],
#detailForm[data-active-class="cash_voucher"] [data-class-section~="cash_voucher"],
#detailForm[data-active-class="manual_tag"] [data-class-section~="manual_tag"] {
  display: block;
}
/* Within the merchant section, hide TIN/Address/Invoice on cash_voucher + voucher + manual_tag. */
#detailForm[data-active-class="cash_voucher"] #merchantSection [data-structured-only],
#detailForm[data-active-class="voucher"] #merchantSection [data-structured-only],
#detailForm[data-active-class="manual_tag"] #merchantSection [data-structured-only] {
  display: none;
}
/* voucherSection (old alternate form) is permanently hidden via HTML hidden attr (B-fu-1). */
/* manualTagSection (old alternate form) is permanently hidden; no data-class-section (B-fu-1-ext). */

/* ─── NC score chip ─────────────────────────────────────────────────────── */
.nc-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-muted);
  color: var(--muted);
}
.nc-chip.pass { background: var(--success-soft); color: var(--success); }
.nc-chip.fail { background: var(--warning-soft); color: var(--warning); }

/* ─── PB5 — manual-tag vendor picker match highlight ────────────────────── */
.mt-mark {
  background: #fff3a3;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.receipt-vendor-picker {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  display: grid;
  gap: 8px;
  max-width: 560px;
}
.receipt-vendor-picker .field-label {
  margin: 0;
}
.receipt-vendor-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
.receipt-vendor-search-label {
  min-width: 0;
}
.receipt-vendor-new-btn {
  min-height: 36px;
  white-space: nowrap;
}
.receipt-vendor-picker input {
  width: 100%;
  box-sizing: border-box;
}
.receipt-vendor-results {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.receipt-vendor-option {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: grid;
  gap: 3px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.receipt-vendor-option:last-child {
  border-bottom: 0;
}
.receipt-vendor-option:hover,
.receipt-vendor-option.active {
  background: var(--surface-hover);
}
.receipt-vendor-option strong {
  font-size: var(--text-body);
}
.receipt-vendor-option span,
.receipt-vendor-empty,
.receipt-vendor-feedback {
  color: var(--muted);
  font-size: var(--text-sub);
}
.receipt-vendor-empty {
  padding: 10px;
}
.receipt-vendor-feedback.error {
  color: var(--danger);
}
.receipt-vendor-create {
  display: grid;
  gap: 10px;
  padding: 10px;
}
.receipt-vendor-create .field-label {
  display: grid;
  gap: 4px;
  color: var(--text);
  font-size: var(--text-sub);
}
.receipt-vendor-create-actions,
.receipt-vendor-empty-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.receipt-vendor-detail-panel {
  margin-top: 10px;
  max-width: 760px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.receipt-vendor-detail-header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.receipt-vendor-detail-header span {
  color: var(--muted);
  font-size: var(--text-sub);
}
.receipt-vendor-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.receipt-vendor-detail-panel .vendor-detail-section {
  margin: 0;
}
.receipt-vendor-detail-panel .vendor-detail-section h3 {
  font-size: var(--text-header);
}
.receipt-section[data-receipt-section="vendor"] {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.receipt-section[data-receipt-section="vendor"] .receipt-section-header-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.receipt-section[data-receipt-section="vendor"] .receipt-section-header {
  width: 100%;
  min-height: 54px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.receipt-section[data-receipt-section="vendor"] .receipt-section-title {
  font-size: var(--text-header);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.receipt-section[data-receipt-section="vendor"] .receipt-section-summary {
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.receipt-section[data-receipt-section="vendor"] .receipt-section-chevron {
  font-size: var(--text-sub);
  color: var(--muted);
  transition: transform 0.16s ease;
}
.receipt-section[data-receipt-section="vendor"].is-open .receipt-section-chevron {
  transform: rotate(180deg);
}
.receipt-section-inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--text-sub);
  font-weight: 700;
  white-space: nowrap;
}
.receipt-section-inline-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
}
.receipt-vendor-header-search {
  white-space: nowrap;
}
.receipt-vendor-draft-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.receipt-vendor-staged-label {
  color: var(--warning);
  font-size: var(--text-sub);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.restore-ai-button {
  white-space: nowrap;
}
.receipt-section[data-receipt-section="vendor"].has-staged-changes .receipt-section-summary {
  color: var(--warning);
}
.receipt-section[data-receipt-section="vendor"] .receipt-section-body {
  padding: 14px;
  display: grid;
  gap: 12px;
}
.receipt-vendor-add-new {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}
.receipt-vendor-add-new-grid,
.receipt-vendor-read-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.receipt-vendor-add-new-wide,
.receipt-vendor-read-wide {
  grid-column: 1 / -1;
}

/* HFB8a: redesign of matched-vendor "Save vendor overrides" card.
   Clean labeled form grid (label above input via .field-label flex-col), inputs fill cell (no truncation),
   2-col desktop / 1-col narrow, consistent spacing, matches house .field-label + input styles.
   .vendor-full-width for Address span. Compact/readable. */
.vendor-matched-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
@media (max-width: 900px) {
  .vendor-matched-edit-grid {
    grid-template-columns: 1fr;
  }
}
.vendor-matched-edit-grid .field-label,
.vendor-matched-edit-grid label {
  /* House style: label above input (col), consistent with .fields-grid / Sold-To / structured forms + .field-label */
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.vendor-matched-edit-grid .field-label input,
.vendor-matched-edit-grid .field-label select,
.vendor-matched-edit-grid label input,
.vendor-matched-edit-grid label select {
  /* Fill the grid cell fully; house input tokens + explicit to prevent any prior inline cram */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}
.vendor-matched-edit-grid .field-label input:focus,
.vendor-matched-edit-grid .field-label select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.vendor-matched-edit-grid .vendor-full-width {
  grid-column: 1 / -1;
}
.receipt-vendor-add-new-actions {
  align-self: end;
}
.receipt-vendor-read-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}
.receipt-vendor-read-card span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: var(--text-sub);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.receipt-vendor-read-card strong {
  font-size: var(--text-body);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.receipt-vendor-read-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: var(--text-sub);
}
.receipt-vendor-read-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  .receipt-section[data-receipt-section="vendor"] .receipt-section-header-wrap {
    grid-template-columns: 1fr;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .receipt-section[data-receipt-section="vendor"] .receipt-section-header {
    min-height: auto;
  }
  .receipt-section[data-receipt-section="vendor"] .receipt-section-summary {
    white-space: normal;
  }
  .receipt-vendor-draft-controls {
    justify-content: flex-start;
  }
  .receipt-vendor-search-row {
    grid-template-columns: 1fr;
  }
  .receipt-vendor-new-btn {
    width: 100%;
  }
}

/* ─── Upload view ────────────────────────────────────────────────────────── */
.upload-shell {
  display: grid;
  grid-template-columns: minmax(0, 682px) 280px;
  gap: 18px;
  align-items: start;
  max-width: 980px;
}
.upload-main-column,
.upload-side-column {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.upload-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: visible;
}
.upload-panel-head {
  min-height: 44px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.upload-panel-head h2 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.upload-panel-body {
  padding: 18px;
}
.upload-drop-zone {
  width: 100%;
  min-height: 262px;
  padding: 30px;
  border: 2px dashed var(--accent);
  border-radius: 10px;
  background: #fbfaff;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.upload-drop-zone:hover,
.upload-drop-zone:focus-visible,
.upload-drop-zone.is-dragging {
  background: var(--accent-soft);
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.upload-drop-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 6px;
}
.upload-drop-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.upload-drop-copy {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.upload-drop-btn {
  margin-top: 8px;
  pointer-events: none;
}
.upload-accepts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
}
.upload-accepts b {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 11px;
}
.upload-contract-note {
  margin-top: 14px;
}
.upload-batch-hint {
  font-size: 12px;
}
.upload-batch-select {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.upload-batch-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.upload-new-batch-toggle {
  width: 100%;
  justify-content: center;
  border-style: dashed;
  color: var(--accent);
  margin-top: 10px;
}
.upload-new-batch-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upload-hold-row {
  display: flex;
  align-items: center;
  min-height: 22px;
}
.upload-hold-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
}
.upload-hold-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
}
.upload-new-batch-input {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  box-sizing: border-box;
}
.upload-new-batch-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.upload-new-batch-btns {
  display: flex;
  gap: 6px;
}
.upload-batch-feedback {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid #bcd0f5;
  border-radius: 8px;
  background: #e9f0ff;
  font-size: 12px;
  color: #1f4496;
  line-height: 1.4;
}
.upload-batch-feedback.is-held {
  color: var(--accent);
  font-weight: 600;
}
.upload-pin-grid {
  display: grid;
  gap: 12px;
}
.upload-combobox {
  position: relative;
  display: grid;
  gap: 6px;
}
.field-hint {
  color: var(--muted);
  font-weight: 500;
}
.upload-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.upload-selected span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-selected .icon-btn {
  font-size: 14px;
  padding: 2px 6px;
  color: var(--accent);
}
.upload-combo-results {
  position: absolute;
  z-index: 70;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 16px 32px rgba(23, 32, 38, 0.12);
}
.upload-combo-option {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: grid;
  gap: 2px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.upload-combo-option:last-child { border-bottom: 0; }
.upload-combo-option:hover { background: var(--surface-hover); }
.upload-combo-option strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.upload-combo-option span,
.upload-combo-empty {
  color: var(--muted);
  font-size: 12px;
}
.upload-combo-empty {
  padding: 10px;
}
.typeahead-option {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: grid;
  gap: 2px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.typeahead-option:last-child {
  border-bottom: 0;
}
.typeahead-option:hover,
.typeahead-option.active {
  background: var(--surface-hover);
}
.typeahead-option strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.typeahead-option span,
.typeahead-empty {
  color: var(--muted);
  font-size: 12px;
}
.typeahead-empty,
.typeahead-footer {
  padding: 10px;
}
.typeahead-error {
  color: var(--danger);
}
/* Shared stacking for all attachTypeaheadCombobox dropdowns (F8).
   Markup uses class typeahead-dropdown; previously only per-instance rules set position/z-index. */
.typeahead-dropdown {
  position: absolute;
  z-index: 1000;
}
.upload-feedback {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
}
.upload-tips-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.upload-tips-list li::before {
  content: "✓";
  color: var(--text);
  margin-right: 7px;
}
@media (max-width: 980px) {
  .upload-shell {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .upload-side-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .upload-side-column {
    grid-template-columns: 1fr;
  }
  .upload-drop-zone {
    min-height: 220px;
    padding: 22px 16px;
  }
}

/* ─── Field forms ────────────────────────────────────────────────────────── */
.field-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.field-label input, .field-label select, .field-label textarea {
  height: 36px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; font-size: 13px; background: var(--surface);
  color: var(--text);
}
.field-label textarea {
  min-height: 76px;
  height: auto;
  padding: 8px 10px;
  resize: vertical;
}
.field-label input:focus, .field-label select:focus, .field-label textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

/* ─── Receipt detail ─────────────────────────────────────────────────────── */
.detail-layout {
  display: grid;
  /* PB6: image col ~20% of detail surface (200px ≈ 20% of typical ~1000px detail width).
     Data fields get the remaining ~80%. Full image lives in the click-to-zoom modal. */
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
}
.detail-image-col { position: sticky; top: 24px; }
.image-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  padding: 8px;
}
/* Legacy fallback: when image is NOT inside .receipt-image-box (PB6 wrapper),
   keep prior behaviour. New PB6 wrapper handles its own sizing/scrolling. */
.image-card > img { width: 100%; display: block; }
.detail-fields-col { display: grid; gap: 20px; }
.receipt-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 18px;
  align-items: start;
}
.receipt-detail-main {
  min-width: 0;
  display: grid;
  gap: 12px;
}
.receipt-right-rail {
  min-width: 0;
  display: grid;
  gap: 12px;
  position: sticky;
  top: 14px;
  align-self: start;
}
.receipt-detail-layout.image-minimized {
  grid-template-columns: minmax(0, 1fr) 48px;
}
.receipt-detail-layout.image-minimized .receipt-right-rail {
  gap: 0;
}
.receipt-detail-layout.image-minimized .receipt-rail-card,
.receipt-detail-layout.image-minimized #receiptRailDocumentInfo,
.receipt-detail-layout.image-minimized #receiptRailReviewQueue {
  display: none;
}
.receipt-image-rail-restore {
  width: 48px;
  min-height: 156px;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sub);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.receipt-image-rail-restore[hidden] {
  display: none;
}
.receipt-image-rail-restore span:last-child {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.receipt-image-rail-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.receipt-image-rail-toggle:hover,
.receipt-image-rail-restore:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.receipt-image-minimize-btn {
  justify-self: stretch;
  justify-content: center;
}
.receipt-rail-card .flat-card__header {
  cursor: default;
  justify-content: space-between;
}
.receipt-rail-card .flat-card__header:hover {
  background: transparent;
}
.receipt-rail-card .flat-card__title {
  font-size: var(--text-header);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.receipt-rail-card .flat-card__body {
  display: grid;
  gap: 12px;
}
.receipt-rail-image-box {
  max-height: calc(100vh - 250px);
  min-height: 300px;
  border: 1px solid var(--border);
}
.receipt-rail-info-list {
  display: grid;
  gap: 10px;
  margin: 0;
}
.receipt-rail-info-row {
  display: grid;
  gap: 3px;
}
.receipt-rail-info-row dt {
  color: var(--muted);
  font-size: var(--text-sub);
  font-weight: 800;
  text-transform: uppercase;
}
.receipt-rail-info-row dd {
  margin: 0;
  color: var(--text);
  font-size: var(--text-body);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.receipt-rail-review-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.receipt-rail-review-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 8px;
  align-items: center;
}
.receipt-rail-review-check {
  color: var(--muted);
  font-size: var(--text-sub);
  line-height: 1;
}
.receipt-rail-review-text {
  min-width: 0;
  font-size: var(--text-body);
  font-weight: 650;
  overflow-wrap: anywhere;
}
.receipt-rail-review-item .status-badge {
  grid-column: 2;
  justify-self: start;
}
.detail-lock-notice {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #e1c4c4;
  border-radius: 6px;
  background: #f8eded;
  color: #8b1e1e;
  font-size: var(--text-sub);
  font-weight: 600;
}
.btn.receipt-locked:disabled {
  background: #eef0f3;
  border-color: #d4d8de;
  color: #777;
  opacity: 0.6;
  cursor: not-allowed;
}

.receipt-detail-header {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.receipt-detail-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.receipt-detail-header__title-group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.receipt-detail-header__title-group h1 {
  margin: 0;
  font-size: var(--text-header);
  line-height: 1.2;
  font-weight: var(--type-display-weight);
}
.receipt-detail-header__badges {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.receipt-status-explanation {
  font-size: 13px;
  color: var(--color-text-muted, #666);
  margin-top: var(--space-1, 4px);
  line-height: 1.4;
}
.receipt-status-explanation--multiline {
  white-space: pre-line;
}

/* B21b — directive field attention (amber border + marker) */
.field-attention {
  position: relative;
  border: 2px solid #f9ab00;
  border-radius: 8px;
  background: rgba(249, 171, 0, 0.06);
  padding: 8px;
}
.field-attention-marker {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  line-height: 1;
  color: #b06000;
  pointer-events: none;
}
.export-required-warning {
  color: #9a5b00;
  background: rgba(249, 171, 0, 0.12);
  border-left: 3px solid #f9ab00;
  padding: 2px 6px;
  border-radius: 4px;
}
.export-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
button.export-status-pill {
  cursor: pointer;
  font-family: inherit;
}
.export-status-pill--clickable:hover,
.export-status-pill--clickable:focus-visible {
  text-decoration: underline;
  box-shadow: 0 0 0 2px rgba(91, 110, 245, 0.18);
}
.export-status-pill--needs-confirm {
  border-color: #f9ab00;
  background: rgba(249, 171, 0, 0.14);
  color: #7a4b00;
}
.export-status-pill--needs-review {
  border-color: #8aa4ff;
  background: rgba(91, 110, 245, 0.12);
  color: #293caa;
}
.export-status-pill--done {
  border-color: #2e9d57;
  background: rgba(46, 157, 87, 0.12);
  color: #116032;
}
.receipt-vendor-invoice-row {
  margin: 0 0 12px;
  max-width: 360px;
}
.receipt-vendor-invoice-row .field-label {
  margin: 0;
}
.receipt-vendor-invoice-row input {
  width: 100%;
  box-sizing: border-box;
}
#soldToSection .sold-to-company-map {
  grid-column: 1 / -1;
}

/* B21b — compact vendor action buttons (JROM compact UI) */
.vendor-action-compact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 8px 0 4px;
}
.vendor-action-compact__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vendor-action-compact__buttons .btn-sm {
  font-size: 13.5px;
  text-transform: none;
  border-radius: 8px;
  min-height: 30px;
  padding: 0 12px;
}
.vendor-action-compact__buttons .btn-outline {
  font-size: 12px;
  min-height: 28px;
  padding: 0 10px;
}
.vendor-action-compact__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  max-width: 420px;
}
.receipt-detail-header__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
#detailView .btn-sm,
#detailView .btn-xs {
  font-size: var(--text-sub);
}
#detailView .form-actions .btn {
  font-size: var(--text-body);
}
#detailView .status-badge,
#detailView .vtag,
#detailView .vtag-supp {
  font-size: var(--text-sub);
}
#detailView .image-card-hint,
#pipelineCard .conf,
#pipelineCard .muted,
#pipelineCard .nc-chip,
#pipelineCard .pending-approval-badge,
#pipelineCard .review-reason-badge,
#pipelineCard .action-text,
#pipelineCard .action-muted,
#pipelineCard .action-reprocess,
#pipelineCard .dev-details,
#pipelineCard .dev-details summary,
#pipelineCard .dev-grid,
#pipelineCard .dev-flag,
#detailForm .vat-badge,
#detailForm .vat-pill,
#detailForm .vendor-match-pill,
#detailForm .source-badge,
#detailForm .vendor-score,
#detailForm .vat-pill-computed {
  font-size: var(--text-sub);
}
.receipt-detail-stepbar {
  min-width: 0;
}
.receipt-detail-stepbar .step-bar {
  overflow-x: auto;
  padding-bottom: 2px;
}
.receipt-detail-stepbar .step-bar__step {
  min-width: 132px;
  align-items: flex-start;
  font-size: var(--text-body);
}
.receipt-detail-stepbar .step-bar__marker {
  margin-top: 1px;
  font-size: var(--text-sub);
}
.receipt-detail-stepbar .step-bar__step--active .step-bar__marker::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.step-bar__content {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.step-bar__label,
.step-bar__sub {
  overflow-wrap: anywhere;
}
.step-bar__sub {
  font-size: var(--text-sub);
  line-height: 1.25;
  color: var(--muted);
  font-weight: 500;
}
#detailView .flat-card__title {
  font-size: var(--text-header);
}
#detailView .flat-card__meta {
  font-size: var(--text-sub);
}

.receipt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.receipt-hero-image {
  width: 96px;
  height: 96px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-muted);
}
.receipt-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.receipt-hero-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.receipt-hero-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.receipt-hero-total {
  font-size: var(--text-body);
  line-height: 1.1;
  font-weight: 800;
}
.receipt-hero-meta,
.receipt-hero-issue {
  font-size: var(--text-sub);
  color: var(--muted);
}
.receipt-hero-vendor {
  font-size: var(--text-body);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.receipt-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.issue-line-blue { color: var(--accent); }
.issue-line-green { color: var(--success); }
.issue-line-yellow { color: var(--warning); }
.issue-line-red { color: var(--danger); }
.receipt-detail-support {
  display: grid;
  gap: 12px;
}
.receipt-sections,
#detailForm {
  display: grid;
  gap: 12px;
}
.receipt-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.receipt-section-header-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
}
.receipt-section > .receipt-section-header,
.receipt-section-header-wrap > .receipt-section-header {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.receipt-section-header-wrap > .receipt-section-header {
  padding: 0;
}
.receipt-section-title {
  font-size: var(--text-header);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.receipt-section-summary {
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.receipt-section-chevron {
  font-size: var(--text-sub);
  color: var(--muted);
  transition: transform 0.16s ease;
}
.receipt-section.is-open .receipt-section-chevron {
  transform: rotate(180deg);
}
.receipt-section-body {
  padding: 14px;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--border);
}
.receipt-section-header-wrap + .receipt-section-body {
  border-top: 0;
}
.receipt-section-body-card {
  display: grid;
  gap: 12px;
}
.receipt-section-body-card h3 {
  margin: 0;
  font-size: var(--text-header);
  font-weight: 700;
}
.receipt-flat-section {
  box-shadow: var(--shadow-card);
}
.receipt-flat-section > .receipt-section-header {
  border-bottom: 1px solid var(--border);
}
.receipt-flat-section > .receipt-section-body {
  border-top: 0;
}
.receipt-vendor-flat {
  display: grid;
}
.receipt-vendor-flat__header {
  cursor: default;
  justify-content: space-between;
  align-items: flex-start;
}
.receipt-vendor-flat__header:hover {
  background: transparent;
}
.receipt-vendor-flat__title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.receipt-vendor-flat__title .flat-card__title {
  overflow-wrap: anywhere;
}
.receipt-vendor-review-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--text-sub);
  font-weight: 700;
}
.receipt-vendor-change-link {
  white-space: nowrap;
}
.receipt-vendor-flat__body {
  display: grid;
  gap: 7px;
}
.receipt-vendor-flat__name {
  font-size: var(--text-body);
  line-height: 1.35;
}
.receipt-vendor-flat__line,
.receipt-vendor-flat__meta {
  color: var(--muted);
  font-size: var(--text-sub);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.receipt-vendor-unmatch-action {
  justify-self: start;
  margin-top: 2px;
}
.receipt-money-items-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.receipt-amount-card-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.receipt-amount-card {
  min-width: 0;
  min-height: 98px;
  padding: 12px 10px;
  align-content: start;
  overflow: visible;
}
.receipt-amount-card.metric-card {
  background: var(--surface);
  color: var(--text);
}
.receipt-amount-card .metric-card__label {
  font-size: var(--text-header);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  line-height: 1.2;
  text-transform: uppercase;
}
.receipt-amount-card .metric-card__icon {
  font-size: var(--text-sub);
}
.receipt-amount-card .metric-card__value {
  color: var(--text);
  font-size: var(--text-body);
  white-space: nowrap;
  overflow: visible;
}
/* Quick fix: make the 4 main amount cards (subtotal/net/vat/total) directly editable in-place.
   Styled to read cleanly (no heavy borders until focus), no duplicate input rows. */
.receipt-amount-card input.metric-card__value {
  border: 0;
  background: transparent;
  padding: 1px 0;
  margin: 1px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  color: inherit;
  width: 100%;
  min-width: 0;
}
.receipt-amount-card input.metric-card__value:focus {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 3px 5px;
  outline: none;
}
.receipt-amount-card input.metric-card__value::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
.receipt-amount-card .metric-card__subline {
  font-size: var(--text-sub);
}
.receipt-amount-card.metric-card--discount .metric-card__icon {
  background: var(--card-peach);
  color: var(--card-peach-text);
}
.receipt-amount-card.metric-card--discount .metric-card__label {
  color: var(--card-peach-text);
}
.receipt-amount-card.metric-card--net .metric-card__icon {
  background: var(--card-mint);
  color: var(--card-mint-text);
}
.receipt-amount-card.metric-card--net .metric-card__label {
  color: var(--card-mint-text);
}
.receipt-amount-card.metric-card--vat .metric-card__icon {
  background: var(--card-sky);
  color: var(--card-sky-text);
}
.receipt-amount-card.metric-card--vat .metric-card__label {
  color: var(--card-sky-text);
}
.receipt-amount-card.metric-card--total .metric-card__icon {
  background: var(--card-lavender);
  color: var(--card-lavender-text);
}
.receipt-amount-card.metric-card--total .metric-card__label {
  color: var(--card-lavender-text);
}
.receipt-amount-card-row + h3,
.receipt-meta-strip + h3 {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.receipt-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 8px 0 2px;
  color: var(--muted);
  font-size: var(--text-sub);
  line-height: 1.45;
}
.receipt-meta-strip__item {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
}
.receipt-meta-strip__item:not(:last-child)::after {
  content: "·";
  padding: 0 8px;
  color: var(--border-strong);
}
.receipt-meta-strip__label {
  color: var(--muted);
  font-weight: 700;
}
.receipt-meta-strip__value {
  margin-left: 4px;
  color: var(--text);
  font-weight: 600;
}
/* After removing duplicate "Edit values" h3 + main amount inputs (now in cards), ensure the first money tier
   after meta-strip is visually separated like before. */
#amountsSection .receipt-meta-strip + .money-tier {
  padding-top: 10px;
  border-top: 1px solid rgba(215, 224, 229, 0.8);
}
.money-tier {
  display: grid;
  gap: 10px;
}
.money-tier + .money-tier,
.vat-breakdown + .money-tier {
  padding-top: 12px;
  border-top: 1px solid rgba(215, 224, 229, 0.8);
}
.money-tier-primary,
.money-tier-secondary,
.money-tier-tertiary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.money-tier-vat {
  grid-template-columns: minmax(0, 1fr);
}
.money-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.money-label {
  color: var(--muted);
  font-size: var(--text-sub);
  font-weight: 800;
  text-transform: uppercase;
}
.money-value-cell {
  position: relative;
  display: block;
}
.money-value-cell input,
.money-value-cell select {
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-body);
}
.money-tier-primary .money-value-cell input {
  min-height: 40px;
  font-size: var(--text-body);
  font-weight: 800;
}
.money-tier-secondary .money-value-cell input,
.money-tier-secondary .money-value-cell select {
  font-size: var(--text-body);
  font-weight: 650;
}
.money-tier-tertiary .money-value-cell input {
  font-size: var(--text-body);
}
.money-value-cell input:not(.has-value):not(:focus) {
  color: transparent;
}
.money-empty {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

/* B3 — financial override Save/Revert controls in money edit section */
.financial-override-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}
.financial-override-controls .btn-sm {
  font-size: 11px;
  padding: 2px 8px;
}
.financial-override-controls .muted {
  font-size: 10px;
  color: var(--muted);
}
.money-value-cell input:focus + .money-empty {
  display: none;
}
.money-value-cell input:focus,
.money-value-cell select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.categorize-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}
.receipt-category-card {
  box-shadow: var(--shadow-card);
}
.receipt-category-card__header {
  cursor: default;
  justify-content: space-between;
}
.receipt-category-card__header:hover {
  background: transparent;
}
.receipt-category-card__header .flat-card__title {
  font-size: var(--text-header);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.receipt-category-card__header .flat-card__meta {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 12px;
  font-size: var(--text-sub);
  text-align: right;
}
.receipt-category-card__body {
  padding-top: 14px;
}
.categorize-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: var(--text-sub);
  font-weight: 700;
  text-transform: uppercase;
}
.categorize-grid select {
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-body);
}
#lineItemsSection .line-item-row {
  grid-template-columns: minmax(260px, 1fr) minmax(64px, 72px) minmax(88px, 96px) minmax(96px, 112px) 28px;
}
#lineItemsContainer {
  min-width: 0;
  overflow: hidden;
}
#lineItemsSection .line-item-row input {
  min-width: 0;
  padding-inline: 4px;
  font-size: var(--text-body);
}

.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: var(--text-body);
  display: grid;
  gap: 3px;
}
.info-row { display: flex; gap: 6px; align-items: baseline; }
.info-label { font-size: 11px; font-weight: 600; min-width: 80px; color: var(--muted); }
.receipt-detail-subtext { font-size: var(--text-sub); }
#pipelineCard .info-row { line-height: 1.25; }
.math-flags { margin-top: 8px; display: grid; gap: 4px; }
.math-flag { font-size: var(--text-sub); color: var(--warning); background: var(--warning-soft); padding: 3px 8px; border-radius: 4px; }

.field-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.field-section h3 { margin: 0 0 12px; font-size: var(--text-header); font-weight: 600; }
.fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.fields-grid label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sub); font-weight: 600; color: var(--muted); }
.fields-grid input,
.fields-grid select {
  height: 32px; padding: 0 8px; border: 1px solid var(--border);
  border-radius: 5px; font: inherit; font-size: var(--text-body); color: var(--text); background: var(--surface);
}
.fields-grid input:focus,
.fields-grid select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.vat-breakdown {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--surface-muted);
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.vat-breakdown-label {
  display: block;
  font-size: var(--text-header);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vat-breakdown-label em { font-size: var(--text-sub); font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.vat-breakdown .fields-grid input { background: var(--surface); opacity: 0.85; }
.section-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.section-title-row h3 { margin: 0; flex: 1; font-size: var(--text-header); font-weight: 600; }
.match-label { font-size: var(--text-sub); margin-top: 6px; }

.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-actions-spacer { flex: 1 1 auto; }
/* de-emphasized small icon-only for Delete/Discard on action row right */
#detailView .form-actions .btn-icon {
  font-size: 13px;
  padding: 3px 5px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  min-width: 26px;
  line-height: 1;
  opacity: 0.7;
}
#detailView .form-actions .btn-icon:hover {
  opacity: 1;
  background: var(--surface-muted);
  border-color: var(--border);
}

/* ─── Registry panels (review inline add) ───────────────────────────────── */
#registryPanels { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }
.reg-panel {
  border: 1px solid var(--warning);
  border-radius: 8px;
  background: var(--warning-soft);
  overflow: hidden;
}
.reg-panel-added {
  border-color: var(--success);
  background: var(--success-soft);
}
.reg-panel-disabled {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}
.reg-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
}
.reg-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--text-body); }
.reg-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.reg-panel-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
}
.reg-panel-disabled-note {
  padding: 0 14px 12px;
  color: var(--muted);
  font-size: var(--text-sub);
}
.reg-panel-fields {
  padding: 0 14px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.reg-panel-fields .field-label { margin: 0; }

.json-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.json-panel summary { padding: 10px 14px; font-size: var(--text-header); font-weight: 600; cursor: pointer; }
.json-panel pre { margin: 0; padding: 12px 14px; font-size: var(--text-sub); overflow-x: auto; max-height: 300px; background: var(--surface-muted); border-top: 1px solid var(--border); }

/* ─── Line items ─────────────────────────────────────────────────────────── */
.line-item-row {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) 42px 72px 72px 28px;
  gap: 0;
  align-items: center;
  min-height: 32px;
  border-bottom: 1px solid rgba(215, 224, 229, 0.72);
}
.line-item-row:not(.line-header):nth-child(even) {
  background: rgba(246, 248, 250, 0.58);
}
.line-item-row input {
  width: 100%;
  height: 32px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-body);
}
.line-item-row input[data-field="qty"],
.line-item-row input[data-field="unit_price"],
.line-item-row input[data-field="total"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.line-item-row input:focus {
  background: var(--surface);
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 0;
}
.line-header {
  min-height: 28px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-header);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.line-header span:nth-child(n+2) {
  text-align: right;
}
.rm-line-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-sub);
  line-height: 1;
  padding: 0;
}
.rm-line-btn:hover {
  background: var(--surface-hover);
  color: var(--danger);
}
.rm-line-btn:focus-visible {
  background: var(--surface-hover);
  color: var(--danger);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.line-items-empty {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: var(--text-sub);
}

.line-items-sum-row {
  margin: 6px 0 8px;
  padding: 6px 8px;
  background: var(--surface-muted, #f7f9fb);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--text-sub);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.line-items-sum-row .sum-label { color: var(--muted); }
.line-items-sum-row .sum-value { font-variant-numeric: tabular-nums; }
.line-items-sum-row .sum-vs { color: var(--muted); margin-inline: 4px; }
.line-items-sum-row .sum-diff { font-size: 0.9em; }
.line-items-sum-row .sum-diff.mismatch { color: #92400e; font-weight: 600; }
.line-items-sum-row .sum-diff.match { color: #166534; font-weight: 600; }

/* ─── Registry tables ───────────────────────────────────────────────────── */
.registry-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
table.reg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.reg-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--muted);
}
table.reg-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.reg-table tr:last-child td { border-bottom: none; }
.row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ─── Business Categories view ─────────────────────────────────────────── */
body.shell-businessCategories-active .view#businessCategoriesView {
  padding: 0;
  min-height: calc(100vh - 99px);
}
body.shell-businessCategories-active #businessCategoriesView > .view-header {
  display: none;
}
.business-categories-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0;
  padding: 12px 22px;
  border-bottom: 1px solid #f2f2f4;
  background: var(--surface);
}
.business-categories-desc {
  min-width: 0;
  color: var(--muted);
  font-size: 12.5px;
}
.business-categories-toolbar .page-info {
  margin-left: 0;
  color: var(--muted);
}
.business-categories-layout-container {
  height: calc(100vh - 141px);
  min-height: calc(100vh - 141px);
  gap: 0;
}
.business-categories-table-wrap {
  flex: 1;
  min-height: 0;
  border: 0;
  border-radius: 0;
}
.business-categories-table {
  min-width: 900px;
}
.business-categories-table th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.business-categories-table td {
  height: 49px;
}
.business-category-row {
  cursor: pointer;
}
.business-category-row:hover {
  background: var(--surface-hover);
}
.business-category-row.sel {
  background: #eeedfb;
}
.business-category-desc-cell {
  max-width: 380px;
  color: var(--muted);
}
.business-category-sort-cell {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.business-category-actions-cell .row-actions {
  justify-content: flex-start;
}
.business-category-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.business-category-status-active {
  background: var(--success-soft);
  color: var(--success);
}
.business-category-status-inactive {
  background: var(--surface-muted);
  color: var(--muted);
}
.business-category-inspector .receipt-inspector-actions {
  display: grid;
  gap: 8px;
}
.business-category-inspector .receipt-inspector-actions .btn {
  justify-content: center;
}
.business-category-preview-name {
  margin: 4px 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}
.business-category-preview-status {
  margin-bottom: 16px;
}

/* ─── Vendor list ──────────────────────────────────────────────────────── */
.vendors-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.vendors-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.vendors-title-row h1 {
  margin: 0;
  color: var(--text);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: 1.2;
}
.vendors-count-pill {
  min-height: 24px;
  margin-left: 0;
  padding: 3px 10px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: 1.2;
  white-space: nowrap;
}
.vendors-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.vendors-header .btn {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
}
.vendors-filter-shell {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 620px);
  gap: var(--space-4);
  align-items: start;
  margin: 0 0 var(--space-5);
}
.vendors-filter-main,
.vendors-filter-side {
  display: grid;
  gap: var(--space-3);
}
.vendors-source-toggle-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(150px, 0.75fr) auto;
  gap: var(--space-3);
  align-items: end;
}
.vendors-receipts-date-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: var(--space-3);
  align-items: end;
}
.vendors-search-row,
.vendors-per-page-row {
  min-width: 0;
}
.vendors-per-page-filter,
.vendors-per-page-filter select,
.vendors-receipts-filter select,
.vendors-receipts-date-filter input {
  width: 100%;
}
#vendorsView .vendor-search input,
#vendorsView .vendor-filter select,
#vendorsView .vendor-filter input[type="date"] {
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border-color: var(--border);
  font-size: var(--type-body-size);
}
#vendorsView .vendor-search input::placeholder {
  color: var(--muted);
}
#vendorsView .vendor-filter > span {
  color: var(--muted);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
}
#vendorsView .vendor-filter-deleted {
  justify-self: end;
  align-self: end;
  min-height: 40px;
  color: var(--muted);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: 0;
  text-transform: none;
}
#vendorsView .vendor-filter-deleted input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
#vendorsView .pill-toggle {
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
#vendorsView .pill-toggle .pill-toggle__option {
  height: 40px;
  padding: 0 14px;
  border-right: 1px solid var(--border);
  border-radius: 0;
  font-size: var(--type-body-size);
}
#vendorsView .pill-toggle .pill-toggle__option:last-child {
  border-right: 0;
}
#vendorsView .pill-toggle .pill-toggle__option--selected {
  background: var(--accent-soft);
  color: var(--accent);
}
.vendor-toolbar,
.company-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 220px;
  gap: 12px;
  align-items: end;
  margin: -8px 0 14px;
}
.vendor-shell-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  margin: -8px 0 14px;
}
.vendor-shell-toolbar .vendor-toolbar {
  margin: 0;
}
.vendors-view-toggle {
  justify-self: end;
}
.vendors-layout-container {
  gap: 0;
}
.vendors-layout-body {
  min-height: 0;
}
.vendor-receipts-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) repeat(2, minmax(130px, 1fr)) repeat(2, minmax(84px, 0.7fr)) repeat(2, minmax(130px, 1fr)) minmax(140px, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.vendor-receipts-toolbar label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
}
.vendor-receipts-toolbar input,
.vendor-receipts-toolbar select {
  min-width: 0;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-transform: none;
}
.vendor-receipts-search {
  min-width: 180px;
}
.vendor-receipts-toolbar .btn {
  height: 36px;
  border-radius: var(--radius-md);
}
.vendor-receipts-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}
.vendor-receipts-totals .stat-tile {
  min-width: 0;
  box-shadow: var(--shadow-card);
}
.vendor-receipts-total-card {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}
.vendor-receipts-total-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.vendor-receipts-total-card .stat-tile__label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
}
.vendor-receipts-total-card strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.vendor-receipts-total-card .stat-tile__value {
  font-size: var(--type-heading-size);
  font-weight: var(--type-heading-weight);
  font-variant-numeric: tabular-nums;
}
.vendor-receipts-total-card .stat-tile__sub {
  color: var(--muted);
}
.vendor-receipts-total-status {
  grid-column: span 1;
}
.vendor-receipts-table {
  min-width: 760px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.vendor-receipts-table td:nth-child(2) {
  min-width: 220px;
}
.vendor-receipts-table td,
.vendor-receipts-table th {
  white-space: nowrap;
}
.vendor-receipts-table th {
  font-size: var(--type-label-size);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
}
.vendor-receipts-table tbody tr {
  background: var(--surface);
}
.vendor-receipts-empty {
  padding-block: var(--space-6);
  padding-inline: var(--space-4);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.vendor-list-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
@media (max-width: 1120px) {
  .vendor-receipts-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vendor-receipts-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .vendor-receipts-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .vendor-receipts-toolbar,
  .vendor-receipts-totals {
    grid-template-columns: 1fr;
  }
  .vendor-list-empty {
    align-items: flex-start;
    flex-direction: column;
  }
}
.vendor-search input,
.vendor-filter select,
.company-search input,
.company-filter select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.vendor-search input:focus,
.vendor-filter select:focus,
.company-search input:focus,
.company-filter select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.vendor-filter,
.company-filter {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.vendor-list-shell,
.company-list-shell {
  height: calc(100vh - 190px);
  min-height: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-y: auto;
}
body.shell-vendors-active .view#vendorsView,
body.shell-vendor-detail-active .view#vendorDetailView,
body.shell-companies-active .view#recipientsView {
  padding: 0;
  min-height: calc(100vh - 99px);
}
body.shell-vendors-active #vendorsView > .vendors-header,
body.shell-vendor-detail-active #vendorDetailView > .view-header,
body.shell-companies-active #recipientsView > .companies-header {
  padding: 18px 22px 12px;
  margin: 0;
  border-bottom: 1px solid #f2f2f4;
  background: var(--surface);
}
body.shell-companies-active #recipientsView > .companies-header h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}
body.shell-companies-active #recipientsView > .company-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 22px;
  border-bottom: 1px solid #f2f2f4;
  color: #8a8a96;
  font-size: 12.5px;
}
body.shell-companies-active #recipientsView > .company-crumb[hidden] {
  display: none;
}
body.shell-companies-active #companyCrumbListBtn {
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
}
body.shell-vendors-active #vendorsView > .vendor-shell-toolbar {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, auto);
  gap: 12px;
  margin: 0;
  padding: 12px 22px;
  border-bottom: 1px solid #f2f2f4;
  background: var(--surface);
}
body.shell-companies-active #recipientsView > .company-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr auto;
  gap: 12px;
  margin: 0;
  padding: 12px 22px;
  border-bottom: 1px solid #f2f2f4;
  background: var(--surface);
}
body.shell-companies-active #recipientsView > .company-toolbar .page-info {
  align-self: center;
  justify-self: end;
  margin-left: 0;
}
body.shell-companies-active #recipientsView > .company-toolbar .company-filter {
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
}
body.shell-companies-active #recipientsView > .company-toolbar .company-filter span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
body.shell-vendors-active #vendorsLayoutContainer {
  height: calc(100vh - 225px);
  min-height: calc(100vh - 225px);
}
body.shell-companies-active #companiesLayoutContainer {
  height: calc(100vh - 213px);
  min-height: calc(100vh - 213px);
  gap: 0;
}
body.shell-vendors-active #vendorsLayoutContainer .shell-page-primary {
  min-height: 0;
}
body.shell-companies-active #companiesLayoutContainer .shell-page-primary {
  min-height: 0;
}
body.shell-vendor-detail-active #vendorDetailContent {
  padding: 18px 22px 28px;
}
body.shell-vendor-detail-active .vendor-header,
body.shell-vendor-detail-active .vendor-detail-body-grid,
body.shell-vendor-detail-active .vendor-detail-receipts-card,
body.shell-vendor-detail-active .vendor-detail-page-body,
body.shell-vendor-detail-active .vendor-detail-edit-form {
  max-width: none;
}
body.shell-vendors-active .vendor-list-shell {
  flex: 1;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  overflow: auto;
}
body.shell-companies-active .company-list-shell {
  flex: 1;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  overflow: auto;
}
body.shell-vendors-active .vendors-layout-body:empty {
  display: none;
}
.vendor-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.vendor-table .vendor-row {
  display: table-row;
  min-height: 0;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
.vendor-table .vendor-row td {
  vertical-align: middle;
  cursor: pointer;
}
.vendor-table td.vendor-main,
.vendor-table td.vendor-side,
.vendor-table td.vendor-atc-cell,
.vendor-table td.vendor-category-cell,
.vendor-table td.vendor-badges,
.vendor-table td.vendor-date-cell,
.vendor-table td.vendor-actions {
  display: table-cell;
}
.vendor-table .vendor-actions .btn {
  margin-right: 0;
}
.vendor-table .vendor-action-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
  width: 100%;
}
.vendor-table .vendor-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 28px;
  min-height: 28px;
  padding: 4px;
  line-height: 1;
}
.vendor-table .vendor-action-icon .vendor-action-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
body.shell-vendors-active .vendor-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fafafb;
  border-bottom: 1px solid #ececef;
  color: #8a8a96;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 9px 14px;
  text-transform: uppercase;
}
body.shell-companies-active .company-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
body.shell-companies-active .company-table .company-row {
  display: table-row;
  min-height: 0;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
}
body.shell-companies-active .company-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fafafb;
  border-bottom: 1px solid #ececef;
  color: #8a8a96;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 9px 14px;
  text-align: left;
  text-transform: uppercase;
}
body.shell-companies-active .company-table td {
  border-bottom: 1px solid #f2f2f4;
  color: #1d1d22;
  font-size: 12.5px;
  padding: 11px 14px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.shell-companies-active .company-table th:nth-child(1) { width: 24%; }
body.shell-companies-active .company-table th:nth-child(2) { width: 15%; }
body.shell-companies-active .company-table th:nth-child(3) { width: 27%; }
body.shell-companies-active .company-table th:nth-child(4) { width: 10%; }
body.shell-companies-active .company-table th:nth-child(5) { width: 24%; }
body.shell-companies-active .company-table td.company-actions {
  white-space: nowrap;
  overflow: visible;
}
body.shell-companies-active .company-table tr {
  cursor: pointer;
}
body.shell-companies-active .company-table tr:hover td,
body.shell-companies-active .company-table tr.sel td {
  background: #eeedfb;
}
body.shell-companies-active .company-table tr.sel td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
body.shell-companies-active .company-table .company-main,
body.shell-companies-active .company-table .company-tin,
body.shell-companies-active .company-table .company-address,
body.shell-companies-active .company-table .company-badges,
body.shell-companies-active .company-table .company-actions {
  display: table-cell;
  min-width: 0;
}
body.shell-vendors-active .vendor-table td {
  border-bottom: 1px solid #f2f2f4;
  color: #1d1d22;
  font-size: 12.5px;
  padding: 11px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.shell-vendors-active .vendor-table th:nth-child(1) { width: 22%; }
body.shell-vendors-active .vendor-table th:nth-child(2) { width: 15%; }
body.shell-vendors-active .vendor-table th:nth-child(3) { width: 54px; }
body.shell-vendors-active .vendor-table th:nth-child(4) { width: 12%; }
body.shell-vendors-active .vendor-table th:nth-child(5) { width: 12%; }
body.shell-vendors-active .vendor-table th:nth-child(6) { width: 72px; }
body.shell-vendors-active .vendor-table th:nth-child(7) { width: 104px; }
body.shell-vendors-active .vendor-table th:nth-child(8) { width: 104px; }
body.shell-vendors-active .vendor-table th:nth-child(9) { width: 74px; }
body.shell-vendors-active .vendor-table th:nth-child(7),
body.shell-vendors-active .vendor-table th:nth-child(8),
body.shell-vendors-active .vendor-table th:nth-child(9),
body.shell-vendors-active .vendor-table td.vendor-date-cell,
body.shell-vendors-active .vendor-table td.vendor-actions {
  padding-left: 8px;
  padding-right: 8px;
}
body.shell-vendors-active .vendor-table td.vendor-actions {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
body.shell-vendors-active .vendor-table tr:hover td,
body.shell-vendors-active .vendor-table tr.sel td {
  background: #fafafb;
}
body.shell-vendors-active .vendor-table tr.sel td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.vendor-inspector {
  flex: 0 0 300px;
}
.company-inspector {
  flex: 0 0 340px;
}
.company-inspector-thumb {
  height: 90px;
}
.company-inspector-text {
  margin: 0;
  color: #5b5b66;
  font-size: 12.5px;
  line-height: 1.5;
}
.company-recent-list {
  margin-top: 8px;
}
.vendor-inspector-avatar {
  width: 58px;
  height: 58px;
  margin: 4px 0 12px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eeedfb;
  color: #5b53e8;
  font-size: 24px;
  font-weight: 800;
}
.vendor-list,
.company-list {
  display: grid;
}
.vendor-row,
.company-row {
  min-height: 44px;
  width: 100%;
  padding: 6px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: grid;
  gap: 10px;
  align-items: center;
  text-align: left;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
/* B-fu-2: column order Vendor | TIN/Location | ATC | Category | Signals | Date added | Date edited | Actions */
.vendor-row {
  grid-template-columns: minmax(0, 1.6fr) minmax(150px, 0.75fr) minmax(70px, auto) minmax(100px, auto) minmax(95px, auto) minmax(104px, auto) minmax(104px, auto) auto;
}
.vendor-row-header {
  min-height: 34px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: default;
  position: sticky;
  top: 0;
  z-index: 1;
}
.vendor-row-header:hover {
  background: var(--surface-muted);
}
.company-row {
  grid-template-columns: minmax(0, 1.15fr) minmax(120px, 0.55fr) minmax(0, 1.35fr) minmax(110px, auto) auto;
}
.vendor-row:hover,
.company-row:hover {
  background: var(--surface-hover);
}
.vendor-main,
.vendor-side,
.vendor-badges,
.vendor-actions,
.company-main,
.company-tin,
.company-address,
.company-badges,
.company-actions {
  min-width: 0;
}
.vendor-main strong,
.company-main strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vendor-main em {
  display: inline;
  margin-left: 6px;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}
.vendor-main small,
.vendor-side small,
.company-main small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vendor-side,
.vendor-date-cell,
.company-tin {
  display: grid;
  justify-items: start;
}
.vendor-side code,
.company-tin code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
}
.company-address {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vendor-badges,
.company-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
}
.vendor-date-cell {
  gap: 2px;
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
}
.vendor-date-cell .vendor-date-label {
  display: none;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.vendor-date-cell strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vat-badge,
.vat-pill,
.vendor-match-pill,
.source-badge,
.vendor-score {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.vat-vat_registered { background: var(--success-soft); color: var(--success); }
.vat-non_vat { background: #eeeeee; color: #555555; }
.vat-vat_exempt { background: #eef3fb; color: #2a4f8a; }
.vat-unknown { background: var(--surface-muted); color: var(--muted); }
/* I2.B6 — receipt-row VAT pills (distinct from vendor .vat-badge); reuse the
   same colour language as the vendor badges. */
.vat-pill-registered { background: var(--success-soft); color: var(--success); }
.vat-pill-nonvat { background: #eeeeee; color: #555555; }
.vat-pill-exempt { background: #eef3fb; color: #2a4f8a; }
.vat-pill-computed { margin-left: 4px; font-size: 10px; font-weight: 600; color: var(--muted); }
/* I3.B3 — vendor match-reason pills (TIN / Name X% / New). */
.vendor-match-tin { background: #e6f4ea; color: #137333; border: 1px solid #b7dfb9; }
.vendor-match-good { background: #e6f4ea; color: #137333; border: 1px solid #b7dfb9; }
.vendor-match-low { background: #fef7e0; color: #ea8600; border: 1px solid #fdd663; }
.vendor-match-new { background: #f1f3f4; color: #5f6368; border: 1px solid #dadce0; }
/* I3.B5b — confirm-card TIN context + similar-vendor quick-picks. */
.tin-context:empty { display: none; }
.tin-context-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 8px 0; font-size: var(--text-sub); }
.tin-context-banner code { background: var(--surface-muted); padding: 1px 6px; border-radius: 6px; font-weight: 700; }
.tin-context-status { color: var(--muted); }
.tin-context-candidates { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tin-candidate-pick { background: #eef3fb; color: #2a4f8a; border: 1px solid #cdddf3; border-radius: 8px; padding: 4px 10px; font-size: var(--text-sub); cursor: pointer; }
.tin-candidate-pick:hover { background: #e0ebfa; }
.tin-candidate-pick small { color: var(--muted); font-weight: 400; }
.source-badge {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
}
.vendor-score {
  background: var(--accent-soft);
  color: var(--accent);
}
.vendor-actions,
.company-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
/* PB3: ATC chip in vendor list row + helper hint in modal. */
.vendor-atc-cell {
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}
.vendor-category-cell {
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}
.vendor-cat-stack {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
}
.vendor-cat-stack small {
  max-width: 100%;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vendor-cat {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-muted);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.vendor-cat.vendor-cat-empty {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}
.vendor-atc {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.vendor-atc.vendor-atc-empty {
  background: var(--surface-muted);
  color: var(--muted);
  font-family: inherit;
  font-weight: 500;
}
.vendor-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.vendor-edit-wide {
  grid-column: 1 / -1;
}
.vendor-vat-flip-preview {
  padding: 12px;
  border: 1px solid var(--warning);
  border-radius: 8px;
  background: var(--warning-soft);
  font-size: 13px;
  display: grid;
  gap: 8px;
}
.vendor-vat-flip-preview__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.vendor-vat-flip-preview__flagged-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.vendor-ai-defaults {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}
.vendor-ai-defaults > summary {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.vendor-ai-defaults-body {
  padding: 0 12px 12px;
}
.vendor-edit-fieldset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.vendor-edit-fieldset legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.field-error {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--danger);
  border-radius: 6px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
}
.vendor-list-sentinel {
  min-height: 44px;
  padding: 14px;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}
.vendor-pagination,
.company-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  padding: 8px 12px;
}
body.shell-vendors-active .vendor-pagination {
  flex: none;
  margin: 0;
  border-top: 1px solid #f2f2f4;
  background: var(--surface);
}
.vendor-page-info,
.company-page-info {
  font-size: 13px;
  color: var(--muted);
  min-width: 130px;
  text-align: center;
}
.vendor-pagination .btn:disabled,
.company-pagination .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.vendor-placeholder {
  display: grid;
  gap: 8px;
  font-size: 13px;
}
.vendor-placeholder span,
.vendor-placeholder p {
  margin: 0;
  color: var(--muted);
}
.vendor-placeholder code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.vendor-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.vendor-detail-header h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.vendor-detail-kicker {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}
.vendor-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 22px;
  display: grid;
  gap: 12px;
}
.vendor-detail-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}
.vendor-info-extras {
  margin-top: 8px;
}
.vendor-info-extras .vendor-extras-details-body {
  display: grid;
  gap: 10px;
  padding-top: 10px;
}
.vendor-info-extras .vendor-detail-section {
  background: var(--surface);
}
.vendor-detail-section h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
}
.vendor-detail-section p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.vendor-detail-row {
  display: grid;
  grid-template-columns: 135px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.vendor-detail-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.vendor-detail-row span {
  color: var(--muted);
  font-weight: 700;
}
.vendor-detail-row strong {
  overflow-wrap: anywhere;
}
.vendor-ignore-control {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.vendor-ignore-control .vendor-detail-row {
  border-top: 0;
  padding-top: 0;
}
.vendor-ignore-control p {
  margin-top: 6px;
}
.vendor-ignore-toggle {
  flex: 0 0 auto;
}
.vendor-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.vendor-chip {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.vendor-branch-list,
.vendor-recent-list {
  display: grid;
  gap: 8px;
}
.vendor-branch {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
}
.vendor-branch span {
  color: var(--muted);
}
.vendor-recent-row {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.vendor-recent-row:hover {
  background: var(--surface-hover);
}

/* B-fu-3: Vendor detail page (full-page, not side-panel) */
.vendor-header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  max-width: 1180px;
  min-height: 104px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.vendor-header__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 24px;
  font-weight: 800;
}
.vendor-header__main {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.vendor-header__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.vendor-header__title {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.vendor-header__status-badge {
  flex: none;
}
.vendor-header__meta {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.vendor-header__actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vendor-header__menu {
  position: relative;
}
.vendor-header__menu summary {
  list-style: none;
}
.vendor-header__menu summary::-webkit-details-marker {
  display: none;
}
.vendor-header__menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 150px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  display: grid;
  gap: 2px;
}
.vendor-header__action-item {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.vendor-header__action-item:hover {
  background: var(--surface-hover);
}
.vendor-header__action-item--danger {
  color: var(--danger);
}
.vendor-header__placeholder {
  max-width: 1180px;
  min-height: 36px;
}
.vendor-detail-body-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 1180px;
  margin-top: 16px;
}
.vendor-detail-receipts-card {
  max-width: 1180px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.vendor-detail-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.vendor-detail-table-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}
.vendor-detail-table-spinner,
.vendor-detail-table-empty {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.vendor-detail-table-empty--filters {
  flex-direction: column;
  gap: 12px;
}
.vendor-detail-filter-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, 0.8fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}
.vendor-detail-search input,
.vendor-detail-filter select,
.vendor-detail-filter input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.vendor-detail-search input {
  padding: 0 11px;
}
.vendor-detail-filter {
  display: grid;
  gap: 4px;
}
.vendor-detail-filter span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.vendor-detail-custom-dates {
  display: flex;
  gap: 10px;
  align-items: end;
  margin: -4px 0 12px;
}
.vendor-detail-custom-dates[hidden] {
  display: none !important;
}
.vendor-detail-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.vendor-detail-receipts-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  background: var(--surface);
}
.vendor-detail-receipts-table th,
.vendor-detail-receipts-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.vendor-detail-receipts-table th {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--surface-muted);
}
.vendor-detail-receipts-table tr:last-child td {
  border-bottom: 0;
}
.vendor-detail-receipts-table a {
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}
.vendor-detail-receipts-table a:hover {
  text-decoration: underline;
}
.vendor-detail-receipts-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.confidence-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
}
.confidence-pill--high {
  background: var(--success-soft);
  color: var(--success);
}
.confidence-pill--medium {
  background: var(--warning-soft);
  color: var(--warning);
}
.confidence-pill--low {
  background: var(--danger-soft);
  color: var(--danger);
}
.confidence-pill--empty {
  background: var(--surface-muted);
  color: var(--muted);
}
.vendor-detail-kebab {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
.vendor-detail-kebab:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.vendor-detail-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}
.vendor-detail-pagination__summary {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.vendor-detail-pagination__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vendor-detail-page-pill {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.vendor-detail-page-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}
.vendor-detail-page-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.vendor-detail-page-size select {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
.vendor-detail-body-grid--loading {
  grid-template-columns: 1fr;
}
.vendor-detail-body-spinner,
.vendor-detail-body-error {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.vendor-detail-body-error {
  color: var(--danger);
  background: var(--danger-soft);
}
.vendor-info-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 12px;
}
.vendor-info-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vendor-info-card__title-row h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}
.vendor-info-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.vendor-info-row__icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 14px;
  font-weight: 900;
}
.vendor-info-row__content {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.vendor-info-row__label,
.metric-card__label {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}
.vendor-info-row__content strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.vendor-metrics-region {
  min-width: 0;
}
.vendor-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
  height: auto;
}
.metric-card {
  min-width: 0;
  min-height: 132px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: grid;
  align-content: start;
  gap: 8px;
}
.metric-card__icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 900;
}
.metric-card__value {
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.12;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.metric-card__subline {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.metric-card--total .metric-card__icon,
.metric-card--vat .metric-card__icon,
.metric-card--net .metric-card__icon,
.metric-card--discount .metric-card__icon {
  background: #dbeafe;
  color: #1d4ed8;
}
.vendor-header--loading {
  align-items: center;
}
.vendor-header__skeleton {
  display: inline-block;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf2f7 0%, #f8fafc 45%, #edf2f7 90%);
  background-size: 220% 100%;
  animation: vendor-header-pulse 1.4s ease-in-out infinite;
}
.vendor-header__icon--skeleton {
  background: linear-gradient(90deg, #dbeafe 0%, #eef6ff 45%, #dbeafe 90%);
  background-size: 220% 100%;
  animation: vendor-header-pulse 1.4s ease-in-out infinite;
}
.vendor-header__skeleton--title {
  width: min(320px, 48vw);
  height: 28px;
}
.vendor-header__skeleton--badge {
  width: 82px;
  height: 24px;
}
.vendor-header__skeleton--meta {
  width: min(440px, 58vw);
  height: 16px;
}
.vendor-header__skeleton--button {
  width: 104px;
  height: 30px;
  border-radius: 6px;
}
.vendor-header--not-found .vendor-header__icon {
  background: #fef3c7;
  color: #92400e;
}
.vendor-header--error .vendor-header__icon {
  background: var(--danger-soft);
  color: var(--danger);
}
@keyframes vendor-header-pulse {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
@media (max-width: 720px) {
  .vendor-header {
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: flex-start;
  }
  .vendor-header__icon {
    width: 56px;
    height: 56px;
  }
  .vendor-header__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .vendor-detail-body-grid {
    grid-template-columns: 1fr;
  }
  .vendor-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vendor-detail-pagination {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .vendor-detail-filter-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .vendor-detail-custom-dates {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 460px) {
  .vendor-metric-grid {
    grid-template-columns: 1fr;
  }
}
.vendor-detail-page-body {
  display: grid;
  gap: 0;
  max-width: 860px;
}
.vendor-detail-edit-form {
  max-width: 860px;
  padding: 0;
}
.vendor-extras-details {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 0;
}
.vendor-extras-details > summary {
  cursor: pointer;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface-muted);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
}
.vendor-extras-details > summary::-webkit-details-marker { display: none; }
.vendor-extras-details > summary::after {
  content: '▸';
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.vendor-extras-details[open] > summary::after { content: '▾'; }
.vendor-extras-details[open] > summary {
  border-bottom: 1px solid var(--border);
}
.vendor-extras-details-body {
  display: grid;
  gap: 0;
  padding: 0;
}
.vendor-extras-details-body .vendor-detail-section {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
}
.vendor-extras-details-body .vendor-detail-section:last-child {
  border-bottom: 0;
}

.category-tabs {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  width: fit-content;
}
.category-tab {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.category-tab:last-child { border-right: 0; }
.category-tab.active { background: var(--accent-soft); color: var(--accent); }

/* ─── Data Categories view ─────────────────────────────────────────────── */
.axis-page {
  display: grid;
  gap: 14px;
}
.axis-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.axis-search {
  width: min(420px, 100%);
}
.axis-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  background: var(--surface);
}
.axis-search input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.axis-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.axis-nav,
.axis-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.axis-nav {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.axis-group + .axis-group {
  border-top: 1px solid var(--border);
}
.axis-group-header {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  background: var(--accent);
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.axis-group-header:hover {
  background: var(--accent-hover);
}
.axis-group-header .axis-group-count {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}
.axis-group-count,
.axis-label-count {
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
}
.axis-group.collapsed .axis-label-list {
  display: none;
}
.axis-label-list {
  display: grid;
}
.axis-label-btn {
  width: 100%;
  min-height: 50px;
  padding: 8px 10px 8px 12px;
  border: 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.axis-label-btn:hover {
  background: var(--surface-hover);
}
.axis-label-btn.active {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}
.axis-label-btn strong {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.axis-label-btn small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--muted);
}
.axis-empty {
  padding: 16px 12px;
  color: var(--muted);
  font-size: 12px;
}
.axis-detail {
  min-height: 560px;
}
.axis-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}
.axis-detail-header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.axis-detail-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.axis-kicker {
  margin: 0 0 4px !important;
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 800;
}
.axis-selected-mark {
  color: var(--accent);
  font-size: 16px;
}
.axis-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.axis-tab {
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.axis-tab.active {
  color: var(--accent);
  background: var(--accent-soft);
}
.axis-tab-panel {
  padding: 20px 22px 24px;
}
.axis-overview-grid {
  display: grid;
  gap: 16px;
}
.axis-info-block h3,
.axis-stats-lists h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}
.axis-info-block p,
.axis-info-block ul {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.axis-info-block ul {
  padding-left: 18px;
}
.related-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.related-label {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.related-label:hover {
  background: var(--accent-soft);
}
.config-readonly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.config-readonly-grid > div,
.axis-stat,
.axis-stats-lists section {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}
.config-readonly-grid span,
.axis-stat span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.config-readonly-grid strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.axis-examples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.axis-example-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  display: grid;
  gap: 8px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.axis-example-card:hover {
  background: var(--surface-hover);
}
.axis-example-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
}
.axis-example-card strong,
.axis-example-card small {
  display: block;
}
.axis-example-card small {
  color: var(--muted);
  font-size: 12px;
}
.axis-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.axis-stat strong {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 24px;
  line-height: 1.1;
}
.axis-stats-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.axis-rank-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.axis-rank-row:first-of-type {
  border-top: 0;
}
.axis-rank-row span {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.muted {
  color: var(--muted);
  font-size: 13px;
}

/* ─── Admin section shell pages ─────────────────────────────────────────── */
body.shell-admin-active .main-wrap > .view.active {
  padding: 0;
  min-height: calc(100vh - 99px);
}
body.shell-admin-active .view > .view-header {
  display: none;
}
body.shell-admin-active .view-desc {
  margin: 0;
  padding: 12px 22px;
  border-bottom: 1px solid #f2f2f4;
  color: #8a8a96;
  font-size: 12.5px;
}
body.shell-categories-active .category-tabs {
  display: none;
}
.admin-receipt-types-shell {
  display: flex;
  min-height: calc(100vh - 153px);
  border: 0;
  border-radius: 0;
  background: #fff;
  overflow: hidden;
}
.admin-receipt-type-list {
  width: 240px;
  flex: 0 0 240px;
  border-right: 1px solid #ececef;
  overflow-y: auto;
  background: #fff;
}
.admin-list-kicker,
.admin-kicker {
  margin: 0;
  color: #8a8a96;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-list-kicker {
  padding: 12px 14px 8px;
}
.admin-receipt-type-items {
  display: grid;
}
.admin-receipt-type-item {
  min-height: 47px;
  padding: 9px 14px;
  border: 0;
  border-top: 1px solid #f2f2f4;
  background: #fff;
  color: #1d1d22;
  cursor: pointer;
  display: grid;
  gap: 2px;
  text-align: left;
  font: inherit;
}
.admin-receipt-type-item:hover {
  background: #fafafb;
}
.admin-receipt-type-item.active {
  background: #eeedfb;
  color: #5b53e8;
}
.admin-receipt-type-item strong {
  font-size: 12.5px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.admin-receipt-type-item span {
  color: #8a8a96;
  font-size: 11.5px;
  line-height: 1.25;
}
.admin-receipt-type-detail {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 20px 22px;
}
.admin-detail-card {
  border: 1px solid #ececef;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.admin-detail-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #ececef;
}
.admin-detail-card__header h2 {
  margin: 2px 0 2px;
  color: #1d1d22;
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.admin-detail-card__header p:not(.admin-kicker) {
  margin: 0;
  color: #8a8a96;
  font-size: 12px;
}
.admin-detail-card__body {
  display: grid;
  gap: 18px;
  padding: 18px;
}
.admin-info-block h3 {
  margin: 0 0 8px;
  color: #8a8a96;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-info-block p {
  margin: 0;
  color: #5b5b66;
  font-size: 13px;
  line-height: 1.6;
}
.admin-instruction-card {
  margin-bottom: 8px;
  padding: 12px 14px;
  border: 1px solid #ececef;
  border-radius: 8px;
  background: #fafafb;
}
.admin-instruction-card span {
  display: block;
  margin-bottom: 4px;
  color: #8a8a96;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.shell-dataCategories-active .axis-page {
  display: flex;
  min-height: calc(100vh - 99px);
  flex-direction: column;
  gap: 0;
}
body.shell-dataCategories-active .axis-toolbar {
  min-height: 56px;
  padding: 12px 22px;
  border-bottom: 1px solid #f2f2f4;
}
body.shell-dataCategories-active .axis-search {
  width: min(300px, 100%);
}
body.shell-dataCategories-active .axis-search input {
  height: 32px;
  border-radius: 8px;
  background: #fafafb;
}
body.shell-dataCategories-active .axis-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 0;
}
body.shell-dataCategories-active .axis-nav {
  position: static;
  width: 280px;
  flex: 0 0 280px;
  max-height: none;
  border: 0;
  border-right: 1px solid #ececef;
  border-radius: 0;
}
body.shell-dataCategories-active .axis-detail {
  flex: 1;
  min-width: 0;
  min-height: auto;
  margin: 20px 22px;
  border-radius: 8px;
}
body.shell-dataCategories-active .axis-group-header {
  background: #5b53e8;
}
body.shell-dataCategories-active .axis-group:nth-child(even) .axis-group-header {
  background: #2f8a4e;
}
body.shell-dataCategories-active .axis-label-btn {
  min-height: 43px;
}
body.shell-dataCategories-active .axis-detail-header {
  padding: 18px 18px 10px;
  border-bottom: 0;
}
body.shell-dataCategories-active .axis-detail-header h2 {
  font-size: 20px;
}
body.shell-dataCategories-active .axis-tabs {
  padding: 0 18px;
  border-bottom: 0;
}
body.shell-dataCategories-active .axis-tab {
  height: 30px;
  border: 1px solid #ececef;
  border-right: 0;
  font-size: 12px;
}
body.shell-dataCategories-active .axis-tab:first-child {
  border-radius: 7px 0 0 7px;
}
body.shell-dataCategories-active .axis-tab:last-child {
  border-right: 1px solid #ececef;
  border-radius: 0 7px 7px 0;
}
body.shell-dataCategories-active .axis-tab-panel {
  padding: 16px 18px 18px;
}

body.shell-stats-active .stats-header {
  display: none;
}
body.shell-stats-active .stats-filterbar {
  margin: 0;
  padding: 12px 22px;
  border: 0;
  border-bottom: 1px solid #f2f2f4;
  border-radius: 0;
}
body.shell-stats-active .stats-filterbar label {
  display: flex;
  align-items: center;
  min-width: auto;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
}
body.shell-stats-active .stats-filterbar select,
body.shell-stats-active .stats-filterbar input {
  width: auto;
  height: 30px;
  min-width: 108px;
  border-radius: 7px;
}
body.shell-stats-active .stats-kpi-strip {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 13px;
  margin: 20px 22px 18px;
}
body.shell-stats-active .stats-kpi-tile {
  position: relative;
  min-width: 0;
  padding: 15px 17px;
  background: #fff;
  overflow: hidden;
}
body.shell-stats-active .stats-kpi-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #5b53e8;
}
body.shell-stats-active .stats-kpi-success::before { background: #2f8a4e; }
body.shell-stats-active .stats-kpi-review::before { background: #b97309; }
body.shell-stats-active .stats-kpi-failed::before { background: #c0392b; }
body.shell-stats-active .stats-kpi-reprocessed::before { background: #2d5bd0; }
body.shell-stats-active .stats-panel {
  margin: 0 22px 16px;
}
body.shell-stats-active .stats-panel .flat-card__body {
  padding: 14px 18px 16px;
}
body.shell-stats-active .stats-chart {
  min-height: 158px;
}
body.shell-stats-active .stats-bars-svg {
  height: 158px;
}

.admin-tenant-shell {
  min-height: calc(100vh - 99px);
}
.admin-superuser-banner {
  margin: 12px 22px;
  padding: 10px 15px;
  border: 1px solid #f0d49a;
  border-radius: 8px;
  background: #fdf2e1;
  color: #7a4d08;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
body.shell-adminCompanies-active .admin-tenant-list-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.shell-adminCompanies-active .admin-tenant-list-card > .flat-card__header {
  display: none;
}
body.shell-adminCompanies-active .admin-tenant-list-card > .flat-card__body {
  padding: 0;
  border-top: 0;
}
body.shell-adminCompanies-active .admin-tenant-table-wrap {
  border: 0;
  border-radius: 0;
}
body.shell-adminCompanies-active .admin-users-table {
  min-width: 820px;
}
body.shell-adminCompanies-active .admin-users-table th {
  color: #8a8a96;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
body.shell-adminCompanies-active .admin-tenant-table tr.is-selected td {
  background: #eeedfb;
}
.admin-current-pill {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 9px;
  background: #5b53e8;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  vertical-align: middle;
}
.admin-tenant-inspector {
  display: flex;
  width: 324px;
  flex: 0 0 324px;
}
.admin-tenant-preview-name {
  color: #1d1d22;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.admin-tenant-preview-slug {
  margin-top: 2px;
  color: #8a8a96;
  font-size: 12px;
}

/* ─── Settings view ─────────────────────────────────────────────────────── */
.settings-card {
  max-width: 500px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  display: grid;
  gap: 20px;
}
.settings-card h2 { margin: 0; font-size: 16px; font-weight: 700; }
.settings-card p { margin: 0; color: var(--muted); font-size: 13px; }
.settings-fields { display: grid; gap: 14px; }
.settings-label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}
.settings-label select,
.settings-label input[type="number"],
.settings-label input[disabled] {
  height: 36px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; font-size: 13px; background: var(--surface);
}
.settings-label input[disabled] {
  background: #f7fafc;
  color: var(--muted);
  opacity: 0.6;
  cursor: not-allowed;
}
.settings-label select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.settings-hint { font-size: 12px; font-weight: 400; color: var(--muted); }
.settings-feedback { font-size: 13px; padding: 8px 12px; border-radius: 6px; background: var(--success-soft); color: var(--success); }
.threshold-range {
  width: 100%; margin: 6px 0 2px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* B24 (AC-2a/AC-2b): API Access tabs + schedule/retention segmented controls + stat grid. */
.at-tabs { display: flex; gap: 4px; margin: 14px 0 18px; border-bottom: 1px solid var(--border); }
.at-tab {
  padding: 9px 16px; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent;
}
.at-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.at-tab-panel { display: grid; gap: 20px; max-width: 620px; }
.at-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 6px; }
.at-seg-opt {
  padding: 7px 13px; font-size: 12.5px; cursor: pointer; border-right: 1px solid var(--border);
  color: var(--ink, inherit);
}
.at-seg-opt:last-child { border-right: none; }
.at-seg-opt.on { background: var(--accent); color: #fff; font-weight: 700; }
.at-seg-custom { margin-top: 10px; }
.at-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 4px; }
.at-stat { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.at-stat-k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.at-stat-v { font-size: 20px; font-weight: 800; margin-top: 3px; }
.at-stat-s { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* B25 (AC-2c/2d/2e): API Setup v3 — endpoint badges/consent, Postman-style
   metadata-field table, and the live request-preview code block. */
.at-tab-panel-wide { max-width: 780px; }
.at-badge { display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; }
.at-badge-method { background: var(--accent); color: #fff; border-radius: 7px; padding: 6px 12px; font-size: 12px; }
.at-badge-warn { background: #fdf0e3; color: #b4530a; }
.at-endpoint-row { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.at-endpoint-input { flex: 1; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface); }
.at-insecure-row {
  margin-top: 6px; padding: 8px 11px; background: #fdeceb; border: 1px solid #f3c3bf;
  border-radius: 8px; color: #b42318; font-size: 11.5px;
}
.at-confirm-row {
  display: block; margin-top: 6px; padding: 8px 11px; background: var(--surface); border: 1px dashed #f3c3bf;
  border-radius: 8px; color: #b42318; font-size: 11.5px; font-weight: 600;
}
.at-kv { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.at-kv th {
  text-align: left; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--border); padding: 7px 8px;
}
.at-kv td { border-bottom: 1px solid var(--border); padding: 7px 8px; vertical-align: middle; }
.at-kv-row-off td { opacity: .45; }
.at-kv-key { font-family: ui-monospace, Menlo, monospace; font-weight: 600; }
.at-kv-val { font-family: ui-monospace, Menlo, monospace; color: var(--muted); }
.at-kv-typ { font-size: 10.5px; color: var(--muted); }
.at-kv-hint { font-size: 10.5px; color: var(--muted); }
.at-panel-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 2px; }
.at-panel-label b { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.at-code {
  background: #23262f; color: #d6d9e0; border-radius: 10px; padding: 14px 16px; margin: 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 11.8px; line-height: 1.55; overflow-x: auto; white-space: pre;
}

/* B26 (AC-2f/AC-2g): health-check visual status + Test Push response viewer. */
.at-health-dot { font-weight: 700; }
.at-health-dot-healthy { color: var(--success); }
.at-health-dot-unreachable { color: var(--danger); }
.at-health-dot-not-configured, .at-health-dot-not-checked { color: var(--muted); }
.at-resp-viewer { margin-top: 10px; }
.at-resp-status { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.at-pill { padding: 3px 11px; border-radius: 14px; font-weight: 800; font-size: 11.5px; }
.at-pill-ok { background: var(--success-soft); color: var(--success); }
.at-pill-error { background: var(--danger-soft); color: var(--danger); }

/* ─── Setup shell reskin ───────────────────────────────────────────────── */
body.shell-setup-active .app-content {
  overflow: hidden;
}
body.shell-setup-active .view#usersManageView,
body.shell-setup-active .view#branchSetupView,
body.shell-setup-active .view#approvalSetupView,
body.shell-setup-active .view#emailSetupView,
body.shell-setup-active .view#settingsView {
  padding: 0;
  min-height: calc(100vh - 99px);
  background: #fff;
}
body.shell-setup-active .view > .view-header {
  display: none;
}
.setup-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 324px;
  min-height: calc(100vh - 99px);
}
.setup-primary {
  min-width: 0;
  border-right: 1px solid #ececef;
}
.setup-preview-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.setup-preview-head {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}
.setup-preview-head h2 {
  margin: 0;
  flex: 1;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
}
.setup-preview-collapse {
  width: 28px;
  height: 28px;
  border: 1px solid #ececef;
  border-radius: 8px;
  background: #fff;
  color: #8a8a96;
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  line-height: 1;
}
.setup-preview-body {
  flex: 1;
  padding: 16px;
}
.setup-preview-footer {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid #ececef;
}
.setup-preview-footer .btn {
  width: 100%;
  justify-content: center;
  min-height: 36px;
}
.setup-preview-avatar {
  height: 90px;
  border: 1px dashed #d8d8df;
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  color: #8a8a96;
  font-size: 30px;
  font-weight: 500;
}
.setup-preview-title {
  display: grid;
  gap: 3px;
  margin-bottom: 22px;
}
.setup-preview-title strong {
  color: #111827;
  font-size: 14px;
  font-weight: 800;
}
.setup-preview-title span {
  color: #7d8294;
  font-size: 12.5px;
}
.setup-preview-kicker {
  margin-bottom: 8px;
  color: #8a8a96;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.setup-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border-bottom: 1px solid #f2f2f4;
  color: #7d8294;
  font-size: 12.5px;
  font-weight: 700;
}
.setup-preview-row strong {
  min-width: 0;
  color: #111827;
  text-align: right;
  overflow-wrap: anywhere;
}
.setup-info-strip,
.setup-warning-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  margin: 12px 22px 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12.5px;
}
.setup-info-strip {
  border: 1px solid #bfd2f5;
  background: #eaf1ff;
  color: #17449b;
}
.setup-info-strip .view-desc,
.setup-warning-strip span {
  margin: 0;
}
.setup-warning-strip {
  border: 1px solid #f0c36d;
  background: #fff4dc;
  color: #8a4b00;
}
.setup-card {
  width: min(720px, calc(100% - 44px));
  margin: 52px 0 22px 22px;
  border: 1px solid #ececef;
  border-radius: 8px;
  background: #fff;
}
body.shell-approvalSetup-active #approvalSetupView > .view-desc,
body.shell-emailSetup-active #emailSetupView > .view-desc {
  margin: 20px 22px 0;
  color: #42475a;
  font-size: 12.5px;
}
body.shell-approvalSetup-active .approval-setup-card {
  margin-top: 18px;
  padding: 16px 18px 18px;
}
body.shell-approvalSetup-active .approval-setup-toolbar {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ececef;
}
body.shell-approvalSetup-active .approval-setup-groups {
  gap: 18px;
}
body.shell-approvalSetup-active .approval-setup-group {
  border: 0;
  box-shadow: none;
  overflow: visible;
}
body.shell-approvalSetup-active .approval-setup-group .flat-card__header {
  display: grid;
  gap: 3px;
  padding: 0 0 8px;
}
body.shell-approvalSetup-active .approval-setup-group .flat-card__body {
  border: 0;
}
body.shell-approvalSetup-active .approval-toggle-list {
  gap: 8px;
}
body.shell-approvalSetup-active .approval-toggle {
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  border: 1px solid #ececef;
  border-radius: 8px;
  background: #fbfbfc;
  padding: 9px 14px;
}
body.shell-approvalSetup-active .approval-toggle-input {
  order: 3;
}
body.shell-approvalSetup-active .approval-toggle .status-badge {
  display: none;
}
body.shell-approvalSetup-active .approval-toggle::after {
  content: "Require approval";
  color: #85899a;
  font-size: 12.5px;
}
body.shell-approvalSetup-active .approval-setup-footer {
  border-top: 1px solid #ececef;
  margin-top: 18px;
  padding-top: 18px;
}
body.shell-emailSetup-active .email-setup-list {
  margin: 18px 22px 32px;
  display: block;
}
body.shell-emailSetup-active .email-template-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.email-template-selector {
  min-height: 114px;
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: left;
  border: 1px solid #ececef;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 14px 18px;
  color: #111827;
  font: inherit;
}
.email-template-selector.is-selected {
  border-color: #5b53e8;
  box-shadow: inset 0 0 0 1px #5b53e8;
}
.email-template-selector strong {
  font-size: 14px;
  font-weight: 800;
}
.email-template-selector span:not(.status-badge),
.email-template-selector p {
  margin: 0;
  color: #7d8294;
  font-size: 12px;
  line-height: 1.35;
}
.email-template-selector .status-badge {
  justify-self: start;
}
body.shell-emailSetup-active .email-template-editor-card,
body.shell-emailSetup-active .email-template-category {
  border: 1px solid #ececef;
  box-shadow: none;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.email-template-editor-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid #ececef;
}
.email-template-editor-head h2 {
  margin: 0;
  flex: 1;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
}
.email-template-editor-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}
body.shell-emailSetup-active .email-template-editor-body input,
body.shell-emailSetup-active .email-template-editor-body textarea {
  width: 100%;
  border: 1px solid #ececef;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font: inherit;
  font-size: 13px;
  padding: 9px 10px;
}
body.shell-emailSetup-active .email-template-editor-body textarea {
  min-height: 150px;
  resize: vertical;
}
.email-template-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ececef;
}
body.shell-emailSetup-active .email-template-category .flat-card__header {
  padding: 14px 18px;
}
body.shell-emailSetup-active .email-template-category-body {
  padding: 14px 18px;
  border-top: 1px solid #ececef;
}
body.shell-emailSetup-active .email-template-card {
  border-color: #ececef;
  box-shadow: none;
}
body.shell-emailSetup-active .email-template-grid {
  grid-template-columns: minmax(0, 1fr);
}
body.shell-emailSetup-active .email-variable-pane,
body.shell-emailSetup-active .email-preview-pane:not(.email-preview-pane--setup) {
  display: none;
}
body.shell-emailSetup-active .email-preview-pane--setup {
  min-height: 120px;
}
body.shell-settings-active .settings-card {
  width: min(740px, calc(100% - 44px));
  max-width: none;
  margin: 20px 0 0 22px;
  padding: 0 18px 18px;
  border-color: #ececef;
  box-shadow: none;
}
body.shell-settings-active .settings-card > h2:first-child,
body.shell-settings-active .settings-card > p:first-of-type {
  margin-left: -18px;
  margin-right: -18px;
  padding-left: 18px;
  padding-right: 18px;
}
body.shell-settings-active .settings-card > h2:first-child {
  padding-top: 16px;
}
body.shell-settings-active .settings-card > p:first-of-type {
  padding-bottom: 14px;
  border-bottom: 1px solid #ececef;
}
body.shell-settings-active .settings-pipeline-info {
  gap: 18px;
}
body.shell-settings-active .settings-pipeline-step {
  border-color: #ececef;
  background: #fbfbfc;
  padding: 16px;
}
body.shell-settings-active .settings-pipeline-num {
  background: #5b53e8;
}
body.shell-settings-active .settings-label select {
  max-width: none;
  min-height: 36px;
  border: 0;
  background: #eeeeef;
}
body.shell-settings-active .settings-pipeline-arrow {
  margin: -11px 0;
  font-size: 11px;
}
body.shell-settings-active .threshold-range {
  accent-color: #5b53e8;
}
body.shell-settings-active #saveSettingsBtn {
  width: 100%;
  min-height: 42px;
  justify-content: center;
}

/* ─── Profile + Users ───────────────────────────────────────────────────── */
body.shell-profile-active #profileView {
  padding: 0;
}
body.shell-profile-active #profileView > .profile-local-header {
  display: none;
}
.profile-tabs {
  display: flex;
  gap: 4px;
  min-height: 42px;
  margin: 0;
  padding: 0 22px;
  border-bottom: 1px solid #f2f2f4;
  align-items: center;
}
.profile-tab {
  min-height: 30px;
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #5b5b66;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profile-tab.active {
  background: #eeedfb;
  color: #5b53e8;
}
.profile-tab-panel {
  max-width: none;
  padding: 20px 22px;
}
.profile-tab-panel:not(.active) { display: none; }
.profile-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 536px);
  gap: 24px;
  align-items: start;
  max-width: 820px;
}
.profile-card {
  background: #fff;
  border: 1px solid #ececef;
  border-radius: 10px;
  padding: 18px;
}
.profile-avatar-wrap {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: center;
  padding-top: 0;
}
.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #ececef;
  object-fit: cover;
  background: #eeedfb;
}
.profile-avatar-hint {
  color: #8a8a96;
  font-size: 11.5px;
  text-align: center;
}
.profile-avatar-actions,
.profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.profile-main {
  display: grid;
  gap: 14px;
}
.profile-fields { display: grid; gap: 14px; }
body.shell-profile-active .profile-fields .field-label {
  color: #8a8a96;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
body.shell-profile-active .profile-fields .field-label input {
  height: 36px;
  border: 1px solid #ececef;
  border-radius: 8px;
  background: #fff;
  color: #1d1d22;
}
body.shell-profile-active .profile-fields .field-label input[readonly] {
  color: #1d1d22;
}
.profile-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 36px;
  border-top: 1px solid #ececef;
  padding-top: 14px;
  color: #1d1d22;
  font-size: 13px;
}
.profile-meta-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.profile-meta-label {
  color: #8a8a96;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.profile-meta strong {
  color: #1d1d22;
  font-weight: 700;
}
.profile-role-pill {
  justify-self: start;
  border-radius: 6px;
  background: #e7f5ec;
  color: #2f8a4e;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  padding: 0 8px;
}
.profile-role-pill.is-admin {
  background: #eeedfb;
  color: #5b53e8;
}
.profile-actions {
  justify-content: flex-start;
  margin-top: 2px;
}
.profile-status,
.onboarding-error {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--success-soft);
  color: var(--success);
}
.profile-status.error,
.onboarding-error {
  background: #fff1ef;
  color: var(--danger);
}
.profile-security h2 {
  margin: 0 0 12px;
  color: #1d1d22;
  font-size: 13.5px;
  font-weight: 800;
}
.profile-security-card {
  border: 1px solid #ececef;
  border-radius: 10px;
  background: #fff;
  padding: 4px 18px;
}
.profile-security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 16px;
  border-top: 1px solid #f2f2f4;
}
.profile-security-row:first-child {
  border-top: 0;
}
.profile-security-row strong,
.profile-security-row > div > span {
  display: block;
}
.profile-security-row strong {
  color: #1d1d22;
  font-size: 13px;
  font-weight: 800;
}
.profile-security-row > div > span {
  color: #8a8a96;
  font-size: 12px;
}
.email-prefs-head {
  margin: 0 0 14px;
}
.email-prefs-head h2 {
  margin: 0 0 4px;
  font-size: 20px;
}
.email-prefs-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.email-prefs-list {
  display: grid;
  gap: 10px;
}
.email-pref-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
}
.email-pref-title {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  font-weight: 800;
}
.email-pref-group {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.email-pref-desc {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.email-pref-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text);
  font-weight: 700;
}
.email-pref-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.onboarding-box { width: min(520px, 100%); }
.onboarding-backdrop { z-index: 260; }
.admin-users-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
}
.admin-users-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-users-table th,
.admin-users-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.admin-users-table th {
  background: var(--surface-muted);
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.admin-users-table tr:last-child td { border-bottom: 0; }
.admin-tenant-card {
  overflow: visible;
}
.admin-tenant-card + .admin-tenant-card {
  margin-top: 14px;
}
.admin-tenant-card .flat-card__header {
  cursor: default;
}
.admin-tenant-card .flat-card__header:hover {
  background: transparent;
}
.admin-tenant-card .flat-card__title {
  font-size: 15px;
}
.admin-tenant-card .flat-card__body {
  padding-top: 14px;
}
.admin-tenant-list-card,
.admin-member-roles-card {
  overflow: hidden;
}
.admin-tenant-table-wrap {
  border-radius: 8px;
}
.admin-tenant-table tr.is-archived td {
  background: var(--surface-muted);
  color: var(--muted);
}
.admin-tenant-table tr.is-archived strong,
.admin-tenant-table tr.is-archived code {
  color: var(--muted);
}
.admin-tenant-table .status-badge {
  white-space: nowrap;
}
.admin-role-badge {
  text-transform: capitalize;
}
.admin-tenant-field input.admin-tenant-input,
.admin-tenant-field select.admin-tenant-select {
  min-height: 40px;
  border-radius: var(--radius-md);
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: var(--type-body-size);
}
.admin-tenant-field input.admin-tenant-input:focus,
.admin-tenant-field select.admin-tenant-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.admin-tenant-add-card.modal-box,
.admin-invitations-card.modal-box,
.admin-member-roles-card.modal-box {
  border-radius: var(--radius-md);
}
.admin-tenant-add-card .modal-header,
.admin-invitations-card .modal-header,
.admin-member-roles-card.modal-box .modal-header {
  background: var(--surface);
}
.admin-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface-muted);
}
body.shell-usersManage-active .users-manage-toolbar {
  margin: 0;
  padding: 12px 22px;
  border-bottom: 1px solid #f2f2f4;
  background: #fff;
}
body.shell-usersManage-active .users-manage-toolbar select {
  height: 30px;
  border: 1px solid #ececef;
  border-radius: 8px;
  background: #fff;
  color: #5b5b66;
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
}
body.shell-usersManage-active .admin-member-roles-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.shell-usersManage-active .admin-member-roles-card > .flat-card__header {
  display: none;
}
body.shell-usersManage-active .admin-member-roles-card > .flat-card__body {
  padding: 0;
  border: 0;
}
body.shell-usersManage-active .admin-users-wrap {
  border: 0;
  border-radius: 0;
}
body.shell-usersManage-active .admin-users-table {
  min-width: 960px;
  table-layout: fixed;
  color: #111827;
}
body.shell-usersManage-active .admin-users-table th {
  height: 34px;
  background: #fbfbfc;
  color: #8a8a96;
  border-bottom-color: #ececef;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
body.shell-usersManage-active .admin-users-table td {
  height: 49px;
  border-bottom-color: #f2f2f4;
  color: #7d8294;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.shell-usersManage-active .admin-users-table th:nth-child(1),
body.shell-usersManage-active .admin-users-table td:nth-child(1) {
  width: 42px;
  text-align: center;
}
body.shell-usersManage-active .admin-users-table th:nth-child(2),
body.shell-usersManage-active .admin-users-table td:nth-child(2) {
  width: 18%;
  color: #111827;
}
body.shell-usersManage-active .admin-users-table th:nth-child(3),
body.shell-usersManage-active .admin-users-table td:nth-child(3) {
  width: 20%;
}
body.shell-usersManage-active .admin-users-table tr.is-selected td {
  background: #eeedfb;
}
.users-check-cell input {
  width: 14px;
  height: 14px;
  accent-color: #5b53e8;
}
.user-row-avatar {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  margin-right: 10px;
  border-radius: 50%;
  background: #edf0f5;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}
.admin-user-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
}
.admin-user-status.admin { background: var(--accent-soft); color: var(--accent); }
.admin-user-status.active { background: var(--success-soft); color: var(--success); }
.admin-user-status.banned { background: #fff1ef; color: var(--danger); }

/* ─── Modal ─────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 32, 38, 0.45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-box {
  background: var(--surface);
  border-radius: 10px;
  width: min(480px, 100%);
  box-shadow: 0 20px 60px rgba(23, 32, 38, 0.2);
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 16px; flex: 1; }
.modal-body { padding: 20px; display: grid; gap: 14px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }
.export-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 170px);
  border-top: 1px solid var(--border);
  margin: 0 -18px -18px;
}
.export-filter-rail {
  min-width: 0;
  border-right: 1px solid var(--border);
  background: #fcfcfd;
  padding: 18px 16px;
  overflow: visible;
}
.export-content {
  min-width: 0;
  padding: 20px 22px;
  overflow: hidden;
}

/* B6: removed B3 flex-row + 34px export-filters--collapsed hacks on receipts (root cause of FILTER label clip + table COMMENT cutoff + "Showing" + top-right buttons + page h-scroll). Now Reports .reports-shell grid + .reports-filters rail (data-panel + --reports-left var) provides the 44px icon rail (🔎) + full filters. Table/paging inside .reports-main (minmax(0,1fr) track) with internal overflow-x:auto. Data extract ported identically for parity. --reports-right:0 set by JS for 2-track surfaces. Filter logic + scoping untouched. */
.export-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.export-filters-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.export-filters-toggle-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.export-filters-toggle-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.export-filters-chevron {
  font-size: 13px;
  color: var(--muted);
  display: inline-block;
  transition: transform 0.18s ease;
}
.export-filters--collapsed .export-filters-chevron {
  transform: rotate(-90deg);
}
.export-filters-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.export-filter-rail.export-filters--collapsed .export-filters-body {
  display: none;
}
.export-filters-clear-link {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.export-filters-clear-link:hover { color: var(--accent-hover); }
.export-filters-row-primary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  overflow: visible;
}
.export-filters-row-secondary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  overflow: visible;
}
.export-filter-field {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.export-filter-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.export-filter-field input {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  font: inherit;
  font-weight: 400;
  color: var(--text);
  background: var(--surface);
}
.export-filter-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.export-downloaded-filter {
  border: 0;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
}
.export-downloaded-filter legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.export-downloaded-filter .export-downloaded-options {
  display: grid;
  gap: 6px;
}
.export-downloaded-filter label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  min-height: 38px;
  background: var(--surface);
  transition: border-color 0.1s, background 0.1s;
}
.export-downloaded-filter label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.export-downloaded-filter label:hover:not(:has(input:checked)) {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.export-downloaded-filter input {
  width: auto;
  height: auto;
  padding: 0;
  accent-color: var(--accent);
}
.export-date-range-filter {
  border: 0;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
}
.export-date-range-filter legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.export-date-range-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.export-filter-toggle {
  align-self: end;
  min-height: 38px;
}
.export-combobox {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.export-combobox--open {
  z-index: 60;
}
.export-combobox > .field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.export-combobox-control {
  min-height: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  background: var(--surface);
  cursor: text;
  margin-top: auto;
}
.export-combobox-control:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.export-combobox-chips {
  display: contents;
}
.export-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 24px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}
.export-chip-remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0 1px;
}
.export-chip-remove:hover { color: var(--danger); }
.export-combobox-input {
  flex: 1 1 120px;
  min-width: 90px;
  height: 24px;
  border: 0;
  outline: 0;
  padding: 0;
  font: inherit;
  color: var(--text);
  background: transparent;
}
.export-apply-btn {
  width: 100%;
  justify-content: center;
  margin-top: 2px;
}
.export-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-bottom: 18px;
}
.export-kpi-card {
  position: relative;
  overflow: hidden;
  min-height: 92px;
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.export-kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
}
.export-kpi-card--green::before { background: #2f8a4e; }
.export-kpi-card--blue::before { background: #2d5bd0; }
.export-kpi-card--gray::before { background: #cfcfd6; }
.export-kpi-card span {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.export-kpi-card strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 24px;
  line-height: 1.05;
}
.export-kpi-card--green strong { color: #168347; font-size: 20px; }
.export-kpi-card--blue strong { color: #2d5bd0; font-size: 20px; }
.export-kpi-card--gray strong { color: var(--muted); font-size: 20px; }
.export-kpi-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11.5px;
}
.export-combobox-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(23, 32, 38, 0.16);
  overflow: hidden;
}
.export-combobox-options {
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
}
.export-combobox-option {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 6px 8px;
}
.export-combobox-option:hover {
  background: var(--surface-hover);
}
.export-combobox-option-related {
  font-weight: 600;
  font-style: italic;
  color: var(--accent);
}
.export-combobox-option-divider {
  border-top: 1px solid var(--border);
  height: 0;
  margin: 4px 2px;
}
.export-combobox-option input {
  pointer-events: none;
}
.export-combobox-empty {
  padding: 10px 8px;
  color: var(--muted);
  font-size: 12px;
}
.export-combobox-addcustom {
  border-top: 1px solid var(--border);
  padding: 9px 12px;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.export-combobox-addcustom:hover {
  background: var(--surface-hover);
}
.export-summary {
  min-height: 20px;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}
.export-sum-total {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-header, var(--text));
}
.export-preview-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.export-preview-head {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.export-preview-head strong {
  font-size: 13.5px;
}
.export-preview-wrap table.rtable {
  width: 100%;
  min-width: 1080px;
  table-layout: auto;
}
.export-preview-wrap table.rtable th,
.export-preview-wrap table.rtable td {
  min-width: 120px;
  max-width: 260px;
  overflow-wrap: anywhere;
  white-space: normal;
}
.export-preview-wrap table.rtable th:first-child,
.export-preview-wrap table.rtable td:first-child {
  min-width: 180px;
}
.export-preview-wrap table.rtable th[data-export-sort="Description"],
.export-preview-wrap table.rtable td[data-label="Image link"] {
  min-width: 150px;
}
.export-filename-link,
.export-image-link {
  color: var(--accent, #2c7be5);
  cursor: pointer;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.export-filename-link:hover,
.export-filename-link:focus-visible,
.export-image-link:hover,
.export-image-link:focus-visible {
  text-decoration: underline;
}
/* PC8/WK_0627 — sortable Xero preview headers. Cursor pointer + subtle
   hover + accent color on the active sort column so the user knows where
   the table is currently ordered. */
.export-preview-wrap table.rtable th.export-sortable {
  cursor: pointer;
  user-select: none;
}
.export-preview-wrap table.rtable th.export-sortable:hover {
  background: var(--surface-hover, #eef2f5);
}
.export-preview-wrap table.rtable th.export-sortable.is-active {
  color: var(--accent, #2c7be5);
}
.export-preview-wrap table.rtable th.export-sortable:focus-visible {
  outline: 2px solid var(--accent, #2c7be5);
  outline-offset: -2px;
}
/* PC8 (R26) — copy affordance. Whole cell is text-selectable (default
   browser behavior); the ⧉ chip next to Total / Invoice # is the
   one-click copy. Flash adds a brief green tint so users see the
   action landed without an alert dialog. */
.export-preview-wrap table.rtable td.export-copy-cell {
  user-select: text;
}
.export-copy-btn {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border: 1px solid var(--border, #cfd8dc);
  border-radius: 3px;
  background: var(--surface-muted, #f5f7f9);
  color: var(--muted, #555);
  font-size: 11px;
  line-height: 16px;
  cursor: pointer;
  vertical-align: middle;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s;
}
.export-preview-wrap table.rtable tr:hover .export-copy-btn { opacity: 1; }
.export-copy-btn:hover { background: var(--surface-hover, #eef2f5); color: var(--text, #222); }
.export-copy-btn-flash {
  background: #d4edda !important;
  color: #155724 !important;
  border-color: #c3e6cb !important;
  opacity: 1 !important;
}
.export-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.export-toolbar-toggle {
  margin-right: 4px;
  color: var(--muted-color, #555);
}
.export-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.export-page-indicator {
  font-size: 14px;
  color: var(--muted-color, #555);
}
.export-page-size-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 14px;
  color: var(--muted-color, #555);
}
.export-page-size-label select {
  padding: 4px 8px;
}

@media (max-width: 1100px) {
  .export-shell {
    grid-template-columns: 1fr;
  }
  .export-filter-rail {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .export-filters-row-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .export-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .export-shell { margin-left: -12px; margin-right: -12px; }
  .export-content { padding: 16px 12px; }
  .export-filters-row-primary { grid-template-columns: 1fr; }
  .export-date-range-inputs { grid-template-columns: 1fr; }
  .export-kpi-row { grid-template-columns: 1fr; }
  .export-pagination { justify-content: center; }
  .export-page-size-label { margin-left: 0; }
}

/* PC8 (R26) — mobile readability for the export table.
   Below 800px, horizontal scroll already engages via .export-preview-wrap
   { overflow-x: auto } + table { min-width: 1080px }. We tighten cell
   padding so the user can pan less to see the full row, and keep the
   first column sticky on the left as a row anchor. */
@media (max-width: 800px) {
  .export-preview-wrap table.rtable th,
  .export-preview-wrap table.rtable td {
    padding: 6px 8px;
    font-size: 12px;
  }
  .export-preview-wrap table.rtable th:first-child,
  .export-preview-wrap table.rtable td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface, #fff);
    z-index: 1;
    box-shadow: 1px 0 0 var(--border, #cfd8dc);
  }
  .export-preview-wrap table.rtable th:first-child {
    background: var(--surface-muted, #f5f7f9);
  }
  /* Copy chip is always visible on mobile (hover doesn't exist). */
  .export-copy-btn { opacity: 1; }
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 32, 38, 0.4);
  z-index: 99;
}

/* ─── Toggle label ─────────────────────────────────────────────────────── */
.toggle-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

/* ─── Mobile bottom nav ─────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 80;
}
.bottom-nav button {
  flex: 1;
  border: none;
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
}
.bottom-nav button.active { color: var(--accent); }

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
  .sidebar.open { transform: none; }
  .main-wrap { margin-left: 0; padding-bottom: 60px; }
  .topbar { display: flex; }
  .bottom-nav { display: flex; }
  .view { padding: 16px; }
  .detail-layout { grid-template-columns: 1fr; }
  .receipt-detail-layout { grid-template-columns: 1fr; }
  .receipt-detail-layout.image-minimized { grid-template-columns: 1fr; }
  .detail-image-col { position: static; }
  .receipt-right-rail {
    position: static;
  }
  .receipt-image-rail-restore {
    width: 100%;
    min-height: 42px;
    grid-auto-flow: column;
    align-content: center;
    justify-content: center;
  }
  .receipt-image-rail-restore span:last-child {
    writing-mode: horizontal-tb;
    transform: none;
  }
  .receipt-detail-header__row { align-items: flex-start; flex-direction: column; }
  .receipt-detail-header__actions { justify-content: flex-start; width: 100%; }
  .receipt-money-items-grid,
  .money-tier-primary,
  .money-tier-secondary,
  .money-tier-tertiary,
  .receipt-amount-card-row,
  .categorize-grid {
    grid-template-columns: 1fr;
  }
  .receipt-section-summary {
    white-space: normal;
  }
  #lineItemsSection .line-item-row {
    grid-template-columns: minmax(0, 1fr) 38px 58px 58px 24px;
  }
  /* PB6: on mobile, image box still bounded (avoids dominating the small viewport) */
  .receipt-image-box { max-height: 220px; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .stats-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-kpi-strip--stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-top-panels {
    grid-template-columns: 1fr;
  }
  .stats-filterbar label {
    min-width: min(150px, 100%);
  }
  .stats-panel .flat-card__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .stats-panel .flat-card__meta {
    margin-left: 0;
  }
  .vendor-toolbar,
  .company-toolbar { grid-template-columns: 1fr; }
  .vendor-shell-toolbar {
    grid-template-columns: 1fr;
  }
  body.shell-vendors-active #vendorsView > .vendor-shell-toolbar {
    grid-template-columns: 1fr;
    padding-inline: 16px;
  }
  body.shell-vendors-active #vendorsView > .vendors-header,
  body.shell-vendor-detail-active #vendorDetailView > .view-header,
  body.shell-vendor-detail-active #vendorDetailContent {
    padding-inline: 16px;
  }
  body.shell-vendors-active #vendorsLayoutContainer {
    display: block;
    height: auto;
    min-height: 0;
  }
  body.shell-vendors-active .vendor-list-shell {
    min-height: 360px;
    max-height: none;
  }
  .vendor-inspector {
    display: none;
  }
  .vendors-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .vendors-header-actions {
    justify-content: flex-start;
  }
  .vendors-source-toggle-row {
    grid-template-columns: 1fr;
  }
  .vendors-receipts-date-row {
    grid-template-columns: 1fr;
  }
  #vendorsView .vendor-filter-deleted {
    justify-self: start;
  }
  .vendor-receipts-toolbar,
  .vendor-receipts-totals {
    grid-template-columns: 1fr;
  }
  .vendor-list-shell,
  .company-list-shell {
    height: calc(100vh - 240px);
    min-height: 380px;
  }
  .vendor-row,
  .company-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body.shell-companies-active .company-table .company-row {
    display: table-row;
  }
  body.shell-companies-active .company-table .company-main,
  body.shell-companies-active .company-table .company-tin,
  body.shell-companies-active .company-table .company-address,
  body.shell-companies-active .company-table .company-badges,
  body.shell-companies-active .company-table .company-actions {
    display: table-cell;
    justify-content: initial;
    justify-items: initial;
  }
  .vendor-side,
  .vendor-atc-cell,
  .vendor-category-cell,
  .vendor-date-cell,
  .vendor-badges,
  .vendor-actions,
  .company-tin,
  .company-badges,
  .company-actions {
    justify-items: start;
    justify-content: flex-start;
  }
  .vendor-row-header { display: none; }
  .vendor-date-cell .vendor-date-label { display: block; }
  .vendor-edit-grid,
  .vendor-edit-fieldset {
    grid-template-columns: 1fr;
  }
  .vendor-detail-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .axis-layout { grid-template-columns: 1fr; }
  .axis-nav {
    position: static;
    max-height: 320px;
  }
  .axis-detail { min-height: 420px; }
  .axis-detail-header { padding: 16px; }
  .axis-tab-panel { padding: 16px; }
  .profile-shell {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .profile-meta {
    grid-template-columns: 1fr;
  }
  .email-pref-row { grid-template-columns: 1fr; }
}

@media (min-width: 769px) {
  .topbar { display: none; }
  .bottom-nav { display: none !important; }
  .sidebar-overlay { display: none !important; }
  .sidebar-collapse-btn { display: flex; }
  body.sidebar-collapsed .sidebar {
    width: 60px;
    min-width: 60px;
  }
  body.sidebar-collapsed .main-wrap { margin-left: 60px; }
  body.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  body.sidebar-collapsed .sidebar-brand span { display: none; }
  body.sidebar-collapsed .sidebar-collapse-btn {
    width: 44px;
    margin-left: 8px;
    margin-right: 8px;
  }
  body.sidebar-collapsed .sidebar-links {
    padding-left: 8px;
    padding-right: 8px;
  }
  body.sidebar-collapsed .nav-group-label,
  body.sidebar-collapsed .nav-group-lock,
  body.sidebar-collapsed .nav-chevron,
  body.sidebar-collapsed .sidebar-link > *:not(.nav-icon),
  body.sidebar-collapsed .admin-label {
    display: none;
  }
  body.sidebar-collapsed .nav-group-header {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  body.sidebar-collapsed .nav-group-icon {
    font-size: 18px;
    margin: 0;
  }
  body.sidebar-collapsed .sidebar-link {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 0;
  }
  body.sidebar-collapsed .sidebar-link .nav-icon {
    width: 100%;
    font-size: 14px;
  }
  body.sidebar-collapsed .nav-group-header {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }
  body.sidebar-collapsed .nav-group-items { padding-left: 0; }
  body.sidebar-collapsed .nav-group-items .sidebar-link { padding-left: 0; }
  body.sidebar-collapsed .nav-group-badge,
  body.sidebar-collapsed .nav-badge {
    display: none !important;
  }
  body.sidebar-collapsed .sidebar-admin-toggle { padding-left: 8px; padding-right: 8px; }
  body.sidebar-collapsed .admin-toggle-btn {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  body.sidebar-collapsed .sidebar-admin-toggle .admin-dot { margin: 0 auto; }
  body.sidebar-collapsed #sidebarUser { display: none; }
}

/* ── Live processing queue (in-flight receipts) ───────────────────────────── */
.proc-cards {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(37, 111, 135, 0.12);
}
.proc-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(37, 111, 135, 0.22);
}
.proc-table-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  color: var(--text);
}
.proc-table-counts {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.proc-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(37, 111, 135, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: proc-spin .8s linear infinite;
}
.proc-table {
  margin: 0;
  background: #fff;
}
.proc-table th,
.proc-table td {
  vertical-align: middle;
}
.proc-filename,
.proc-batch {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.proc-tag {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 9px; border-radius: 999px;
  color: #fff; background: var(--accent);
}
.proc-tag-queued { background: var(--border-strong); color: var(--text); }
.proc-progress-cell {
  min-width: 210px;
  text-align: center;
}
.proc-bar-wrap {
  display: flex;
  justify-content: center;
}
.proc-bar {
  position: relative; height: 10px; border-radius: 999px;
  background: #d7eaf0; overflow: hidden;
  width: 55%;   /* centered ~50-60% width (of cell / visually table progress area) */
}
.proc-bar-fill {
  height: 100%; width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}
@keyframes proc-spin { to { transform: rotate(360deg); } }
@keyframes proc-stripes { from { background-position: 0 0; } to { background-position: 28px 0; } }
.proc-logs {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}
.proc-step {
  padding: 1px 0;
}
.proc-step.done {
  color: var(--accent);
  opacity: 0.75;
}
.proc-step.active {
  color: var(--accent);
  font-weight: 700;
}

/* New proc-UI row layout (JROM mockup): wide bar + single stage line below, no table */
.proc-card {
  display: flex;
  align-items: flex-start;
  padding: 6px 12px 3px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  font-size: 13px;
}
.proc-card:first-child { border-top: none; }
.proc-card--queued {
  align-items: center;
  padding: 4px 12px;
}
/* Currently-processing receipt: ~15% larger + highlighted so it stands out at the top. */
.proc-card--processing {
  font-size: 15px;            /* +~15% from .proc-card 13px */
  padding: 9px 14px 6px;
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border-left: 3px solid var(--accent);
  border-top: none;
  border-radius: 6px;
  margin: 3px 0;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--accent) 18%, transparent);
}
.proc-card--processing .proc-filename { font-size: 14px; }
.proc-card .proc-filename {
  flex: 0 0 90px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 6px;
  font-size: 12.5px;
}
.proc-bar-area {
  flex: 1;
  min-width: 0;
}
.proc-bar-row {
  display: flex;
  align-items: center;
}
.proc-bar {
  flex: 0 0 55%;
  height: 12px;
  background: #d8e8ed;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}
.proc-bar-fill {
  height: 100%;
  width: 0%;
  background-color: var(--accent);
  /* continuous moving stripes = visible "loading" animation while processing */
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.28) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.28) 75%, transparent 75%, transparent
  );
  background-size: 28px 28px;
  border-radius: 999px;
  transition: width 0.3s ease;
  animation: proc-stripes 0.7s linear infinite;
}
.proc-pct {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}
.proc-stage-line {
  margin-top: 2px;
  margin-left: 96px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proc-card--queued .proc-on-queue {
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  margin-left: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .proc-bar-fill,
  .proc-spinner { animation: none; }
}

/* PC2 (R20) — Monthly vendor report */
body.shell-reports-active #reportsView {
  padding: 0;
  min-height: calc(100vh - 99px);
  background: #fff;
}
body.shell-reports-active #reportsView > .shell-page-local-header {
  display: none;
}
.reports-toolbar {
  margin: 0;
  padding: 12px 22px;
  border-bottom: 1px solid #f2f2f4;
  background: #fff;
}
.reports-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.reports-toolbar-desc {
  margin: 0 0 0 auto;
  color: #8a8a96;
  font-size: 12.5px;
}
.reports-month-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
}
.reports-actions { flex-wrap: wrap; justify-content: flex-end; }
.reports-month-label select,
.reports-month-label input[type="month"],
.reports-month-label input[type="number"] {
  min-height: 32px;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; font: inherit;
}
.reports-shell {
  display: grid;
  grid-template-columns: var(--reports-left, 240px) minmax(0, 1fr) var(--reports-right, 44px);
  grid-template-areas: "filters main detail";
  gap: 12px;
  align-items: start;
  padding: 20px 22px 0;
}
/* V2 3-col children */
.reports-filters { grid-area: filters; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.reports-main { grid-area: main; min-width: 620px; display: flex; flex-direction: column; gap: 8px; min-height: 0; } /* min-height:0 critical so flex child can scroll within grid track */
.reports-detail { grid-area: detail; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
/* rail head for collapsed icon rails (funnel + badge left; detail right) */
.reports-rail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 8px; background: #fafafb; border-bottom: 1px solid var(--border); font-size: 12px; min-height: 32px;
}
.reports-filters[data-panel="collapsed"] .reports-rail-head,
.reports-detail[data-panel="collapsed"] .reports-rail-head { flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; writing-mode: horizontal-tb; }
.rail-icon { font-size: 16px; line-height: 1; }
.rail-label { font-size: 10px; color: var(--muted); }
.rail-count { margin-left: 4px; background: var(--accent); color: #fff; font-size: 10px; padding: 0 4px; border-radius: 999px; min-width: 14px; text-align: center; display: inline-block; }
.reports-filters[data-panel="collapsed"] .rail-count { margin-left: 0; margin-top: 2px; }
/* body visibility controlled by data-panel */
.reports-filters-body, .reports-detail-body { flex: 1 1 auto; }
.reports-filters[data-panel="collapsed"] .reports-filters-body,
.reports-detail[data-panel="collapsed"] .reports-detail-body { display: none; }

/* B6: Reports rail support for receipt list + data extract (2-track, no right detail).
   Padding 0 lets inner heads/bodies + .export-content control spacing (avoids double pad vs old rails).
   Data extract preserves its min-h/border/margin. .reports-main .receipt-table-wrap ensures flex fill + internal x-scroll (table never expands page or cuts off header buttons/showing count).
   JS sets --reports-right:0 on these shells. Reports page (3-col + detail) + its CSS completely unregressed. */
#dataExportView .reports-shell,
body.shell-receipts-active .reports-shell { padding: 0; }
#dataExportView .reports-shell {
  min-height: calc(100vh - 170px);
  border-top: 1px solid var(--border);
  margin: 0 -18px -18px;
}
.reports-main .receipt-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
}
/* chips strip (single source of truth from state.reports.filters) */
.reports-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 26px; padding: 2px 0; }
.reports-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.reports-chip .chip-label { font-weight: 600; }
.reports-chip .chip-x { background: transparent; border: 0; color: inherit; font-weight: 700; cursor: pointer; line-height: 1; padding: 0 2px; }
.reports-chip-hint { color: var(--muted); font-size: 12px; }
.reports-chip-clear { background: transparent; border: 0; color: var(--accent); font-size: 11px; cursor: pointer; padding: 2px 6px; text-decoration: underline; }
.reports-3col-filters { display: flex; flex-direction: column; gap: 10px; }
/* keep grand cards (now 5 period summary) fixed inside middle track */
.reports-grand-total {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 0;
}
.reports-stat-cards { /* explicit hook for V2 middle */ }
.reports-grand-card {
  min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: none;
  background: #fff;
  border: 1px solid var(--border);
}
.reports-grand-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #5b53e8;
}
.reports-grand-num { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1; }
.reports-grand-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.reports-grand-vat .reports-grand-num { color: #2d5bd0; }
.reports-grand-withholding .reports-grand-num,
.reports-grand-undated .reports-grand-num { color: #b97309; }
.reports-grand-withholding::before,
.reports-grand-undated::before { background: #b97309; }
.reports-grand-undated { background: #fffaf0; border-color: #edd6aa; }
/* table container owns the internal y-scroll; thead sticky */
.reports-table-wrap,
#reportsTableContainer {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: auto; /* internal scroll for the hero table */
  flex: 1 1 auto;
  min-height: 0; /* allow flex shrink + bounded scroll so sticky thead activates */
  max-height: calc(100vh - 220px); /* bounded height so thead sticks on tall reports (Cluster 4b) */
}
.reports-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.reports-table th {
  background: #fafafb;
  position: sticky;
  top: 0;
  z-index: 1;
  color: #8a8a96;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.reports-table th,
.reports-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f2f2f4;
  white-space: nowrap;
}
.reports-table th[data-reports-sort] { user-select: none; }
.reports-table tr.reports-row { cursor: pointer; pointer-events: auto; }
.reports-table tr.reports-row:hover td { background: #fafafc; }
.reports-table-wrap, #reportsTableContainer { pointer-events: auto; }
.reports-table tr.reports-row.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.reports-table tr.reports-row.is-active td { background: #eeedfb; }
.reports-table tr.reports-row.is-active td:first-child::before { content: "▶ "; color: var(--accent); }
.reports-table tr.reports-row:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.reports-vendor-name {
  color: #5b53e8;
  font-weight: 800;
}
.reports-tax-pill {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
}
.reports-tax-pill--vat {
  background: #e9f0ff;
  color: #2d5bd0;
}
.reports-tax-pill--nonvat {
  background: #f1f2f4;
  color: #55606e;
}
/* right drill styles (reused from old .reports-drilldown) */
.reports-drilldown-header,
.reports-detail .reports-drilldown-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
.reports-drilldown-header h2 { font-size: 15px; margin: 0; }
.reports-drilldown-summary {
  font-size: 13px; color: var(--text);
  margin-bottom: 10px;
}
.reports-drilldown-summary .muted { color: var(--muted); font-size: 12px; }
.reports-drilldown-table-wrap { overflow-x: auto; }
.reports-drilldown-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.reports-drilldown-table th, .reports-drilldown-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.reports-receipt-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.reports-receipt-link:hover { text-decoration: underline; }
.vtag-atc { background: #ecf2ff; color: #2a4d9a; }

/* V2 responsive: full 3-track >=1180; <1180 clamp + auto right collapse (enforced in JS); <=900 1-col flow (drill below table as explicit collapsible section) */
@media (max-width: 1180px) {
  .reports-shell {
    grid-template-columns: var(--reports-left, 200px) minmax(0, 1fr) var(--reports-right, 44px);
  }
  /* V2 redteam Cluster 2a: relax min-widths so middle cannot overflow the grid track into the right rail at 901-1179 (even with right collapsed) */
  .reports-main,
  .reports-table,
  .reports-table-wrap,
  #reportsTableContainer {
    min-width: 0;
  }
}
@media (max-width: 900px) {
  .reports-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "filters"
      "main"
      "detail";
    gap: 8px;
  }
  .reports-main { min-width: 0; }
  .reports-filters, .reports-detail { width: 100%; }
  /* at narrow the rails act as explicit collapsible sections above/below (head always, body when data=open) */
  .reports-filters[data-panel="collapsed"] { min-height: 34px; }
  .reports-detail[data-panel="collapsed"] { min-height: 34px; }
  .reports-table-wrap, #reportsTableContainer { min-height: 200px; }
}

/* legacy .reports-drilldown / .reports-filter-rail / .reports-layout still tolerated for other code paths */
.reports-drilldown {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; max-height: none; overflow-y: auto; position: relative;
}
.reports-layout { display: contents; } /* V2 grid takes over */

/* Mobile-friendly stacked report rows (kept + adapted for V2 grid) */
@media (max-width: 640px) {
  body.shell-reports-active #reportsView {
    min-height: calc(100vh - 60px);
  }
  body.shell-reports-active .app-header-top {
    min-width: 0;
  }
  body.shell-reports-active .app-header-actions {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  body.shell-reports-active .app-header-actions .btn {
    max-width: 120px;
    padding-inline: 8px;
  }
  body.shell-reports-active .shell-profile-btn {
    flex: 0 0 34px;
    width: 34px;
    padding: 0 4px;
  }
  body.shell-reports-active .shell-profile-label {
    display: none;
  }
  .reports-toolbar,
  .reports-shell {
    padding-left: 12px;
    padding-right: 12px;
  }
  .reports-toolbar-desc {
    margin-left: 0;
    width: 100%;
  }
  .reports-grand-total {
    grid-template-columns: 1fr;
  }
  .reports-table {
    min-width: 0;
  }
  .reports-table thead { display: none; }
  .reports-table, .reports-table tbody, .reports-table tr, .reports-table td { display: block; width: 100%; }
  .reports-table tr.reports-row {
    border: 1px solid var(--border); border-radius: 10px;
    margin: 8px; padding: 8px;
  }
  .reports-table tr.reports-row td {
    border: none; padding: 4px 0;
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .reports-table tr.reports-row td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  }
  .reports-table tr.reports-row td[data-label="Vendor"] {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .reports-table tr.reports-row td[data-label="Vendor"]::before {
    margin-top: 2px;
  }
  .reports-table tr.reports-row td[data-label="Vendor"] .reports-vendor-name {
    flex: 1 1 min(180px, 100%);
    min-width: 0;
  }
  .reports-table tr.reports-row td[data-label="Vendor"] .reports-tax-pill {
    flex: 0 0 auto;
  }
  .reports-table tr.reports-row td.num { text-align: right; }
}

/* ─── PD11 (R35) — Approval queue + reject reason modal ─────────────────── */
body.shell-approvals-active .view#approvalsView,
body.shell-myRequests-active .view#myRequestsView {
  padding: 0;
  min-height: calc(100vh - 99px);
}
body.shell-approvals-active #approvalsView > .shell-page-local-header,
body.shell-myRequests-active #myRequestsView > .shell-page-local-header {
  display: none;
}
body.shell-approvals-active .main-wrap,
body.shell-myRequests-active .main-wrap {
  overflow-x: hidden;
}
body.shell-approvals-active .app-header-actions .btn,
body.shell-myRequests-active .app-header-actions .btn {
  height: 32px;
}
.approvals-toolbar {
  margin: 0;
  padding: 12px 22px;
  border-bottom: 1px solid #f2f2f4;
  background: #fff;
}
.approval-status-tabs {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.approval-tab {
  min-height: 32px;
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.approval-tab:last-child { border-right: 0; }
.approval-tab:hover:not(.active) {
  background: var(--surface-hover);
  color: var(--text);
}
.approval-tab.active {
  background: #eeedfb;
  color: #5b53e8;
}
.approvals-table-wrap {
  background: var(--surface);
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow-x: auto;
}
.approvals-table {
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
}
.approvals-table th, .approvals-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid #f2f2f4;
  vertical-align: middle;
  font-size: 12.5px;
}
.approvals-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fafafb;
  color: #8a8a96;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.approvals-table tr:hover td {
  background: #fafafc;
  cursor: default;
}
table.rtable.approvals-table tr:hover td {
  cursor: default;
}
.approval-action-chip {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  border-radius: 6px;
  background: #eeedfb;
  color: #5b53e8;
  font-family: "SF Mono", "Courier New", monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  padding: 3px 8px;
  white-space: nowrap;
}
.approval-requester {
  font-weight: 700;
  color: var(--text);
}
.approval-payload {
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-family: "SF Mono", "Courier New", monospace;
  font-size: 11.5px;
  white-space: nowrap;
}
.approval-date {
  color: var(--muted);
  white-space: nowrap;
}
.approval-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}
.approval-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  padding: 3px 8px;
}
.approval-status-pill--pending {
  background: #fdf2e1;
  color: #b97309;
}
.approval-status-pill--approved {
  background: #e7f5ec;
  color: #2f8a4e;
}
.approval-status-pill--rejected {
  background: #fdecea;
  color: #c0392b;
}
.approval-decision-note {
  display: block;
  max-width: 220px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}
.approval-request-highlight td {
  background: #fff7df;
}
.approval-item-detail {
  background: var(--surface);
  padding: 0 0 24px;
}
.approval-item-detail__toolbar {
  padding: 12px 14px;
  border-bottom: 1px solid #f2f2f4;
}
.approval-item-detail__body {
  padding: 16px 14px 0;
}
.approval-item-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 16px;
}
.approval-item-detail__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.approval-item-detail__meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 18px;
  margin-bottom: 18px;
}
.approval-item-detail__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.approval-item-detail__meta-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #8a8a96;
}
.approval-item-detail__meta-value {
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}
.approval-item-detail__meta-value--mono {
  font-family: "SF Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--muted);
}
.approval-item-detail__preview {
  border: 1px solid #ececf0;
  border-radius: 10px;
  background: #fafafb;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.approval-item-detail__preview-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #8a8a96;
}
.approval-item-detail__preview-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}
.approval-item-detail__preview-line {
  margin: 0 0 6px;
}
.approval-item-detail__preview-line:last-child {
  margin-bottom: 0;
}
.approval-item-detail__preview-notice {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.approval-item-detail__related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ececf0;
}
.approval-item-detail__decisions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}
.approval-item-detail__decision-meta {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .approvals-toolbar {
    padding: 10px 12px;
  }
  .approval-status-tabs {
    width: 100%;
  }
  .approval-tab {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 8px;
  }
}

/* ─── B6d (R6) — Approval setup ────────────────────────────────────────── */
.approval-setup-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 14px;
}
.approval-tenant-picker {
  width: min(280px, 100%);
  margin: 0;
}
.approval-tenant-picker select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--type-body-size);
}
.approval-tenant-label,
.approval-audit-meta {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: var(--type-body-size);
}
.approval-tenant-label {
  color: var(--text);
  font-weight: 700;
}
.approval-setup-groups {
  display: grid;
  gap: 12px;
}
.approval-setup-group {
  overflow: visible;
}
.approval-setup-group .flat-card__header {
  cursor: default;
}
.approval-setup-group .flat-card__header:hover {
  background: transparent;
}
.approval-setup-group .flat-card__title {
  font-size: 15px;
}
.approval-toggle-list {
  display: grid;
  padding: 0;
}
.approval-toggle {
  position: relative;
  min-height: 56px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.approval-toggle:last-child { border-bottom: 0; }
.approval-toggle:hover { background: var(--surface-hover); }
.approval-toggle-input {
  position: relative;
  width: 40px;
  height: 22px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.approval-toggle-input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--muted);
  transition: transform 0.15s, background 0.15s;
}
.approval-toggle-input:checked {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.approval-toggle-input:checked::after {
  transform: translateX(18px);
  background: var(--accent);
}
.approval-toggle-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.approval-toggle-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.approval-toggle-copy strong {
  font-size: var(--type-body-size);
  line-height: 1.25;
}
.approval-toggle-copy code {
  color: var(--muted);
  font-size: 12px;
  word-break: break-word;
}
.approval-toggle-note {
  color: var(--warning);
  font-size: 12px;
  line-height: 1.35;
}
.approval-toggle-note.is-dormant {
  color: var(--muted);
}
.approval-setup-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.approval-setup-feedback {
  color: var(--muted);
  font-size: 13px;
}
@media (max-width: 640px) {
  .approval-setup-toolbar,
  .approval-setup-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .approval-tenant-picker,
  .approval-setup-footer .btn {
    width: 100%;
  }
  .approval-toggle {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .approval-toggle .status-badge {
    grid-column: 2;
    justify-self: start;
  }
}

/* ─── B6 (R1.1) — Branch Setup ─────────────────────────────────────────── */
.branch-setup-table-wrap {
  margin-top: 8px;
}
.branch-setup-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.branch-setup-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
  background: var(--bg);
}
.branch-setup-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 80ms;
}
.branch-setup-table tbody tr:last-child {
  border-bottom: none;
}
.branch-setup-table tbody tr:hover {
  background: var(--surface-hover);
}
.branch-setup-table td {
  padding: 12px 14px;
  vertical-align: middle;
}
.branch-setup-table .branch-name-cell {
  font-weight: 500;
  color: var(--text);
}
.branch-main-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  background: #eef6ff;
  color: #1d6db8;
  border: 1px solid #c3ddf7;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.branch-actions-cell {
  text-align: right;
  white-space: nowrap;
}
.branch-company-cell {
  min-width: 180px;
}
.branch-company-select {
  width: 100%;
  max-width: 240px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.branch-company-select:focus {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 1px;
}
.branch-company-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
body.shell-branchSetup-active .branch-setup-table-wrap {
  margin: 0;
  overflow-x: auto;
}
body.shell-branchSetup-active .branch-setup-table {
  min-width: 860px;
  table-layout: fixed;
  font-size: 13px;
}
body.shell-branchSetup-active .branch-setup-table thead th {
  height: 34px;
  padding: 8px 14px;
  border-bottom: 1px solid #ececef;
  background: #fbfbfc;
  color: #8a8a96;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}
body.shell-branchSetup-active .branch-setup-table td {
  height: 54px;
  padding: 10px 14px;
  border-bottom: 1px solid #f2f2f4;
  color: #7d8294;
}
body.shell-branchSetup-active .branch-setup-table tbody tr {
  border-bottom: 0;
}
body.shell-branchSetup-active .branch-setup-table tbody tr.is-selected td {
  background: #eeedfb;
}
body.shell-branchSetup-active .branch-setup-table .branch-name-cell {
  color: #111827;
  font-weight: 800;
}
body.shell-branchSetup-active .branch-company-select {
  max-width: 240px;
  min-height: 30px;
  border: 0;
  background: #eeeeef;
}
.branch-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0f2f5;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}
.branch-status-badge--decommissioned {
  background: #fff3df;
  color: #b45309;
}
body.shell-branchSetup-active .branch-actions-cell .btn,
body.shell-usersManage-active .admin-users-table .btn {
  min-height: 28px;
  padding: 4px 10px;
  border-color: #ececef;
  background: #fff;
  color: #5b53e8;
  font-size: 12px;
  font-weight: 800;
}
/* Modal — uses existing .modal-backdrop + .modal-box layout */
.branch-modal-box {
  width: 420px;
  max-width: calc(100vw - 32px);
}
.branch-modal-body {
  display: grid;
  gap: 16px;
  padding: 20px 24px 4px;
}
.branch-modal-main-office-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}
.branch-modal-main-office-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--primary, #2563eb);
  cursor: pointer;
}
.branch-modal-main-office-label span:first-of-type {
  font-weight: 500;
}
.branch-modal-main-office-hint {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 400 !important;
}
.branch-modal-error {
  margin: 12px 24px 0;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  color: #b91c1c;
  font-size: 13px;
}

/* ─── B7c (R7) — Email setup ───────────────────────────────────────────── */
.email-setup-list {
  display: grid;
  gap: 14px;
}
.email-template-category {
  overflow: visible;
}
.email-template-category .flat-card__header {
  cursor: default;
}
.email-template-category .flat-card__header:hover {
  background: transparent;
}
.email-template-category .flat-card__title {
  font-size: 15px;
}
.email-template-category .status-badge {
  flex-shrink: 0;
}
.email-template-category-body {
  display: grid;
  gap: 14px;
  padding-top: 14px;
}
.email-template-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.email-template-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.email-template-head h3 {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.25;
}
.email-template-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}
.email-template-dormant {
  color: var(--warning);
  font-weight: 600;
}
.email-template-state {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.email-template-warning {
  margin: 10px 12px 0;
  padding: 9px 10px;
  border: 1px solid var(--badge-review);
  border-radius: 6px;
  background: color-mix(in srgb, var(--badge-review) 48%, var(--surface));
  color: var(--warning);
  font-size: 12px;
}
.email-enabled-toggle {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.email-enabled-toggle input {
  accent-color: var(--accent);
}
.email-template-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(160px, 0.55fr) minmax(260px, 1fr);
  gap: 12px;
  padding: 12px;
}
.email-editor-pane {
  display: grid;
  gap: 10px;
}
.email-token-field {
  display: grid;
  gap: 6px;
}
.email-editor-pane input,
.email-editor-pane textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--accent-soft) 22%, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.email-editor-pane input:focus,
.email-editor-pane textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
}
.email-editor-pane textarea {
  min-height: 220px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height: 1.45;
}
.email-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.email-variable-pane {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  background: var(--surface-muted);
}
.email-variable-pane h3,
.email-preview-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
.email-variable-pane ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.email-variable-pane li {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}
.email-variable-token {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  word-break: break-word;
}
.email-variable-pane span {
  color: var(--muted);
}
.email-preview-pane {
  min-height: 310px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  background: var(--surface);
}
.email-preview-subject {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  word-break: break-word;
}
.email-preview-body {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.email-preview-body p:first-child { margin-top: 0; }
.email-preview-body p:last-child { margin-bottom: 0; }
.email-preview-status {
  min-height: 18px;
  margin-top: 10px;
  color: var(--warning);
  font-size: 12px;
}
@media (max-width: 980px) {
  .email-template-grid {
    grid-template-columns: 1fr;
  }
  .email-preview-pane {
    min-height: 220px;
  }
}
@media (max-width: 640px) {
  .email-template-head,
  .email-template-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .email-template-category-head,
  .email-template-state {
    align-items: flex-start;
    flex-direction: column;
  }
  .email-template-category-head .flat-card__meta {
    margin-left: 0;
  }
  .email-enabled-toggle {
    justify-content: flex-start;
  }
  .email-template-actions .btn {
    width: 100%;
  }
}
.modal-card {
  background: var(--surface);
  border-radius: 10px;
  width: min(440px, 100%);
  padding: 20px;
  box-shadow: 0 20px 60px rgba(23, 32, 38, 0.2);
  display: grid;
  gap: 12px;
}
.modal-card h2 { margin: 0; font-size: 16px; }
.modal-card textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  background: var(--surface);
  color: var(--text);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ─── Primitives (WK_0605 B0b) ─────────────────────────────────────────── */
.pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.pill-toggle__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.pill-toggle__option--selected {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.pill-toggle__option:hover:not(.pill-toggle__option--selected) {
  background: var(--surface);
  color: var(--text);
}
.pill-toggle__option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.value-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  min-width: 140px;
}
.value-card__label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
  opacity: 0.75;
}
.value-card__value {
  font-size: var(--type-numeral-size);
  font-weight: var(--type-numeral-weight);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.value-card__tag {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
}
.value-card--peach {
  background: var(--card-peach);
  color: var(--card-peach-text);
}
.value-card--mint {
  background: var(--card-mint);
  color: var(--card-mint-text);
}
.value-card--sky {
  background: var(--card-sky);
  color: var(--card-sky-text);
}
.value-card--lavender {
  background: var(--card-lavender);
  color: var(--card-lavender-text);
}

.step-bar {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0;
}
.step-bar__step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  color: var(--muted);
  position: relative;
}
.step-bar__marker {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.step-bar__step--done .step-bar__marker {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.step-bar__step--active .step-bar__marker {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.step-bar__step--active {
  color: var(--text);
  font-weight: 600;
}
.step-bar__step--pending { color: var(--muted); }
.step-bar__step + .step-bar__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--border);
  transform: translate(-50%, -50%);
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 160px;
}
.stat-tile__label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
  color: var(--muted);
}
.stat-tile__value {
  font-size: var(--type-heading-size);
  font-weight: var(--type-heading-weight);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat-tile__sub {
  font-size: 12px;
  color: var(--muted);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--type-label-size);
  font-weight: 600;
  line-height: 1.4;
}
.status-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.85;
}
.status-badge--confirm {
  background: #fef08c;
  color: #713f12;
}
.status-badge--review {
  background: #fed7aa;
  color: #9a3412;
}
.status-badge--processed {
  background: #e6f5ea;
  color: #1e7a3d;
}
.status-badge--suspect {
  background: var(--badge-suspect);
  color: var(--badge-suspect-text);
}
.status-badge--locked {
  background: var(--badge-locked);
  color: var(--badge-locked-text);
}
.status-badge--verified {
  background: #dcfce7;
  color: #166534;
}
.status-badge--approved {
  background: #fef3c7;
  color: #854d0e;
}
.status-badge--saved {
  background: #f3f4f6;
  color: #374151;
}

/* B22 owner billing all-tenant summary. */
.owner-billing-overview-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.owner-billing-overview-total {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.owner-billing-overview-total span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: uppercase;
}
.owner-billing-overview-total strong {
  display: block;
  margin-top: 2px;
  font-size: var(--type-heading-size);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .owner-billing-overview-totals { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

.flat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 0;
  overflow: hidden;
}
.flat-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
}
.flat-card__header[role="button"]:hover,
button.flat-card__header:hover,
.flat-card__header[aria-expanded]:hover,
.flat-card__header[tabindex]:hover {
  background: var(--surface-hover);
}
.flat-card__title {
  font-size: var(--type-heading-size);
  font-weight: var(--type-heading-weight);
  color: var(--text);
  margin: 0;
}
.flat-card__meta {
  display: flex;
  gap: 16px;
  font-size: var(--type-body-size);
  color: var(--muted);
  margin-left: auto;
}
.flat-card__chevron {
  color: var(--muted);
  transition: transform 120ms ease;
}
.flat-card--expanded .flat-card__chevron { transform: rotate(90deg); }
.flat-card__body {
  padding: 0 18px 16px;
  border-top: 1px solid var(--border);
}
.flat-card:not(.flat-card--expanded) .flat-card__body { display: none; }

/* ── B11/B22 — Holding Area ─────────────────────────────────────────────── */
.badge-held { background: #fef3c7; color: #92400e; font-weight: 700; }

.holding-shell {
  padding: 12px 22px 28px;
  background: #fff;
  min-height: calc(100vh - 99px);
}
.holding-info-strip {
  margin: 0 0 32px;
  border: 1px solid #bcd3ff;
  border-radius: 8px;
  background: #eef5ff;
  color: #1f54b8;
  padding: 10px 16px;
  font-size: 12.5px;
}
.holding-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.holding-stat {
  min-height: 72px;
  border: 1px solid #ececef;
  border-top: 3px solid #d0d2dc;
  border-radius: 8px;
  background: #fff;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.holding-stat span {
  color: #8a8a96;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.holding-stat strong {
  color: #1d1d22;
  font-size: 24px;
  line-height: 1;
}
.holding-stat--batches { border-top-color: #5b53e8; }
.holding-stat--held { border-top-color: #d77900; }
.holding-stat--ready { border-top-color: #23884e; }
.holding-stat--untagged { border-top-color: #c9cbd3; }
.holding-stat--batches strong { color: #5b53e8; }
.holding-stat--held strong { color: #c36d00; }
.holding-stat--ready strong { color: #23884e; }
.holding-stat--untagged strong { color: #3f4350; }

#heldBucketWrap {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
#heldBucketTableBody { overflow-x: visible; }
#heldBucketView .held-empty-state {
  padding-block: var(--space-6);
  padding-inline: var(--space-4);
  color: var(--muted);
  text-align: center;
}

/* B22 — Grouped holding area */
.holding-groups-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.holding-batch-group {
  border: 1px solid #ececef;
  border-top: 3px solid #d9d9e2;
  border-radius: 8px;
  background: #fff;
  /* visible: absolute typeahead dropdowns must paint past the card edge (F8) */
  overflow: visible;
}

.holding-batch-group__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px 14px;
  background: #fbfbfc;
  border-bottom: 1px solid #e4e4ea;
}

.holding-batch-group__toggle {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e3e8;
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.holding-batch-group__toggle:hover {
  color: var(--text);
  border-color: #d7d7df;
}

.holding-batch-group__check { flex: 0 0 auto; }
.holding-batch-group__check input[type="checkbox"] { cursor: pointer; }

.holding-batch-group__title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.holding-batch-group__name {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0;
  color: #20212a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.holding-batch-group__branch {
  font-size: 11px;
  color: #8a8a96;
  white-space: nowrap;
}

.holding-batch-group__meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.holding-batch-group__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.holding-bulk-apply-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.holding-bulk-apply-select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid #e6e6eb;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  color: var(--text);
  min-width: 150px;
  max-width: 180px;
}

.holding-bulk-apply-select:disabled {
  opacity: 0.5;
  cursor: default;
}

.holding-batch-group__rows {
  display: flex;
  flex-direction: column;
}

.holding-batch-group__rows[hidden] {
  display: none;
}

/* B22 — Receipt row within a batch group */
.holding-receipt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f2f2f4;
  cursor: pointer;
  transition: background 0.12s;
}
.holding-receipt-row:last-child { border-bottom: none; }
.holding-receipt-row:hover { background: #fafafc; }
.holding-receipt-row.sel { background: #eef6ff; }

.holding-receipt-row__check { flex: 0 0 auto; }
.holding-receipt-row__check input[type="checkbox"] { cursor: pointer; }

.holding-receipt-row__info {
  flex: 1 1 44%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.holding-receipt-row__merchant {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}

.holding-receipt-row__meta {
  font-size: 12px;
  color: var(--muted);
}

.holding-receipt-row__dropdowns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.holding-inline-combobox {
  position: relative;
  flex: 0 1 190px;
  min-width: 170px;
  max-width: 190px;
}
.holding-inline-combobox__input {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #e6e6eb;
  border-radius: 7px;
  background: #f2f2f4;
  font-size: 12px;
  color: var(--text);
}
.holding-inline-combobox__input:focus {
  outline: 0;
  border-color: #d8d6f6;
  box-shadow: 0 0 0 3px #eeedfb;
  background: #fff;
}
.holding-inline-combobox__input:disabled {
  opacity: 0.5;
  cursor: default;
}
.holding-inline-combobox__dropdown,
.holding-bulk-combobox__dropdown {
  /* position + z-index from shared .typeahead-dropdown (F8) */
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 12px 24px rgba(23, 32, 38, 0.12);
}
.holding-bulk-combobox {
  position: relative;
  flex: 0 1 150px;
  min-width: 150px;
  max-width: 180px;
}
.holding-bulk-combobox__input {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #e6e6eb;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  color: var(--text);
}
.holding-bulk-combobox__input:focus {
  outline: 0;
  border-color: #d8d6f6;
  box-shadow: 0 0 0 3px #eeedfb;
}
.holding-bulk-combobox__input:disabled {
  opacity: 0.5;
  cursor: default;
}
.typeahead-clear-btn {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.typeahead-clear-btn:hover {
  text-decoration: underline;
}

.holding-row-delete-btn {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #ececef;
  border-radius: 8px;
  color: var(--danger, #dc3545);
  opacity: 1;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
.holding-row-delete-btn:hover {
  color: #b42318;
  border-color: rgba(220, 53, 69, 0.45);
  background: rgba(220, 53, 69, 0.08);
}

@media (max-width: 900px) {
  .holding-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .holding-receipt-row { flex-wrap: wrap; }
  .holding-receipt-row__dropdowns { width: 100%; margin-top: 4px; }
  .holding-inline-combobox { flex: 1 1 160px; max-width: none; }
}

@media (max-width: 720px) {
  .holding-shell {
    padding: 10px 12px 24px;
  }
  .holding-stats {
    grid-template-columns: 1fr;
  }
  .holding-batch-group__header { flex-wrap: wrap; }
  .holding-batch-group__actions { width: 100%; margin-top: 6px; }
  .holding-bulk-apply-controls { width: 100%; }
  .holding-bulk-combobox { flex: 1 1 150px; max-width: none; }
  .holding-receipt-row__merchant { max-width: 160px; }
}

.held-flat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.held-bucket-card__header {
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
}
.held-bucket-card__status { flex: 0 0 auto; }
.held-bucket-card__summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.held-bucket-card__merchant {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.held-bucket-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}
.held-bucket-card__pins {
  font-size: 11px;
  color: var(--accent);
}
.held-bucket-pin { display: inline-flex; align-items: center; gap: 3px; }
.held-bucket-card__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.held-bucket-card:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .held-bucket-card__header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .held-bucket-card__summary {
    flex-basis: calc(100% - 60px);
  }
  .held-bucket-card__actions {
    width: 100%;
    justify-content: flex-start;
    padding-left: 0;
  }
}

@media (min-width: 769px) {
  .main-wrap { margin-left: var(--sidebar-w); }
  body.sidebar-collapsed .sidebar {
    width: var(--sidebar-w-collapsed);
    min-width: var(--sidebar-w-collapsed);
  }
  body.sidebar-collapsed .main-wrap { margin-left: var(--sidebar-w-collapsed); }
}

@media (max-width: 980px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .receipt-inspector {
    width: 300px;
    flex-basis: 300px;
  }
}

@media (max-width: 768px) {
  .topbar { display: flex; }
  .app-header { padding: 0 14px; }
  .app-header-top { min-height: 52px; }
  .app-header-actions { gap: 6px; }
  .shell-profile-actions { gap: 6px; }
  .shell-switch-role-btn { width: 34px; padding: 0; font-size: 0; }
  .shell-switch-role-btn::before { content: "↺"; font-size: 15px; }
  .shell-profile-label { display: none; }
  body.shell-dashboard-active .view#dashboardView {
    min-height: 0;
    padding: 16px;
  }
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
  .dashboard-card-head {
    padding: 12px 14px;
  }
  .shell-page-split {
    flex-direction: column;
    min-height: 0;
  }
  .receipt-inspector {
    width: 100%;
    flex: 0 0 auto;
    max-height: 360px;
    border-left: 0;
    border-top: 1px solid #ececef;
  }
  .receipt-inspector-collapsed {
    width: 100%;
    flex: 0 0 40px;
    border-left: 0;
    border-top: 1px solid #ececef;
    flex-direction: row;
    justify-content: center;
    padding: 0;
  }
  .receipt-inspector-collapsed span:last-child { writing-mode: initial; }
}

/* B7 (2026-06-17, v3 DEFINITIVE): receipts-list responsive columns.
   table-layout:fixed (so cells truncate instead of overflowing) BUT fixed PX widths on the short data
   columns (check/date/total/status/confidence/action) so they always show fully and never absorb slack
   (fixes the big empty gap on the checkbox column). batch/file are left flexible (no width) so they
   absorb the leftover width AND truncate long names with ellipsis. Receipts grid is 2-track so main+table
   fill between the Filters rail and the Receipt Preview (no empty detail track). Density hides trailing
   columns by panel state. Columns: 1 check 2 batch 3 file 4 date 5 total 6 status 7 confidence 8 action
   9 comment 10 uploaded. */
body.shell-receipts-active .reports-shell {
  grid-template-columns: var(--reports-left, 240px) minmax(0, 1fr);
  grid-template-areas: "filters main";
}
body.shell-receipts-active .reports-main { min-width: 0; }
#receiptsView .receipt-table-wrap .rtable { table-layout: fixed; width: 100%; }
/* batch/file: flexible + truncate (override HFB8b white-space:normal/overflow:visible) */
#receiptsView .receipt-table-wrap .rtable .col-batch,
#receiptsView .receipt-table-wrap .rtable .col-filename,
#receiptsView .receipt-table-wrap .rtable td:nth-child(9) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: none;
}
/* fixed px on the short columns so they show fully and don't grow */
#receiptsView .receipt-table-wrap .rtable th:nth-child(1) { width: 44px; }   /* check */
#receiptsView .receipt-table-wrap .rtable th:nth-child(4) { width: 88px; }   /* date */
#receiptsView .receipt-table-wrap .rtable th:nth-child(5) { width: 108px; }  /* total */
#receiptsView .receipt-table-wrap .rtable th:nth-child(6) { width: 116px; }  /* status */
#receiptsView .receipt-table-wrap .rtable th:nth-child(7) { width: 96px; }   /* confidence */
#receiptsView .receipt-table-wrap .rtable th:nth-child(8) { width: 140px; }  /* action */
#receiptsView .receipt-table-wrap .rtable th:nth-child(9) { width: 150px; }  /* comment */
/* batch/file get NO fixed width -> they share the remaining space (flexible) */
#receiptsView .receipt-table-wrap .rtable th:nth-child(10),
#receiptsView .receipt-table-wrap .rtable td:nth-child(10) { display: none; } /* uploaded redundant */
#receiptsView .receipt-table-wrap[data-cols="medium"] .rtable th:nth-child(n+8),
#receiptsView .receipt-table-wrap[data-cols="medium"] .rtable td:nth-child(n+8) { display: none; }
#receiptsView .receipt-table-wrap[data-cols="tight"] .rtable th:nth-child(n+6),
#receiptsView .receipt-table-wrap[data-cols="tight"] .rtable td:nth-child(n+6) { display: none; }

/* ── B3 — Models & Panels (superuser) ──────────────────────────────────────── */
.model-catalog-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
}
.model-catalog-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.model-catalog-tab:hover { color: var(--text); }
.model-catalog-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.model-catalog-tab-panel { }
.mc-badge-open {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: #dcfce7;
  color: #15803d;
  letter-spacing: 0.03em;
}
.mc-badge-closed {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
  letter-spacing: 0.03em;
}
.mc-badge-active {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--badge-processed, #dcfce7);
  color: var(--badge-processed-text, #15803d);
}
.mc-badge-deprecated {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: #fef9c3;
  color: #854d0e;
}
.mc-badge-removed {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--badge-locked, #fee2e2);
  color: var(--badge-locked-text, #b91c1c);
}
body.shell-modelCatalog-active #modelCatalogView > .view-header { position: sticky; top: 0; z-index: 10; background: var(--page-bg, var(--surface)); }

/* B4a/R30: minimal owner shell. Functional routing surface only. */
.owner-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  background: #f6f8fb;
  color: #172033;
}
.owner-rail {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px;
  background: #13233a;
  color: #ffffff;
}
.owner-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.owner-brand img {
  border-radius: 8px;
}
.owner-nav {
  display: grid;
  gap: 6px;
}
.owner-nav-section {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.owner-nav-section-label {
  padding: 0 12px 4px;
  color: #9fb2ca;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.owner-nav-btn {
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 10px 12px;
  background: transparent;
  color: #dbeafe;
  text-align: left;
  font-weight: 700;
}
.owner-nav-btn.active {
  background: #ffffff;
  color: #13233a;
}
.owner-nav-btn:disabled {
  color: #9fb2ca;
  cursor: not-allowed;
}
.owner-rail-actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
}
.owner-main {
  padding: 32px;
  min-width: 0;
}
.owner-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid #d7deea;
}
.owner-kicker {
  margin: 0 0 6px;
  color: #5d6f86;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.owner-header h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
}
.owner-identity {
  display: grid;
  gap: 4px;
  justify-items: end;
  color: #405069;
  font-size: 13px;
}
.owner-identity span:first-child {
  color: #172033;
  font-weight: 800;
}
.owner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.owner-content {
  margin-top: 24px;
}
.owner-impersonation-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 16px;
  align-items: end;
  padding: 18px;
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #ffffff;
}
.owner-impersonation-panel h2 {
  margin: 0;
  color: #172033;
  font-size: 20px;
  line-height: 1.2;
}
.owner-impersonation-panel p {
  margin: 8px 0 0;
  color: #5d6f86;
  line-height: 1.45;
}
.owner-impersonation-controls {
  display: grid;
  gap: 10px;
}
.owner-impersonation-status {
  grid-column: 1 / -1;
  min-height: 18px;
  color: #5d6f86;
  font-size: 13px;
}
.owner-setup-host > .view {
  display: block;
}
.owner-setup-host > .view[hidden] {
  display: none;
}
.owner-setup-host .view-header {
  margin-top: 0;
}
.owner-tile {
  min-height: 150px;
  border: 1px solid #d7deea;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
}
.owner-tile-button {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.owner-tile-button:hover,
.owner-tile-button:focus-visible {
  border-color: #8aa4c4;
  box-shadow: 0 0 0 3px rgba(49, 94, 148, 0.14);
  outline: none;
}
.owner-tile-label {
  display: block;
  margin-bottom: 12px;
  color: #5d6f86;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.owner-tile strong {
  display: block;
  font-size: 18px;
  color: #172033;
}
.owner-tile p {
  margin: 10px 0 0;
  color: #5d6f86;
  line-height: 1.45;
}
.owner-users-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 16px;
  align-items: start;
}
.owner-users-main,
.owner-users-side {
  min-width: 0;
}
.owner-users-side {
  display: grid;
  gap: 16px;
}
.owner-users-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 420px) auto minmax(160px, 1fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.owner-users-show-archived {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
}
.owner-users-status {
  color: #5d6f86;
  font-size: 13px;
  justify-self: end;
  padding-bottom: 9px;
}
.owner-user-form-card .flat-card__body {
  display: grid;
  gap: 12px;
}
.owner-user-form {
  display: grid;
  gap: 12px;
}
.owner-user-fieldset {
  border: 1px solid #d7deea;
  border-radius: 8px;
  margin: 0;
  padding: 10px 12px 12px;
}
.owner-user-fieldset legend {
  padding: 0 4px;
  color: #5d6f86;
  font-size: 12px;
  font-weight: 800;
}
.owner-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
.owner-checkbox-grid label,
.owner-user-fieldset > label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  color: #172033;
  font-size: 13px;
  cursor: pointer;
}
.owner-checkbox-meta {
  margin-left: 4px;
  color: #5d6f86;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.owner-user-result {
  border: 1px solid #86efac;
  border-radius: 6px;
  background: #f0fdf4;
  color: #166534;
  padding: 9px;
  font-size: 13px;
  word-break: break-word;
}

@media (max-width: 760px) {
  .owner-shell {
    grid-template-columns: 1fr;
  }
  .owner-rail {
    min-height: auto;
  }
  .owner-header {
    display: grid;
  }
  .owner-identity {
    justify-items: start;
  }
  .owner-grid {
    grid-template-columns: 1fr;
  }
  .owner-impersonation-panel {
    grid-template-columns: 1fr;
  }
  .owner-users-grid,
  .owner-users-toolbar {
    grid-template-columns: 1fr;
  }
  .owner-users-status {
    justify-self: start;
    padding-bottom: 0;
  }
  .owner-checkbox-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Panel tab: 3-section redesign (B5b) ── */
.mc-panel-sections { display: flex; flex-direction: column; gap: 18px; }
.mc-panel-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.mc-panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-subtle, #f8fafc);
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.mc-panel-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mc-panel-section-total {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.mc-panel-section-total .mc-cost-val {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mc-panel-model-list { padding: 0; }
.mc-panel-model-row {
  display: grid;
  grid-template-columns: 1fr 80px 90px 60px 38px 32px;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.mc-panel-model-row:last-child { border-bottom: none; }
.mc-panel-model-name { min-width: 0; }
.mc-panel-model-name strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.mc-panel-model-cost { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-panel-model-order input { width: 56px; font-size: 12px; padding: 3px 5px; }
.mc-panel-model-enabled { text-align: center; }
.mc-panel-model-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.12s, background 0.12s;
}
.mc-panel-model-remove:hover { color: #b91c1c; background: #fee2e2; }
.mc-panel-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle, #f8fafc);
}
.mc-panel-add-select {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 4px 7px;
}
.mc-panel-add-btn {
  white-space: nowrap;
  font-size: 12px;
  padding: 4px 12px;
}
.mc-panel-empty-hint {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.mc-panel-col-header {
  display: grid;
  grid-template-columns: 1fr 80px 90px 60px 38px 32px;
  gap: 8px;
  padding: 4px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}

/* WK_0627 B2 — receipt image list + clean image page */
.receipt-image-list-status {
  margin: 0 0 10px;
}
.receipt-image-list-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.receipt-image-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.receipt-image-table th,
.receipt-image-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.receipt-image-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2, #f8fafc);
}
.receipt-image-row {
  cursor: pointer;
}
.receipt-image-row:hover,
.receipt-image-row:focus-visible {
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
  outline: none;
}
.receipt-image-file {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
}
.receipt-image-detail-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.receipt-image-detail-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.receipt-image-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.receipt-image-detail-heading {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
}
.receipt-image-detail-sub {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.receipt-image-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 16px;
  margin: 0;
}
.receipt-image-detail-stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.receipt-image-detail-stats dt {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.receipt-image-detail-stats dd {
  margin: 0;
  font-size: 14px;
}
.receipt-image-detail-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #111827;
}
.receipt-image-detail-frame--loading {
  background: var(--surface);
}
.receipt-image-detail-frame--pdf {
  align-items: stretch;
  background: #f9fafb;
}
.receipt-image-detail-img {
  max-width: 100%;
  max-height: min(72vh, 900px);
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #fff;
}
.receipt-image-detail-spinner {
  color: var(--muted);
  font-size: 14px;
}
.receipt-image-detail-card--unavailable .receipt-image-detail-heading {
  font-size: 18px;
}
.receipt-image-detail-actions {
  display: flex;
  gap: 8px;
}
.receipt-image-detail-skeleton {
  display: block;
  height: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: receipt-image-skeleton 1.2s ease-in-out infinite;
}
.receipt-image-detail-skeleton--title {
  width: min(420px, 70%);
  height: 22px;
}
.receipt-image-detail-skeleton--meta {
  width: min(280px, 50%);
}
@keyframes receipt-image-skeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}


/* Tenant Billing (legacy SPA compact view) */
.admin-billing-tabs {
  margin: 0 0 12px;
}

.admin-billing-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.admin-billing-metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  min-width: 0;
  padding: 10px 11px;
}

.admin-billing-metric span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-billing-metric strong {
  color: var(--text);
  display: block;
  font-size: 20px;
  line-height: 1.1;
  margin-top: 3px;
}

.admin-billing-metric small {
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

.admin-billing-grid,
.admin-billing-pay-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
}

.admin-billing-pay-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}

.admin-billing-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  min-width: 0;
  overflow: hidden;
}

.admin-billing-panel__head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  min-height: 40px;
  padding: 8px 11px;
}

.admin-billing-panel__head h2 {
  font-size: 14px;
  font-weight: 800;
  margin: 0;
}

.admin-billing-list {
  display: flex;
  flex-direction: column;
}

.admin-billing-row {
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 62px;
  padding: 10px 11px;
  text-align: left;
  width: 100%;
}

.admin-billing-row:hover {
  background: var(--surface-hover);
}

.admin-billing-row.active {
  background: #f0f6fc;
  box-shadow: inset 3px 0 0 var(--accent);
}

.admin-billing-row:last-child {
  border-bottom: 0;
}

.admin-billing-row__title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 5px;
}

.admin-billing-row__meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
}

.admin-billing-row__amount {
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
}

.admin-billing-row__amount small {
  color: var(--muted);
  display: block;
  font-weight: 650;
  margin-top: 5px;
}

.admin-billing-pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-billing-pill--open { background: #eef5fc; color: #15538a; }
.admin-billing-pill--closed { background: #f2f4f7; color: #344054; }
.admin-billing-pill--paid { background: #ecfdf3; color: #1a7a55; }
.admin-billing-pill--pending { background: #fff8e6; color: #9a6a12; }
.admin-billing-pill--unpaid,
.admin-billing-pill--rejected { background: #fff1f0; color: #b42318; }

.admin-billing-detail,
.admin-billing-pay-summary {
  padding: 12px;
}

.admin-billing-detail__top {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.admin-billing-detail__top h3 {
  font-size: 18px;
  line-height: 1.15;
  margin: 0 0 4px;
}

.admin-billing-detail__top p,
.admin-billing-pay-summary p {
  color: var(--muted);
  margin: 0;
}

.admin-billing-detail__actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}

.admin-billing-lines th,
.admin-billing-lines td {
  padding: 8px 6px;
}

.admin-billing-lines tfoot td {
  font-weight: 850;
}

.admin-billing-note {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  margin-top: 12px;
  padding: 9px 10px;
}

.admin-billing-pay-summary {
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.admin-billing-pay-summary strong {
  flex-basis: 100%;
  font-size: 15px;
}

.admin-billing-pay-summary span {
  color: var(--muted);
}

.admin-billing-pay-summary p {
  flex-basis: 100%;
}

.admin-billing-proof-form {
  display: grid;
  gap: 12px;
  max-width: 560px;
  padding: 14px 16px 16px;
}

.admin-billing-proof-field {
  align-items: center;
  color: var(--text);
  display: grid;
  gap: 10px;
  grid-template-columns: 112px minmax(0, 1fr);
  margin: 0;
}

.admin-billing-proof-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-billing-proof-field select,
.admin-billing-proof-field input {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  min-height: 34px;
  min-width: 0;
  padding: 6px 9px;
  width: 100%;
}

.admin-billing-proof-field input[readonly] {
  background: #f8fafc;
  color: var(--text);
  font-weight: 750;
}

.admin-billing-proof-field input[type="file"] {
  align-content: center;
  cursor: pointer;
  padding: 4px;
}

.admin-billing-proof-field input[type="file"]::file-selector-button {
  background: var(--accent);
  border: 0;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
  margin-right: 10px;
  min-height: 26px;
  padding: 4px 10px;
}

.admin-billing-proof-field input[type="file"]:disabled {
  cursor: not-allowed;
}

.admin-billing-proof-field input[type="file"]:disabled::file-selector-button {
  background: var(--border-strong);
  cursor: not-allowed;
}

.admin-billing-proof-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding-left: 122px;
}

.admin-billing-timeline {
  padding: 10px 12px;
}

.admin-billing-timeline__item {
  border-left: 2px solid var(--border);
  padding: 0 0 12px 10px;
  position: relative;
}

.admin-billing-timeline__item::before {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 50%;
  content: "";
  height: 8px;
  left: -6px;
  position: absolute;
  top: 2px;
  width: 8px;
}

.admin-billing-timeline__item strong,
.admin-billing-timeline__item span,
.admin-billing-timeline__item small {
  display: block;
}

.admin-billing-timeline__item span,
.admin-billing-timeline__item small {
  color: var(--muted);
}

@media (max-width: 780px) {
  .admin-billing-summary-strip,
  .admin-billing-grid,
  .admin-billing-pay-grid {
    grid-template-columns: 1fr;
  }

  .admin-billing-detail__top {
    display: block;
  }

  .admin-billing-detail__actions {
    margin-top: 10px;
  }

  .admin-billing-proof-form {
    max-width: none;
  }

  .admin-billing-proof-field {
    grid-template-columns: 1fr;
  }

  .admin-billing-proof-actions {
    padding-left: 0;
  }
}

.admin-billing-statement { max-width: 920px; }
.admin-billing-statement__topbar,
.admin-billing-statement__heading { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.admin-billing-statement__topbar { margin-bottom: 14px; }
.admin-billing-statement__topbar span,
.admin-billing-statement__heading span { color: var(--muted); font-size: 12px; }
.admin-billing-statement__card,
.admin-billing-statement__detail { padding: 16px; }
.admin-billing-statement__eyebrow { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-billing-statement__heading { margin: 24px 0 10px; }
.admin-billing-statement__heading h3 { color: var(--accent); font-size: 13px; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
.admin-billing-statement__detail > h4,
.admin-billing-statement__company h4 { margin: 0 0 8px; }
.admin-billing-statement__detail > h4 small { color: var(--muted); font-size: 12px; font-weight: 500; }
.admin-billing-statement__company { margin-top: 20px; }
.admin-billing-statement__sum td { border-top: 1px solid var(--border); font-weight: 800; }
.admin-billing-statement__grand td { border-top: 2px solid var(--accent); color: var(--accent-strong); font-weight: 850; }

.export-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0.55rem;
}
.export-view-tab.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.export-templates-panel {
  min-width: 0;
}
.export-template-workspace {
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
}
.export-template-list-pane {
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--surface-muted);
  min-width: 0;
}
.export-template-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.5rem 0.55rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-strong);
}
.export-template-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  display: grid;
  gap: 0.3rem;
  max-height: 28rem;
  overflow: auto;
}
.export-template-row {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 0.15rem;
  padding: 0.45rem 0.5rem;
  border-radius: 0.38rem;
  border: 1px solid transparent;
  background: #ffffff;
  color: var(--text);
  font-size: 0.82rem;
}
.export-template-row.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.export-template-badge {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}
.export-template-empty {
  color: var(--muted);
  font-size: 0.82rem;
  padding: 0.45rem 0.5rem;
}
.export-template-editor {
  min-width: 0;
  display: grid;
  gap: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--surface);
  padding: 0.7rem;
}
.export-template-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.export-template-meta {
  display: grid;
  grid-template-columns: minmax(10rem, 1.4fr) minmax(7rem, 0.8fr);
  gap: 0.55rem;
  align-items: end;
}
.export-template-meta label {
  display: grid;
  gap: 0.2rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}
.export-template-columns-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-strong);
}
.export-template-add-column {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.export-template-table-wrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
}
.export-template-columns-table {
  margin-top: 0;
  width: 100%;
  font-size: 0.8rem;
}
.export-template-columns-table th,
.export-template-columns-table td {
  padding: 0.35rem 0.45rem;
  vertical-align: middle;
}
.export-template-header-input {
  width: 100%;
  min-height: 30px;
  font-size: 0.8rem;
}
.export-template-column-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  white-space: nowrap;
}

.export-download-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: start center;
  padding: 1.5rem;
  background: rgba(15, 23, 42, 0.42);
}
.export-download-modal[hidden] {
  display: none;
}
.export-download-modal-panel {
  width: min(100%, 35rem);
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: #ffffff;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.22);
  padding: 1.2rem;
  display: grid;
  gap: 0.65rem;
}
.export-download-modal-panel h2 {
  margin: 0;
  font-size: 1.2rem;
}
.export-download-modal-copy,
.export-download-modal-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}
.export-download-template-picker {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.45rem;
}
.export-download-template-picker legend {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0 0.2rem;
}
.export-download-template-options {
  display: grid;
  gap: 0.35rem;
  max-height: 10rem;
  overflow: auto;
}
.export-download-template-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface-muted);
}
.export-download-modal-panel .export-modal-choice-input {
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
.export-download-template-copy {
  display: grid;
  gap: 0.1rem;
}
.export-download-template-badge {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}
.export-download-set-default {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
}
.export-download-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}
.export-overflow-warning {
  color: #1d4ed8;
  font-weight: 700;
}