:root {
  --sidebar-width: 280px;

  /* Purple */
  --color-purple-dark:    #3D1F6B;
  --color-purple:         #72369D;
  --color-purple-mid:     #9F5FBF;
  --color-purple-soft:    #E8D5F5;
  --color-purple-pale:    #FAF5FF;

  /* Blue */
  --color-blue-dark:      #1A5F80;
  --color-blue:           #2E86AB;
  --color-blue-light:     #5AAECF;
  --color-blue-pale:      #D8EAF4;

  /* Orange */
  --color-orange-dark:    #C24700;
  --color-orange:         #E07A40;
  --color-orange-pale:    #FAE5D6;

  /* Neutrals */
  --color-text-primary:   #2D1A3A;
  --color-text-secondary: #6A5A80;
  --color-text-muted:     #B898D4;

  /* Functional */
  --color-success:        #16A34A;
  --color-success-bg:     #D4E8D0;
  --color-warning:        #D97706;
  --color-warning-bg:     #FEF3C7;
  --color-error:          #DC2626;
  --color-error-bg:       #FEE2E2;

  /* Page chrome */
  --color-bg-page:        #F7F6F8;
}

/* ── Bootstrap overrides ── */

/* Buttons */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-purple-dark);
  --bs-btn-border-color: var(--color-purple-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-purple);
  --bs-btn-hover-border-color: var(--color-purple);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-purple);
  --bs-btn-active-border-color: var(--color-purple);
  --bs-btn-disabled-bg: var(--color-purple-mid);
  --bs-btn-disabled-border-color: var(--color-purple-mid);
}

.btn-secondary {
  --bs-btn-color: var(--color-text-primary);
  --bs-btn-bg: var(--color-purple-soft);
  --bs-btn-border-color: var(--color-purple-soft);
  --bs-btn-hover-color: var(--color-text-primary);
  --bs-btn-hover-bg: var(--color-purple-mid);
  --bs-btn-hover-border-color: var(--color-purple-mid);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--color-purple-mid);
  --bs-btn-active-border-color: var(--color-purple-mid);
  --bs-btn-active-color: #fff;
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-success);
  --bs-btn-border-color: var(--color-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #15803d;
  --bs-btn-hover-border-color: #15803d;
  --bs-btn-active-bg: #15803d;
  --bs-btn-active-border-color: #15803d;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-error);
  --bs-btn-border-color: var(--color-error);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
  --bs-btn-active-bg: #b91c1c;
  --bs-btn-active-border-color: #b91c1c;
}

.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-warning);
  --bs-btn-border-color: var(--color-warning);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b45309;
  --bs-btn-hover-border-color: #b45309;
  --bs-btn-active-bg: #b45309;
  --bs-btn-active-border-color: #b45309;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-text-primary);
  --bs-btn-border-color: var(--color-text-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-purple-dark);
  --bs-btn-hover-border-color: var(--color-purple-dark);
  --bs-btn-active-bg: var(--color-purple-dark);
  --bs-btn-active-border-color: var(--color-purple-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-purple-dark);
  --bs-btn-border-color: var(--color-purple-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-purple-dark);
  --bs-btn-hover-border-color: var(--color-purple-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-purple-dark);
  --bs-btn-active-border-color: var(--color-purple-dark);
}

.btn-outline-secondary {
  --bs-btn-color: var(--color-text-secondary);
  --bs-btn-border-color: var(--color-purple-soft);
  --bs-btn-hover-color: var(--color-text-primary);
  --bs-btn-hover-bg: var(--color-purple-pale);
  --bs-btn-hover-border-color: var(--color-purple-mid);
  --bs-btn-active-color: var(--color-text-primary);
  --bs-btn-active-bg: var(--color-purple-soft);
  --bs-btn-active-border-color: var(--color-purple-mid);
}

.btn-outline-danger {
  --bs-btn-color: var(--color-error);
  --bs-btn-border-color: var(--color-error);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-error);
  --bs-btn-hover-border-color: var(--color-error);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b91c1c;
  --bs-btn-active-border-color: #b91c1c;
}

.btn-link {
  --bs-btn-color: var(--color-blue);
  --bs-btn-hover-color: var(--color-blue-dark);
}

/* Alerts */
.alert-success {
  --bs-alert-color: var(--color-success);
  --bs-alert-bg: var(--color-success-bg);
  --bs-alert-border-color: var(--color-success);
  --bs-alert-link-color: var(--color-success);
}

.alert-warning {
  --bs-alert-color: var(--color-warning);
  --bs-alert-bg: var(--color-warning-bg);
  --bs-alert-border-color: var(--color-warning);
  --bs-alert-link-color: var(--color-warning);
}

