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

:root {
  --sidebar-width: 300px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #c9d1d9;
  background: #0d1117;
}
a { color: #58a6ff; 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: #161b22;
  border-right: 1px solid #30363d;
  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 {
  padding: 20px 16px 10px 16px;
  font-size: 20px;
  font-weight: 600;
  color: #c9d1d9;
  border-bottom: 1px solid #30363d;
}
.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: 12px;
  padding: 10px 16px;
  color: #c9d1d9;
  text-decoration: none;
  transition: background 0.15s;
}
.nav-items li a:hover {
  background: #21262d;
  text-decoration: none;
}
.nav-items li.active a {
  background: #21262d;
  border-left: 2px solid #58a6ff;
  padding-left: 14px;
}
.nav-items li.disabled span {
  color: #6e7681;
  cursor: not-allowed;
}
.nav-items li.disabled span::after {
  content: 'Coming soon';
  font-size: 10px;
  background: #30363d;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
}

/* Collapsible nav parent with submenu */
.nav-parent .nav-parent-trigger {
  justify-content: flex-start;
}
.nav-parent .nav-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
  color: #484f58;
}
.nav-parent.open .nav-chevron {
  transform: rotate(180deg);
}
.nav-sub {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.nav-parent.open .nav-sub {
  max-height: 200px;
}
.nav-sub li a {
  padding: 8px 16px 8px 44px;
  font-size: 13px;
  color: #8b949e;
}
.nav-sub li a:hover {
  color: #c9d1d9;
}
.nav-sub li.active a {
  color: #58a6ff;
  background: #21262d;
  border-left: 2px solid #58a6ff;
  padding-left: 42px;
}

/* Sidebar user section */
.sidebar-user {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid #30363d;
}
.user-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.user-trigger:hover {
  background: #21262d;
}
.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: #30363d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b949e;
  flex-shrink: 0;
}
.user-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #c9d1d9;
  font-size: 14px;
}
.user-chevron {
  color: #8b949e;
  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: #c9d1d9;
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
  text-align: left;
  transition: background 0.15s;
}
.user-menu-item:hover {
  background: #21262d;
}

/* Tenant switcher (super admin) */
.tenant-switcher {
  padding: 8px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #30363d;
}
.tenant-select {
  width: 100%;
  padding: 8px 12px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-size: 13px;
  cursor: pointer;
}
.tenant-select:hover {
  border-color: #58a6ff;
}
.tenant-select:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}

/* Super admin warning banner */
.super-admin-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(210, 153, 34, 0.15);
  border: 1px solid rgba(210, 153, 34, 0.4);
  border-radius: 6px;
  color: #d29922;
  font-size: 14px;
}
.super-admin-banner iconify-icon {
  font-size: 18px;
}
.super-admin-banner strong {
  color: #f0c674;
}

/* Super admin mode page border */
body.super-admin-mode .sidebar {
  border-left: 3px solid rgba(210, 153, 34, 0.6);
  border-top: 3px solid rgba(210, 153, 34, 0.6);
}
body.super-admin-mode .content {
  border-top: 3px solid rgba(210, 153, 34, 0.6);
  border-right: 3px solid rgba(210, 153, 34, 0.6);
}
body.super-admin-mode .app-footer {
  border-top: 3px solid rgba(210, 153, 34, 0.6);
}

/* Logo header (unauthenticated pages) */
.logo-header {
  width: 100%;
  background: #161b22;
  border-bottom: 1px solid #30363d;
}
.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: #0d1117;
  padding: 24px;
  padding-bottom: 60px; /* Space for fixed footer */
  margin-left: var(--sidebar-width);
  transition: margin-left 0.2s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Dark theme scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #484f58 #0d1117;
}
.content::-webkit-scrollbar {
  width: 8px;
}
.content::-webkit-scrollbar-track {
  background: #0d1117;
}
.content::-webkit-scrollbar-thumb {
  background: #484f58;
  border-radius: 4px;
}
.content::-webkit-scrollbar-thumb:hover {
  background: #6e7681;
}

/* Logo variants — full shown by default, icon hidden */
.logo-icon { display: none; }
.logo-full { width: 120px; height: auto; }

/* 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;
    padding-bottom: 12px;
    overflow: visible;
  }

  /* Logo: hide full, show icon */
  .logo {
    display: flex;
    justify-content: center;
    padding: 16px 0 10px;
  }
  .logo-full { display: none; }
  .logo-icon {
    display: block;
    width: 28px;
    height: 28px;
  }

  /* Nav items: hide labels, center icons */
  .nav-items li a {
    justify-content: center;
    padding: 12px 0;
    gap: 0;
  }
  .nav-items li a span { display: none; }
  .nav-items li a iconify-icon { font-size: 20px; }
  .nav-items li.active a {
    padding-left: 0;
    border-left: 2px solid #58a6ff;
  }

  /* User section: avatar only */
  .sidebar-user { padding: 8px 0; }
  .user-trigger {
    justify-content: center;
    padding: 8px;
  }
  .user-name,
  .user-chevron { display: none; }
  .user-menu { display: none; }

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

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

/* Document type filter tabs */
.document-type-filter {
  display: flex;
  gap: 4px;
  margin-right: 12px;
  padding-right: 12px;
  border-right: 1px solid #30363d;
}
.filter-tab {
  padding: 6px 14px;
  color: #8b949e;
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.filter-tab:hover {
  color: #c9d1d9;
  background: #161b22;
  text-decoration: none;
}
.filter-tab.active {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.1);
  border-color: rgba(88, 166, 255, 0.3);
}

/* 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: #6e7681;
}
.coming-soon-placeholder p {
  margin: 0;
  font-size: 16px;
}

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

/* Search input */
.search-container {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input {
  width: 300px;
  padding: 8px 12px 8px 36px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input::placeholder {
  color: #6e7681;
}
.search-input:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}
.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: 10px;
  color: #6e7681;
  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: 6px 10px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
  height: 32px;
  color-scheme: dark;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.date-range-filter input[type="date"]:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}
.date-range-filter input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

/* Filter dropdown */
.filter-dropdown {
  position: relative;
}
.filter-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  box-sizing: border-box;
  height: 32px;
}
.filter-dropdown-trigger:hover {
  border-color: #58a6ff;
  color: #c9d1d9;
}
.filter-dropdown-trigger.has-selection {
  color: #58a6ff;
  border-color: rgba(88, 166, 255, 0.3);
  background: rgba(88, 166, 255, 0.05);
}
.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: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  flex-direction: column;
}
.filter-dropdown.open .filter-dropdown-panel {
  display: flex;
}
.filter-dropdown-search {
  padding: 8px 12px;
  background: #0d1117;
  border: none;
  border-bottom: 1px solid #30363d;
  color: #c9d1d9;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.filter-dropdown-search::placeholder {
  color: #6e7681;
}
.filter-dropdown-options {
  overflow-y: auto;
  max-height: 300px;
  padding: 4px 0;
}
.filter-dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #c9d1d9;
  transition: background 0.1s;
}
.filter-dropdown-option:hover {
  background: rgba(88, 166, 255, 0.08);
}
.filter-dropdown-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid #484f58;
  border-radius: 3px;
  background: #0d1117;
  margin: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.filter-dropdown-option input[type="checkbox"]:hover {
  border-color: #58a6ff;
}
.filter-dropdown-option input[type="checkbox"]:checked {
  background: #58a6ff;
  border-color: #58a6ff;
}
.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: #58a6ff;
  border: none;
  border-top: 1px solid #30363d;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.filter-dropdown-apply:hover {
  background: #79b8ff;
}
.filter-dropdown-option .option-number {
  font-weight: 500;
  min-width: 50px;
  color: #e6edf3;
}
.filter-dropdown-option .option-name {
  color: #8b949e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-clear {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8b949e;
  font-size: 13px;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.filter-clear:hover {
  color: #c9d1d9;
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

/* Cards */
.card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
}
.card-header {
  padding: 16px;
  border-bottom: 1px solid #30363d;
  font-weight: 600;
}
.card-body {
  padding: 16px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}
.btn-primary {
  background: #1f6feb;
  color: white;
}
.btn-primary:hover {
  background: #388bfd;
}
.btn-secondary {
  background: transparent;
  color: #c9d1d9;
  border: 1px solid #30363d;
}
.btn-secondary:hover {
  background: #21262d;
  text-decoration: none;
}
.btn-danger {
  background: #da3633;
  color: white;
}
.btn-danger:hover {
  background: #f85149;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.badge-in-progress {
  background: #d29922;
  color: #0d1117;
}
.badge-completed {
  background: #238636;
  color: white;
}
.badge-failed {
  background: #da3633;
  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(255, 255, 255, 0.6);
  border-radius: 3px;
  line-height: 1.2;
}
.badge-validation-pass {
  background: rgba(35, 134, 54, 0.15);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.3);
}
.badge-validation-warning {
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, 0.3);
}
.badge-validation-error {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.3);
}
/* DATEV export status badges */
.badge-datev-pending {
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-datev-success {
  background: rgba(35, 134, 54, 0.15);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-datev-failed {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.badge-datev-partial {
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, 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;
}
.match-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 4px;
}
.match-count-invoice { background: rgba(56, 139, 253, 0.15); color: #58a6ff; }
.match-count-contract { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
.match-count-purchase-order { background: rgba(137, 87, 229, 0.15); color: #a371f7; }
.match-count-goods-received-note { background: rgba(227, 179, 65, 0.15); color: #e3b341; }
.match-count-none { background: rgba(139, 148, 158, 0.08); color: #484f58; }
.match-pending { color: #8b949e; }

/* 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: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
}
.badge-status-processing {
  background: #30363d;
  color: #8b949e;
}
.badge-status-failed {
  background: #2a1a1a;
  color: #f87171;
}
.badge-status-not-exported {
  background: #b62324;
  color: #fff;
}
.badge-status-processed {
  background: #1f6feb;
  color: #fff;
}
.badge-status-processed iconify-icon.spin {
  font-size: 12px;
}
.badge-status-exported {
  background: #238636;
  color: #fff;
}
.badge-status-exported .flag-check {
  font-size: 14px;
}
.badge-status-exported-warning {
  background: #238636;
  color: #fff;
}
.badge-status-exported-warning .flag-warning {
  font-size: 14px;
}
.badge-status-has-warnings {
  background: #1a3d6d;
  color: #8dc4f8;
}
.badge-status-has-warnings .flag-warning {
  font-size: 14px;
}
.badge-status-notice {
  background: #3d2d00;
  color: #f0b429;
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #30363d;
  color: #8b949e;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid #21262d;
}
.table tbody tr:hover {
  background: #161b22;
}
.table tbody tr[hx-get] {
  cursor: pointer;
}
.table tbody tr.highlighted {
  animation: highlight-fade 4s ease-out;
}
@keyframes highlight-fade {
  0%, 50% {
    background: rgba(88, 166, 255, 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; }

/* Bulk actions bar */
#bulk-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #1c2128;
  border: 1px solid #30363d;
  border-radius: 8px;
  margin-bottom: 8px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.15s ease, max-height 0.15s ease, margin 0.15s ease, padding 0.15s ease;
  padding: 0 16px;
  margin-bottom: 0;
}
#bulk-actions.visible {
  opacity: 1;
  max-height: 60px;
  padding: 8px 16px;
  margin-bottom: 8px;
}
#bulk-actions #selected-count {
  font-size: 13px;
  color: #8b949e;
  font-weight: 500;
}
#bulk-actions .btn {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}
#bulk-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#bulk-actions .btn-primary {
  background: #388bfd;
  color: #fff;
}
#bulk-actions .btn-primary:hover:not(:disabled) {
  background: #58a6ff;
}
#bulk-actions .btn-secondary {
  background: transparent;
  color: #8b949e;
  border: 1px solid #30363d;
}
#bulk-actions .btn-secondary:hover {
  background: #21262d;
  color: #c9d1d9;
}

/* Checkbox column */
.checkbox-cell {
  width: 40px;
  padding: 0 8px !important;
  text-align: center;
}
.doc-checkbox {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #388bfd;
}
.doc-checkbox:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
#select-all {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #388bfd;
}
/* Visual indicator for partial selection state (data-indeterminate set by server) */
#select-all[data-indeterminate="true"] {
  opacity: 0.7;
}

