/**
 * Demo 12 — extra site-onderdelen (cards, portal, mobiel)
 */
html:not(.calc-fullscreen-app)[data-theme="light"] html {
  background-color: var(--tv-bg-page);
  scroll-behavior: smooth;
}

html:not(.calc-fullscreen-app)[data-theme="light"] body {
  font-family: var(--tv-font);
  color: var(--tv-text);
  background: radial-gradient(ellipse 100% 54% at 50% -14%, rgba(90, 130, 200, 0.14), transparent),
    radial-gradient(ellipse 55% 42% at 100% 0%, rgba(60, 120, 200, 0.06), transparent),
    var(--tv-bg-page) !important;
}

html:not(.calc-fullscreen-app)[data-theme="light"] h1,
html:not(.calc-fullscreen-app)[data-theme="light"] h2,
html:not(.calc-fullscreen-app)[data-theme="light"] h3,
html:not(.calc-fullscreen-app)[data-theme="light"] h4,
html:not(.calc-fullscreen-app)[data-theme="light"] h5,
html:not(.calc-fullscreen-app)[data-theme="light"] h6 {
  color: var(--tv-text);
  letter-spacing: -0.02em;
}

html:not(.calc-fullscreen-app)[data-theme="light"] .card,
html:not(.calc-fullscreen-app)[data-theme="light"] .portal-card {
  background: var(--tv-bg-card);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius-lg);
  box-shadow: var(--tv-shadow-card);
}

html:not(.calc-fullscreen-app)[data-theme="light"] .card-header {
  background: linear-gradient(165deg, rgba(150, 175, 220, 0.18) 0%, transparent 55%),
    rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--tv-border);
  color: var(--tv-text);
}

html:not(.calc-fullscreen-app)[data-theme="light"] .list-group-item {
  background: var(--tv-bg-card);
  border-color: var(--tv-border);
  color: var(--tv-text);
}

html:not(.calc-fullscreen-app)[data-theme="light"] .list-group-item-action:hover,
html:not(.calc-fullscreen-app)[data-theme="light"] .list-group-item-action:focus {
  background: var(--tv-accent-soft);
  color: var(--tv-text);
}

html:not(.calc-fullscreen-app)[data-theme="light"] .table {
  --bs-table-color: var(--tv-text);
  --bs-table-border-color: var(--tv-border);
}

html:not(.calc-fullscreen-app)[data-theme="light"] .table thead th {
  color: var(--tv-accent-hover);
  border-color: var(--tv-border-strong);
}

html:not(.calc-fullscreen-app)[data-theme="light"] .modal-content {
  background: var(--tv-bg-card);
  border: 1px solid var(--tv-border-strong);
  border-radius: var(--tv-radius-lg);
  box-shadow: var(--tv-shadow-card);
}

html:not(.calc-fullscreen-app)[data-theme="light"] .modal-header {
  border-bottom-color: var(--tv-border);
}

html:not(.calc-fullscreen-app)[data-theme="light"] .modal-footer {
  border-top-color: var(--tv-border);
}

html:not(.calc-fullscreen-app)[data-theme="light"] .nav-tabs .nav-link {
  color: var(--tv-text-muted);
  border-color: transparent;
}

html:not(.calc-fullscreen-app)[data-theme="light"] .nav-tabs .nav-link.active {
  color: var(--tv-accent-hover);
  background: var(--tv-bg-card);
  border-color: var(--tv-border) var(--tv-border) var(--tv-bg-card);
}

html:not(.calc-fullscreen-app)[data-theme="light"] .pagination .page-link {
  color: var(--tv-accent-hover);
  border-color: var(--tv-border-strong);
  background: var(--tv-bg-card);
}

html:not(.calc-fullscreen-app)[data-theme="light"] .pagination .page-item.active .page-link {
  background: var(--tv-accent-hover);
  border-color: var(--tv-accent-hover);
  color: #fafbfc;
}

html:not(.calc-fullscreen-app)[data-theme="light"] .btn-link {
  color: var(--tv-accent-hover);
}

html:not(.calc-fullscreen-app)[data-theme="light"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--tv-accent-hover);
}

html:not(.calc-fullscreen-app)[data-theme="light"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--tv-text);
}

/* Footer — contrast (overschrijft style.css donkere-footer + oude text-light) */
html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer,
html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer p,
html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer div,
html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer span,
html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer small {
  color: #3d4a63 !important;
}

