styles.css

.prepage-booking-page input[data-slot-selection-checkbox="1"].form-check-input + label {
    margin: 0 0 0 0.45rem;
    display: inline;
}

/* Slot teacher assignments: compact layout and cleaner spacing. */
#page-mod-booking-slotteacherassignments form.mform div.fitem {
    border-top: 1px solid #d9d9d9;
    padding-top: 0.6rem;
    margin-top: 0.35rem;
    margin-bottom: 0.45rem;
}

#page-mod-booking-slotteacherassignments form.mform .fitem .col-md-3 {
    padding-top: 0.25rem;
}

#page-mod-booking-slotteacherassignments form.mform .fgroup .checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

#page-mod-booking-slotteacherassignments form.mform .fgroup .form-check {
    margin: 0;
}

#page-mod-booking-slotteacherassignments form.mform .fgroup .form-check-input {
    margin-top: 0.2rem;
}

#page-mod-booking-slotteacherassignments form.mform .fgroup .form-check-label {
    margin-left: 0.35rem;
}
.mod-booking .results {
    border-collapse: separate;
}

.mod-booking .results .data {
    border-width: 1px;
    border-style: solid;
    border-color: #999;
}

.mod-booking-inlinetable {
    display: inline;
    background-color: transparent;
    /*float: left;*/
}

tr.mod-booking-booked td.cell {
    background-color: lightgreen;
}

tr.mod-booking-booked.inpast td.cell {
    background-color: #d6f9d9;
}

table.mod-booking-table td.cell {
    border-bottom: 1px solid #cecece;
}

table.mod-booking-table tr.inpast td.cell {
    color: #909090;
}

div.mod-booking-waitlist {
    background-color: orange;
    width: 100%;
    height: auto;
    display: block;
}

tr.mod-booking-watinglist td.cell {
    background-color: orange;
}

tr.mod-booking-invisible {
    visibility: hidden;
    height: 0;
    display: none;
}

/** Styles for subscriber tables on subscribeusers.php (book other users) */
.subscriberdiv,
.subscribertable {
    width: 100%;
    vertical-align: top;
}

.subscribertable tr td {
    vertical-align: top;
}

.subscribertable tr td.actions {
    width: 16%;
    padding-top: 3em;
}

.subscribertable tr td.actions .actionbutton {
    margin: 0.3em 0;
    padding: 0.5em 0;
    width: 100%;
}

.subscribertable tr td.existing,
.subscribertable tr td.potential {
    width: 42%;
}

/** styles for displaying all bookings */
.mod-booking-regular {
    display: table-cell;
    padding: 5px;
}

.mod-booking-waiting {
    display: table-cell;
    padding: 5px;
}

.br-theme-css-stars .br-widget {
    height: 28px;
    white-space: nowrap;
}

.br-theme-css-stars .br-widget a {
    text-decoration: none;
    height: 18px;
    width: 18px;
    float: left;
    font-size: 23px;
    margin-right: 5px;
}

.br-theme-css-stars .br-widget a:after {
    content: "\2605";
    color: #d2d2d2;
}

.br-theme-css-stars .br-widget a.br-active:after {
    color: #edb867;
}

.br-theme-css-stars .br-widget a.br-selected:after {
    color: #edb867;
}

.br-theme-css-stars .br-widget .br-current-rating {
    display: none;
}

.br-theme-css-stars .br-readonly a {
    cursor: default;
}

#booking-instance-description {
    margin-left: 10px;
}

#booking-business-card {
    margin-left: 10px;
    padding: 10px;
    border-radius: 15px;
    border: 1px dashed lightgray;
}

.sports-badge {
    font-size: small;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 15px;
}

.path-mod-booking .badge {
    position: unset;
}

.reoccurringdates {
    list-style-type: none;
}

.datepills {
    border-radius: 10px;
    font-family: "Lucida Console", monospace;
}

.icon-red {
    color: red;
}

.wunderbyte-table-grid .course-card-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.course-content .activity-altcontent .wunderbyte-table-grid ul.infolist,
.wunderbyte-table-grid ul.infolist,
.course-content li.section li.activity ul ul.infolist {
    list-style: none;
}

.wunderbyte-table-grid ul.infolist {
    padding: 0;
    margin: 0;
}

.wunderbyte-table-grid .infolist .fa {
    width: 15px;
    text-align: center;
}

