/*
 * TheorieBriljant — design tokens
 *
 * Geëxtraheerd uit het claymation logo + functioneel uitgebouwd.
 * Import dit in de master-layout, en gebruik de tokens via `var(--tb-*)`.
 * Component-overrides (Infix Bootstrap-overschrijvingen) staan in een aparte file
 * zodat updates van Infix core niet ons brand-systeem aanraken.
 */

/* ---------- Font ---------- */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap');

/* ---------- Tokens ---------- */

:root {
  /* Logo-gradient — exact zoals het claymation mark */
  --tb-color-violet:   #8B5CF6;
  --tb-color-orange:   #F97316;
  --tb-color-magenta:  #EC4899;
  --tb-gradient-brand: linear-gradient(135deg, #8B5CF6 0%, #F97316 50%, #EC4899 100%);

  /* Functionele kleuren (afgeleid van logo) */
  --tb-primary:        #F97316;  /* Briljant Oranje — hoofd-CTA */
  --tb-primary-dark:   #C2410C;  /* hover/active shadow */
  --tb-primary-soft:   #FFEDD5;  /* badge-bg, subtle hover */

  --tb-secondary:      #8B5CF6;  /* Theorie Paars — secundaire CTA, premium */
  --tb-secondary-dark: #6D28D9;
  --tb-secondary-soft: #EDE9FE;

  --tb-accent:         #EC4899;  /* Examen Magenta — urgency, streaks, gamification */
  --tb-accent-dark:    #BE185D;
  --tb-accent-soft:    #FCE7F3;

  /* Inkt / typografie */
  --tb-ink:            #1F2937;
  --tb-ink-2:          #4B5563;
  --tb-ink-3:          #9CA3AF;

  /* Surfaces (warm wit, niet steriel #FFF) */
  --tb-bg:             #FFFCFA;
  --tb-paper:          #FFFFFF;
  --tb-line:           #F1ECE5;

  /* Functioneel */
  --tb-success:        #10B981;
  --tb-success-soft:   #D1FAE5;
  --tb-error:          #EF4444;
  --tb-error-soft:     #FEE2E2;
  --tb-warning:        #F59E0B;
  --tb-warning-soft:   #FEF3C7;

  /* Typografie */
  --tb-font-display:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tb-font-body:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tb-font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type-schaal (mobile-first) */
  --tb-text-xs:        0.75rem;
  --tb-text-sm:        0.875rem;
  --tb-text-base:      1rem;
  --tb-text-lg:        1.125rem;
  --tb-text-xl:        1.25rem;
  --tb-text-2xl:       1.5rem;
  --tb-text-3xl:       1.875rem;
  --tb-text-4xl:       2.25rem;
  --tb-text-5xl:       3rem;

  /* Letter-spacing */
  --tb-tracking-tight: -0.025em;
  --tb-tracking-normal: 0;
  --tb-tracking-wide:  0.025em;

  /* Radius (ruim — claymation-DNA) */
  --tb-radius-sm:      8px;
  --tb-radius-md:      12px;
  --tb-radius-lg:      20px;
  --tb-radius-xl:      28px;
  --tb-radius-pill:    9999px;

  /* Schaduwen — soft 3D claymation-feel */
  --tb-shadow-sm:      0 1px 2px 0 rgba(31, 41, 55, 0.05);
  --tb-shadow-md:      0 4px 6px -1px rgba(31, 41, 55, 0.08), 0 2px 4px -2px rgba(31, 41, 55, 0.06);
  --tb-shadow-lg:      0 10px 25px -3px rgba(31, 41, 55, 0.10), 0 4px 6px -2px rgba(31, 41, 55, 0.05);
  --tb-shadow-xl:      0 25px 50px -12px rgba(31, 41, 55, 0.18);

  /* Drukbare-knop shadow (3D pop) — voor primary CTA's */
  --tb-shadow-press-primary:   0 4px 0 var(--tb-primary-dark),   0 12px 24px -8px rgba(249, 115, 22, 0.40);
  --tb-shadow-press-secondary: 0 4px 0 var(--tb-secondary-dark), 0 12px 24px -8px rgba(139, 92, 246, 0.40);
  --tb-shadow-press-accent:    0 4px 0 var(--tb-accent-dark),    0 12px 24px -8px rgba(236, 72, 153, 0.40);

  /* Animation easing */
  --tb-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --tb-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --tb-duration-fast:  150ms;
  --tb-duration-base:  250ms;
  --tb-duration-slow:  400ms;

  /* Z-index */
  --tb-z-dropdown:     1000;
  --tb-z-sticky:       1020;
  --tb-z-modal:        1050;
  --tb-z-popover:      1060;
  --tb-z-toast:        1080;
}

/* ---------- Body defaults ---------- */

body.tb-themed {
  font-family: var(--tb-font-body);
  color: var(--tb-ink);
  background-color: var(--tb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tb-tabular { font-variant-numeric: tabular-nums; }

/* ---------- Typografie helpers ---------- */

.tb-heading {
  font-family: var(--tb-font-display);
  font-weight: 800;
  letter-spacing: var(--tb-tracking-tight);
  color: var(--tb-ink);
  line-height: 1.15;
}

.tb-subheading {
  font-family: var(--tb-font-display);
  font-weight: 700;
  letter-spacing: var(--tb-tracking-tight);
  color: var(--tb-ink);
  line-height: 1.25;
}

.tb-body {
  font-family: var(--tb-font-body);
  font-weight: 400;
  color: var(--tb-ink-2);
  line-height: 1.6;
}

.tb-mute  { color: var(--tb-ink-3); }
.tb-ink   { color: var(--tb-ink); }

/* ---------- Knoppen ---------- */

.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--tb-font-body);
  font-weight: 500;
  font-size: var(--tb-text-base);
  line-height: 1;
  border: 0;
  border-radius: var(--tb-radius-md);
  cursor: pointer;
  transition: transform var(--tb-duration-fast) var(--tb-ease-spring),
              box-shadow var(--tb-duration-fast) var(--tb-ease-out),
              background-color var(--tb-duration-fast) var(--tb-ease-out);
  text-decoration: none;
}

.tb-btn-primary {
  background: var(--tb-primary);
  color: #fff;
  box-shadow: var(--tb-shadow-press-primary);
}
.tb-btn-primary:hover  { transform: translateY(-2px); }
.tb-btn-primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tb-primary-dark); }

