/*
 * Gebruik altijd CSS-variabelen (zoals --domain-base, --domain-text, --domain-btn-text) voor domeinspecifieke kleuren.
 * Nooit hardcoded kleuren in componenten, knoppen of titels!
 * Zie ook de centrale JS-configuratie (domainColors) voor de juiste waarden.
 */

:root {
  /* Algemene campuskleur */
  --campus-kleur: #2B2243;

  /* Eerste graad */
  --eerste-donker: #ED4E13;
  --eerste-licht1: #F3764A;
  --eerste-licht2: #F8A588;

  /* STEM */
  --stem-donker: #0C8464;
  --stem-licht1: #48A787;
  --stem-licht2: #89CCB2;

  /* Sport & Topsport */
  --sport-donker: #6ABCD6;
  --sport-licht1: #A2E4FF;
  --sport-licht2: #C6F0FF;
  --sport-licht3: #E4F9FF;

  /* Maatschappij & Welzijn */
  --maatschappij-donker: #E399BB;
  --maatschappij-licht1: #EFBACD;
  --maatschappij-licht2: #F7D9E4;

  /* Economie & Organisatie */
  --economie-donker: #2B2243;
  --economie-licht1: #254A87;
  --economie-licht2: #5084C2;

  /* OKAN */
  --okan-donker: #E5A021;
  --okan-licht1: #F0B94E;
  --okan-licht2: #F9D38A;

  /* Generieke variabelen voor actief domein */
  --domain-base: #2B2243;
  --domain-mid: #254A87;
  --domain-text: #fff;
  --domain-hover: #F3764A;
}

/**
 * Dynamische Lessentabellen v3.2.0 - Functionaliteits CSS
 * Bevat alle functionele CSS zonder grid-specific styling
 * @copyright 2025 GO Campus Redingenhof
 */