.wunderbyte-table-grid .list-group-item {
    border: 1px solid rgba(0, 0, 0, .125);
}

/* Semesters form */
#page-admin-mod-booking-semesters #semestersform {
    padding-top: 1rem;
}

input[name^='deletesemester'] {
    color: #ca3120;
    background-color: #fff;
    border-color: #ca3120;
    padding: 0.25rem 0.5rem;
    font-size: .8203125rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

input[name^='deletesemester']:hover {
    color: #fff;
    background-color: #ca3120;
    border-color: #ca3120;
    padding: 0.25rem 0.5rem;
    font-size: .8203125rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

input[name^='addsemester']:hover {
    color: #357a32;
    background-color: #fff;
    border-color: #357a32;
}

input[name^='addsemester'] {
    color: #fff;
    background-color: #357a32;
    border-color: #357a32;
}

/* Holidays form */
#page-admin-mod-booking-semesters #holidaysform {
    padding-top: 1rem;
}

input[name^='deleteholiday'] {
    color: #ca3120;
    background-color: #fff;
    border-color: #ca3120;
    padding: 0.25rem 0.5rem;
    margin-bottom: 1rem;
    font-size: .8rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

input[name^='deleteholiday']:hover {
    color: #fff;
    background-color: #ca3120;
    border-color: #ca3120;
    padding: 0.25rem 0.5rem;
    margin-bottom: 1rem;
    font-size: .8rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

input[name^='addholiday']:hover {
    color: #357a32;
    background-color: #fff;
    border-color: #357a32;
}

input[name^='addholiday'] {
    color: #fff;
    background-color: #357a32;
    border-color: #357a32;
}

#page-admin-mod-booking-semesters #holidaysform .form-check label {
    margin-bottom: 0;
}

/* Fix a bug where menu was disappearing behind the top of the table
if there only was one booking option. */
#page-mod-booking-view #region-main div.no-overflow {
    overflow: visible;
}

.booking-option-info-invisible {
    display: inline-block;
    color: #999;
    padding-top: 3px;
}

#page-mod-booking-optiondates_teachers_report .modal-body {
    overflow-y: visible;
}

#page-mod-booking-optiondates_teachers_report .modal-content {
    overflow: visible;
}

/* Booking rules. */
#page-mod-booking-edit-rules .booking-rules-cards {
    padding-top: 15px;
}
.booking-rules-list .ruleinactive {
    color: gray; /* Sets the text color to gray */
}

/* Subbooking Timeslot */
/* The price chip in this table is a <button> now (it adds a slot to the cart, so it has to be
   operable by keyboard). Strip the browser's own button chrome so the table keeps its look. Wrapped
   in :where() on purpose: that keeps the specificity at a single class, so the state rules below
   still win over it. */
.mod-booking-timeslotbooking :where(button.wb_shopping_cart) {
    border: 0;
    padding: 1px;
    font: inherit;
    color: inherit;
    background-color: transparent;
}

.mod-booking-timeslotbooking [data-bookable="1"] {
    /* Fixed instead of var(--info): with Bootstrap's default info colour (#17a2b8, which is what
       themes that build their variables after the Bootstrap import end up with) white text is only
       3:1. #006d80 keeps the cyan and reaches 6:1. */
    background: #006d80;
    color: #fff;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #fff;
    padding: 1px;
}
.mod-booking-timeslotbooking [data-selected] {
    background: var(--success);
    color: #fff;
    cursor: pointer;
}
.mod-booking-timeslotbooking .table td,
.mod-booking-timeslotbooking .table tr {
    text-align: center;
    vertical-align: middle;
}
.mod-booking-timeslotbooking th {
    border: 1px solid #fff;
    vertical-align: middle;
}
.mod-booking-timeslotbooking .name {
    font-weight: 700;
}

.wb_shopping_cart {
    width: 100%;
    height: 100%;
}

/* "Already in the cart": greyed out, because the item can only be taken out again in the cart
   itself - a click on the button does nothing (see cart.js).
   The state is carried by the disabled class plus aria-disabled, never by the disabled attribute,
   because the button has to stay focusable so keyboard and screen reader users can find out why it
   does not react.
   The greys are fixed and the dimming is switched off on purpose:
   - Bootstrap dims .btn.disabled to 65% opacity, which blends label and background together and
     leaves 2.7:1. At full strength #495057 on #e9ecef is 6.9:1, so the button reads as inactive but
     stays legible (the label is the only place that says the item is in the cart).
   - A colour from a theme variable is whatever that theme's Bootstrap build produced and can land
     far below the required 4.5:1.
   Three classes so the rules win over ".btn.disabled", which is loaded after this stylesheet. */