.tb-btn-secondary {
  background: var(--tb-secondary);
  color: #fff;
  box-shadow: var(--tb-shadow-press-secondary);
}
.tb-btn-secondary:hover  { transform: translateY(-2px); }
.tb-btn-secondary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tb-secondary-dark); }

.tb-btn-ghost {
  background: transparent;
  color: var(--tb-ink);
  border: 1.5px solid var(--tb-line);
}
.tb-btn-ghost:hover {
  background: var(--tb-paper);
  border-color: var(--tb-ink-3);
}

/* ---------- Cards ---------- */

.tb-card {
  background: var(--tb-paper);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--tb-shadow-sm);
}

.tb-card-hover {
  transition: transform var(--tb-duration-base) var(--tb-ease-spring),
              box-shadow var(--tb-duration-base) var(--tb-ease-out);
}
.tb-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--tb-shadow-lg);
}

/* ---------- Badges ---------- */

.tb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--tb-text-xs);
  font-weight: 500;
  letter-spacing: var(--tb-tracking-wide);
  border-radius: var(--tb-radius-pill);
  background: var(--tb-primary-soft);
  color: var(--tb-primary-dark);
}
.tb-badge-secondary { background: var(--tb-secondary-soft); color: var(--tb-secondary-dark); }
.tb-badge-accent    { background: var(--tb-accent-soft);    color: var(--tb-accent-dark); }
.tb-badge-success   { background: var(--tb-success-soft);   color: var(--tb-success); }
.tb-badge-error     { background: var(--tb-error-soft);     color: var(--tb-error); }

/* ---------- Gradient utilities ---------- */

.tb-bg-gradient { background: var(--tb-gradient-brand); }
.tb-text-gradient {
  background: var(--tb-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
 * TB STUDENT-DASHBOARD (custom sidebar + widgets)
 * ============================================================ */

/* Sidebar */
.tb-sidebar {
  width: 280px;
  height: 100vh;
  position: fixed;
  left: 0; top: 0;
  background: var(--tb-paper);
  border-right: 1px solid var(--tb-line);
  display: flex; flex-direction: column;
  z-index: 100;
  font-family: var(--tb-font-body);
  overflow-y: auto;
}
.tb-sidebar-logo {
  padding: 32px 24px 24px;
  border-bottom: 1px solid var(--tb-line);
  display: flex; align-items: center; justify-content: flex-start;
}
.tb-sidebar-logo img {
  height: 56px;
  width: auto;
  max-width: 100%;
  transition: transform .15s var(--tb-ease-spring);
}
.tb-sidebar-logo a:hover img { transform: scale(1.03); }

/* Footer verbergen in dashboard-context (waar onze sidebar staat) */
body:has(.tb-sidebar) footer,
body:has(.tb-sidebar) .aoraeditor-footer,
body:has(.tb-sidebar) .footer_area,
body:has(.tb-sidebar) #preloader { display: none !important; }

.tb-sidebar-user {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--tb-line);
}
.tb-sidebar-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: var(--tb-gradient-brand);
}
.tb-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tb-sidebar-user-info { min-width: 0; flex: 1; }
.tb-sidebar-user-name {
  font-family: var(--tb-font-display); font-weight: 700;
  font-size: .95rem; color: var(--tb-ink); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.01em;
}
.tb-sidebar-user-plan {
  font-size: .78rem; color: var(--tb-ink-3); margin: 0;
  font-weight: 500;
}

.tb-sidebar-nav {
  list-style: none; padding: 14px 14px; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  flex: 1;
}
.tb-sidebar-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  color: var(--tb-ink-2);
  text-decoration: none;
  border-radius: var(--tb-radius-md);
  font-weight: 500; font-size: .92rem;
  transition: all .15s var(--tb-ease-out);
  position: relative;
}
.tb-sidebar-link:hover { background: var(--tb-primary-soft); color: var(--tb-primary-dark); }
.tb-sidebar-link.active {
  background: var(--tb-gradient-brand);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(249, 115, 22, .4);
}
.tb-sidebar-link.active:hover { color: #fff; }
.tb-sidebar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
}
.tb-sidebar-label { flex: 1; }
.tb-sidebar-soon {
  font-size: .65rem; font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tb-line);
  color: var(--tb-ink-3);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.tb-sidebar-link.active .tb-sidebar-soon { background: rgba(255,255,255,.25); color: #fff; }

.tb-sidebar-foot {
  padding: 14px;
  border-top: 1px solid var(--tb-line);
}
.tb-sidebar-logout { color: var(--tb-ink-3); }
.tb-sidebar-logout:hover { background: var(--tb-error-soft); color: var(--tb-error); }

/* Disabled (Binnenkort) items — clickable maar geen action */
.tb-sidebar-disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}
.tb-sidebar-disabled:hover {
  background: transparent !important;
  color: var(--tb-ink-2) !important;
}

/* Mobile: hamburger trigger needed (later) — hide sidebar below 900px until toggled */
@media (max-width: 900px) {
  .tb-sidebar {
    transform: translateX(-100%);
    transition: transform .25s var(--tb-ease-out);
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }
  .tb-sidebar.open { transform: translateX(0); }
}