.alert-danger {
  --bs-alert-color: var(--color-error);
  --bs-alert-bg: var(--color-error-bg);
  --bs-alert-border-color: var(--color-error);
  --bs-alert-link-color: var(--color-error);
}

.alert-info {
  --bs-alert-color: var(--color-blue-dark);
  --bs-alert-bg: var(--color-blue-pale);
  --bs-alert-border-color: var(--color-blue);
  --bs-alert-link-color: var(--color-blue-dark);
}

/* Badges */
.badge.bg-primary, .badge.text-bg-primary {
  background-color: var(--color-purple-dark) !important;
  color: #fff;
}

.badge.bg-secondary, .badge.text-bg-secondary {
  background-color: var(--color-purple-soft) !important;
  color: var(--color-text-primary);
}

.badge.bg-success, .badge.text-bg-success {
  background-color: var(--color-success-bg) !important;
  color: var(--color-success);
}

.badge.bg-warning, .badge.text-bg-warning {
  background-color: var(--color-warning-bg) !important;
  color: var(--color-warning);
}

.badge.bg-danger, .badge.text-bg-danger {
  background-color: var(--color-error-bg) !important;
  color: var(--color-error);
}

/* Form focus */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-purple-mid);
  box-shadow: 0 0 0 0.2rem rgba(114, 54, 157, 0.2);
}

/* Table */
.table-light th, .table-light td {
  background-color: var(--color-purple-pale);
}

