:root {
  --vab-primary: #51758d;
  --vab-primary-dark: #3e5a6d;
  --vab-soft: #f2f6f9;
  --vab-border: #d8d8d8;
  --vab-text: #1a1a1a;
}

.vab-app { color: var(--vab-text); margin: 1.5rem 0; }
.vab-title { color: var(--vab-primary); font-weight: 700; margin-bottom: .5rem; }
.vab-intro { max-width: 72ch; margin-bottom: 1.5rem; }
.vab-card { border: 1px solid var(--vab-border); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.08); margin-bottom: 1.5rem; }
.vab-card .card-body { padding: 1.5rem; }
.vab-card .card-title { color: var(--vab-primary); font-weight: 700; margin-top: 0; }
.vab-app .btn-primary { background: var(--vab-primary); border-color: var(--vab-primary); color: #fff; }
.vab-app .btn-primary:hover, .vab-app .btn-primary:focus { background: var(--vab-primary-dark); border-color: var(--vab-primary-dark); color: #fff; }
.vab-app .btn-outline-primary { border-color: var(--vab-primary); color: var(--vab-primary); }
.vab-app .btn-outline-primary:hover, .vab-app .btn-outline-primary:focus { background: var(--vab-primary); color: #fff; }
.vab-calendar-nav { align-items: center; display: grid; gap: 1rem; grid-template-columns: 1fr auto 1fr; margin-bottom: 1rem; }
.vab-calendar-nav a:last-child { justify-self: end; }
.vab-month { color: var(--vab-primary); font-size: 1.35rem; font-weight: 700; margin: 0; text-align: center; }
.vab-calendar-scroll, .vab-table-scroll { overflow-x: auto; }
.vab-calendar { border-collapse: collapse; min-width: 850px; table-layout: fixed; width: 100%; }
.vab-calendar th { background: var(--vab-primary); border: 1px solid var(--vab-primary); color: #fff; padding: .65rem .4rem; text-align: center; }
.vab-calendar td { border: 1px solid var(--vab-border); height: 125px; padding: .5rem; vertical-align: top; width: 14.285%; }
.vab-calendar .vab-empty { background: #f6f6f6; }
.vab-day-number { display: inline-flex; font-weight: 700; margin-bottom: .4rem; }
.vab-today .vab-day-number { align-items: center; background: var(--vab-primary); border-radius: 50%; color: #fff; height: 2rem; justify-content: center; width: 2rem; }
.vab-busy { background: var(--vab-soft); }
.vab-bookings { list-style: none; margin: 0; padding: 0; }
.vab-bookings li { border-top: 1px solid rgba(81,117,141,.25); line-height: 1.25; padding: .4rem 0; }
.vab-bookings li:first-child { border-top: 0; }
.vab-bookings strong, .vab-bookings span { display: block; overflow-wrap: anywhere; }
.vab-bookings strong { color: var(--vab-primary-dark); font-size: .82rem; }
.vab-bookings span, .vab-free { font-size: .8rem; }
.vab-free { color: #5c5c5c; display: block; }
.vab-legend { font-size: .88rem; margin: .8rem 0 0; }
.vab-legend-box { background: var(--vab-soft); border: 1px solid var(--vab-border); display: inline-block; height: 1rem; margin-right: .35rem; vertical-align: -.15rem; width: 1rem; }
.vab-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); }
.vab-form .vab-field { margin-bottom: 1.35rem; position: static !important; }
.vab-app .vab-form .vab-field > label {
  background: transparent !important;
  color: var(--vab-text) !important;
  display: block !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  height: auto !important;
  line-height: 1.5 !important;
  margin: 0 0 .4rem !important;
  max-width: none !important;
  padding: 0 !important;
  pointer-events: auto !important;
  position: static !important;
  transform: none !important;
  width: auto !important;
}
.vab-form .form-control { background: #fff; border: 1px solid #767676; border-radius: 4px; min-height: 2.75rem; padding: .5rem .65rem; width: 100%; }
.vab-form .form-control:focus { border-color: var(--vab-primary); box-shadow: 0 0 0 3px rgba(81,117,141,.22); outline: 0; }
.vab-form .form-text { color: #555; display: block; line-height: 1.35; margin-top: .35rem; }
.vab-list { border-collapse: collapse; min-width: 680px; width: 100%; }
.vab-list th, .vab-list td { border-bottom: 1px solid var(--vab-border); padding: .65rem; text-align: left; vertical-align: middle; }
.vab-list th { color: var(--vab-primary-dark); }
.vab-delete-form { margin: 0; }
.vab-login-callout { background: #f2f7fc; border-left: 5px solid var(--vab-primary); padding: 1.25rem; }
.vab-login-callout p { margin-top: 0; }
.vab-alert { border-left-width: 5px; }
.screen-reader-text { clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; }

@media (max-width: 991.98px) {
  .vab-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .vab-card .card-body { padding: 1rem; }
  .vab-calendar-nav { grid-template-columns: 1fr 1fr; }
  .vab-month { grid-column: 1 / -1; grid-row: 1; }
  .vab-calendar-nav a { grid-row: 2; font-size: .8rem; }
}

@media print {
  .vab-calendar-nav a, .vab-login-callout, .vab-grid { display: none !important; }
  .vab-calendar-scroll { overflow: visible; }
  .vab-calendar { min-width: 0; }
}