/* Heldivo — override op Tabler (MIT). Doel: maximaal 150 regels eigen CSS.
   Merk: warm oranje op het neutrale Tabler-grijs. De rest komt van Tabler. */

:root {
  --tblr-primary: #e8601c;
  --tblr-primary-rgb: 232, 96, 28;
  --h-warm: #fbf6f0;
}
.btn-primary {
  --tblr-btn-bg: #e8601c; --tblr-btn-border-color: #e8601c;
  --tblr-btn-hover-bg: #cf5313; --tblr-btn-hover-border-color: #cf5313;
  --tblr-btn-active-bg: #b84a10; --tblr-btn-active-border-color: #b84a10;
}
.text-primary { color: #cf5313 !important; }
.bg-primary { background-color: #e8601c !important; }
.link-primary, a.text-primary { color: #cf5313 !important; }
.badge.bg-primary, .bg-primary-lt { --tblr-primary-rgb: 232, 96, 28; }
.page-link.active, .active > .page-link { background: #e8601c; border-color: #e8601c; }
.form-check-input:checked { background-color: #e8601c; border-color: #e8601c; }
.nav-link.active, .navbar-nav .nav-link.active { color: #cf5313; }

/* Marketing: masthead met foto (Start Bootstrap "Landing"-opzet, eigen kleuren) */
.masthead {
  position: relative; color: #fff; padding: 7rem 0 6rem;
  background: #2a211b center/cover no-repeat;
}
.masthead::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(31,24,19,.82), rgba(31,24,19,.45)); }
.masthead > .container, .masthead > .container-xl { position: relative; }
.masthead h1, .masthead .h1 { color: #fff; font-weight: 700; letter-spacing: -.01em; }
.showcase-img { min-height: 20rem; background-size: cover; background-position: center; border-radius: var(--tblr-border-radius-lg); }
.photo-cover { object-fit: cover; width: 100%; height: 100%; }

/* Browserkader rond schermafbeeldingen van het kabinet */
.browser { border: 1px solid var(--tblr-border-color); border-radius: 12px; overflow: hidden; box-shadow: 0 1rem 2.5rem rgba(24,20,16,.14); background: #fff; }
.browser__bar { display: flex; align-items: center; gap: .4rem; padding: .5rem .8rem; background: #f1ece6; border-bottom: 1px solid var(--tblr-border-color); }
.browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: #d8cfc5; display: inline-block; }
.browser__url { margin-left: .6rem; font-size: .8rem; color: #8a7f74; }
.browser img { display: block; width: 100%; }

/* Weekplanner (Cal-achtig tijdraster) — dashboardmodule met drag-and-drop */
.planner { border: 1px solid var(--tblr-border-color); border-radius: 10px; overflow: hidden; background: #fff; }
.planner__heads, .planner__grid { display: flex; }
.planner__grid { overflow-x: auto; }
.planner__pad { width: 52px; flex: none; }
.planner__head { flex: 1 1 0; min-width: 96px; font-size: .78rem; font-weight: 600; padding: .4rem .5rem; background: #f6f1ec; border-bottom: 1px solid var(--tblr-border-color); border-right: 1px solid var(--tblr-border-color); text-align: center; }
.planner__gutter { width: 52px; flex: none; border-right: 1px solid var(--tblr-border-color); }
.planner__time { font-size: .7rem; color: #9b9188; height: 48px; padding-right: .3rem; text-align: right; }
.planner__col { flex: 1 1 0; min-width: 96px; position: relative; border-right: 1px solid var(--tblr-border-color);
  background-image: repeating-linear-gradient(#f2ede7 0 1px, transparent 1px 48px); }
.planner__col:last-child { border-right: 0; }
.lesson-chip { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 3px 6px; font-size: .74rem; line-height: 1.2;
  background: #fce6d6; border: 1px solid #f0b483; color: #7a3a12; overflow: hidden; cursor: grab; touch-action: none; }
.lesson-chip.is-done { background: #eef1f4; border-color: #d4dae0; color: #51607a; }
.lesson-chip.dragging { opacity: .85; cursor: grabbing; box-shadow: 0 .5rem 1.2rem rgba(24,20,16,.22); z-index: 5; }
.lesson-chip b { display: block; font-weight: 600; }

/* Lesboekje-bord (Trello-achtige niveaukolommen 0–4) */
.board { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: .6rem; overflow-x: auto; }
.board__col { background: #f6f1ec; border-radius: 10px; padding: .5rem; }
.board__col h3 { font-size: .8rem; margin: 0 0 .5rem; color: #6b6158; font-weight: 600; }
.board__card { background: #fff; border: 1px solid var(--tblr-border-color); border-radius: 8px; padding: .4rem .55rem; margin-bottom: .45rem; font-size: .82rem; }
.board__card .lvl { font-size: .7rem; color: #9b9188; }

/* Pakketcalculator- en printhulpjes */
.calc-out { font-size: 2rem; font-weight: 700; color: #cf5313; }
@media print {
  .navbar, .footer, .btn, .page-header .btn, .no-print, .theme-toggle { display: none !important; }
  .page-wrapper, body { background: #fff !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; }
  a[href]::after { content: ""; }
}