/* Content offset wanneer onze sidebar actief is (auto-detect via :has()) */
body:has(.tb-sidebar) .main_content,
body:has(.tb-sidebar) .dashboard_part,
body:has(.tb-sidebar) main {
  margin-left: 280px !important;
  transition: margin-left .25s;
}
@media (max-width: 900px) {
  body:has(.tb-sidebar) .main_content,
  body:has(.tb-sidebar) .dashboard_part,
  body:has(.tb-sidebar) main { margin-left: 0 !important; }
}

/* Verberg Infix' top-menu in dashboard wanneer onze TB-sidebar actief is */
body:has(.tb-sidebar) ._dashboard_menu,
body:has(.tb-sidebar) .dashboard-header-menu {
  display: none !important;
}

/* Hide eventuele dubbele Infix-sidebar als die per ongeluk wordt geinclude */
body:has(.tb-sidebar) nav.sidebar:not(.tb-sidebar) {
  display: none !important;
}

/* Dashboard widget grid */
.tb-dashboard {
  padding: 32px;
  max-width: 1200px;
}
.tb-dashboard-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; margin-bottom: 24px; flex-wrap: wrap;
}
.tb-dashboard-header h1 {
  font-family: var(--tb-font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -.025em;
  margin: 0;
  color: var(--tb-ink);
}
.tb-dashboard-header .greet {
  font-size: .9rem; color: var(--tb-ink-3); font-weight: 500; margin: 0;
}

.tb-widget-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 700px) { .tb-widget-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tb-widget-grid { grid-template-columns: repeat(3, 1fr); } }

.tb-widget {
  background: var(--tb-paper);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius-xl);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--tb-ease-spring), box-shadow .25s;
}
.tb-widget-wide { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .tb-widget-half { grid-column: span 1; }
  .tb-widget-2col { grid-column: span 2; }
}
.tb-widget-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 14px;
}
.tb-widget-title {
  font-family: var(--tb-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--tb-ink);
}
.tb-widget-sub { font-size: .82rem; color: var(--tb-ink-3); margin-top: 2px; }
.tb-widget-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--tb-primary);
  color: #fff;
  border-radius: var(--tb-radius-md);
  font-weight: 600; font-size: .9rem;
  text-decoration: none;
  box-shadow: var(--tb-shadow-press-primary);
  transition: transform .15s var(--tb-ease-spring);
}
.tb-widget-cta:hover { transform: translateY(-2px); color: #fff; }
.tb-widget-cta-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--tb-line);
  color: var(--tb-ink-2);
  border-radius: var(--tb-radius-md);
  font-weight: 500; font-size: .85rem;
  text-decoration: none;
  transition: all .15s;
}
.tb-widget-cta-ghost:hover { border-color: var(--tb-primary); color: var(--tb-primary); }

