/* Reset and base */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Sized to the longest nav label ("Document Management" needs ~208px:
     padding + icon + gap + text) plus a little slack, so the sidebar takes
     only what it needs and leaves more room for content. */
  --sidebar-width: 220px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg-canvas);
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.app-container {
  display: flex;
  flex: 1;
  min-height: 0; /* Allow flex children to shrink below content size */
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  transition: width 0.2s ease, transform 0.2s ease;
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 6px rgba(28, 24, 19, 0.05), 1px 0 2px rgba(28, 24, 19, 0.04);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-bottom: 40px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
}
.logo {
  display: flex;
  align-items: center;
  padding: 0 18px;
  min-height: 51px;
  font-size: 20px;
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid var(--border);
  transition: padding 0.2s ease;
  overflow: hidden;
}
.logo img {
  /* Sized by .logo-full / .logo-icon rules */
}
.nav-items {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  flex: 1;
}
.nav-items li a,
.nav-items li > span {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px;
  color: var(--fg);
  text-decoration: none;
  transition: background 0.15s, padding 0.2s ease, gap 0.2s ease;
}
.nav-items li a iconify-icon { font-size: 20px; }
.nav-items li a:hover {
  background: var(--brand-tint-hover);
  text-decoration: none;
}
.nav-items li.active a {
  background: var(--brand-tint);
  border-left: 2px solid var(--brand);
  padding-left: 16px;
  color: var(--brand-pressed);
}
.nav-items li.active a iconify-icon {
  color: var(--brand-pressed);
}
.nav-items li.disabled span {
  color: var(--fg-subtle);
  cursor: not-allowed;
}
.nav-items li.disabled span::after {
  content: 'Coming soon';
  font-size: 10px;
  background: var(--border);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  margin-left: auto;
}

/* Sidebar user section */
.sidebar-user {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
  transition: padding 0.2s ease;
}
.user-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--r-lg);
  transition: background 0.15s, padding 0.2s ease;
}
.user-trigger:hover {
  background: var(--bg-muted);
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.user-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.user-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
  font-size: 14px;
}
.user-chevron {
  color: var(--fg-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.sidebar-user.expanded .user-chevron {
  transform: rotate(180deg);
}
.user-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.15s ease-out, opacity 0.15s ease-out, padding 0.15s ease-out;
  padding-top: 0;
}
.sidebar-user.expanded .user-menu {
  max-height: 200px;
  opacity: 1;
  padding-top: 8px;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  border-radius: var(--r-lg);
  font-size: 14px;
  text-align: left;
  transition: background 0.15s;
}
.user-menu-item:hover {
  background: var(--bg-muted);
}

/* Tenant switcher (super admin) */
.tenant-switcher {
  padding: 8px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.tenant-select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
}
.tenant-select:hover {
  border-color: var(--brand);
}
.tenant-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(10, 109, 189, 0.15);
}

/* Super admin warning banner */
.super-admin-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 6px;
  background: rgba(191, 135, 0, 0.15);
  border: 1px solid rgba(191, 135, 0, 0.4);
  border-radius: var(--r-lg);
  color: var(--warning);
  font-size: 14px;
}
.super-admin-banner iconify-icon {
  font-size: 18px;
}
.super-admin-banner strong {
  color: var(--warning);
}

/* Super admin mode page border */
body.super-admin-mode .sidebar {
  border-left: 3px solid rgba(191, 135, 0, 0.6);
  border-top: 3px solid rgba(191, 135, 0, 0.6);
}
body.super-admin-mode .content {
  border-top: 3px solid rgba(191, 135, 0, 0.6);
  border-right: 3px solid rgba(191, 135, 0, 0.6);
}
body.super-admin-mode .app-footer {
  border-top: 3px solid rgba(191, 135, 0, 0.6);
}
/* The warning banner (~47px) + its margin + the .content border-top (3px) sit
   above the fixed-height detail view, so subtract that chrome (~56px) — without
   this the bottom of the PDF pane + data panel is clipped below the viewport. */
body.super-admin-mode .detail-container {
  height: calc(100vh - 95px - 56px);
}

/* Logo header (unauthenticated pages) */
.logo-header {
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.app-container:has(.logo-header) {
  flex-direction: column;
}
.app-container:has(.logo-header) .content,
.app-container:not(:has(.sidebar)) .content {
  margin-left: 0; /* No sidebar on unauthenticated pages */
}

/* Main content */
.content {
  flex: 1;
  background: var(--bg-canvas);
  padding: 24px;
  padding-bottom: 35px; /* Space for fixed footer */
  margin-left: var(--sidebar-width);
  transition: margin-left 0.2s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: auto;
  scrollbar-color: var(--fg-faint) var(--bg-muted);
}
.content::-webkit-scrollbar {
  width: 12px;
}
.content::-webkit-scrollbar-track {
  background: var(--bg-muted);
  border-radius: var(--r-lg);
}
.content::-webkit-scrollbar-thumb {
  background: var(--fg-faint);
  border-radius: var(--r-lg);
  border: 2px solid var(--bg-muted);
}
.content::-webkit-scrollbar-thumb:hover {
  background: var(--fg-subtle);
}
/* Settings pages use a white canvas (not the sand --bg-canvas), so the white
   settings cards read as one continuous surface. */
.content-settings {
  background: var(--surface);
}

/* Logo variants — crossfade via opacity, no display toggling */
.logo {
  position: relative;
}
.logo-icon {
  /* Collapsed sidebars crop the wordmark down to its circle (below) rather than
     swapping to this standalone icon, so the circle keeps its exact size and
     position across expanded/collapsed states. */
  display: none;
}
.logo-full {
  width: 104px;
  height: auto;
  opacity: 1;
  flex-shrink: 0;   /* never squish inside the narrow collapsed rail — it is cropped, not scaled */
  /* Expanded shows the whole wordmark; collapsed rails clip everything right of
     the circle (the wordmark is `[circle][gap][Orcha]`; circle ends ~28px, text
     starts ~32px of the 104px render), so the circle keeps its exact size and
     position and only the "Orcha" text slides away. */
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.2s ease;
}

/* Nav item labels and user info — hide via width, not display */
.nav-items li a span,
.user-name,
.user-chevron {
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.2s ease, opacity 0.2s ease;
}

/* Responsive sidebar — compact */
@media (max-width: 1366px) {
  :root {
    --sidebar-width: 220px;
  }
}

/* Responsive sidebar — icon rail */
@media (max-width: 1023px) {
  :root {
    --sidebar-width: 60px;
  }

  .sidebar {
    width: 60px;
    overflow: visible;
  }

  /* Logo: crop the wordmark to its circle (text scrolls out of the narrow rail);
     left padding matches the expanded logo so the circle never shifts. */
  .logo {
    justify-content: flex-start;
    /* Centre the circle in the 60px rail so it lines up with the nav icons below:
       circle centre sits ~16.7px into the 104px wordmark, so 30 − 16.7 ≈ 13.3px. */
    padding: 0 0 0 13.3px;
  }
  .logo-full { clip-path: inset(0 74px 0 0); }   /* show only the circle (left ~30px) */

  /* Nav items: hide labels, center icons */
  .nav-items li a {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
  }
  .nav-items li a span { width: 0; opacity: 0; }
  .nav-items li a iconify-icon { font-size: 20px; }
  .nav-items li.active a {
    padding-left: 0;
    border-left: 2px solid var(--brand);
  }

  /* User section: avatar only */
  .sidebar-user { padding: 8px 0; }
  .user-trigger {
    justify-content: center;
    gap: 0;   /* avoid the 10px flex gap offsetting the centred avatar */
    padding: 8px;
  }
  .user-name { flex: 0; width: 0; opacity: 0; }
  .user-chevron { width: 0; opacity: 0; }
  .user-menu { max-height: 0; overflow: hidden; opacity: 0; }

  /* Hover-expand collapsed sidebar */
  .sidebar:hover {
    width: 300px;
    overflow-y: auto;
  }
  .sidebar:hover .logo {
    justify-content: flex-start;
    padding: 0 18px;
  }
  .sidebar:hover .logo-full { clip-path: inset(0 0 0 0); }   /* reveal full wordmark on hover-expand */
  .sidebar:hover .nav-items li a {
    justify-content: flex-start;
    padding: 10px 16px;
    gap: 12px;
  }
  .sidebar:hover .nav-items li a span { width: auto; opacity: 1; }
  .sidebar:hover .nav-items li.active a {
    padding-left: 14px;
  }
  .sidebar:hover .sidebar-user { padding: 12px; }
  .sidebar:hover .user-trigger {
    justify-content: flex-start;
    gap: 10px;
  }
  .sidebar:hover .user-name { flex: 1; width: auto; opacity: 1; }
  .sidebar:hover .user-chevron { width: auto; opacity: 1; }

  /* Content adjusts */
  .content {
    margin-left: 60px;
  }
}

/* Compact sidebar mode — forced icon rail on the document detail view.
   Triggered via :has(.detail-container) so it works regardless of whether
   the user landed on the page via HTMX body swap or a direct navigation.
   No hover-expand; users click an icon to navigate away. Mirrors the
   @media (max-width: 1023px) collapse rules above. The .sidebar width
   and .content margin-left already have transitions, so the shrink
   animates smoothly when :has() starts/stops matching. */
body:has(.detail-container) {
  --sidebar-width: 60px;
}
body:has(.detail-container) .sidebar {
  width: 60px;
  overflow-x: hidden;
  overflow-y: auto;
}
body:has(.detail-container) .logo {
  justify-content: flex-start;
  /* Centre the circle in the 60px rail so it lines up with the nav icons below. */
  padding: 0 0 0 13.3px;
}
body:has(.detail-container) .logo-full { clip-path: inset(0 74px 0 0); }   /* show only the circle */
body:has(.detail-container) .nav-items li a {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}
body:has(.detail-container) .nav-items li a span { width: 0; opacity: 0; }
body:has(.detail-container) .nav-items li a iconify-icon { font-size: 20px; }
body:has(.detail-container) .nav-items li.active a {
  padding-left: 0;
  border-left: 2px solid var(--brand);
}
body:has(.detail-container) .sidebar-user { padding: 8px 0; }
body:has(.detail-container) .user-trigger {
  justify-content: center;
  gap: 0;   /* avoid the 10px flex gap offsetting the centred avatar */
  padding: 8px;
}
body:has(.detail-container) .user-name { flex: 0; width: 0; opacity: 0; }
body:has(.detail-container) .user-chevron { width: 0; opacity: 0; }
body:has(.detail-container) .user-menu { max-height: 0; overflow: hidden; opacity: 0; }
body:has(.detail-container) .content {
  margin-left: 60px;
}

/* Hover-expand collapsed sidebar (detail view) */
body:has(.detail-container) .sidebar:hover {
  width: 300px;
  overflow-y: auto;
}
body:has(.detail-container) .sidebar:hover .logo {
  justify-content: flex-start;
  padding: 0 18px;
}
body:has(.detail-container) .sidebar:hover .logo-full { clip-path: inset(0 0 0 0); }
body:has(.detail-container) .sidebar:hover .nav-items li a {
  justify-content: flex-start;
  padding: 10px 16px;
  gap: 12px;
}
body:has(.detail-container) .sidebar:hover .nav-items li a span { width: auto; opacity: 1; }
body:has(.detail-container) .sidebar:hover .nav-items li.active a {
  padding-left: 14px;
}
body:has(.detail-container) .sidebar:hover .sidebar-user { padding: 12px; }
body:has(.detail-container) .sidebar:hover .user-trigger {
  justify-content: flex-start;
  gap: 10px;
}
body:has(.detail-container) .sidebar:hover .user-name { flex: 1; width: auto; opacity: 1; }
body:has(.detail-container) .sidebar:hover .user-chevron { width: auto; opacity: 1; }

/* Page header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}
.page-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.page-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Document type filter tabs */
.document-type-filter {
  display: flex;
  gap: 2px;
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}
.filter-tab {
  padding: 7px 14px;
  color: var(--fg-muted);
  text-decoration: none;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.filter-tab:hover {
  color: var(--fg);
  background: var(--bg-muted);
  text-decoration: none;
}
.filter-tab.active {
  color: var(--brand-pressed);
  background: var(--brand-tint);
  border-color: transparent;
}

/* Coming soon placeholder */
.coming-soon-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 24px;
  text-align: center;
  color: var(--fg-subtle);
}
.coming-soon-placeholder p {
  margin: 0;
  font-size: 16px;
}

/* Pagination controls */
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-indicator {
  color: var(--fg-muted);
  font-size: 14px;
  min-width: 60px;
  text-align: center;
}

/* Search input */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input {
  width: 240px;
  height: 32px;
  box-sizing: border-box;
  padding: 0 12px 0 34px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input::placeholder {
  color: var(--fg-faint);
}
.search-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e7681' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor: pointer;
}
.search-icon {
  position: absolute;
  left: 11px;
  color: var(--fg-subtle);
  font-size: 16px;
  pointer-events: none;
}

/* Date range filter */
.date-range-filter {
  display: flex;
  align-items: center;
  gap: 4px;
}
.date-range-filter input[type="date"] {
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  height: 32px;
  color-scheme: light;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.date-range-filter input[type="date"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.date-range-filter input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* Approval filter select — matches the toolbar date inputs / filter controls */
.ar-approval-filter select {
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 13px;
  height: 32px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ar-approval-filter select:hover {
  border-color: var(--brand);
}
.ar-approval-filter select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

/* Filter dropdown */
.filter-dropdown {
  position: relative;
}
.filter-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  box-sizing: border-box;
  height: 32px;
}
.filter-dropdown-trigger:hover {
  background: var(--bg-muted);
  color: var(--fg);
}
.filter-dropdown-trigger.has-selection {
  color: var(--brand-pressed);
  border-color: var(--brand-border);
  background: var(--brand-tint);
}
.filter-dropdown-trigger .filter-count {
  font-weight: 600;
}
.filter-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 280px;
  max-width: 300px;
  max-height: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-popover);
  overflow: hidden;
  flex-direction: column;
}
.filter-dropdown.open .filter-dropdown-panel {
  display: flex;
}
.filter-dropdown-search {
  padding: 8px 12px;
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.filter-dropdown-search::placeholder {
  color: var(--fg-faint);
}
.filter-dropdown-options {
  overflow-y: auto;
  max-height: 300px;
  padding: 4px 0;
}
.filter-dropdown-group-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  padding: 8px 12px 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.filter-dropdown-group-label:first-child {
  border-top: none;
  margin-top: 0;
}
.filter-dropdown-option.is-disabled {
  color: var(--fg-muted);
  opacity: 0.55;
  cursor: default;
}
.filter-dropdown-option.is-disabled:hover {
  background: transparent;
}
/* The approver picker lists more rows than the other filters; give it headroom
   so a small roster shows without scrolling. */
#ar-approval-filter-dropdown .filter-dropdown-options {
  max-height: 420px;
}
.filter-dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg);
  transition: background 0.1s;
}
.filter-dropdown-option:hover {
  background: var(--brand-tint-hover);
}
.filter-dropdown-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid var(--fg-faint);
  border-radius: var(--r-sm);
  background: var(--surface);
  margin: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.filter-dropdown-option input[type="checkbox"]:hover {
  border-color: var(--brand);
}
.filter-dropdown-option input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
}
.filter-dropdown-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filter-dropdown-apply {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: var(--brand);
  border: none;
  border-top: 1px solid var(--border);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.filter-dropdown-apply:hover {
  background: var(--brand);
}
.filter-dropdown-option .option-number {
  font-weight: 500;
  min-width: 50px;
  color: var(--fg);
}
.filter-dropdown-option .option-name {
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-clear {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-muted);
  font-size: 13px;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: var(--r-md);
  transition: color 0.15s, background 0.15s;
}
.filter-clear:hover {
  color: var(--fg);
  background: var(--bg-muted);
  text-decoration: none;
}

/* Single-select dropdown rows (status + date pills) */
a.filter-dropdown-option {
  text-decoration: none;
  color: var(--fg);
}
a.filter-dropdown-option:hover {
  text-decoration: none;
}
.filter-dropdown-option.is-active {
  color: var(--brand-pressed);
  font-weight: 600;
}
.filter-dropdown-option .option-check {
  min-width: 16px;
  font-size: 14px;
  color: var(--brand);
}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.card-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.card-body {
  padding: 16px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}
.btn-primary {
  background: var(--brand);
  color: white;
}
.btn-primary:hover {
  background: var(--brand);
}
.btn-secondary {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--bg-muted);
  text-decoration: none;
}
.btn-danger {
  background: var(--danger-strong);
  color: white;
}
.btn-danger:hover {
  background: var(--danger);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-sm {
  padding: 6px 13px;
  font-size: 13px;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
}
.badge-in-progress {
  background: var(--warning);
  color: var(--fg-on-brand);
}
.badge-completed {
  background: var(--success);
  color: white;
}
.badge-failed {
  background: var(--danger-strong);
  color: white;
}
/* PROTOTYPE: Beta badge for prototype pages - can be removed when no longer needed */
.badge-beta {
  background: transparent;
  color: white;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px !important;
  margin-left: 8px;
  vertical-align: middle;
  border: 1px solid rgba(28, 24, 19, 0.18);
  border-radius: var(--r-sm);
  line-height: 1.2;
}
/* Status tints (DESIGN_DECISIONS.md §2): pale --*-tint fill + --*-border +
   --*-strong text token — was ad-hoc rgba. Matches `.pill-confidence`/badge
   treatment in the design (app.css:323, 218-219). */
.badge-validation-pass {
  background: var(--success-tint);
  color: var(--success-strong);
  border: 1px solid var(--success-border);
}
.badge-validation-warning {
  background: var(--warning-tint);
  color: var(--warning-strong);
  border: 1px solid var(--warning-border);
}
.badge-validation-error {
  background: var(--danger-tint);
  color: var(--danger-strong);
  border: 1px solid var(--danger-border);
}
/* DATEV export status badges */
.badge-datev-pending {
  background: rgba(191, 135, 0, 0.15);
  color: var(--warning);
  border: 1px solid rgba(191, 135, 0, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-datev-success {
  background: rgba(26, 127, 55, 0.15);
  color: var(--success);
  border: 1px solid rgba(26, 127, 55, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-datev-failed {
  background: rgba(207, 34, 46, 0.15);
  color: var(--danger);
  border: 1px solid rgba(207, 34, 46, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.badge-datev-partial {
  background: rgba(191, 135, 0, 0.15);
  color: var(--warning);
  border: 1px solid rgba(191, 135, 0, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.badge-datev-partial:hover,
.badge-datev-failed:hover {
  filter: brightness(1.1);
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
iconify-icon.spin {
  animation: spin 1s linear infinite;
}

/* Match count badges (list page Matches column) */
.matches-cell {
  vertical-align: middle;
}
/* Machine-value cells render in MONO (design rule: mono = data you compare/copy).
   Applies to received date, invoice number, total amount, due date. */
.cell-mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.cell-amount {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
}
.cell-muted {
  color: var(--fg-muted);
}
/* AP overview list (#document-list) and Document Management list (#doc-mgmt-list):
   adopt the AR list's lighter typography (sans 14px instead of the mono
   machine-value rule above) so their Date Received / Renewal Date cells match the
   AR/AP list rhythm. Scoped to the list tables, so the mono cell treatment is
   unchanged elsewhere. */
#document-list .cell-mono,
#document-list .cell-amount,
#doc-mgmt-list .cell-mono,
#doc-mgmt-list .cell-amount {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
}
#document-list .badge {
  /* Uniform width sized to the widest label ("Needs Review"), icon removed. */
  min-width: 96px;
  padding-top: 1px;
  padding-bottom: 1px;
}
/* Clip long free-text cells (client / supplier names, invoice numbers) with an
   ellipsis so a single long value can't widen the table into horizontal scroll.
   The inner element is the overflow container: a `<td>` in an auto-layout table
   ignores `max-width` against unbreakable `nowrap` text, but a block child whose
   overflow is hidden reports no min-content, so the cell honours the cap. */
.cell-truncate {
  max-width: 360px;
}
.cell-truncate > .truncate-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Invoice numbers are short; cap their column tighter than the 360px default so
   one very long number can't widen it (the full value stays on hover via title).
   The invoice cell is the only truncating mono cell in the AP list (Received/Due
   are mono but not truncating). */
#document-list .cell-truncate.cell-mono {
  max-width: 140px;
}

#ar-invoice-list .cell-truncate.cell-mono {
  max-width: 140px;
}

.match-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  font-weight: 700;
  white-space: nowrap;
  margin-right: 4px;
}
.match-count-none { background: var(--bg-muted); color: var(--fg-faint); border: 1px solid var(--border); }
/* Match badges coloured by reconciliation STATE (design: green=ok, amber=partial,
   red=mismatch, grey=none) rather than by document type. */
.match-count-ok       { background: var(--success-tint); color: var(--success-strong); border: 1px solid var(--success-border); }
.match-count-partial  { background: var(--warning-tint); color: var(--warning-strong); border: 1px solid var(--warning-border); }
.match-count-mismatch { background: var(--danger-tint);  color: var(--danger-strong); border: 1px solid var(--danger-border); }
/* Present matches, but reconciliation hasn't resolved (null / rejected / unknown). */
.match-count-neutral  { background: var(--bg-muted); color: var(--fg-muted); border: 1px solid var(--border); }
.match-pending { color: var(--fg-muted); }

/* Unified document status badges */
.badge-status-processing,
.badge-status-failed,
.badge-status-not-exported,
.badge-status-processed,
.badge-status-exported,
.badge-status-exported-warning,
.badge-status-has-warnings,
.badge-status-notice {
  min-width: 112px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
}
.badge-status-processing {
  background: var(--warning-tint);
  color: var(--warning-strong);
  border: 1px solid var(--warning-border);
}
.badge-status-failed {
  background: var(--danger-tint);
  color: var(--danger-strong);
  border: 1px solid var(--danger-border);
}
.badge-status-not-exported {
  background: var(--danger);
  color: #fff;
}
.badge-status-processed {
  background: var(--brand);
  color: #fff;
}
.badge-status-processed iconify-icon.spin {
  font-size: 12px;
}
.badge-status-exported {
  background: var(--success-tint);
  color: var(--success-strong);
  border: 1px solid var(--success-border);
}
.badge-status-exported .flag-check {
  font-size: 14px;
}
.badge-status-exported-warning {
  background: var(--success-tint);
  color: var(--success-strong);
  border: 1px solid var(--success-border);
}
.badge-status-exported-warning .flag-warning {
  font-size: 14px;
}
.badge-status-has-warnings {
  background: var(--info-tint);
  color: var(--azure-700);
  border: 1px solid var(--info-border);
}
.badge-status-has-warnings .flag-warning {
  font-size: 14px;
}
.badge-status-notice {
  background: var(--warning-tint);
  color: var(--warning-strong);
  border: 1px solid var(--warning-border);
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  vertical-align: middle;
}
.table tbody tr:hover {
  background: var(--bg-subtle);
}
.table tbody tr[hx-get] {
  cursor: pointer;
}
.table tbody tr.highlighted {
  animation: highlight-fade 4s ease-out;
}
@keyframes highlight-fade {
  0%, 50% {
    background: rgba(10, 109, 189, 0.25);
  }
  100% {
    background: transparent;
  }
}

/* New row entrance animation */
@keyframes row-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.row-new { animation: row-slide-in 0.3s ease-out; }

/* Documents page: fixed header + scrollable table area */
.documents-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.documents-scroll-area {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* Full-bleed WHITE surface: the table area is white (design), not the sand
     canvas. The toolbar hairline lives on .page-header's border-bottom so it
     aligns with the sidebar logo row. */
  background: var(--surface);
  border: none;
  border-radius: 0;
  padding-left: 14px;
  scrollbar-width: auto;
  scrollbar-color: var(--fg-faint) var(--bg-muted);
}

/* Full-bleed list pages: cancel the content gutter, restore padding on the
   toolbar only so filters don't touch the edges. The toolbar is white too,
   so the whole list surface reads white on the sand app canvas. */
.content:has(.documents-page) {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}
.documents-page > .page-header {
  /* Bottom hairline lives here (not on the scroll area below) so it lines up
     with the sidebar logo row's border-bottom. min-height matches the logo
     row's 51px exactly, regardless of which filters are present (AP vs AR),
     so the toolbar bottom border always aligns with the logo's. */
  min-height: 51px;
  padding: 6px 14px;
  margin-bottom: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.documents-scroll-area::-webkit-scrollbar {
  width: 12px;
}
.documents-scroll-area::-webkit-scrollbar-track {
  background: var(--bg-muted);
  border-radius: var(--r-lg);
}
.documents-scroll-area::-webkit-scrollbar-thumb {
  background: var(--fg-faint);
  border-radius: var(--r-lg);
  border: 2px solid var(--bg-muted);
}
.documents-scroll-area::-webkit-scrollbar-thumb:hover {
  background: var(--fg-subtle);
}

/* Document list table styling */
#document-list .table,
#doc-mgmt-list {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.documents-scroll-area thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
#document-list thead,
#doc-mgmt-list thead {
  background: var(--surface);
}
#document-list thead th,
#doc-mgmt-list thead th {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
#document-list tbody tr:last-child td,
#doc-mgmt-list tbody tr:last-child td {
  border-bottom: none;
}

/* Document navigation arrows */
.document-navigation {
  display: flex;
  gap: 8px;
}
.nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 18px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.nav-arrow:hover {
  background: var(--bg-muted);
  color: var(--fg);
  text-decoration: none;
}
.nav-arrow.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px;
  color: var(--fg-muted);
}
.empty-state p {
  margin: 8px 0;
}

/* File upload */
.file-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--brand);
  color: white;
  border-radius: var(--r-lg);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s;
}
.file-upload-label:hover {
  background: var(--brand-hover);
}

/* Split upload button */
.upload-wrapper {
  position: relative;
  display: inline-flex;
}
.split-btn {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.split-btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--brand);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s;
}
.split-btn-upload:hover {
  background: var(--brand-hover);
}
.split-btn-status {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-subtle);
  color: var(--fg);
  border: none;
  border-left: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.split-btn-status.visible {
  display: inline-flex;
}
.split-btn-status:hover {
  background: var(--bg-muted);
}
.status-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.status-count.all-done {
  background: var(--success);
  color: #fff;
}

