:root{
  --blue:#0098d1;
  --dark:#292b31;
  --muted:#69737c;
  --line:#dbe4e8;
  --wash:#edf7fa
}
*{
  box-sizing:border-box
}
body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--dark)
}
.display-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:radial-gradient(circle at 88% 0,#d5f2fa,transparent 30%),linear-gradient(135deg,#f8fbfc,#eaf5f8)
}
.display-header{
  min-height:150px;
  display:grid;
  grid-template-columns:330px 1fr auto;
  align-items:center;
  gap:40px;
  padding:20px 4vw;
  background:#fff;
  border-bottom:5px solid var(--blue);
  box-shadow:0 8px 28px #15384615
}
.brand-logo{
  width:310px;
  height:105px;
  object-fit:contain;
  object-position:left
}
.eyebrow{
  color:#007bb2;
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:5px
}
.header-copy h1{
  font-size:clamp(34px,3.2vw,58px);
  font-weight:800;
  letter-spacing:-.04em;
  margin:0
}
.clock{
  padding-left:24px;
  border-left:1px solid var(--line);
  text-align:right;
  text-transform:capitalize
}
.clock div{
  font-weight:700
}
.clock strong{
  display:block;
  color:var(--blue);
  font-size:22px
}
.schedule-wrap{
  width:min(1500px,94vw);
  margin:clamp(25px,4vh,50px) auto;
  flex:1;
  padding:0
}
.schedule-wrap h2{
  font-size:clamp(25px,2.4vw,38px);
  font-weight:750;
  margin:0
}
.live-badge{
  background:#dff5e8;
  color:#157c43;
  padding:8px 14px;
  border-radius:99px;
  font-weight:700
}
.live-badge i{
  display:inline-block;
  width:9px;
  height:9px;
  background:#22a45c;
  border-radius:50%;
  margin-right:5px
}
.schedule-card{
  overflow:hidden;
  background:white;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 20px 55px #15384610
}
.schedule-head,.schedule-row{
  display:grid;
  grid-template-columns:120px minmax(360px,1fr) 220px 270px;
  align-items:center
}
.schedule-head{
  min-height:48px;
  padding:0 28px;
  background:#27323a;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase
}
.schedule-row{
  min-height:110px;
  padding:0 28px;
  border-top:1px solid var(--line)
}
.schedule-row:nth-child(even){
  background:#fbfdfe
}
.time-cell{
  color:#007bab;
  font-size:28px;
  font-weight:900
}
.club-cell{
  display:flex;
  align-items:center;
  gap:17px
}
.club-mark{
  display:grid;
  place-items:center;
  width:45px;
  height:45px;
  background:var(--wash);
  color:#007bab;
  border-radius:12px;
  font-weight:900
}
.club-cell strong,.club-cell span{
  display:block
}
.club-cell strong{
  font-size:clamp(19px,1.6vw,25px)
}
.club-cell div span{
  color:var(--muted);
  font-size:15px;
  margin-top:4px
}
.destination{
  align-self:stretch;
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:24px;
  border-left:1px solid var(--line);
  font-size:20px
}
.destination b{
  margin-left:auto;
  margin-right:25px;
  color:var(--blue)
}
.destination.room{
  margin-right:-28px;
  background:var(--blue);
  color:#fff;
  border:0;
  padding-right:28px
}
.destination.room b{
  color:#fff;
  font-size:10px
}
.empty-state{
  text-align:center;
  padding:70px 25px;
  color:var(--muted)
}
.empty-state strong,.empty-state span{
  display:block
}
.empty-state strong{
  font-size:23px;
  color:var(--dark);
  margin-bottom:7px
}
footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:17px 4vw;
  background:#27323a;
  color:#dbe4e8;
  font-size:14px
}
.admin-page{
  background:#f4f7f8;
  min-height:100vh
}
.admin-logo{
  width:185px;
  height:65px;
  object-fit:contain
}
.login-card{
  width:min(430px,calc(100% - 30px));
  margin:10vh auto
}
.btn-primary{
  background:var(--blue);
  border-color:var(--blue)
}
.table thead th{
  background:#27323a;
  color:#fff;
  padding:14px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em
}
.table td{
  padding:14px
}
@media(max-width:950px){
  .display-header{
    grid-template-columns:220px 1fr
  }
  .brand-logo{
    width:210px
  }
  .clock{
    display:none
  }
  .schedule-head,.schedule-row{
    grid-template-columns:90px 1fr 200px
  }
  .schedule-head span:nth-child(3){
    display:none
  }
  .schedule-row>.destination:not(.room){
    display:none
  }
}
@media(max-width:640px){
  .display-header{
    grid-template-columns:125px 1fr;
    min-height:105px;
    padding:12px 16px;
    gap:15px
  }
  .brand-logo{
    width:125px;
    height:65px
  }
  .eyebrow{
    font-size:10px
  }
  .header-copy .eyebrow{
    display:none
  }
  .header-copy h1{
    font-size:24px
  }
  .schedule-head{
    display:none
  }
  .schedule-row{
    grid-template-columns:70px 1fr;
    padding:16px;
    gap:8px
  }
  .time-cell{
    font-size:21px
  }
  .club-mark{
    display:none
  }
  .club-cell strong{
    font-size:17px
  }
  .destination.room{
    grid-column:1/-1;
    margin:8px 0 0;
    padding:12px 14px;
    border-radius:10px
  }
  .destination.room b{
    margin-right:0
  }
  .schedule-wrap{
    width:calc(100% - 24px);
    margin:20px auto
  }
  footer{
    display:block;
    padding:14px 18px
  }
  footer span{
    display:block;
    margin:4px 0
  }
}
.schedule-head,.schedule-row{
  grid-template-columns:190px minmax(360px,1fr) 220px 270px
}
.time-cell{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:25px
}
.time-cell small{
  color:#93a0a7;
  font-size:18px
}
@media(max-width:950px){
  .schedule-head,.schedule-row{
    grid-template-columns:170px 1fr 200px
  }
}
@media(max-width:640px){
  .schedule-row{
    grid-template-columns:120px 1fr
  }
  .time-cell{
    font-size:18px;
    gap:6px
  }
}
.note-line{
  color:var(--muted);
  font-size:15px;
  margin-top:5px
}
.note-line:before{
  content:"Opmerking: ";
  font-weight:700;
  color:#4f5b63
}
.club-cell{
  gap:0
}
.schedule-head span{
  text-align:center
}
.schedule-row>div{
  text-align:center;
  justify-content:center
}
.time-cell{
  justify-content:center
}
.club-cell{
  justify-content:center
}
.destination{
  padding-left:0
}
.destination b{
  margin-left:12px;
  margin-right:0
}
.destination.room{
  padding-left:28px
}
.club-cell strong,.club-cell .note-line{
  text-align:center
}
@media(max-width:640px){
  .destination.room{
    padding-left:14px
  }
}
.schedule-row{
  height:auto
}
.destination{
  min-width:0;
  padding-top:14px;
  padding-bottom:14px
}
.destination strong{
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.25
}
.destination.room strong{
  font-size:clamp(14px,1.25vw,20px)
}
.destination.room b{
  flex:0 0 auto
}
.destination.room strong{
  font-size:20px
}
.room-item{
  display:block
}
.room-item+.room-item{
  margin-top:5px
}
.clock div{
  font-size:19px
}
.clock strong{
  font-size:27px
}
.destination.room strong{
  position:relative;
  left:-14px;
  text-align:center
}
.schedule-head span:last-child{
  text-align:center
}
@media(max-width:640px){
  .destination.room strong{
    left:0
  }
}
.club-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.club-item{
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px 6px 5px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#f7fafb
}
.club-item form{
  margin:0
}
.select2-container .select2-selection--single{
  height:38px;
  border:1px solid #dee2e6;
  border-radius:.375rem
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:36px;
  padding-left:12px
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height:36px
}
.select2-container--default .select2-selection--multiple{
  min-height:38px;
  border:1px solid #dee2e6;
  border-radius:.375rem;
  padding:2px 5px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:#e4f5fb;
  border-color:#aadcec;
  color:#075f84
}
.schedule-head,.schedule-row{
  grid-template-columns:190px minmax(300px,1fr) 220px 340px
}
.destination.room strong{
  left:0;
  width:100%;
  padding:0 8px
}
.room-item{
  white-space:nowrap
}
@media(max-width:950px){
  .schedule-head,.schedule-row{
    grid-template-columns:170px minmax(260px,1fr) 290px
  }
}
@media(max-width:640px){
  .schedule-row{
    grid-template-columns:120px 1fr
  }
  .room-item{
    white-space:normal
  }
}
.schedule-head,.schedule-row{
  padding-right:0
}
.destination.room{
  margin-right:0;
  padding:14px 20px
}
.destination.room strong{
  left:0;
  width:100%;
  padding:0;
  text-align:center
}
@media(max-width:950px){
  .schedule-head,.schedule-row{
    grid-template-columns:170px minmax(240px,1fr) 320px
  }
}
@media(max-width:640px){
  .schedule-row{
    grid-template-columns:120px 1fr;
    padding:16px
  }
  .destination.room{
    padding:12px 14px
  }
}
.club-cell>div{
  width:100%
}
.club-cell .note-line{
  position:relative;
  left:-190px;
  width:calc(100% + 190px);
  text-align:left
}
@media(max-width:950px){
  .club-cell .note-line{
    left:-170px;
    width:calc(100% + 170px)
  }
}
@media(max-width:640px){
  .club-cell .note-line{
    left:-120px;
    width:calc(100% + 120px)
  }
}
.club-cell{
  position:relative
}
.club-cell .note-line{
  position:absolute;
  top:calc(50% + 19px);
  left:-190px;
  width:calc(100% + 190px);
  text-align:left
}
.schedule-row:has(.note-line){
  min-height:130px
}
@media(max-width:950px){
  .club-cell .note-line{
    left:-170px;
    width:calc(100% + 170px)
  }
}
@media(max-width:640px){
  .club-cell .note-line{
    position:static;
    left:0;
    width:100%;
    text-align:center
  }
  .schedule-row:has(.note-line){
    min-height:0
  }
}
.schedule-head,.schedule-row{
  grid-template-columns:190px minmax(320px,1fr) 220px 280px
}
@media(max-width:950px){
  .schedule-head,.schedule-row{
    grid-template-columns:170px minmax(240px,1fr) 250px
  }
}
@media(max-width:640px){
  .schedule-row{
    grid-template-columns:120px 1fr
  }
}
.time-cell{
  transform:translateX(18px)
}
@media(max-width:950px){
  .time-cell{
    transform:translateX(12px)
  }
}
@media(max-width:640px){
  .time-cell{
    transform:none
  }
}
.club-cell .note-line{
  left:-203px;
  width:calc(100% + 203px)
}
@media(max-width:950px){
  .club-cell .note-line{
    left:-187px;
    width:calc(100% + 187px)
  }
}
@media(max-width:640px){
  .club-cell .note-line{
    position:static;
    left:0;
    width:100%;
    text-align:center
  }
}