/* Specifiek per widget */
.tb-widget-hoofdstuk { background: var(--tb-gradient-brand); color: #fff; }
.tb-widget-hoofdstuk .tb-widget-title,
.tb-widget-hoofdstuk .tb-widget-sub { color: #fff; }
.tb-widget-hoofdstuk .tb-widget-sub { opacity: .92; }
.tb-widget-hoofdstuk .tb-widget-cta {
  background: #fff;
  color: var(--tb-primary);
  box-shadow: 0 4px 0 rgba(0,0,0,.12), 0 12px 24px -8px rgba(0,0,0,.2);
}

.tb-widget-streak {
  display: flex; flex-direction: column; gap: 14px;
}
.tb-streak-days {
  display: flex; gap: 6px; justify-content: space-between;
}
.tb-streak-day {
  flex: 1; text-align: center;
}
.tb-streak-dot {
  width: 100%; aspect-ratio: 1; max-width: 36px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: var(--tb-line);
  display: grid; place-items: center;
  font-size: .9rem; color: var(--tb-ink-3);
}
.tb-streak-dot.active { background: var(--tb-gradient-brand); color: #fff; }
.tb-streak-dot.today {
  background: var(--tb-paper);
  border: 2px solid var(--tb-primary);
  color: var(--tb-primary);
  font-weight: 700;
}
.tb-streak-label {
  font-size: .72rem; color: var(--tb-ink-3); text-transform: uppercase;
  letter-spacing: .03em;
}

.tb-widget-pakket .tb-pakket-name {
  font-family: var(--tb-font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  background: var(--tb-gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 6px;
}
.tb-widget-pakket .tb-pakket-detail {
  font-size: .88rem;
  color: var(--tb-ink-2);
  margin-bottom: 14px;
}
.tb-widget-pakket .tb-pakket-progress {
  height: 8px; background: var(--tb-line); border-radius: 999px; overflow: hidden;
  margin-bottom: 14px;
}
.tb-widget-pakket .tb-pakket-progress-fill {
  height: 100%; background: var(--tb-gradient-brand); border-radius: 999px;
}

.tb-widget-prod-chart {
  display: flex; align-items: flex-end; gap: 6px;
  height: 100px;
  margin-top: 14px;
}
.tb-prod-bar {
  flex: 1;
  background: var(--tb-gradient-brand);
  border-radius: 4px 4px 0 0;
  min-height: 6px;
  opacity: .8;
  transition: opacity .15s;
}
.tb-prod-bar:hover { opacity: 1; }
.tb-prod-labels {
  display: flex; gap: 6px;
  margin-top: 6px;
}
.tb-prod-label {
  flex: 1; text-align: center;
  font-size: .68rem; color: var(--tb-ink-3);
  text-transform: uppercase; letter-spacing: .05em;
}

/* ============================================================
 * TB EXAMEN-RUNNER — gesloten module, geen header/sidebar/footer
 * ============================================================ */

body.tb-runner {
  margin: 0; padding: 0;
  min-height: 100vh;
  background: var(--tb-bg);
  font-family: var(--tb-font-body);
  color: var(--tb-ink);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Verberg alles wat per ongeluk meekomt (Infix-overhead) */
body.tb-runner > nav.sidebar,
body.tb-runner > .sidebar,
body.tb-runner > footer,
body.tb-runner > .aoraeditor-footer,
body.tb-runner > .footer_area,
body.tb-runner > .breadcam_wrap,
body.tb-runner > .breadcumb_area,
body.tb-runner > .breadcrumb_area,
body.tb-runner > .cart_header,
body.tb-runner > #cookeSettingModal {
  display: none !important;
}

/* Top-bar */
.tb-runner-top {
  position: sticky; top: 0; z-index: 100;
  background: var(--tb-paper);
  border-bottom: 1px solid var(--tb-line);
  flex-shrink: 0;
}
.tb-runner-top-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 14px 24px;
  max-width: 1280px; margin: 0 auto;
}
.tb-runner-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--tb-font-display); font-weight: 800;
  font-size: 1rem; color: var(--tb-ink);
  letter-spacing: -.015em;
  cursor: default;
  text-decoration: none;
}
.tb-runner-brand img { height: 36px; width: auto; }

.tb-runner-progress-wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  min-width: 0;
}
.tb-runner-counter {
  font-family: var(--tb-font-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--tb-ink-2);
  letter-spacing: -.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tb-runner-close {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--tb-line);
  background: var(--tb-bg);
  color: var(--tb-ink-2);
  text-decoration: none;
  transition: all .15s var(--tb-ease-out);
  flex-shrink: 0;
}
.tb-runner-close:hover {
  background: var(--tb-error-soft);
  border-color: var(--tb-error);
  color: var(--tb-error);
}

/* Main — content gets centered, max-width, no scroll required for typical viewport */
.tb-runner-main {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
  overflow: hidden;
}

/* Hide elementen die Infix in main rendert die we niet willen */
.tb-runner-main .breadcam_wrap,
.tb-runner-main .breadcumb_area,
.tb-runner-main .breadcrumb_area {
  display: none !important;
}

/* Infix' container binnen runner — full-width, geen extra padding */
body.tb-runner .container,
body.tb-runner .container-fluid {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Infix' quiz-test header — onze stijl */
body.tb-runner .quiz_test_header {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
}
body.tb-runner .quiz_header_left,
body.tb-runner .quiz_header_right {
  font-family: var(--tb-font-body);
  color: var(--tb-ink-2);
}

/* Timer-styling — komt naar onze top-bar via JS-relocatie of inline */
body.tb-runner .question_time,
body.tb-runner #total_quiz_running_time {
  font-family: var(--tb-font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.015em;
  color: var(--tb-ink);
  font-variant-numeric: tabular-nums;
  padding: 6px 14px;
  background: var(--tb-bg);
  border: 1.5px solid var(--tb-line);
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
}
body.tb-runner .question_time::before {
  content: ""; width: 14px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F97316' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}

/* Vraag-wrapper — full-height, no scrollbar */
body.tb-runner .quiz_questions_wrapper,
body.tb-runner .quiz__details {
  background: var(--tb-paper) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-radius-xl) !important;
  padding: 24px !important;
  box-shadow: var(--tb-shadow-md);
}
body.tb-runner .quiz__details > .container,
body.tb-runner .quiz__details .row,
body.tb-runner .quiz__details .col-xl-12,
body.tb-runner .quiz__details .col-md-12 {
  height: 100%;
}

/* Verberg de oude header — title + timer komen elders */
body.tb-runner .quiz_test_header { display: none !important; }

/* Verberg de 1-50 nav-tabs (Theorietoppers heeft alleen progress-bar bovenaan) */
body.tb-runner .question_number_lists { display: none !important; }

/* "Vraag 1 uit 50" — boven de vraag */
body.tb-runner .question_list_top {
  margin-bottom: 14px;
}
body.tb-runner .question_list_top p {
  font-family: var(--tb-font-display);
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tb-ink-2);
  margin: 0;
}
body.tb-runner .question_list_top p #currentNumber {
  color: var(--tb-primary);
  font-weight: 800;
}

/* Vraag-tekst */
body.tb-runner .question_title_quiz,
body.tb-runner .question_title_quiz p {
  font-family: var(--tb-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--tb-ink);
  margin-bottom: 20px;
}

/* Antwoord-opties — radio cards */
body.tb-runner .quiz_select,
body.tb-runner .quiz_assign {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 16px;
  list-style: none;
  padding: 0;
}
body.tb-runner .quiz_select li,
body.tb-runner .quiz_assign li {
  background: var(--tb-bg);
  border: 1.5px solid var(--tb-line);
  border-radius: var(--tb-radius-md);
  padding: 0;
  transition: all .15s var(--tb-ease-out);
  list-style: none;
}
body.tb-runner .quiz_select li:hover,
body.tb-runner .quiz_assign li:hover {
  border-color: var(--tb-primary);
  background: var(--tb-primary-soft);
}
body.tb-runner .quiz_select li label,
body.tb-runner .quiz_assign li label {
  display: flex; align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 500;
  width: 100%;
  margin: 0;
}
body.tb-runner .quiz_select li input[type="radio"],
body.tb-runner .quiz_select li input[type="checkbox"],
body.tb-runner .quiz_assign li input[type="radio"] {
  accent-color: var(--tb-primary);
  width: 20px; height: 20px;
  margin-right: 14px;
  flex-shrink: 0;
}
body.tb-runner .quiz_select li.selected,
body.tb-runner .quiz_select li:has(input:checked),
body.tb-runner .quiz_assign li:has(input:checked) {
  border-color: var(--tb-primary) !important;
  background: var(--tb-primary-soft) !important;
}

/* Vraag-illustratie */
body.tb-runner .question__image,
body.tb-runner .quiz_image,
body.tb-runner img.question_image {
  max-width: 100% !important;
  height: auto;
  border-radius: var(--tb-radius-lg);
  display: block;
  margin: 0 auto 18px;
}

