/* Vendigo application shell
   Clean 2026 redesign: compact professional SaaS UI, reference-aligned overview,
   invoice review, mailbox, modal, table, and dark-mode surfaces. */

/* Inter — the app's SINGLE UI typeface (matches the reference designs). Bundled locally so it
   always loads and stays crisp; Hebrew content falls back to the system Hebrew face. One
   variable file covers weights 100–900. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --bg: #f4f6fb;
  --bg-soft: #eef1f8;
  --surface: #ffffff;
  --surface-2: #f5f7fc;
  --surface-3: #eef2f9;
  --line: #e6eaf2;
  --line-strong: #d5dcea;
  --ink: #101828;
  --ink-2: #1f2a3d;
  --muted: #5b6a86;
  --muted-2: #7683a0;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: #e8f0ff;
  --indigo: #5b60e8;
  --indigo-soft: #ecedfd;
  --good: #16a34a;
  --good-soft: #dcfce7;
  --warn: #e08a00;
  --warn-soft: #fdefd4;
  --danger: #e5484d;
  --danger-soft: #fdecec;
  --teal: #0d9488;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px rgba(16, 24, 40, 0.06);
  --shadow-pop: 0 18px 46px rgba(15, 23, 42, 0.16);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1730;
  --bg-soft: #101f3d;
  --surface: #142342;
  --surface-2: #192a4d;
  --surface-3: #21365e;
  --line: #2b4069;
  --line-strong: #3a5484;
  --ink: #eef3fb;
  --ink-2: #d4deef;
  --muted: #9dafca;
  --muted-2: #7f91b0;
  --accent: #7aa2ff;
  --accent-strong: #a9c1ff;
  --accent-soft: rgba(91, 141, 255, 0.16);
  --indigo: #a5b4fc;
  --indigo-soft: rgba(129, 140, 248, 0.18);
  --good: #4ade80;
  --good-soft: rgba(74, 222, 128, 0.14);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --danger: #fb7185;
  --danger-soft: rgba(251, 113, 133, 0.14);
  --teal: #2dd4bf;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22), 0 1px 4px rgba(0, 0, 0, 0.18);
  --shadow-pop: 0 20px 56px rgba(0, 0, 0, 0.38);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  /* 13px base (was 14px): a compact, professional SaaS density that opens at the right scale
     at 100% browser zoom on a ~1280 CSS-px laptop — no zoom/scale hack. 13px stays razor-sharp
     under Windows ClearType. */
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0;
  /* Do NOT set -webkit-font-smoothing:antialiased here. On Windows (this app's
     primary target) it disables ClearType subpixel rendering and forces grayscale
     AA, which makes text look thin, soft and "pixelized". Leaving it unset lets the
     OS render crisp, high-resolution text. Keep text-rendering:auto (NOT
     optimizeLegibility): on Windows/Chrome optimizeLegibility softens edges and
     costs the razor-sharp ClearType look; auto keeps subpixel snapping. */
  text-rendering: auto;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

svg {
  display: block;
}

[hidden],
.hidden {
  display: none !important;
}

.muted,
.table-sub,
.field-hint,
.muted-inline {
  color: var(--muted);
}

.grow {
  flex: 1 1 auto;
}

.left {
  justify-content: flex-start;
}

.tnum,
.stat-value,
.kpi-cell-value,
.data-table td,
.ihb-fact strong {
  font-variant-numeric: tabular-nums;
}

/* Boot */
.boot-splash {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 22px;
  background: var(--bg);
}

.boot-splash__logo {
  width: 112px;
  height: auto;
  background: transparent;
  box-shadow: none;
}

.boot-splash__bar {
  width: 160px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.boot-splash__bar span {
  display: block;
  width: 46%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  animation: vendigoBoot 1.1s ease-in-out infinite alternate;
}

@keyframes vendigoBoot {
  from { transform: translateX(0); }
  to { transform: translateX(118px); }
}

/* Shell */
.workspace-shell {
  min-height: 100vh;
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  background: var(--bg);
}

/* Standard responsive layout — the grids fit their columns to the available width and
   the page scrolls normally when content is taller than the screen. No global scaling. */

.shell-sidebar {
  min-width: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 16px 18px;
  overflow: hidden auto;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.brand-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 46px;
  padding: 0 4px 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.brand-logo,
.brand-logo.brand-logo-lockup {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: none;
}

.ven-authdock-slot {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.ven-profile-dock {
  width: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.ven-profile-dock:hover {
  background: var(--surface-3);
  border-color: var(--line-strong);
}

.ven-profile-dock .ven-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: var(--accent);
  font-size: 12px;
}

.ven-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #4f7bff, #234ee7);
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
}

.ven-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ven-profile-dock__copy {
  display: none;
}

.ven-profile-dock__name {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.15;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ven-profile-dock__role {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ven-profile-dock__chev {
  display: inline-flex;
  align-items: center;
  color: var(--muted-2);
}

.ven-profile-dock__chev svg {
  width: 15px;
  height: 15px;
}

.ven-owner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 800;
}

.shell-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shell-nav-main {
  margin-top: 4px;
}

.sidebar-spacer {
  flex: 1 1 auto;
}

.sidebar-divider {
  height: 1px;
  margin: 6px 6px 0;
  background: var(--line);
}

.nav-btn {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.nav-btn:hover {
  background: var(--surface-2);
  color: var(--ink-2);
}

.nav-btn.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.nav-btn-start {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.nav-btn svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  stroke-width: 1.9;
}

.nav-btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-badge {
  min-width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  background: #edf2fb;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.nav-btn.active .nav-badge {
  background: #d9e6ff;
  color: var(--accent-strong);
}

.nav-badge-warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.sidebar-product-footer {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 10px 3px;
  border-top: 1px solid var(--line);
}

.sidebar-product-footer strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-2);
}

.sidebar-product-footer span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.sidebar-app-version {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidebar-product-footer i {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 999px;
  background: var(--good);
}

.shell-main {
  min-width: 0;
  padding: 18px 20px 20px;
}

/* Header and actions */
.page-header,
.vendor-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
}

.page-title {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 850;
}

/* Breadcrumb (Company/Vendor detail): a subtle text link, not the raw bordered browser
   button it rendered as before. */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.breadcrumb-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.12s ease;
}

.breadcrumb-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.breadcrumb-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.vendor-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: min(860px, 72vw);
}

.status-check,
.reminder-bar,
.reply-notification-bar,
.reply-notification-pop {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 650;
}

/* Lightened per status (Aviram): a soft status tint on the pill — no dot light. */
.status-check {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}

.status-check.is-good,
.status-check.good {
  background: var(--good-soft);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 28%, var(--line));
}

.status-check.is-warn,
.status-check.warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
}

.reminder-bar:not(.reminder-bar-empty) {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
}

.reminder-bar-empty {
  background: var(--good-soft);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 26%, var(--line));
}

.background-task-dot,
.notif-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent);
}