/* 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;
  border: 1px solid #30363d;
  border-radius: 8px;
}

/* 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: #1c2128;
}
#document-list thead th,
#doc-mgmt-list thead th {
  background: #1c2128;
  border-bottom: 1px solid #30363d;
}
#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: 36px;
  height: 36px;
  border: 1px solid #30363d;
  border-radius: 6px;
  background: #0d1117;
  color: #c9d1d9;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.nav-arrow:hover {
  background: #161b22;
  border-color: #58a6ff;
  color: #58a6ff;
  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: #8b949e;
}
.empty-state p {
  margin: 8px 0;
}

/* File upload */
.file-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #0078d4;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s;
}
.file-upload-label:hover {
  background: #106ebe;
}

/* Split upload button */
.upload-wrapper {
  position: relative;
  display: inline-flex;
}
.split-btn {
  display: inline-flex;
  align-items: stretch;
  border-radius: 6px;
  overflow: hidden;
}
.split-btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #0078d4;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s;
}
.split-btn-upload:hover {
  background: #106ebe;
}
.split-btn-status {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #1c2128;
  color: #c9d1d9;
  border: none;
  border-left: 1px solid #30363d;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.split-btn-status.visible {
  display: inline-flex;
}
.split-btn-status:hover {
  background: #21262d;
}
.status-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #58a6ff;
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.status-count.all-done {
  background: #238636;
  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: #161b22;
  border: 1px solid #30363d;
  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: #1c2128;
  border-top: 1px solid #30363d;
  border-left: 1px solid #30363d;
  transform: rotate(45deg);
  z-index: 1;
}
.popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #30363d;
  background: #1c2128;
  font-size: 13px;
  font-weight: 600;
  color: #e6edf3;
}
.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: #8b949e;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.pop-close:hover {
  color: #e6edf3;
  background: #21262d;
}
.popover-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.popover-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #1c2128;
  border-top: 1px solid #30363d;
  font-size: 12px;
  color: #8b949e;
}
.popover-summary.all-done {
  color: #3fb950;
}

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

/* Popover file items */
.pop-file {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  color: #e6edf3;
  text-decoration: none;
  transition: background 0.1s;
  border-bottom: 1px solid #21262d;
}
.pop-file:last-child {
  border-bottom: none;
}
.pop-file:hover {
  background: #1c2128;
  text-decoration: none;
}
.pop-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
  font-size: 16px;
  margin-top: 1px;
}
.pop-file-icon.uploading {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}
.pop-file-icon.classifying {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.pop-file-icon.processing {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}
.pop-file-icon.completed {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
}
.pop-file-icon.failed {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
}
.pop-file-icon.skipped {
  background: rgba(139, 148, 158, 0.15);
  color: #8b949e;
}
.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: #8b949e;
  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;
}
.type-invoice {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}
.type-contract {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.type-financial-notice {
  background: rgba(234, 118, 39, 0.15);
  color: #ea7627;
}
.type-purchase-order {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}
.type-goods-received-note {
  background: rgba(45, 186, 162, 0.15);
  color: #2dbaa2;
}
.type-other {
  background: rgba(139, 148, 158, 0.15);
  color: #8b949e;
}

/* Activity bar */
.pop-activity {
  height: 2px;
  margin-top: 6px;
  border-radius: 1px;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.4s ease;
  background: #21262d;
}
.pop-activity-bar {
  height: 100%;
  width: 40%;
  border-radius: 1px;
  animation: activity-slide 1.2s ease-in-out infinite;
}
.pop-activity-bar.uploading {
  background: #3b82f6;
}
.pop-activity-bar.classifying {
  background: #f59e0b;
}
.pop-activity-bar.processing {
  background: #a855f7;
}
@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;
}

/* 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 #30363d;
  border-top-color: #58a6ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.spinner-message {
  color: #8b949e;
}

/* Detail page layout */
.content:has(.detail-container) {
  overflow: hidden;
  padding-bottom: 0;
}
.detail-container {
  display: flex;
  gap: 16px;
  height: calc(100vh - 120px);
}
.pdf-panel {
  flex: 1;
  min-width: 300px;
  max-width: 100%;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  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) */
.pdf-tabs-bar {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid #30363d;
  background: #0d1117;
}
.pdf-tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: #8b949e;
  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: #c9d1d9;
  background: #161b22;
}
.pdf-tab-item.active {
  color: #c9d1d9;
  border-bottom-color: #58a6ff;
}
.pdf-tab-item iconify-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.pdf-tab-item.active iconify-icon {
  color: #58a6ff;
}
.pdf-tab-item .pdf-tab-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdf-tab-item .copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.pdf-tab-item .copy-btn:hover {
  background: #21262d;
  color: #c9d1d9;
  border-color: #3d444d;
}
.pdf-tab-item .copy-btn.copied {
  color: #3fb950;
  border-color: #238636;
}

/* Excel Preview Banner */
.excel-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1a2332 0%, #1e2a3a 100%);
  border-bottom: 1px solid #30363d;
  color: #8b949e;
}
.excel-preview-banner .banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.excel-preview-banner iconify-icon {
  color: #3fb950;
}
.excel-preview-banner .banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.excel-preview-banner .banner-title {
  font-weight: 500;
  color: #c9d1d9;
}
.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;
  padding: 8px 14px;
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  color: #8b949e;
  font-size: 13px;
}
.filename-bar iconify-icon {
  color: #58a6ff;
  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: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: #c9d1d9;
}
.filename-bar .copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.filename-bar .copy-btn:hover {
  background: #21262d;
  color: #c9d1d9;
  border-color: #3d444d;
}
.filename-bar .copy-btn.copied {
  color: #3fb950;
  border-color: #238636;
}

.data-panel {
  flex: 1;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  overflow-y: auto;
}
.panel-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
}
.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: #c9d1d9;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  margin-left: 8px;
}
.panel-supplier {
  color: #8b949e;
  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 {
  padding: 16px;
}

/* Data list */
.data-list {
  display: grid;
  gap: 12px;
}
.data-list dt {
  font-size: 12px;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.data-list dd {
  margin: 4px 0 0 0;
  color: #c9d1d9;
}

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

/* Invoice detail components */
.invoice-section {
  margin-top: 32px;
  margin-bottom: 24px;
}
.invoice-section:first-child {
  margin-top: 0;
}
.invoice-section:last-child {
  margin-bottom: 0;
}
#section-invoice-details,
#section-validation,
#section-parties,
#section-cost-center,
#section-line-items,
#section-payment-summary {
  margin-top: 24px;
}

#section-invoice-details {
  margin-top: 0;
}
.section-header {
  font-size: 14px;
  font-weight: 600;
  color: #c9d1d9;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #21262d;
}

/* Invoice metadata box */
.invoice-metadata-box {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}

.invoice-metadata-box-title {
  font-size: 13px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #21262d;
}

/* Invoice header grid */
.invoice-header-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .invoice-header-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Parties grid */
.parties-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 700px) {
  .parties-grid {
    grid-template-columns: 1fr;
  }
}

/* Party card */
.party-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 16px;
}
.party-card-title {
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.party-card-name-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.party-card-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #c9d1d9;
}
.party-card-address-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
.party-card-address {
  flex: 1;
  color: #8b949e;
  white-space: pre-line;
  line-height: 1.4;
}
.party-card-field {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
}
.party-card-field:first-of-type {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #21262d;
}
.party-card-field-label {
  color: #6e7681;
  min-width: 70px;
}
.party-card-field-value-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.party-card-field-value {
  flex: 1;
  color: #c9d1d9;
}

/* Field styling */
.field-group {
  margin-bottom: 12px;
}
.field-group:last-child {
  margin-bottom: 0;
}
.field-label {
  font-size: 11px;
  font-weight: 500;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.field-value {
  color: #c9d1d9;
  font-size: 14px;
}
.field-value.monospace {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
.field-value.na {
  color: #6e7681;
  font-style: italic;
}
.field-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Copy button */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 4px;
  color: #8b949e;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.copy-btn:hover {
  background: #21262d;
  color: #c9d1d9;
}
.copy-btn.copied {
  background: #238636;
  border-color: #238636;
  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;
}
.confidence-badge.high {
  background: rgba(35, 134, 54, 0.2);
  color: #3fb950;
}
.confidence-badge.medium {
  background: rgba(210, 153, 34, 0.2);
  color: #d29922;
}
.confidence-badge.low {
  background: rgba(218, 54, 51, 0.2);
  color: #f85149;
}

/* Line items table */
.line-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.line-items-table th {
  text-align: left;
  padding: 10px 12px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  color: #8b949e;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.line-items-table th.numeric {
  text-align: right;
}
.line-items-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #21262d;
  color: #c9d1d9;
}
.line-items-table td.numeric {
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
.line-items-table tbody tr:nth-child(even) {
  background: rgba(22, 27, 34, 0.5);
}
.line-items-table tbody tr:hover {
  background: #161b22;
}
.line-items-table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 45px;
}

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