/* ============================================================
 * TB Runner — Theorietoppers-stijl grid-layout
 * ============================================================ */

/* BOOTSTRAP TAB-MECHANIEK HERSTELLEN
 * Onze .singleQuestion-grid had hogere specificiteit dan Bootstrap's
 * .tab-pane:not(.active){display:none}, waardoor alle 50 tabs tegelijk
 * zichtbaar waren (overlap). Deze regel forceert Bootstrap's gedrag terug. */
body.tb-runner .tab-pane.singleQuestion:not(.active) {
  display: none !important;
}

/* singleQuestion = de actieve vraag-tab. Grid 1.1fr .9fr op desktop.
 * Image neemt kolom 1, alle andere kinderen kolom 2 in document-volgorde,
 * bottom-bar (.sumit_skip_btns) span over beide kolommen onderaan. */
body.tb-runner .singleQuestion.active,
body.tb-runner .singleQuestion {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: start;
}
/* Vraag zonder afbeelding — gecentreerd, 1 kolom */
body.tb-runner .singleQuestion:not(:has(.ques_thumb)) {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}
/* Verberg lege question_list_header binnen tab — anders neemt het ruimte in */
body.tb-runner .singleQuestion > .question_list_header { display: none; }

/* Image: kolom 1, spant over alle content-rijen, gecentreerd in eigen ruimte */
body.tb-runner .singleQuestion .ques_thumb {
  grid-column: 1;
  grid-row: 1 / span 99;
  align-self: center;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tb-bg);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius-lg);
  padding: 16px;
  overflow: hidden;
}
body.tb-runner .singleQuestion .ques_thumb img {
  max-width: 100%;
  max-height: calc(100vh - 64px - 40px - 48px - 80px);
  height: auto;
  object-fit: contain;
  border-radius: var(--tb-radius-md);
}

/* Vraag-zonder-afbeelding fallback: image-class niet aanwezig → alles op kolom 1 */
body.tb-runner .singleQuestion:not(:has(.ques_thumb)) > * {
  grid-column: 1;
}

/* Content (vraagtekst, opties, textarea) → kolom 2, auto-stack in document-volgorde */
body.tb-runner .singleQuestion > *:not(.ques_thumb):not(.sumit_skip_btns):not(input):not(small) {
  grid-column: 2;
  align-self: start;
}
body.tb-runner .singleQuestion > small {
  grid-column: 2;
  color: var(--tb-ink-2);
  font-size: .85rem;
  margin-top: -10px;
}

/* Bottom-bar: full-width onder beide kolommen */
body.tb-runner .singleQuestion .sumit_skip_btns {
  grid-column: 1 / -1;
  margin-top: 8px !important;
  padding-top: 18px;
  border-top: 1px solid var(--tb-line);
}
body.tb-runner .singleQuestion:not(:has(.ques_thumb)) .sumit_skip_btns {
  grid-column: 1;
}

/* Hidden inputs niet meerekenen in flow */
body.tb-runner .singleQuestion input[type="hidden"] { display: none; }

/* Bottom-bar styling — "Volgende" rechts, "Overslaan" links/secundair */
body.tb-runner .sumit_skip_btns {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0 !important;
}
body.tb-runner .sumit_skip_btns .quiz_secondary_btn,
body.tb-runner .sumit_skip_btns .submit_q_btn,
body.tb-runner .sumit_skip_btns .skip {
  background: transparent !important;
  color: var(--tb-ink-2) !important;
  border: 1.5px solid var(--tb-line) !important;
  border-radius: var(--tb-radius-md) !important;
  padding: .75rem 1.3rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all .15s var(--tb-ease-out);
  font-size: .95rem;
  line-height: 1;
  display: inline-flex; align-items: center;
  text-decoration: none;
  height: auto !important;
}
body.tb-runner .sumit_skip_btns .quiz_secondary_btn:hover,
body.tb-runner .sumit_skip_btns .submit_q_btn:hover,
body.tb-runner .sumit_skip_btns .skip:hover {
  background: var(--tb-bg) !important;
  border-color: var(--tb-primary) !important;
  color: var(--tb-primary) !important;
}
body.tb-runner .sumit_skip_btns .quiz_primary_btn,
body.tb-runner .sumit_skip_btns .next,
body.tb-runner .sumit_skip_btns .submitBtn {
  background: var(--tb-gradient-brand, var(--tb-primary)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--tb-radius-md) !important;
  padding: .85rem 1.8rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: transform .15s var(--tb-ease-spring);
  box-shadow: var(--tb-shadow-press-primary) !important;
  font-size: 1rem;
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  height: auto !important;
  line-height: 1;
}
body.tb-runner .sumit_skip_btns .quiz_primary_btn:hover,
body.tb-runner .sumit_skip_btns .next:hover,
body.tb-runner .sumit_skip_btns .submitBtn:hover {
  transform: translateY(-2px);
}
body.tb-runner .sumit_skip_btns .quiz_primary_btn::after,
body.tb-runner .sumit_skip_btns .next::after {
  content: "→";
  font-size: 1.1em;
  margin-left: 2px;
}

/* Geen interne scroll in de wrapper */
body.tb-runner .quiz_questions_wrapper {
  height: calc(100vh - 64px - 40px);
  display: flex;
  flex-direction: column;
}

/* Progress-bar in top-bar */
.tb-progress-bar {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 8px;
  background: var(--tb-line);
  border-radius: 999px;
  overflow: hidden;
}
.tb-progress-bar__fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--tb-gradient-brand, var(--tb-primary));
  border-radius: 999px;
  transition: width .25s var(--tb-ease-out);
  width: 0%;
}