/* Achtergrondpatroon per domein */
.lessentabellen-root .domein-sport {
  background: repeating-linear-gradient(135deg, #A2E4FF, #A2E4FF 10px, #C6F0FF 10px, #C6F0FF 20px);
  color: #002B3D;
}

.lessentabellen-root .domein-stem {
  background: repeating-linear-gradient(135deg, #0C8464, #0C8464 10px, #48A787 10px, #48A787 20px);
  color: white;
}

.lessentabellen-root .domein-welzijn {
  background: repeating-linear-gradient(135deg, #E399BB, #E399BB 10px, #EFBACD 10px, #EFBACD 20px);
  color: #2B2243;
}

.lessentabellen-root .domein-economie {
  background: repeating-linear-gradient(135deg, #2B2243, #2B2243 10px, #5084C2 10px, #5084C2 20px);
  color: white;
}

.lessentabellen-root .domein-okan {
  background: repeating-linear-gradient(135deg, #E5A021, #E5A021 10px, #F9D38A 10px, #F9D38A 20px);
  color: #2B2243;
}

/* Secties zoals BASISVORMING, SPECIFIEK GEDEELTE */
.lessentabellen-root .section-row td {
  text-transform: uppercase;
  font-weight: bold;
  background: rgba(0, 43, 61, 0.1);
  border-top: 2px solid #2B2243;
  border-bottom: 2px solid #2B2243;
  padding: 0.8rem 1rem;
  color: #2B2243;
}

/* Gewone vakken */
.lessentabellen-root .vak-row td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 0.95rem;
  color: #333;
  background: rgba(255,255,255,0.6);
}

/* Totaalrij */
.lessentabellen-root .total-row td {
  text-transform: uppercase;
  font-weight: bold;
  background: rgba(0, 43, 61, 0.1);
  border-top: 2px solid #2B2243;
  color: #2B2243;
  padding: 1rem;
}

/* Stage-weken */
.lessentabellen-root .stage-row td {
  text-transform: uppercase;
  font-weight: bold;
  background: rgba(0, 43, 61, 0.1);
  color: #0C8464;
  padding: 1rem;
  border-top: 2px solid #0C8464;
}

/* Tabel consistent max 800px */
.table-wrapper, #lessentabel-container {
  max-width: 800px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.footnotes {
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

.footnotes li {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Reset en basisstijlen */
.lessentabellen-root {
  --transition-speed: 0.3s;
  --border-radius: 0; /* Aangepast naar rechte hoeken */
  --shadow-default: 0 8px 24px rgba(0,0,0,0.08);
  color-scheme: light dark;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  width: 100%;
  line-height: 1.5;
}

.lessentabellen-root * {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Loader spinner */
.lessentabellen-root .loader-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  border-top-color: var(--app-domain-base, #fff);
  animation: spin 1s linear infinite;
  z-index: 0;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Slide-in paneel */
.lessentabellen-root #slidein {
  position: fixed;
  top: var(--dynamic-top, 120px);
  right: 0;
  width: 90%;
  max-width: 800px;
  height: calc(100% - var(--dynamic-top, 120px));
  background: #fff;
  color: #333;
  padding: 2.5rem !important;
  border-radius: 0; /* Aangepast naar rechte hoeken */
  box-shadow: -4px 0 25px rgba(0,0,0,0.25);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 99999;
  box-sizing: border-box;
  overscroll-behavior: contain;
}

.lessentabellen-root #slidein.open {
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Overlay met blur */
.lessentabellen-root #overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 99998;
}

.lessentabellen-root #overlay.show {
  opacity: 1 !important;
  pointer-events: all !important;
  visibility: visible !important;
}

/* Close-knop in domeinkleur */
.lessentabellen-root .close-btn {
  background: var(--domain-base, #2B2243) !important;
  color: var(--domain-text, #fff) !important;
  border: none;
}
.lessentabellen-root .close-btn:hover {
  background: var(--domain-mid, #254A87) !important;
  color: var(--domain-text, #fff) !important;
}

/* Actie‑knoppen */
.lessentabellen-root .action-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.5rem 0 !important;
}

.lessentabellen-root .action-buttons a,
.lessentabellen-root .action-buttons button {
  background: var(--domain-base);
  color: var(--domain-text);
  padding: 0.75rem 1.25rem !important;
  border-radius: 0; /* Aangepast naar rechte hoeken */
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  font-size: 1rem;
  box-shadow: none; /* Geen schaduw consistent met website */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lessentabellen-root .action-buttons a svg,
.lessentabellen-root .action-buttons button svg {
  width: 18px;
  height: 18px;
}

.lessentabellen-root .action-buttons a:hover,
.lessentabellen-root .action-buttons button:hover {
  background: var(--domain-mid);
  color: var(--domain-text);
}

/* Lessentabel stijlen */
.lessentabellen-root #lessentabel-container {
  position: relative;
  overflow-x: auto;
  margin: 0 -1rem;
  padding: 0 1rem;
}

.lessentabellen-root #lessentabel-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  margin: 1rem 0 !important;
  border-radius: 0; /* Aangepast naar rechte hoeken */
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Lessentabel header in domeinkleur */
.lessentabellen-root #lessentabel-container thead th,
.lessentabellen-root .lessentabel thead th {
  background: var(--domain-base, #2B2243);
  color: var(--domain-text, #fff);
}

/* Lessentabel zebra striping in lichte domeinkleur */
.lessentabellen-root #lessentabel-container tbody tr:nth-child(even),
.lessentabellen-root .lessentabel tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--domain-base, #2B2243) 8%, #fff 92%);
}

.lessentabellen-root #lessentabel-container th,
.lessentabellen-root #lessentabel-container td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
  line-height: 1.4;
}

.lessentabellen-root #lessentabel-container th:first-child,
.lessentabellen-root #lessentabel-container td:first-child {
  text-align: left;
  font-weight: 500;
}

.lessentabellen-root #lessentabel-container thead tr {
  background: transparent; /* Patroon zichtbaar */
  color: inherit; /* Kleur van domein blijft */
  text-shadow: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lessentabellen-root #lessentabel-container th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.lessentabellen-root #lessentabel-container tbody tr:nth-child(even) {
  background-color: rgba(0,0,0,0.02);
}

.lessentabellen-root #lessentabel-container tbody tr:hover {
  background-color: var(--hover-row) !important;
}

.lessentabellen-root #lessentabel-container .stage-row {
  font-weight: 600;
  border-top: 2px solid var(--app-domain-light1);
}

/* Details Styling */
.lessentabellen-root .footnotes {
  box-sizing: border-box;
  width: 100%;
  margin-top: 2rem !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.lessentabellen-root #opleiding-beschrijving {
  text-align: center;
  line-height: 1.6;
  margin-bottom: 1.5rem !important;
  font-size: 1.05rem;
  max-width: 700px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.lessentabellen-root #opleiding-titel {
  text-align: center;
  margin: 0.5rem 0 1.25rem !important;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--domain-base);
  position: relative;
  padding-bottom: 0.75rem;
}

.lessentabellen-root #opleiding-titel::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--domain-base);
  border-radius: 0; /* Aangepast naar rechte hoeken */
}

/* Print stijlen */
@media print {
  @page {
    size: A4 portrait;
    margin: 1.5cm;
  }
  
  body * {
    visibility: hidden;
  }
  
  .lessentabellen-wrapper,
  .lessentabellen-wrapper * {
    visibility: visible;
  }
  
  .lessentabellen-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: auto !important;
    padding: 0;
    line-height: 1.4;
    font-size: 12pt;
    color: #000 !important;
    background: #fff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  
  /* Verbeterde logo positionering */
  .lessentabellen-root .logo-print {
    display: block !important;
    max-width: 150px !important;
    height: auto;
    margin: 0 0 2rem 0 !important;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* Opleiding titel centreren en ruimte maken voor logo */
  .lessentabellen-root #opleiding-titel {
    text-align: center;
    margin: 5rem 0 1rem 0 !important;
    font-size: 18pt;
    padding-top: 1rem;
  }
  
  /* Onderaan plaatsen van datum en quote */
  .lessentabellen-root .datum {
    display: block !important;
    text-align: right;
    font-weight: normal;
    font-size: 9pt;
    position: absolute;
    bottom: 1rem;
    right: 0;
    margin: 0 !important;
  }
  
  .lessentabellen-root .quote {
    display: block !important;
    text-align: center;
    font-style: italic;
    font-size: 11pt;
    position: absolute;
    bottom: 1rem;
    left: 0;
    font-weight: bold;
    margin: 0 !important;
  }
  
  .lessentabellen-root .close-btn,
  .lessentabellen-root .action-buttons {
    display: none !important;
  }
  
  .lessentabellen-root #lessentabel-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem !important;
  }
  
  .lessentabellen-root #lessentabel-container th {
    background: #f0f0f0 !important;
    color: #000 !important;
    text-shadow: none !important;
    border: 1px solid #ddd;
    font-weight: bold;
    padding: 0.5rem !important;
  }
  
  .lessentabellen-root #lessentabel-container td {
    border: 1px solid #ddd;
    padding: 0.5rem !important;
  }
  
  .lessentabellen-root #opleiding-beschrijving {
    font-size: 11pt;
    margin-bottom: 2rem !important;
  }
  
  .lessentabellen-root .footnotes {
    font-size: 9pt;
    background: none !important;
    border-top: 1px solid #ddd;
    padding-top: 0.5rem !important;
    margin-top: 2rem !important;
  }
  
  /* Grijswaarde print optimalisatie */
  @media print and (monochrome) {
    .lessentabellen-root #lessentabel-container th {
      background: #ddd !important;
    }
    
    .lessentabellen-root #lessentabel-container tr:nth-child(even) {
      background: #f5f5f5 !important;
    }
  }
}