/* Upload popover */
@keyframes popover-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.upload-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 380px;
  max-height: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: none;
  flex-direction: column;
  z-index: 100;
  animation: popover-enter 0.15s ease-out;
}
.upload-popover.visible {
  display: flex;
}
.upload-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  transform: rotate(45deg);
  z-index: 1;
}
.popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  border-radius: 7px 7px 0 0;
  background: var(--bg-subtle);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
.popover-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pop-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.pop-close:hover {
  color: var(--fg);
  background: var(--bg-muted);
}
.popover-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.popover-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-radius: 0 0 7px 7px;
  font-size: 12px;
  color: var(--fg-muted);
}
.popover-summary.all-done {
  color: var(--success);
}

/* Batch separator */
.batch-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--bg-muted);
}
.batch-separator:first-child {
  border-top: none;
  margin-top: 0;
}
.batch-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bg-muted);
}

/* Popover file items */
.pop-file {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  color: var(--fg);
  text-decoration: none;
  transition: background 0.1s;
  border-bottom: 1px solid var(--bg-muted);
}
.pop-file:last-child {
  border-bottom: none;
}
.pop-file:hover {
  background: var(--bg-subtle);
  text-decoration: none;
}
.pop-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-lg);
  flex-shrink: 0;
  font-size: 16px;
  margin-top: 1px;
}
.pop-file-icon.uploading {
  background: rgba(10, 109, 189, 0.15);
  color: var(--brand);
}
.pop-file-icon.classifying {
  background: rgba(191, 135, 0, 0.15);
  color: var(--warning);
}
.pop-file-icon.processing {
  background: rgba(130, 80, 223, 0.15);
  color: var(--accent-violet);
}
.pop-file-icon.completed {
  background: rgba(26, 127, 55, 0.15);
  color: var(--success);
}
.pop-file-icon.failed {
  background: rgba(207, 34, 46, 0.15);
  color: var(--danger);
}
.pop-file-icon.skipped {
  background: rgba(121, 115, 107, 0.15);
  color: var(--fg-muted);
}
.pop-file-info {
  flex: 1;
  min-width: 0;
}
.pop-file-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pop-file-status {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* Document type tags */
.pop-file-type {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  flex-shrink: 0;
  animation: items-enter 0.2s ease-out;
  opacity: 0;
  transition: opacity 0.3s;
}
.pop-file-type.visible {
  opacity: 1;
}
/* File-type chips use the canonical document-type accents (design-system
   --doctype-* tokens), matching the Matches category tiles. */
.type-invoice {
  background: var(--doctype-invoice-tint);
  color: var(--doctype-invoice-fg);
}
.type-contract {
  background: var(--doctype-contract-tint);
  color: var(--doctype-contract-fg);
}
.type-financial-notice {
  background: var(--doctype-other-tint);
  color: var(--doctype-other-fg);
}
.type-purchase-order {
  background: var(--doctype-purchase-tint);
  color: var(--doctype-purchase-fg);
}
.type-goods-received-note {
  background: var(--doctype-goods-tint);
  color: var(--doctype-goods-fg);
}
.type-other {
  background: var(--doctype-other-tint);
  color: var(--doctype-other-fg);
}

/* Activity bar */
.pop-activity {
  height: 2px;
  margin-top: 6px;
  border-radius: 1px;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.4s ease;
  background: var(--bg-muted);
}
.pop-activity-bar {
  height: 100%;
  width: 40%;
  border-radius: 1px;
  animation: activity-slide 1.2s ease-in-out infinite;
}
.pop-activity-bar.uploading {
  background: var(--brand);
}
.pop-activity-bar.classifying {
  background: var(--warning);
}
.pop-activity-bar.processing {
  background: var(--accent-violet);
}
@keyframes activity-slide {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(200%); }
  100% { transform: translateX(-100%); }
}
.pop-activity.done {
  opacity: 0;
}

/* Popover backdrop */
.popover-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: transparent;
}
.popover-backdrop.visible {
  display: block;
}

/* Drag-and-drop upload overlay (AP overview) */
.upload-drop-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.45);
  pointer-events: none;
}
.upload-drop-overlay.visible {
  display: flex;
}
.upload-drop-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 64px;
  border: 2px dashed var(--brand);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--fg);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  box-shadow: var(--shadow-popover);
}
.upload-drop-panel iconify-icon {
  font-size: 40px;
  color: var(--brand);
}

/* Rejected-drop notice (centered modal: too many / unsupported files) */
.upload-reject-dialog {
  margin: auto; /* dead-center horizontally + vertically */
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-popover);
  width: 380px;
  max-width: 92vw;
}
.upload-reject-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.upload-reject-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 28px 28px 24px;
}
.upload-reject-icon {
  font-size: 36px;
  color: var(--danger);
}
.upload-reject-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}
.upload-reject-msg {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
  white-space: pre-line; /* render the \n before "Supported:" as a line break */
}
.upload-reject-ok {
  margin-top: 8px;
  padding: 8px 28px;
  border: none;
  border-radius: var(--r-md);
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.upload-reject-ok:hover {
  opacity: 0.92;
}

/* Popover item entrance animation */
@keyframes items-enter {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.batch-enter {
  animation: items-enter 0.2s ease-out;
}

/* Spinner */
.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px;
}
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.spinner-message {
  color: var(--fg-muted);
}

/* Detail page layout */
.content:has(.detail-container) {
  overflow: hidden;
  padding-bottom: 0;
}
/* Full-bleed detail page: no content gutter, white top-bar, flush panes divided
   by a single hairline (design: .detail-topbar / .detail-split gap:0 /
   .pdf-pane border-right). Matches the AP list's full-bleed treatment. */
.content:has(.detail-container) {
  padding: 0;
  overflow: hidden;
}
.detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Match the sidebar logo row + single-row list page-header (51px) so the
     bottom hairline lines up when navigating list <-> detail (AP/AR/contracts). */
  min-height: 51px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.detail-container {
  display: flex;
  gap: 0;
  /* Explicit height (topbar 58 + fixed footer 37) so the data-panel is bounded
     and owns the scroll — flex:1 here does not resolve reliably in this chain. */
  height: calc(100vh - 95px);
  min-height: 0;
}
.pdf-panel {
  flex: 45;
  min-width: 300px;
  max-width: 900px;
  background: var(--surface);
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  resize: horizontal;
  display: flex;
  flex-direction: column;
}
.pdf-panel iframe {
  width: 100%;
  height: 100%;
  border: none;
  flex: 1;
  object-fit: contain;
}

/* PDF Panel Tabs Bar (combined filename + email tab) — 46px to align with the
   status row across the split, white to match the data panel's header strip. */
.pdf-tabs-bar {
  display: flex;
  flex-shrink: 0;
  min-height: 46px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.pdf-tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  color: var(--fg-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 2px solid transparent;
  min-width: 0;
  user-select: none;
}
.pdf-tab-item:hover {
  color: var(--fg);
  background: var(--surface);
}
.pdf-tab-item.active {
  color: var(--fg);
  border-bottom-color: var(--brand);
}
.pdf-tab-item iconify-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.pdf-tab-item.active iconify-icon {
  color: var(--brand);
}
.pdf-tab-item .pdf-tab-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* AR autosave status: pinned to the right of the preview tab row, with a small
   status dot whose color tracks data-state (set by ar-editor.js). */
.ar-save-status {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.ar-save-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-muted);
  flex-shrink: 0;
}
.ar-save-status[data-state="saved"]::before    { background: var(--success); }
.ar-save-status[data-state="unsaved"]::before  { background: var(--warning); }
.ar-save-status[data-state="saving"]::before   { background: var(--brand); animation: ar-save-pulse 1s ease-in-out infinite; }
.ar-save-status[data-state="invalid"]::before  { background: var(--danger); }
.ar-save-status[data-state="conflict"]::before { background: var(--danger); }
.ar-save-status[data-state="error"]::before    { background: var(--danger); }
@keyframes ar-save-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.pdf-tab-item .copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.pdf-tab-item .copy-btn:hover {
  background: var(--bg-muted);
  color: var(--fg);
  border-color: var(--border-strong);
}
.pdf-tab-item .copy-btn.copied {
  color: var(--success);
  border-color: var(--success);
}

/* Excel Preview Banner */
.excel-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--brand-tint) 0%, var(--brand-tint) 100%);
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
}
.excel-preview-banner .banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.excel-preview-banner iconify-icon {
  color: var(--success);
}
.excel-preview-banner .banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.excel-preview-banner .banner-title {
  font-weight: 500;
  color: var(--fg);
}
.excel-preview-banner .banner-subtitle {
  font-size: 12px;
}
.excel-preview-banner .btn {
  display: flex;
  align-items: center;
  gap: 6px;
}
.excel-preview-banner .btn iconify-icon {
  color: inherit;
}

/* Original Filename Bar */
.filename-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;            /* match .pdf-tabs-bar so the PDF strip is uniform across doc types */
  padding: 8px 14px;
  background: var(--surface);  /* white, like the AP .pdf-tabs-bar (was sand --bg-canvas) */
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 13px;
}
.filename-bar iconify-icon {
  color: var(--brand);
  font-size: 15px;
  flex-shrink: 0;
}
.filename-bar .filename-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  color: var(--fg);
}
.filename-bar .copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.filename-bar .copy-btn:hover {
  background: var(--bg-muted);
  color: var(--fg);
  border-color: var(--border-strong);
}
.filename-bar .copy-btn.copied {
  color: var(--success);
  border-color: var(--success);
}

.data-panel {
  /* Reference mock (app.css:264 `.detail-split`) is an even 50/50 split, but
     the data panel carries the dense tables (line items have many columns), so
     we deliberately weight it 45/55 toward the data panel. PDF pane stays
     resizable. Flush, no border/radius. */
  flex: 55;
  background: var(--bg-canvas);
  border: none;
  border-radius: 0;
  overflow-y: auto;
  scrollbar-width: auto;
  scrollbar-color: var(--fg-faint) var(--bg-muted);
}
.data-panel::-webkit-scrollbar {
  width: 12px;
}
.data-panel::-webkit-scrollbar-track {
  background: var(--bg-muted);
  border-radius: var(--r-lg);
}
.data-panel::-webkit-scrollbar-thumb {
  background: var(--fg-faint);
  border-radius: var(--r-lg);
  border: 2px solid var(--bg-muted);
}
.data-panel::-webkit-scrollbar-thumb:hover {
  background: var(--fg-subtle);
}
.panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.panel-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.panel-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.panel-invoice-number {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  font-family: var(--font-mono);
  margin-left: 8px;
}
.panel-supplier {
  color: var(--fg-muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
.panel-actions .btn iconify-icon {
  margin-right: 4px;
}
#datev-export-area {
  display: flex;
  gap: 8px;
  align-items: center;
}
#datev-export-area > * {
  flex-shrink: 0;
  white-space: nowrap;
}
.panel-body {
  /* Design `.detail-panel-body { padding: 10px 12px 24px }` (app.css:331) — tighter
     top/sides, looser bottom for scroll runout. */
  padding: 10px 12px 24px;
}

/* Data list */
.data-list {
  display: grid;
  gap: 12px;
}
.data-list dt {
  font-size: 12px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.data-list dd {
  margin: 4px 0 0 0;
  color: var(--fg);
}

/* HTMX loading indicator */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline-block;
}
.htmx-request.htmx-indicator {
  display: inline-block;
}

/* Invoice detail components */
/* Depth model: sand panel body -> white section CARDS -> flat-white sub-content.
   Each section is a self-contained white card with a hairline + soft shadow,
   so it separates cleanly on the sand panel without competing nested boxes. */
.invoice-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  /* Design `.section-header { padding: 10px 14px }` + `.section-body { padding:
     0 14px 13px }` (app.css:335,341) — header is taller (10px) than body bottom
     gap (13px), achieved here with asymmetric card padding. */
  padding: 10px 14px 13px;
  /* Design `.section { margin-bottom: 10px }` (app.css:334). */
  margin-top: 10px;
  margin-bottom: 0;
}
.invoice-section:first-child {
  margin-top: 0;
}
.invoice-section:last-child {
  margin-bottom: 0;
}
/* Document-management detail: the type-specific sections sit in their own wrapper
   after the Matches section, so the wrapper's first section gets its :first-child
   margin reset to 0 — restore the inter-section gap between Matches and Overview. */