/* Financial summary */
.financial-summary {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 16px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.summary-row-label {
  color: #8b949e;
}
.summary-row-value {
  color: #c9d1d9;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
.summary-row-value.discount {
  color: #3fb950;
}
.summary-row.total {
  border-top: 1px solid #30363d;
  margin-top: 8px;
  padding-top: 12px;
}
.summary-row.total .summary-row-label {
  font-weight: 600;
  color: #c9d1d9;
}
.summary-row.total .summary-row-value {
  font-size: 16px;
  font-weight: 600;
  color: #58a6ff;
}
.summary-row.vat-breakdown {
  font-size: 12px;
}
.summary-row.vat-breakdown .summary-row-label {
  color: #8b949e;
}
/* Prepayment rows in comparison grid */
.comparison-row.prepayment .comparison-label {
  color: #8b949e;
  font-size: 12px;
}
.comparison-row.prepayment .comparison-original.discount {
  color: #3fb950;
}
.summary-row.amount-due {
  border-top: 1px solid #30363d;
  margin-top: 8px;
  padding-top: 12px;
}
.summary-row.amount-due .summary-row-label {
  font-weight: 600;
  color: #c9d1d9;
}
.summary-row.amount-due .summary-row-value {
  font-size: 16px;
  font-weight: 600;
  color: #f0883e;
}

/* 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 #30363d;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8b949e;
}

.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: #8b949e;
}

.comparison-original {
  text-align: right;
  color: #c9d1d9;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.comparison-verified {
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* Verification states */
.comparison-verified.verified {
  color: #3fb950;
}

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

.comparison-verified.unverified {
  color: #8b949e;
}

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

.comparison-verified.discrepancy {
  color: #c9d1d9;
}

.delta-badge {
  display: inline-block;
  background: rgba(240, 136, 62, 0.2);
  color: #f0883e;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 500;
}

/* Total row in comparison view */
.comparison-row.total {
  border-top: 1px solid #30363d;
  margin-top: 8px;
  padding-top: 12px;
}

.comparison-row.total .comparison-label {
  font-weight: 600;
  color: #c9d1d9;
}

.comparison-row.total .comparison-original {
  font-size: 16px;
  font-weight: 600;
  color: #58a6ff;
}

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

.comparison-row.total .comparison-verified.verified {
  color: #3fb950;
}

.comparison-row.total .comparison-verified.discrepancy {
  color: #c9d1d9;
}

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

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

.verified-breakdown .breakdown-label {
  color: #6e7681;
}

.verified-breakdown .breakdown-value {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #8b949e;
}


/* 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 #21262d;
  }
  .comparison-original,
  .comparison-verified {
    text-align: left;
  }
  .comparison-original::before {
    content: "Original: ";
    color: #6e7681;
    font-size: 11px;
    font-family: inherit;
  }
  .comparison-verified::before {
    content: "Verified: ";
    color: #6e7681;
    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: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 16px;
}
.payment-card-title {
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  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: rgba(63, 185, 80, 0.15);
  color: #3fb950;
}
.math-badge.math-warning {
  background-color: rgba(210, 153, 34, 0.15);
  color: #d29922;
}
.math-badge.math-error {
  background-color: rgba(248, 81, 73, 0.15);
  color: #f85149;
}
.math-badge.math-uncertain {
  background-color: rgba(210, 153, 34, 0.15);
  color: #d29922;
}

/* Value row (single column display for payment summary) */
.value-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid #21262d;
}
.value-row:last-child {
  border-bottom: none;
}
.value-row .value-label {
  color: #8b949e;
  font-size: 13px;
}
.value-row .value-amount {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  color: #c9d1d9;
}
.value-row .value-amount.discount {
  color: #3fb950;
}
.value-row.total {
  border-top: 1px solid #30363d;
  margin-top: 8px;
  padding-top: 12px;
}
.value-row.total .value-label {
  font-weight: 600;
  color: #c9d1d9;
}
.value-row.total .value-amount {
  font-size: 16px;
  font-weight: 600;
  color: #58a6ff;
}
.value-row.prepayment .value-label {
  color: #8b949e;
  font-size: 12px;
}
.value-row.prepayment .value-amount.discount {
  color: #3fb950;
}
.value-row.fee .value-label,
.value-row.installment .value-label {
  color: #8b949e;
  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: #c9d1d9;
}
.section-header-toggle .chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease-out;
  color: #6e7681;
}
.collapsible-section.collapsed .chevron {
  transform: rotate(-90deg);
}

/* Empty state placeholder */
.empty-placeholder {
  color: #6e7681;
  font-style: italic;
  padding: 12px 0;
}
.party-card.empty {
  min-height: 80px;
}

/* Email connection banner */
.email-connection-banner {
  background: linear-gradient(135deg, #161b22 0%, #1c2128 100%);
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}
.email-connection-banner.warning {
  border-color: #d29922;
  background: linear-gradient(135deg, #1c1a14 0%, #211f17 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: #21262d;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b949e;
}
.email-connection-banner.warning .email-connection-banner-icon {
  background: rgba(210, 153, 34, 0.2);
  color: #d29922;
}
.email-connection-banner-text {
  flex: 1;
}
.email-connection-banner-title {
  font-size: 16px;
  font-weight: 600;
  color: #c9d1d9;
  margin-bottom: 8px;
}
.email-connection-banner-description {
  color: #8b949e;
  margin-bottom: 16px;
  line-height: 1.5;
}
.email-connection-banner-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-outlook {
  background: #0078d4;
  color: white;
}
.btn-outlook:hover {
  background: #106ebe;
  text-decoration: none;
}
.btn-gmail {
  background: #0078d4;
  color: white;
}
.btn-gmail:hover {
  background: #106ebe;
  text-decoration: none;
}

/* Master Data Sections */
.master-data-section {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}
.master-data-section h2 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 1px solid #21262d;
}
.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 #30363d;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.upload-dropzone:hover {
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.02);
}

/* 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 #30363d;
  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: #8b949e;
  font-size: 13px;
}

/* Error section */
.master-data-section.error {
  border-left: 3px solid #da3633;
  background: rgba(218, 54, 51, 0.1);
}
.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: rgba(218, 54, 51, 0.1);
  border-left: 2px solid #da3633;
  border-radius: 4px;
  font-size: 13px;
}

/* Success toast */
.success-toast {
  background: rgba(35, 134, 54, 0.1);
  border: 1px solid #238636;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #3fb950;
}

/* 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: 44px;
  height: 24px;
  background: #30363d;
  border-radius: 12px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #c9d1d9;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: #238636;
}

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

.toggle-label {
  color: #c9d1d9;
  font-size: 14px;
  font-weight: 500;
}

/* Section description */
.section-description {
  color: #8b949e;
  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: #21262d;
  border-radius: 8px;
  border: 1px solid #30363d;
}
.connection-card.connected {
  border-color: #238636;
}
.connection-card.expired {
  border-color: #d29922;
}
.connection-card.error {
  border-color: #f85149;
}
.connection-card.not-connected {
  border-color: #30363d;
}
.connection-card.pending {
  border-color: #1f6feb;
}
.connection-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.connection-card.connected .connection-icon {
  color: #3fb950;
}
.connection-card.expired .connection-icon {
  color: #d29922;
}
.connection-card.error .connection-icon {
  color: #f85149;
}
.connection-card.not-connected .connection-icon {
  color: #8b949e;
}
.connection-card.pending .connection-icon {
  color: #58a6ff;
}
.connection-info {
  flex: 1;
  min-width: 0;
}
.connection-title {
  font-weight: 600;
  color: #c9d1d9;
  margin-bottom: 4px;
}
.connection-company {
  color: #8b949e;
  font-size: 13px;
}
.connection-expiry {
  color: #8b949e;
  font-size: 12px;
  margin-top: 4px;
}
.connection-ledger {
  color: #8b949e;
  font-size: 12px;
  margin-top: 4px;
}
.connection-description {
  color: #8b949e;
  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 #30363d;
}
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #c9d1d9;
  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: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
}
.text-input:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3);
}
.text-input::placeholder {
  color: #6e7681;
}
.field-hint {
  font-size: 12px;
  color: #8b949e;
  margin-top: 6px;
}

/* Settings page sections */
.settings-section {
  padding-top: 32px;
}
.settings-section:first-child {
  padding-top: 0;
}
.settings-section-title {
  font-size: 20px;
  font-weight: 600;
  color: #e6edf3;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #21262d;
}

/* 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 #30363d;
  border-radius: 6px;
  /* Firefox scrollbar */
  scrollbar-width: auto;
  scrollbar-color: #484f58 #21262d;
}
/* Webkit scrollbar styling - always visible for accessibility */
.table-container::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}
.table-container::-webkit-scrollbar-track {
  background: #21262d;
  border-radius: 6px;
}
.table-container::-webkit-scrollbar-thumb {
  background: #484f58;
  border-radius: 6px;
  border: 2px solid #21262d;
}
.table-container::-webkit-scrollbar-thumb:hover {
  background: #6e7681;
}
.table-container::-webkit-scrollbar-corner {
  background: #21262d;
}
.table-container .table {
  margin: 0;
  border: none;
  min-width: max-content;
}
.table-container thead {
  position: sticky;
  top: 0;
  background: #161b22;
  z-index: 1;
}

/* Sortable table headers */
.table.sortable th {
  cursor: pointer;
  user-select: none;
}
.table.sortable th:hover {
  background: #21262d;
}
.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: rgba(88, 166, 255, 0.08);
}

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

/* Accounts & Cost Center Components */

/* Reasoning toggle */
.reasoning-container {
  margin-top: 8px;
}
.reasoning-toggle {
  background: transparent;
  border: none;
  color: #58a6ff;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.reasoning-toggle:hover {
  text-decoration: underline;
}
.reasoning-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.2s ease-out;
  font-size: 12px;
  color: #8b949e;
  line-height: 1.5;
  background: #0d1117;
  border-radius: 4px;
}
.reasoning-text.expanded {
  max-height: 200px;
  padding: 12px;
  margin-top: 8px;
  overflow-y: auto;
}

/* Account card (inline in line items) */
.account-card {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 8px 12px;
  min-width: 180px;
}
.account-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.account-number {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #58a6ff;
  font-weight: 600;
  font-size: 13px;
}
.account-name {
  color: #c9d1d9;
  font-size: 13px;
}
.account-card .confidence-badge {
  margin-left: auto;
}

/* Cost center card */
.cost-center-card {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  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: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #58a6ff;
  font-weight: 600;
  font-size: 16px;
}
.cost-center-name {
  color: #c9d1d9;
  font-size: 15px;
  font-weight: 500;
}
.cost-center-employee {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.cost-center-employee .label {
  color: #6e7681;
}
.cost-center-employee .employee-name {
  color: #c9d1d9;
}

/* 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(139, 148, 158, 0.2);
  color: #8b949e;
}
.accrual-type-badge.multi-month {
  background: rgba(88, 166, 255, 0.2);
  color: #58a6ff;
}
.accrual-type-badge.multi-year {
  background: rgba(163, 113, 247, 0.2);
  color: #a371f7;
}
.accrual-period-count {
  font-size: 12px;
  color: #6e7681;
}
.accrual-periods {
  margin-top: 8px;
  padding: 8px;
  background: #0d1117;
  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: #8b949e;
}
.period-amount {
  color: #c9d1d9;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
.accrual-period.more {
  color: #6e7681;
  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: #21262d;
  color: #c9d1d9;
}

/* 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: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
}
.invoice-classification-label {
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  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: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 16px;
}

.line-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.line-item-description {
  font-size: 14px;
  color: #c9d1d9;
  line-height: 1.5;
}

.line-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #21262d;
}

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

.meta-label {
  font-size: 10px;
  color: #6e7681;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meta-value {
  font-size: 13px;
  color: #c9d1d9;
}

.meta-value.monospace {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.meta-value.discount {
  color: #3fb950;
}

/* Line item surcharges */
.line-item-surcharges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #161b22;
  border-radius: 6px;
  border: 1px solid #30363d;
}

.surcharges-label {
  font-size: 10px;
  color: #6e7681;
  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: #21262d;
  border-radius: 4px;
}

.surcharge-desc {
  color: #8b949e;
}

.surcharge-amount {
  color: #f0883e;
  font-weight: 500;
}

.surcharge-tax-code {
  color: #6e7681;
  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: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 10px 12px;
}

.enrichment-label {
  display: block;
  font-size: 10px;
  color: #6e7681;
  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: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #58a6ff;
  font-weight: 600;
  font-size: 14px;
}

.enrichment-badge .account-name {
  color: #c9d1d9;
  font-size: 13px;
}

/* Cost center badge in line items */
.enrichment-badge .cost-center-number {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #a371f7;
  font-weight: 600;
  font-size: 14px;
}

.enrichment-badge .cost-center-name {
  color: #c9d1d9;
  font-size: 13px;
}

.enrichment-badge .cost-center-employee {
  color: #8b949e;
  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: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #8b949e;
  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: #21262d;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
}

