/* NexxDMARC — applicatiestijlen */

/* Kleinere badge-variant (CSP staat geen inline style toe) */
.badge-sm {
  font-size: .65rem;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────
   App-layout (sidebar + topbar + main)
   Inline styles zijn niet toegestaan door de CSP (geen 'unsafe-inline' in style-src).
   Alle positionering staat hier zodat ze via 'self' wel geladen worden.
   ───────────────────────────────────────────── */
.navbar-app {
  height: 56px;
  left: 260px;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  overflow-y: auto;
  z-index: 1030;
}

.main-app {
  margin-left: 260px;
  margin-top: 56px;
  padding: 1.5rem;
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
}

.auth-container {
  max-width: 420px;
  width: 100%;
}

.topbar-search {
  max-width: 360px;
}

/* ─────────────────────────────────────────────
   Utility-klassen (vervanging voor inline styles die CSP blokkeert)
   ───────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.cursor-help    { cursor: help; }

.progress-xs { height: 6px; }
.progress-sm { height: 8px; }
.progress-md { height: 10px; }

.badge-permerror { background-color: #fd7e14; color: #fff; }

.mw-110 { max-width: 110px; }
.mw-160 { max-width: 160px; }
.mw-200 { max-width: 200px; }
.mw-400 { max-width: 400px; }
.mw-480 { max-width: 480px; }
.mw-560 { max-width: 560px; }
.mw-640 { max-width: 640px; }

/* Vaste kolombreedte in tabellen */
.col-w-32  { width: 32px; }
.col-w-70  { width: 70px; }
.col-w-80  { width: 80px; }
.col-w-150 { width: 150px; }
.col-w-110 { width: 110px; }
.col-w-120 { width: 120px; }
.col-w-140 { width: 140px; }
.col-w-200 { width: 200px; }

/* Stap-indicator (ronde genummerde badges) */
.step-icon {
  width: 32px;
  height: 32px;
  font-weight: bold;
}

/* Tekst- en overloop-utilities */
.text-pre-wrap  { white-space: pre-wrap; }
.text-break-all { word-break: break-all; }
.scroll-y-400   { max-height: 400px; overflow-y: auto; }
.fs-xs          { font-size: 0.7rem; }

/* Geneste tabel transparant (geen witte achtergrond in uitklaprij) */
.table-transparent { --bs-table-bg: transparent; }

/* ─────────────────────────────────────────────
   Sidebar nav-links
   ───────────────────────────────────────────── */
.sidebar .nav-link {
  color: var(--bs-body-color);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
}

.sidebar .nav-link:hover {
  background-color: var(--bs-secondary-bg);
}

.sidebar .nav-link.active {
  background-color: var(--bs-primary);
  color: #fff;
}

.sidebar .nav-link i {
  width: 1.25rem;
}

/* ─────────────────────────────────────────────
   Badges / statuskleur
   ───────────────────────────────────────────── */
.compliance-badge {
  font-size: 0.8rem;
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   DataTables overrides
   ───────────────────────────────────────────── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  font-size: 0.875rem;
}

/* ─────────────────────────────────────────────
   Thema-toggle: actieve knop markeren
   ───────────────────────────────────────────── */
.theme-btn.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* ─────────────────────────────────────────────
   Tabel scrollbaarheid (desktop-only)
   ───────────────────────────────────────────── */
.table-responsive-x {
  overflow-x: auto;
}

/* ─────────────────────────────────────────────
   Rapport-detail uitklaprij: geneste tabellen transparant
   zodat ze de grijze achtergrond van de uitklaprij volgen
   (Bootstrap geeft tabelcellen anders een eigen body-bg).
   ───────────────────────────────────────────── */
.report-detail .table,
.report-detail .table > :not(caption) > * > * {
  background-color: transparent;
}

/* ─────────────────────────────────────────────
   Breadcrumb
   ───────────────────────────────────────────── */
.breadcrumb {
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

/* ─────────────────────────────────────────────
   Health Score badge kleuren
   ───────────────────────────────────────────── */
.health-excellent { color: #198754; }
.health-good      { color: #5cb85c; }
.health-fair      { color: #fd7e14; }
.health-poor      { color: #dc3545; }

/* ─────────────────────────────────────────────
   Compliance percentage kleurcodering
   ───────────────────────────────────────────── */
.pct-high   { color: #198754; font-weight: 600; }
.pct-medium { color: #fd7e14; font-weight: 600; }
.pct-low    { color: #dc3545; font-weight: 600; }

/* ─────────────────────────────────────────────
   Highlight.js XML-viewer
   ───────────────────────────────────────────── */
.xml-viewer {
  max-height: 600px;
  overflow: auto;
  border-radius: 6px;
}

/* ─────────────────────────────────────────────
   Logo thema-wisseling
   Standaard (dark + auto): rood+wit logo tonen.
   In lichtmodus: rood+donker logo tonen.
   ───────────────────────────────────────────── */
.logo-light-mode { display: none; }

[data-bs-theme="light"] .logo-dark-mode  { display: none; }
[data-bs-theme="light"] .logo-light-mode { display: inline; }

/* ─────────────────────────────────────────────
   Contrast: achtergrond vs. inhoudblokken
   ───────────────────────────────────────────── */

/* Light: pagina middenblauw-grijs, sidebar getint, kaarten wit met meer contrast */
[data-bs-theme="light"] {
  --bs-body-bg:               #dde3ef;
  --bs-body-bg-rgb:           221, 227, 239;
  --bs-card-bg:               #ffffff;
  --bs-card-border-color:     rgba(0, 0, 0, 0.10);
  --bs-card-cap-bg:           #f5f7fc;
  --bs-accordion-bg:          #ffffff;
  --bs-accordion-btn-bg:      #f5f7fc;
  --bs-accordion-active-bg:   #eef1ff;
  --bs-accordion-border-color: rgba(0, 0, 0, 0.10);
}
[data-bs-theme="light"] .sidebar {
  background-color: #cdd6e8 !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}
[data-bs-theme="light"] .navbar {
  background-color: #dde3ef !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}
.card { overflow: hidden; }

[data-bs-theme="light"] .card,
[data-bs-theme="light"] .accordion-item {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 16px rgba(0, 0, 0, 0.09);
}

/* Dark: pagina diep donker, sidebar/topbar iets lichter, blokken lichter */
[data-bs-theme="dark"] {
  --bs-body-bg:               #13151a;
  --bs-body-bg-rgb:           19, 21, 26;
  --bs-card-bg:               #21252c;
  --bs-card-border-color:     rgba(255, 255, 255, 0.07);
  --bs-card-cap-bg:           #1c2027;
  --bs-accordion-bg:          #21252c;
  --bs-accordion-btn-bg:      #1b1f26;
  --bs-accordion-active-bg:   #181c22;
  --bs-accordion-border-color: rgba(255, 255, 255, 0.08);
  --bs-secondary-bg:          #2c3139;
  --bs-tertiary-bg:           #1d2026;
  --bs-border-color:          rgba(255, 255, 255, 0.10);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.10);
}
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] .navbar {
  background-color: #1c2028 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .accordion-item {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
}

/* ─────────────────────────────────────────────
   Formuliervelden light mode
   ───────────────────────────────────────────── */
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
  background-color: #edf1f8;
  border-color: rgba(0, 0, 0, 0.18);
}
[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
  background-color: #ffffff;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}
[data-bs-theme="light"] .form-control:disabled,
[data-bs-theme="light"] .form-control[readonly],
[data-bs-theme="light"] .form-select:disabled {
  background-color: #e2e7f1;
  border-color: rgba(0, 0, 0, 0.12);
}
[data-bs-theme="light"] .input-group-text {
  background-color: #dde3ee;
  border-color: rgba(0, 0, 0, 0.18);
}

/* ─────────────────────────────────────────────
   List-group light mode
   ───────────────────────────────────────────── */
[data-bs-theme="light"] .list-group-item {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
}
[data-bs-theme="light"] .list-group-item + .list-group-item {
  border-top-color: rgba(0, 0, 0, 0.10);
}

/* ─────────────────────────────────────────────
   Progress-track light mode
   ───────────────────────────────────────────── */
[data-bs-theme="light"] .progress {
  background-color: rgba(0, 0, 0, 0.12);
}

/* ─────────────────────────────────────────────
   Nav-tabs light mode
   ───────────────────────────────────────────── */
[data-bs-theme="light"] .nav-tabs {
  border-bottom-color: rgba(0, 0, 0, 0.15);
}
[data-bs-theme="light"] .nav-tabs .nav-link {
  background-color: #c8d3e6;
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--bs-body-color);
  margin-bottom: -1px;
}
[data-bs-theme="light"] .nav-tabs .nav-link:hover {
  background-color: #bfcbdf;
  border-color: rgba(0, 0, 0, 0.15);
}
[data-bs-theme="light"] .nav-tabs .nav-link.active {
  background-color: #ffffff;
  border-bottom-color: #ffffff;
  color: var(--bs-body-color);
  font-weight: 500;
}

/* ─────────────────────────────────────────────
   Afgeronde hoeken — 15px
   ───────────────────────────────────────────── */
:root {
  --bs-card-border-radius:       15px;
  --bs-card-inner-border-radius: 13px;
  --bs-accordion-border-radius:  15px;
}

/* Accordion: items als losse afgeronde blokken met tussenruimte */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.accordion-item {
  border-radius: 15px !important;
  overflow: hidden;
  /* Bootstrap verwijdert border-top bij aangrenzende items; herstellen */
  border-top: 1px solid var(--bs-accordion-border-color) !important;
}

/* ─────────────────────────────────────────────
   Header Analyzer — mailserver-route
   ───────────────────────────────────────────── */
.hop-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hop-step {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.hop-card {
  border-radius: 10px !important;
}
.hop-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0;
}
.hop-line {
  width: 2px;
  height: 14px;
  background: var(--bs-border-color);
}
.hop-protocol {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
}

/* ─────────────────────────────────────────────
   Tabelcelpadding — meer witruimte
   Vergroot de standaard celpadding en geeft de eerste/laatste
   kolom extra inspringing zodat tekst niet tegen de kaartrand zit.
   ───────────────────────────────────────────── */
.table > :not(caption) > * > * {
  padding: 0.65rem 0.85rem;
}
.table > :not(caption) > * > *:first-child {
  padding-left: 1.25rem;
}
.table > :not(caption) > * > *:last-child {
  padding-right: 1.25rem;
}

/* card-header ook iets meer ruimte */
.card-header {
  padding: 0.85rem 1.25rem;
}

/* ─────────────────────────────────────────────
   Tooltips in dark mode
   Bootstrap tooltips volgen het thema niet automatisch.
   ───────────────────────────────────────────── */
[data-bs-theme="dark"] .tooltip .tooltip-inner {
  background-color: #0d1117;
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
[data-bs-theme="dark"] .tooltip .tooltip-arrow::before {
  border-top-color: #0d1117;
}

/* Uitklapknop chevron-rotatie */
.toggle-icon { transition: transform .2s ease; }
[aria-expanded="true"] .toggle-icon { transform: rotate(180deg); }

/* ─────────────────────────────────────────────
   Implementatie-tijdlijn — light mode lijnkleur
   ───────────────────────────────────────────── */
[data-bs-theme="light"] .impl-timeline::before {
  background: rgba(0, 0, 0, 0.20);
}
[data-bs-theme="light"] .hop-line {
  background: rgba(0, 0, 0, 0.20);
}

/* ─────────────────────────────────────────────
   Implementatie-tijdlijn (zigzag)
   ───────────────────────────────────────────── */
.impl-timeline {
  position: relative;
  padding: 1rem 0 0.5rem;
}
.impl-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--bs-border-color);
  transform: translateX(-50%);
}
.impl-step {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 1.75rem;
}
.impl-step--left {
  padding-right: calc(50% + 28px);
}
.impl-step--right {
  padding-left: calc(50% + 28px);
  flex-direction: row-reverse;
}
.impl-step__icon {
  position: absolute;
  left: calc(50% - 14px);
  top: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 1.05rem;
  background: var(--bs-body-bg);
}
.impl-step__card {
  width: 100%;
  border-radius: 10px !important;
  transition: box-shadow .15s ease;
}
.impl-step__card--active {
  box-shadow: 0 0 0 2px var(--bs-primary) !important;
}
.impl-step__card--waiting {
  box-shadow: 0 0 0 2px var(--bs-warning) !important;
}
.impl-step__card--warning {
  box-shadow: 0 0 0 2px var(--bs-warning) !important;
}
.impl-step__card--pending {
  opacity: .65;
}
.impl-section-divider {
  position: relative;
  text-align: center;
  margin: 2rem 0 1.5rem;
  z-index: 1;
}
.impl-section-divider span {
  background: var(--bs-body-bg);
  padding: 0 1rem;
  color: var(--bs-secondary);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

@media (max-width: 767px) {
  .impl-timeline::before {
    left: 18px;
  }
  .impl-step--left,
  .impl-step--right {
    flex-direction: row;
    padding-left: 48px;
    padding-right: 0;
  }
  .impl-step__icon {
    left: 4px;
  }
}

/* ─────────────────────────────────────────────
   Templates_c: nooit tonen
   ───────────────────────────────────────────── */