.panel-body > #section-matches + div { margin-top: 10px; }
#section-invoice-details,
#section-validation,
#section-parties,
#section-cost-center,
#section-line-items,
#section-payment-summary {
  margin-top: 10px;
}
/* Contract type-adaptive middle: its first section is :first-child of the
   unstyled .panel-middle wrapper, so the :first-child reset above zeroes its
   top margin. Restore the gap so it matches every other container. */
.panel-middle > .invoice-section:first-child {
  margin-top: 10px;
}

.section-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  text-transform: none;
  letter-spacing: normal;
  /* Design `.section-header { padding: 10px 14px }` (app.css:335) is a flat header
     with no divider; here the card already pads 10px top, so the header only needs
     a tight gap to the body. Tightened 12/10 -> 10/8 for the dense rhythm. */
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bg-muted);
}
.invoice-section .section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Invoice metadata box — flat white sub-content (no border), delineated only by
   its uppercase micro-label title and the field dividers. */
.invoice-metadata-box {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px;
}

/* The "INVOICE" headline is redundant — the Invoice Number / Date fields below
   already label the block. Hidden to match the design. */
.invoice-metadata-box-title {
  display: none;
}

/* Metadata box values are all machine values (invoice number, dates) -> mono. */
.invoice-metadata-box .field-value {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* Invoice header grid */
.invoice-header-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Design `.header-grid { gap: 11px 16px }` (app.css:346) — tighter row gap than
     column gap. */
  gap: 11px 16px;
}
@media (max-width: 900px) {
  .invoice-header-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Parties grid — wider gutter replaces the box borders as the separator */
.parties-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 700px) {
  .parties-grid {
    grid-template-columns: 1fr;
  }
}

/* Party card — flat white (Issuer / Recipient), no border. Separated by the
   uppercase title, the field dividers, and the column gap. */
.party-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.party-card-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fg-muted);
  /* Design `.party-card-title { margin-bottom: 7px }` (app.css:363). */
  margin-bottom: 7px;
}
.party-card-name-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* Design `.party-row { padding: 5px 0 }` (app.css:364) — tight party block rows. */
  margin-bottom: 5px;
}
.party-card-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.party-card-name-row .editable-value {
  font-size: 15px;
  font-weight: 600;
}
.party-card-address-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* Design `.party-row { padding: 5px 0 }` (app.css:364). */
  margin-bottom: 5px;
}
.party-card-address {
  flex: 1;
  color: var(--fg);
  font-size: 13px;
  white-space: pre-line;
}
.party-card-address-row .editable-value {
  font-size: 13px;
  line-height: 1.4;
}
.party-card-field {
  display: flex;
  gap: 8px;
  /* Design `.party-field { padding: 5px 0 }` (app.css:368). */
  padding: 5px 0;
  margin-bottom: 0;
  font-size: 13px;
}
.party-card-field:first-of-type {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bg-muted);
}
.party-card-field-label {
  /* Design `.pf-label { font: var(--text-caption); color: var(--fg-subtle);
     text-transform: uppercase; letter-spacing: .04em }` (app.css:370) — uppercase
     caption micro-label for VAT / EMAIL / PHONE. */
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  min-width: 70px;
}
.party-card-field-value-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.party-card-field-value {
  flex: 1;
  color: var(--fg);
}
.party-card-field-value.monospace {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* Field styling */
.field-group {
  margin-bottom: 12px;
}
.field-group:last-child {
  margin-bottom: 0;
}
.field-label {
  /* Design `.field-label { font: var(--text-label); text-transform: uppercase;
     letter-spacing: .5px; color: var(--fg-muted) }` (app.css:348) — uppercase
     micro-label (sans 12px 500) is the structural cue that replaces sub-box
     borders. Was 13px fg-subtle Title-case; aligned to the design token. */
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.field-value {
  color: var(--fg);
  font-size: 14px;
}
.field-value.monospace {
  font-family: var(--font-mono);
  font-size: 13px;
}
.field-value.na {
  color: var(--fg-subtle);
  font-style: italic;
}
.field-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-list {
  margin: 0;
  padding-left: 18px;
  color: var(--fg);
  font-size: 14px;
}
.field-list li {
  margin-bottom: 2px;
}
.field-list li:last-child {
  margin-bottom: 0;
}

/* Copy button */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  /* Design small icon button `.pdf-iconbtn { border-radius: var(--r-sm) }`
     (app.css:272) — 3px on the chip scale, not an off-grid 4px. */
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.copy-btn:hover {
  background: var(--bg-muted);
  color: var(--fg);
}
.copy-btn.copied {
  background: var(--success);
  border-color: var(--success);
  color: white;
}
.copy-btn svg {
  width: 14px;
  height: 14px;
}
.copy-btn .check-icon {
  display: none;
}
.copy-btn.copied .copy-icon {
  display: none;
}
.copy-btn.copied .check-icon {
  display: block;
}

/* Confidence badge */
.confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
/* Design `.confidence-badge.high { background: var(--success-tint); color:
   var(--success-strong) }` (app.css:232-234) — pale tint fill + strong text
   token, not ad-hoc rgba. */
.confidence-badge.high {
  background: var(--success-tint);
  color: var(--success-strong);
}
.confidence-badge.medium {
  background: var(--warning-tint);
  color: var(--warning-strong);
}
.confidence-badge.low {
  background: var(--danger-tint);
  color: var(--danger-strong);
}

/* Inline confidence percentage (no box, just colored text next to label) */
.confidence-pct {
  font-size: 10px;
  font-weight: 600;
  color: var(--success);
}
.confidence-pct.high { color: var(--success); }
.confidence-pct.medium { color: var(--warning); }
.confidence-pct.low { color: var(--danger); }

/* Line items table */
.line-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.line-items-table th {
  text-align: left;
  padding: 6px 7px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* Design `.line-items thead th { font: var(--text-caption); text-transform:
     uppercase; letter-spacing: .02em; color: var(--fg-muted) }` (app.css:391-393)
     — uppercase caption table header, fg-muted not fg-subtle. */
  color: var(--fg-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.line-items-table th.numeric {
  text-align: right;
}
.line-items-table td {
  padding: 7px 7px;
  /* Design `.line-items tbody td { border-bottom: 1px solid var(--border-subtle) }`
     (app.css:397) — the subtle hairline divider token, not bg-muted. */
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg);
}
.line-items-table td.numeric {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Amount rule (DESIGN_DECISIONS.md §3): dark mono number + lighter EUR suffix.
   Design `.li-eur .cur { color: var(--fg-faint) }` (app.css:404). */
.line-items-table .currency-suffix {
  color: var(--fg-faint);
  font-size: 10px;
}
.line-items-table .amount {
  color: var(--fg);
}
/* Design `.line-items` uses hairline row dividers + hover only — no zebra striping
   (app.css:397-418). Rows are separated by `border-bottom: 1px var(--border-subtle)`
   and lifted on hover with `var(--bg-subtle)`. Removed the nth-child stripe. */
.line-items-table tbody tr:hover {
  background: var(--bg-subtle);
}
.line-items-table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 45px;
}

/* ============================================================
 * Enhanced (dense) line-items table — DESIGN `LineItemsTable`
 * (detail.jsx:186-257). Compact accounting rows with Debit /
 * Credit / Cost-Center pill COLUMNS; each row expands in place
 * to reveal per-field confidence + reasoning (DESIGN_DECISIONS §5).
 * Ported from design app.css:386-515.
 * ============================================================ */

/* Wrap + table (app.css:387-388) */
.line-items-wrap {
  /* Full-height table — rows scroll with the page, never an inner vertical
     scrollbar. Horizontal overflow is scrollable, but the visible control is the
     floating .li-hscroll bar (below), so it stays reachable without scrolling to
     the bottom of a long table. */
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
/* Floating horizontal scrollbar: sticks to the bottom of the visible panel and
   mirrors the table's horizontal scroll (synced in JS). Shown by JS only when
   the table actually overflows. */
.li-hscroll {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 4;
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
}
.li-hscroll-track { height: 1px; }
.li-hscroll::-webkit-scrollbar { height: 11px; }
.li-hscroll::-webkit-scrollbar-thumb {
  background: var(--fg-faint);
  border-radius: var(--r-lg);
  border: 2px solid var(--surface);
}
/* With the floating bar active, hide the wrapper's own (far-down) scrollbar.
   Absent JS, the class is never added, so the native bar remains as a fallback. */
.line-items-wrap.has-proxy { scrollbar-width: none; }
.line-items-wrap.has-proxy::-webkit-scrollbar { height: 0; }
/* Subtle Expand all / Collapse all toggle above the line-items table. */
.li-bulk-toggle {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 6px;
}
.li-bulk-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: var(--text-sm);
  color: var(--fg-muted);
  padding: 2px 8px;
  border-radius: var(--r-sm);
}
.li-bulk-btn:hover {
  color: var(--brand);
  background: var(--bg-muted);
}
.line-items {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  /* True content width of all columns; below this the .line-items-wrap
     scroller takes over instead of starving columns into overlap. */
  min-width: 780px;
  table-layout: fixed;
}
/* Header (app.css:389-396) */
.line-items thead th {
  position: sticky;
  top: 0;
  background: var(--bg-inset);
  z-index: 1;
  text-align: left;
  padding: 6px 7px;
  border-bottom: 1px solid var(--border);
  font: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  white-space: normal;
  line-height: 1.25;
  vertical-align: bottom;
}
.line-items th.num,
.line-items td.num { text-align: right; }
.line-items th.pos,
.line-items td.pos {
  width: 26px;
  text-align: center;
  color: var(--fg-faint);
  /* Freeze # + Description so they stay visible while the numeric columns
     scroll horizontally within .line-items-wrap on narrow panels. */
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
}
.line-items thead th.pos { z-index: 3; background: var(--bg-inset); }
.line-items thead th:nth-child(2),
.line-items td.desc {
  position: sticky;
  left: 26px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.line-items thead th:nth-child(2) { z-index: 3; background: var(--bg-inset); }
.line-items td.desc { z-index: 1; }
.line-items tr.li-row:hover td.pos,
.line-items tr.li-row:hover td.desc { background: var(--bg-subtle); }
.line-items tr.li-row.open td.pos,
.line-items tr.li-row.open td.desc { background: var(--brand-tint); }
/* Body cells (app.css:397-401) */
.line-items tbody td {
  padding: 7px 7px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg);
  vertical-align: top;
}
.line-items td.num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap;
}
.line-items td.desc { min-width: 150px; font-size: 13px; overflow-wrap: anywhere; }
.line-items td.desc .editable { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* Amount: dark mono number + lighter EUR suffix (app.css:402-407;
   DESIGN_DECISIONS §3). `.amount` is the existing editable number span. */
.line-items .li-eur {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--fg);
  white-space: nowrap;
}
.line-items .li-eur .amount { color: var(--fg); }
.line-items .li-eur .cur {
  color: var(--fg-faint);
  margin-left: 4px;
  font-size: 10px;
}
.line-items td.amount .li-eur { font-weight: 600; }

/* Qty / Unit split + cost-center / expand affordance (app.css:410-421) */
.line-items td.qn {
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.line-items td.unit {
  color: var(--fg-muted);
  font-size: 11px;
  /* Textual units (e.g. "Arbeitszeit-Std") must wrap, not overflow the cell
     and paint over the Unit Price column. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.line-items td.cc-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.line-items th.exp,
.line-items td.exp {
  width: 30px;
  text-align: center;
}
.line-items td.exp {
  color: var(--fg-faint);
  cursor: pointer;
}
.li-open-ico {
  font-size: 15px;
  color: var(--fg-faint);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.line-items tr.li-row {
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.line-items tr.li-row:hover { background: var(--bg-subtle); }
.line-items tr.li-row:hover .li-open-ico { color: var(--brand); }
.line-items tr.li-row.open { background: var(--brand-tint); }
.line-items tr.li-row.open .li-open-ico {
  color: var(--brand);
  transform: rotate(180deg);
}

/* Account pills, number-first (app.css:513-515; DESIGN_DECISIONS §2).
   Debit = azure, Credit = green, Cost Center = violet. The pill wraps
   the master-data picker so click-to-edit is preserved. */
.account-pill {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--azure-50);
  color: var(--azure-700);
  font: var(--text-caption);
  font-family: var(--font-mono);
  font-size: 10.5px;
  white-space: nowrap;
}
.account-pill.credit {
  background: var(--success-tint);
  color: var(--success-strong);
}
.account-pill.cc {
  background: var(--accent-violet-tint);
  color: var(--accent-violet);
}
/* The picker swap renders an .editable-value inside the pill; keep it
   inheriting the pill's mono/colour so the at-rest pill stays compact. */
.account-pill .editable-value,
.account-pill .master-data-picker {
  font: inherit;
  color: inherit;
}

/* Expandable detail row (app.css:488-507). Hidden until the row is
   clicked (.open); the React reference conditionally renders it. */
.line-items tr.li-detail-row { display: none; }
.line-items tr.li-detail-row.open { display: table-row; }
.line-items .li-detail-row > td {
  padding: 0;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.li-detail { padding: 14px 16px 16px; }
.li-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.li-acct-label {
  font: var(--text-caption);
  color: var(--fg-muted);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}
/* Confidence % sits next to its label (DESIGN app.css:497 margin-left:6px). */
.li-acct-label .confidence-pct { margin-left: 6px; }
.li-acct-val {
  font: var(--text-sm);
  color: var(--fg);
  line-height: 1.5;
}
.li-acct-code {
  font-family: var(--font-mono);
  font-weight: 600;
}
/* Period allocation pill + period (app.css:501-502) */
.alloc-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--r-sm);
  background: var(--bg-muted);
  color: var(--fg-muted);
  font: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.alloc-period {
  font-family: var(--font-mono);
  color: var(--brand);
  font-weight: 600;
}
/* Detail footer: article / BU code + reasoning toggle (app.css:503-507) */
.li-detail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.li-article {
  font: var(--text-sm);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.li-article .lbl {
  font-family: var(--font-sans);
  color: var(--fg-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.li-reason {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font: var(--text-sm);
  color: var(--fg-muted);
  line-height: 1.65;
}
.li-reason:not(.expanded) { display: none; }
.li-reason strong {
  color: var(--fg);
  font-family: var(--font-mono);
  font-weight: 600;
}
.li-detail .reasoning-toggle { flex-shrink: 0; }

@media (max-width: 640px) {
  .li-detail-grid { grid-template-columns: 1fr; }
}

/* Payment summary container (merged section) */
.payment-summary-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Financial summary */
.financial-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.summary-row-label {
  color: var(--fg-muted);
}
.summary-row-value {
  color: var(--fg);
  font-family: var(--font-mono);
}
.summary-row-value.discount {
  color: var(--success);
}
.summary-row.total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
}
.summary-row.total .summary-row-label {
  font-weight: 600;
  color: var(--fg);
}
.summary-row.total .summary-row-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand);
}
.summary-row.vat-breakdown {
  font-size: 12px;
}
.summary-row.vat-breakdown .summary-row-label {
  color: var(--fg-muted);
}
/* Prepayment rows in comparison grid */
.comparison-row.prepayment .comparison-label {
  color: var(--fg-muted);
  font-size: 12px;
}
.comparison-row.prepayment .comparison-original.discount {
  color: var(--success);
}
.summary-row.amount-due {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
}
.summary-row.amount-due .summary-row-label {
  font-weight: 600;
  color: var(--fg);
}
.summary-row.amount-due .summary-row-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--warning);
}

/* Comparison view for financial verification */
.financial-summary.comparison-view {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comparison-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 8px 0 12px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
}

.comparison-header .comparison-original,
.comparison-header .comparison-verified {
  text-align: right;
}

.comparison-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 6px 0;
  font-size: 13px;
  align-items: center;
}

.comparison-label {
  color: var(--fg-muted);
}

.comparison-original {
  text-align: right;
  color: var(--fg);
  font-family: var(--font-mono);
}

.comparison-verified {
  text-align: right;
  font-family: var(--font-mono);
}

/* Verification states */
.comparison-verified.verified {
  color: var(--success);
}

.comparison-verified.verified .check-mark {
  font-weight: 600;
}

.comparison-verified.unverified {
  color: var(--fg-muted);
}

.comparison-verified.unverified .unverified-value {
  font-style: italic;
}

.comparison-verified.discrepancy {
  color: var(--fg);
}

.delta-badge {
  display: inline-block;
  /* Warning status tint per DESIGN_DECISIONS.md §2 (pale tint + strong text),
     chip radius `--r-sm`; was ad-hoc rgba. */
  background: var(--warning-tint);
  color: var(--warning-strong);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  margin-left: 6px;
  font-weight: 500;
}

/* Total row in comparison view */
.comparison-row.total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
}

.comparison-row.total .comparison-label {
  font-weight: 600;
  color: var(--fg);
}

.comparison-row.total .comparison-original {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand);
}

.comparison-row.total .comparison-verified {
  font-size: 16px;
  font-weight: 600;
}

.comparison-row.total .comparison-verified.verified {
  color: var(--success);
}

.comparison-row.total .comparison-verified.discrepancy {
  color: var(--fg);
}

/* Verified breakdown (when computed VAT breakdown shown in right column only) */
.verified-breakdown {
  grid-column: 3;
  text-align: right;
  font-size: 12px;
  color: var(--fg-muted);
  padding-left: 16px;
}

.verified-breakdown .breakdown-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 2px 0;
}

.verified-breakdown .breakdown-label {
  color: var(--fg-subtle);
}

.verified-breakdown .breakdown-value {
  font-family: var(--font-mono);
  color: var(--fg-muted);
}


/* Responsive: stack columns on small screens */
@media (max-width: 600px) {
  .comparison-header {
    display: none;
  }
  .comparison-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bg-muted);
  }
  .comparison-original,
  .comparison-verified {
    text-align: left;
  }
  .comparison-original::before {
    content: "Original: ";
    color: var(--fg-subtle);
    font-size: 11px;
    font-family: inherit;
  }
  .comparison-verified::before {
    content: "Verified: ";
    color: var(--fg-subtle);
    font-size: 11px;
    font-family: inherit;
  }
}

/* Payment details */
.payment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 700px) {
  .payment-grid {
    grid-template-columns: 1fr;
  }
}
.payment-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
}
.payment-card-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Math check badge (shown in Payment Summary title) */
.math-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
  vertical-align: middle;
}
.math-badge.math-pass {
  background-color: var(--success-tint);
  color: var(--success-strong);
}
.math-badge.math-warning {
  background-color: var(--warning-tint);
  color: var(--warning-strong);
}
.math-badge.math-error {
  background-color: var(--danger-tint);
  color: var(--danger-strong);
}
.math-badge.math-uncertain {
  background-color: var(--warning-tint);
  color: var(--warning-strong);
}
.math-badge.math-review {
  background-color: var(--info-tint);
  color: var(--azure-700);
}

/* Value row (single column display for payment summary) */
.value-row {
  display: flex;
  justify-content: space-between;
  /* Design `.pay-row { padding: 9px 2px }` (app.css:522) — rows sit flush in the
     section body, so only a hair of horizontal inset. */
  padding: 9px 2px;
  border-bottom: 1px solid var(--bg-muted);
}
.value-row:last-child {
  border-bottom: none;
}
.value-row .value-label {
  /* Design `.pay-row .pr-label { color: var(--fg-muted) }` (app.css:524) — pay
     labels read at fg-muted (stone-600), not the fainter fg-subtle. */
  color: var(--fg-muted);
  font-size: 13px;
}
.value-row .value-amount {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
}
.value-row .value-amount.discount {
  color: var(--success);
}
.value-row.total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
}
/* Avoid a double hairline above the Total: drop the row-divider on the row
   immediately preceding it, leaving only the Total's own border-top. */