/* No "dot light" inside the Overview status / payments pills (per Aviram) — they read
   as gentle text chips, not status lights. Presence dots elsewhere are untouched. */
.status-check__dot {
  display: none;
}

.reminder-bar::before {
  content: none;
  display: none;
}

.reminder-bar {
  max-width: min(520px, 42vw);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.reminder-bar .reminder-slideshow,
.reminder-bar strong,
.reminder-bar span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reminder-bar-empty {
  color: var(--muted);
}

.reminder-bar-empty::before {
  background: var(--good);
}

.reply-notification-anchor {
  position: relative;
  display: inline-flex;
}

.reply-notification-pop {
  position: relative;
}

.reply-notification-pop.is-unread {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.reply-notification-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
}

.background-task-spinner,
.ai-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: vendigoSpin 0.8s linear infinite;
}

@keyframes vendigoSpin {
  to { transform: rotate(360deg); }
}

/* Smart AI modal: the inner rows were unstyled. Give the loading row, result block and the
   "Teach the assistant" panel clean, aligned layout matching the rest of the app. */
.ai-assist-modal {
  width: min(760px, calc(100vw - 36px));
}

.ai-loading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 650;
}

.ai-loading-row > button {
  margin-left: auto;
}

.ai-result-stack {
  margin-top: 4px;
}

.ai-teach-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 4px 14px;
}

.ai-teach-panel > summary {
  padding: 9px 0;
  cursor: pointer;
  color: var(--ink);
  font-weight: 750;
  font-size: 13px;
  list-style: none;
}

.ai-teach-panel[open] > summary {
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

.ai-teach-panel > summary::-webkit-details-marker {
  display: none;
}

/* Buttons and controls */
.btn,
.icon-btn,
.row-action,
.chip-btn,
.seg-btn,
.link-btn,
.link-button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 10px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow-card);
}

.btn:hover,
.icon-btn:hover,
.row-action:hover,
.chip-btn:hover,
.seg-btn:hover,
.link-btn:hover,
.link-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
}

.btn.primary,
.seg-btn.active,
.seg-btn.is-active,
.seg-btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.btn.secondary,
.btn.ghost,
.icon-btn {
  background: var(--surface);
}

.btn.danger,
.btn.secondary.danger,
.btn.ghost.danger {
  color: var(--danger);
}

.btn.tiny,
.icon-btn.tiny {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
}

.btn.icon-only,
.quick-action-btn,
.row-action,
.invoice-bucket-actions .btn,
.page-actions .quick-action-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
}

.btn.icon-only.tiny,
.invoice-bucket-actions .btn.tiny,
.row-action {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
}

.btn svg,
.icon-btn svg,
.row-action svg,
.quick-action-btn svg,
.link-button svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.row-action {
  font-size: 0;
}

.row-action::before {
  content: "...";
  font-size: 18px;
  line-height: 1;
}

.section-actions,
.panel-actions,
.invoice-panel-actions,
.reply-actions,
.modal-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Only the modal FOOTER bar carries the grey action-bar chrome (fill + top border + height +
   padding). The header/inline action clusters above (modal toolbar, panel "Edit locked"
   toggles, reply actions) are just button groups — inheriting this chrome drew a grey box
   around them. They now sit cleanly on their surface. */
.modal-foot {
  min-height: 52px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

/* The `.left` modifier must actually left-align (the base is flex-end). Without this the
   "left" button rows (e.g. the company mailbox actions) jam to the right edge, landing under
   the floating chat/assistant bubbles and reading as clipped. Left-clustered is also compacter. */
.section-actions.left {
  justify-content: flex-start;
}

/* Vendor-header approval / recurring toggle-buttons + their inline on/off switch. The rebuild
   left BOTH unstyled, so they fell back to a 26px default button with a broken switch, sitting
   misaligned next to the 32px .btn.tiny siblings. Style them as clean pill buttons (same height)
   with a proper mini switch. */
.vendor-approval-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.vendor-approval-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong));
  background: var(--surface-2);
}

.vendor-approval-toggle__label {
  line-height: 1;
  white-space: nowrap;
}

.ven-switch {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 17px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background 0.15s ease;
}

.ven-switch.is-checked {
  background: var(--accent);
}

.ven-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3);
  transition: transform 0.15s ease;
}

.ven-switch.is-checked .ven-switch__knob {
  transform: translateX(13px);
}

/* Form toggle rows (Payment approvals etc.): the real <input> is visually hidden and
   the .ven-switch span is the visual toggle. Without this CSS the native checkbox
   rendered full-width (983px) and floated off to the side — the "messy/misaligned"
   Integration Settings toggles. Two markup shapes are supported:
     1) <input.ven-switch-input> + <label.ven-switch-row>   (input is a sibling)
     2) <label.ven-switch-row><input.ven-switch-input2> …>   (input is a child) */
.ven-switch-input,
.ven-switch-input2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.ven-switch-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}

.ven-switch-row + .ven-switch-row,
.approval-config .ven-switch-row {
  margin-top: 10px;
}

.ven-switch-row .ven-switch {
  margin-top: 1px;
}

.ven-switch__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}

.ven-switch__text small {
  color: var(--muted);
  font-weight: 550;
  font-size: 12px;
}

.ven-switch__state {
  flex: 0 0 auto;
  align-self: center;
}

.ven-switch__state::after {
  content: "Off";
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Checked state driven by the hidden input (covers both markup shapes) */
.ven-switch-input:checked + .ven-switch-row .ven-switch,
.ven-switch-input2:checked ~ .ven-switch {
  background: var(--accent);
}

.ven-switch-input:checked + .ven-switch-row .ven-switch__knob,
.ven-switch-input2:checked ~ .ven-switch .ven-switch__knob {
  transform: translateX(13px);
}

.ven-switch-input:checked + .ven-switch-row .ven-switch__state::after,
.ven-switch-input2:checked ~ .ven-switch__state::after {
  content: "On";
  color: var(--good);
}

.ven-switch-input:focus-visible + .ven-switch-row,
.ven-switch-row:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Nested sub-toggle sits indented beneath its parent switch. */
.ven-subswitch {
  margin-left: 20px;
}

/* Sub-tab navigation (Company & Vendor detail: Overview / Invoices / Files / Statements /
   Payments / Agreements / Mailbox). The rebuild left `.tab-bar` + `.tab-btn` unstyled, so tabs
   rendered as raw grey 3D browser buttons with no active-state — the biggest "tabs look bad"
   offender. Clean underline-style tab strip: */
.tab-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.tab-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 9px 14px;
  border-radius: 9px 9px 0 0;
  font-size: 13px;
  font-weight: 750;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.tab-btn:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Detail-page body shell — keep it a clean full-width column that can't blow out a flex parent. */
.vendor-dashboard-layout {
  display: block;
}

.vendor-main {
  min-width: 0;
}

.seg-toggle,
.chip-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.seg-toggle {
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.seg-btn {
  min-height: 30px;
  border-radius: 9px;
  border-color: transparent;
  box-shadow: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 0 11px;
}

.chip,
.chip-btn,
.filter-chip {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 11px;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
}

.chip-btn.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
}

/* Forms */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field > span,
.field label,
.field-label,
.ov-filter > span {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

input,
select,
textarea,
.search-field,
.multi-select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
  outline: none;
  font-weight: 700;
  box-shadow: none;
}

textarea {
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

select {
  appearance: auto;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-2);
  font-weight: 650;
}

input:focus,
select:focus,
textarea:focus,
.search-field:focus {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Accessibility — a clear, consistent keyboard focus ring on every interactive element.
   :focus-visible only triggers for keyboard / assistive-tech users, so mouse clicks stay clean.
   Inputs keep their softer box-shadow ring above (no doubled outline). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.search-field:focus-visible {
  outline: none;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.compact-form-grid {
  gap: 12px;
}

.span-2 {
  grid-column: 1 / -1;
}

.checkbox-field {
  flex-direction: row;
  align-items: center;
}

.checkbox-field input,
.check-row input {
  width: 16px;
  min-height: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.inline-note,
.inline-notice,
.status-note,
.warning-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-2);
  padding: 10px 12px;
  font-weight: 700;
}

.inline-note.compact {
  padding: 8px 10px;
  font-size: 12.5px;
}

.inline-note.warn,
.inline-notice-warn,
.status-note.warn,
.warning-row,
.invoice-panel-note.warn {
  background: var(--warn-soft);
  color: #8a4b00;
  border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
}

.inline-note.danger,
.inline-notice-danger,
.status-note.danger,
.invoice-panel-note.danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
}

.inline-note.good,
.inline-notice-good,
.status-note.good,
.invoice-panel-note.good {
  background: var(--good-soft);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 28%, var(--line));
}

