* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  color: #171717;
}


/* =====================================================
   WIDGET
   ===================================================== */

.agenda-widget {
  width: 100%;
  max-width: 100%;
  height: 560px;
  margin: 0 auto;

  background: #ffffff;

  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-gutter: stable;
}


/* =====================================================
   SCROLLBAR
   ===================================================== */

.agenda-widget::-webkit-scrollbar {
  width: 10px;
}

.agenda-widget::-webkit-scrollbar-track {
  background: #eeeeee;
  border-radius: 10px;
}

.agenda-widget::-webkit-scrollbar-thumb {
  background: #ff6900;
  border-radius: 10px;
}

.agenda-widget::-webkit-scrollbar-thumb:hover {
  background: #e85d00;
}


/* =====================================================
   HEADER
   ===================================================== */

.agenda-header {
  position: sticky;
  top: 0;
  z-index: 20;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 14px 18px;

  background:
    linear-gradient(
      135deg,
      #ff7900 0%,
      #ff5b00 48%,
      #171717 100%
    );

  color: #ffffff;
}


.agenda-header-icon {
  flex: 0 0 auto;
}


.calendar-icon {
  position: relative;

  display: block;

  width: 42px;
  height: 42px;

  border:
    2px solid
    rgba(255, 255, 255, 0.95);

  border-radius: 9px;

  background:
    rgba(0, 0, 0, 0.18);

  box-shadow:
    0 4px 10px
    rgba(0, 0, 0, 0.15);
}


.calendar-top {
  position: absolute;

  left: 0;
  top: 9px;

  width: 100%;
  height: 2px;

  background:
    rgba(255, 255, 255, 0.9);
}


.calendar-grid {
  position: absolute;

  left: 6px;
  right: 6px;

  top: 15px;
  bottom: 5px;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  grid-template-rows:
    repeat(3, 1fr);

  gap: 3px;
}


.calendar-grid i {
  display: block;

  border-radius: 2px;

  background:
    rgba(255, 255, 255, 0.88);
}


/* =====================================================
   HEADER TEKST
   ===================================================== */

.agenda-header-text {
  min-width: 0;
}


.agenda-kicker {
  margin-bottom: 2px;

  font-size: 10px;

  font-weight: 900;

  letter-spacing:
    0.05em;
}


.agenda-header h1 {
  margin: 0;

  font-size: 27px;

  line-height: 1;

  font-weight: 900;
}


.agenda-header p {
  margin: 5px 0 0;

  font-size: 12px;

  font-weight: 700;
}


/* =====================================================
   STATUS
   ===================================================== */

.agenda-status {
  margin:
    8px
    16px
    5px;

  padding:
    7px
    10px;

  border:
    1px solid #eeeeee;

  border-radius:
    7px;

  background:
    #fafafa;

  color:
    #666666;

  font-size:
    11px;
}


.agenda-status.success {
  border-color:
    #e7e7e7;

  background:
    #ffffff;

  color:
    #555555;
}


.agenda-status.error {
  border-color:
    #ffc9c9;

  background:
    #fff5f5;

  color:
    #a40000;
}


/* =====================================================
   LIJST
   ===================================================== */

.agenda-list {
  padding:
    2px
    16px
    8px;
}


/* =====================================================
   DAG
   ===================================================== */

.agenda-day {
  margin:
    0 0 8px;

  border:
    1px solid #e9e9e9;

  border-radius:
    9px;

  background:
    #ffffff;

  overflow:
    hidden;

  box-shadow:
    0 2px 7px
    rgba(0, 0, 0, 0.04);
}


.agenda-day:last-child {
  margin-bottom:
    0;
}


/* =====================================================
   DAG HEADER
   ===================================================== */

.agenda-day-header {
  display: grid;

  grid-template-columns:
    62px
    minmax(0, 1fr);

  border-bottom:
    1px solid #eeeeee;

  background:
    #fafafa;
}


.agenda-date {
  display: flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    62px;

  padding:
    6px;

  background:
    #171717;

  color:
    #ffffff;
}


.agenda-date-number {
  font-size:
    26px;

  line-height:
    1;

  font-weight:
    900;
}


.agenda-date-month {
  margin-top:
    3px;

  font-size:
    8px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;

  opacity:
    0.72;
}


.agenda-day-title {
  display: flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-width:
    0;

  padding:
    7px
    12px;
}