.period-chip .period-label {
  color: #8b949e;
}

.period-chip .period-amount {
  color: #c9d1d9;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.period-chip.more {
  color: #6e7681;
  font-style: italic;
}

/* Line item amount (prominent, flex-aligned) */
.line-item-amount {
  font-size: 16px;
  font-weight: 600;
  color: #58a6ff;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 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: #3fb950;
}

.validation-dot.warning {
  background: #d29922;
}

.validation-dot.error {
  background: #f85149;
}

.validation-dot.uncertain {
  background: transparent;
  border: 2px solid #8b949e;
  width: 8px;
  height: 8px;
}

.validation-dot.missing {
  background: #30363d;
}

/* 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: #161b22;
  border: 1px solid #30363d;
  border-left: 3px solid #30363d;
  border-radius: 6px;
  padding: 16px;
}
.validation-box.all-pass {
  border-left-color: #238636;
}

.validation-box-title {
  font-size: 13px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #21262d;
}

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

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

/* Validation Check Card (used in warning banner) */
.validation-check-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 12px 16px;
}

.validation-check-card.warning {
  border-color: #d29922;
  background: rgba(210, 153, 34, 0.08);
}

.validation-check-card.error {
  border-color: #f85149;
  background: rgba(248, 81, 73, 0.08);
}

.validation-check-card.uncertain {
  border-color: #8b949e;
  background: rgba(139, 148, 158, 0.08);
}

.validation-check-card.pass .validation-status-icon {
  color: #3fb950;
}

.validation-check-card.warning .validation-status-icon {
  color: #d29922;
}

.validation-check-card.error .validation-status-icon {
  color: #f85149;
}

.validation-check-card.uncertain .validation-status-icon {
  color: #8b949e;
}

/* 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: #c9d1d9;
  font-size: 14px;
}

.inferred-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(88, 166, 255, 0.2);
  color: #58a6ff;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.validation-check-message {
  margin-top: 8px;
  color: #8b949e;
  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: #58a6ff;
  border: 1px solid #30363d;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}
.breakdown-download-btn:hover {
  background: rgba(88, 166, 255, 0.1);
  border-color: #58a6ff;
}

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

.validation-check-field .field-label {
  color: #6e7681;
}

.validation-check-field .field-name {
  color: #58a6ff;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

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

.validation-resolved-value .resolved-label {
  color: #6e7681;
}

.validation-resolved-value .resolved-value {
  color: #3fb950;
  font-weight: 500;
}

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

.validation-details summary {
  font-size: 12px;
  color: #58a6ff;
  cursor: pointer;
}

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

.validation-details pre {
  margin: 8px 0 0 0;
  padding: 8px;
  background: #161b22;
  border-radius: 4px;
  font-size: 11px;
  color: #8b949e;
  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: #3fb950;
  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;
  padding: 6px 0;
}

.check-row + .check-row {
  border-top: 1px solid #21262d;
}

.check-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #c9d1d9;
}

.check-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.check-status.pass { color: #3fb950; }
.check-status.pass iconify-icon { color: #3fb950; }

.check-status.warning { color: #d29922; }
.check-status.warning iconify-icon { color: #d29922; }

.check-status.error { color: #f85149; }
.check-status.error iconify-icon { color: #f85149; }

.check-status.not-applicable { color: #8b949e; }
.check-status.not-applicable iconify-icon { color: #8b949e; }

.check-status.uncertain { color: #8b949e; }
.check-status.uncertain iconify-icon { color: #8b949e; }

.check-status.info { color: #58a6ff; }
.check-status.info iconify-icon { color: #58a6ff; }

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

/* Pass state - green */
.validation-chip.pass {
  background: rgba(63, 185, 80, 0.12);
  color: #3fb950;
  border-color: rgba(63, 185, 80, 0.3);
}
.validation-chip.pass iconify-icon {
  color: #3fb950;
}

/* Warning state - yellow/orange */
.validation-chip.warning {
  background: rgba(210, 153, 34, 0.12);
  color: #d29922;
  border-color: rgba(210, 153, 34, 0.3);
}
.validation-chip.warning iconify-icon {
  color: #d29922;
}

/* Error/Critical state - red */
.validation-chip.error {
  background: rgba(248, 81, 73, 0.12);
  color: #f85149;
  border-color: rgba(248, 81, 73, 0.3);
}
.validation-chip.error iconify-icon {
  color: #f85149;
}

/* Uncertain state - gray */
.validation-chip.uncertain {
  background: rgba(139, 148, 158, 0.12);
  color: #8b949e;
  border-color: rgba(139, 148, 158, 0.3);
}
.validation-chip.uncertain iconify-icon {
  color: #8b949e;
}

/* Info state - blue (for info-level fraud flags) */
.validation-chip.info {
  background: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
  border-color: rgba(88, 166, 255, 0.3);
}
.validation-chip.info iconify-icon {
  color: #58a6ff;
}

/* Legacy class - keep for backwards compatibility */
.passed-check-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
}
.passed-check-chip.pass {
  background: rgba(63, 185, 80, 0.12);
  color: #3fb950;
  border-color: rgba(63, 185, 80, 0.3);
}
.passed-check-chip.pass iconify-icon {
  color: #3fb950;
}
.passed-check-chip.warning {
  background: rgba(210, 153, 34, 0.12);
  color: #d29922;
  border-color: rgba(210, 153, 34, 0.3);
}
.passed-check-chip.warning iconify-icon {
  color: #d29922;
}
.passed-check-chip.error {
  background: rgba(248, 81, 73, 0.12);
  color: #f85149;
  border-color: rgba(248, 81, 73, 0.3);
}
.passed-check-chip.error iconify-icon {
  color: #f85149;
}
.passed-check-chip.uncertain {
  background: rgba(139, 148, 158, 0.12);
  color: #8b949e;
  border-color: rgba(139, 148, 158, 0.3);
}
.passed-check-chip.uncertain iconify-icon {
  color: #8b949e;
}
.passed-check-chip.info {
  background: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
  border-color: rgba(88, 166, 255, 0.3);
}
.passed-check-chip.info iconify-icon {
  color: #58a6ff;
}
.passed-check-chip.not-applicable {
  background: rgba(139, 148, 158, 0.12);
  color: #8b949e;
  border-color: rgba(139, 148, 158, 0.3);
}
.passed-check-chip.not-applicable iconify-icon {
  color: #8b949e;
}

/* 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: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  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: #30363d;
}

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

/* All passed state */
.validation-all-passed {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(63, 185, 80, 0.1);
  border: 1px solid rgba(63, 185, 80, 0.3);
  border-radius: 6px;
}

.validation-all-passed iconify-icon {
  color: #3fb950;
  font-size: 20px;
}

.all-passed-text {
  color: #3fb950;
  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;
  background: rgba(248, 81, 73, 0.2);
  color: #f85149;
  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: #161b22;
  border-top: 1px solid #30363d;
  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: #8b949e;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}

.footer-link:hover {
  color: #c9d1d9;
  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: #161b22;
  border: 1px solid #30363d;
  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 #30363d;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #c9d1d9;
}

.modal-close {
  background: none;
  border: none;
  color: #8b949e;
  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: #21262d;
  color: #c9d1d9;
}

.modal-body {
  padding: 24px;
}

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

.modal-body p {
  margin: 0 0 16px 0;
  color: #8b949e;
}

.modal-body h4 {
  color: #c9d1d9;
  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: #8b949e;
}

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

.modal-body a {
  color: #58a6ff;
  text-decoration: none;
}

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

.email-copy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
}

.email-address {
  flex: 1;
  color: #c9d1d9;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 14px;
}

/* Copy button animation (same as documents page) */
.copy-btn {
  background: transparent;
  border: 1px solid #30363d;
  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: #21262d;
  border-color: #58a6ff;
}

.copy-btn svg {
  width: 12px;
  height: 12px;
  color: #8b949e;
  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: #3fb950;
}

.copy-btn.copied {
  background: rgba(63, 185, 80, 0.1);
  border-color: #3fb950;
}

/* Section Navigation Tabs */
.section-tabs {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  display: flex;
  gap: 0;
  padding: 6px 16px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.section-tabs::-webkit-scrollbar {
  height: 4px;
}

.section-tabs::-webkit-scrollbar-track {
  background: #161b22;
}

.section-tabs::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 2px;
}

.tab-link {
  padding: 10px 14px;
  color: #8b949e;
  text-decoration: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab-link:hover {
  color: #c9d1d9;
  background: transparent;
  text-decoration: none;
  border-bottom-color: #484f58;
}

.tab-link:active,
.tab-link.active {
  color: #58a6ff;
  background: transparent;
  border-bottom-color: #58a6ff;
}

/* 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-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;
}

/* Paid status in payment terms */
.paid-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.paid-badge {
  background: #238636;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
}
.paid-date {
  color: #8b949e;
  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(63, 185, 80, 0.15);
  color: #3fb950;
  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: #6e7681;
  font-size: 0.85rem;
  min-width: 70px;
}
.delivery-value {
  color: #c9d1d9;
  white-space: pre-line;
}
.country-badge {
  background: #21262d;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #8b949e;
}
.incoterm-badge {
  background: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.85rem;
}
.incoterm-place {
  color: #8b949e;
  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;
  background: rgba(210, 153, 34, 0.2);
  color: #d29922;
  border-radius: 9px;
  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: #21262d;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #c9d1d9;
}
.category-chip {
  background: rgba(163, 113, 247, 0.15);
  color: #a371f7;
  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: 6px;
  border: 1px solid #30363d;
  background: #161b22;
}
.tax-issue-card.error {
  background: rgba(248, 81, 73, 0.08);
  border-color: #f85149;
}
.tax-issue-card.warning {
  background: rgba(210, 153, 34, 0.08);
  border-color: #d29922;
}
.tax-issue-card.info {
  background: rgba(88, 166, 255, 0.08);
  border-color: #58a6ff;
}
.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: #f85149;
}
.tax-severity-icon.warning {
  color: #d29922;
}
.tax-severity-icon.info {
  color: #58a6ff;
}
.tax-issue-type {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: #8b949e;
}
.tax-issue-message {
  color: #c9d1d9;
  font-size: 0.9rem;
  line-height: 1.5;
}
.tax-issue-suggestion {
  margin-top: 0.5rem;
  color: #8b949e;
  font-size: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.tax-issue-suggestion iconify-icon {
  color: #d29922;
  flex-shrink: 0;
  margin-top: 2px;
}
.tax-compliance-pass {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #3fb950;
  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: 6px;
  border: 1px solid #30363d;
  background: #0d1117;
}
.fraud-flag-card.critical {
  background: rgba(248, 81, 73, 0.08);
  border-color: #f85149;
}
.fraud-flag-card.warning {
  background: rgba(210, 153, 34, 0.08);
  border-color: #d29922;
}
.fraud-flag-card.info {
  background: rgba(88, 166, 255, 0.08);
  border-color: #58a6ff;
}
.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: #f85149;
}
.fraud-severity-icon.warning {
  color: #d29922;
}
.fraud-severity-icon.info {
  color: #58a6ff;
}
.fraud-flag-type {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: #8b949e;
}
.fraud-flag-message {
  color: #c9d1d9;
  font-size: 0.9rem;
  line-height: 1.5;
}
.fraud-flag-suggestion {
  margin-top: 0.5rem;
  color: #8b949e;
  font-size: 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.fraud-flag-suggestion iconify-icon {
  color: #d29922;
  flex-shrink: 0;
  margin-top: 2px;
}

/* VAT badge on line items */
.vat-badge {
  border-color: #30363d;
}
.vat-badge.valid {
  border-color: rgba(63, 185, 80, 0.5);
}
.vat-badge.warning {
  border-color: rgba(210, 153, 34, 0.5);
}
.vat-badge.invalid {
  border-color: rgba(248, 81, 73, 0.5);
}
.vat-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.vat-status-dot.valid {
  background: #3fb950;
}
.vat-status-dot.warning {
  background: #d29922;
}
.vat-status-dot.invalid {
  background: #f85149;
}
.vat-rate {
  font-size: 0.85rem;
  color: #e6edf3;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
.vat-expected-rate {
  font-size: 0.75rem;
  color: #8b949e;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
.vat-expected-rate.mismatch {
  color: #d29922;
}
.bu-code-chip {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
}
.vat-suggestion {
  flex-basis: 100%;
  margin-top: 6px;
  color: #8b949e;
  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: 6px;
  border-left: 3px solid;
}

.datev-message-error {
  background: rgba(248, 81, 73, 0.08);
  border-color: #f85149;
}

.datev-message-warning {
  background: rgba(210, 153, 34, 0.08);
  border-color: #d29922;
}

.datev-message-info {
  background: rgba(88, 166, 255, 0.08);
  border-color: #58a6ff;
}

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

.message-text {
  color: #c9d1d9;
  font-size: 14px;
  line-height: 1.5;
}

/* DATEV Export Logs (inline section) */
#section-datev-export {
  scroll-margin-top: 60px;
  margin-top: 0;
  margin-bottom: 24px;
}

.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: 6px;
  border-left: 3px solid;
  background: rgba(48, 54, 61, 0.3);
}

.datev-log-entry.information {
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.08);
}

