/* SYSTJEM 11.2.4 — contrast, uitlijning en rustige polish */
:root{
  --sj24-green:#3f6149;
  --sj24-green-dark:#294235;
  --sj24-bg:#f5f4ef;
  --sj24-card:#fffefa;
  --sj24-line:#dddcd5;
  --sj24-ink:#26231f;
  --sj24-muted:#6e726b;
  --sj24-shadow:0 12px 32px rgba(36,39,33,.065);
}
html{scroll-behavior:smooth}
body{background:var(--sj24-bg)!important;color:var(--sj24-ink)!important}
.wrap{width:min(100%,1480px)!important}
.card,.setting-card,.student-card,.connection-card,.communication-card,.lesson-card,.lessonbook-card,.modal{
  background:var(--sj24-card)!important;border-color:var(--sj24-line)!important;box-shadow:var(--sj24-shadow)!important;
}
.card{border-radius:18px!important}
.module-heading,.material-header,.lessonbook-head,.settings-title,.communication-heading,.page-head{max-width:100%;min-width:0}
.module-heading h2,.material-header h2,.lessonbook-head h2,.settings-title h2,.communication-heading h2,.page-head h2{letter-spacing:-.025em!important}
p,.small,.hint{line-height:1.55}

/* Altijd witte tekst op donker groen */
.btn.green,.primary,.confirmed,.badge.confirmed,.status-on,.slot.active,.booking-submit,
.event.confirmed,.calendar-card .event.confirmed,.student-card .badge.confirmed,
button.primary,input[type="submit"].primary{
  background:var(--sj24-green)!important;color:#fff!important;border-color:var(--sj24-green)!important;
}
.btn.green *,.primary *,.confirmed *,.badge.confirmed *,.status-on *,.slot.active *,.booking-submit *{color:#fff!important}
.btn.green:hover,.primary:hover,.slot.active:hover,.booking-submit:hover,.event.confirmed:hover{background:var(--sj24-green-dark)!important;color:#fff!important}
.admin-hero,.adminnav{color:#fff}
.adminnav a,.adminnav button,.adminnav .btn,.adminnav .btn.light{color:#e9eee9!important}
.adminnav .btn.green,.adminnav .btn.green *{color:#fff!important}
.adminnav .btn:hover{color:#fff!important}
.booking-brand-hero,.booking-brand-hero *{color:#fff!important}
.booking-brand-hero .company-logo{color:var(--sj24-ink)!important}

/* Boekingsheader: nette, stabiele uitlijning */
.booking-brand-hero{overflow:hidden!important}
.booking-brand-hero .hero-inner{
  width:min(100%,1320px)!important;max-width:1320px!important;margin:0 auto!important;
  display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;
  gap:24px!important;padding:30px 28px!important;min-height:190px!important;
}
.booking-logo-pair{align-self:center!important;justify-self:start!important;flex-wrap:nowrap!important}
.booking-brand-hero .hero-inner>div:last-child{width:100%!important;min-width:0!important;margin:0!important}
.booking-brand-hero h1,.booking-brand-hero p,.booking-powered{max-width:100%!important;overflow-wrap:anywhere!important}
.booking-brand-hero p{white-space:normal!important;margin:0!important;line-height:1.5!important}
.booking-step{display:flex!important;align-items:center!important;gap:14px!important}
.booking-step>div{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important}
.booking-step small:empty{display:none!important}
.booking-step>span{flex:0 0 42px!important;width:42px!important;height:42px!important;display:grid!important;place-items:center!important;color:#fff!important}
.booking-calendar,.booking-form-card{padding:24px!important}
.booking-form-card form{display:grid!important;grid-template-columns:1fr!important;gap:0!important;width:100%!important;margin:0!important}
.booking-form-card form>.two{width:100%!important;margin:0!important;gap:10px!important}
.booking-form-card input,.booking-form-card select,.booking-form-card textarea,.booking-form-card button{margin-left:0!important;margin-right:0!important;max-width:none!important}
.booking-form-card .booking-submit{width:100%!important;margin-top:14px!important;min-height:50px!important}
.booking-page .calhead{display:grid!important;grid-template-columns:46px minmax(0,1fr) 46px!important;align-items:center!important}
.booking-page .calhead h2{text-align:center!important;margin:0!important}
.booking-page .calhead .btn{display:grid!important;place-items:center!important;width:46px!important;height:46px!important;padding:0!important}
.booking-page .weekdays span{color:#5d4a34!important}
.booking-page .weekno{color:#5d4a34!important}

/* Formulieren en acties exact in lijn */
label{color:#30291f}
input,select,textarea{border-color:#d7d8d1!important;border-radius:10px!important;min-height:44px!important}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(63,97,73,.16)!important;border-color:#6f8c76!important}
.two,.three,.settings-grid,.student-info-grid,.calendar-connections{align-items:start!important}
.actions{align-items:center!important}
.actions form{margin:0!important}
.btn,button,.primary{min-height:42px!important;display:inline-flex;align-items:center;justify-content:center;line-height:1.2}

/* Leerlingen en badges */
.student-grid{gap:16px!important}
.student-card{padding:20px!important;border-radius:16px!important}
.student-card h3{line-height:1.25!important;margin-bottom:12px!important}
.student-card .small{color:var(--sj24-muted)!important}
.badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:32px!important;padding:6px 12px!important}
.badge.inactive{background:#ece9e2!important;color:#625e57!important}
.student-card-actions{margin-top:14px!important}

/* Kalender */
.calendar-card .event,.event{color:#fff!important;font-weight:750!important;line-height:1.25!important}
.calendar-card .event *,.event *{color:#fff!important}
.calendar-card .event.confirmed{background:#3f684c!important}
.calendar-card .event.new,.calendar-card .event.awaiting_payment{background:#8a592d!important}
.calendar-card .event.external{background:#3e6375!important}
.calendar-card .event.reserved{background:#664f7d!important}
.calendar-card .event.cancelled{background:#8a4040!important}
.calendar-card .day{background:#fffefa!important}
.calendar-card .day.today{outline-color:#5b815f!important}
.calendar-card .weekno{background:#eeeae1!important;color:#5c513f!important}

/* Tabellen, tabs en navigatie */
.systjem-table-scroll{border:1px solid var(--sj24-line);border-radius:14px;background:#fff;overflow:auto}
.table th{background:#f2f0ea!important;color:#4a4238!important;position:sticky;top:0;z-index:1}
.table td,.table th{vertical-align:middle!important}
.tabs,.material-tabs,.communication-tabs,.section-nav{gap:6px!important}
.tabs a,.material-tabs a,.communication-tabs a,.section-nav a{border-radius:9px!important}
.tabs a.active,.material-tabs a.active,.communication-tabs a.active,.section-nav a.active{color:#365d42!important;background:#edf2eb!important}

/* Mobiel: alle tabs bruikbaar */
@media(max-width:900px){
  .wrap,.admin-wrap{padding-left:14px!important;padding-right:14px!important}
  .booking-brand-hero .hero-inner{grid-template-columns:auto minmax(0,1fr)!important;padding:20px 16px!important;gap:14px!important;min-height:auto!important}
  .booking-brand-hero h1{font-size:26px!important}
  .booking-brand-hero p{font-size:14px!important}
  .booking-calendar,.booking-form-card{padding:16px!important}
  .booking-page{gap:14px!important}
  .student-grid,.settings-grid,.communication-grid,.lessonbook-folder-grid,.lessonbook-material-grid,.dashboard-grid,.stat{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .module-heading,.material-header,.lessonbook-head,.communication-heading,.settings-title{gap:12px!important}
  .actions,.student-card-actions,.toolbar-actions{flex-wrap:wrap!important}
  .actions>*{min-width:0}
  .table{min-width:720px}
  .calendar-card .weekdays,.calendar-card .week{min-width:800px!important}
  .calendar-card.calendar-span-two .day{min-height:175px!important}
  dialog,.modal{max-height:calc(100dvh - 20px)!important;overflow:auto!important}
}
@media(max-width:620px){
  .booking-brand-hero .hero-inner{grid-template-columns:1fr!important;text-align:center!important}
  .booking-logo-pair{justify-self:center!important}
  .booking-brand-hero .hero-inner>div:last-child{text-align:center!important}
  .booking-page .weekdays,.booking-page .week{min-width:720px!important}
  .booking-calendar{overflow-x:auto!important}
  .booking-step{align-items:flex-start!important}
  .booking-form-card form>.two{grid-template-columns:1fr!important}
  .student-grid,.settings-grid,.communication-grid,.lessonbook-folder-grid,.lessonbook-material-grid,.dashboard-grid,.stat{grid-template-columns:1fr!important}
  .student-card{padding:16px!important}
  .btn,button,.primary{min-height:46px!important}
  .actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .actions>*,.actions form,.actions .btn{width:100%!important}
  .module-heading h2,.material-header h2,.lessonbook-head h2,.settings-title h2{font-size:25px!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}