.agenda-weekday {
  margin-bottom:
    2px;

  color:
    #ff6900;

  font-size:
    10px;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;
}


.agenda-full-date {
  color:
    #2f2f2f;

  font-size:
    14px;

  font-weight:
    800;
}


/* =====================================================
   EVENT REGELS
   ===================================================== */

.agenda-event {
  display: grid;

  /*
     Punt | vaste tijdkolom | tekst
     De tijd krijgt nu bewust meer ruimte.
  */

  grid-template-columns:
    8px
    105px
    minmax(0, 1fr);

  gap:
    9px;

  align-items:
    center;

  min-height:
    40px;

  padding:
    8px
    12px;

  border-bottom:
    1px solid #eeeeee;
}


.agenda-event:last-child {
  border-bottom:
    0;
}


/* =====================================================
   PUNT
   ===================================================== */

.agenda-event-dot {
  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #171717;
}


.agenda-event.training
.agenda-event-dot {
  background:
    #ff6900;
}


.agenda-event.match
.agenda-event-dot {
  background:
    #171717;
}


/* =====================================================
   TIJD
   ===================================================== */

.agenda-event-time {
  width:
    105px;

  color:
    #555555;

  font-size:
    12px;

  line-height:
    1.2;

  font-weight:
    800;

  white-space:
    nowrap;
}


/* =====================================================
   HOOFDTEKST
   ===================================================== */

.agenda-event-main {
  min-width:
    0;

  padding-left:
    1px;
}


.agenda-event-title {
  margin:
    0;

  color:
    #171717;

  font-size:
    13px;

  line-height:
    1.3;

  font-weight:
    800;

  white-space:
    normal;

  overflow-wrap:
    break-word;

  word-break:
    normal;
}


/* =====================================================
   LOCATIE
   ===================================================== */

.agenda-event-location {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  margin-top:
    2px;

  color:
    #777777;

  font-size:
    10px;

  line-height:
    1.25;
}


.agenda-location-icon {
  font-size:
    10px;
}


/* =====================================================
   GEEN ACTIVITEITEN
   ===================================================== */

.agenda-empty {
  padding:
    20px
    16px;

  border:
    1px solid #eeeeee;

  border-radius:
    9px;

  color:
    #666666;

  text-align:
    center;

  font-size:
    12px;
}


/* =====================================================
   FOOTER
   ===================================================== */

.agenda-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    9px
    16px;

  border-top:
    1px solid #eeeeee;

  background:
    #fafafa;

  color:
    #777777;

  font-size:
    10px;
}


.agenda-footer a {
  color:
    #ff6900;

  font-weight:
    800;

  text-decoration:
    none;

  white-space:
    nowrap;
}


.agenda-footer a:hover {
  text-decoration:
    underline;
}


/* =====================================================
   MOBIEL
   ===================================================== */

@media (max-width: 600px) {

  .agenda-widget {
    height:
      560px;
  }


  .agenda-header {
    padding:
      12px
      14px;

    gap:
      9px;
  }


  .calendar-icon {
    width:
      38px;

    height:
      38px;
  }


  .agenda-header h1 {
    font-size:
      24px;
  }


  .agenda-header p {
    font-size:
      11px;
  }


  .agenda-status {
    margin:
      7px
      10px
      4px;
  }


  .agenda-list {
    padding:
      2px
      10px
      7px;
  }


  .agenda-day {
    margin-bottom:
      7px;
  }


  .agenda-day-header {
    grid-template-columns:
      57px
      minmax(0, 1fr);
  }


  .agenda-date {
    min-height:
      58px;
  }


  .agenda-date-number {
    font-size:
      23px;
  }


  .agenda-day-title {
    padding:
      7px
      9px;
  }


  .agenda-full-date {
    font-size:
      13px;
  }


  .agenda-event {

    grid-template-columns:
      7px
      88px
      minmax(0, 1fr);

    gap:
      8px;

    min-height:
      40px;

    padding:
      8px
      9px;
  }


  .agenda-event-time {
    width:
      88px;

    font-size:
      11px;
  }


  .agenda-event-title {
    font-size:
      12px;

    line-height:
      1.3;
  }


  .agenda-footer {
    flex-direction:
      column;

    align-items:
      flex-start;

    padding:
      9px
      10px;
  }

}