.value-row:has(+ .value-row.total) {
  border-bottom: none;
}
.value-row.total .value-label {
  font-weight: 600;
  color: var(--fg);
}
.value-row.total .value-amount {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand);
}
.value-row.prepayment .value-label {
  color: var(--fg-muted);
  font-size: 12px;
}
.value-row.prepayment .value-amount.discount {
  color: var(--success);
}
.value-row.fee .value-label,
.value-row.installment .value-label {
  color: var(--fg-muted);
  font-size: 12px;
}

/* Collapsible sections */
.collapsible-section .section-body {
  overflow: visible;
  opacity: 1;
  transition: opacity 0.2s ease-out;
}
.collapsible-section.collapsed .section-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}
.section-header-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.section-header-toggle:hover {
  color: var(--fg);
}
.section-header-toggle > span {
  display: inline-flex;
  align-items: center;
}
.section-header-toggle .chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease-out;
  color: var(--fg-subtle);
}
.collapsible-section.collapsed .chevron {
  transform: rotate(-90deg);
}

/* Section inline badges */
.matches-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 10px;
  background: var(--border);
  color: var(--fg);
  font-size: 11px;
  font-weight: 600;
}
.section-ok-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 50%;
  /* Design `.section-header .sec-check` success check (app.css:338); success tint
     fill token, not ad-hoc rgba. */
  background: var(--success-tint);
  color: var(--success);
}
.section-count {
  color: var(--fg-muted);
  font-weight: 400;
  margin-left: 4px;
}

/* Empty state placeholder */
.empty-placeholder {
  color: var(--fg-subtle);
  font-style: italic;
  padding: 12px 0;
}
.party-card.empty {
  min-height: 80px;
}

/* Email connection banner */
.email-connection-banner {
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-subtle) 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}
.email-connection-banner.warning {
  border-color: var(--warning);
  background: linear-gradient(135deg, var(--warning-tint) 0%, var(--warning-tint) 100%);
}
.email-connection-banner-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.email-connection-banner-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--bg-muted);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
}
.email-connection-banner.warning .email-connection-banner-icon {
  background: rgba(191, 135, 0, 0.2);
  color: var(--warning);
}
.email-connection-banner-text {
  flex: 1;
}
.email-connection-banner-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
}
.email-connection-banner-description {
  color: var(--fg-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.email-connection-banner-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-outlook {
  background: var(--brand);
  color: white;
}
.btn-outlook:hover {
  background: var(--brand-hover);
  text-decoration: none;
}
.btn-gmail {
  background: var(--brand);
  color: white;
}
.btn-gmail:hover {
  background: var(--brand-hover);
  text-decoration: none;
}

/* Master Data Sections */
.master-data-section {
  /* Inner content cards nested inside a white settings section: white with a
     border, no shadow (the border delineates them, like the data panel). */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 16px;
}
.master-data-section h2 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.master-data-section h2 + .section-description {
  margin-top: -8px;
}

/* Upload Zone */
.upload-zone {
  margin-bottom: 20px;
}
.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px;
  border: 2px dashed var(--border);
  border-radius: var(--r-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.upload-dropzone:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}

/* Upload spinner (HTMX indicator) */
.upload-spinner {
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 16px;
}
.htmx-request .upload-spinner.htmx-indicator,
.upload-spinner.htmx-indicator.htmx-request {
  display: flex;
}

/* Dataset info */
.dataset-info {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.dataset-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dataset-header .dataset-meta {
  margin-bottom: 0;
}
.dataset-meta {
  margin-bottom: 16px;
  color: var(--fg-muted);
  font-size: 13px;
}

/* Error section */
.master-data-section.error {
  border-left: 3px solid var(--danger-strong);
  background: var(--danger-tint);
}
.validation-errors p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.validation-errors ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.validation-errors li {
  padding: 8px 12px;
  margin-bottom: 6px;
  background: var(--danger-tint);
  border-left: 2px solid var(--danger-strong);
  border-radius: var(--r-sm);
  font-size: 13px;
}

/* Success toast */
.success-toast {
  background: var(--success-tint);
  border: 1px solid var(--success-border);
  padding: 16px;
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--success-strong);
}

/* Toggle switch */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.toggle-switch input {
  display: none;
}

.toggle-slider {
  position: relative;
  width: 38px;
  height: 22px;
  background: var(--border-strong);
  border-radius: var(--r-pill);
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: var(--r-pill);
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--success);
}

.toggle-switch input:checked + .toggle-slider::after {
  transform: translateX(16px);
}

.toggle-label {
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
}

/* Section description */
.section-description {
  color: var(--fg-muted);
  font-size: 14px;
  margin-bottom: 16px;
}

/* DATEV Connection Card */
.datev-connection-status {
  margin-top: 20px;
}
.connection-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.connection-card.connected {
  border-color: var(--success-border);
  background: var(--success-tint);
}
.connection-card.needs-reconnect {
  border-color: var(--warning-border);
  background: var(--warning-tint);
}
.connection-card.not-connected {
  border-color: var(--border);
}
.connection-card.pending {
  border-color: var(--brand-border);
  background: var(--brand-tint);
}
.connection-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.connection-card.connected .connection-icon {
  color: var(--success);
}
.connection-card.needs-reconnect .connection-icon {
  color: var(--warning);
}
.connection-card.not-connected .connection-icon {
  color: var(--fg-muted);
}
.connection-card.pending .connection-icon {
  color: var(--brand);
}
.connection-info {
  flex: 1;
  min-width: 0;
}
.connection-title {
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
}
.connection-company {
  color: var(--fg-muted);
  font-size: 13px;
}
.connection-expiry {
  color: var(--fg-muted);
  font-size: 12px;
  margin-top: 4px;
}
.connection-ledger {
  color: var(--fg-muted);
  font-size: 12px;
  margin-top: 4px;
}
.connection-description {
  color: var(--fg-muted);
  font-size: 13px;
}
.connection-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

/* Ledger name configuration form */
.ledger-name-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.ledger-name-form .field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  /* Form input label, not a data micro-label — keep sentence case. */
  text-transform: none;
  letter-spacing: normal;
  color: var(--fg);
  margin-bottom: 6px;
}
.field-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.text-input {
  flex: 1;
  max-width: 300px;
  padding: 6px 10px;
  font-size: 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg);
}
.text-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.text-input::placeholder {
  color: var(--fg-subtle);
}
.field-hint {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 6px;
}

/* Settings page sections */
.settings-section {
  /* Each top-level settings section is a white card (like the data panel), with
     its iconified headline inside; the sand canvas shows only around / between. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
  margin-bottom: 24px;
}
.settings-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.settings-section-title iconify-icon {
  font-size: 20px;
  color: var(--fg-muted);
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scrollable table container */
.table-container {
  max-height: 400px;
  overflow-x: scroll;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  /* Firefox scrollbar */
  scrollbar-width: auto;
  scrollbar-color: var(--fg-faint) var(--bg-muted);
}
/* Webkit scrollbar styling - always visible for accessibility */
.table-container::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}
.table-container::-webkit-scrollbar-track {
  background: var(--bg-muted);
  border-radius: var(--r-lg);
}
.table-container::-webkit-scrollbar-thumb {
  background: var(--fg-faint);
  border-radius: var(--r-lg);
  border: 2px solid var(--bg-muted);
}
.table-container::-webkit-scrollbar-thumb:hover {
  background: var(--fg-subtle);
}
.table-container::-webkit-scrollbar-corner {
  background: var(--bg-muted);
}
.table-container .table {
  margin: 0;
  border: none;
  min-width: max-content;
}
.table-container thead {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

/* Sortable table headers */
.table.sortable th {
  cursor: pointer;
  user-select: none;
}
.table.sortable th:hover {
  background: var(--bg-muted);
}
.table.sortable th iconify-icon {
  opacity: 0.5;
  margin-left: 4px;
}
.table.sortable th:hover iconify-icon,
.table.sortable th.sort-active iconify-icon {
  opacity: 1;
}
.table.sortable th.htmx-request {
  opacity: 0.6;
}

/* Active sort column indicator (for document list) */
.table th.sort-active {
  background: var(--brand-tint);
}

.table th.sort-active iconify-icon {
  opacity: 1;
}

/* Accounts & Cost Center Components */

/* Reasoning toggle */
.reasoning-container {
  margin-top: 8px;
}
.reasoning-toggle {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  font-size: 11px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: var(--r-lg);
  font-weight: 500;
  transition: background 0.15s;
}
.reasoning-toggle:hover {
  background: var(--bg-muted);
  text-decoration: none;
}
.reasoning-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.2s ease-out;
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.5;
  background: var(--bg-canvas);
  border-radius: 4px;
}
.reasoning-text.expanded {
  max-height: none;
  padding: 12px;
  margin-top: 8px;
  overflow-y: visible;
}

/* Account card (inline in line items) */
.account-card {
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 8px 12px;
  min-width: 180px;
}
.account-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.account-number {
  font-family: var(--font-mono);
  color: var(--brand);
  font-weight: 600;
  font-size: 13px;
}
.account-name {
  color: var(--fg);
  font-size: 13px;
}
.account-card .confidence-badge {
  margin-left: auto;
}

/* Cost center card */
.cost-center-card {
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
}
.cost-center-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.cost-center-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cost-center-number {
  font-family: var(--font-mono);
  color: var(--brand);
  font-weight: 600;
  font-size: 16px;
}
.cost-center-name {
  color: var(--fg);
  font-size: 15px;
  font-weight: 500;
}
.cost-center-employee {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.cost-center-employee .label {
  color: var(--fg-subtle);
}
.cost-center-employee .employee-name {
  color: var(--fg);
}

/* Accrual badge */
.accrual-badge-container {
  min-width: 140px;
}
.accrual-badge-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.accrual-type-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}
.accrual-type-badge.single-period {
  background: rgba(121, 115, 107, 0.2);
  color: var(--fg-muted);
}
.accrual-type-badge.multi-month {
  background: rgba(10, 109, 189, 0.2);
  color: var(--brand);
}
.accrual-type-badge.multi-year {
  background: rgba(130, 80, 223, 0.2);
  color: var(--accent-violet);
}
.accrual-period-count {
  font-size: 12px;
  color: var(--fg-subtle);
}
.accrual-periods {
  margin-top: 8px;
  padding: 8px;
  background: var(--bg-canvas);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 4px;
}
.accrual-period {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 2px 0;
}
.period-label {
  color: var(--fg);
}
.period-amount {
  color: var(--fg);
  font-family: var(--font-mono);
}
.accrual-period.more {
  color: var(--fg-subtle);
  font-style: italic;
  grid-column: 1 / -1;
}

/* Service category badge */
.service-category-badge {
  display: inline-flex;
  align-items: center;
}
.service-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.service-category-header .reasoning-container {
  margin-top: 0;
}
.category-label {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-muted);
  color: var(--fg);
}

/* Classification section content */
.classification-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Inline classification within invoice details */
.invoice-classification {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.invoice-classification-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Line Item Cards */
.line-items-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.line-item-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.line-item-card > .reasoning-container {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bg-muted);
}
.line-item-card > .reasoning-container .reasoning-text div {
  margin-bottom: 6px;
}
.line-item-card > .reasoning-container .reasoning-text div:last-child {
  margin-bottom: 0;
}

.line-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.line-item-description {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--fg);
  line-height: 1.5;
}
.line-item-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}
.line-item-description .editable-value {
  font-size: 16px;
  font-weight: 600;
}

.line-item-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.line-item-meta-row .grid-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.line-item-accounts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin-top: 8px;
}
.line-item-accounts-grid .grid-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

.meta-label {
  font-size: 13px;
  color: var(--fg-subtle);
}

.meta-value {
  font-size: 13px;
  color: var(--fg);
}

.meta-value.monospace {
  font-family: var(--font-mono);
}

.meta-value.discount {
  color: var(--fg);
}

/* VAT status label next to Tax headline */
.vat-status-label {
  font-size: 10px;
  font-weight: 600;
  margin-left: 6px;
  text-transform: none;
}
.vat-status-label.valid { color: var(--success); }
.vat-status-label.warning { color: var(--warning); }
.vat-status-label.invalid { color: var(--danger); }
.vat-expected-inline {
  font-size: 11px;
  color: var(--warning);
}

/* Account/cost-center numbers inline in meta-value */
.meta-value .account-number {
  font-family: var(--font-mono);
  color: var(--brand);
  font-weight: 600;
}
.meta-value .account-name {
  color: var(--fg);
}
.meta-value .cost-center-number {
  font-family: var(--font-mono);
  color: var(--accent-violet);
  font-weight: 600;
}
.meta-value .cost-center-name {
  color: var(--fg);
}
.meta-value .cost-center-employee {
  color: var(--fg-muted);
  font-style: italic;
}

/* Line item surcharges */
.line-item-surcharges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.surcharges-label {
  font-size: 10px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

.surcharge-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 8px;
  background: var(--bg-muted);
  border-radius: 4px;
}

.surcharge-desc {
  color: var(--fg-muted);
}

.surcharge-amount {
  color: var(--warning);
  font-weight: 500;
}

.surcharge-tax-code {
  color: var(--fg-subtle);
  font-size: 10px;
}

/* Line item enrichments (account + accrual) */
.line-item-enrichments {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.enrichment-badge {
  flex: 1;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px 12px;
}

.enrichment-label {
  display: block;
  font-size: 10px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.enrichment-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.enrichment-badge .account-number {
  font-family: var(--font-mono);
  color: var(--brand);
  font-weight: 600;
  font-size: 14px;
}

.enrichment-badge .account-name {
  color: var(--fg);
  font-size: 13px;
}

/* Cost center badge in line items */
.enrichment-badge .cost-center-number {
  font-family: var(--font-mono);
  color: var(--accent-violet);
  font-weight: 600;
  font-size: 14px;
}

.enrichment-badge .cost-center-name {
  color: var(--fg);
  font-size: 13px;
}

.enrichment-badge .cost-center-employee {
  color: var(--fg-muted);
  font-size: 12px;
  font-style: italic;
}

.enrichment-badge .reasoning-container {
  flex-basis: 100%;
  margin-top: 4px;
}

/* Accrual specific styles in enrichment */
.accrual-single-period {
  font-family: var(--font-mono);
  color: var(--brand);
  font-weight: 600;
  font-size: 12px;
}

.accrual-periods-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-basis: 100%;
  margin-top: 8px;
}

.period-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-muted);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
}

.period-chip .period-label {
  color: var(--fg);
}

/* Blank month on a freshly added period: render the "Set month" placeholder
   muted/italic so it reads as a prompt yet stays a visible click target. */
.period-chip .period-label .editable-value.period-empty {
  color: var(--fg-subtle);
  font-style: italic;
}

/* Inline month editor: a numeric MM dropdown + YYYY input. A custom control
   because the native month picker rendered a black calendar icon and a
   locale month-name. */
.editable-value .period-month-select,
.editable-value .period-year-input {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.4;
  padding: 0 2px;
  margin: 0;
}
.editable-value .period-year-input {
  width: 5ch;
  margin-left: 3px;
}
.editable-value .period-month-select:focus,
.editable-value .period-year-input:focus {
  outline: none;
  border-color: var(--brand);
}
/* Hide the number-input spinner so the year reads as a clean 4-digit field. */
.editable-value .period-year-input::-webkit-outer-spin-button,
.editable-value .period-year-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.period-chip .period-amount {
  color: var(--fg);
  font-family: var(--font-mono);
}

.period-chip.more {
  color: var(--fg-subtle);
  font-style: italic;
}

/* Period add/remove controls (accrual editing) */
.period-chip .period-remove {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin-left: 2px;
  border: none;
  background: transparent;
  color: var(--fg-subtle);
  cursor: pointer;
  line-height: 1;
}
.period-chip .period-remove:hover {
  color: var(--red-500);
}

.add-period {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  padding: 4px 8px;
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--fg-muted);
  font-size: 11px;
  cursor: pointer;
}
.add-period:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* Line item amount (prominent, flex-aligned) */
.line-item-amount {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
}
.line-item-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand);
  font-family: var(--font-mono);
}
.line-item-amount .editable-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand);
  font-family: var(--font-mono);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .line-item-top {
    flex-direction: column;
    gap: 8px;
  }

  .line-item-amount {
    text-align: right;
  }

  .enrichment-badge {
    min-width: 100%;
  }
}

/* Validation Semaphore (traffic light dots) */
.validation-semaphore {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.validation-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  transition: transform 0.15s;
}

.validation-dot:hover {
  transform: scale(1.3);
}

.validation-dot.pass {
  background: var(--success);
}

.validation-dot.warning {
  background: var(--warning);
}

.validation-dot.error {
  background: var(--danger);
}

.validation-dot.uncertain {
  background: transparent;
  border: 2px solid var(--fg-muted);
  width: 8px;
  height: 8px;
}

.validation-dot.missing {
  background: var(--border);
}

/* Validation Section */
.validation-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.validation-issues {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Validation issues banner (shown above boxes for non-pass items) */
.validation-issues-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

/* Validation grid (two-column layout: Formal Requirements | Fraud Signals) */
.validation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 600px) {
  .validation-grid {
    grid-template-columns: 1fr;
  }
}

/* Validation box (container for formal requirements / tax compliance) */
.validation-box {
  background: var(--surface);
  /* Plain hairline border — same as the Supplier/Recipient verification boxes;
     status is carried by the header badge, not a coloured left edge. */
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
}

.validation-box-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bg-muted);
}

.validation-box-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.validation-empty-note {
  color: var(--fg-subtle);
  font-style: italic;
  font-size: 13px;
}

.validation-check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Validation Check Card (used in warning banner) */
.validation-check-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 16px;
}

.validation-check-card.warning {
  border-color: var(--warning-border);
  background: var(--warning-tint);
}

.validation-check-card.error {
  border-color: var(--danger-border);
  background: var(--danger-tint);
}

.validation-check-card.uncertain {
  border-color: var(--border);
  background: var(--bg-muted);
}

.validation-check-card.pass .validation-status-icon {
  color: var(--success);
}

.validation-check-card.warning .validation-status-icon {
  color: var(--warning);
}

.validation-check-card.error .validation-status-icon {
  color: var(--danger);
}

.validation-check-card.uncertain .validation-status-icon {
  color: var(--fg-muted);
}

/* Old chip icon colors removed - now handled by .validation-chip and .passed-check-chip variants below */

.validation-check-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.validation-check-label {
  font-weight: 500;
  color: var(--fg);
  font-size: 14px;
}

.inferred-badge {
  font-size: 10px;
  padding: 2px 6px;
  /* No exact design class; apply the info/azure status token (DESIGN_DECISIONS.md
     §2: info = brand-tint fill + azure-700 text) instead of ad-hoc rgba, and the
     chip radius `--r-sm` (3px). */
  background: var(--brand-tint);
  color: var(--azure-700);
  border-radius: var(--r-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.validation-check-message {
  margin-top: 8px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
}

.breakdown-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--brand);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  cursor: pointer;
}
.breakdown-download-btn:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
}

.validation-check-field {
  margin-top: 6px;
  font-size: 12px;
  display: flex;
  gap: 6px;
}

.validation-check-field .field-label {
  color: var(--fg-subtle);
}

.validation-check-field .field-name {
  color: var(--brand);
  font-family: var(--font-mono);
}

