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

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

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

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