.btn.wb_shopping_cart.disabled,
.btn.wb_shopping_cart.disabled .addtocartstring,
.btn.wb_shopping_cart.disabled .fa-cart-plus {
    color: #495057;
}

.btn.wb_shopping_cart.disabled {
    background: #e9ecef;
    border-color: #adb5bd;
    opacity: 1;
    cursor: default;
}

/* Not bookable: white on an amber background is around 2:1, dark text on it is 8.3:1. Same
   reasoning as above for pinning the colour; the nested selectors are needed because themes colour
   the label and the icon separately. */
.wb_shopping_cart[data-bookable="false"],
.wb_shopping_cart[data-bookable="false"] .addtocartstring,
.wb_shopping_cart[data-bookable="false"] .fa-cart-plus {
    color: #1d2125;
}

.wb_shopping_cart[data-bookable="false"] {
    background: #f0ad4e;
}

#page-mod-booking-optiondates .dropdown-menu,
#page-mod-booking-edit_optiontemplate .dropdown-menu,
#page-mod-booking-optiontemplatessettings .dropdown-menu,
#page-mod-booking-teachers_instance_report .dropdown-menu,
#page-mod-booking-recalculateprices .dropdown-menu,
#page-mod-booking-mod .dropdown-menu,
#page-mod-booking-instancetemplateadd .dropdown-menu,
#page-mod-booking-importoptions .dropdown-menu,
#page-mod-booking-tagtemplates .dropdown-menu,
#page-mod-booking-importexcel .dropdown-menu,
#page-mod-booking-report .dropdown-menu,
#page-mod-booking-subscribeusers .dropdown-menu,
#page-mod-booking-viewconfirmation .dropdown-menu,
#page-mod-booking-editoptions .dropdown-menu {
    width: max-content;
}

/* Special rule to keep the dropdown menu of the table filter within width limits of the .dropdownMenuButton element */
#page-mod-booking-view .dropdown:not(.wunderbyteTableFilter .dropdown) > .dropdown-menu {
    width: max-content;
}

#page-mod-booking-report #studentsform table {
    margin-bottom: 15px;
}

.prepage-booking-page {
    margin-top: 30px;
    margin-bottom: 30px;
}

#prepage-booking-tabs {
    counter-reset: section;
}

#prepage-booking-tabs li {
    /*color: lightgray;*/
    color: #767676;
    list-style-type: none;
    font-size: 15px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: bold;
}

#prepage-booking-tabs li.active {
    color: #357a32; /* Bootstrap success color.*/
}

/* Icon prepage progress tabs before any progress */
#prepage-booking-tabs li:before {
    width: 34px;
    display: inline-table;
    font-size: 20px;
    color: #fff;
    background: lightgray;
    border-radius: 50%;
    margin: 7px 7px;
    text-align: center;
    padding: 2px;
    font-family: Helvetica, sans-serif, Arial;
    font-weight: bolder;
    counter-increment: section;
    content: counter(section);
}

/* Prepage progress tabs connectors */
#prepage-booking-tabs li:after {
    content: 'asdf';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1;
}

/* Color number of the step and the connector before it */
#prepage-booking-tabs li.active:before,
#prepage-booking-tabs li.active:after {
    background: #357a32; /* Bootstrap success color.*/
    margin: 7px 7px;
    text-align: center;
}

#page-mod-booking-optionview ul.infolist {
    padding-inline-start: 10px;
}

#page-mod-booking-editoptions .editoption-youareediting-alert {
    position: sticky;
    top: 5px;
    z-index: 999;
    width: 70%;
}

#page-mod-booking-view .wunderbyte-table-list .action:not(.imageright-card .action) {
    position: absolute;
    top: 0;
    right: 0;
}

.wunderbyte-table-list .imageright-card .action {
    position: absolute;
    top: 0;
    right: 25%;
}