/* ===== Status Check modal — grouped, aligned health report ===== */
.modal-card.status-check-modal {
  width: min(540px, 94vw);
}

.status-check-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-verdict {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
}

.status-verdict.good {
  background: var(--good-soft);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 28%, var(--line));
}

.status-verdict.warn {
  background: var(--warn-soft);
  color: #8a4b00;
  border-color: color-mix(in srgb, var(--warn) 32%, var(--line));
}

.status-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-section-label {
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.status-rows {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 9px 13px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  font-size: 13px;
  color: var(--ink);
}

.status-rows > .status-row:first-child {
  border-top: 0;
}

.status-row > span {
  color: var(--muted);
  font-weight: 700;
}

.status-row > strong {
  color: var(--ink);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.status-row--sub > span {
  padding-left: 16px;
  position: relative;
}

.status-row--sub > span::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 6px;
  height: 1.5px;
  transform: translateY(-50%);
  background: var(--line-strong);
  border-radius: 1px;
}

.status-row--action {
  cursor: pointer;
  transition: background 0.15s ease;
}

.status-row--action:hover {
  background: var(--accent-soft);
}

.status-row--action > span {
  color: var(--accent);
  font-weight: 800;
}

.status-reconcile {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-reconcile.good {
  background: var(--good-soft);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 28%, var(--line));
}

.status-reconcile.warn {
  background: var(--warn-soft);
  color: #8a4b00;
  border-color: color-mix(in srgb, var(--warn) 32%, var(--line));
}

.inline-notice {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}

.inline-notice-dismiss {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
}

/* Panels and page grids */
.page-stack,
.detail-stack,
.overview-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel,
.card,
.summary-card,
.section-card,
.form-card,
.list-card,
.surface-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.panel {
  overflow: hidden;
}

.panel-head,
.card-head,
.table-toolbar,
.modal-head {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.panel-title,
.section-subhead {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.panel-link,
.link-button,
.link-btn {
  color: var(--accent-strong);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
  min-height: auto;
}

/* Stat grids use a FIXED column count matching the card count so they always fill the
   panel width evenly — no empty right-hand gap on wide screens (the auto-fill sparseness)
   and no lone stretched orphan card. Every card stays the identical Overview/Company/Vendor
   design; only the column count differs. Responsive counts below keep them balanced. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.stat-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Vendor overview has 6 cards: 6-up on wide screens, a balanced 3+3 on a laptop. */
.vendor-kpi-row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1360px) {
  .vendor-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.stat-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.stat-card-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 11px;
}

.stat-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.25;
}

.stat-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}

.stat-icon svg {
  width: 20px;
  height: 20px;
}

/* Per-card badge tints (value stays dark) */
.stat-indigo .stat-icon { background: var(--indigo-soft); color: var(--indigo); }
.stat-blue .stat-icon { background: var(--accent-soft); color: var(--accent); }
.stat-green .stat-icon { background: var(--good-soft); color: var(--good); }
.stat-amber .stat-icon { background: var(--warn-soft); color: var(--warn); }
/* Status cards — badge AND value take the colour */
.stat-warn .stat-icon { background: var(--warn-soft); color: var(--warn); }
.stat-good .stat-icon { background: var(--good-soft); color: var(--good); }
.stat-danger .stat-icon { background: var(--danger-soft); color: var(--danger); }
.stat-warn .stat-value { color: var(--warn); }
.stat-good .stat-value { color: var(--good); }
.stat-danger .stat-value { color: var(--danger); }

.stat-value {
  color: var(--ink);
  font-size: 21px;
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* Overview */
.overview-dashboard {
  gap: 14px;
}

.kpi-band {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.kpi-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  text-align: left;
}

button.kpi-cell {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

button.kpi-cell:hover {
  border-color: var(--line-strong);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05), 0 10px 22px rgba(16, 24, 40, 0.10);
}

.kpi-cell.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-card);
}

.kpi-cell-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  gap: 11px;
}

.kpi-cell-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

.kpi-cell-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}

.kpi-cell-icon svg {
  width: 20px;
  height: 20px;
}

