:root {
  --wdo-green-950: #092418;
  --wdo-green-900: #0d3020;
  --wdo-green-800: #155c36;
  --wdo-green-600: #16864b;
  --wdo-green-100: #e8f7ee;
  --wdo-blue-100: #eaf3ff;
  --wdo-blue-700: #174f83;
  --wdo-amber-100: #fff5dc;
  --wdo-amber-700: #74510a;
  --wdo-purple-100: #f2ecff;
  --wdo-purple-700: #55328a;
  --wdo-red-100: #fff0f0;
  --wdo-red-700: #a12525;
  --wdo-border: #d9e6de;
  --wdo-text: #17211c;
  --wdo-muted: #68776e;
  --wdo-shadow: 0 14px 36px rgba(18, 58, 38, .09);
}

body {
  background:
    radial-gradient(circle at 85% 0%, rgba(22,134,75,.07), transparent 26rem),
    #f3f7f5;
  color: var(--wdo-text);
}

.shell {
  background: transparent;
}

aside {
  background:
    linear-gradient(180deg, var(--wdo-green-950), #0c2b1d 55%, #102f21);
  box-shadow: 12px 0 35px rgba(5, 30, 18, .08);
}

aside .brand,
.brand {
  color: #35c878;
}

aside nav a {
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

aside nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
  transform: translateX(2px);
}

aside nav a.active {
  color: #fff;
  background: linear-gradient(135deg, #1c6640, #16864b);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 9px 22px rgba(0,0,0,.14);
}

main {
  background: transparent;
}

header {
  padding: 4px 0 2px;
}

header h1,
.report-title,
.invoice-create-title {
  color: #10271b;
  letter-spacing: -.035em;
}

.panel,
.dashboard-panel,
.invoice-create-panel,
.recurring-create-panel,
.preview-panel,
.customer-section,
.delete-box,
.payment-form,
.table-wrap,
.summary-card,
.overview-card,
.vat-card {
  border: 1px solid var(--wdo-border);
  border-radius: 18px;
  box-shadow: var(--wdo-shadow);
}

.cards > .panel:nth-child(4n+1),
.summary > .panel:nth-child(4n+1),
.report-summary > .panel:nth-child(4n+1),
.overview-card:nth-child(4n+1) {
  background: var(--wdo-green-100);
  border-color: #bfe6ce;
}

.cards > .panel:nth-child(4n+2),
.summary > .panel:nth-child(4n+2),
.report-summary > .panel:nth-child(4n+2),
.overview-card:nth-child(4n+2) {
  background: var(--wdo-blue-100);
  border-color: #c6dcf7;
}

.cards > .panel:nth-child(4n+3),
.summary > .panel:nth-child(4n+3),
.report-summary > .panel:nth-child(4n+3),
.overview-card:nth-child(4n+3) {
  background: var(--wdo-amber-100);
  border-color: #efdca9;
}

.cards > .panel:nth-child(4n+4),
.summary > .panel:nth-child(4n+4),
.report-summary > .panel:nth-child(4n+4),
.overview-card:nth-child(4n+4) {
  background: var(--wdo-purple-100);
  border-color: #d9caf7;
}

.number,
.summary-number,
.summary-value,
.vat-value,
.card-amount,
.card-count {
  letter-spacing: -.035em;
}

.muted,
.muted-small,
.small,
.section-intro,
.report-note {
  color: var(--wdo-muted);
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

.table-wrap {
  overflow: hidden;
  background: #fff;
}

th {
  background: #eaf4ee;
  color: #294b38;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .035em;
  text-transform: uppercase;
}

th,
td {
  border-color: #e4ece7;
}

tbody tr {
  transition: background .15s ease;
}

tbody tr:hover {
  background: #f2f9f5;
}

td a,
.account-link,
.customer-link,
.product-link,
.invoice-link,
.entry-link,
.review-link {
  color: #126a3b;
  font-weight: 800;
}

input,
select,
textarea,
.readonly-value {
  border: 1px solid #cbd9d1;
  border-radius: 11px;
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--wdo-green-600);
  box-shadow: 0 0 0 4px rgba(22,134,75,.13);
}

button,
.button,
.approve,
.pay-button,
.add-line-button,
.recurring-add-line,
.upload-box button {
  border-radius: 11px;
  background: linear-gradient(135deg, #16864b, #11713e);
  box-shadow: 0 8px 18px rgba(22,134,75,.18);
  transition: transform .16s ease, box-shadow .16s ease;
}

button:hover,
.button:hover,
.approve:hover,
.pay-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px rgba(22,134,75,.24);
}

.button.secondary,
.secondary,
.logout {
  background: #e8efeb;
  color: #243b2e;
  box-shadow: none;
}

.button.warning,
.warning {
  background: var(--wdo-amber-100);
  color: var(--wdo-amber-700);
  border-color: #efdca9;
}

.button.danger,
.delete-button,
.refund {
  background: linear-gradient(135deg, #ba3434, #962424);
  color: #fff;
}

.badge,
.status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 850;
}

.badge,
.status,
.paid,
.positive,
.success {
  background: var(--wdo-green-100);
  color: var(--wdo-green-800);
}

.badge.warning,
.status.paused,
.payable,
.notice {
  background: var(--wdo-amber-100);
  color: var(--wdo-amber-700);
}

.badge.inactive,
.status.ended,
.negative,
.error,
.errorbox,
.notice.error {
  background: var(--wdo-red-100);
  color: var(--wdo-red-700);
}

.badge.service,
.ai-note,
.note,
.status-note {
  background: var(--wdo-blue-100);
  color: var(--wdo-blue-700);
  border-color: #c6dcf7;
}

.toolbar,
.actions,
.invoice-actions,
.recurring-actions {
  gap: 10px;
}

.upload-box {
  border: 2px dashed #a9cdb7;
  border-radius: 18px;
  background: #f1faf5;
}

.document-frame,
.document-image {
  border-radius: 14px;
  border-color: var(--wdo-border);
}

@media (max-width: 850px) {
  aside {
    box-shadow: 0 10px 30px rgba(5,30,18,.12);
  }

  aside nav a:hover {
    transform: none;
  }

  .table-wrap {
    overflow-x: auto;
  }
}

@media (max-width: 520px) {
  main {
    padding: 18px 12px;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  button,
  .button {
    max-width: 100%;
  }
}

/* Mere karakter og tydeligere farveflader */
body {
  background:
    radial-gradient(circle at 92% 4%, rgba(85,50,138,.12), transparent 25rem),
    radial-gradient(circle at 35% 0%, rgba(22,134,75,.13), transparent 32rem),
    #e8efeb;
}

main {
  background:
    linear-gradient(145deg, rgba(255,255,255,.34), rgba(224,236,229,.48));
}

header {
  margin-bottom: 24px;
  padding: 20px 22px;
  border: 1px solid #cfdfd5;
  border-radius: 18px;
  background: rgba(247,251,248,.88);
  box-shadow: 0 10px 28px rgba(18,58,38,.07);
}

.panel,
.dashboard-panel,
.table-wrap,
.summary-card,
.overview-card,
.vat-card {
  background: #f8fbf9;
}

.invoice-create-panel,
.invoice-details,
.invoice-summary,
.invoice-top {
  background: #edf5ff;
  border-color: #bfd8f2;
}

.recurring-create-panel,
.recurring-summary,
.recurring-lines {
  background: #f5f0ff;
  border-color: #d8c9f2;
}

.customer-section,
.detail-list,
.detail-row {
  background: #edf8f1;
  border-color: #bfdfca;
}

.preview-panel,
.review-grid > .panel,
.documents-grid > .panel {
  background: #fff7e5;
  border-color: #ead7a6;
}

.report-grid > .panel,
.report-summary > .panel,
.vat-summary > div,
.tax-summary > div {
  background: #edf5ff;
  border-color: #c5d9ef;
}

.form-grid,
.line-grid,
.invoice-lines,
.recurring-lines,
.payment-grid {
  padding: 16px;
  border-radius: 15px;
  background: rgba(222,237,228,.72);
}

input,
select,
textarea,
.readonly-value {
  background: #f1f6f3;
  border-color: #b7ccbf;
}

input:focus,
select:focus,
textarea:focus {
  background: #fff;
}

table tbody tr:nth-child(even) {
  background: #f1f7f3;
}

table tbody tr:hover {
  background: #e4f2e9;
}

.toolbar {
  padding: 14px;
  border: 1px solid #d0dfd6;
  border-radius: 15px;
  background: #edf5f0;
}

.status-note,
.ai-note,
.note,
.notice {
  border: 1px solid currentColor;
  border-radius: 13px;
  padding: 13px 15px;
}

.delete-box {
  background: #fff2f2;
  border-color: #edc7c7;
}

@media (max-width: 850px) {
  header {
    padding: 16px;
  }
}