:root {
    --tblr-primary: #16375F;
    --tblr-primary-rgb: 22, 55, 95;

    /* Optional — darker/lighter variants if you want stronger visual consistency */
    --tblr-primary-dark: #102d4c;
    --tblr-primary-light: #1d4a7e;
}

/* Make buttons use your color strongly (Tabler sometimes softens primary) */
.btn-primary {
    background-color: var(--tblr-primary) !important;
    border-color: var(--tblr-primary) !important;
}

.btn-outline-primary {
    color: var(--tblr-primary) !important;
    border-color: var(--tblr-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--tblr-primary) !important;
    color: #fff !important;
}

/* Form controls + checkbox focus */
.form-control:focus {
    border-color: var(--tblr-primary) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25) !important;
}

.form-check-input:checked {
    background-color: var(--tblr-primary) !important;
    border-color: var(--tblr-primary) !important;
}

/* Pagination */
.page-item.active .page-link {
    background-color: var(--tblr-primary) !important;
    border-color: var(--tblr-primary) !important;
}

a {
    color: var(--tblr-primary);
}
a:hover {
    color: var(--tblr-primary-dark);
}

html {
    transition: background-color .25s ease, color .25s ease;
}

.navbar, .card, .table, body {
    transition: background-color .25s ease, color .25s ease;
}

.alert.fade-out {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.bg-red-lite   { background-color: #ffe5e5 !important; }
.bg-green-lite { background-color: #e6ffea !important; }
.bg-grey-lite  { background-color: #f5f5f5 !important; }


.tr-status {
    border-left: 6px solid transparent !important;
}

.tr-red {
    border-left-color: #ff6b6b !important;
    background-color: #fff5f5 !important;
}

.tr-green {
    border-left-color: #51cf66 !important;
    background-color: #f3fff4 !important;
}

.tr-grey {
    border-left-color: #adb5bd !important;
    background-color: #f8f9fa !important;
}

.nav-link.active {
  border-bottom: 2px solid #16375F;
  color: #16375F !important;
  font-weight: 600;
  border-radius: 0;
}

.quickFilter.active {
    background-color: var(--tblr-primary) !important;
    color: #fff !important;
}


/* Remove any border radius from active nav-link (Tabler adds one!) */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:focus,
.navbar-nav .nav-link.active:hover {
    border-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

#lead-table-area table.table {
    font-size: 13px;          /* hele tabellen */
}

#lead-table-area table.table th {
    font-size: 12px;          /* header */
    font-weight: 600;
}

#lead-table-area table.table td {
    padding-top: 4px;         /* mindre padding = mere kompakt */
    padding-bottom: 4px;
    vertical-align: middle;
}

#lead-table-area td span.text-muted {
    font-size: 12px;
}

#lead-table-area td .badge {
    font-size: 11px;
    padding: 2px 4px;
}

#ajaxLeadCount {
    display: none;
}

.conv-cell {
    padding: 4px 6px;
    text-align: center;
    border-radius: 4px;
}

/* Dark Mode Overrides */
html[data-bs-theme="dark"] #lead-table-area table.table {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

html[data-bs-theme="dark"] #lead-table-area table.table td,
html[data-bs-theme="dark"] #lead-table-area table.table th {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

html[data-bs-theme="dark"] .tr-red {
    border-left-color: #ff6b6b !important;
    background-color: rgba(255, 107, 107, 0.12) !important;
}

html[data-bs-theme="dark"] .tr-green {
    border-left-color: #51cf66 !important;
    background-color: rgba(81, 207, 102, 0.12) !important;
}

html[data-bs-theme="dark"] .tr-grey {
    border-left-color: #adb5bd !important;
    background-color: rgba(173, 181, 189, 0.10) !important;
}

html[data-bs-theme="dark"] #lead-table-area td span.text-muted {
    color: #b0b0b0 !important;
}

html[data-bs-theme="dark"] #lead-table-area table.table td {
    border-color: #333 !important;
}

/* Dark Mode: active nav-link should be white */
html[data-bs-theme="dark"] .navbar-nav .nav-link.active {
    color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

textarea[name="message"] {
  font-size: 12px;
  line-height: 1.3;
}

.log-message {
  overflow: hidden;
  position: relative;
}

/* COLLAPSED STATE */
.log-message.is-collapsed {
  max-height: 5em; /* ca. 3 linjer */
}

.log-message.is-collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

#email-from[readonly] {
  background-color: var(--tblr-bg-surface-secondary);
  cursor: not-allowed;
}

/* Match Tabler inputhøjde */
.ts-control {
  min-height: calc(1.4285714286em + .875rem + 2px);
  padding: .4375rem .75rem;
  border-radius: .25rem;
}

/* Gør chips lidt mere luftige */
.ts-control .item {
  margin: 2px 4px 2px 0;
}

.ts-dropdown-content {background:#FFF;}

.chart-wrap{
  max-width: 600px;
  width: 100%;
  margin: 0 auto;          /* optional: center */
}

.chart-wrap canvas{
  width: 100% !important;
  height: auto !important; /* let it scale */
  display: block;
}