.datev-log-entry.error {
  border-color: #f85149;
  background: rgba(248, 81, 73, 0.08);
}

.datev-log-entry.warning {
  border-color: #d29922;
  background: rgba(210, 153, 34, 0.08);
}

.datev-log-entry .log-message {
  color: #c9d1d9;
  font-size: 13px;
  line-height: 1.5;
}

.datev-log-entry .log-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #8b949e;
}

.datev-log-entry .log-filename {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* FVR Explanation Banner - for reasoning-only false positive explanations */
.fvr-explanation-banner {
  padding: 16px;
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.08);
  border: 1px solid #58a6ff;
  margin-bottom: 16px;
}

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

.fvr-explanation-header iconify-icon {
  color: #58a6ff;
  font-size: 16px;
}

.fvr-explanation-title {
  flex: 1;
  font-weight: 500;
  color: #c9d1d9;
}

.fvr-dismiss-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #8b949e;
  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(139, 148, 158, 0.2);
  color: #c9d1d9;
}

.fvr-explanation-body p {
  margin: 0 0 8px;
  color: #8b949e;
  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: #8b949e;
  font-size: 13px;
  line-height: 1.5;
}

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

.fvr-reasoning-list li strong {
  color: #c9d1d9;
}

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

/* Legal Entity Sections (for multi-LE tenants) */
.legal-entity-section {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden;
}

.legal-entity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
}

.legal-entity-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #c9d1d9;
}

.legal-entity-content {
  padding: 24px;
}

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

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

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

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

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #c9d1d9;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-size: 14px;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #30363d;
}

/* Legal Entities List */
.legal-entities-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal-entity-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
}

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

.legal-entity-name {
  font-weight: 500;
  color: #c9d1d9;
}

/* Compact Legal Entity Cards (Master Data Page) */
.le-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

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

.le-card-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #c9d1d9;
}

.le-card-subtitle {
  font-size: 13px;
  color: #8b949e;
  margin-top: 2px;
  display: block;
}

.le-card-ids {
  font-size: 12px;
  color: #6e7681;
  margin-top: 2px;
  display: block;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace;
}

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

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

/* Dataset Chips */
.dataset-chip {
  flex: 1;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 10px 12px;
  min-width: 0;
}

.dataset-chip.loaded {
  background: rgba(46, 160, 67, 0.1);
  border-color: rgba(46, 160, 67, 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: #c9d1d9;
}

.dataset-status {
  font-size: 12px;
  color: #8b949e;
}

.dataset-chip.loaded .dataset-status {
  color: #3fb950;
}

.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 #30363d;
  color: #8b949e;
  transition: all 0.15s;
}

.btn-icon:hover {
  background: #21262d;
  border-color: #484f58;
  color: #c9d1d9;
}

.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(22, 27, 34, 0.9);
  border-radius: 4px;
}

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

.spinner-small {
  width: 14px;
  height: 14px;
  border: 2px solid #30363d;
  border-top-color: #58a6ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Dataset Modal */
.dataset-modal {
  padding: 0;
  background: #161b22;
  border: 1px solid #30363d;
  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 #30363d;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #c9d1d9;
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #8b949e;
  font-size: 20px;
  cursor: pointer;
}

.modal-close:hover {
  background: #21262d;
  color: #c9d1d9;
}

.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: #161b22;
}

.dataset-modal .table th {
  padding: 12px 16px;
  background: #161b22;
  border-bottom: 2px solid #30363d;
  white-space: nowrap;
}

.dataset-modal .table td {
  padding: 10px 16px;
  border-bottom: 1px solid #21262d;
  color: #c9d1d9;
}

.dataset-modal .table tbody tr:nth-child(even) {
  background: rgba(22, 27, 34, 0.5);
}

.dataset-modal .table tbody tr:hover {
  background: #1c2128;
}

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

.modal-header-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #c9d1d9;
}

.modal-record-count {
  font-size: 12px;
  color: #8b949e;
  font-weight: 400;
}

/* Toast Messages */
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 6px;
  font-size: 14px;
}
.toast iconify-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.toast-success {
  background: rgba(35, 134, 54, 0.15);
  border: 1px solid rgba(35, 134, 54, 0.4);
  color: #3fb950;
}
.toast-error {
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid rgba(248, 81, 73, 0.4);
  color: #f85149;
}

/* Legacy toast class */
.error-toast {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid rgba(248, 81, 73, 0.4);
  border-radius: 6px;
  color: #f85149;
  font-size: 14px;
}

.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(auto-fill, minmax(480px, 1fr));
  gap: 16px;
}

/* Subsection styling */
.notifications-subsection {
  padding: 16px;
  background: #161b22;
  border-radius: 8px;
  border: 1px solid #30363d;
}
.notifications-subsection h3 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #c9d1d9;
}
.subsection-description {
  margin: 0 0 16px 0;
  font-size: 13px;
  color: #8b949e;
}

/* 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: #21262d;
  border-radius: 6px;
  border: 1px solid #30363d;
}
.notification-channel-card.channel-active {
  border-color: #238636;
}
.notification-channel-card.channel-pending {
  border-color: #d29922;
}
.notification-channel-card.channel-disabled {
  border-color: #30363d;
}
.notification-channel-card.channel-disabled .channel-info {
  opacity: 0.7;
}

/* Channel icon */
.notification-channel-card .channel-icon {
  font-size: 20px;
  flex-shrink: 0;
  color: #8b949e;
}
.notification-channel-card.channel-active .channel-icon {
  color: #3fb950;
}
.notification-channel-card.channel-pending .channel-icon {
  color: #d29922;
}

/* 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: #c9d1d9;
}
.channel-target {
  color: #8b949e;
  font-size: 13px;
}
.channel-hash {
  color: #6e7681;
}
.channel-warning {
  color: #d29922;
  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: rgba(210, 153, 34, 0.15);
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, 0.3);
}
.badge-success {
  background: rgba(35, 134, 54, 0.15);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.3);
}
.badge-secondary {
  background: rgba(139, 148, 158, 0.15);
  color: #8b949e;
  border: 1px solid rgba(139, 148, 158, 0.3);
}

/* 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: #c9d1d9;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 6px;
  list-style: none;
}
.add-channel-form summary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #8b949e;
}
.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: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
}
.add-channel-form .form-control:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}
.form-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 4px;
  border-radius: 6px;
  font-size: 13px;
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid rgba(248, 81, 73, 0.4);
  color: #f85149;
}
.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: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
}
.slack-channel-picker h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #c9d1d9;
}
.slack-channel-picker > p {
  margin: 0 0 24px 0;
  color: #8b949e;
}
.slack-channel-picker .form-group {
  margin-bottom: 24px;
}
.slack-channel-picker label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #c9d1d9;
}
.slack-channel-picker select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
}
.slack-channel-picker select:focus {
  outline: none;
  border-color: #58a6ff;
}
.slack-channel-picker .form-actions {
  display: flex;
  gap: 12px;
}
.slack-channel-picker .alert {
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.slack-channel-picker .alert-warning {
  background: rgba(210, 153, 34, 0.15);
  border: 1px solid rgba(210, 153, 34, 0.3);
  color: #d29922;
}
.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: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  color: #c9d1d9;
}
.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: #8b949e;
}
.channel-select-modal select {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 14px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
}
.channel-select-modal .modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.channel-select-modal .loading {
  padding: 16px;
  text-align: center;
  color: #8b949e;
  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;
}

/* Error page for verification */
.verify-error-page {
  max-width: 480px;
  margin: 80px auto;
  padding: 32px;
  text-align: center;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
}
.verify-error-page h1 {
  margin: 0 0 12px 0;
  font-size: 24px;
  color: #f85149;
}
.verify-error-page p {
  margin: 0;
  color: #8b949e;
}

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

.doc-type-icon {
  font-size: 20px;
  color: #8b949e;
}

/* Document Management - Detail page additions */

.detail-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  padding: 16px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
}

.parties-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.parties-grid > div {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 16px;
}

.parties-grid > div h4 {
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #21262d;
}

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

.supplier-verification-box {
  background: #161b22;
  border: 1px solid #30363d;
  border-left: 3px solid #30363d;
  border-radius: 6px;
  padding: 16px;
  margin-top: 16px;
}
.supplier-verification-box.rating-green {
  border-left-color: #238636;
}
.supplier-verification-box.rating-yellow {
  border-left-color: #d29922;
}
.supplier-verification-box.rating-red {
  border-left-color: #f85149;
}

.sv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #21262d;
}

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

.subsection h4 {
  font-size: 13px;
  font-weight: 600;
  color: #8b949e;
  margin-bottom: 8px;
}

/* Type badge colors — neutral blue for all document types */
.badge-invoice,
.badge-contract,
.badge-purchase-order,
.badge-goods-received-note {
  background: rgba(56, 139, 253, 0.15);
  color: #58a6ff;
}

.badge-info {
  background: #30363d;
  color: #c9d1d9;
}

/* Notifications Page */

.notifications-table {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 24px;
}

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

.notification-row.disabled > summary {
  color: rgba(201, 209, 217, 0.5);
}
.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: rgba(255, 255, 255, 0.03);
}

.notification-icon {
  font-size: 18px;
  color: #8b949e;
  flex-shrink: 0;
}

.notification-row-label {
  font-size: 14px;
  font-weight: 500;
  color: #c9d1d9;
  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: #6e7681;
}
.notification-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #1c2128;
  border: 1px solid #30363d;
  border-radius: 12px;
  font-size: 11px;
  color: #8b949e;
}

/* Expand chevron */
.notification-expand-icon {
  transition: transform 0.15s ease;
  color: #6e7681;
  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 #21262d;
}
.notification-detail-desc {
  font-size: 12px;
  color: #8b949e;
  margin: 12px 0 0 0;
}