.validation-resolved-value {
  margin-top: 6px;
  font-size: 13px;
  display: flex;
  gap: 6px;
}

.validation-resolved-value .resolved-label {
  color: var(--fg-subtle);
}

.validation-resolved-value .resolved-value {
  color: var(--success);
  font-weight: 500;
}

.validation-details {
  margin-top: 8px;
}

.validation-details summary {
  font-size: 12px;
  color: var(--brand);
  cursor: pointer;
}

.validation-details summary:hover {
  text-decoration: underline;
}

.validation-details pre {
  margin: 8px 0 0 0;
  padding: 8px;
  background: var(--surface);
  border-radius: 4px;
  font-size: 11px;
  color: var(--fg-muted);
  overflow-x: auto;
}

/* Passed checks section (always expanded) */
.validation-passed-section {
  margin-top: 8px;
}

.validation-passed-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--success);
  margin-bottom: 8px;
}

.validation-passed-header iconify-icon {
  font-size: 14px;
}

.validation-passed-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 4px;
}

/* Check row: fixed label + colored status text */
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Design `.vchk-row { padding: 5px 0; border-bottom: 1px solid var(--border-subtle) }`
     with `:last-child { border-bottom: none }` (app.css:659-663). Was 6px pad with a
     top divider on subsequent rows; switched to bottom dividers + 5px to match. */
  padding: 5px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.check-row:last-child {
  border-bottom: none;
}

.check-label {
  flex: 1;
  /* Design `.vchk-label { font: var(--text-sm); color: var(--fg-muted) }`
     (app.css:664) — 13px 400 muted, not subtle 500. */
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-muted);
}

.check-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Design `.vchk-val { font: var(--text-sm); font-weight: 600 }` (app.css:667) —
     13px 600 (the verified value carries weight). Was 12px 500. */
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.check-status.pass { color: var(--success); }
.check-status.pass iconify-icon { color: var(--success); }

.check-status.warning { color: var(--warning); }
.check-status.warning iconify-icon { color: var(--warning); }

.check-status.error { color: var(--danger); }
.check-status.error iconify-icon { color: var(--danger); }

.check-status.not-applicable { color: var(--fg); }
.check-status.not-applicable iconify-icon { color: var(--fg-muted); }

.check-status.uncertain { color: var(--fg); }
.check-status.uncertain iconify-icon { color: var(--fg-muted); }

.check-status.info { color: var(--brand); }
.check-status.info iconify-icon { color: var(--brand); }

/* Validation check chips - status-based coloring */
.validation-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-lg);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
}

/* Pass state - green */
.validation-chip.pass {
  background: var(--success-tint);
  color: var(--success-strong);
  border-color: var(--success-border);
}
.validation-chip.pass iconify-icon {
  color: var(--success);
}

/* Warning state - yellow/orange */
.validation-chip.warning {
  background: var(--warning-tint);
  color: var(--warning-strong);
  border-color: var(--warning-border);
}
.validation-chip.warning iconify-icon {
  color: var(--warning);
}

/* Error/Critical state - red */
.validation-chip.error {
  background: var(--danger-tint);
  color: var(--danger-strong);
  border-color: var(--danger-border);
}
.validation-chip.error iconify-icon {
  color: var(--danger);
}

/* Uncertain state - gray */
.validation-chip.uncertain {
  background: var(--bg-muted);
  color: var(--fg-muted);
  border-color: var(--border);
}
.validation-chip.uncertain iconify-icon {
  color: var(--fg-muted);
}

/* Info state - blue (for info-level fraud flags) */
.validation-chip.info {
  background: var(--info-tint);
  color: var(--azure-700);
  border-color: var(--info-border);
}
.validation-chip.info iconify-icon {
  color: var(--brand);
}

/* Legacy class - keep for backwards compatibility */
.passed-check-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-lg);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
}
.passed-check-chip.pass {
  background: var(--success-tint);
  color: var(--success-strong);
  border-color: var(--success-border);
}
.passed-check-chip.pass iconify-icon {
  color: var(--success);
}
.passed-check-chip.warning {
  background: var(--warning-tint);
  color: var(--warning-strong);
  border-color: var(--warning-border);
}
.passed-check-chip.warning iconify-icon {
  color: var(--warning);
}
.passed-check-chip.error {
  background: var(--danger-tint);
  color: var(--danger-strong);
  border-color: var(--danger-border);
}
.passed-check-chip.error iconify-icon {
  color: var(--danger);
}
.passed-check-chip.uncertain {
  background: var(--bg-muted);
  color: var(--fg-muted);
  border-color: var(--border);
}
.passed-check-chip.uncertain iconify-icon {
  color: var(--fg-muted);
}
.passed-check-chip.info {
  background: var(--info-tint);
  color: var(--azure-700);
  border-color: var(--info-border);
}
.passed-check-chip.info iconify-icon {
  color: var(--brand);
}
.passed-check-chip.not-applicable {
  background: var(--bg-muted);
  color: var(--fg-muted);
  border-color: var(--border);
}
.passed-check-chip.not-applicable iconify-icon {
  color: var(--fg-muted);
}

/* Info tooltip for validation checks */
.info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}

.info-tooltip iconify-icon {
  font-size: 12px;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.info-tooltip:hover iconify-icon {
  opacity: 1;
}

.info-tooltip-content {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: -8px;
  width: 240px;
  padding: 10px 12px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  pointer-events: none;
}

.info-tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 12px;
  border: 6px solid transparent;
  border-top-color: var(--border);
}

.info-tooltip:hover .info-tooltip-content {
  display: block;
}

/* Escape the scrollable .data-panel / .section-body / .content overflow: where
   the browser supports CSS anchor positioning, pin the tooltip to its own icon
   with position:fixed so it renders above every container and is never clipped.
   `anchor-scope` binds each row's tooltip to its own icon; `flip-block` drops it
   below when there's no room above (e.g. near the top of the panel). Browsers
   without anchor support keep the absolute-positioned fallback above. */
@supports (anchor-name: --a) {
  .info-tooltip {
    anchor-name: --info-tip;
    anchor-scope: --info-tip;
  }
  .info-tooltip-content {
    position: fixed;
    position-anchor: --info-tip;
    top: auto;
    right: anchor(right);
    bottom: calc(anchor(top) + 8px);
    position-try-fallbacks: flip-block;
  }
}

/* All passed state */
.validation-all-passed {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(26, 127, 55, 0.1);
  border: 1px solid rgba(26, 127, 55, 0.3);
  border-radius: var(--r-lg);
}

.validation-all-passed iconify-icon {
  color: var(--success);
  font-size: 20px;
}

.all-passed-text {
  color: var(--success);
  font-size: 14px;
  font-weight: 500;
}

/* Validation section header content */
.validation-header-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.validation-header-content iconify-icon {
  font-size: 14px;
}

/* Issue count badge in section header - subtle inline style */
.validation-issue-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  /* Danger status tint token (DESIGN_DECISIONS.md §2), was ad-hoc rgba. */
  background: var(--danger-tint);
  color: var(--danger-strong);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}

/* Validation status icon sizing */
.validation-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
}

.validation-status-icon iconify-icon {
  font-size: 16px;
}

/* Footer */
.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8px 24px;
  z-index: 150;
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-link {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}

.footer-link:hover {
  color: var(--fg);
  text-decoration: none;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-content-large {
  max-width: 700px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
}

.modal-close {
  background: none;
  border: none;
  color: var(--fg-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

.modal-close:hover {
  background: var(--bg-muted);
  color: var(--fg);
}

.modal-body {
  padding: 24px;
}

.modal-body-scrollable {
  overflow-y: auto;
  flex: 1;
}

.modal-body p {
  margin: 0 0 16px 0;
  color: var(--fg-muted);
}

.modal-body h4 {
  color: var(--fg);
  font-size: 15px;
  font-weight: 600;
  margin: 24px 0 12px 0;
}

.modal-body h4:first-child {
  margin-top: 0;
}

.modal-body ul {
  margin: 0 0 16px 0;
  padding-left: 24px;
  color: var(--fg-muted);
}

.modal-body li {
  margin-bottom: 8px;
}

.modal-body a {
  color: var(--brand);
  text-decoration: none;
}

.modal-body a:hover {
  text-decoration: underline;
}

.email-copy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.email-address {
  flex: 1;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
}

/* Copy button animation (same as documents page) */
.copy-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  width: 24px;
  height: 24px;
}

.copy-btn:hover {
  background: var(--bg-muted);
  border-color: var(--brand);
}

.copy-btn svg {
  width: 12px;
  height: 12px;
  color: var(--fg-muted);
  transition: opacity 0.2s, transform 0.2s;
}

.copy-btn .check-icon {
  position: absolute;
  opacity: 0;
  transform: scale(0.8);
}

.copy-btn.copied .copy-icon {
  opacity: 0;
  transform: scale(0.8);
}

.copy-btn.copied .check-icon {
  opacity: 1;
  transform: scale(1);
  color: var(--success);
}

.copy-btn.copied {
  background: rgba(26, 127, 55, 0.1);
  border-color: var(--success);
}

/* Section Navigation Tabs */
.section-tabs {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 2px;
  padding: 0 14px;
  flex-wrap: wrap;
}

.tab-link {
  padding: 9px 13px;
  color: var(--fg-muted);
  text-decoration: none;
  border-radius: 0;
  font-size: 13px;
  /* Design `.detail-tab { font: var(--text-sm); font-weight: 600 }` (app.css:327) —
     tabs carry semibold weight, not 500. */
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.15s;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab-link:hover {
  color: var(--fg);
  background: transparent;
  text-decoration: none;
  border-bottom-color: transparent;
}

.tab-link:active,
.tab-link.active {
  color: var(--brand);
  background: transparent;
  border-bottom-color: var(--brand);
}

/* Smooth scrolling for the panel body */
html {
  scroll-behavior: smooth;
}
.panel-body {
  scroll-behavior: smooth;
}

/* Add scroll margin to sections so they don't hide under sticky tabs */
#section-header,
#section-validation, 
#section-parties,
#section-classification,
#section-line-items,
#section-payment-summary {
  scroll-margin-top: 60px;
}

/* Document Management section scroll margins */
#section-matches, #section-datev-export, #section-invoice-details,
#section-obligations, #contract-renewal,
#section-validation, #contract-parties,
#contract-scope, #contract-financial, #contract-legal,
#po-overview, #po-parties, #po-line-items,
#po-logistics, #po-commercial, #po-approval,
#grn-overview, #grn-references, #grn-parties,
#grn-line-items, #grn-logistics, #grn-inspection, #grn-signoff {
  scroll-margin-top: 60px;
}

/* Validation section: single collapsible containing banner, formal reqs,
   fraud signals, supplier/recipient verification in a 2x2 grid layout. */

/* Dissolve validation-overview so banner and verification-grid can be reordered */
#section-validation #validation-overview {
  display: contents;
}

/* Reorder within the section body (flex column): banner first, grid middle, verification last */
#section-validation > .section-body > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#section-validation .validation-issues-banner {
  order: 0;
}
.validation-details-grid {
  order: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Design `.vchk-grid { gap: 12px }` (app.css:641). */
  gap: 12px;
}
#section-validation .verification-grid {
  order: 2;
  /* Gap between the top row (Formal / Fraud) and the bottom row
     (Supplier / Recipient) of the 2×2. */
  margin-top: 16px;
}

/* Hide the inner collapsible headers — the outer "Validation" header is the only one */
.validation-details-grid .section-header-toggle {
  display: none;
}

/* Stretch all wrappers so both columns have equal height */
.validation-details-grid > *,
.validation-details-grid .collapsible-section,
.validation-details-grid .section-body,
.validation-details-grid .validation-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.validation-details-grid .validation-box {
  flex: 1;
}

/* Paid status in payment terms */
.paid-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.paid-badge {
  background: var(--success);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 0.75rem;
}
.paid-date {
  color: var(--fg-muted);
  font-size: 0.875rem;
}

/* Incoterm inclusion badges */
.incoterm-inclusions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.inclusion-badge {
  background: rgba(26, 127, 55, 0.15);
  color: var(--success);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
}

/* Delivery section */
.delivery-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.delivery-field {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.delivery-label {
  color: var(--fg-subtle);
  font-size: 0.85rem;
  min-width: 70px;
}
.delivery-value {
  color: var(--fg);
  white-space: pre-line;
}
.country-badge {
  background: var(--bg-muted);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--fg-muted);
}
.delivery-inline-value {
  color: var(--fg);
  font-size: 0.85rem;
  margin-right: 8px;
}
.incoterm-badge {
  background: rgba(10, 109, 189, 0.15);
  color: var(--brand);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.85rem;
}
.incoterm-place {
  color: var(--fg-muted);
  font-size: 0.85rem;
}

/* Tax compliance section */
#section-tax-compliance {
  margin-top: 24px;
}
.tax-compliance-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.issue-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  /* Warning status tint token (DESIGN_DECISIONS.md §2), was ad-hoc rgba. */
  background: var(--warning-tint);
  color: var(--warning-strong);
  border-radius: var(--r-xl);
  font-size: 11px;
  font-weight: 600;
}
.tax-compliance-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tax-key-facts {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.fact-chip {
  background: var(--bg-muted);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--fg);
}
.category-chip {
  background: rgba(130, 80, 223, 0.15);
  color: var(--accent-violet);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  text-transform: capitalize;
}
.tax-issues {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tax-issue-card {
  padding: 12px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.tax-issue-card.error {
  background: rgba(207, 34, 46, 0.08);
  border-color: var(--danger);
}
.tax-issue-card.warning {
  background: rgba(191, 135, 0, 0.08);
  border-color: var(--warning);
}
.tax-issue-card.info {
  background: rgba(10, 109, 189, 0.08);
  border-color: var(--brand);
}
.tax-issue-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.tax-severity-icon {
  display: flex;
  align-items: center;
}
.tax-severity-icon.error {
  color: var(--danger);
}
.tax-severity-icon.warning {
  color: var(--warning);
}
.tax-severity-icon.info {
  color: var(--brand);
}
.tax-issue-type {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
}
.tax-issue-message {
  color: var(--fg);
  font-size: 0.9rem;
  line-height: 1.5;
}
.tax-issue-suggestion {
  margin-top: 0.5rem;
  color: var(--fg-muted);
  font-size: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.tax-issue-suggestion iconify-icon {
  color: var(--warning);
  flex-shrink: 0;
  margin-top: 2px;
}
.tax-compliance-pass {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--success);
  font-size: 0.9rem;
}
.tax-compliance-pass iconify-icon {
  font-size: 16px;
}

/* Fraud flag cards in warning banner */
.fraud-flag-card {
  padding: 12px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.fraud-flag-card.critical {
  background: var(--danger-tint);
  border-color: var(--danger-border);
}
.fraud-flag-card.warning {
  background: var(--warning-tint);
  border-color: var(--warning-border);
}
.fraud-flag-card.info {
  background: var(--info-tint);
  border-color: var(--info-border);
}
.fraud-flag-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.fraud-severity-icon {
  display: flex;
  align-items: center;
}
.fraud-severity-icon.critical {
  color: var(--danger);
}
.fraud-severity-icon.warning {
  color: var(--warning);
}
.fraud-severity-icon.info {
  color: var(--brand);
}
.fraud-flag-type {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
}
.fraud-flag-message {
  color: var(--fg);
  font-size: 0.9rem;
  line-height: 1.5;
}
.fraud-flag-suggestion {
  margin-top: 0.5rem;
  color: var(--fg-muted);
  font-size: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.fraud-flag-suggestion iconify-icon {
  color: var(--warning);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Legal Assessment box (clause assessments, missing clauses, compliance, disclaimer) */
.legal-headline {
  color: var(--fg);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.25rem;
}
.legal-subsection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.legal-subsection-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
}
.legal-disclaimer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--fg-subtle);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.4;
}
.legal-count-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.legal-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: capitalize;
  border: 1px solid var(--border);
  color: var(--fg-muted);
}
.legal-chip.critical { color: var(--danger); border-color: var(--danger-border); background: var(--danger-tint); }
.legal-chip.warning  { color: var(--warning); border-color: var(--warning-border); background: var(--warning-tint); }
.legal-chip.info     { color: var(--info); border-color: var(--info-border); background: var(--info-tint); }
.legal-info-collapse > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--fg-muted);
  padding: 4px 0;
  list-style: none;
}
.legal-info-collapse > summary::-webkit-details-marker { display: none; }
.legal-info-collapse > summary::before { content: "▸ "; }
.legal-info-collapse[open] > summary::before { content: "▾ "; }
.legal-info-collapse[open] > summary { margin-bottom: 8px; }
.legal-info-collapse { display: flex; flex-direction: column; gap: 8px; }
/* High-risk overall badge — distinct red (vs amber 'needs attention') */
.check-status.high-risk { color: var(--danger); }
.check-status.high-risk iconify-icon { color: var(--danger); }

/* Contract two-level tabs (Overview | Legal, with legal sub-tabs) */
.contract-pane.hidden { display: none; }
.contract-l1-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 8px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.contract-l1-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 12px;
  color: var(--fg-muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s;
}
.contract-l1-tab:hover { color: var(--fg); border-bottom-color: var(--border-strong); }
.contract-l1-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.l1-risk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 6px;
}
.l1-risk-dot.high-risk { background: var(--danger); }
.l1-risk-dot.needs-attention { background: var(--warning); }
/* The Legal level-2 tabs reuse `.tab-link` for ALL visual styling (size, weight,
   colour, padding, underline). They render as <button> rather than the Overview
   row's <a>, so this resets only the UA button chrome that `.tab-link` doesn't —
   native appearance/background, and the non-inherited font-family/line-height —
   which would otherwise make them render in Arial on a grey button face. */
.legal-l2-tab {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  font-family: inherit;
  line-height: inherit;
  height: auto;
}
/* The Legal sub-panes mirror the Overview pane. Summary is a single header-less
   card (like the Overview hero); Clauses / Missing / Compliance are stacks of
   collapsible-section cards (icon + headline + body), so only Summary carries
   card chrome here — the others get their cards from collapsible-section. */