/* Bootstrap 4 (Moodle 4.5) sets position:relative on every grid column; Bootstrap 5
   (Moodle 5+) does not. Reset the columns inside imageright cards to static so the
   absolutely positioned .action menubar anchors to the .card -- its right:25% then
   lands just left of the right-hand header image consistently on both versions. */
.wunderbyte-table-list .imageright-card [class*="col-"] {
    position: static;
}

.wunderbyte-table-list .booknow {
    margin-top: 1rem;
}

/* DO NOT USE #page-mod-booking-view because this needs to work in shortcodes too! */
.mod-booking-view-card-image {
    height: 220px;
    object-fit: cover;
}

/* DO NOT USE #page-mod-booking-view because this needs to work in shortcodes too! */
.mod-booking-view-list-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 300px;
    border-radius: 0;
}

.mod-booking-view-list-image-half {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* DO NOT USE #page-mod-booking-view because this needs to work in shortcodes too! */
.mod-booking-view-list-image.rounded-left,
.mod-booking-view-list-image.rounded-start {
    box-shadow: 3px 0 10px 1px rgba(0, 0, 0, 0.1);
    /* stylelint-disable-next-line declaration-no-important */
    border-top-right-radius: 0 !important;
    /* stylelint-disable-next-line declaration-no-important */
    border-bottom-right-radius: 0 !important;
}

/* DO NOT USE #page-mod-booking-view because this needs to work in shortcodes too! */
.mod-booking-view-list-image.rounded-right,
.mod-booking-view-list-image.rounded-end {
    box-shadow: -3px 0 10px 1px rgba(0, 0, 0, 0.1);
    /* stylelint-disable-next-line declaration-no-important */
    border-top-left-radius: 0 !important;
    /* stylelint-disable-next-line declaration-no-important */
    border-bottom-left-radius: 0 !important;
}

#page-mod-booking-editoptions div[id^='fgroup_id_buttonar_'] {
    position: sticky;
    bottom: 5px;
}

#page-mod-booking-editoptions div[id^='fgroup_id_buttonar_'] input[name='submitbutton'],
#page-mod-booking-editoptions div[id^='fgroup_id_buttonar_'] input[name='cancel'] {
    box-shadow: rgba(14, 30, 37, 0.12) 0 2px 4px 0, rgba(14, 30, 37, 0.32) 0 2px 16px 0;
}

#page-mod-booking-mod #fgroup_id_buttonar {
    position: sticky;
    bottom: 5px;
}

#page-mod-booking-mod #fgroup_id_buttonar  input[name='submitbutton'],
#page-mod-booking-mod #fgroup_id_buttonar  input[name='submitbutton2'],
#page-mod-booking-mod #fgroup_id_buttonar  input[name='cancel'] {
    box-shadow: rgba(14, 30, 37, 0.12) 0 2px 4px 0, rgba(14, 30, 37, 0.32) 0 2px 16px 0;
}

.bookinglinkbutton:not(#page-mod-booking-optionview .bookinglinkbutton) {
    background: var(--primary, var(--bs-btn-bg));
    border-radius: 8px;
    color: white;
    text-decoration: none;
}

#page-mod-booking-editoptions .changed-old-value {
    color: red;
}

/* Make sure that spans within this container don't break.
We need this for teachers for example. */
.flex-wrap-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-wrap-element {
    display: inline-block;
    white-space: nowrap;
}

.col-teacher-teacher a {
    align-items: center;
    display: inline-flex;
    min-height: 24px;
}

/* Styles for new report.php */
#accordion-usertables .columnclass.option {
    max-width: 100px;
}

/* Styles for new report.php */
#accordion-usertables .card-header {
    background: linear-gradient(to bottom, #f0f0f0, #fff);
    border-bottom: 0;
}

.disabled-profeature {
    color: grey;
    pointer-events: none; /* Disables clicks */
    opacity: 0.6; /* Makes it appear lighter */
    cursor: not-allowed; /* Shows a not-allowed cursor */
}
.disabled-profeature a {
    color: grey; /* Also greys out the link */
    text-decoration: none; /* Optional: Remove underline if it's styled */
}
.disabled-profeature a:hover {
    color: grey; /* Ensures hover doesn’t change color */
}

.bookingoption-edit-button {
    text-decoration: none;
}

/* GH-936 Better distinction between availabilities. */
div.checkbox:has(label[for^="id_bo_cond_allowedtobookininstance_capabilitynotneeded"]) {
    left: 20px;
}