/* 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: #2d333b;
  color: #e6edf3;
  border: 1px solid #444c56;
  border-radius: 6px;
  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-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
}

.notification-channel-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #1c2128;
  border: 1px solid #30363d;
  border-radius: 16px;
  font-size: 12px;
  color: #c9d1d9;
}

.notification-channel-remove {
  background: none;
  border: none;
  color: #8b949e;
  cursor: pointer;
  font-size: 14px;
  padding: 0 0 0 4px;
  line-height: 1;
}

.notification-channel-remove:hover {
  color: #f87171;
}

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

.notification-add-channel select {
  flex: 1;
  padding: 6px 10px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  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: #8b949e;
  font-size: 12px;
}

/* Contract lifecycle badges */
.badge-contract-active { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
.badge-contract-expiring-soon { background: rgba(227, 179, 65, 0.15); color: #e3b341; }
.badge-contract-expired { background: rgba(248, 81, 73, 0.15); color: #f85149; }
.badge-contract-pending { background: rgba(139, 148, 158, 0.15); color: #8b949e; }

/* Contract sub-type badge */
.badge-contract-subtype { background: rgba(56, 139, 253, 0.15); color: #58a6ff; }

/* Recurring contract badge */
.badge-recurring { background: rgba(31, 111, 139, 0.2); color: #3bc9db; }

/* Alert banner */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}
.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(227, 179, 65, 0.1);
  border: 1px solid rgba(227, 179, 65, 0.3);
  color: #e3b341;
}

/* Key Dates Timeline (horizontal) */
.timeline-h {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding: 20px 16px 16px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
}
.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: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0d1117;
  border: 2px solid #8b949e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b949e;
  flex-shrink: 0;
}
.timeline-h-event.urgent .timeline-h-dot {
  border-color: #d29922;
  color: #d29922;
  background: rgba(210, 153, 34, 0.1);
}
.timeline-h-label {
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  white-space: nowrap;
}
.timeline-h-event.urgent .timeline-h-label { color: #d29922; font-weight: 700; }
.timeline-h-date {
  font-size: 11px;
  color: #6e7681;
  white-space: nowrap;
}
.timeline-h-event.urgent .timeline-h-date { color: #d29922; }
.timeline-h-delta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4px;
  min-width: 60px;
  padding-top: 12px;
}
.timeline-h-line {
  width: 100%;
  height: 2px;
  background: #30363d;
  margin-top: 2px;
}
.timeline-h-delta-text {
  font-size: 10px;
  color: #6e7681;
  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 #30363d;
}

/* Contract Hero Card */
.hero-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.hero-metric {
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 12px;
  text-align: center;
}

.hero-metric-label {
  font-size: 11px;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.hero-metric-value {
  font-size: 20px;
  font-weight: 700;
  color: #e6edf3;
}

.hero-metric-detail {
  font-size: 11px;
  color: #8b949e;
  margin-top: 2px;
}

.hero-timeline {
  padding-top: 8px;
  border-top: 1px solid #21262d;
}

/* Obligations */
.obligations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
}

.obligation-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #21262d;
}

.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: #8b949e;
  min-width: 20px;
}

.obligation-content {
  flex: 1;
}

.obligation-description {
  font-size: 14px;
  color: #e6edf3;
  display: block;
  margin-bottom: 4px;
}

.obligation-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #8b949e;
}

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

/* Compliance regulation expandable rows */
.compliance-reg {
  border-top: 1px solid #21262d;
}

.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(255, 255, 255, 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 #21262d;
}

.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: #c9d1d9;
  margin-bottom: 2px;
}

.compliance-finding .finding-text {
  color: #8b949e;
}

/* Empty state for not-yet-analyzed */
.empty-state {
  color: #8b949e;
  font-style: italic;
  padding: 12px;
  text-align: center;
}

.sv-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rating-green .sv-title iconify-icon { color: #3fb950; }
.rating-yellow .sv-title iconify-icon { color: #d29922; }
.rating-red .sv-title iconify-icon { color: #f85149; }

.sv-checks {
  margin-bottom: 8px;
}

.sv-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin: 12px 0;
  background: rgba(63, 185, 80, 0.08);
  border: 1px solid rgba(63, 185, 80, 0.3);
  border-radius: 6px;
  font-size: 13px;
  color: #3fb950;
}
.sv-verified-badge iconify-icon {
  font-size: 16px;
}

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

.match-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}

.match-card:hover {
  background: #21262d;
  text-decoration: none;
}

.match-card .match-title {
  flex: 1;
  font-weight: 500;
}

.match-card iconify-icon {
  color: #8b949e;
}

/* No counterpart — no match of this type for the document */
.match-card-not-found {
  cursor: default;
  opacity: 0.5;
}
.match-card-not-found:hover {
  background: #161b22;
}

/* Match status text */
.match-title.match-no-result {
  color: #8b949e;
  font-style: italic;
  font-weight: 400;
}

.match-card .confidence-badge {
  flex-shrink: 0;
}

/* HTMX batch wrapper — invisible to flex layout */
.match-batch {
  display: contents;
}

/* Show more button for match overflow */
.match-show-more {
  display: block;
  margin: 4px auto 0;
  padding: 6px 16px;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.match-show-more:hover {
  color: #c9d1d9;
  border-color: #8b949e;
}

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

.reconciliation-issue {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 10px 14px;
}
.reconciliation-issue.severity-error {
  border-left: 3px solid #f85149;
}
.reconciliation-issue.severity-warning {
  border-left: 3px solid #d29922;
}

.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: #c9d1d9;
}
.reconciliation-issue .issue-documents {
  font-size: 12px;
  color: #8b949e;
}
.reconciliation-issue .issue-documents a {
  color: #58a6ff;
  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: #8b949e;
  cursor: pointer;
  user-select: none;
}
.reconciliation-issue .issue-details summary:hover {
  color: #c9d1d9;
}
.reconciliation-issue .details-table {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 12px;
}
.reconciliation-issue .details-table th {
  text-align: left;
  color: #8b949e;
  font-weight: 500;
  padding: 4px 8px;
  border-bottom: 1px solid #30363d;
}
.reconciliation-issue .details-table td {
  padding: 4px 8px;
  color: #c9d1d9;
  border-bottom: 1px solid #21262d;
}

/* ── 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: #09090b;
  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, #0078d4, #00b4d8, #0078d4, #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(0, 120, 212, 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: #0078d4;
  margin-bottom: 0.5rem;
}

.login-tip-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #a1a1aa;
}

.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: #52525b;
  margin-bottom: 2rem;
}

.login-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  color: #dc2626;
  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 #e4e4e7;
  border-radius: 0.5rem;
  text-decoration: none;
  color: #18181b;
  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: #0078d4;
  box-shadow: 0 0 0 1px #0078d4;
}

.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: #a1a1aa;
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-website-link:hover {
  color: #0078d4;
  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: #09090b;
  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: #e4e4e7;
  margin-bottom: 0.75rem;
}

.error-message {
  font-size: 1rem;
  color: #a1a1aa;
  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(0, 120, 212, 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: #0078d4;
  margin-bottom: 0.5rem;
}

.error-tip-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #a1a1aa;
}

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

/* ==========================================================================
   Energy Invoice & Portfolio Styles
   ========================================================================== */

/* Utility: grid layout */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gap-4 { gap: 16px; }

/* Utility: text alignment */
.text-right { text-align: right; }
.text-center { text-align: center; }

/* Utility: text colors for delta indicators */
.text-green { color: #3fb950; }
.text-red { color: #f85149; }

/* Utility: monospace font */
.font-mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* Section wrapper */
.section {
  margin-top: 24px;
  margin-bottom: 24px;
}
.section > .card + .card {
  margin-top: 12px;
}
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #c9d1d9;
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #21262d;
}

/* Data table — compact table for energy readings and cost positions */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #30363d;
  color: #8b949e;
  font-weight: 500;
  font-size: 12px;
}
.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #21262d;
  color: #c9d1d9;
}
.data-table th.text-right,
.data-table td.text-right {
  text-align: right;
}
.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Energy Portfolio — stats bar */
.energy-stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 0;
}
.energy-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 14px 16px;
  transition: border-color 0.15s;
}
.energy-stat:hover {
  border-color: #58a6ff;
}
.energy-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
  flex-shrink: 0;
}
.energy-stat-icon.cost {
  background: rgba(35, 134, 54, 0.12);
  color: #3fb950;
}
.energy-stat-icon.avg {
  background: rgba(210, 153, 34, 0.12);
  color: #d29922;
}
.energy-stat-icon.points {
  background: rgba(163, 113, 247, 0.12);
  color: #a371f7;
}
.energy-stat-icon.co2 {
  background: rgba(63, 185, 80, 0.12);
  color: #3fb950;
}
.energy-stat-label {
  font-size: 11px;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.energy-stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #e6edf3;
}

/* Energy table — sticky header background */
#energy-list thead {
  background: #1c2128;
}
#energy-list thead th {
  background: #1c2128;
  border-bottom: 1px solid #30363d;
}
#energy-list tbody tr:last-child td {
  border-bottom: none;
}

/* Delta change indicators */
.delta-negative {
  color: #3fb950;
  font-weight: 500;
}
.delta-positive {
  color: #f85149;
  font-weight: 500;
}

/* Energy Portfolio — filter bar */
.energy-filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid #21262d;
}
.energy-supplier-select {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  padding: 6px 32px 6px 12px;
  background: #0d1117 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='%236e7681' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 10px center no-repeat;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  height: 36px;
  min-width: 360px;
  transition: border-color 0.15s, color 0.15s;
}
.energy-supplier-select:hover {
  border-color: #58a6ff;
  color: #c9d1d9;
}
.energy-supplier-select:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
  color: #c9d1d9;
}

/* Energy Portfolio — group header rows */
.group-header-row td {
  background: #161b22 !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid #30363d;
  cursor: default;
}
.group-header-row:hover td {
  background: #1c2128 !important;
}
.group-header-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.group-chevron {
  color: #8b949e;
  flex-shrink: 0;
}
.group-name {
  font-weight: 600;
  color: #e6edf3;
  font-size: 14px;
}
.group-meta {
  font-size: 12px;
  color: #8b949e;
  margin-left: 8px;
}