.legal-subpane { display: none; }
.legal-subpane.active { display: block; }
.legal-subpane[data-subpane="summary"].active {
  margin-top: 10px;
  padding: 10px 14px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
/* The first section card sits 10px below the sticky tab row (the generic
   .invoice-section:first-child resets that margin to 0). */
.legal-subpane > .collapsible-section:first-child { margin-top: 10px; }
/* Even spacing between finding cards inside a legal section. */
.legal-card-list { display: flex; flex-direction: column; gap: 8px; }

/* On-demand legal-analysis CTA (shown when no analysis exists) and the running
   state. The running state reuses the shared .spinner-* (no new keyframes). */
.legal-run-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 44px 24px;
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.legal-run-cta-title { font-size: 15px; font-weight: 600; color: var(--fg); }
.legal-run-cta-sub   { font-size: 13px; color: var(--fg-muted); max-width: 46ch; line-height: 1.5; }
.legal-run-cta .btn  { margin-top: 6px; }

/* Running state: the shared spinner with its single message cycling through the
   review phrases (driven by the inline script in legal-running-pane) — an
   activity indicator only; the run itself is one background LLM call. */
.legal-running { padding: 40px 24px; gap: 12px; }

/* Executive summary — the headline assessment as a structured callout at the
   top of the Legal > Summary tab: a neutral box (no verdict accent — the verdict
   is shown by the badge in the head) whose concerns/recommendations render as
   labelled bullet lists rather than one prose block. */
.legal-exec-summary {
  margin: 2px 0 12px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.legal-exec-summary-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.legal-exec-summary-icon { font-size: 16px; color: var(--fg-muted); }
.legal-exec-summary-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
}
.legal-exec-summary-body { color: var(--fg); font-size: 0.875rem; line-height: 1.55; }
.legal-exec-summary-text { margin: 0 0 8px; }
.legal-exec-summary-text:last-child { margin-bottom: 0; }
.legal-exec-summary-sublabel { font-weight: 600; color: var(--fg); margin: 10px 0 5px; }
.legal-exec-summary-list {
  margin: 0 0 8px;
  padding-left: 1.15rem;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.legal-exec-summary-list li { line-height: 1.5; }
.legal-exec-summary-list:last-child { margin-bottom: 0; }

/* VAT badge on line items */
.vat-badge {
  border-color: var(--border);
}
.vat-badge.valid {
  border-color: rgba(26, 127, 55, 0.5);
}
.vat-badge.warning {
  border-color: rgba(191, 135, 0, 0.5);
}
.vat-badge.invalid {
  border-color: rgba(207, 34, 46, 0.5);
}
.vat-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.vat-status-dot.valid {
  background: var(--success);
}
.vat-status-dot.warning {
  background: var(--warning);
}
.vat-status-dot.invalid {
  background: var(--danger);
}
.vat-rate {
  font-size: 0.85rem;
  color: var(--fg);
  font-family: var(--font-mono);
}
.vat-expected-rate {
  font-size: 0.75rem;
  color: var(--fg-muted);
  font-family: var(--font-mono);
}
.vat-expected-rate.mismatch {
  color: var(--warning);
}
.bu-code-chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--r-sm);
  background: rgba(10, 109, 189, 0.15);
  color: var(--brand);
}
.vat-suggestion {
  flex-basis: 100%;
  margin-top: 6px;
  color: var(--fg-muted);
  font-size: 0.8rem;
}

/* Delivery section scroll margin */
#section-delivery {
  scroll-margin-top: 60px;
  margin-top: 50px;
}

/* Tax compliance section scroll margin */
#section-tax-compliance {
  scroll-margin-top: 60px;
}

/* DATEV error modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.datev-error-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.datev-message {
  padding: 12px;
  border-radius: var(--r-lg);
  border-left: 3px solid;
}

.datev-message-error {
  background: rgba(207, 34, 46, 0.08);
  border-color: var(--danger);
}

.datev-message-warning {
  background: rgba(191, 135, 0, 0.08);
  border-color: var(--warning);
}

.datev-message-info {
  background: rgba(10, 109, 189, 0.08);
  border-color: var(--brand);
}

.message-type {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: inherit;
  opacity: 0.8;
}

.message-text {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}

/* DATEV Export Logs (inline section) — spacing comes from the shared
   .invoice-section rules; scroll-margin is set with the other sections above. */

.section-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
}

.datev-logs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.datev-log-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  border-left: 3px solid;
  background: var(--bg-subtle);
}

.datev-log-entry.information {
  border-color: var(--info-border);
  background: var(--info-tint);
}

.datev-log-entry.error {
  border-color: var(--danger-border);
  background: var(--danger-tint);
}

.datev-log-entry.warning {
  border-color: var(--warning-border);
  background: var(--warning-tint);
}

.datev-log-entry .log-message {
  color: var(--fg);
  font-size: 13px;
  line-height: 1.5;
}

.datev-log-entry .log-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--fg-muted);
}

.datev-log-entry .log-filename {
  font-family: var(--font-mono);
}

/* FVR Explanation Banner - for reasoning-only false positive explanations */
.fvr-explanation-banner {
  padding: 16px;
  border-radius: 8px;
  background: rgba(10, 109, 189, 0.08);
  border: 1px solid var(--brand);
  margin-bottom: 16px;
}

.fvr-explanation-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.fvr-explanation-header iconify-icon {
  color: var(--brand);
  font-size: 16px;
}

.fvr-explanation-title {
  flex: 1;
  font-weight: 500;
  color: var(--fg);
}

.fvr-dismiss-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--fg-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.fvr-dismiss-btn:hover {
  background: rgba(121, 115, 107, 0.2);
  color: var(--fg);
}

.fvr-explanation-body p {
  margin: 0 0 8px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.5;
}

.fvr-reasoning-list {
  margin: 12px 0 0;
  padding-left: 20px;
}

.fvr-reasoning-list li {
  margin-bottom: 8px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.5;
}

.fvr-reasoning-list li:last-child {
  margin-bottom: 0;
}

.fvr-reasoning-list li strong {
  color: var(--fg);
}

/* Price-per indicator (for bulk pricing like /100, /1000) */
.price-per-indicator {
  font-size: 11px;
  color: var(--fg-subtle);
  font-weight: normal;
}

/* Tenant Sections (for multi-tenant organizations) */
.tenant-section {
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden;
}

.tenant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.tenant-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}

.tenant-content {
  padding: 24px;
}

.tenant-content .master-data-section {
  margin-bottom: 20px;
}

.tenant-content .master-data-section:last-child {
  margin-bottom: 0;
}

/* Tenant Cell in Document Table */
.tenant-cell {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Form styles for Tenant Edit */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--fg);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--fg);
  font-size: 14px;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(10, 109, 189, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #6e7681;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* Tenants List */
.tenants-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tenant-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.tenant-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tenant-name {
  font-weight: 500;
  color: var(--fg);
}

/* Compact Tenant Cards (Master Data Page) */
.tenant-card-compact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.tenant-card-compact-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.tenant-card-compact-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}

.tenant-card-compact-subtitle {
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 2px;
  display: block;
}

.tenant-card-compact-ids {
  font-size: 12px;
  color: var(--fg-subtle);
  margin-top: 2px;
  display: block;
  font-family: var(--font-mono);
}

.tenant-edit-btn {
  flex-shrink: 0;
}

.tenant-card-compact-datasets {
  display: flex;
  gap: 12px;
}

/* Dataset Chips */
.dataset-chip {
  flex: 1;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px 12px;
  min-width: 0;
}

.dataset-chip.loaded {
  background: rgba(26, 127, 55, 0.1);
  border-color: rgba(26, 127, 55, 0.4);
}

.dataset-chip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dataset-label {
  font-weight: 500;
  font-size: 13px;
  color: var(--fg);
}

.dataset-status {
  font-size: 12px;
  color: var(--fg-muted);
}

.dataset-chip.loaded .dataset-status {
  color: var(--success);
}

.dataset-chip-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  transition: all 0.15s;
}

.btn-icon:hover {
  background: var(--bg-muted);
  border-color: var(--fg-faint);
  color: var(--fg);
}

.btn-icon-danger:hover {
  background: rgba(207, 34, 46, 0.15);
  border-color: var(--danger-strong);
  color: var(--danger);
}

.upload-inline {
  display: inline-flex;
  position: relative;
}

.chip-spinner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(28, 24, 19, 0.9);
  border-radius: 4px;
}

.chip-spinner.htmx-request {
  display: flex;
}

.spinner-small {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Dataset Modal */
.dataset-modal {
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  max-width: 95vw;
  max-height: 80vh;
  width: 1200px;
}

.dataset-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.modal-content {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
  color: var(--fg-muted);
  font-size: 20px;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--bg-muted);
  color: var(--fg);
}

.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-body .table-container {
  max-height: none;
}

/* Dataset Modal Table Enhancements */
.dataset-modal .modal-body {
  padding: 0;
  overflow: hidden;
}

.dataset-modal .table-container {
  overflow-y: auto;
  max-height: calc(80vh - 70px);
}

.dataset-modal .table {
  font-size: 13px;
}

.dataset-modal .table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

.dataset-modal .table th {
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.dataset-modal .table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--bg-muted);
  color: var(--fg);
}

.dataset-modal .table tbody tr:nth-child(even) {
  background: var(--bg-subtle);
}

.dataset-modal .table tbody tr:hover {
  background: var(--bg-subtle);
}

.modal-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal-header-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}

.modal-record-count {
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 400;
}

/* Toast Messages */
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--r-lg);
  font-size: 14px;
  font-weight: 500;
  /* Solid surface card (never see-through), hairline border on all sides, dark
     readable text; the level is conveyed by a leading colored icon (no colored
     edge accent — that pattern is not used elsewhere). Orcha light-mode tokens. */
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
}
.toast .toast-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.toast-success .toast-icon { color: var(--success); }
.toast-error   .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info    .toast-icon { color: var(--brand); }

/* Legacy toast class */
.error-toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(207, 34, 46, 0.1);
  border: 1px solid rgba(207, 34, 46, 0.4);
  border-radius: var(--r-lg);
  color: var(--danger);
  font-size: 14px;
}

/* Floating toast stack (top-right), populated by toasts.js from HX-Trigger events */
.toast-stack {
  position: fixed;
  top: 64px;          /* just below the page header / "Create Invoice" button */
  right: 24px;
  z-index: 11000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
}
.toast-stack > .toast-floating {
  pointer-events: auto;
  cursor: pointer;
  margin-bottom: 0;
  box-shadow: var(--shadow-popover);
  /* Enter: slide in from the right. Exit (.is-dismissing): slide back out right. */
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.toast-stack > .toast-floating.is-shown {
  transform: translateX(0);
  opacity: 1;
}
.toast-stack > .toast-floating.is-dismissing {
  transform: translateX(calc(100% + 32px));
  opacity: 0;
}

.error-toast .error-list {
  margin: 0;
  padding-left: 16px;
}

.error-toast .error-list li {
  margin-bottom: 2px;
}


/* ==========================================================================
   Notification Channels
   ========================================================================== */

/* Grid layout for notification subsections */
.notifications-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Notifications grid layout */
.notifications-management {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .notifications-management {
    grid-template-columns: 1fr;
  }
}

/* Subsection styling */
.notifications-subsection {
  padding: 16px;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  /* Match the vertical rhythm of the connection cards (.master-data-section). */
  margin-bottom: 16px;
}
.notifications-subsection h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}
.subsection-description {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: var(--fg-muted);
}

/* Channel cards list */
.notification-channels-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

/* Individual channel card */
.notification-channel-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.notification-channel-card.channel-active {
  border-color: var(--success-border);
  background: var(--success-tint);
}
.notification-channel-card.channel-pending {
  border-color: var(--warning-border);
  background: var(--warning-tint);
}
.notification-channel-card.channel-disabled {
  border-color: var(--border);
}
.notification-channel-card.channel-disabled .channel-info {
  opacity: 0.7;
}

/* Channel icon */
.notification-channel-card .channel-icon {
  font-size: 20px;
  flex-shrink: 0;
  color: var(--fg-muted);
}
.notification-channel-card.channel-active .channel-icon {
  color: var(--success);
}
.notification-channel-card.channel-pending .channel-icon {
  color: var(--warning);
}

/* Channel info */
.notification-channel-card .channel-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.channel-address,
.channel-workspace {
  font-weight: 500;
  color: var(--fg);
}
.channel-target {
  color: var(--fg-muted);
  font-size: 13px;
}
.channel-hash {
  color: var(--fg-subtle);
}
.channel-warning {
  color: var(--warning);
  font-size: 13px;
  font-style: italic;
}

/* Channel actions */
.notification-channel-card .channel-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Status badges for notifications */
.badge-warning {
  background: var(--warning-tint);
  color: var(--warning-strong);
  border: 1px solid var(--warning-border);
}
.badge-success {
  background: var(--success-tint);
  color: var(--success-strong);
  border: 1px solid var(--success-border);
}
.badge-secondary {
  background: var(--bg-muted);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}

/* Add channel form (collapsible) */
.add-channel-form {
  margin-top: 12px;
}
.add-channel-form summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  list-style: none;
}
.add-channel-form summary:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.add-channel-form summary::-webkit-details-marker {
  display: none;
}
.add-channel-form[open] summary {
  margin-bottom: 12px;
}
.add-channel-form form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.add-channel-form .form-row {
  display: flex;
  gap: 8px;
}
.add-channel-form .form-control {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg);
}
.add-channel-form .form-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.form-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 4px;
  border-radius: var(--r-md);
  font-size: 13px;
  background: var(--danger-tint);
  border: 1px solid var(--danger-border);
  color: var(--danger-strong);
}
.form-error iconify-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* Add channel button (unified style for Slack, Teams, etc.) */
.btn-add-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-add-channel iconify-icon {
  font-size: 18px;
}

/* Slack channel picker page */
.slack-channel-picker {
  max-width: 480px;
  margin: 40px auto;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.slack-channel-picker h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: var(--fg);
}
.slack-channel-picker > p {
  margin: 0 0 24px 0;
  color: var(--fg-muted);
}
.slack-channel-picker .form-group {
  margin-bottom: 24px;
}
.slack-channel-picker label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}
.slack-channel-picker select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--fg);
}
.slack-channel-picker select:focus {
  outline: none;
  border-color: var(--brand);
}
.slack-channel-picker .form-actions {
  display: flex;
  gap: 12px;
}
.slack-channel-picker .alert {
  padding: 16px;
  border-radius: var(--r-lg);
  margin-bottom: 16px;
}
.slack-channel-picker .alert-warning {
  background: rgba(191, 135, 0, 0.15);
  border: 1px solid rgba(191, 135, 0, 0.3);
  color: var(--warning);
}
.slack-channel-picker .alert p {
  margin: 0 0 8px 0;
}
.slack-channel-picker .alert p:last-child {
  margin: 0;
}
.slack-channel-picker code {
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  font-family: monospace;
}

/* Channel select modal */
.channel-select-modal {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--fg);
}
.channel-select-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
}
.channel-select-modal h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}
.channel-select-modal > p {
  margin: 0 0 16px 0;
  color: var(--fg-muted);
}
.channel-select-modal select {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--fg);
}
.channel-select-modal .modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.channel-select-modal .loading {
  padding: 16px;
  text-align: center;
  color: var(--fg-muted);
  font-style: italic;
}
.channel-select-modal .no-channels-warning {
  margin-bottom: 16px;
}
.channel-select-modal .no-channels-warning .alert {
  margin-bottom: 12px;
}
.channel-select-modal .no-channels-warning ol {
  margin: 8px 0 0 20px;
  padding: 0;
}
.channel-select-modal .no-channels-warning li {
  margin-bottom: 4px;
}

/* QA Dataset dialog */
.qa-dataset-dialog {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--fg);
  max-width: 440px;
  width: 100%;
}
.qa-dataset-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}
.qa-dataset-dialog h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}
.qa-dataset-dialog > form > p {
  margin: 0 0 16px 0;
  color: var(--fg-muted);
}
.qa-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.qa-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: background 0.15s;
}
.qa-radio:hover {
  background: var(--bg-muted);
}
.qa-radio input[type="radio"] {
  accent-color: var(--brand);
}
.qa-radio-label {
  font-size: 14px;
}
.qa-notes-field {
  margin-bottom: 16px;
}
.qa-notes-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--fg-muted);
}
.qa-dataset-dialog .modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 4px;
}
.qa-notes-field textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--fg);
  resize: vertical;
  font-family: inherit;
}

/* Error page for verification */
.verify-error-page {
  max-width: 480px;
  margin: 80px auto;
  padding: 32px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.verify-error-page h1 {
  margin: 0 0 12px 0;
  font-size: 24px;
  color: var(--danger);
}
.verify-error-page p {
  margin: 0;
  color: var(--fg-muted);
}

/* Document Management - Type Icons */
.doc-type-cell {
  width: 48px;
  text-align: center;
}

.doc-type-icon {
  font-size: 20px;
  color: var(--fg-muted);
}

/* Document Management - Detail page additions */

/* Field grid inside a section card — FLAT per DESIGN_DECISIONS §1 (no nested box);
   the parent .invoice-section card already provides the border + padding, like the
   AP detail's flat metadata grid. */
.detail-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.parties-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Design `.parties-grid { gap: 28px }` (app.css:360) — wider gutter is the
     separator between flat party blocks instead of box borders. */
  gap: 28px;
}

/* Party blocks (invoice Issuer/Recipient; contract/PO/GRN Principal/Counterparty)
   are FLAT white sub-content per DESIGN_DECISIONS §1 — no nested border/box. The
   28px grid gap is the only separator between blocks, matching the AP detail. */
.parties-grid > div {
  background: transparent;
  padding: 0;
}
/* The block heading is an uppercase micro-label (mirrors `.party-card-title`) —
   no underline divider. */
.parties-grid > div h4 {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 7px;
}

/* Supplier Verification Box
   ========================================================================== */

/* Verification sub-cards — plain hairline border (status is carried by the
   header badge, not a coloured left edge). */
.supplier-verification-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* Design `.vchk-card { overflow: hidden }` with no card padding — the head's
     bottom border runs edge-to-edge (app.css:643-668). Padding lives in the head
     (`.vchk-head 12px 16px`) and the rows (`.vchk-rows 2px 16px 8px`). */
  padding: 0;
  overflow: hidden;
  margin-top: 16px;
}

/* Verification grid: supplier + recipient side by side */
.verification-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Design `.vchk-grid { gap: 12px }` (app.css:641). */
  gap: 12px;
  /* Sits below the validation-details-grid in the same flex column (gap 8px);
     drop the extra 16px so the rhythm stays on the 4px grid. */
  margin-top: 0;
}
.verification-grid .supplier-verification-box {
  margin-top: 0;
}
@media (max-width: 900px) {
  .verification-grid {
    grid-template-columns: 1fr;
  }
}

.sv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Design `.vchk-head { padding: 12px 16px; border-bottom: 1px solid
     var(--border-subtle) }` (app.css:649-652) — edge-to-edge divider since the box
     itself has no padding. Was margin-bottom 12px + inset divider. */
  margin-bottom: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.subsection {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.subsection h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: 8px;
}

/* Type badge colors — neutral blue for all document types */
.badge-invoice,
.badge-contract,
.badge-purchase-order,
.badge-goods-received-note {
  background: var(--info-tint);
  color: var(--azure-700);
}

.badge-info {
  background: var(--border);
  color: var(--fg);
}

/* Notifications Page */

/* Workflows page: white page (no sand canvas), one white card per category. */
.content:has(.notifications-table) {
  background: var(--surface);
}
.notifications-table {
  background: transparent;
  /* No top margin: the first card sits at the .content padding (24px), matching
     the Settings page's spacing between the first connection card and the top. */
  margin-top: 0;
  /* .content is a flex column; keep this from being shrunk so .content scrolls. */
  flex-shrink: 0;
}

/* Each flow (Accounts Payable / Receivable / General) is its own white card,
   separated by spacing rather than living in one hairline-divided block. */
.notifications-flow {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 12px;
}
.notifications-flow-title {
  margin: 0;
  padding: 16px 16px 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
}

/* Row — uses <details> for expand/collapse */
.notification-row {
  border-bottom: 1px solid var(--border);
}
.notification-row:last-child {
  border-bottom: none;
}

.notification-row.disabled > summary {
  color: var(--fg-faint);
}
.notification-row.disabled .notification-icon,
.notification-row.disabled .notification-row-label,
.notification-row.disabled .notification-channel-summary,
.notification-row.disabled .notification-expand-icon {
  opacity: 0.5;
}
.notification-row.disabled .toggle-switch {
  pointer-events: none;
}

