:root {
  --color-bg: #F5F5F5;
  --color-surface: #fff;
  --color-text: #000;
  --color-muted: #5c6370;
  --color-border: #CCCCCC;
  --color-accent: #2a9d8f;
  --color-accent-hover: #21867b;
  --color-danger: #CC2936;
  --color-amount-positive: #2a9d8f;
  --color-amount-negative: #CC2936;
  --color-payment-credit-card: #0984e3;
  --color-header-bg: #eaf5f4;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, sans-serif;
  --radius: 8px;

  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 42, 157, 143;
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-hover);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-font-family: var(--font-sans);
  --bs-border-radius: var(--radius);
  --bs-border-color: var(--color-border);

  /* Space between link text and underline substitute (border-bottom) */
  --link-underline-gap: 0.18em;
}

/* Bootstrap buttons use dedicated vars per variant */
.btn-primary {
  --bs-btn-bg: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-bg: var(--color-accent-hover);
  --bs-btn-hover-border-color: var(--color-accent-hover);
  --bs-btn-active-bg: var(--color-accent-hover);
  --bs-btn-active-border-color: var(--color-accent-hover);
  --bs-btn-disabled-bg: var(--color-accent);
  --bs-btn-disabled-border-color: var(--color-accent);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-accent);
  --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-bg: var(--color-accent);
  --bs-btn-hover-border-color: var(--color-accent);
  --bs-btn-active-bg: var(--color-accent-hover);
  --bs-btn-active-border-color: var(--color-accent-hover);
}

body {
  min-height: 100vh;
}