.btn-primary-cta {
  background-color: var(--color-purple-dark);
  color: #fff;
  border: none;
}
.btn-primary-cta:hover { background-color: var(--color-purple); color: #fff; }

.btn-ghost-action {
  background-color: transparent;
  color: var(--color-blue);
  border: 1.5px solid var(--color-blue);
}
.btn-ghost-action:hover {
  background-color: var(--color-blue-pale);
  color: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
}


/* ── Brand background utilities ── */
.bg-purple-dark { background-color: var(--color-purple-dark); }
.bg-purple      { background-color: var(--color-purple); }
.bg-purple-pale { background-color: var(--color-purple-pale); }
.bg-blue        { background-color: var(--color-blue); }
.bg-blue-pale   { background-color: var(--color-blue-pale); }
.bg-orange      { background-color: var(--color-orange); }

/* ── Brand text utilities ── */
.text-purple      { color: var(--color-purple); }
.text-purple-dark { color: var(--color-purple-dark); }
.text-blue        { color: var(--color-blue); }
.text-orange      { color: var(--color-orange); }
.text-body        { color: var(--color-text-primary); }
.text-body-secondary { color: var(--color-text-secondary); }

.index-nav {
  background-color: var(--color-purple-pale);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.index-nav-brand {
  font-family: "Space Grotesk", sans-serif;
  color: var(--color-purple-dark);
  letter-spacing: 0.02em;
}

.index-hero-heading {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.8rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--color-purple-dark);
}

.index-hero-highlight {
  color: var(--color-orange-dark);
  display: block;
}

.index-hero-lead { max-width: 560px; }

.index-color-circle {
  width: 190px;
  height: 190px;
  background-color: var(--color-purple);
}

.index-card-heading {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.index-card-icon { font-size: 1.75rem; opacity: 0.8; }

.index-usp-statement {
  font-size: 1.2rem;
  color: var(--color-text-secondary);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 0 2rem;
}

.index-app-mockup {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(61, 31, 107, 0.13);
  overflow: hidden;
}

.index-mockup-header {
  background-color: var(--color-purple-dark);
  color: #ffffff;
  padding: 0.85rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
}

.index-mockup-meta {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.index-mockup-body { padding: 0.25rem 0; }

.index-mockup-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid var(--color-purple-pale);
  font-size: 0.83rem;
}

.index-mockup-serie {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  min-width: 1.8rem;
}

.index-mockup-desc {
  flex: 1;
  color: var(--color-text-primary);
}

.index-mockup-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.83rem;
  min-width: 6.5rem;
  text-align: right;
}

.index-mockup-amount.positive { color: var(--color-success); }
.index-mockup-amount.negative { color: var(--color-error); }

.index-mockup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  background-color: var(--color-purple-pale);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.index-mockup-result {
  font-variant-numeric: tabular-nums;
  color: var(--color-purple);
  font-weight: 700;
}

.index-card-purple { background-color: var(--color-purple); }
.index-card-blue   { background-color: var(--color-blue-dark); }
.index-card-orange { background-color: var(--color-orange-dark); }

@media (prefers-reduced-motion: no-preference) {
  .index-app-mockup {
    opacity: 0;
    animation: index-mockup-in 0.5s ease-out 0.1s forwards;
  }

  .index-mockup-row,
  .index-mockup-footer {
    opacity: 0;
    animation: index-row-in 0.4s ease-out forwards;
  }

  .index-mockup-row:nth-child(1) { animation-delay: 0.5s; }
  .index-mockup-row:nth-child(2) { animation-delay: 0.65s; }
  .index-mockup-row:nth-child(3) { animation-delay: 0.8s; }
  .index-mockup-row:nth-child(4) { animation-delay: 0.95s; }
  .index-mockup-footer { animation-delay: 1.1s; }
}

@keyframes index-mockup-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes index-row-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

.auth-panel { background-color: var(--color-purple-dark); width: 38%; }

.auth-card { width: 100%; max-width: 420px; }
.auth-card-wide { max-width: 520px; }

.auth-brand {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.02em;
}

.auth-step-label {
  display: block;
  color: var(--color-purple-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.auth-hero-heading {
  font-family: "Space Grotesk", sans-serif;
}

.auth-hero-highlight { color: var(--color-purple-soft); }

.auth-hero-lead { color: rgba(255, 255, 255, 0.75); max-width: 360px; }

.auth-copyright { color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; }

.auth-back-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
}
.auth-back-link:hover { color: var(--color-purple-dark); text-decoration: underline; }

.auth-link-strong {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: none;
}
.auth-link-strong:hover { color: var(--color-blue-dark); text-decoration: underline; }

.auth-link { color: var(--color-blue); text-decoration: none; }
.auth-link:hover { color: var(--color-blue-dark); text-decoration: underline; }

.auth-form .mb-3 { margin-bottom: 0.75rem; }

.otp-input {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.otp-box {
  width: 3rem;
  height: 3.5rem;
  padding: 0;
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

@media (max-width: 360px) {
  .otp-box { width: 2.5rem; height: 3rem; font-size: 1.25rem; }
}

.pill-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pill-toggle-option { flex: 1; }

.pill-toggle-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pill-toggle-option label {
  display: block;
  text-align: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-purple-soft);
  border-radius: 50rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  margin: 0;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pill-toggle-option input[type="radio"]:checked + label {
  background-color: var(--color-purple-dark);
  border-color: var(--color-purple-dark);
  color: #fff;
}

.pill-toggle-option input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--color-purple-mid);
  outline-offset: 2px;
}

.sidebar-nav-scroll {
  overflow-y: auto;
  min-height: 0;
}

.sidebar-footer {
  padding-top: 0.25rem;
}

.sidebar-company-btn {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebar-company-btn:hover,
.sidebar-company-btn:focus,
.sidebar-company-btn.show {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  outline: none;
}

.sidebar-logout-btn {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}

.sidebar-logout-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Dropdown brand colors */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-purple-pale);
  color: var(--color-purple-dark);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-purple-soft);
  color: var(--color-purple-dark);
}

.sidebar {
  width: var(--sidebar-width);
  background-color: var(--color-purple-dark) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-margin {
  margin-left: var(--sidebar-width);
  background-color: var(--color-bg-page);
  min-height: 100vh;
}

.sidebar .sidebar-brand-link {
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.sidebar hr {
  border-color: rgba(255, 255, 255, 0.15);
  opacity: 1;
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.85);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
}

.sidebar .nav-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

.sidebar .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.16);
  font-weight: 600;
}

.sidebar .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.15);
  opacity: 1;
}

.sidebar .nav-link i {
  color: rgba(255, 255, 255, 0.65);
}

.sidebar .nav-link:hover i {
  color: #fff;
}

.sidebar .nav-link.active i {
  color: #fff;
}

.sidebar-section-label {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.5rem 0.15rem;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.5);
}

.sidebar-section-label i {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.95rem;
}


input[readonly]{
  color: #787878;
}

.asteriskField {
  display: none;
}