/* Summary (collapsed row header) */
.notification-row > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.notification-row > summary::-webkit-details-marker { display: none; }
.notification-row > summary::marker { display: none; content: ""; }
.notification-row > summary:hover {
  background: var(--bg-subtle);
}

.notification-icon {
  font-size: 18px;
  color: var(--fg-muted);
  flex-shrink: 0;
}

.notification-row-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}

/* Channel summary (right side of collapsed row) */
.notification-channel-summary {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.notification-channel-muted {
  font-size: 12px;
  color: var(--fg-subtle);
}
.notification-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--fg-muted);
}

/* Expand chevron */
.notification-expand-icon {
  transition: transform 0.15s ease;
  color: var(--fg-subtle);
  font-size: 16px;
  flex-shrink: 0;
}
.notification-row[open] .notification-expand-icon {
  transform: rotate(180deg);
}

/* Expanded detail area */
.notification-detail {
  padding: 0 16px 16px 56px;
  border-top: 1px solid var(--border-subtle);
}
.notification-detail-desc {
  font-size: 12px;
  color: var(--fg-muted);
  margin: 12px 0 0 0;
}

/* Recipient checkbox rows (expanded detail) */
.notification-channel-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
}
.notification-channel-checkbox input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
.notification-channel-checkbox.channel-pending-unverified {
  color: var(--fg-muted);
}
.channel-status-badge {
  color: var(--fg-subtle);
  font-size: 12px;
}

/* Inline add-email form (expanded detail) */
.add-email-inline {
  margin-top: 12px;
}
.add-email-inline .form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.add-email-inline input[type="text"] {
  flex: 0 1 260px;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--fg);
}
.add-email-inline input[type="text"]:focus {
  outline: none;
  border-color: var(--border-strong);
}

/* Custom tooltip for disabled notification toggles */
.toggle-wrapper {
  position: relative;
  flex-shrink: 0;
}

.toggle-wrapper.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bg-hover);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
  z-index: 10;
}

.toggle-wrapper.has-tooltip:hover::after {
  opacity: 1;
}

/* Shared channel list styles (used in expanded detail) */
.notification-channel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
}

.notification-channel-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--fg);
}

.notification-channel-remove {
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 0 0 4px;
  line-height: 1;
}

.notification-channel-remove:hover {
  color: var(--danger);
}

.notification-add-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
}

.notification-add-channel select {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: 13px;
}

.notification-add-channel .btn {
  padding: 6px 12px;
  font-size: 13px;
}

.notification-default-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  color: var(--fg-muted);
  font-size: 12px;
}

/* Contract lifecycle badges */
.badge-contract-active { background: var(--success-tint); color: var(--success-strong); }
.badge-contract-expiring-soon { background: var(--warning-tint); color: var(--warning-strong); }
.badge-contract-expired { background: var(--danger-tint); color: var(--danger-strong); }
.badge-contract-pending { background: var(--bg-muted); color: var(--fg-muted); }

/* Contract sub-type badge */
.badge-contract-subtype { background: var(--info-tint); color: var(--azure-700); }

/* Recurring contract badge */
.badge-recurring { background: var(--info-tint); color: var(--info); }

/* Alert banner */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  font-size: 14px;
}
/* On the full-bleed document list (no content gutter) the banner would sit flush
   to the edges — give it equal breathing room on all four sides. */
.documents-page > .alert-banner {
  margin: 16px;
}
.alert-banner iconify-icon { font-size: 18px; flex-shrink: 0; }
.alert-banner span { flex: 1; }
.alert-banner a {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  white-space: nowrap;
}
.alert-warning {
  background: rgba(191, 135, 0, 0.1);
  border: 1px solid rgba(191, 135, 0, 0.3);
  color: var(--warning);
}

/* Key Dates Timeline (horizontal) — flat stepper: hairline track, small dots,
   no heavy circle widget (design replaced the loud icon-circles). */
.timeline-h {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding: 14px 4px 6px;
  background: transparent;
  border: none;
  border-radius: 0;
}
.timeline-h-segment {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}
.timeline-h-event {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 90px;
  text-align: center;
}
.timeline-h-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
}
/* flat dots, not icon-circles */
.timeline-h-dot iconify-icon {
  display: none;
}
.timeline-h-event.urgent .timeline-h-dot {
  border-color: var(--warning);
  background: var(--warning);
  color: transparent;
}
.timeline-h-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  white-space: nowrap;
}
.timeline-h-event.urgent .timeline-h-label { color: var(--warning); font-weight: 700; }
.timeline-h-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-subtle);
  white-space: nowrap;
}
.timeline-h-event.urgent .timeline-h-date { color: var(--warning); }
.timeline-h-delta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4px;
  min-width: 60px;
  padding-top: 5px;
}
.timeline-h-line {
  width: 100%;
  height: 2px;
  background: var(--border-strong);
  margin-top: 2px;
}
.timeline-h-delta-text {
  font-size: 10px;
  color: var(--fg-subtle);
  white-space: nowrap;
  margin-top: 4px;
}

/* Status filter tabs */
.status-filter-tabs {
  display: flex;
  gap: 4px;
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}

/* Contract Hero Card */
.hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 16px;
}

/* Sub-content inside the white hero card is FLAT WHITE delineated by a hairline
   divider grid (depth model: no nested sand boxes). */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--border-subtle);
}

.hero-metric {
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 4px;
  text-align: left;
}
.hero-metric:nth-child(odd) {
  border-right: 1px solid var(--border-subtle);
  padding-right: 16px;
}
.hero-metric:nth-child(even) {
  padding-left: 16px;
}

.hero-metric-label {
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.hero-metric-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
}

.hero-metric-detail {
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* No top border here — the .hero-metric row's bottom border is the single divider
   between the metrics and the timeline (avoids a stacked double hairline). */
.hero-timeline {
  padding-top: 8px;
}

/* Obligations */
.obligations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.obligation-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bg-muted);
}

.obligation-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.obligation-item:first-child {
  padding-top: 0;
}

.obligation-priority {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-muted);
  min-width: 20px;
}

.obligation-content {
  flex: 1;
}

.obligation-description {
  font-size: 14px;
  color: var(--fg);
  display: block;
  margin-bottom: 4px;
}

.obligation-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--fg-muted);
}

.obligation-party,
.obligation-deadline {
  display: flex;
  align-items: center;
}

/* Compliance regulation expandable rows */
.compliance-reg {
  border-top: 1px solid var(--bg-muted);
}

.compliance-reg:first-child {
  border-top: none;
}

.compliance-reg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  user-select: none;
}

.compliance-reg-header:hover {
  background: rgba(28, 24, 19, 0.03);
}

.compliance-chevron {
  margin-left: auto;
  transition: transform 0.2s;
}

.compliance-reg.expanded .compliance-chevron {
  transform: rotate(180deg);
}

.compliance-reg-details {
  display: none;
  padding: 4px 0 8px 4px;
  border-top: 1px solid var(--bg-muted);
}

.compliance-reg.expanded .compliance-reg-details {
  display: block;
}

.compliance-findings {
  list-style: none;
  padding: 4px 0;
  margin: 0;
}

.compliance-findings li.compliance-finding {
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.5;
}

.compliance-finding .finding-headline {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 2px;
}

.compliance-finding .finding-text {
  color: var(--fg-muted);
}

/* Empty state for not-yet-analyzed */
.empty-state {
  color: var(--fg-muted);
  font-style: italic;
  padding: 12px;
  text-align: center;
}

.sv-title {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Design `.vchk-title { font-family: sans; font-weight: 600; font-size: 13px;
     color: var(--fg); letter-spacing: .01em }` (app.css:653) — a functional card
     title in dark fg, Title Case (NOT an uppercase micro-label). Was uppercase
     muted with 0.5px tracking. */
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0.01em;
}
.rating-green .sv-title iconify-icon { color: var(--success); }
.rating-yellow .sv-title iconify-icon { color: var(--warning); }
.rating-red .sv-title iconify-icon { color: var(--danger); }

.sv-checks {
  /* Design `.vchk-rows { padding: 2px 16px 8px }` (app.css:658) — rows sit inside
     the (now unpadded) card with their own side padding so the head divider above
     spans full width. */
  padding: 2px 16px 8px;
  margin-bottom: 0;
}

/* "Show reasoning" footer inside a verification card — the card itself is now
   unpadded, so the foot carries the design's `.vchk-foot { padding: 4px 16px 14px }`
   (app.css:669). Scoped so the shared `.reasoning-container` elsewhere is untouched. */
.supplier-verification-box > .reasoning-container {
  margin-top: 0;
  padding: 4px 16px 14px;
}

.sv-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin: 12px 0;
  background: var(--success-tint);
  border: 1px solid var(--success-border);
  /* Controls scale: design `--r-md: 5px` (app.css:26). */
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--success-strong);
}
.sv-verified-badge iconify-icon {
  font-size: 16px;
}

/* Document Matches */
.matches-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Matches — one category row per document type (DESIGN matches container).
   Coloured icon tile + title ("Contract · 1 match") + comma-separated clickable
   document numbers + the strongest-link confidence badge. */
.match-group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.matches-list > .match-group:last-child {
  border-bottom: none;
}
.match-group-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.match-group-body {
  flex: 1;
  min-width: 0;
}
.match-group-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
  line-height: 1.3;
}
.match-group-count {
  font-weight: 400;
  color: var(--fg-muted);
}
.match-group-docs {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.4;
}
.match-doc-link {
  color: var(--fg-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.match-doc-link:hover {
  color: var(--brand);
  text-decoration: underline;
}
.match-group-more {
  color: var(--fg-faint);
  font-style: italic;
}
.match-group-conf {
  flex-shrink: 0;
}
.match-group-docs.match-no-result {
  font-family: var(--font-sans);
  font-style: italic;
}
.match-group-empty {
  opacity: 0.6;
}

/* Per-type icon-tile colours — design-system document-type tokens */
.match-group-invoice  .match-group-icon { background: var(--doctype-invoice-tint);  color: var(--doctype-invoice-fg); }
.match-group-contract .match-group-icon { background: var(--doctype-contract-tint); color: var(--doctype-contract-fg); }
.match-group-purchase .match-group-icon { background: var(--doctype-purchase-tint); color: var(--doctype-purchase-fg); }
.match-group-goods    .match-group-icon { background: var(--doctype-goods-tint);    color: var(--doctype-goods-fg); }
.match-group-other    .match-group-icon { background: var(--doctype-other-tint);    color: var(--doctype-other-fg); }

/* Reconciliation Issues */
.reconciliation-issues {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.reconciliation-issue {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px 14px;
}
.reconciliation-issue.severity-error {
  border-left: 3px solid var(--danger);
}
.reconciliation-issue.severity-warning {
  border-left: 3px solid var(--warning);
}

.reconciliation-issue .issue-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.reconciliation-issue .issue-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reconciliation-issue .issue-summary {
  font-size: 13px;
  color: var(--fg);
}
.reconciliation-issue .issue-documents {
  font-size: 12px;
  color: var(--fg-muted);
}
.reconciliation-issue .issue-documents a {
  color: var(--brand);
  text-decoration: none;
}
.reconciliation-issue .issue-documents a:hover {
  text-decoration: underline;
}
.reconciliation-issue .current-doc {
  font-style: italic;
}

/* Expandable field comparison details */
.reconciliation-issue .issue-details {
  margin-top: 8px;
}
.reconciliation-issue .issue-details summary {
  font-size: 12px;
  color: var(--fg-muted);
  cursor: pointer;
  user-select: none;
}
.reconciliation-issue .issue-details summary:hover {
  color: var(--fg);
}
.reconciliation-issue .details-table {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 12px;
}
.reconciliation-issue .details-table th {
  text-align: left;
  color: var(--fg-muted);
  font-weight: 500;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.reconciliation-issue .details-table td {
  padding: 4px 8px;
  color: var(--fg);
  border-bottom: 1px solid var(--bg-muted);
}

/* ── Login page ── */

/* Remove padding from .content wrapper on login page */
.content:has(.login-split) {
  padding: 0;
  overflow: hidden;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes border-rotate {
  0% { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.login-split {
  display: flex;
  height: 100vh;
}

.login-marketing {
  flex: 0 0 60%;
  background: var(--surface-ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3.5rem;
  position: relative;
  overflow: hidden;
}

.login-marketing .orb-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.login-marketing-content {
  position: relative;
  z-index: 2;
}

.login-marketing h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 2.5rem;
}

.gradient-text {
  background: linear-gradient(270deg, var(--brand), #00b4d8, var(--brand), #0053a6);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 6s ease infinite;
}

/* Tip card with animated rotating border glow */
.login-tip {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  max-width: 28rem;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.login-tip::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 0.75rem;
  padding: 1px;
  background: conic-gradient(
    from var(--border-angle),
    rgba(255, 255, 255, 0.08) 0%,
    rgba(10, 109, 189, 0.6) 12%,
    rgba(0, 180, 216, 0.4) 20%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.08) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: border-rotate 4s linear infinite;
  pointer-events: none;
}

.login-tip-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: 0.5rem;
}

.login-tip-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-faint);
}

.login-form {
  flex: 0 0 40%;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 2.5rem;
}

.login-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.login-card .login-logo {
  max-width: 140px;
  margin-bottom: 2rem;
}

.login-card h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.login-card .login-subtitle {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  margin-bottom: 2rem;
}

.login-error {
  background: var(--danger-tint);
  border: 1px solid var(--danger);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--danger);
  font-size: 0.875rem;
  line-height: 1.5;
}

.login-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--fg);
  font-weight: 500;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.login-btn:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

.login-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.login-website-link {
  display: block;
  margin-top: auto;
  padding-top: 2rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--fg-faint);
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-website-link:hover {
  color: var(--brand);
  text-decoration: none;
}

@media (max-width: 768px) {
  .login-marketing {
    display: none;
  }
  .login-form {
    flex: 1;
  }
}


/* ── Error pages ── */

.app-container:has(.error-page) {
  display: block;
}

.content:has(.error-page) {
  padding: 0;
  padding-bottom: 0;
  overflow: hidden;
  margin: 0;
  margin-left: 0;
  max-width: none;
  width: 100%;
}

.error-page {
  position: fixed;
  inset: 0;
  background: var(--surface-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 9999;
}

.error-page .orb-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.error-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 32rem;
  padding: 2rem;
}

.error-code {
  font-size: 8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
  color: #fff;
}

.error-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--border);
  margin-bottom: 0.75rem;
}

.error-message {
  font-size: 1rem;
  color: var(--fg-faint);
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Tip card — reuses the login-tip rotating border animation */
.error-tip {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid transparent;
  background-clip: padding-box;
  text-align: left;
}

.error-tip::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 0.75rem;
  padding: 1px;
  background: conic-gradient(
    from var(--border-angle),
    rgba(255, 255, 255, 0.08) 0%,
    rgba(10, 109, 189, 0.6) 12%,
    rgba(0, 180, 216, 0.4) 20%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.08) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: border-rotate 4s linear infinite;
  pointer-events: none;
}

.error-tip-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: 0.5rem;
}

.error-tip-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-faint);
}

@media (max-width: 768px) {
  .error-code {
    font-size: 5rem;
  }
  .error-content {
    padding: 1.5rem;
  }
}


/* ==========================================================================
   Accounts Receivable — Editor & List
   ========================================================================== */


/* AR PDF preview — the bar itself reuses the AP .pdf-tabs-bar chrome.
   The single Preview tab is a status indicator, not a switchable tab. */
.ar-editor .pdf-tab-item {
  cursor: default;
}

/* AR PDF preview — double-buffer iframes for flicker-free updates */
.ar-pdf-active {
  z-index: 2;
  visibility: visible;
}
.ar-pdf-buffer {
  z-index: 1;
  visibility: hidden;
}

/* AR editor — compact form density to match AP detail view */
.ar-editor .form-group {
  margin-bottom: 10px;
}
.ar-editor .form-group label {
  margin-bottom: 4px;
  font-size: 12px;
}
.ar-editor .form-group input,
.ar-editor .form-group textarea,
.ar-editor .form-group select {
  padding: 6px 10px;
  font-size: 13px;
}
.ar-editor .invoice-section {
  /* Match the AP data panel's card rhythm (was 16/12). */
  margin-top: 10px;
}
/* Inherit the AP .section-header (14px + bottom divider); add flex so the
   leading icon aligns, matching the AP collapsible-section headers. */
.ar-editor .section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ar-editor .section-header iconify-icon {
  font-size: 16px;
  color: var(--fg-muted);
}
/* AR editor section anchors clear the sticky section-tabs when jumped to. */
#ar-sec-details, #ar-sec-recipient, #ar-sec-items,
#ar-sec-totals, #ar-sec-notes {
  scroll-margin-top: 56px;
}
/* Item 6 — totals summary rendered in the AP Payment-Summary value-row style. */
.ar-totals-summary {
  margin-top: 14px;
}
/* Item 4 — tighten the AR line-items table toward the AP dense rhythm. */
.ar-editor .line-items-table { font-size: 12px; }
.ar-editor .line-items-table th { font-size: 11px; }
.ar-editor .line-items-table td { padding-top: 4px; padding-bottom: 4px; }
/* Item 5 — recipient name is the prominent, full-width field (like AP party-card-name). */
.ar-editor .ar-recipient-grid .form-group:first-child { grid-column: 1 / -1; }
.ar-editor .ar-recipient-grid .form-group:first-child input {
  font-size: 15px;
  font-weight: 600;
}
.ar-editor .invoice-metadata-box {
  padding: 12px;
  margin-bottom: 10px;
}
.ar-editor .invoice-header-grid {
  gap: 10px;
}
.ar-editor .party-card {
  padding: 12px;
}
.ar-editor .form-actions {
  margin-top: 16px;
  padding-top: 16px;
}

/* AR recipient — 2-column grid for name + email, address below */
.ar-recipient-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Inline inputs for line items table (compact, no form-group spacing) */
.ar-line-input {
  padding: 6px 8px;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.ar-line-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(10, 109, 189, 0.1);
}

.ar-line-input::placeholder {
  color: var(--fg-faint);
}

.ar-line-input-full {
  width: 100%;
}

.ar-line-input-number {
  width: 100%;
  text-align: right;
  -moz-appearance: textfield;
}

.ar-line-input-number::-webkit-inner-spin-button,
.ar-line-input-number::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Line item editable table overrides for line-items-table */
.line-items-table .ar-line-item td {
  padding: 4px 4px;
  vertical-align: middle;
}

/* Drag handle & drag states */
.ar-drag-handle {
  width: 24px;
  cursor: grab;
  color: var(--fg-faint);
  text-align: center;
  padding: 0 2px !important;
  user-select: none;
}
.ar-drag-handle:active {
  cursor: grabbing;
}
.ar-drag-handle iconify-icon {
  font-size: 14px;
}
.ar-line-item:hover .ar-drag-handle {
  color: var(--fg-muted);
}
.ar-dragging {
  opacity: 0.4;
  background: var(--bg-muted) !important;
}
.ar-line-item {
  transition: opacity 0.15s;
}

.ar-line-amount {
  text-align: right;
  color: var(--fg-muted);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  padding-right: 8px !important;
  white-space: nowrap;
}

.ar-btn-remove {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 18px;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  line-height: 1;
}

.ar-btn-remove:hover {
  background: var(--danger-tint);
}

/* Totals discount row */
.ar-totals-row {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 400px;
}

.ar-totals-row .field-label {
  flex-shrink: 0;
}