/* Text links: primary color; underline via border-bottom for clearer gap under text */
a:not(.btn) {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

a:not(.btn):hover {
  color: var(--color-accent-hover);
  border-bottom-color: color-mix(in srgb, var(--color-accent-hover) 55%, transparent);
}

a:not(.btn):focus-visible {
  color: var(--color-accent-hover);
  border-bottom-color: color-mix(in srgb, var(--color-accent-hover) 55%, transparent);
}

a:not(.btn):visited {
  color: var(--color-accent);
  border-bottom-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
}

a.navbar-brand:not(.btn) {
  border-bottom: none;
  padding-bottom: 0;
}

/* Link-styled buttons (<a class="btn btn-link">) use primary, not Bootstrap default link blue */
a.btn-link {
  --bs-btn-color: var(--color-accent);
  --bs-btn-hover-color: var(--color-accent-hover);
  --bs-btn-active-color: var(--color-accent-hover);
}

.top-navbar-brandline {
  border-bottom: 1px solid var(--color-border);
  box-shadow: none !important;
  background-color: var(--color-header-bg);
  padding-top: 10px;
  padding-bottom: 10px;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding-top: 56px;
  box-shadow: inset -1px 0 0 var(--color-border);
}

@media (max-width: 767.98px) {
  .sidebar {
    padding-top: 0;
  }
}

/* Sidebar nav: keep black text (override global primary link styles); active uses rules below */
.sidebar .nav-link {
  color: var(--color-text);
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  margin: 0 0.5rem;
}

.sidebar .nav-link:visited:not(.active) {
  color: var(--color-text);
}

.sidebar .nav-link:hover:not(.active) {
  background: rgba(42, 157, 143, 0.08);
  color: var(--color-accent);
}

.sidebar .nav-link:focus-visible:not(.active) {
  color: var(--color-text);
}

/* Active item: override global link colors (:visited, :hover) so state matches all menu entries */
.sidebar .nav-link.active,
.sidebar .nav-link.active:visited {
  background-color: var(--color-accent);
  color: #fff !important;
}

.sidebar .nav-link.active:hover,
.sidebar .nav-link.active:focus-visible {
  background-color: var(--color-accent-hover);
  color: #fff !important;
}

.form-max-width {
  max-width: 42rem;
}

.small-pre {
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0.5rem 0 0;
  max-height: 12rem;
  overflow: auto;
}

.table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* License type badges (fixed palette; label always white) */
.license-type-badge {
  display: inline-block;
  padding: 0.28em 0.65em;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  line-height: 1.25;
  white-space: nowrap;
  vertical-align: middle;
  color: #fff;
}

.license-type-free {
  background: #b2bec3;
}

.license-type-test {
  background: #636e72;
}

.license-type-basic {
  background: #ee5a24;
}

.license-type-pro {
  background: #f79f1f;
}

.license-type-premium {
  background: #ffc312;
  color: #2d3436;
}

.license-type-unknown {
  background: color-mix(in srgb, var(--color-muted) 55%, #4a5560);
  color: #fff;
}

/* License workflow status (Offen / Bezahlt / Test / Gratis) */
.license-status-badge {
  display: inline-block;
  padding: 0.28em 0.65em;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  line-height: 1.25;
  white-space: nowrap;
  vertical-align: middle;
  color: #fff;
}

.license-status-offen {
  background: #cc2936;
}

.license-status-bezahlt {
  background: #2a9d8f;
}

.license-status-test {
  background: #636e72;
}

.license-status-gratis {
  background: #6c5ce7;
}

.license-status-unknown {
  background: color-mix(in srgb, var(--color-muted) 55%, #4a5560);
  color: #fff;
}

/* License payment method (Kreditkarte highlight in lists) */
.payment-method-badge {
  display: inline-block;
  padding: 0.28em 0.65em;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  line-height: 1.25;
  color: #fff;
  vertical-align: middle;
  white-space: nowrap;
  box-sizing: border-box;
}

.payment-method-bank-transfer {
  background: color-mix(in srgb, var(--color-muted) 55%, #4a5560);
}

.payment-method-credit-card {
  background: transparent;
  color: var(--color-payment-credit-card);
  /* inset shadow = border without changing badge height vs. license-type/status badges */
  box-shadow: inset 0 0 0 1px var(--color-payment-credit-card);
}

/* License validity indicator (overview test licenses) */
.license-validity-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  vertical-align: middle;
}

.license-validity-dot--valid {
  background-color: var(--color-accent);
}

.license-validity-dot--invalid {
  background-color: var(--color-danger);
}

/* License overview "Alle Lizenzen": aligned column widths across year tables */
.license-overview-all-years .license-overview-table {
  table-layout: fixed;
  width: 100%;
}

.license-overview-all-years .license-overview-col--customer {
  width: 42%;
}

.license-overview-all-years .license-overview-col--license {
  width: 18%;
}

.license-overview-all-years .license-overview-col--valid-until {
  width: 15%;
}

.license-overview-all-years .license-overview-col--status {
  width: 15%;
}

.license-overview-all-years .license-overview-col--actions {
  width: 10%;
}

.license-overview-all-years .license-overview-table td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Run detail "Ereignisse": aligned column widths across section tables */
.run-events-section .run-events-table {
  table-layout: fixed;
  width: 100%;
}

.run-events-section--import .run-events-col--organization {
  width: 28%;
}

.run-events-section--import .run-events-col--secondary {
  width: 22%;
}

.run-events-section--import .run-events-col--tertiary {
  width: 25%;
}

.run-events-section--import .run-events-col--detail {
  width: 25%;
}

.run-events-section--license-check .run-events-col--organization {
  width: 22%;
}

.run-events-section--license-check .run-events-col--license {
  width: 14%;
}

.run-events-section--license-check .run-events-col--field-a {
  width: 16%;
}

.run-events-section--license-check .run-events-col--field-b {
  width: 16%;
}

.run-events-section--license-check .run-events-col--error {
  width: 32%;
}

.run-events-section .run-events-table td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amount-positive {
  color: var(--color-amount-positive);
}

.amount-negative {
  color: var(--color-amount-negative);
}

.balance-diff-ok {
  color: var(--color-amount-positive);
  font-weight: 600;
}

.balance-diff-warn {
  color: var(--color-amount-negative);
  font-weight: 600;
}