.bk-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.bk-slots .btn { padding: .5rem .25rem; }
.bk-slots .btn-light { color: var(--ip-text-muted); }

.bk-day + .bk-day { margin-top: 1.25rem; }
.bk-day-title { font-family: "Outfit", sans-serif; font-weight: 600; color: var(--ip-navy); margin-bottom: .5rem; }
.bk-row { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border-radius: .5rem; background: var(--bs-body-bg); }
.bk-row + .bk-row { margin-top: .375rem; }
.bk-time { flex: 0 0 5.5rem; line-height: 1.25; }
.bk-who { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.bk-levels { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }

/* Form tetap terlihat saat daftar jadwal digulir. */
@media (min-width: 992px) {
  .bk-sticky { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}

/* Kalender */
.bk-cal { border: 1px solid #E0E0E0; border-radius: .5rem; padding: .5rem; }
.bk-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; color: var(--ip-navy); }
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .125rem; }
.bk-cal-week { text-align: center; font-size: .75rem; color: var(--ip-text-muted); padding: .25rem 0; }
.bk-cal-day {
  position: relative; height: 2.25rem; border: 1px solid transparent; border-radius: .375rem;
  background: transparent; color: var(--ip-text);
}
.bk-cal-day:hover:not(:disabled) { background: var(--ip-primary-surface); }
.bk-cal-day:disabled { color: #9E9E9E; cursor: not-allowed; }
.bk-cal-day.is-today { border-color: var(--ip-primary); }
.bk-cal-day.is-full { background: #EDEDED; }
.bk-cal-day.is-partial::after, .bk-cal-day.is-full::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px;
  margin-left: -2.5px; border-radius: 50%; background: var(--ip-yellow);
}
.bk-cal-day.is-full::after { background: #9E9E9E; }
.bk-cal-day.is-selected, .bk-cal-day.is-selected:hover:not(:disabled) { background: var(--ip-primary); color: #fff; }
.bk-cal-legend { display: flex; gap: 1rem; margin-top: .5rem; font-size: .75rem; color: var(--ip-text-muted); }
.bk-dot { display: inline-block; width: 8px; height: 8px; margin-right: .25rem; border-radius: 50%; background: var(--ip-yellow); }
.bk-dot-full { background: #9E9E9E; }

/* Form kiri lebih ringkas agar seimbang dengan daftar jadwal. */
.bk-sticky { font-size: .875rem; }
.bk-sticky .card-header { font-size: .9375rem; }
.bk-sticky .form-control { font-size: .875rem; padding: .3125rem .625rem; }
.bk-sticky .form-label { font-size: .8125rem; font-weight: 500; margin-bottom: .25rem; }
.bk-sticky .mb-3 { margin-bottom: .75rem !important; }
.bk-sticky .btn { --bs-btn-font-size: .8125rem; --bs-btn-padding-y: .3125rem; --bs-btn-padding-x: .5rem; }
.bk-sticky .bk-slots .btn small { font-size: .75rem; }
.bk-sticky .bk-cal-head { font-size: .875rem; }
.bk-sticky .bk-cal-day { height: 1.875rem; font-size: .8125rem; }
.bk-sticky .bk-cal-week { font-size: .6875rem; padding: .125rem 0; }
.bk-sticky .bk-cal-legend { font-size: .6875rem; }
.bk-sticky .bk-cal-day.is-partial::after, .bk-sticky .bk-cal-day.is-full::after { bottom: 2px; width: 4px; height: 4px; margin-left: -2px; }

@media (min-width: 992px) {
  .bk-col-form { flex: 0 0 40%; width: 40%; }
  .bk-col-list { flex: 0 0 60%; width: 60%; }

  /* Form tetap bisa digulir di layar pendek, tanpa scrollbar yang terlihat. */
  .bk-sticky { scrollbar-width: none; }
  .bk-sticky::-webkit-scrollbar { display: none; }
}

/* Booking hari ini: sedang berlangsung dan akan berlangsung. */
.bk-row-ongoing { background: var(--ip-yellow); color: var(--ip-navy); }
.bk-row-ongoing .text-secondary { color: var(--ip-navy) !important; }
.bk-row-ongoing .bk-state { background: var(--ip-navy); color: #fff; }
.bk-row-upcoming { background: var(--ip-primary-surface); color: var(--ip-navy); }
.bk-row-upcoming .text-secondary { color: var(--ip-navy) !important; }
.bk-row-upcoming .bk-state { background: var(--ip-primary); color: #fff; }

/* Overlay maintenance */
.bk-maintenance {
  position: fixed; inset: 0; z-index: 1050; padding: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 34, 69, .7);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bk-maintenance-card { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; background: #fff; border-radius: .75rem; padding: 2rem; text-align: center; overflow-wrap: anywhere; }
.bk-maintenance-icon {
  width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ip-yellow); color: var(--ip-navy); font-size: 2rem;
}