/* Consumption comparison card */
.consumption-comparison .card-header {
  border-bottom: 1px solid #30363d;
}
.consumption-comparison .card-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #c9d1d9;
}
.consumption-comparison > .grid {
  padding: 16px;
}
.card.consumption-comparison .label {
  font-size: 12px;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.card.consumption-comparison .value {
  font-size: 16px;
  font-weight: 600;
  color: #c9d1d9;
}
.sublabel {
  font-size: 12px;
  color: #6e7681;
  margin-top: 2px;
}

/* Metering point card labels/values */
.card-header .label {
  font-size: 11px;
  font-weight: 500;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.card-header .value {
  font-size: 14px;
  color: #c9d1d9;
  font-weight: 500;
  margin-bottom: 12px;
}
.card-header .value:last-child {
  margin-bottom: 0;
}

/* Subsection label — meter number headers within a card */
.subsection-label {
  font-size: 13px;
  font-weight: 600;
  color: #8b949e;
  padding: 12px 12px 8px;
}

/* Subtotal — displayed in card header alongside category title */
.subtotal {
  font-size: 14px;
  font-weight: 600;
  color: #58a6ff;
  margin-left: auto;
}
.card-header:has(.subtotal) {
  display: flex;
  align-items: center;
}
.card-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #c9d1d9;
}

/* Energy validation badges */
/* Energy validation box (standalone, outside validation-grid) */
.energy-validation-box {
  margin-top: 16px;
}
.validation-box.has-errors {
  border-left-color: #f85149;
}
.validation-box.has-warnings {
  border-left-color: #d29922;
}

/* Energy validation detail tables (inside validation-box) */
.validation-detail {
  margin-top: 4px;
  padding: 8px 10px;
  background: rgba(248, 81, 73, 0.05);
  border: 1px solid rgba(248, 81, 73, 0.15);
  border-radius: 4px;
  font-size: 12px;
}
.validation-detail-warning {
  background: rgba(210, 153, 34, 0.05);
  border-color: rgba(210, 153, 34, 0.15);
}
.validation-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.validation-detail-table th,
.validation-detail-table td {
  padding: 4px 8px;
}
.validation-detail-table th {
  color: #8b949e;
  font-weight: 500;
  border-bottom: 1px solid rgba(139, 148, 158, 0.2);
}
.validation-detail-table td {
  color: #c9d1d9;
}
.validation-detail-table .text-right {
  text-align: right;
}

/* Responsive: stack stats on smaller screens */
@media (max-width: 900px) {
  .energy-stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .energy-filter-bar {
    flex-wrap: wrap;
  }
  .grid-cols-2,
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   ENERGY INSIGHTS PAGE
   Demo centrepiece — dark-theme dashboard for cross-invoice analysis
   ============================================================================ */

/* Page container — scrollable, unlike .documents-page which clips overflow */
.insights-page {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0 16px 40px;
  margin: -24px;
  margin-bottom: 0;
}

/* Sticky Month Filter Bar — matches .page-header from Accounts Payable */
.insights-month-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #0d1117;
  border-bottom: 1px solid #30363d;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 -16px 0;
  padding: 12px 16px;
}

/* Section navigation tabs — stacks below the period filter bar */
.insights-section-nav {
  top: 48px;
  z-index: 99;
  margin: 0 -16px 20px;
  padding-left: 16px;
  padding-right: 16px;
  overflow-x: hidden;
  scrollbar-width: none;
}
.insights-section-nav::-webkit-scrollbar {
  display: none;
}

/* Scroll margin for insight sections — clears both sticky bars */
.insight-section {
  scroll-margin-top: 100px;
}

/* Cross-reference links between sections */
.cross-ref-link {
  color: #484f58;
  margin-left: 6px;
  transition: color 0.15s;
  vertical-align: middle;
}
.cross-ref-link:hover,
tr:hover .cross-ref-link,
.rate-matrix-row:hover .cross-ref-link {
  color: #58a6ff;
}

.month-filter-controls {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid #30363d;
  border-radius: 6px;
  overflow: hidden;
}
.month-btn {
  padding: 6px 14px;
  color: #8b949e;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  border: none;
  border-right: 1px solid #30363d;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.month-btn:last-child {
  border-right: none;
}
.month-btn:hover {
  color: #c9d1d9;
  background: #161b22;
}
.month-btn.active {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.1);
}

/* Period view tabs (Month / Quarter / Year) */
.period-view-tabs {
  display: flex;
  gap: 0;
  border: 1px solid #30363d;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 12px;
}
.period-view-tab {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #8b949e;
  background: transparent;
  border: none;
  border-right: 1px solid #30363d;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.period-view-tab:last-child {
  border-right: none;
}
.period-view-tab:hover {
  color: #c9d1d9;
  background: #161b22;
}
.period-view-tab.active {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.1);
}

/* Period-over-Period Trend (Chart.js canvas) */
.trend-chart-container {
  position: relative;
  width: 100%;
  height: 300px;
}

.trend-col-delta {
  text-align: right;
}

.delta-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.delta-up {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
}

.delta-down {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
}

/* Savings Action List */
.savings-summary {
  margin-bottom: 16px;
}

.savings-total {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(63, 185, 80, 0.08);
  border: 1px solid rgba(63, 185, 80, 0.2);
  border-radius: 8px;
}

.savings-total-label {
  font-size: 13px;
  color: #8b949e;
}

.savings-total-value {
  font-size: 24px;
  font-weight: 700;
  color: #3fb950;
}

.savings-table {
  width: 100%;
}

.savings-table-header {
  display: grid;
  grid-template-columns: 220px 1fr 100px;
  gap: 12px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #30363d;
  margin-bottom: 4px;
}

.savings-table-row {
  display: grid;
  grid-template-columns: 220px 1fr 100px;
  gap: 12px;
  padding: 8px;
  align-items: start;
  border-radius: 6px;
  transition: background 0.15s;
}

.savings-table-row:hover {
  background: rgba(88, 166, 255, 0.06);
}

.savings-col-site {
  font-size: 13px;
  color: #c9d1d9;
}

.savings-col-site a {
  color: #58a6ff;
  text-decoration: none;
}

.savings-col-site a:hover {
  text-decoration: underline;
}

.savings-col-desc {
  font-size: 12px;
  color: #8b949e;
}

.savings-col-amount {
  font-size: 13px;
  font-weight: 600;
  color: #3fb950;
  text-align: right;
}

/* Rate Comparison Matrix */
.rate-matrix-group {
  margin-bottom: 24px;
}

.rate-matrix-group:last-child {
  margin-bottom: 0;
}

.rate-matrix-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #30363d;
}

.rate-matrix-supplier {
  font-size: 15px;
  font-weight: 600;
  color: #c9d1d9;
}



.rate-matrix-table {
  width: 100%;
}

.rate-matrix-table-header {
  display: grid;
  grid-template-columns: 1fr 120px 100px 100px 100px 100px 90px;
  gap: 12px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #21262d;
  margin-bottom: 4px;
}

.rate-matrix-row {
  display: grid;
  grid-template-columns: 1fr 120px 100px 100px 100px 100px 90px;
  gap: 12px;
  padding: 8px;
  align-items: center;
  border-radius: 6px;
  font-size: 13px;
  color: #8b949e;
  transition: background 0.15s;
}

.rate-matrix-row:hover {
  background: rgba(88, 166, 255, 0.06);
}

.rate-col-site {
  color: #c9d1d9;
  font-weight: 500;
}

.rate-col-tarif {
  font-size: 12px;
}

.rate-col-rate {
  text-align: right;
}

.rate-col-fixed {
  text-align: right;
}

.rate-col-kwh {
  text-align: right;
}

.rate-col-total {
  text-align: right;
  font-weight: 500;
  color: #c9d1d9;
}



/* Market comparison — Bundesland reference grid */
.market-reference-grid {
  margin-bottom: 8px;
}
.market-ref-header {
  display: grid;
  grid-template-columns: 160px 1fr 100px 1fr 100px;
  gap: 12px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #21262d;
  margin-bottom: 4px;
}
.market-ref-row {
  display: grid;
  grid-template-columns: 160px 1fr 100px 1fr 100px;
  gap: 12px;
  padding: 6px 8px;
  font-size: 13px;
  color: #8b949e;
  border-radius: 6px;
  transition: background 0.15s;
}
.market-ref-row:hover {
  background: rgba(88, 166, 255, 0.06);
}
.market-ref-bl {
  color: #c9d1d9;
  font-weight: 500;
}

.market-updated-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
}

.market-updated-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8b949e;
  font-size: 13px;
}

.market-refresh-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Add chart placeholder */
.add-chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px;
  border: 2px dashed #30363d;
  border-radius: 12px;
  color: #484f58;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 28px;
}
.add-chart-placeholder:hover {
  border-color: #58a6ff;
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.03);
}
.add-chart-placeholder span {
  font-size: 14px;
  font-weight: 500;
}

/* Insight Sections — shared structure */
.insight-section {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  margin-bottom: 28px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.insight-section:hover {
  border-color: #484f58;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
.insight-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #21262d;
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.03) 0%, transparent 60%);
}
.insight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.insight-section:hover .insight-icon {
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(88, 166, 255, 0.2);
}
.insight-icon.structure {
  background: rgba(31, 188, 156, 0.12);
  color: #1fbc9c;
}
.insight-section:hover .insight-icon.structure {
  box-shadow: 0 0 16px rgba(31, 188, 156, 0.2);
}
.insight-icon.audit {
  background: rgba(210, 153, 34, 0.12);
  color: #d29922;
}
.insight-section:hover .insight-icon.audit {
  box-shadow: 0 0 16px rgba(210, 153, 34, 0.2);
}
.insight-icon.efficiency {
  background: rgba(248, 81, 73, 0.12);
  color: #f85149;
}
.insight-section:hover .insight-icon.efficiency {
  box-shadow: 0 0 16px rgba(248, 81, 73, 0.2);
}
.insight-title {
  font-size: 18px;
  font-weight: 600;
  color: #e6edf3;
  margin: 0 0 2px;
}
.insight-subtitle {
  font-size: 13px;
  color: #8b949e;
  margin: 0;
}
.insight-body {
  padding: 24px;
}