/* Timer warn-state */
body.tb-runner .question_time[data-tb-timer-warn="warn"] {
  border-color: var(--tb-warning, #F59E0B) !important;
  color: var(--tb-warning, #F59E0B) !important;
}
body.tb-runner .question_time[data-tb-timer-warn="critical"] {
  border-color: var(--tb-error, #EF4444) !important;
  color: var(--tb-error, #EF4444) !important;
  animation: tb-pulse 1s ease-in-out infinite;
}
@keyframes tb-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Mobile — stacked layout */
@media (max-width: 899px) {
  body.tb-runner .singleQuestion {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "content"
      "actions";
    grid-template-rows: auto auto auto;
    gap: 16px;
    min-height: auto;
  }
  body.tb-runner .singleQuestion .ques_thumb {
    max-height: 40vh;
  }
  body.tb-runner .singleQuestion .ques_thumb img {
    max-height: 38vh;
  }
  body.tb-runner .quiz_questions_wrapper {
    height: auto;
    min-height: calc(100vh - 64px - 28px);
  }
  .tb-runner-main {
    max-height: none;
    overflow: visible;
  }
  body.tb-runner {
    overflow-y: auto;
  }
}

/* Next/submit-knop */
body.tb-runner .next_question_btn,
body.tb-runner .submit_quiz_btn,
body.tb-runner button[type="submit"]:not(.tb-runner-close),
body.tb-runner .theme_btn {
  background: var(--tb-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--tb-radius-md) !important;
  padding: .85rem 1.6rem !important;
  font-weight: 600 !important;
  font-family: var(--tb-font-body) !important;
  box-shadow: var(--tb-shadow-press-primary) !important;
  transition: transform .15s var(--tb-ease-spring) !important;
  display: inline-flex; align-items: center; gap: 8px;
}
body.tb-runner .next_question_btn:hover,
body.tb-runner .submit_quiz_btn:hover,
body.tb-runner button[type="submit"]:hover { transform: translateY(-2px); }

/* Modals — bewaar Infix' confirm-modals maar in TB-stijl */
body.tb-runner .modal-content {
  border: 0 !important;
  border-radius: var(--tb-radius-xl) !important;
  background: var(--tb-paper) !important;
  box-shadow: var(--tb-shadow-xl) !important;
}
body.tb-runner .modal-header {
  border-bottom: 1px solid var(--tb-line);
  font-family: var(--tb-font-display);
  font-weight: 800;
}

/* Mobile — kleine viewport, stack alles */
@media (max-width: 768px) {
  .tb-runner-top-inner { padding: 10px 14px; gap: 10px; }
  .tb-runner-brand span { display: none; }
  .tb-runner-brand img { height: 30px; }
  .tb-runner-main { padding: 14px; }
  body.tb-runner .quiz_questions_wrapper,
  body.tb-runner .quiz__details { padding: 18px !important; }
}

/* ============================================================
 * TB DASHBOARD ZONES — Oefenexamens / Empty placeholders
 * ============================================================ */

/* Exam grid (oefenexamens zone) */
.tb-exam-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 700px) { .tb-exam-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .tb-exam-grid { grid-template-columns: repeat(3, 1fr); } }

.tb-exam-card {
  background: var(--tb-paper);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius-xl);
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: transform .25s var(--tb-ease-spring), box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.tb-exam-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: 4px; background: var(--tb-gradient-brand);
}
.tb-exam-card:hover { transform: translateY(-4px); box-shadow: var(--tb-shadow-lg); }

.tb-exam-num {
  font-family: var(--tb-font-display);
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: -.04em;
  line-height: 1;
  background: var(--tb-gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  flex-shrink: 0;
  min-width: 60px;
}

.tb-exam-body { flex: 1; min-width: 0; }
.tb-exam-title {
  font-family: var(--tb-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.015em;
  color: var(--tb-ink);
  margin: 0 0 12px 0;
}
.tb-exam-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 18px;
}
.tb-exam-meta-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem;
  color: var(--tb-ink-3);
  font-weight: 500;
}
.tb-exam-meta-item svg { color: var(--tb-primary); }

/* Empty / "Binnenkort" zone */
.tb-empty-zone {
  background: var(--tb-paper);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius-xl);
  padding: 60px 32px;
  text-align: center;
}
.tb-empty-icon {
  width: 120px; height: 120px;
  margin: 0 auto 24px;
  filter: drop-shadow(0 12px 24px rgba(139, 92, 246, .25));
}
.tb-empty-zone h2 {
  font-family: var(--tb-font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -.025em;
  margin: 0 0 14px;
  color: var(--tb-ink);
}
.tb-empty-zone p {
  max-width: 480px;
  margin: 0 auto 24px;
  color: var(--tb-ink-2);
  font-size: 1.02rem;
}

/* ============================================================
 * INFIX COMPONENT-OVERRIDES (TheorieBriljant branding)
 * ============================================================ */

/* ---------- Sidebar (student dashboard) ---------- */
body nav.sidebar {
  background: var(--tb-paper) !important;
  border-right: 1px solid var(--tb-line) !important;
  font-family: var(--tb-font-body) !important;
}
body nav.sidebar .logo { padding: 20px !important; border-bottom: 1px solid var(--tb-line); }
body nav.sidebar .sidebar-user h4 {
  font-family: var(--tb-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--tb-ink) !important;
  font-size: 1rem !important;
}
body nav.sidebar ul li a {
  color: var(--tb-ink-2) !important;
  padding: 10px 18px !important;
  border-radius: var(--tb-radius-md) !important;
  margin: 2px 12px !important;
  font-weight: 500 !important;
  transition: all .15s var(--tb-ease-out) !important;
}
body nav.sidebar ul li a:hover {
  background: var(--tb-primary-soft) !important;
  color: var(--tb-primary-dark) !important;
}
body nav.sidebar ul li a.active {
  background: var(--tb-gradient-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(249, 115, 22, .4) !important;
}
body nav.sidebar ul li a .menu_icon svg {
  width: 18px !important; height: 18px !important;
}

/* Verberg sidebar-items die niet passen bij ons single-vendor + abonnement model */
body nav.sidebar ul li:has(a[href*="my-courses"]),
body nav.sidebar ul li:has(a[href*="appointment"]),
body nav.sidebar ul li:has(a[href*="bundle"]),
body nav.sidebar ul li:has(a[href*="affiliate"]),
body nav.sidebar ul li:has(a[href*="chat"]),
body nav.sidebar ul li:has(a[href*="my-class"]),
body nav.sidebar ul li:has(a[href*="live-class"]),
body nav.sidebar ul li:has(a[href*="wishlist"]),
body nav.sidebar ul li:has(a[href*="prebooking"]),
body nav.sidebar ul li:has(a[href*="following"]),
body nav.sidebar ul li:has(a[href*="cpd"]),
body nav.sidebar ul li:has(a[href*="referral"]),
body nav.sidebar ul li:has(a[href*="my-question"]),
body nav.sidebar ul li:has(a[href*="invoice"]),
body nav.sidebar ul li:has(a[href*="membership"]),
body nav.sidebar ul li:has(a[href*="assignment"]),
body nav.sidebar ul li:has(a[href*="report"]),
body nav.sidebar ul li:has(a[href*="store"]),
body nav.sidebar ul li:has(a[href*="deposit"]),
body nav.sidebar ul li:has(a[href*="logged-in-device"]),
body nav.sidebar ul li:has(a[href*="course-badge"]),
body nav.sidebar ul li:has(a[href*="elibrary"]) {
  display: none !important;
}

/* ---------- Quiz/course cards (op /quizzes) ---------- */
.course-item, .quiz-item, .course_item_innner_v2 {
  background: var(--tb-paper) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-radius-xl) !important;
  box-shadow: var(--tb-shadow-sm) !important;
  overflow: hidden !important;
  transition: transform .25s var(--tb-ease-spring), box-shadow .25s !important;
}
.course-item:hover, .quiz-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--tb-shadow-lg) !important;
}
.course-item-info, .quiz-item-content { padding: 20px !important; }
.course-tag, .quiz-tag {
  background: var(--tb-primary-soft) !important;
  color: var(--tb-primary-dark) !important;
  border: 0 !important;
  font-weight: 600 !important;
}
.course-item-img, .quiz-item-img { border-radius: 0 !important; }