.verification-attachment {
  height: 150px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.verification-attachment:hover {
  border-color: var(--color-purple-mid) !important;
}

.empty-verification-attachment:hover {
  background-color: var(--color-purple-soft) !important;
}

.rounded-4.border,
.dashboard-card {
  border-color: var(--color-purple-soft) !important;
  box-shadow: 0 1px 3px rgba(61, 31, 107, 0.1);
}

.clickable-row {
  cursor: pointer;
  user-select: none;
}

.clickable-row:hover {
  background-color: var(--color-purple-pale);
}

.clickable-row i {
  display: inline-block;
  transition: transform 0.2s ease;
}

.clickable-row[aria-expanded="true"] i {
  transform: rotate(90deg);
}

/* Report tables (balance sheet, income statement) */
.report-thead th {
  background-color: transparent;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 0.6rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-purple-soft);
}
.report-row-detail {
  background-color: var(--color-purple-pale);
}
.report-row-subtotal td {
  background-color: var(--color-purple-pale);
  font-weight: 600;
  color: var(--color-text-primary);
}
.report-row-total td {
  background-color: var(--color-purple-dark);
  color: #fff;
  font-weight: 700;
}
.report-row-highlight td {
  background-color: var(--color-blue-pale);
  color: var(--color-blue-dark);
  font-weight: 600;
}
.report-row-result td {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  font-weight: 700;
}

/* ── Modern list tables ── */
.table-list {
  --bs-border-color: var(--color-purple-soft);
}

.table-list > tbody > tr > td {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.table-list > tbody > tr:last-child > td {
  border-bottom-width: 0;
}

/* Rows that navigate on click (paired with .clickable-row + data-href) */
.table-clickable {
  --bs-table-hover-bg: var(--color-purple-pale);
}

.table-row-chevron {
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.clickable-row:hover .table-row-chevron {
  opacity: 1;
  transform: translateX(0);
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.status-dot-error   { background-color: var(--color-error); }
.status-dot-warning { background-color: var(--color-warning); }
.status-dot-success { background-color: var(--color-success); }

/* VAT report */
.vat-field { margin-bottom: 1.1rem; }
.vat-field .vat-label {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.25rem;
  display: block;
  min-height: 2.4em;
}
.vat-box {
  display: flex;
  align-items: center;
  background: var(--color-purple-pale);
  border: 1px solid var(--color-purple-soft);
  border-radius: 0.375rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.95rem;
}
.vat-num {
  font-weight: 700;
  color: var(--color-purple-mid);
  margin-right: 0.75rem;
  min-width: 1.6rem;
  font-size: 0.8rem;
}
.vat-amount { flex: 1; }
.vat-toggle {
  background: none;
  border: none;
  padding: 0 0 0 0.5rem;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.vat-toggle:hover { color: var(--color-purple); }
.vat-accounts {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  padding: 0.4rem 0.5rem 0;
}
.vat-accounts .row { border-bottom: 1px solid var(--color-purple-soft); padding: 0.15rem 0; }
.vat-section-header {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
.vat-result-box {
  background: var(--color-purple-pale);
  border: 1px solid var(--color-purple-soft);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vat-result-box.skuld { background: var(--color-error-bg); border-color: var(--color-error); }
.vat-result-box.fordran { background: var(--color-success-bg); border-color: var(--color-success); }

@media print {
  .sidebar,
  .no-print {
    display: none !important;
  }

  .sidebar-margin {
    margin-left: 0 !important;
    background-color: #fff !important;
  }

  .bg-white {
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
  }

  .collapse:not(.show) {
    display: table-row !important;
  }
}

.invoice-message-col .mb-3 { height: calc(100% - 1rem); display: flex; flex-direction: column; margin-bottom: 0 !important; }
.invoice-message-col .mb-3 textarea { flex: 1; resize: none; min-height: 60px; }
/* ── Account autocomplete ── */

.autocomplete-wrapper {
  position: relative;
}

.autocomplete-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-top: 2px;
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  padding: 0.25rem 0;
  margin-bottom: 0;
}

.autocomplete-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
}

.autocomplete-item:hover,
.autocomplete-item.active {
  background: var(--color-purple-pale);
}

.autocomplete-number {
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 3rem;
}

.autocomplete-desc {
  color: var(--color-text-primary);
}

/* ── Verification entries grid ── */

.entries-header {
  display: grid;
  grid-template-columns: 1fr 110px 110px 32px;
  gap: 0.5rem;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.entries-row {
  display: grid;
  grid-template-columns: 1fr 110px 110px 32px;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--color-purple-soft);
}

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

.entries-row:hover {
  background-color: var(--color-purple-pale);
  border-radius: 0.5rem;
}

.invoice-email-preview { background-color: var(--color-bg-page); }
.invoice-email-preview-label { color: var(--color-text-muted); }
.invoice-email-preview-message { color: var(--color-text-muted); white-space: pre-wrap; }
.invoice-email-preview-message--empty { font-style: italic; }

.skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--color-purple-pale) 25%, var(--color-purple-soft) 50%, var(--color-purple-pale) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}