/* Section 1 — Cost Benchmarking horizontal bar chart */
.benchmark-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}
.benchmark-avg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(88, 166, 255, 0.5);
  z-index: 2;
  pointer-events: none;
}
.benchmark-avg::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  width: 10px;
  background: linear-gradient(90deg, transparent, rgba(88, 166, 255, 0.08), transparent);
}
.benchmark-avg-label {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: #58a6ff;
  white-space: nowrap;
  background: #161b22;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(88, 166, 255, 0.3);
}
.benchmark-row {
  display: grid;
  grid-template-columns: 200px 1fr 100px;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  transition: background 0.15s ease;
  border-radius: 6px;
}
.benchmark-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.benchmark-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.benchmark-site {
  font-size: 13px;
  font-weight: 500;
  color: #e6edf3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.benchmark-kwh {
  font-size: 11px;
  color: #6e7681;
}
.benchmark-bar-container {
  height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.benchmark-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.benchmark-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  border-radius: 6px 6px 0 0;
}
.bar-good {
  background: linear-gradient(90deg, #238636, #3fb950);
}
.bar-warn {
  background: linear-gradient(90deg, #9e6a03, #d29922);
}
.bar-alert {
  background: linear-gradient(90deg, #da3633, #f85149);
}
.benchmark-value {
  font-size: 14px;
  font-weight: 600;
  color: #e6edf3;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Section 2 — Cost Structure stacked bars */
.structure-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid #21262d;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #8b949e;
  font-weight: 500;
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.legend-dot.energie {
  background: #58a6ff;
}
.legend-dot.netz {
  background: #1fbc9c;
}
.legend-dot.abgaben {
  background: #d29922;
}
.structure-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.structure-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.structure-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.structure-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.structure-site {
  font-size: 13px;
  font-weight: 500;
  color: #e6edf3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.structure-total {
  font-size: 11px;
  color: #6e7681;
  font-variant-numeric: tabular-nums;
}
.structure-bar {
  display: flex;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.structure-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  transition: filter 0.15s ease;
  position: relative;
  overflow: hidden;
}
.structure-segment::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
}
.structure-row:hover .structure-segment {
  filter: brightness(1.1);
}
.structure-segment.energie {
  background: linear-gradient(135deg, #388bfd, #58a6ff);
}
.structure-segment.netz {
  background: linear-gradient(135deg, #17a085, #1fbc9c);
}
.structure-segment.abgaben {
  background: linear-gradient(135deg, #9e6a03, #d29922);
}

/* Section 3 — Rate Audit */
.audit-subtitle {
  font-size: 15px;
  font-weight: 600;
  color: #e6edf3;
  margin: 0 0 16px;
}
.audit-expected {
  font-size: 12px;
  font-weight: 400;
  color: #6e7681;
}
.audit-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-success {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.3);
}
.badge-warning {
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, 0.3);
}
.row-flagged {
  background: rgba(210, 153, 34, 0.05) !important;
}
.row-flagged:hover {
  background: rgba(210, 153, 34, 0.08) !important;
}

/* Section 4 — Fixed Cost Efficiency */
.efficiency-alert {
  background: rgba(248, 81, 73, 0.06) !important;
}
.efficiency-alert:hover {
  background: rgba(248, 81, 73, 0.1) !important;
}
.efficiency-warn {
  background: rgba(210, 153, 34, 0.04) !important;
}
.efficiency-warn:hover {
  background: rgba(210, 153, 34, 0.07) !important;
}
.efficiency-ok {
  background: transparent;
}
.ratio-bar-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.ratio-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #d29922, #f85149);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.ratio-label {
  font-size: 13px;
  font-weight: 600;
  color: #e6edf3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.detail-link {
  font-size: 12px;
  font-weight: 500;
  color: #58a6ff;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.detail-link:hover {
  color: #79c0ff;
  text-decoration: none;
}

/* Callout cards — alert banners with icon + text, colored left border */
.insight-callouts {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #c9d1d9;
  transition: background 0.15s ease;
}
.callout:hover {
  background: rgba(255, 255, 255, 0.02);
}
.callout iconify-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.callout-alert {
  background: rgba(248, 81, 73, 0.06);
}
.callout-alert iconify-icon {
  color: #f85149;
}
.callout-warn {
  background: rgba(210, 153, 34, 0.06);
}
.callout-warn iconify-icon {
  color: #d29922;
}
.callout-info {
  background: rgba(88, 166, 255, 0.06);
}
.callout-info iconify-icon {
  color: #58a6ff;
}

/* Insights data tables — inherit base data-table but override for insights context */
.insight-body .data-table {
  margin: 0;
}
.insight-body .data-table th {
  background: rgba(255, 255, 255, 0.02);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.insight-body .data-table td {
  font-variant-numeric: tabular-nums;
}
.insight-body .data-table .font-mono {
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  font-size: 12px;
}

/* Responsive: insights page on smaller screens */
@media (max-width: 1024px) {
  .benchmark-row {
    grid-template-columns: 150px 1fr 70px;
  }
  .structure-row {
    grid-template-columns: 150px 1fr;
  }
}
@media (max-width: 768px) {
  .benchmark-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .benchmark-label {
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
  }
  .structure-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .insight-body {
    padding: 16px;
    overflow-x: auto;
  }
  .insight-body .data-table {
    min-width: 600px;
  }
}

/* Section icons */
.insight-icon.trend {
  background: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
}

.insight-icon.savings {
  background: rgba(63, 185, 80, 0.12);
  color: #3fb950;
}

.insight-icon.rates {
  background: rgba(210, 168, 255, 0.12);
  color: #d2a8ff;
}

/* ============================================================================
   INTERACTIVE ANALYSIS BUILDER
   ============================================================================ */

.insight-icon.analysis {
  background: rgba(210, 168, 255, 0.12);
  color: #d2a8ff;
}

/* Preset buttons row */
.preset-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.preset-btn:hover {
  color: #e6edf3;
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.08);
}

/* Controls + Chart side-by-side layout */
.analysis-builder-section {
  overflow: visible;
}
.analysis-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  min-height: 300px;
}

/* Controls panel — stretches to chart height */
.analysis-controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #21262d;
  border-radius: 8px;
  align-self: stretch;
  min-height: 0;
}
.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.control-group-tight {
  gap: 4px;
}
.control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.control-label {
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.control-actions {
  display: flex;
  gap: 4px;
}
.control-action-btn {
  background: none;
  border: none;
  color: #58a6ff;
  font-size: 11px;
  cursor: pointer;
  padding: 0 4px;
}
.control-action-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}

/* Supplier checklist — uses all available height in controls panel */
/* Compact filter dropdowns */
.analysis-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.filter-dropdown {
  position: relative;
}
.filter-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.filter-trigger:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #484f58;
}
.filter-dropdown.open .filter-trigger {
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.06);
}
.filter-count {
  margin-left: auto;
  color: #6e7681;
  font-size: 11px;
}
.filter-chevron {
  color: #6e7681;
  transition: transform 0.15s;
}
.filter-dropdown.open .filter-chevron {
  transform: rotate(180deg);
}
.filter-menu {
  display: none;
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  background: #1c2128;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  max-height: 220px;
  overflow-y: auto;
}
.filter-dropdown.open .filter-menu {
  display: block;
}
.filter-menu-actions {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #21262d;
}
.filter-menu-actions button {
  flex: 1;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #30363d;
  border-radius: 4px;
  color: #8b949e;
  font-size: 11px;
  cursor: pointer;
}
.filter-menu-actions button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #c9d1d9;
}
.filter-options {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.filter-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #c9d1d9;
  transition: background 0.1s;
}
.filter-option:hover {
  background: rgba(255, 255, 255, 0.04);
}
.filter-option input[type="checkbox"] {
  accent-color: #58a6ff;
  margin: 0;
}

/* Metric + Group-by toggle buttons */
.metric-toggles,
.groupby-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.toggle-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.toggle-btn:hover {
  color: #e6edf3;
  border-color: #484f58;
}
.toggle-btn.active {
  background: rgba(88, 166, 255, 0.15);
  border-color: #58a6ff;
  color: #58a6ff;
}
.toggle-btn input[type="radio"],
.toggle-btn input[type="checkbox"] {
  display: none;
}

/* Analysis chart area */
.analysis-chart {
  min-height: 200px;
}

/* Metric legend (multi-select) */
.metric-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border: 1px solid #21262d;
  flex-wrap: wrap;
}
.metric-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8b949e;
}
.metric-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Analysis legend */
.analysis-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  border: 1px solid #21262d;
  flex-wrap: wrap;
}

/* ============================================================================
   EXPORT BUTTONS & API CONNECT
   ============================================================================ */

.export-buttons {
  display: flex;
  gap: 8px;
}
.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #8b949e;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.export-btn:hover {
  color: #e6edf3;
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.08);
}

/* Section-level "Connect via API" button */
.insight-header {
  position: relative;
}
.insight-header-text {
  flex: 1;
  min-width: 0;
}
.section-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.insight-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.export-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #6e7681;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.export-btn-sm:hover {
  color: #e6edf3;
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.06);
}
.api-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #6e7681;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.api-connect-btn:hover {
  color: #d2a8ff;
  border-color: #d2a8ff;
  background: rgba(210, 168, 255, 0.08);
}

/* ============================================================================
   DRILL-DOWN UX
   ============================================================================ */

/* Breadcrumb trail */
.chart-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.reset-drill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 14px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: #1f6feb;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.reset-drill-btn:hover {
  background: #388bfd;
}

.drill-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.breadcrumb-link {
  color: #58a6ff;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb-link:hover {
  text-decoration: underline;
}
.breadcrumb-sep {
  color: #484f58;
  font-size: 14px;
}
.breadcrumb-current {
  color: #e6edf3;
  font-weight: 600;
}

/* Sub-level dimension selector (inside chart fragment when drilled) */
.sublevel-dim-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #21262d;
  border-radius: 6px;
}
.sublevel-dim-selector .control-label {
  font-size: 12px;
  color: #8b949e;
  white-space: nowrap;
}
.sublevel-dim-selector .toggle-btn {
  padding: 4px 12px;
  font-size: 12px;
}

/* Drill hint text */
.drill-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6e7681;
  margin-bottom: 12px;
  padding: 6px 12px;
  background: rgba(88, 166, 255, 0.04);
  border: 1px solid rgba(88, 166, 255, 0.1);
  border-radius: 6px;
}
.drill-hint iconify-icon {
  color: #58a6ff;
}

/* Drillable bars — extra column for drill indicator + hover effect */
.benchmark-row.drillable {
  grid-template-columns: 200px 1fr 100px 20px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.benchmark-row.drillable:hover {
  background: rgba(88, 166, 255, 0.06);
}
.benchmark-row.drillable:hover .benchmark-bar {
  filter: brightness(1.15);
}

/* Drill indicator (chevron/link icon on right) */
.drill-indicator {
  display: flex;
  align-items: center;
  color: #484f58;
  transition: color 0.15s;
  flex-shrink: 0;
}
.benchmark-row.drillable:hover .drill-indicator {
  color: #58a6ff;
}

/* Grouped multi-metric bars */
.benchmark-group {
  border-radius: 6px;
  transition: background 0.15s ease;
  cursor: pointer;
}
.benchmark-group:hover {
  background: rgba(88, 166, 255, 0.06);
}
.benchmark-group:hover .benchmark-bar {
  filter: brightness(1.15);
}
.benchmark-group:hover .drill-indicator {
  color: #58a6ff;
}
.benchmark-sub-row {
  padding-top: 2px;
  padding-bottom: 2px;
}
.benchmark-group.drillable > .benchmark-row:first-child {
  grid-template-columns: 200px 1fr 100px 20px;
}
.benchmark-sub-row .benchmark-label {
  font-size: 11px;
  color: #6e7681;
  font-weight: 400;
}

/* Drill-down dimension popover */
.benchmark-group {
  position: relative;
}
.drill-popover {
  display: none;
  position: absolute;
  z-index: 50;
  min-width: 180px;
  background: #1c2128;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.drill-popover.open {
  display: block;
}
.drill-popover-header {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #6e7681;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.drill-popover-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: #c9d1d9;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s ease;
}
.drill-popover-option:hover {
  background: rgba(88, 166, 255, 0.1);
  color: #58a6ff;
  text-decoration: none;
}

/* Responsive: stack controls on small screens */
@media (max-width: 900px) {
  .analysis-layout {
    grid-template-columns: 1fr;
  }
  .export-buttons {
    flex-wrap: wrap;
  }
  .api-connect-btn {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* AP Analysis page */
.ap-analysis-page {
  margin: 0 -24px;
}
.ap-analysis-page .insights-month-bar {
  margin: 0;
  padding: 12px 24px;
  margin-bottom: 24px;
}
.ap-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 24px;
}
.ap-charts-grid .ap-chart-card:first-child {
  grid-column: 1 / -1;
}
.ap-chart-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
}
.ap-chart-header {
  padding: 16px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ap-chart-header h3 {
  color: #c9d1d9;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.ap-chart-body {
  padding: 16px 20px 20px;
  position: relative;
  height: 350px;
}
.ap-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #484f58;
  gap: 12px;
  height: 100%;
  width: 100%;
}
.ap-chart-empty span {
  font-size: 14px;
}
@media (max-width: 900px) {
  .ap-charts-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   ENERGY PORTFOLIO PAGE
   Card-based layout matching insights/analysis pages
   ============================================================================ */

.energy-portfolio-page {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0 16px 40px;
  margin: -24px;
  margin-bottom: 0;
}
.energy-portfolio-page .insights-month-bar {
  margin: 0 -16px;
  padding: 12px 24px;
  margin-bottom: 24px;
}
.energy-portfolio-page .insight-section {
  margin: 0 8px 24px;
}