html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer h5,
html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer h6,
html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer .fw-bold {
  color: var(--tv-text, #151a24) !important;
}

html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer .text-muted,
html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer a.text-muted {
  color: #445068 !important;
}

html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer a.text-muted:hover,
html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer a:hover {
  color: var(--tv-accent-hover, #304977) !important;
}

html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer .footer-social-link {
  color: var(--tv-accent-hover, #304977) !important;
  font-size: 1.25rem;
  opacity: 0.92;
}

html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer .footer-social-link:hover {
  color: var(--tv-text, #151a24) !important;
  opacity: 1;
}

html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer hr {
  border-color: var(--tv-border-strong, rgba(35, 50, 82, 0.18));
  opacity: 1;
}

html:not(.calc-fullscreen-app)[data-theme="light"] footer.footer .text-light {
  color: var(--tv-accent-hover, #304977) !important;
}

/* Gekleurde tint-blokken: lichte achtergrond + donkere leesbare tekst (badge, choice-icon, …) */
html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-primary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-primary.bg-opacity-15,
html:not(.calc-fullscreen-app)[data-theme="light"] .choice-icon.bg-primary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .feature-icon.bg-primary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .contact-icon.bg-primary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .process-icon.bg-primary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .service-icon.bg-primary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .example-icon.bg-primary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .value-icon.bg-primary.bg-opacity-10 {
  background-color: rgba(61, 96, 146, 0.14) !important;
  color: #233658 !important;
}

html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-success.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-success.bg-opacity-15,
html:not(.calc-fullscreen-app)[data-theme="light"] .choice-icon.bg-success.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .feature-icon.bg-success.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .contact-icon.bg-success.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .process-icon.bg-success.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .service-icon.bg-success.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .example-icon.bg-success.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .value-icon.bg-success.bg-opacity-10 {
  background-color: rgba(22, 163, 74, 0.14) !important;
  color: #166534 !important;
}

html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-warning.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-warning.bg-opacity-15,
html:not(.calc-fullscreen-app)[data-theme="light"] .choice-icon.bg-warning.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .feature-icon.bg-warning.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .contact-icon.bg-warning.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .process-icon.bg-warning.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .service-icon.bg-warning.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .example-icon.bg-warning.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .value-icon.bg-warning.bg-opacity-10 {
  background-color: rgba(202, 138, 4, 0.16) !important;
  color: #854d0e !important;
}

html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-danger.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-danger.bg-opacity-15,
html:not(.calc-fullscreen-app)[data-theme="light"] .choice-icon.bg-danger.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .feature-icon.bg-danger.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .contact-icon.bg-danger.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .process-icon.bg-danger.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .service-icon.bg-danger.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .example-icon.bg-danger.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .value-icon.bg-danger.bg-opacity-10 {
  background-color: rgba(220, 38, 38, 0.12) !important;
  color: #991b1b !important;
}

html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-info.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-info.bg-opacity-15,
html:not(.calc-fullscreen-app)[data-theme="light"] .choice-icon.bg-info.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .feature-icon.bg-info.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .contact-icon.bg-info.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .process-icon.bg-info.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .service-icon.bg-info.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .example-icon.bg-info.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .value-icon.bg-info.bg-opacity-10 {
  background-color: rgba(6, 182, 212, 0.14) !important;
  color: #0e7490 !important;
}

html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-secondary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-secondary.bg-opacity-15,
html:not(.calc-fullscreen-app)[data-theme="light"] .choice-icon.bg-secondary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .feature-icon.bg-secondary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .contact-icon.bg-secondary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .process-icon.bg-secondary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .service-icon.bg-secondary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .example-icon.bg-secondary.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .value-icon.bg-secondary.bg-opacity-10 {
  background-color: rgba(89, 104, 133, 0.14) !important;
  color: #3d4a63 !important;
}

html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-dark.bg-opacity-10,
html:not(.calc-fullscreen-app)[data-theme="light"] .badge.bg-dark.bg-opacity-15,
html:not(.calc-fullscreen-app)[data-theme="light"] .choice-icon.bg-dark.bg-opacity-10 {
  background-color: rgba(33, 37, 41, 0.12) !important;
  color: #212529 !important;
}

html:not(.calc-fullscreen-app)[data-theme="light"] .badge[class*="bg-opacity-"] strong,
html:not(.calc-fullscreen-app)[data-theme="light"] .badge[class*="bg-opacity-"] small,
html:not(.calc-fullscreen-app)[data-theme="light"] .badge[class*="bg-opacity-"] i {
  color: inherit !important;
}

@media (max-width: 991.98px) {
  html:not(.calc-fullscreen-app)[data-theme="light"] .main-content {
    padding-top: 5.25rem;
  }

  html:not(.calc-fullscreen-app)[data-theme="light"] nav.navbar .site-navbar-collapse {
    background: rgba(252, 253, 255, 0.98);
    border-radius: 0 0 var(--tv-radius) var(--tv-radius);
    border: 1px solid var(--tv-border-strong);
    border-top: none;
    margin-top: 0;
    padding: 0.5rem 0.65rem 0.65rem;
    box-shadow: var(--tv-shadow-card);
  }

  html:not(.calc-fullscreen-app)[data-theme="light"] .navbar-nav .nav-link {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
}

/* Site branding (admin → Systeem → Uiterlijk) */
.site-logo,
.site-logo-preview {
  height: 2.25rem;
  width: auto;
  max-width: min(11rem, 42vw);
  object-fit: contain;
  vertical-align: middle;
}

.navbar-brand .site-logo {
  display: inline-block;
}

html[data-theme="dark"] .site-logo--light {
  display: none !important;
}

html[data-theme="light"] .site-logo--dark {
  display: none !important;
}

@media (max-width: 576px) {
  .site-logo,
  .site-logo-preview {
    height: 1.85rem;
    max-width: min(9rem, 50vw);
  }
}