/* Bookings Tracker (report2) */
.bookingstracker-header {
    font-weight: bold;
    font-size: large;
    margin: 10px 0;
    color: #0f6cbf;
}

#page-mod-booking-report2 div[class^='wunderbyte_table_container_'] {
    /* stylelint-disable-next-line declaration-no-important */
    margin: 0 !important;
}

/* With many columns, the table must scroll horizontally inside its container instead
   of blowing it up: the container is a css grid and grid items do not shrink below
   their content width unless min-width is reset. */
#page-mod-booking-report2 .wunderbyte_table_container {
    max-width: 100%;
    overflow-x: auto;
}

#page-mod-booking-report2 .wunderbyte_table_container .wunderbyteTableClass {
    min-width: 0;
    overflow-x: auto;
}

#page-mod-booking-report2 .pagination {
    font-size: calc(0.9rem + 0.045vw);
    margin-left: 20px;
}

#page-mod-booking-report2 .pagination {
    font-size: calc(0.9rem + 0.045vw);
    margin-left: 20px;
}

/* Bookings Tracker (report2.php): scope breadcrumb navigation.
   Each crumb is a rounded box (scope label above, name/link below);
   chevron arrows point to the next hierarchy level. */
.report2-breadcrumb {
    background-color: transparent;
    padding: 0;
    align-items: center;
    row-gap: 0.5rem;
}

.report2-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
}

/* Arrow pointing to the next hierarchy level instead of the default "/". */
.report2-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\276f";
    padding-right: 0.6rem;
    color: #495057;
    font-size: 1rem;
}

/* Hide the decorative arrow from screen readers where the alt text syntax is supported. */
@supports (content: "x" / "y") {
    .report2-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        content: "\276f" / "";
    }
}

.report2-breadcrumb .report2-breadcrumb-box {
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.2));
    border-radius: 0.5rem;
    padding: 0.3rem 0.9rem;
    background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.02));
    line-height: 1.3;
}

/* Boxes containing a link lift slightly on hover and on keyboard focus
   to signal clickability. */