/* ---------- Instructor / multi-vendor sections weg (single-vendor platform) ---------- */
[data-aoraeditor-title*="Become Instructor"],
[data-aoraeditor-title*="Tutor"],
[data-aoraeditor-title*="Instructor"],
.become-instructor-content,
.become-instructor-img,
.become-instructor-shape,
[class*="become_instructor_area"],
[class*="home_become_instructor"],
[class*="instructor_marketplace"],
[class*="tutor_marketplace"] {
  display: none !important;
}

/* Hide any element that has parent component with aoraeditor-title containing 'Instructor' */
[data-aoraeditor-title="Become Instructor"],
[data-aoraeditor-title="HomePage Become Instructor Section"] {
  display: none !important;
}

/* ---------- Cart-icon en aankoop-flow weg (single-vendor + abonnement) ---------- */
.cart_header,
.cart_store,
.checkbox_cart,
.add-to-cart,
.shopping-cart,
li.cart-item,
.dropdown-cart,
.cart-icon {
  display: none !important;
}

/* ---------- Buttons ---------- */
.theme_btn, .common_btn, .btn-primary, .btn.btn-success {
  background: var(--tb-primary) !important;
  border-color: var(--tb-primary) !important;
  color: #fff !important;
  border-radius: var(--tb-radius-md) !important;
  font-family: var(--tb-font-body) !important;
  font-weight: 600 !important;
  padding: .8rem 1.5rem !important;
  box-shadow: var(--tb-shadow-press-primary) !important;
  transition: transform .15s var(--tb-ease-spring) !important;
}
.theme_btn:hover, .common_btn:hover, .btn-primary:hover {
  transform: translateY(-2px) !important;
  background: var(--tb-primary) !important;
}
.btn-outline-primary {
  border-color: var(--tb-primary) !important;
  color: var(--tb-primary) !important;
}

/* ---------- Form inputs ---------- */
.form-control,
.input-group .form-control,
.custom_group_field input {
  border-radius: var(--tb-radius-md) !important;
  border: 1.5px solid var(--tb-line) !important;
  padding: .8rem 1rem !important;
  font-family: var(--tb-font-body) !important;
  transition: all .15s !important;
}
.form-control:focus {
  border-color: var(--tb-primary) !important;
  box-shadow: 0 0 0 4px var(--tb-primary-soft) !important;
}

/* ---------- Breadcrumb ---------- */
.breadcam_wrap, .breadcumb_area, .breadcrumb_area {
  background: var(--tb-bg) !important;
  padding: 30px 0 !important;
  border-bottom: 1px solid var(--tb-line) !important;
}
.breadcrumb { background: transparent !important; }
.breadcrumb-item a { color: var(--tb-primary) !important; }

/* ---------- Cards (general bootstrap) ---------- */
.card {
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-radius-lg) !important;
  box-shadow: var(--tb-shadow-sm) !important;
}
.card-header {
  background: var(--tb-bg) !important;
  border-bottom: 1px solid var(--tb-line) !important;
  font-family: var(--tb-font-display) !important;
  font-weight: 700 !important;
}

/* ---------- Footer ---------- */
.aoraeditor-footer,
.footer_area {
  background: var(--tb-ink) !important;
  color: rgba(255, 255, 255, .75) !important;
}
.aoraeditor-footer h4, .aoraeditor-footer h5 {
  color: #fff !important;
  font-family: var(--tb-font-display) !important;
  font-weight: 700 !important;
}
.aoraeditor-footer a {
  color: rgba(255, 255, 255, .7) !important;
}
.aoraeditor-footer a:hover {
  color: var(--tb-primary) !important;
}