.kpi-cell-value {
  color: var(--ink);
  font-size: 23px;
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.kpi-indigo .kpi-cell-icon { background: var(--indigo-soft); color: var(--indigo); }
.kpi-blue .kpi-cell-icon { background: var(--accent-soft); color: var(--accent); }
.kpi-green .kpi-cell-icon { background: var(--good-soft); color: var(--good); }
.kpi-amber .kpi-cell-icon { background: var(--warn-soft); color: var(--warn); }

.kpi-warn .kpi-cell-icon { background: var(--warn-soft); color: var(--warn); }
.kpi-warn .kpi-cell-value { color: var(--warn); }
.kpi-danger .kpi-cell-icon { background: var(--danger-soft); color: var(--danger); }
.kpi-danger .kpi-cell-value { color: var(--danger); }
/* Paid = green (reference). The strip passes tone "good"; without these the value stayed dark. */
.kpi-good .kpi-cell-icon { background: var(--good-soft); color: var(--good); }
.kpi-good .kpi-cell-value { color: var(--good); }
.kpi-good .kpi-cell-icon { background: var(--good-soft); color: var(--good); }
.kpi-good .kpi-cell-value { color: var(--good); }

.overview-table-panel {
  border-radius: 12px;
  overflow: hidden;
}

.overview-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.ov-filter {
  flex: 1 1 132px;
  min-width: 116px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ov-filter select,
.ov-filter input {
  height: 36px;
  min-height: 36px;
}

.ov-search {
  flex: 2 1 190px;
  min-width: 150px;
}

.ov-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.ov-filter-actions .ov-filter-mini {
  flex: 0 0 auto;
  min-width: 118px;
}

/* The Excel icon IS the button — no square box around a tiny glyph. */
.export-excel-btn {
  width: 40px;
  min-width: 40px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--good);
}

.export-excel-btn svg,
.export-excel-btn img {
  width: 26px;
  height: 26px;
}

.export-excel-btn:hover {
  background: var(--surface-3);
}

.export-excel-btn span {
  display: none;
}

.export-excel-btn svg {
  color: #138a58;
}

.table-footer-note {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

/* Tables */
.table-wrapper,
.table-scroll {
  min-width: 0;
  max-width: 100%;
  width: 100%;
  display: block;
  overflow: auto;
  overscroll-behavior-x: contain;
  /* Isolate each table's layout so scrolling a long list doesn't re-cost layout for the rest of
     the page. Only "layout" (NOT paint) so the sticky <th> header still pins correctly. */
  contain: layout;
}

.table-wrapper > table,
.table-scroll > table {
  min-width: var(--table-min-width, 760px);
}

/* Row action clusters wrap instead of forcing the table wider than its panel — so a
   busy actions column (Connect/Refresh/Disconnect/Open/Copy) fits with NO horizontal
   scroll. Buttons flow onto a second line rather than pushing columns off-screen. */
.table-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.table-actions .btn {
  white-space: nowrap;
}

/* Mailbox connections: let cells wrap (default table cells are nowrap) and clamp raw
   provider error blobs so one long OAuth/JSON error can't blow the column to 400px+
   and force the whole table to scroll sideways. Keeps every column on screen. */
.mailbox-connection-table td,
.mailbox-connection-table th {
  white-space: normal;
  vertical-align: top;
}

.mailbox-connection-table td:nth-child(2) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mailbox-connection-table .table-sub {
  max-width: 240px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
}

.data-table th,
.data-table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.data-table.compact th,
.data-table.compact td {
  padding: 7px 14px;
}

/* Solid, dark, readable body rows — never thin/pale. */
.data-table tbody td {
  color: var(--ink);
  font-weight: 700;
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.data-table tbody tr {
  position: relative;
}

.data-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.table-link-row {
  cursor: pointer;
}

.row-rail td:first-child {
  box-shadow: inset 3px 0 0 var(--line-strong);
}

.row-rail-danger td:first-child,
.row-rail-blocked td:first-child,
.row-rail-red td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

.row-rail-warn td:first-child,
.row-rail-warning td:first-child,
.row-rail-amber td:first-child,
.row-rail-needs-review td:first-child {
  box-shadow: inset 3px 0 0 var(--warn);
}

.row-rail-good td:first-child,
.row-rail-green td:first-child {
  box-shadow: inset 3px 0 0 var(--good);
}

.checkbox-col,
.actions-col,
.col-actions {
  width: 1%;
  text-align: center;
}

.sort-header,
.sortable-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font: inherit;
  text-align: left;
  text-transform: inherit;
  letter-spacing: inherit;
}

.sort-icon {
  color: var(--muted-2);
}

/* Subtle stacked sort chevrons — quiet until the column is active or hovered. */
.sort-icons {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.58;
  font-size: 7.5px;
  color: var(--muted-2);
  opacity: 0.45;
}

.sort-header:hover .sort-icons {
  opacity: 0.85;
}

.sort-header.active .sort-icons {
  opacity: 1;
  color: var(--accent);
}

.amount-warn,
.is-due {
  color: var(--warn);
}

.is-paid {
  color: var(--good);
}

/* Badges */
.badge,
.pill {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1;
  font-weight: 850;
  white-space: nowrap;
}

.badge-paid,
.badge-good,
.badge-active,
.badge-approved,
.badge-approved-active,
.badge-mapped,
.badge-connected,
.badge-clear,
.badge-ready,
.payment-status-good,
.payment-status-paid,
.pill.paid {
  background: var(--good-soft);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 24%, transparent);
}

.badge-warn,
.badge-warning,
.badge-needs-review,
.badge-waiting-for-approval,
.badge-pending,
.badge-scheduled,
.badge-part-paid,
.badge-partly-paid,
.badge-duplicate,
.badge-duplicate-suspected,
.payment-status-warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 24%, transparent);
}

.badge-danger,
.badge-blocked,
.badge-error,
.badge-failed,
.badge-rejected,
.badge-not-paid,
.badge-unpaid,
.badge-overdue,
.payment-status-danger,
.payment-status-not-paid,
.pill.unpaid {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 24%, transparent);
}

.badge-suggested,
.badge-info,
.badge-new,
.badge-unread {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

.badge-indigo {
  background: var(--indigo-soft);
  color: var(--indigo);
  border-color: color-mix(in srgb, var(--indigo) 22%, transparent);
}

.status-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.status-cell::before,
.flag-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.flag-chip {
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--warn);
  font-size: 11px;
  font-weight: 850;
}

.file-link-cell,
.linked-file-cell {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  padding: 0;
  font: inherit;
  cursor: grab;
  text-align: left;
}

.linked-file-cell:active {
  cursor: grabbing;
}

.file-link-icon,
.email-attachment-icon {
  min-width: 34px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 10px;
  font-weight: 900;
}

.file-link-name,
.linked-file-name {
  font-weight: 800;
}

/* Modals */
.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.30);
  /* backdrop-filter is on ::before (below), NOT here: putting it on the flex
     container that holds the modal card promotes the whole subtree to a layer and
     strips Windows ClearType subpixel AA from every glyph — i.e. blurry modal text. */
}

.modal-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-card {
  width: min(760px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  /* Isolate the modal's internal layout + paint from the page so opening/typing/tab-switching
     inside a modal can't trigger a document-wide reflow (part of the "opening feels like a
     refresh" jank). The card already clips its own overflow, so paint containment is safe. */
  contain: layout paint;
}

.modal-card.modal-narrow {
  width: min(520px, calc(100vw - 36px));
}

.modal-card.modal-wide {
  width: min(1120px, calc(100vw - 36px));
}

.modal-head {
  flex: 0 0 auto;
  background: var(--surface);
}

.modal-head strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 850;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.confirm-message,
.confirm-reason {
  color: var(--ink-2);
  font-weight: 700;
}

/* Payment reminders modal: each due invoice is a tidy card row (was unstyled — the amount
   collided with the buttons). Number + meta on the left; amount + actions on the right with
   a tone-colored left edge (overdue = danger, upcoming = warn). */
.reminder-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reminder-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--line-strong);
}

.reminder-list-row.reminder-danger { box-shadow: inset 3px 0 0 var(--danger); }
.reminder-list-row.reminder-warn { box-shadow: inset 3px 0 0 var(--warn); }