/* Skeleton loaders en meldingen */
.lessentabellen-root .skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 0; /* Aangepast naar rechte hoeken */
}

@keyframes skeleton-loading {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.lessentabellen-root .not-found-message {
  text-align: center;
  padding: 3rem 1rem !important;
  font-size: 1.2rem;
  color: #fff;
  background: rgba(0,0,0,0.2);
  border-radius: 0; /* Aangepast naar rechte hoeken */
}

.lessentabellen-root .error-message {
  background: rgba(255,0,0,0.05);
  border-left: 4px solid #ff3b30;
  color: #d32f2f;
  padding: 1rem !important;
  margin: 1rem 0 !important;
  border-radius: 0; /* Aangepast naar rechte hoeken */
}

/* Responsive aanpassingen voor slidein paneel */
@media (max-width: 768px) {
  /* Mobiele stijlen voor slidein */
  .lessentabellen-root #slidein {
    width: 100%;
    border-radius: 0;
    position: fixed;
    bottom: 0;
    top: auto !important; 
    height: 85% !important;
    max-height: 85vh;
    transform: translateY(100%);
    z-index: 999999; /* Extra hoge z-index voor mobiel */
  }
  
  .lessentabellen-root #slidein.open {
    transform: translateY(0) !important;
  }
  
  .lessentabellen-root .action-buttons {
    flex-direction: column;
  }

  /* Zorg dat de close button altijd zichtbaar is */
  .lessentabellen-root .close-btn {
    position: sticky;
    top: 0.5rem;
    right: 0.5rem;
    float: right;
    z-index: 10;
    background: var(--app-domain-base);
    color: white;
  }
}