/* ---------- Cookie-banner ---------- */
.cookeSettingModalBtn,
#cookeSettingModal {
  font-family: var(--tb-font-body) !important;
}

/* ---------- Pagination ---------- */
.pagination .page-link {
  color: var(--tb-ink-2) !important;
  border-color: var(--tb-line) !important;
  font-weight: 500 !important;
}
.pagination .page-item.active .page-link {
  background: var(--tb-primary) !important;
  border-color: var(--tb-primary) !important;
  color: #fff !important;
}

/* ---------- Dashboard widget cards ---------- */
.dashboard_part .card_box,
.box_header,
.dashboard-widget {
  background: var(--tb-paper) !important;
  border-radius: var(--tb-radius-xl) !important;
  border: 1px solid var(--tb-line) !important;
  box-shadow: var(--tb-shadow-sm) !important;
}
.box_header { padding: 18px 24px !important; }

/* ---------- Headings throughout ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--tb-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--tb-ink) !important;
}

/* ---------- Tables ---------- */
.table thead th {
  background: var(--tb-bg) !important;
  font-family: var(--tb-font-display) !important;
  font-weight: 700 !important;
  border-color: var(--tb-line) !important;
}
.table td, .table th { border-color: var(--tb-line) !important; }

/* ---------- Login wrapper (Infix' default na restore) ---------- */
.login_wrapper {
  background: var(--tb-bg) !important;
}
.login_wrapper_content h4 {
  font-family: var(--tb-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}

/* ---------- Infix-defaults override ----------
 * AoraPageBuilder injecteert inline `<style data-type="aoraeditor-style">`
 * met Infix-defaults (paars/roze #660AFB / #BF37FF). Die inline style komt
 * NA onze brand.css in source-order en zou daarom standaard winnen. Met
 * `!important` op CSS custom properties forceren we onze brand-kleuren.
 *
 * Mapping naar logo-DNA:
 *   --system_primery_gredient1 → --tb-secondary (Theorie Paars #8B5CF6)
 *   --system_primery_gredient2 → --tb-accent    (Examen Magenta #EC4899)
 *   --menu_hover_text + footer_text_hover_color → --tb-primary (Briljant Oranje #F97316)
 */
:root {
  /* Hoofd-gradient (zowel "primery" als "primary" — Infix heeft typo, dekken beide af) */
  --system_primery_gredient1: var(--tb-secondary) !important;
  --system_primery_gredient2: var(--tb-accent)    !important;
  --system_primary_gredient1: var(--tb-secondary) !important;
  --system_primary_gredient2: var(--tb-accent)    !important;

  --system_primery_color: var(--tb-gradient-brand) !important;
  --system_primary_color: var(--tb-gradient-brand) !important;

  --system_secendory_color: var(--tb-ink) !important;
  --bg_color: var(--tb-bg) !important;

  /* Footer */
  --footer_background_color: var(--tb-ink)        !important;
  --footer_headline_color:   #FFFFFF              !important;
  --footer_text_color:       rgba(255,255,255,.65) !important;
  --footer_text_hover_color: var(--tb-primary)    !important;

  /* Menu / nav */
  --menu_bg:          var(--tb-paper)  !important;
  --menu_text:        var(--tb-ink)    !important;
  --menu_title_text:  var(--tb-ink)    !important;
  --menu_hover_text:  var(--tb-primary) !important;

  /* Translucent variants — onze paars met diverse alpha-waardes
     (Infix-hex: #660AFB + xx = paars met alpha; vervangen door #8B5CF6 + alpha) */
  --system_primery_color_0:  rgba(139, 92, 246, 0)    !important;
  --system_primery_color_05: rgba(139, 92, 246, 0.05) !important;
  --system_primery_color_07: rgba(139, 92, 246, 0.07) !important;
  --system_primery_color_08: rgba(139, 92, 246, 0.08) !important;
  --system_primery_color_10: rgba(139, 92, 246, 0.10) !important;
  --system_primery_color_20: rgba(139, 92, 246, 0.20) !important;
  --system_primery_color_30: rgba(139, 92, 246, 0.30) !important;
  --system_primery_color_50: rgba(139, 92, 246, 0.50) !important;
  --system_primery_color_60: rgba(139, 92, 246, 0.60) !important;
  --system_primery_color_70: rgba(139, 92, 246, 0.70) !important;

  --system_primary_color_0:  rgba(139, 92, 246, 0)    !important;
  --system_primary_color_05: rgba(139, 92, 246, 0.05) !important;
  --system_primary_color_07: rgba(139, 92, 246, 0.07) !important;
  --system_primary_color_08: rgba(139, 92, 246, 0.08) !important;
  --system_primary_color_10: rgba(139, 92, 246, 0.10) !important;
  --system_primary_color_20: rgba(139, 92, 246, 0.20) !important;
  --system_primary_color_30: rgba(139, 92, 246, 0.30) !important;
  --system_primary_color_50: rgba(139, 92, 246, 0.50) !important;
  --system_primary_color_60: rgba(139, 92, 246, 0.60) !important;
  --system_primary_color_70: rgba(139, 92, 246, 0.70) !important;

  --system_secendory_color_10: rgba(31, 41, 55, 0.10) !important;
  --sytem_gradient_2: var(--tb-ink) !important;

  /* Fonts (Infix gebruikt al Plus Jakarta Sans als font1, plus Inter — wij maken het uniform) */
  --fontFamily1: 'Plus Jakarta Sans', sans-serif !important;
  --fontFamily2: 'Plus Jakarta Sans', sans-serif !important;
}