.reminder-list-row > div:first-child {
  min-width: 0;
  flex: 1 1 220px;
}

.reminder-list-row > div:first-child > strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.reminder-list-row .table-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.reminder-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.reminder-row-actions > strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Invoice modal */
.invoice-detail-modal {
  width: min(1780px, calc(100vw - 20px));
  height: min(980px, calc(100vh - 20px));
  max-height: calc(100vh - 20px);
  border-radius: 14px;
}

.invoice-detail-modal.is-maximized {
  width: calc(100vw - 12px);
  height: calc(100vh - 12px);
  max-height: calc(100vh - 12px);
}

.modal-head-slim {
  min-height: 58px;
  padding: 10px 14px 10px 22px;
}

.modal-head-slim > strong {
  font-size: 20px;
  letter-spacing: 0;
}

.invoice-headband {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.invoice-headband-facts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 0;
}

.ihb-fact {
  min-width: 0;
  padding: 0 16px;
  border-right: 1px solid var(--line);
}

.ihb-fact:first-child {
  padding-left: 0;
}

.ihb-fact:last-child {
  border-right: 0;
}

.ihb-fact span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ihb-fact strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-headband-chips {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.invoice-modal-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(430px, 0.72fr);
  gap: 18px;
  padding: 18px 22px;
  background: var(--bg);
}

.invoice-pdf-pane,
.invoice-side-panel {
  min-height: 0;
}

.invoice-pdf-pane {
  display: flex;
  flex-direction: column;
}

.preview-shell,
.invoice-preview-shell,
.file-preview-shell,
.attachment-preview {
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.invoice-preview-shell {
  height: 100%;
  min-height: 620px;
}

.preview-shell iframe,
.preview-shell embed,
.preview-shell canvas {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* File-preview modal: two-pane layout (preview | extracted details). .modal-body is plain
   block flow, so without this the panes stack full-width. Image/text content also needs
   sizing so a large scan fits the shell instead of overflowing + being clipped. */
.preview-modal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  align-items: start;
}

.preview-modal-main,
.preview-modal-side {
  min-width: 0;
}

@media (max-width: 820px) {
  .preview-modal-layout {
    grid-template-columns: 1fr;
  }
}

.preview-shell img,
.preview-shell .preview-image {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  display: block;
  margin: auto;
  object-fit: contain;
}

.preview-shell pre.preview-text,
.preview-shell .preview-text {
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.preview-fallback {
  height: 100%;
  min-height: 280px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
}

.invoice-side-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  padding-right: 2px;
}

/* Panels keep their natural height and the column scrolls — never let a bounded
   side-panel height squeeze the panels (which clips their content to just the header). */
.invoice-side-panel > * {
  flex: 0 0 auto;
}

.invoice-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.invoice-panel-head {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.invoice-panel-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
}

.invoice-panel-body {
  padding: 13px 14px;
}

.invoice-panel-note {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 750;
}

.invoice-panel-note.info {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
}

.invoice-alert-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: none;
}

.invoice-alert {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 13px 10px 36px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  --tone: var(--muted);
}

/* Status-tinted box + a colored left edge + a colored status glyph (matches the
   reference "Review warnings" rows). Color is the point — keep it visible. */
.invoice-alert::before {
  content: "!";
  position: absolute;
  left: 12px;
  top: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--tone);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.invoice-alert-warn { --tone: var(--warn); background: var(--warn-soft); box-shadow: inset 3px 0 0 var(--warn); }
.invoice-alert-danger { --tone: var(--danger); background: var(--danger-soft); box-shadow: inset 3px 0 0 var(--danger); }
.invoice-alert-good { --tone: var(--good); background: var(--good-soft); box-shadow: inset 3px 0 0 var(--good); }
.invoice-alert-good::before { content: "✓"; }
.invoice-alert-neutral { --tone: var(--accent); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.invoice-alert-neutral::before { content: "i"; }

.invoice-alert__action {
  margin-top: 4px;
}

.invoice-alert:last-child {
  border-bottom: 0;
}

.invoice-alert__label {
  display: block;
  color: var(--ink);
  font-weight: 800;
  font-size: 12.5px;
}

.invoice-alert__detail,
.invoice-alert__hint {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

.invoice-alert__action {
  color: var(--accent-strong);
  font-weight: 800;
  white-space: nowrap;
}

/* Invoice Summary inherits .kv-grid's stretch pairing so wrapping values keep the
   dividers aligned; nothing extra needed here beyond safe wrapping of long values. */
.invoice-summary-grid strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Amounts stacked in logical order: Amount → VAT → Total → Outstanding (label left, value right). */
.invoice-amounts {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.invoice-amount-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.invoice-amount-row > span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.invoice-amount-row > strong {
  color: var(--ink);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.invoice-amount-total {
  margin-top: 3px;
  padding-top: 7px;
  border-top: 1px dashed var(--line-strong);
}

.invoice-amount-total > span,
.invoice-amount-total > strong {
  font-size: 14px;
  font-weight: 850;
  color: var(--ink);
}

/* Inline edit: in edit mode the displayed values become inputs/selects IN PLACE — the panel
   layout (grid + amount rows + routing pills) is unchanged, only the values turn editable. */
.inline-edit-input,
.inline-edit-select {
  width: 100%;
  min-width: 0;
  height: 32px;
  margin-top: 2px;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.inline-edit-input:focus,
.inline-edit-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.invoice-amount-row .inline-edit-amount {
  width: auto;
  max-width: 150px;
  margin-top: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.routing-pill.is-editing {
  padding-bottom: 9px;
}

/* "Save your changes?" prompt — overlays the invoice modal (keeps it open), never replaces it. */
.invoice-modal-shell .invoice-detail-modal {
  position: relative;
}

.invoice-save-prompt-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 24, 40, 0.3);
  border-radius: inherit;
}

.invoice-save-prompt {
  width: min(390px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  padding: 18px;
}

.invoice-save-prompt > strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
}

.invoice-save-prompt > p {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.invoice-save-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Gentle "approve first" note shown in the payment panel for unapproved invoices. */
.payment-approve-note {
  margin: 0;
  padding: 9px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
}

/* Mailbox "needs attention" banners — slim, aligned, gentle (one per broken company). */
.reconnect-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 13px;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line));
  border-left: 3px solid var(--warn);
  border-radius: 10px;
  background: var(--warn-soft);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 650;
}

.reconnect-banner > div:first-child {
  min-width: 0;
}

.reconnect-banner strong {
  color: var(--ink);
  font-weight: 750;
}

.reconnect-banner__actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

/* Recurring-invoice modal */
.recurring-modal-card {
  width: min(680px, calc(100vw - 40px));
}

.recurring-toggle-row,
.recurring-remind-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
}

.recurring-remind-row {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 14px;
}

.recurring-status {
  margin: 6px 0 12px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 650;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

.recurring-status-good {
  background: var(--good-soft);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 30%, var(--line));
}

.recurring-status-warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
}

.recurring-status-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
}