.report2-breadcrumb .report2-breadcrumb-box:has(a):hover,
.report2-breadcrumb .report2-breadcrumb-box:focus-within {
    border-color: var(--bs-secondary-color, #6c757d);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Contrast of the scope label (WCAG 1.4.3, AA needs 4.5:1 for this font size).
   Bootstrap's "text-muted" (#6c757d) only reaches 4.49:1 on the crumb box and 4.08:1 on the
   tinted box of the active crumb -- both fail. $gray-700 stays above 6.5:1 on every
   background used here, including a brand colour that is almost black. */
.report2-breadcrumb .report2-breadcrumb-label {
    line-height: 1.2;
    color: #495057;
}

.report2-breadcrumb .report2-breadcrumb-name {
    font-size: 1.05rem;
    white-space: nowrap;
}

/* The current scope gets the primary accent of the theme. */
.report2-breadcrumb .breadcrumb-item.active {
    color: inherit;
}

.report2-breadcrumb .breadcrumb-item.active .report2-breadcrumb-box {
    border-color: var(--bs-primary, var(--primary, #0f6cbf));
    background-color: rgba(15, 108, 191, 0.07);
}

/* Tint the active box with the actual theme primary where color-mix is supported. */
@supports (background-color: color-mix(in srgb, red 10%, transparent)) {
    .report2-breadcrumb .breadcrumb-item.active .report2-breadcrumb-box {
        background-color: color-mix(in srgb, var(--bs-primary, var(--primary, #0f6cbf)) 10%, transparent);
    }
}

.report2-breadcrumb .breadcrumb-item.active .report2-breadcrumb-name {
    font-weight: 500;
}

/* Minimum 24x24 px target size (WCAG 2.5.8) for the icon-only page link. */
.report2-breadcrumb .report2-breadcrumb-pagelink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

/* The sessions dropdown toggle is a real button (native Enter/Space handling),
   styled to blend in with the crumb names. */
.report2-breadcrumb .report2-sessions-toggle {
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
    border: 0;
}

.report2-breadcrumb .report2-sessions-menu {
    max-height: 50vh;
    overflow-y: auto;
}

#page-mod-booking-report2 #accordion-usertables .sortcolumn {
    background-color: transparent;
}

#page-mod-booking-report2 #accordion-usertables .card {
    margin-bottom: 10px;
}

#page-mod-booking-report2 #accordion-usertables .card,
#page-mod-booking-report2 #accordion-usertables .card-header {
    border-radius: 0;
}

/* Report2 (Bookings Tracker) button margins. */
#page-mod-booking-report2 .btn.btn-sm {
    margin-bottom: 0.6em;
}

/* Booking config settings. */
#page-admin-setting-modsettingbooking #admin-selectteacherswithprofilefieldonlyfield,
#page-admin-setting-modsettingbooking #admin-selectteacherswithprofilefieldonlyvalue,
#page-admin-setting-modsettingbooking #admin-bookingtimerelativedefaultopeningduration,
#page-admin-setting-modsettingbooking #admin-bookingtimerelativedefaultclosingduration,
#page-admin-setting-modsettingbooking #admin-bookingtimerelativedefaultopeningbeforeafter,
#page-admin-setting-modsettingbooking #admin-bookingtimerelativedefaultclosingbeforeafter,
#page-admin-setting-modsettingbooking #admin-bookingtimerelativedefaultopeningdatefield,
#page-admin-setting-modsettingbooking #admin-bookingtimerelativedefaultclosingdatefield,
#page-admin-setting-modsettingbooking #admin-bookingopeningtimerelativeautoapply,
#page-admin-setting-modsettingbooking #admin-bookingclosingtimerelativeautoapply,
#page-admin-setting-modsettingbooking #admin-entitytreefiltertoplevelonly,
#page-admin-setting-modsettingbooking #admin-entitytreefiltershowlocationhovercard,
#page-admin-setting-modsettingbooking #admin-entitytreefiltershowlocationimages {
    margin-left: 75px;
}

.row .condition-customform,
.row .condition-confirmation,
.row .condition-bookingpolicy-form,
.row .bookingoption-description-prepagemodal-bookit {
    flex-shrink: 1;
}

.condition-bookingpolicy-form .checkbox {
    display: flex;
}

.text-darkgreen {
    color: #146c43;
}

/* ----------------------------------------------------------------------------
 * Slotbooking picker (condition/slotBooking.js – fixed-grid & userdefined modes).
 * Static visual styling extracted from JS inline styles (Stage 2b, step 1).
 * Dynamic positioning (top/height in %, pixel heights) stays inline in the JS.
 * ------------------------------------------------------------------------- */
.booking-slot-timeline-wrapper {
    width: 100%;
    min-width: 0;
}

.booking-slot-timeline {
    overflow: hidden;
    background: linear-gradient(to bottom, #f8f9fa, #fff);
}

.booking-slot-timeline--fixed {
    flex: 1 1 auto;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    max-height: 420px;
    overflow-y: auto;
}

.booking-slot-timeline--clickable {
    cursor: crosshair;
}

.booking-slot-timeline-labels {
    width: 2.8rem;
}

.booking-slot-timeline-label {
    left: 0;
    right: 0;
    font-size: 0.65rem;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
    transform: translateY(-50%);
}

.booking-slot-timeline-tick {
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* Fixed-grid slot blocks: stacked rows, not absolutely/proportionally positioned. Each
   bookable row keeps this minimum height and never shrinks further; the timeline scrolls
   instead (see .booking-slot-timeline--fixed). */
.booking-slot {
    flex: 0 0 auto;
    min-height: 64px;
    overflow: hidden;
    padding: 2px 4px;
    border-top: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
}

.booking-slot--available {
    color: rgb(20, 100, 60);
    background: rgba(25, 135, 84, 0.12);
    border-top-color: rgba(25, 135, 84, 0.45);
}

.booking-slot--selected {
    color: rgb(13, 70, 170);
    background: rgba(13, 110, 253, 0.22);
    border-top-color: rgba(13, 110, 253, 0.75);
}

.booking-slot--booked {
    color: rgb(73, 80, 87);
    background: rgba(108, 117, 125, 0.22);
    border-top-color: rgba(108, 117, 125, 0.8);
    cursor: default;
}

/* Warmup/cooldown buffer separator: a static, non-bookable, content-free marker that a
   buffer applies here (see slot_day_renderers.js). Always the same small height regardless
   of the configured minutes, deliberately not to scale, so it can never crowd out the
   bookable rows on a dense day. Subdued grey so it recedes behind the actual slots. */
.booking-slot--buffer {
    flex: 0 0 auto;
    min-height: 10px;
    height: 10px;
    padding: 0;
    border-top: 1px solid rgba(73, 80, 87, 0.45);
    background:
        repeating-linear-gradient(
            45deg,
            rgba(73, 80, 87, 0.22),
            rgba(73, 80, 87, 0.22) 4px,
            rgba(73, 80, 87, 0.42) 4px,
            rgba(73, 80, 87, 0.42) 8px
        );
    cursor: default;
    pointer-events: none;
}

/* The user's currently booked slot in the move timeline: a distinct ring on top of the
   selected/available colour (matches the calendar grid's "current" day marker). */
.booking-slot--current {
    box-shadow: inset 0 0 0 2px #0d6efd;
}

/* A booked slot past its deadline in the move timeline: stays selected, cannot be given up. */
.booking-slot--locked {
    cursor: not-allowed;
    opacity: 0.85;
    box-shadow: inset 0 0 0 2px rgba(108, 117, 125, 0.85);
}

.booking-slot-header {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: space-between;
}

.booking-slot-time {
    overflow: hidden;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-slot-badge {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.booking-slot-price {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.booking-slot-teachers {
    overflow: hidden;
    font-size: 0.6rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Userdefined-mode timeline (renderCustomDayEditor). */
.booking-slot-time-input {
    max-width: 10rem;
}

/* Timeline grows to a minimum of TIMELINE_MIN_PX_PER_HOUR per opening hour (see slotBooking.js)
   so it stays readable on long opening windows; this wrapper caps how tall it can get on
   screen and scrolls the rest, instead of stretching the page. */
.booking-slot-timeline-wrapper--scroll {
    max-height: 480px;
    overflow-y: auto;
}

.booking-slot-legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
}

.booking-slot-legend-swatch--mine {
    background: rgba(73, 80, 87, 0.3);
    border: 1px solid rgba(73, 80, 87, 0.7);
}

.booking-slot-legend-swatch--blocked {
    background:
        repeating-linear-gradient(
            45deg,
            rgba(108, 117, 125, 0.3),
            rgba(108, 117, 125, 0.3) 3px,
            rgba(108, 117, 125, 0.5) 3px,
            rgba(108, 117, 125, 0.5) 6px
        );
    border: 1px solid rgba(108, 117, 125, 0.6);
}

/* A range the current user already booked: a solid grey block, distinct from the blue
   in-progress selection (.booking-slot-selection) and from the hatched --blocked pattern used
   for other users' bookings, so all three read as different things at a glance. */
.booking-slot-booked-range--mine {
    left: 0;
    right: 0;
    background: rgba(73, 80, 87, 0.3);
    border-top: 1px solid rgba(73, 80, 87, 0.7);
    border-bottom: 1px solid rgba(73, 80, 87, 0.7);
}

/* A range booked by someone else: not selectable, styled as a neutral occupied area (matches
   .booking-slot--booked used by the fixed/rolling grid) rather than an alarming red. */
.booking-slot-booked-range--blocked {
    left: 0;
    right: 0;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(108, 117, 125, 0.16),
            rgba(108, 117, 125, 0.16) 4px,
            rgba(108, 117, 125, 0.28) 4px,
            rgba(108, 117, 125, 0.28) 8px
        );
    border-top: 1px solid rgba(108, 117, 125, 0.6);
    border-bottom: 1px solid rgba(108, 117, 125, 0.6);
}

.booking-slot-selection {
    left: 0;
    right: 0;
    background: rgba(13, 110, 253, 0.2);
    border-top: 1px solid rgba(13, 110, 253, 0.75);
    border-bottom: 1px solid rgba(13, 110, 253, 0.75);
}

/* List-view slot picker (multi-select, renderSlotList). */
.booking-slot-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.booking-slot-list-item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    color: rgb(20, 100, 60);
    background: rgba(25, 135, 84, 0.08);
    border: 1px solid rgba(25, 135, 84, 0.45);
    border-radius: 0.25rem;
    cursor: pointer;
}

.booking-slot-list-item--selected {
    color: rgb(13, 70, 170);
    background: rgba(13, 110, 253, 0.18);
    border-color: rgba(13, 110, 253, 0.75);
}

.booking-slot-list-item--booked {
    color: rgb(73, 80, 87);
    background: rgba(108, 117, 125, 0.18);
    border-color: rgba(108, 117, 125, 0.6);
    cursor: default;
}

.booking-slot-list-price {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ----------------------------------------------------------------------------
 * Slot calendar picker engine (slotCalendarPicker.js). Static layout extracted
 * from JS inline styles (Stage 2c). Dynamic styling (price colours, responsive
 * column/row sizing, active-day/markmode colours) stays inline in the JS.
 * ------------------------------------------------------------------------- */
.booking-slot-calendar-ui {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.booking-slot-calendar-toolbar {
    gap: 0.5rem;
}

.booking-slot-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.booking-slot-calendar-slots {
    width: 100%;
    min-width: 0;
}

.booking-slot-calendar-head {
    min-width: 0;
    padding: 0.25rem 0;
}

.booking-slot-calendar-cell {
    min-width: 0;
}

.booking-slot-calendar-day-btn {
    overflow-wrap: anywhere;
    white-space: normal;
}

.booking-slot-calendar-slot-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
}

.booking-slot-calendar-slot-btn {
    width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: left;
}

/* Bulk operations table (matches both the [bulkoperations] shortcode and the bulk operations tab).
Keep the column headers on one line even in narrow containers instead of breaking them mid-word. */
table[id*="bulkoperationstable"] th {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

/* Location cell for deep (3+ level) entity hierarchies: the ancestor path appears in a pure-CSS
   card on hover AND on keyboard focus (:focus-within) — no Bootstrap tooltip JS, so the behaviour
   is identical on Bootstrap 4 (Moodle 4.x) and 5 (Moodle 5.x). Screenreaders read the path from
   visually hidden text inside the link instead (the card is aria-hidden). */
.mod-booking-location-cell {
    position: relative;
    display: inline-block;
}

.mod-booking-location-cell .mod-booking-location-path {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}

.mod-booking-location-cell:hover .mod-booking-location-path,
.mod-booking-location-cell:focus-within .mod-booking-location-path {
    display: block;
}

.mod-booking-location-pathitem {
    display: block;
}

.mod-booking-location-pathimg {
    height: 24px;
    width: 24px;
    object-fit: cover;
    border-radius: 0.25rem;
    margin-right: 0.25rem;
    vertical-align: middle;
}

/*
 * Accessibility (WCAG 2 AA color-contrast): the muted grey used for small
 * booking meta texts (#77838f, ~3.86:1 on white) fails the minimum 4.5:1
 * ratio. Darken to an accessible grey (#767676, ~4.57:1).
 * Covered by booking_installments.feature "the page should meet accessibility standards".
 */
.booking-showdates-area,
.booking-showdates-title b {
    color: #767676;
}

/*
 * The theme defines .text-gray as #77838f and aggregates it after this plugin's
 * CSS, so a plain .text-gray rule would lose the cascade. The doubled-class
 * selector raises specificity (0,2,0) to win without !important. Fixes the
 * bookings count column and other muted booking meta texts (and any element
 * inheriting the colour from a .text-gray cell, e.g. the waiting-list span).
 */
.text-gray.text-gray {
    color: #767676;
}

/*
 * Inline pre booking pages (site setting booking | turnoffmodals).
 *
 * The pre booking pages are built for a modal body, where the negative margins of their .row
 * elements are compensated by the padding of .modal-body. Rendered inline, the area is appended to
 * the booking option row, which has no such padding - so the rows stuck out over the card border on
 * the left (and right). We neutralise the gutters here and center the content instead.
 */
.prepage-inline {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.prepage-inline > .row {
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
}

/* The inline area is appended to the option row, so it must not add a gutter of its own either. */
.inlineprepagearea {
    margin-left: 0;
    margin-right: 0;
}

/*
 * Booking instance settings (mod_form), section "Automatic course and group enrolment":
 * indent the group enrolment setting of the connected course, because it is only shown
 * when "Automatically enrol users in connected course" is activated (dependency).
 */
#page-mod-booking-mod .fitem.row:has(input[name="addtogroup"]) {
    padding-left: 2rem;
}

/* Custom form: Checkbox labels. */
.condition-customform .form-check span[id$="description"] {
    margin-left: 0.5rem;
}