/* Toegankelijkheid */
.lessentabellen-root :focus-visible {
  outline: 3px solid var(--app-domain-base);
  outline-offset: 3px;
}

/* Print-elementen */
.lessentabellen-root .logo-print {
  display: none;
  max-width: 150px;
}

.lessentabellen-root .datum {
  display: none;
}

.lessentabellen-root .quote {
  display: none;
}

/* Versie indicator */
.lessentabellen-root .version-indicator {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 5px 8px;
  border-radius: 0; /* Aangepast naar rechte hoeken */
  font-size: 10px;
  z-index: 99990;
  opacity: 0.6;
}

/* --- SUBVAK-BLOK: duidelijke driehoek en inspringing --- */
.lessentabellen-root .subvak-row td {
  color: var(--domain-base, #2B2243);
}
.lessentabellen-root .subvak-row td:first-child::before {
  color: var(--domain-mid, #254A87);
}

/* Overschrijf witte kopteksten enkel voor Sport */
.lessentabellen-root .domein-sport .lessentabel thead th {
    color: #2B2243 !important;
}

/* Specifiek: overschrijf witte kopteksten enkel voor sport-topsport */
#slidein[data-domain="sport-topsport"] .lessentabel thead th {
    color: #2B2243 !important;
}

#slidein[data-domain="sport-topsport"] .lessentabel .section-row th {
  background-color: #E4F9FF;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='0.02'%3E%3Cpath d='M50 0 L100 100 L0 100 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 20px 20px; /* Past de grootte van de driehoeken aan */
  color: #6ABCD6;
  font-weight: bold;
}
#slidein[data-domain="sport-topsport"] .lessentabel .subvak-row td {
  color: #6ABCD6 !important;
  font-style: italic;
  font-weight: 500; /* iets vetter zonder te zwaar te ogen */
  text-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.finaliteit-blok h4 {
  color: var(--domain-base, #2B2243);
}
.lessentabellen-root .domain-block[data-domain="sport-topsport"] .finaliteit-blok h4,
.lessentabellen-root .domain-block[data-domain="sport"] .finaliteit-blok h4 {
  color: #2B2243 !important;
}