.recurring-form .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* Detail panels (Entity details / Vendor details / Company mailbox): two columns of
   label | value rows with thin row separators + a center divider — matching the reference. */
.kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* stretch (not start): paired cells share row height so the divider lines stay
     aligned even when one value wraps to two lines — long text can never skew it. */
  align-items: stretch;
  column-gap: 0;
  row-gap: 0;
  padding: 4px 18px 12px;
}

.kv-grid > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(88px, 38%) minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.kv-grid > div:nth-child(odd) {
  padding-right: 26px;
  border-right: 1px solid var(--line);
}

.kv-grid > div:nth-child(even) {
  padding-left: 26px;
}

.kv-grid > div:last-child,
.kv-grid > div:nth-last-child(2):nth-child(odd) {
  border-bottom-color: transparent;
}

.kv-grid span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

.kv-grid strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 750;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kv-grid .span-2 {
  grid-column: 1 / -1;
  border-right: 0;
  padding-right: 0;
}

/* kv-list keeps the stacked label-above-value layout (tight modal contexts). */
.kv-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.kv-list.compact-list {
  gap: 8px 16px;
}

.kv-list > div {
  min-width: 0;
}

.kv-list span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.03em;
}

.kv-list strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.pay2-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pay2-chip {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.pay2-chip span,
.pay2-section-meta,
.seg-toggle-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pay2-chip strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.pay2-chip--paid strong {
  color: var(--good);
}

.pay2-chip--out strong {
  color: var(--warn);
}

.pay2-progress {
  height: 7px;
  margin: 10px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.pay2-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--good);
}

.pay2-section {
  margin-top: 12px;
}

.pay2-section-head,
.inst-row-head,
.inst-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.pay2-section-title,
.inst-row-title {
  color: var(--ink);
  font-weight: 850;
}

.payment-list,
.installment-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.installment-row,
.payment-paid-note,
.payment-row {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

/* Recorded-payment row: lay the clickable summary + Edit/Undo actions side by side, and
   reset the native <button> chrome on .payment-row-main (was a raw browser button box). */
.payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.payment-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

.payment-row-date { font-weight: 800; }
.payment-row-amount { font-weight: 850; font-variant-numeric: tabular-nums; }
.payment-row-currency { color: var(--muted); font-size: 12px; font-weight: 700; }
.payment-row-via { min-width: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payment-row-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.pay2-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.activity-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.activity-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
}

.activity-green .activity-dot,
.activity-good .activity-dot {
  background: var(--good);
}

.activity-amber .activity-dot,
.activity-warn .activity-dot {
  background: var(--warn);
}

.activity-copy strong,
.activity-copy span {
  display: block;
}

.activity-copy strong {
  color: var(--ink);
  font-size: 13px;
}

.activity-copy span {
  color: var(--muted);
  font-size: 12px;
}

.extraction-editor.is-locked input,
.extraction-editor.is-locked select,
.extraction-editor.is-locked textarea {
  background: var(--surface-2);
}

.invoice-modal-shell {
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.34);
  /* backdrop-filter on ::before (below), not here — see .modal-shell note: keeping it
     on the content container is what made the invoice-modal text look blurry. */
}

.invoice-modal-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.invoice-modal-shell .invoice-detail-modal {
  width: min(1500px, calc(100vw - 40px));
  height: min(900px, calc(100vh - 40px));
  max-height: calc(100vh - 40px);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
}

.invoice-modal-shell .invoice-detail-modal.is-maximized {
  width: calc(100vw - 24px);
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
}

.invoice-modal-shell .modal-head-slim {
  min-height: 72px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.invoice-modal-shell .modal-head-slim > strong {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 25px;
  line-height: 1;
}

.invoice-modal-shell .section-actions {
  gap: 10px;
}

.invoice-modal-shell .section-actions .btn.icon-only,
.invoice-modal-shell .section-actions .quick-action-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 5px 16px rgba(15, 30, 60, 0.08);
}

.invoice-modal-shell .invoice-headband {
  min-height: 64px;
  padding: 12px 26px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.invoice-modal-shell .invoice-headband-facts {
  grid-template-columns: repeat(4, minmax(128px, 1fr));
  max-width: 720px;
}

.invoice-modal-shell .ihb-fact {
  padding: 0 22px;
}

.invoice-modal-shell .ihb-fact strong {
  margin-top: 6px;
  font-size: 14px;
}

.invoice-modal-shell .invoice-modal-layout {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 510px;
  gap: 16px;
  padding: 18px 16px 18px;
  overflow: hidden;
}

.invoice-modal-shell .invoice-pdf-pane,
.invoice-modal-shell .invoice-side-panel {
  height: 100%;
  min-height: 0;
}

.invoice-modal-shell .invoice-preview-shell {
  height: 100%;
  min-height: 0;
  border-radius: 8px;
  box-shadow: none;
}

.invoice-modal-shell .invoice-side-panel {
  gap: 8px;
  padding: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.invoice-modal-shell .invoice-panel,
.invoice-modal-shell .invoice-alert-stack,
.invoice-modal-shell .invoice-approval-bar {
  border-radius: 8px;
  box-shadow: 0 5px 18px rgba(15, 30, 60, 0.06);
}

.invoice-modal-shell .invoice-panel-head {
  min-height: 38px;
  padding: 7px 13px;
}

.invoice-modal-shell .invoice-panel-title {
  font-size: 13.5px;
}

.invoice-modal-shell .invoice-panel-body {
  padding: 10px 13px;
}

.invoice-modal-shell .kv-grid {
  gap: 7px 14px;
}

.invoice-modal-shell .invoice-panel-note {
  margin: 0 0 8px;
  padding: 8px 11px;
}

.invoice-modal-shell .routing-pill {
  min-height: 40px;
  padding: 7px 11px;
}

.routing-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.routing-pill {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
}

.routing-pill span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.routing-pill strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-pill strong.is-ok {
  color: var(--good);
}

.routing-pill strong.is-warn {
  color: var(--warn);
}

.routing-pill i {
  color: var(--muted);
  font-style: normal;
}

.invoice-modal-shell .invoice-panel-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
}

.invoice-modal-shell .compact-note {
  margin-top: 10px;
}

.invoice-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 22px;
}

.invoice-summary-grid > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
}

.invoice-summary-grid span {
  font-size: 11px;
}

.invoice-summary-grid strong {
  margin-top: 0;
  font-size: 12.5px;
}

.invoice-modal-shell .pay2-summary {
  gap: 8px;
}

.invoice-modal-shell .pay2-chip {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 8px;
}

.invoice-modal-shell .pay2-progress {
  display: none;
}

/* Installment-plan toggle (record more than one payment) — kept visible and tidy. */
.invoice-modal-shell .pay2-mode-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.invoice-modal-shell .activity-timeline {
  gap: 7px;
}

.invoice-modal-shell .activity-item {
  grid-template-columns: 22px minmax(0, 1fr) auto;
}

.invoice-modal-shell .activity-dot {
  width: auto;
  height: auto;
  background: transparent;
  color: var(--accent);
}