.ar-totals-row .ar-line-input {
  max-width: 160px;
}

/* AR status badges (list page) — same tint/strong/border recipe and
   min-width as the AP unified document status badges. */
.ar-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  min-width: 112px;
}
.ar-badge-draft {
  background: var(--bg-muted);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.ar-badge-sending {
  background: var(--warning-tint);
  color: var(--warning-strong);
  border: 1px solid var(--warning-border);
}
.ar-badge-sent {
  background: var(--info-tint);
  color: var(--info);
  border: 1px solid var(--info-border);
}
.ar-badge-paid {
  background: var(--success-tint);
  color: var(--success-strong);
  border: 1px solid var(--success-border);
}


/* ==========================================================================
   AR editor — Sending card (advisory approvals + send status, merged)
   ========================================================================== */
.ar-send-panel .section-header .header-chip {
  margin-left: auto;
}

/* Advisory approvals sub-block */
.ar-subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.ar-subhead-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.ar-subhead-hint {
  font-size: 11px;
  color: var(--fg-faint);
}
.ar-subhead .ar-count-chip {
  margin-left: auto;
}
.ar-count-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-muted);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.ar-count-chip.is-complete {
  background: var(--success-tint);
  color: var(--success-strong);
  border-color: var(--success-border);
}
.ar-approvers-notice {
  font-size: 12px;
  color: var(--fg-muted);
  margin: 8px 0 0;
}

.ar-approvers-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.ar-approvers-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bg-muted);
}
.ar-approvers-list li:last-child {
  border-bottom: none;
}
/* The viewer's own row — the one they can act on — bleeds a faint tint to the
   card edges (the card pads 14px) so it reads as "this is yours". */
.ar-approvers-list li.is-you {
  background: var(--azure-50);
  margin: 0 -14px;
  padding-left: 14px;
  padding-right: 14px;
  border-bottom-color: transparent;
}
.approver-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  background: var(--azure-50);
  color: var(--brand);
  border: 1px solid var(--info-border);
}
.approver-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.approver-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.approver-meta {
  font-size: 11px;
  color: var(--fg-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.you-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--brand);
  border: 1px solid var(--info-border);
  vertical-align: 1px;
  margin-left: 6px;
}
.approver-trailing {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.approver-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.approver-state.is-pending {
  background: var(--bg-muted);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.approver-state.is-approved {
  background: var(--success-tint);
  color: var(--success-strong);
  border: 1px solid var(--success-border);
}
.approver-state iconify-icon {
  font-size: 12px;
}
.ar-approvers-empty {
  font-size: 13px;
  color: var(--fg-muted);
  padding: 6px 0 0;
}
.ar-approvers-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.add-approver-form {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
  max-width: 420px;
}
.add-approver-form select {
  flex: 1;
  min-width: 0;
  padding: 6px 32px 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2357524b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 11px center;
  color: var(--fg);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}

/* Divider between advisory approvals and the send action */
.ar-issue-divider {
  border-top: 1px solid var(--border);
  margin: 13px 0;
}

/* Send action + notes */
.ar-send-action {
  margin-top: 13px;
}
.ar-send-error {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--danger-strong);
  background: var(--danger-tint);
  border: 1px solid var(--danger-border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  margin-bottom: 10px;
}
.ar-send-error iconify-icon {
  font-size: 16px;
  flex: none;
}

/* Pre-send EN-16931 blockers — why the Send action is disabled */
.ar-send-blockers {
  margin-top: 13px;
  font-size: 13px;
  color: var(--danger-strong);
  background: var(--danger-tint);
  border: 1px solid var(--danger-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.ar-send-blockers-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.ar-send-blockers-head iconify-icon {
  font-size: 16px;
  flex: none;
}
.ar-send-blockers ul {
  margin: 7px 0 0;
  padding-left: 28px;
  list-style: disc;
}
.ar-send-blockers li {
  margin-top: 2px;
}
.ar-send-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  gap: 8px;
  align-items: center;
}
.ar-send-note iconify-icon {
  font-size: 16px;
  color: var(--fg-faint);
  flex: none;
}

/* Per-step send outcomes (email / datev) */
.ar-send-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ar-send-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bg-muted);
  font-size: 13px;
}
.ar-send-steps li:last-child {
  border-bottom: none;
}
.ar-step-icon {
  flex: none;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.ar-step-icon.ok { color: var(--success-strong); }
.ar-step-icon.run { color: var(--info); }
.ar-step-icon.fail { color: var(--danger); }
.ar-step-icon.idle { color: var(--fg-faint); }
.ar-step-name {
  font-weight: 600;
  color: var(--fg);
}
.ar-step-status {
  margin-left: auto;
  font-size: 12px;
  color: var(--fg-muted);
}
.ar-step-status.run { color: var(--info); }
.ar-step-status.fail { color: var(--danger); }

/* Quiet historical footnote on a locked invoice */
.ar-issue-footer {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--bg-muted);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--fg-faint);
}
.ar-issue-footer iconify-icon {
  font-size: 14px;
}

/* View Transitions — htmx animates the Sending card via hx-swap "... transition:true":
   the card resizes while its contents crossfade and the status badge morphs in place. */
::view-transition-group(ar-send-card) {
  animation-duration: 0.34s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none !important; }
}


/* AR list table — reuse document list table styles */
#ar-invoice-list .table {
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}
#ar-invoice-list thead {
  background: var(--surface);
}
#ar-invoice-list thead th {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
#ar-invoice-list tbody tr:last-child td {
  border-bottom: none;
}


/* ============================================================
 * Inline editable values — hover to reveal, click to edit.
 * Critical rule: every state must be pixel-identical at rest.
 * `outline` and `box-shadow` live outside the box model; they
 * never shift layout. No borders, no padding, no margin on
 * .editable-value itself — it inherits everything from parent.
 * ============================================================ */

.editable-value {
  cursor: pointer;
  outline: 1px solid transparent;
  outline-offset: 3px;
  background-color: transparent;
  border-radius: var(--r-sm);
  transition: outline-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
  box-shadow: inset 0 -1px 0 rgba(10, 109, 189, 0.3);
}

/* Once editing, inputs/textareas get a text caret; selects stay pointer. */
.editable-value.is-editing input,
.editable-value.is-editing textarea {
  cursor: text;
}

.editable-value:hover {
  outline-color: rgba(10, 109, 189, 0.35);
  background-color: rgba(10, 109, 189, 0.08);
}

.editable-value.is-editing {
  outline-color: var(--brand);
  background-color: rgba(10, 109, 189, 0.12);
  box-shadow: 0 0 0 3px rgba(10, 109, 189, 0.1);
}

.editable-value.is-saving {
  animation: orcha-edit-flash 400ms ease-out;
}

@keyframes orcha-edit-flash {
  0% {
    outline-color: var(--success);
    background-color: rgba(26, 127, 55, 0.20);
  }
  100% {
    outline-color: transparent;
    background-color: transparent;
  }
}

/* Inputs within an editable-value inherit typography exactly.
   The input is placed inside the original child element (e.g.
   span.field-value) so it inherits that element's font styling.
   `all: unset` strips browser chrome; `inherit` restores typography. */
.editable-value input,
.editable-value textarea,
.editable-value select {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  color: inherit;
  text-align: inherit;
  white-space: inherit;
  -webkit-user-select: text;
  user-select: text;
}

.editable-value textarea {
  display: block;
  resize: none;
  overflow: hidden;
  min-height: 1em;
}

/* Currency fields split amount + suffix; only .amount becomes editable.
   `.currency-wrapper` is a child of `.editable-value`, not the same element. */
/* Amount treatment: dark mono number + lighter currency suffix, so the figure
   reads first and the unit recedes (consistent across the app). */
.currency-suffix {
  color: var(--fg-faint);
  font-weight: 400;
}
.editable-value .currency-suffix {
  pointer-events: none;
}

/* During currency editing, the wrapper becomes a flex row so the
   amount input and currency select share the available width. */
.editable-value.is-editing .currency-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}
.editable-value.is-editing .currency-wrapper input.amount {
  flex: 1;
  min-width: 0;         /* allow shrinking inside flex */
  width: auto !important;
}
.editable-value .currency-select {
  all: unset;
  flex-shrink: 0;
  font: inherit;
  font-size: 12px;
  color: var(--fg-muted);
  cursor: pointer;
  color-scheme: dark;
  background: rgba(10, 109, 189, 0.10);
  border-radius: var(--r-sm);
  padding: 2px 4px;
}

/* Line-items currency edit (Unit Price / Amount): the amount input + currency
   dropdown are wider than the dense column, so editing pops a compact in-panel
   overlay. Fixes the dropdown clipped on the right (Amount), overlapping the
   next column (Unit Price), and the number being cut. */
.line-items tbody td.num { position: relative; }
.line-items tbody td.num:has(.editable-value[data-field-type="currency"].is-editing) {
  z-index: 30;
}
.line-items .editable-value[data-field-type="currency"].is-editing {
  position: absolute !important;
  top: 50% !important;
  left: auto;
  transform: translateY(-50%);
  width: 170px !important;
  max-width: none !important;
  background: var(--surface);
  outline: none;
  box-shadow: 0 0 0 1.5px var(--brand), 0 6px 18px rgba(10, 16, 28, 0.16);
  border-radius: var(--r-sm);
  padding: 5px 8px;
}
/* Unit Price (and any non-rightmost currency cell) grows rightward; the Amount
   column is rightmost, so it grows leftward and never runs off the panel edge. */
.line-items td.num:not(.amount) .editable-value[data-field-type="currency"].is-editing { left: 2px; }
.line-items td.amount .editable-value[data-field-type="currency"].is-editing { right: 2px; }
/* Share the overlay width between the amount input and the currency select, and
   left-align so the start of the number is never cut. */
.line-items .editable-value[data-field-type="currency"].is-editing .li-eur {
  display: flex;
  align-items: center;
  gap: 6px;
}
.line-items .editable-value[data-field-type="currency"].is-editing .li-eur input.amount {
  flex: 1;
  min-width: 0;
  width: auto !important;
  text-align: left;
}

/* Enum fields: the select overlays the badge, invisible but clickable. */
.editable-value.enum-wrapper {
  position: relative;
}
.editable-value.enum-wrapper > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  /* Force dark theme for the native <option> popup. */
  color-scheme: dark;
  background-color: var(--bg-canvas);
  color: var(--fg);
}


.editable-value.is-human-edited {
  box-shadow: inset 0 -1px 0 rgba(26, 127, 55, 0.6);
}

/* Reset-all button: disabled state */
.btn#reset-all-edits:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.edit-error-banner {
  display: block;
  margin-top: 4px;
  padding: 6px 8px;
  background-color: rgba(207, 34, 46, 0.1);
  border: 1px solid rgba(207, 34, 46, 0.4);
  border-radius: 4px;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.4;
}

.line-items-sortable .drag-handle {
  cursor: grab;
  color: var(--fg-subtle);
  padding: 0 8px;
}

.line-items-sortable .drag-handle:active {
  cursor: grabbing;
}

/* Diagnostic section state styling */

.diagnostic-section {
  position: relative;
  transition: opacity 0.2s ease;
}

.diagnostic-section.is-recomputing,
.diagnostic-section.is-stale,
.supplier-verification-box.is-recomputing,
.supplier-verification-box.is-stale {
  opacity: 0.55;
}

.diagnostic-section.is-failed,
.supplier-verification-box.is-failed {
  opacity: 0.85;
}

.diagnostic-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  margin-left: 8px;
  vertical-align: middle;
}

.diagnostic-badge.is-recomputing {
  background: var(--brand-tint);
  color: var(--brand);
  border: 1px solid var(--info-border);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.diagnostic-badge.is-recomputing .spinner-small {
  width: 11px;
  height: 11px;
  border-width: 1.5px;
  border-top-color: var(--brand);
}

.diagnostic-badge.is-stale {
  background: var(--warning-tint);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}

.diagnostic-badge.is-failed {
  background: var(--danger-tint);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

/* --- Recomputing banner (inline in nav bar) --- */
.stale-edits-banner {
  display: none;
  align-items: center;
  background: var(--brand-tint);
  color: var(--brand);
  padding: 6px 14px;
  font-size: 13px;
  border: 1px solid var(--info-border);
  border-radius: var(--r-lg);
}

.stale-edits-banner.is-visible {
  display: inline-flex;
}

/* --- Inline "recomputing" label in validation section header --- */
.stale-validation-label {
  display: none;
  font-size: 12px;
  color: var(--brand);
  margin-left: 8px;
  font-weight: 400;
}
.stale-validation-label .spinner-small {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.detail-container.is-recomputing-validation .stale-validation-label {
  display: inline;
}

/* --- Gray out all validation containers while recomputing --- */
.detail-container.is-recomputing-validation .validation-content,
.detail-container.is-recomputing-validation .verification-grid,
.detail-container.is-recomputing-validation .validation-issues-banner {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
/* Override per-section diagnostic opacity when the parent is already grayed */
.detail-container.is-recomputing-validation .diagnostic-section.is-stale,
.detail-container.is-recomputing-validation .diagnostic-section.is-recomputing,
.detail-container.is-recomputing-validation .supplier-verification-box.is-stale,
.detail-container.is-recomputing-validation .supplier-verification-box.is-recomputing {
  opacity: 1;
}

.diagnostic-badge.is-never-run {
  background: var(--bg-muted);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}

/* ============================================================
 * Master data picker (GL accounts / cost centers)
 *
 * Uses the HTML5 popover API (`popover="manual"`) so the panel
 * renders in the top layer. That's the only way to escape the
 * `contain: paint` that `content-visibility: auto` applies to
 * `.line-item-card` — neither `position: absolute` nor `fixed`
 * break out of a paint-contained ancestor.
 *
 * Scoped to `[popover]` so the at-rest `<span
 * class="editable-value master-data-picker">` is untouched.
 * JS sets `top`/`left` inline after `showPopover()` based on
 * the anchor's bounding rect.
 * ============================================================ */

/* Reserve the vertical space of the value text while the popover is
   open. The at-rest trigger span (e.g. "4000 Travel Expense") is
   swapped out for the picker div, whose popover top-layer rendering
   contributes nothing to flow — the .meta-value span would otherwise
   collapse to zero height and the fields below would jump up. */
.meta-value:has(> .master-data-picker[popover]),
.account-pill:has(> .master-data-picker[popover]) {
  display: inline-block;
  min-height: 1.5em;
}

.master-data-picker[popover] {
  /* UA popover default is margin:auto;inset:0 (centered in viewport).
     Override so our JS-supplied top/left win. */
  inset: auto;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  width: 320px;
  max-height: 320px;
  overflow: hidden;
}

.master-data-picker[popover]:popover-open {
  display: flex;
  flex-direction: column;
}

.master-data-picker-input {
  padding: 8px 12px;
  background: var(--bg-canvas);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.master-data-picker-input::placeholder {
  color: var(--fg-subtle);
}

.master-data-picker-results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
}

.master-data-picker-option {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: transparent;
  border: none;
  text-align: left;
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s;
}

.master-data-picker-option:hover,
.master-data-picker-option.is-active {
  background: rgba(10, 109, 189, 0.1);
  color: var(--fg);
}

.master-data-picker-option[hidden] {
  display: none;
}

.master-data-picker-empty,
.master-data-picker-no-matches {
  padding: 12px;
  color: var(--fg-muted);
  font-size: 13px;
  text-align: center;
}

/* ===========================================================================
   Document data panel — type-adaptive middle + trust overlays (Phase 1/2)
   coverage view, interpretation callouts, per-fact source chips.
   =========================================================================== */

/* Source chip: a small, non-interactive "p. N" page label sitting inline after
   a fact (display-only; navigation was intentionally dropped). */
.source-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg-muted);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Trust overlays group (coverage + callouts), rendered after the
   Validation & Compliance section. */
.trust-overlays {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

/* Coverage view: the found / not-found expected-terms checklist. Card matches
   the validation-box look; found = green check, not-found = muted minus (the
   icon + text make it color-independent — absence reads as thoroughness, not
   an error). */
.coverage-view {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
}
.coverage-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bg-muted);
}
.coverage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coverage-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.coverage-item iconify-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.coverage-item.found iconify-icon {
  color: var(--success);
}
.coverage-item.not-found iconify-icon {
  color: var(--fg-faint);
}
.coverage-term {
  color: var(--fg);
  flex: 1;
}
.coverage-status {
  font-size: 12px;
  font-weight: 500;
}
.coverage-item.found .coverage-status {
  color: var(--success);
}
.coverage-item.not-found .coverage-status {
  color: var(--fg-muted);
}

/* Interpretation callout: a plain-language note on a nuanced/risky term.
   Severity drives the left-border + tint (warning amber, info neutral). */
.panel-callouts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.panel-callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 6px;
  padding: 12px 16px;
}
.panel-callout.callout-warning {
  border-left-color: var(--warning);
  background: var(--warning-tint);
}
.panel-callout.callout-info {
  border-left-color: var(--border-strong);
  background: var(--bg-subtle);
}
.callout-text {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}

/* Inline table fields (e.g. payment schedule, penalties) span the full width of
   the type-adaptive middle grid instead of being squeezed into one column. */
.detail-fields .field-table {
  grid-column: 1 / -1;
}

/* Section header: keep the leading icon and the title text on the same vertical
   center (the icon box is taller than the 14px text, so collapse the text's
   line-box and center both as flex items). */
.section-header-toggle > span {
  line-height: 1;
}
.section-header-toggle > span > iconify-icon {
  flex: 0 0 auto;
}

/* AR list Status pill: combined approval-progress + lifecycle state */
.ar-pill { display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.ar-pill-none, .ar-pill-draft { background:#f1f5f9; color:#64748b; }
.ar-pill-partial { background:#fef3c7; color:#92400e; }
.ar-pill-full    { background:#dcfce7; color:#166534; }
.ar-pill-sent    { background:#dbeafe; color:#1e40af; }
.ar-pill-paid    { background:#ccfbf1; color:#0f766e; }
.ar-pill-approved-check { opacity:0.8; }

/* Active-tenant selector (sidebar pills) — distinct from the org .tenant-switcher */
.active-tenant-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.active-tenant-selector form { flex: 1; margin: 0; }
.tenant-pill {
  width: 100%;
  padding: 4px 8px;
  font: var(--text-sm);                /* --text-sm is a font shorthand, not a size */
  font-weight: 600;
  text-align: center;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.tenant-pill:hover { color: var(--fg); background: var(--bg-hover); }
.tenant-pill.active {
  color: var(--accent-violet);
  background: var(--accent-violet-tint);
  border-color: var(--accent-violet);
}

/* Date pill custom-range footer */
.date-range-custom {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.date-range-custom-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
}
.date-range-custom-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}
.date-range-custom-inputs input[type="date"] {
  flex: 1;
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--fg-muted);
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  height: 32px;
  color-scheme: light;
}
.date-range-custom-inputs input[type="date"]:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.date-range-custom .filter-dropdown-apply {
  border-top: none;
  border-radius: var(--r-md);
}
.ar-cb-cell { width: 36px; text-align: center; }
.ar-cb-placeholder { color: var(--fg-muted); opacity: .4; }
#ar-bulk-actions { display: none; align-items: center; gap: 12px; padding: 8px 12px;
  margin-bottom: 8px; background: var(--bg-subtle); border-radius: 8px; }
#ar-bulk-actions.visible { display: flex; }
#ar-selected-count { font-weight: 600; }