.invoice-modal-shell .activity-dot::before {
  content: "OK";
  color: inherit;
  font-size: 11px;
  font-weight: 850;
}

.invoice-modal-shell .activity-green .activity-dot::before,
.invoice-modal-shell .activity-good .activity-dot::before {
  color: var(--good);
}

.invoice-modal-shell .activity-blue .activity-dot::before {
  content: "Mail";
  color: var(--muted);
}

.invoice-modal-shell .invoice-alert-stack {
  background: var(--surface-2);
}

.invoice-modal-shell .invoice-alert {
  min-height: 0;
  /* keep the left room for the status icon — a bare 13px here made the icon overlap the
     label text ("sitting on each other"). */
  padding: 9px 14px 9px 36px;
}

.invoice-modal-shell .invoice-alert__label {
  font-size: 12.5px;
}

.invoice-modal-shell .invoice-alert__detail,
.invoice-modal-shell .invoice-alert__hint {
  font-size: 12px;
}

.invoice-approval-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.invoice-approval-bar span {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 800;
}

/* Leading status glyph instead of a nested pill (the old badge-in-a-box read as a stray "green line"). */
.invoice-approval-bar span::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: currentColor;
  color: var(--danger-soft);
  font-size: 11px;
  font-weight: 900;
  flex: 0 0 auto;
}

.invoice-approval-bar.is-ready span,
.invoice-approval-bar.is-approved span {
  background: var(--good-soft);
  color: var(--good);
}

.invoice-approval-bar.is-ready span::before,
.invoice-approval-bar.is-approved span::before {
  content: "✓";
  color: var(--good-soft);
}

.invoice-approval-bar .btn {
  height: 38px;
  justify-content: center;
}

html:has(.invoice-modal-shell) #ven-chat-fab,
html:has(.invoice-modal-shell) #ven-chat,
html:has(.invoice-modal-shell) #ven-fab,
html:has(.invoice-modal-shell) #ven-asst,
html:has(.invoice-modal-shell) .assistant-fab,
html:has(.invoice-modal-shell) .vendigo-fab,
html:has(.invoice-modal-shell) .vc-fab {
  display: none !important;
}

/* Mailbox */
.mailbox-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.mailbox-toolbar .search-field {
  flex: 1 1 320px;
  min-width: 240px;
  max-width: none;
}

.mailbox-toolbar > select {
  width: auto;
  flex: 0 1 180px;
  min-width: 160px;
}

.mailbox-toolbar .seg-toggle {
  flex: 0 0 auto;
}

.mailbox-toolbar-sub {
  margin-bottom: 12px;
}

.mailbox-client {
  min-height: min(650px, calc(100vh - 210px));
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.mailbox-conv-list {
  min-width: 0;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.mailbox-conv-list-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.conv-row {
  width: 100%;
  display: block;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink-2);
  text-align: left;
}

.conv-row:hover,
.conv-row.active {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.conv-row.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.conv-row.unread .conv-from,
.conv-row.unread .conv-subject {
  color: var(--ink);
  font-weight: 900;
}

/* Vendor Mailbox conversation list: each row is a <button> — reset the native browser
   chrome (was rendering as a raw grey button box) into a flat, left-aligned list row. */
.conversation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conversation-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.conversation-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.conversation-row.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-card);
}

.conversation-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.conversation-row-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.conv-row-top,
.conversation-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.conv-from,
.conversation-row-from {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent);
}

.conv-date,
.conversation-row-date {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.conv-subject {
  margin-top: 5px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-snippet,
.conversation-row-preview,
.conv-awaiting {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-awaiting {
  color: var(--warn);
  font-weight: 850;
}

.conv-vendor-head {
  padding: 10px 14px 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--surface-2);
}

.conv-vendor-count,
.conversation-row-count,
.conversation-row-tag {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.mailbox-reading-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.reading-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.reading-pane-subject {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 850;
}

.reading-pane-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}

.reading-pane-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reading-pane-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 16px 18px;
}

.email-conversation-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.email-thread-message,
.email-message-card,
.email-context-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.email-thread-message {
  padding: 14px;
}

.email-thread-outbound {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.email-thread-meta,
.email-message-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.email-thread-people {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.email-thread-line {
  display: flex;
  gap: 7px;
  min-width: 0;
}

.email-thread-label {
  width: 54px;
  flex: 0 0 54px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.email-thread-addr {
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.email-thread-date {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
}

.email-thread-body {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  /* Force the app font stack (never inherit a captured email's own face) and render the
     text cleanly: pre-line keeps real line breaks but collapses raw whitespace dumps, and
     a normal reading weight matches the rest of the app instead of a heavy block. */
  font-family: var(--font);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.email-attachments-inline {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}

.email-attachments-label {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.email-attachment-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.email-attachment-card {
  min-width: 170px;
  max-width: 230px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  text-align: left;
}

.email-attachment-copy {
  min-width: 0;
}

.email-attachment-copy strong,
.email-attachment-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-attachment-copy strong {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 850;
}

.email-attachment-copy span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.mailbox-reply-form {
  flex: 0 0 auto;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

.mailbox-reply-form .reply-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.mailbox-reply-form textarea {
  min-height: 86px;
  background: var(--surface);
}

.mailbox-empty,
.mailbox-empty-pane,
.empty-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  font-weight: 850;
}

.empty-state {
  gap: 8px;
}

.empty-state__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 22px;
}

.empty-state__title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
}

.empty-state__hint {
  max-width: 460px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

/* Secondary app surfaces */
.split-layout,
.email-detail-layout,
.invoice-email-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  gap: 16px;
}

.invoice-email-layout {
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: stretch;
}

.invoice-email-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.invoice-email-sidebar .list-row {
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
}

.invoice-email-sidebar .list-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-email-sidebar .list-row strong {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.email-compose {
  min-width: 0;
}

.overview-grid,
.vendor-files-grid,
.integration-grid,
.ai-assist-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.vendor-files-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

/* Integration Settings provider cards sit side by side (2 mail providers, up to 3 AI
   providers) and wrap cleanly when narrow — fixes the accidental single-column
   collapse (.integration-grid was overriding the .split-layout it's paired with). */
.integration-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

.vendor-files-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Vendor Overview: two columns (details | recent invoices/activity). Was unstyled, so the
   panes stacked full-width. Collapses to one column on narrow screens. */
.vendor-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 16px;
  align-items: start;
}

.vendor-overview-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 1024px) {
  .vendor-overview-grid {
    grid-template-columns: 1fr;
  }
}

.folder-toolbar,
.table-toolbar,
.folder-grid,
.toolbar,
.chip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.table-toolbar {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.folder-card,
.ai-action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-card);
}

.folder-card.active,
.ai-action-card:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--accent-soft);
}

.detail-head,
.appt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-section,
.nested-panel,
.timeline-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 12px;
}

.lineitems-table-wrapper,
.payment-list,
.installment-lines-block {
  overflow: auto;
}

.approval-steps,
.approval-timeline,
.approver-list,
.compact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.approval-step,
.approver-row,
.list-row,
.notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-2);
}

.list-row.is-active {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: var(--accent-soft);
}

.upload-dropzone,
.dropzone {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 150px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--muted);
  text-align: center;
}

.export-modal .modal-body {
  padding: 18px;
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 850;
}

/* Assistant and chat buttons/panels */
.vendigo-assistant-panel,
.vendigo-chat-panel,
.vc-panel,
.assistant-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}

.vendigo-fab,
.vc-fab,
.assistant-fab {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--teal);
  box-shadow: var(--shadow-pop);
}

/* Dark tuning */
[data-theme="dark"] .shell-sidebar,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .overview-toolbar,
[data-theme="dark"] .data-table,
[data-theme="dark"] .mailbox-client,
[data-theme="dark"] .mailbox-conv-list,
[data-theme="dark"] .mailbox-reading-pane,
[data-theme="dark"] .invoice-panel,
[data-theme="dark"] .email-thread-message {
  background: var(--surface);
}

[data-theme="dark"] .data-table th,
[data-theme="dark"] .modal-foot,
[data-theme="dark"] .table-toolbar,
[data-theme="dark"] .invoice-headband,
[data-theme="dark"] .mailbox-reply-form,
[data-theme="dark"] .email-thread-body,
[data-theme="dark"] .pay2-chip,
[data-theme="dark"] .detail-section,
[data-theme="dark"] .nested-panel {
  background: var(--surface-2);
}

[data-theme="dark"] .brand-logo,
[data-theme="dark"] .brand-logo.brand-logo-lockup,
[data-theme="dark"] .boot-splash__logo {
  background: transparent;
  box-shadow: none;
  filter: none;
  border: 0;
}

[data-theme="dark"] .ven-profile-dock,
[data-theme="dark"] .shell-sidebar .ven-profile-dock {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

[data-theme="dark"] .ven-profile-dock__role {
  color: #93c5fd;
}

[data-theme="dark"] .preview-shell,
[data-theme="dark"] .invoice-preview-shell,
[data-theme="dark"] .preview-shell iframe,
[data-theme="dark"] .preview-shell embed,
[data-theme="dark"] .preview-shell canvas {
  background: #ffffff;
}

[data-theme="dark"] .inline-note.warn,
[data-theme="dark"] .invoice-panel-note.warn,
[data-theme="dark"] .warning-row {
  color: #fcd88a;
}

[data-theme="dark"] .invoice-alert {
  color: #fcd88a;
}

[data-theme="dark"] .invoice-alert__detail,
[data-theme="dark"] .invoice-alert__hint {
  color: var(--ink-2);
}

[data-theme="dark"] .export-excel-btn svg {
  color: #86efac;
}

[data-theme="dark"] .invoice-modal-shell {
  background: var(--bg);
}

[data-theme="dark"] .invoice-modal-shell .invoice-alert-stack {
  background: #241a0c;
}

[data-theme="dark"] .routing-pill {
  background: var(--surface-2);
}

.invoice-table-wrapper {
  --table-min-width: 0;
}

.invoice-table {
  table-layout: fixed;
}

.invoice-table th,
.invoice-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoice-table .invoice-bucket-actions {
  overflow: visible;
  text-overflow: clip;
}

/* State column holds a longer badge ("Waiting for approval") — let it wrap within the
   cell instead of clipping, since the table is fit-to-width (no horizontal scroll). */
.invoice-table .invoice-state-cell {
  white-space: normal;
}

.invoice-table .invoice-state-cell .badge {
  white-space: normal;
  line-height: 1.2;
}

/* Responsive — the desktop range (> 980px) uses the normal fluid grid (a fixed ~232px
   sidebar + a flexible main column that wraps/scrolls content within its own cards); there
   is intentionally no desktop reflow breakpoint. The media queries below take over at the
   mobile threshold (<= 980px), where the sidebar stacks on top. NO global scale/zoom is used
   anywhere — every surface renders at native CSS px so text stays crisp (ClearType). */

@media (max-width: 980px) {
  .workspace-shell {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100vw;
    overflow-x: hidden;
  }

  .shell-sidebar {
    position: static;
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: none;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .shell-nav {
    min-width: 0;
    max-width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  .nav-btn {
    width: auto;
    min-width: max-content;
  }

  .sidebar-spacer,
  .sidebar-divider,
  .sidebar-product-footer {
    display: none;
  }

  .shell-main {
    min-width: 0;
    max-width: 100%;
    padding: 18px;
  }

  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .kpi-band,
  .vendor-files-grid,
  .split-layout,
  .email-detail-layout,
  .invoice-email-layout,
  .mailbox-client,
  .invoice-headband-facts {
    grid-template-columns: 1fr;
  }

  /* Detail stat cards stay a tidy 2-up on tablets rather than a tall single column. */
  .stat-grid,
  .stat-grid-four,
  .vendor-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mailbox-client {
    min-height: auto;
  }

  .mailbox-conv-list {
    max-height: 360px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .invoice-detail-modal,
  .invoice-detail-modal.is-maximized {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
  }

  .invoice-modal-layout {
    padding: 12px;
  }

  .invoice-modal-shell {
    inset: 0;
  }

  .invoice-modal-shell .modal-head-slim {
    min-height: auto;
    padding: 12px 14px;
  }

  .invoice-modal-shell .modal-head-slim > strong {
    font-size: 20px;
  }

  .invoice-modal-shell .invoice-headband {
    padding: 10px 14px;
  }

  .invoice-modal-shell .invoice-headband-facts,
  .routing-pill-grid,
  .invoice-summary-grid {
    grid-template-columns: 1fr;
  }

  .invoice-modal-shell .invoice-modal-layout {
    height: auto;
    min-height: calc(100vh - 110px);
    padding: 12px;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 13px;
  }

  .shell-main {
    padding: 14px;
  }

  .page-title {
    font-size: 24px;
  }

  .kpi-band,
  .form-grid,
  .kv-grid,
  .kv-list,
  .pay2-summary {
    grid-template-columns: 1fr;
  }

  .overview-toolbar,
  .mailbox-toolbar,
  .page-actions {
    align-items: stretch;
  }

  .overview-toolbar {
    grid-template-columns: 1fr;
  }

  .invoice-table-wrapper {
    --table-min-width: 1120px;
  }

  .ov-filter,
  .ov-filter-actions,
  .ov-search,
  .mailbox-toolbar select,
  .mailbox-toolbar .search-field {
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
  }

  .ov-filter-actions {
    display: grid;
    grid-template-columns: 1fr 42px;
    align-items: end;
    margin-left: 0;
  }

  .modal-shell {
    padding: 8px;
  }

  .modal-card {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  #ven-chat-fab {
    left: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    width: 46px !important;
    height: 46px !important;
  }

  #ven-fab {
    left: 66px !important;
    right: auto !important;
    bottom: 12px !important;
    width: 46px !important;
    height: 46px !important;
  }
}