@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/*
 * LibreBooking — Sirius UI v6
 * Visual override layer. Load AFTER LibreBooking's original CSS.
 * Structure/JS are untouched.
 */

:root {
    --sirius-primary: #4CBDCF;
    --sirius-primary-dark: #319EAE;
    --sirius-primary-soft: #EAF8FA;
    --sirius-text: #354D50;
    --sirius-text-muted: #687575;
    --sirius-line: #DDE3E3;
    --sirius-surface: #FFFFFF;
    --sirius-surface-soft: #F7F9F9;
    --sirius-purple: #8B68A8;
    --sirius-purple-soft: #F0EAF5;
    --sirius-blue: #6488A8;
    --sirius-blue-soft: #EAF1F7;
    --sirius-yellow: #C68A2D;
    --sirius-yellow-soft: #FFF4DF;
}

/* =========================================================
   CALENDAR BASE
   ========================================================= */

#reservations {
    position: relative;
    background: #fff !important;
    color: var(--sirius-text) !important;
}

table.reservations {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    background: #fff !important;
    font-size: 14px !important;
}

table.reservations td,
table.reservations th {
    box-sizing: border-box !important;
    border-color: var(--sirius-line) !important;
    vertical-align: middle !important;
}

/* Free calendar area — white, not cyan. */
table.reservations td.reservable,
table.reservations div.reservable {
    background: #fff !important;
    color: var(--sirius-text) !important;
}

table.reservations td.reservable:hover,
table.reservations div.reservable:hover {
    background: #F5FBFC !important;
}

/* Unavailable / past areas stay neutral. */
table.reservations .unreservable,
table.reservations .buffer {
    background: #F3F5F5 !important;
    color: #8A9292 !important;
}

table.reservations .pasttime {
    background: #F2F4F4 !important;
}

/* =========================================================
   DAY HEADER — IMPORTANT FIX
   LibreBooking uses td.resdate for Monday/Tuesday/etc.
   ========================================================= */

table.reservations td.resdate {
    width: 150px !important;
    min-width: 150px !important;
    height: 44px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    text-align: left !important;
    overflow: visible !important;

    /* Every day has the same soft cyan header. */
    background: var(--sirius-primary-soft) !important;
    color: var(--sirius-text) !important;
    border-top: 2px solid var(--sirius-primary) !important;
    border-bottom: 1px solid #D5E4E5 !important;
}

/* Do NOT make today purple. */
table.reservations tr.today td.resdate,
table.reservations td.today.resdate,
table.reservations tr:not(.today) td.resdate {
    background: var(--sirius-primary-soft) !important;
    color: var(--sirius-text) !important;
    border-top-color: var(--sirius-primary) !important;
}

/* Kill inherited Bootstrap/LibreBooking primary/purple color inside date headers. */
table.reservations td.resdate,
table.reservations td.resdate *,
table.reservations td.resdate a,
table.reservations td.resdate a:visited,
table.reservations td.resdate a:hover,
table.reservations td.resdate .schedule_title {
    color: var(--sirius-text) !important;
}

/* The original .schedule_title uses vertical-align: top. That is what can
   make the first day look like it has slipped upward. */
table.reservations td.resdate .schedule_title,
table.reservations .schedule_title {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    text-align: left !important;
    vertical-align: middle !important;
    line-height: 1.25 !important;
}

/* Text elements inside the date header must share one stable line box. */
table.reservations td.resdate strong,
table.reservations td.resdate b,
table.reservations td.resdate span {
    line-height: 1.25 !important;
    vertical-align: middle !important;
}

/* First date header: do not let sticky positioning pull it upward. */
table.reservations > tbody > tr:first-child td.resdate {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
}

/* If the date header is actually rendered in THEAD, keep it centered there. */
table.reservations thead td.resdate {
    position: sticky !important;
    top: 50px !important;
    z-index: 101 !important;
    height: 44px !important;
    vertical-align: middle !important;
}

/* Today: only stronger weight, not another color. */
table.reservations tr.today td.resdate .schedule_title,
table.reservations tr.today td.resdate * {
    color: var(--sirius-text) !important;
    font-weight: 600 !important;
}

/* Other days: same background, normal weight. */
table.reservations tr:not(.today) td.resdate .schedule_title,
table.reservations tr:not(.today) td.resdate * {
    color: var(--sirius-text) !important;
    font-weight: 500 !important;
}

/* =========================================================
   RESOURCE NAME COLUMN
   ========================================================= */

table.reservations td.resourcename,
table.reservations td.reslabel {
    width: 150px !important;
    max-width: 150px !important;
    padding: 5px 8px !important;
    background: #fff !important;
    color: #3E4444 !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

table.reservations td.resourcename a,
table.reservations td.reslabel a {
    color: #3E4444 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}

table.reservations td.resourcename a:hover,
table.reservations td.reslabel a:hover {
    color: var(--sirius-primary-dark) !important;
}

/* =========================================================
   RESERVATIONS — COLOR ONLY ON REAL BOOKINGS
   ========================================================= */

#reservations .event,
#reservations .buffer {
    background-color: transparent !important;
}

#reservations .reserved {
    box-sizing: border-box !important;
    min-height: 26px !important;
    padding: 4px 8px !important;
    border: 1px solid transparent !important;
    border-left-width: 3px !important;
    border-radius: 6px !important;
    line-height: 1.25 !important;
    color: #404848 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* Generic reservation */
#reservations .reserved:not(.mine):not(.participating):not(.pending) {
    background: var(--sirius-purple-soft) !important;
    border-color: #C8B4D4 !important;
    border-left-color: var(--sirius-purple) !important;
}

/* My reservation */
#reservations .reserved.mine {
    background: #E3F6F8 !important;
    border-color: #A1DDE4 !important;
    border-left-color: var(--sirius-primary) !important;
}

/* Participant */
#reservations .reserved.participating {
    background: var(--sirius-blue-soft) !important;
    border-color: #B5C8D8 !important;
    border-left-color: var(--sirius-blue) !important;
}

/* Pending */
#reservations .reserved.pending {
    background: var(--sirius-yellow-soft) !important;
    border-color: #E6CD9D !important;
    border-left-color: var(--sirius-yellow) !important;
}

#reservations .reserved:hover {
    box-shadow: 0 2px 7px rgba(40,55,55,.10) !important;
}

#reservations .reserved.clicked {
    border-color: var(--sirius-primary) !important;
    border-left-color: var(--sirius-primary-dark) !important;
    box-shadow: 0 0 0 2px rgba(76,189,207,.12) !important;
}

/* Restricted time: quiet hatch instead of old grey gradient. */
#reservations .restricted {
    background: repeating-linear-gradient(
        135deg,
        #F5F6F6 0,
        #F5F6F6 8px,
        #E8EBEB 8px,
        #E8EBEB 16px
    ) !important;
    color: #858D8D !important;
}

/* =========================================================
   LEGEND
   ========================================================= */

div.legend {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: 1px solid #D7DDDD !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #555E5E !important;
    line-height: 18px !important;
    white-space: nowrap !important;
}

div.legend > *,
div.legend span,
div.legend a {
    line-height: 18px !important;
    vertical-align: middle !important;
}

.schedule-legend .d-flex.justify-content-center.flex-wrap {
    gap: 10px !important;
    align-items: center !important;
}

/* =========================================================
   OLD TEAL OVERRIDE
   ========================================================= */

#page-schedule [style*="#2b6b6b"],
#page-schedule [style*="#2B6B6B"] {
    color: var(--sirius-primary) !important;
    background-color: var(--sirius-primary) !important;
    border-color: var(--sirius-primary) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media only screen and (max-width: 768px) {
    table.reservations td.resdate {
        width: auto !important;
        min-width: 120px !important;
        height: 40px !important;
        padding: 5px 8px !important;
    }

    table.reservations td.resourcename,
    table.reservations td.reslabel {
        width: auto !important;
        max-width: none !important;
        padding: 4px 6px !important;
        font-size: 12px !important;
    }

    #reservations .reserved {
        min-height: 24px !important;
        padding: 3px 6px !important;
        border-radius: 5px !important;
    }
}

/* ============================================================================
   V7 — SCHEDULE HEADER / STICKY FIX
   ============================================================================ */

/* The original schedule makes the whole THEAD sticky. The day/resource header
   is a normal part of the schedule flow and must not itself stick to top:50px. */
table.reservations thead td.resdate {
    position: static !important;
    top: auto !important;
    z-index: 2 !important;
    background-clip: padding-box !important;
}

/* Also neutralise any inherited sticky positioning from more generic rules. */
table.reservations td.resdate {
    position: static !important;
    top: auto !important;
    z-index: 2 !important;
    width: 150px !important;
    min-width: 150px !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    padding: 6px 10px !important;
    vertical-align: middle !important;
    background: #EAF8FA !important;
    color: #3E4444 !important;
    border-top: 2px solid #4CBDCF !important;
    border-bottom: 1px solid #D5E4E5 !important;
}

/* The day title itself must remain in normal flow. */
table.reservations td.resdate .schedule_title {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
    color: #3E4444 !important;
    font-weight: 500 !important;
}

/* All days use the same visual treatment. */
table.reservations tr:not(.today) td.resdate,
table.reservations tr:not(.today) td.resdate .schedule_title {
    background: #EAF8FA !important;
    color: #3E4444 !important;
}

/* Today: same background, only slightly stronger text — no purple. */
table.reservations tr.today td.resdate,
table.reservations tr.today td.resdate .schedule_title {
    background: #EAF8FA !important;
    color: #3E4444 !important;
}

table.reservations tr.today td.resdate .schedule_title {
    font-weight: 600 !important;
}

/* Prevent link/state colors from turning dates purple. */
table.reservations td.resdate a,
table.reservations td.resdate a:visited,
table.reservations td.resdate a:hover,
table.reservations td.resdate span,
table.reservations td.resdate strong,
table.reservations td.resdate b {
    color: #3E4444 !important;
}

/* The schedule row itself must not collapse the first day's header. */
table.reservations tr.resdate,
table.reservations tr.dateheader {
    height: 44px !important;
    min-height: 44px !important;
}

/* Keep the resource cells below the day header in normal flow as well. */
table.reservations td.resourcename {
    position: static !important;
    top: auto !important;
    z-index: 1 !important;
}

/* Do not let a generic thead rule repaint the day header with the old color. */
table.reservations thead td.resdate {
    background: #EAF8FA !important;
    color: #3E4444 !important;
}

/* Desktop only — preserve the existing compact layout on mobile. */
@media only screen and (min-width: 769px) {
    table.reservations td.resdate {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }
}

/* ============================================================================
   V8 — CLEAN LIBREBOOKING SCHEDULE OVERRIDE
   Based on the actual LibreBooking schedule DOM and current schedule.css.
   Main goal: no sticky date row, clean day headers, neutral grid, semantic
   reservation colors and stable text wrapping.
   ============================================================================ */

:root {
    --sirius-primary: #4CBDCF;
    --sirius-primary-dark: #329EAE;
    --sirius-primary-soft: #EAF8FA;
    --sirius-primary-hover: #DDF5F7;
    --sirius-text: #303838;
    --sirius-muted: #707979;
    --sirius-line: #DDE3E3;
    --sirius-line-strong: #CDD5D5;
    --sirius-surface: #FFFFFF;
    --sirius-page: #F7F9F9;
}

/* --------------------------------------------------------------------------
   GLOBAL THEME TOKENS — replace the old LibreBooking teal everywhere
   -------------------------------------------------------------------------- */

[data-bs-theme='default'] {
    --primary: #4CBDCF !important;
    --primary-hover: #329EAE !important;
    --primary-disabled: #A9DDE3 !important;
    --text-color-btn: #FFFFFF !important;

    --color-lines: #DDE3E3 !important;
    --reservable: #FFFFFF !important;
    --unreservable: #F2F4F4 !important;
    --pasttime: #F3F5F5 !important;
    --hiliteReservation: #EAF8FA !important;

    /* semantic reservation palette */
    --reserved: #EEE7F4 !important;
    --reservedMine: #DDF3F6 !important;
    --reservedParticipating: #E7EEF5 !important;
    --reservedPending: #FFF1D9 !important;

    --label-text-on-light: #303838 !important;
    --label-text-on-dark: #FFFFFF !important;
}

body {
    background: var(--sirius-page) !important;
    color: var(--sirius-text) !important;
}

/* --------------------------------------------------------------------------
   CRITICAL FIX: the current schedule table is a sequence of TBODY rows.
   LibreBooking's stock CSS makes THEAD cells sticky. On some rendered layouts
   that rule leaks into the first date row and visually pins Monday over the
   first resource. We do not need sticky cells inside the schedule table.
   -------------------------------------------------------------------------- */

table.reservations,
table.reservations thead,
table.reservations tbody,
table.reservations tfoot,
table.reservations tr,
table.reservations td,
table.reservations th {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
}

/* Never allow Bootstrap's utility class to make a schedule cell sticky. */
table.reservations .position-sticky,
table.reservations .sticky-top,
table.reservations .sticky-bottom {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
}

/* Keep the schedule itself above/below normal page content without overlap. */
#reservations {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    background: transparent !important;
}

/* --------------------------------------------------------------------------
   TABLE / GRID
   -------------------------------------------------------------------------- */

table.reservations {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
    background: var(--sirius-surface) !important;
    border: 1px solid var(--sirius-line-strong) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(35, 45, 45, .05) !important;
    font-size: 13px !important;
}

table.reservations td,
table.reservations th {
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--sirius-line) !important;
    border-bottom: 1px solid var(--sirius-line) !important;
    vertical-align: middle !important;
}

/* --------------------------------------------------------------------------
   DAY ROWS — all days identical; today is only slightly stronger
   -------------------------------------------------------------------------- */

table.reservations td.resdate {
    display: table-cell !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 7px 12px !important;
    background: var(--sirius-primary-soft) !important;
    color: var(--sirius-text) !important;
    border-top: 1px solid #BFE8ED !important;
    border-bottom: 1px solid #CFE4E6 !important;
    border-right: 0 !important;
    text-align: left !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* Explicitly make the first date row a normal flow row. */
table.reservations > tbody > tr:first-child,
table.reservations > tbody > tr:first-child td.resdate,
table.reservations > tbody > tr:first-child td.today {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* All date rows — no inherited blue/gray/purple stock colors. */
table.reservations tr:not(.today) td.resdate,
table.reservations tr.today td.resdate,
table.reservations td.resdate.today {
    background: var(--sirius-primary-soft) !important;
    color: var(--sirius-text) !important;
}

/* Today: same background; only text weight changes. */
table.reservations tr.today td.resdate {
    font-weight: 600 !important;
    border-top: 2px solid var(--sirius-primary) !important;
}

/* Date text itself is intentionally plain dark gray. */
table.reservations td.resdate,
table.reservations td.resdate * {
    color: var(--sirius-text) !important;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   RESOURCE COLUMN
   -------------------------------------------------------------------------- */

table.reservations td.resourcename {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 40px !important;
    padding: 6px 8px !important;
    background: #FFFFFF !important;
    color: var(--sirius-text) !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

table.reservations td.resourcename a {
    color: #3E4A4A !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.18 !important;
}

table.reservations td.resourcename a:hover {
    color: var(--sirius-primary-dark) !important;
}

table.reservations td.resourcename .resourceNameSelector {
    color: var(--sirius-primary-dark) !important;
    margin-right: 3px !important;
}

/* --------------------------------------------------------------------------
   FREE / UNAVAILABLE CELLS
   -------------------------------------------------------------------------- */

table.reservations td.reservable,
table.reservations div.reservable {
    background: #FFFFFF !important;
    color: #5D6767 !important;
}

table.reservations td.reservable:hover,
table.reservations div.reservable:hover {
    background: #F6FBFB !important;
}

table.reservations .unreservable,
table.reservations .buffer,
table.reservations td.pasttime,
table.reservations .pasttime {
    background: #F3F5F5 !important;
    color: #899191 !important;
}

/* --------------------------------------------------------------------------
   RESERVATIONS — semantic colors only on actual booked blocks
   -------------------------------------------------------------------------- */

#reservations .reserved {
    box-sizing: border-box !important;
    min-height: 26px !important;
    padding: 5px 8px !important;
    border: 1px solid transparent !important;
    border-left-width: 3px !important;
    border-radius: 6px !important;
    color: #394343 !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease !important;
}

#reservations .reserved:not(.mine):not(.participating):not(.pending) {
    background: #F0EAF5 !important;
    border-color: #D8C9E2 !important;
    border-left-color: #8B68A8 !important;
}

#reservations .reserved.mine {
    background: #E1F5F7 !important;
    border-color: #B9E4E9 !important;
    border-left-color: #4CBDCF !important;
}

#reservations .reserved.participating {
    background: #E9F0F6 !important;
    border-color: #C6D5E2 !important;
    border-left-color: #6488A8 !important;
}

#reservations .reserved.pending {
    background: #FFF2DC !important;
    border-color: #EAD5AA !important;
    border-left-color: #C68A2D !important;
}

#reservations .reserved:hover {
    box-shadow: 0 2px 7px rgba(40, 50, 50, .08) !important;
}

#reservations .reserved.clicked {
    border-color: #8BD4DE !important;
    border-left-color: #319EAE !important;
    box-shadow: 0 0 0 2px rgba(76,189,207,.14) !important;
}

/* --------------------------------------------------------------------------
   RESTRICTED / HIGHLIGHT
   -------------------------------------------------------------------------- */

table.reservations .restricted {
    background: repeating-linear-gradient(
        135deg,
        #F5F6F6 0,
        #F5F6F6 8px,
        #E9ECEC 8px,
        #E9ECEC 16px
    ) !important;
    color: #7E8787 !important;
}

table.reservations .reservable.hilite,
table.reservations .ui-selecting,
table.reservations .ui-selected {
    background: #EAF8FA !important;
    color: var(--sirius-text) !important;
}

/* --------------------------------------------------------------------------
   LEGEND
   -------------------------------------------------------------------------- */

div.legend {
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border: 1px solid #D8DEDE !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    color: #596363 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
}

.schedule-legend .d-flex.justify-content-center.flex-wrap,
.d-flex.justify-content-center.flex-wrap {
    gap: 10px !important;
    align-items: center !important;
}

/* --------------------------------------------------------------------------
   BUTTONS / FORMS — restrained, consistent UI
   -------------------------------------------------------------------------- */

.btn,
.form-control,
.form-select,
.input-group-text {
    border-radius: 6px !important;
}

.btn-primary {
    background: #4CBDCF !important;
    border-color: #4CBDCF !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #329EAE !important;
    border-color: #329EAE !important;
}

.btn-outline-primary {
    color: #329EAE !important;
    border-color: #4CBDCF !important;
}

.btn-outline-primary:hover {
    background: #EAF8FA !important;
    color: #287F8B !important;
    border-color: #4CBDCF !important;
}

.form-control,
.form-select {
    border-color: #D8DEDE !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #4CBDCF !important;
    box-shadow: 0 0 0 3px rgba(76,189,207,.12) !important;
}

/* --------------------------------------------------------------------------
   REMOVE OLD PRIMARY COLOR FROM COMMON COMPONENTS
   -------------------------------------------------------------------------- */

.text-primary,
.link-primary,
.nav-link.active,
#page-schedule a.text-primary {
    color: #329EAE !important;
}

.bg-primary {
    background-color: #4CBDCF !important;
}

.border-primary {
    border-color: #4CBDCF !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 768px) {
    table.reservations {
        border-radius: 6px !important;
        font-size: 12px !important;
    }

    table.reservations td.resourcename {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        padding: 5px 6px !important;
    }

    table.reservations td.resdate {
        height: 40px !important;
        min-height: 40px !important;
        padding: 6px 8px !important;
    }

    #reservations .reserved {
        min-height: 24px !important;
        padding: 3px 6px !important;
        border-radius: 5px !important;
    }
}

/* ============================================================================
   SIRIUS UI v9 — TYPOGRAPHY + GLOBAL POLISH
   Keep this file AFTER LibreBooking original CSS.
   ============================================================================ */

:root {
    --sirius-primary: #4CBDCF;
    --sirius-primary-dark: #319EAE;
    --sirius-primary-soft: #EAF8FA;
    --sirius-text: #354D50;
    --sirius-text-muted: #687575;
}

/* Montserrat must win over LibreBooking / Bootstrap / browser defaults. */
html,
body,
body *,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.navbar,
.nav-link,
.table,
.modal,
.modal-dialog,
.modal-content,
.popover,
.tooltip,
.alert,
.card,
label,
option {
    font-family: 'Montserrat', Arial, sans-serif !important;
}

html {
    font-family: 'Montserrat', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #354D50 !important;
    background: #F7F9F9 !important;
}

/* Headings and labels should feel like one design system. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Montserrat', Arial, sans-serif !important;
    color: #354D50 !important;
    letter-spacing: -0.01em;
}

h1, .h1 { font-weight: 600 !important; }
h2, .h2 { font-weight: 600 !important; }
h3, .h3 { font-weight: 600 !important; }
h4, .h4 { font-weight: 600 !important; }

/* Links: cyan, but not neon. */
a,
a:visited {
    color: #2D8D9B;
}

a:hover,
a:focus {
    color: #247884;
}

/* Primary UI controls. */
.btn-primary,
.btn-primary:visited {
    background: #4CBDCF !important;
    border-color: #4CBDCF !important;
    color: #FFFFFF !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #319EAE !important;
    border-color: #319EAE !important;
    color: #FFFFFF !important;
}

/* Secondary buttons. */
.btn-secondary,
.btn-light,
.btn-default {
    background: #FFFFFF !important;
    border: 1px solid #D8E0E0 !important;
    color: #4D5A5C !important;
    box-shadow: none !important;
}

.btn-secondary:hover,
.btn-light:hover,
.btn-default:hover {
    background: #F5F8F8 !important;
    border-color: #BFCBCB !important;
}

/* Inputs. */
.form-control,
.form-select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select {
    font-family: 'Montserrat', Arial, sans-serif !important;
    color: #354D50 !important;
    background: #FFFFFF !important;
    border: 1px solid #D8E0E0 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: #4CBDCF !important;
    box-shadow: 0 0 0 3px rgba(76,189,207,.12) !important;
    outline: none !important;
}

/* Navbar/header — modern but deliberately restrained. */
.navbar,
.navbar-light,
.navbar-default {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E7E7 !important;
    box-shadow: 0 1px 5px rgba(40,55,55,.04) !important;
}

.navbar a,
.navbar .nav-link,
.navbar .navbar-text {
    font-family: 'Montserrat', Arial, sans-serif !important;
    color: #526163 !important;
    font-weight: 500 !important;
}

.navbar a:hover,
.navbar .nav-link:hover {
    color: #2D8D9B !important;
}

/* Dropdowns. */
.dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid #E0E5E5 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(30,45,45,.10) !important;
    padding: 5px !important;
}

.dropdown-item {
    border-radius: 5px !important;
    color: #4D595B !important;
    font-weight: 400 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: #EAF8FA !important;
    color: #287F8B !important;
}

/* Cards/panels without the old heavy Bootstrap appearance. */
.card,
.panel {
    border: 1px solid #E1E6E6 !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(30,45,45,.04) !important;
}

/* Tables outside the schedule. */
.table {
    color: #3F4B4D !important;
}

.table thead th {
    font-weight: 600 !important;
    color: #4D5A5C !important;
    background: #F4F7F7 !important;
    border-bottom: 1px solid #DDE4E4 !important;
}

.table td,
.table th {
    border-color: #E5EAEA !important;
}

/* Labels and helper text. */
label,
.form-label {
    color: #4D595B !important;
    font-weight: 500 !important;
}

.text-muted,
.help-block,
.form-text {
    color: #7A8585 !important;
}

/* Avoid the old LibreBooking primary from reappearing. */
.text-primary {
    color: #2D8D9B !important;
}

.bg-primary {
    background-color: #4CBDCF !important;
}

.border-primary {
    border-color: #4CBDCF !important;
}

/* Schedule typography — slightly smaller than the rest to keep the dense grid usable. */
#reservations,
#reservations table,
#reservations td,
#reservations th,
#reservations a,
#reservations .resourcename,
#reservations .schedule_title,
#reservations .reserved {
    font-family: 'Montserrat', Arial, sans-serif !important;
}

#reservations {
    font-size: 13px !important;
}

#reservations .resourcename,
#reservations .resourceName {
    font-size: 13px !important;
    font-weight: 500 !important;
}

#reservations .schedule_title {
    font-size: 13px !important;
    font-weight: 600 !important;
}

#reservations .reserved {
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Keep the brand color subtle in icons. */
.text-info,
.text-success {
    color: #2D8D9B !important;
}

@media (max-width: 768px) {
    body {
        font-size: 13px !important;
    }

    #reservations {
        font-size: 12px !important;
    }
}

/* ============================================================================
   V10 — BRAND BALANCE
   Primary brand: #4CBDCF
   Secondary accent: #7814C8
   Purple is used sparingly for secondary actions, focus accents and
   reservation semantics — never as the main interface color.
   ============================================================================ */

:root {
    --primary: #4CBDCF !important;
    --primary-hover: #329EAE !important;
    --primary-soft: #EAF8FA !important;

    --accent-purple: #7814C8 !important;
    --accent-purple-hover: #6710AE !important;
    --accent-purple-soft: #F3EAF9 !important;
    --accent-purple-border: #D8BDEB !important;
}

/* Main interactive elements remain cyan */
.btn-primary,
.btn-info,
button.primary,
input[type="submit"].primary,
input[type="button"].primary {
    background-color: #4CBDCF !important;
    border-color: #4CBDCF !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus,
button.primary:hover,
input[type="submit"].primary:hover,
input[type="button"].primary:hover {
    background-color: #329EAE !important;
    border-color: #329EAE !important;
}

/* Purple: secondary actions only */
.btn-secondary,
.btn-outline-secondary,
.btn-purple,
button.secondary,
.secondary-action {
    color: #7814C8 !important;
    border-color: #D8BDEB !important;
    background-color: #FFFFFF !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-purple:hover,
button.secondary:hover,
.secondary-action:hover {
    color: #6710AE !important;
    border-color: #C79BE1 !important;
    background-color: #F3EAF9 !important;
}

/* Links: cyan by default, purple only for secondary/navigation accents */
a:not(.btn):not(.dropdown-item) {
    color: #287F8B;
}

a:not(.btn):not(.dropdown-item):hover {
    color: #7814C8;
}

/* Focus states: primarily cyan, with a very subtle purple secondary ring */
.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus {
    border-color: #4CBDCF !important;
    box-shadow: 0 0 0 3px rgba(76,189,207,.14) !important;
}

/* Secondary tabs / selected navigation can use purple */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.tab-pane .active-secondary {
    color: #7814C8 !important;
    background: #F3EAF9 !important;
    border-color: #D8BDEB !important;
}

/* Calendar: day headers stay cyan; purple only belongs to actual generic reservations. */
table.reservations td.resdate,
table.reservations td.resdate .schedule_title {
    background: #EAF8FA !important;
    color: #3E4444 !important;
    border-top-color: #4CBDCF !important;
}

#reservations .reserved:not(.mine):not(.participating):not(.pending) {
    background: #F1EAF6 !important;
    border-color: #D4BCE2 !important;
    border-left-color: #7814C8 !important;
}

#reservations .reserved:not(.mine):not(.participating):not(.pending):hover {
    border-color: #C39AD8 !important;
    border-left-color: #7814C8 !important;
}

/* My reservation stays unmistakably primary cyan. */
#reservations .reserved.mine {
    background: #E3F6F8 !important;
    border-color: #9ADCE4 !important;
    border-left-color: #4CBDCF !important;
}

/* Participating = calm blue, pending = warm yellow. */
#reservations .reserved.participating {
    background: #EAF1F7 !important;
    border-color: #AEC5D7 !important;
    border-left-color: #6488A8 !important;
}

#reservations .reserved.pending {
    background: #FFF4DF !important;
    border-color: #E5C98F !important;
    border-left-color: #C68A2D !important;
}

/* Legend: purple can identify the generic reservation state. */
div.legend {
    border-color: #D7DDDD !important;
}

div.legend .reserved,
div.legend .reservation,
div.legend .legend-reserved {
    border-color: #D4BCE2 !important;
    background: #F1EAF6 !important;
}

/* Purple accent for small decorative/semantic indicators, not large surfaces. */
.accent-purple,
.text-purple,
.text-secondary-accent {
    color: #7814C8 !important;
}

.border-purple,
.accent-purple-border {
    border-color: #D8BDEB !important;
}

.bg-purple-soft,
.accent-purple-soft {
    background-color: #F3EAF9 !important;
}

/* Keep old LibreBooking teal completely out. */
[style*="#2b6b6b"],
[style*="#2B6B6B"] {
    color: #4CBDCF !important;
    border-color: #4CBDCF !important;
}

/* ============================================================================
   V11 — LEGEND + CALENDAR WIDTH POLISH
   Primary brand: #4CBDCF | Secondary accent: #7814C8
   ============================================================================ */

/* --------------------------------------------------------------------------
   LEGEND
   LibreBooking uses div.legend as the visual key. The original width:110px
   rule is retained only as a sizing hint; the actual state colors are applied
   here so the meaning is immediately visible.
   -------------------------------------------------------------------------- */

.schedule-legend {
    margin-bottom: 12px !important;
}

.schedule-legend .d-flex.justify-content-center.flex-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
}

div.legend {
    width: auto !important;
    min-width: 104px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 5px 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid #D9DEDE !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    color: #4A5050 !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Actual color swatches inside legend items. */
.schedule-legend div.legend.reserved,
.schedule-legend div.legend[data-type="reserved"] {
    background: #F1EAF6 !important;
    border-color: #C9A9D9 !important;
    color: #5D4770 !important;
}

.schedule-legend div.legend.reserved.mine,
.schedule-legend div.legend[data-type="mine"] {
    background: #E3F6F8 !important;
    border-color: #8FD8E1 !important;
    color: #287F8B !important;
}

.schedule-legend div.legend.reserved.participating,
.schedule-legend div.legend[data-type="participating"] {
    background: #EAF1F7 !important;
    border-color: #AFC5D6 !important;
    color: #526F88 !important;
}

.schedule-legend div.legend.reserved.pending,
.schedule-legend div.legend[data-type="pending"] {
    background: #FFF4DF !important;
    border-color: #E2C88F !important;
    color: #866321 !important;
}

/* If the legend has a colored child rather than a state class on itself. */
.schedule-legend div.legend > .reserved,
.schedule-legend div.legend > .reserved.mine,
.schedule-legend div.legend > .reserved.participating,
.schedule-legend div.legend > .reserved.pending,
.schedule-legend div.legend > .reservable,
.schedule-legend div.legend > .unreservable,
.schedule-legend div.legend > .pasttime,
.schedule-legend div.legend > .restricted {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    display: inline-block !important;
    flex: 0 0 18px !important;
    margin-right: 7px !important;
    padding: 0 !important;
    border-radius: 4px !important;
    vertical-align: middle !important;
}

.schedule-legend div.legend > .reservable {
    background: #FFFFFF !important;
    border: 2px solid #4CBDCF !important;
}

.schedule-legend div.legend > .reserved {
    background: #F1EAF6 !important;
    border: 2px solid #7814C8 !important;
}

.schedule-legend div.legend > .reserved.mine {
    background: #E3F6F8 !important;
    border: 2px solid #4CBDCF !important;
}

.schedule-legend div.legend > .reserved.participating {
    background: #EAF1F7 !important;
    border: 2px solid #6488A8 !important;
}

.schedule-legend div.legend > .reserved.pending {
    background: #FFF4DF !important;
    border: 2px solid #C68A2D !important;
}

.schedule-legend div.legend > .unreservable,
.schedule-legend div.legend > .pasttime {
    background: #F1F3F3 !important;
    border: 1px solid #C8CECE !important;
}

.schedule-legend div.legend > .restricted {
    background: repeating-linear-gradient(135deg, #F2F4F4 0, #F2F4F4 6px, #E2E6E6 6px, #E2E6E6 12px) !important;
    border: 1px solid #C7CCCC !important;
}

/* --------------------------------------------------------------------------
   RESOURCE COLUMN
   The original LibreBooking schedule uses 150px for td.resourcename. That
   consumes too much horizontal space in a week view. Bring it down to 108px
   and let names wrap naturally.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 769px) {
    table.reservations td.resourcename {
        width: 108px !important;
        min-width: 108px !important;
        max-width: 108px !important;
        padding: 5px 6px !important;
        line-height: 1.2 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-overflow: clip !important;
    }

    table.reservations td.resourcename a {
        display: block !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        line-height: 1.2 !important;
    }

    /* The schedule gets the horizontal space back. */
    table.reservations {
        width: 100% !important;
        table-layout: fixed !important;
    }

    /* Date header should not inherit the old 150px resource width. */
    table.reservations td.resdate {
        width: auto !important;
    }
}

/* Keep the resource label visually compact. */
table.reservations td.resourcename:hover {
    background: #F7FAFA !important;
}

/* --------------------------------------------------------------------------
   Calendar labels / rows — compact but readable
   -------------------------------------------------------------------------- */

table.reservations td.resourcename,
table.reservations td.reslabel {
    font-size: 12px !important;
    font-weight: 500 !important;
}

table.reservations td.resdate {
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Do not let generic primary/purple styles recolor the day labels. */
table.reservations td.resdate,
table.reservations td.resdate a,
table.reservations td.resdate span,
table.reservations td.resdate strong {
    color: #3E4444 !important;
}

/* --------------------------------------------------------------------------
   Reservation blocks get a little more breathing room after narrowing the
   resource column.
   -------------------------------------------------------------------------- */

#reservations .reserved {
    padding: 4px 7px !important;
    border-radius: 6px !important;
    line-height: 1.22 !important;
    overflow: hidden !important;
}

/* Mobile: restore flexible resource width. */
@media only screen and (max-width: 768px) {
    table.reservations td.resourcename {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 11px !important;
    }

    div.legend {
        min-width: 92px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 4px 8px !important;
    }
}

/* ============================================================================
   V12 — RESOURCE COLUMN FIX
   LibreBooking's schedule uses .reslabel in the rendered calendar in some
   views, while .resourcename is used in others. The previous override only
   constrained .resourcename, which is why the visible resource column could
   still consume almost the whole table width.
   ============================================================================ */

@media only screen and (min-width: 769px) {
    /* The visible resource/name column. */
    table.reservations td.reslabel,
    table.reservations th.reslabel,
    table.reservations td.resourcename,
    table.reservations th.resourcename {
        width: 145px !important;
        min-width: 145px !important;
        max-width: 145px !important;
        box-sizing: border-box !important;
    }

    /* Keep the resource text inside that compact column. */
    table.reservations td.reslabel,
    table.reservations td.resourcename {
        padding: 6px 8px !important;
        text-align: left !important;
        vertical-align: middle !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        line-height: 1.18 !important;
    }

    table.reservations td.reslabel a,
    table.reservations td.resourcename a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        line-height: 1.18 !important;
    }

    /* Never let a generic width rule on the schedule label expand the column. */
    table.reservations td.reslabel[style*="width"],
    table.reservations td.resourcename[style*="width"] {
        width: 145px !important;
        min-width: 145px !important;
        max-width: 145px !important;
    }

    /* Make the booking area explicitly consume the remaining width. */
    table.reservations td.reslabel + td,
    table.reservations td.resourcename + td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Compact resource labels on smaller screens without breaking the mobile view. */
@media only screen and (max-width: 768px) {
    table.reservations td.reslabel,
    table.reservations td.resourcename {
        width: 125px !important;
        min-width: 125px !important;
        max-width: 125px !important;
        padding: 5px 6px !important;
        line-height: 1.15 !important;
    }
}

/* Resource names should look like labels, not like a large content panel. */
table.reservations td.reslabel,
table.reservations td.resourcename {
    background: #FFFFFF !important;
    color: #374244 !important;
    border-right: 1px solid #D8E0E1 !important;
}

table.reservations td.reslabel a,
table.reservations td.resourcename a {
    color: #328F9B !important;
    text-decoration: none !important;
}

table.reservations td.reslabel a:hover,
table.reservations td.resourcename a:hover {
    color: #7814C8 !important;
}

/* ============================================================================
   V13 — SCHEDULE RESOURCE LABEL FIX
   The visible resource-name area in the current LibreBooking schedule is not
   necessarily a td.resourcename. Keep the schedule grid full-width and make
   the resource label a compact overlay instead of shrinking the whole table.
   ============================================================================ */

/* Never use the resource-name width to determine the table's main schedule width. */
table.reservations {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Undo the previous attempt to make reslabel itself a narrow table column. */
table.reservations td.reslabel,
table.reservations th.reslabel {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Actual resource-name cells, when LibreBooking renders them as cells. */
table.reservations td.resourcename,
table.reservations th.resourcename {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    padding: 5px 7px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    line-height: 1.18 !important;
}

/* Current schedule markup can render the name as a nested element. */
table.reservations .resourcename:not(td):not(th) {
    display: block !important;
    width: 120px !important;
    max-width: 120px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    line-height: 1.18 !important;
}

/* If a resource-name wrapper is positioned over the schedule cell, keep it
   compact and do not let its text/background cover the booking timeline. */
table.reservations .resourceName,
table.reservations .resource-name,
table.reservations .resourceNameSelector {
    max-width: 120px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* Keep the actual reservation/timeline surface available. */
table.reservations td.reslabel .table-cell-wrapper,
table.reservations td.reservable .table-cell-wrapper {
    min-width: 0 !important;
    width: 100% !important;
}

/* Do not let the label itself create horizontal space in an absolute-positioned
   schedule cell. */
table.reservations td.reslabel .resourcename:not(td):not(th) {
    flex: 0 0 120px !important;
}

/* Compact desktop resource labels. */
@media only screen and (min-width: 769px) {
    table.reservations .resourcename:not(td):not(th),
    table.reservations .resourceName,
    table.reservations .resource-name,
    table.reservations .resourceNameSelector {
        width: 120px !important;
        max-width: 120px !important;
    }
}

/* On narrow screens, give names enough room to remain readable. */
@media only screen and (max-width: 768px) {
    table.reservations td.resourcename,
    table.reservations .resourcename:not(td):not(th),
    table.reservations .resourceName,
    table.reservations .resource-name,
    table.reservations .resourceNameSelector {
        width: 105px !important;
        min-width: 105px !important;
        max-width: 105px !important;
    }
}


/* ============================================================================
   V14 — MODE-SAFE SCHEDULE LAYOUT
   IMPORTANT:
   LibreBooking has several schedule renderers. Do not force one table layout
   onto all of them. Keep the native mode-specific layout and only style it.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. GLOBAL THEME TOKENS
   --------------------------------------------------------------------------- */

:root {
    --sirius-primary: #4CBDCF !important;
    --sirius-primary-dark: #319EAE !important;
    --sirius-primary-soft: #EAF8FA !important;

    --sirius-purple: #7814C8 !important;
    --sirius-purple-soft: #F2EAF8 !important;

    --sirius-text: #26383B !important;
    --sirius-muted: #6B7779 !important;
    --sirius-line: #D9E1E2 !important;
}

/* Replace LibreBooking's default primary without changing semantic states. */
:root,
[data-bs-theme="default"] {
    --primary: #4CBDCF !important;
    --primary-hover: #319EAE !important;
    --primary-disabled: #A9DDE4 !important;
}

/* ---------------------------------------------------------------------------
   2. SCHEDULE TABLE — DO NOT BREAK THE DIFFERENT VIEWS
   --------------------------------------------------------------------------- */

/* Standard desktop schedule: fixed is native and gives predictable columns. */
table.reservations:not(.reservations-tall):not(.mobile):not(.condensed) {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Tall view: LibreBooking itself requires auto layout. */
table.reservations.reservations-tall {
    table-layout: auto !important;
    width: 100% !important;
}

/* Condensed view has its own sizing rules. */
table.reservations.condensed {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Mobile renderer keeps its native fixed layout. */
table.reservations.mobile {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Never let generic global td rules make a schedule cell huge. */
table.reservations td {
    box-sizing: border-box !important;
}

/* ---------------------------------------------------------------------------
   3. RESOURCE COLUMN — ONLY APPLY TO THE ACTUAL RESOURCE LABEL
   --------------------------------------------------------------------------- */

/* Standard schedule */
table.reservations:not(.reservations-tall):not(.mobile) td.resourcename {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
}

/* Condensed schedule */
table.reservations.condensed td.resourcename {
    width: 135px !important;
    min-width: 135px !important;
    max-width: 135px !important;
}

/* Mobile */
table.reservations.mobile td.resourcename {
    width: 115px !important;
    min-width: 115px !important;
    max-width: 115px !important;
}

/*
 * Tall view is the important exception.
 * Its native auto table layout must remain intact, but the resource label
 * should not become the dominant part of the screen.
 */
table.reservations.reservations-tall td.resourcename {
    width: 125px !important;
    min-width: 125px !important;
    max-width: 125px !important;
    padding: 5px 7px !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

/* Do NOT apply resource-column sizing to reslabel.
   reslabel is a different structural cell in LibreBooking's schedule. */
table.reservations td.reslabel {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* But its content must not force a column to grow. */
table.reservations td.reslabel > *,
table.reservations td.reslabel .resourceName {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* ---------------------------------------------------------------------------
   4. TALL VIEW — PRESERVE ROOM FOR ACTUAL RESERVATIONS
   --------------------------------------------------------------------------- */

table.reservations.reservations-tall td.reservable,
table.reservations.reservations-tall td.reserved,
table.reservations.reservations-tall td.unreservable,
table.reservations.reservations-tall td.buffer {
    min-width: 0 !important;
}

/* Reservation content must be allowed to occupy the available schedule area. */
table.reservations.reservations-tall .event,
table.reservations.reservations-tall .buffer {
    max-width: none !important;
}

/* ---------------------------------------------------------------------------
   5. DAY HEADERS — CONSISTENT ACROSS ALL VIEWS
   --------------------------------------------------------------------------- */

table.reservations td.resdate {
    background: #EAF8FA !important;
    color: #26383B !important;
    border-top: 2px solid #4CBDCF !important;
    border-bottom: 1px solid #D5E4E5 !important;
    font-weight: 500 !important;
}

table.reservations tr.today td.resdate,
table.reservations td.today.resdate,
table.reservations tr:not(.today) td.resdate {
    background: #EAF8FA !important;
    color: #26383B !important;
}

table.reservations td.resdate .schedule_title {
    color: #26383B !important;
    font-weight: 500 !important;
}

/* ---------------------------------------------------------------------------
   6. RESERVATION COLORS — PURPLE IS SECONDARY, CYAN IS BRAND
   --------------------------------------------------------------------------- */

/* Base reservation */
#reservations .reserved:not(.mine):not(.participating):not(.pending) {
    background: #F2EAF8 !important;
    border: 1px solid #C9AADD !important;
    border-left: 3px solid #7814C8 !important;
    color: #3E3445 !important;
}

/* My reservation = main brand */
#reservations .reserved.mine {
    background: #E5F7F9 !important;
    border: 1px solid #A2DEE5 !important;
    border-left: 3px solid #4CBDCF !important;
    color: #28484C !important;
}

/* Participant */
#reservations .reserved.participating {
    background: #EDF3F8 !important;
    border: 1px solid #B9CBD9 !important;
    border-left: 3px solid #6488A8 !important;
}

/* Pending */
#reservations .reserved.pending {
    background: #FFF5E2 !important;
    border: 1px solid #E6CE9D !important;
    border-left: 3px solid #C68A2D !important;
}

/* ---------------------------------------------------------------------------
   7. LEGEND — REAL COLOR SWATCHES
   --------------------------------------------------------------------------- */

/* Keep the legend container itself compact. */
.schedule-legend .d-flex.justify-content-center.flex-wrap {
    gap: 10px !important;
    align-items: center !important;
}

div.legend {
    width: auto !important;
    min-width: 110px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 4px 10px !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    border-radius: 6px !important;
    border: 1px solid #D4DEDF !important;

    background: #FFFFFF !important;
    color: #465356 !important;
    font-weight: 500 !important;
}

/*
 * LibreBooking commonly puts the reservation color directly on the legend
 * child via the same semantic classes. Paint the legend itself as well so
 * the meaning is visible even when the inner element is only text.
 */
div.legend:has(.reserved) {
    background: #F2EAF8 !important;
    border-color: #C9AADD !important;
    box-shadow: inset 3px 0 0 #7814C8 !important;
}

div.legend:has(.reserved.mine) {
    background: #E5F7F9 !important;
    border-color: #A2DEE5 !important;
    box-shadow: inset 3px 0 0 #4CBDCF !important;
}

div.legend:has(.reserved.participating) {
    background: #EDF3F8 !important;
    border-color: #B9CBD9 !important;
    box-shadow: inset 3px 0 0 #6488A8 !important;
}

div.legend:has(.reserved.pending) {
    background: #FFF5E2 !important;
    border-color: #E6CE9D !important;
    box-shadow: inset 3px 0 0 #C68A2D !important;
}

/* If the color class is directly on the legend element. */
div.legend.reserved {
    background: #F2EAF8 !important;
    border-color: #C9AADD !important;
    box-shadow: inset 3px 0 0 #7814C8 !important;
}

div.legend.reserved.mine {
    background: #E5F7F9 !important;
    border-color: #A2DEE5 !important;
    box-shadow: inset 3px 0 0 #4CBDCF !important;
}

div.legend.reserved.participating {
    background: #EDF3F8 !important;
    border-color: #B9CBD9 !important;
    box-shadow: inset 3px 0 0 #6488A8 !important;
}

div.legend.reserved.pending {
    background: #FFF5E2 !important;
    border-color: #E6CE9D !important;
    box-shadow: inset 3px 0 0 #C68A2D !important;
}

/* ---------------------------------------------------------------------------
   8. SCHEDULE VIEW SWITCHER
   --------------------------------------------------------------------------- */

.schedule-style {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 3px !important;
    padding: 5px !important;
    min-width: 42px !important;
    min-height: 36px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
}

.schedule-style:hover {
    background: #F1FAFB !important;
    border-color: #B8E2E7 !important;
}

.schedule-style.active {
    background: #EAF8FA !important;
    border: 1px solid #9FD9E0 !important;
    border-bottom: 2px solid #4CBDCF !important;
    padding-bottom: 4px !important;
    margin-bottom: 2px !important;
}

.schedule-style img.schedule_icon,
.schedule-style .schedule_icon {
    max-height: 28px !important;
    width: auto !important;
    opacity: .78 !important;
}

.schedule-style:hover img.schedule_icon,
.schedule-style.active img.schedule_icon {
    opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
   9. MOBILE / SMALL VIEW
   --------------------------------------------------------------------------- */

@media only screen and (max-width: 768px) {
    table.reservations.mobile td.resourcename {
        width: 105px !important;
        min-width: 105px !important;
        max-width: 105px !important;
    }

    table.reservations.mobile td.resdate {
        width: auto !important;
        min-width: 110px !important;
        max-width: none !important;
    }

    table.reservations.mobile .reserved {
        min-height: 24px !important;
        padding: 2px 5px !important;
        border-radius: 4px !important;
    }

    .schedule-style {
        min-width: 36px !important;
        min-height: 32px !important;
        margin: 0 2px !important;
    }
}

/* ---------------------------------------------------------------------------
   10. DO NOT FORCE OLD PRIMARY COLORS BACK INTO THE SCHEDULE
   --------------------------------------------------------------------------- */

#page-schedule .text-primary,
#page-schedule .link-primary {
    color: #4CBDCF !important;
}

#page-schedule .bg-primary {
    background-color: #4CBDCF !important;
}

#page-schedule .border-primary {
    border-color: #4CBDCF !important;
}


/* =========================================================
   V15 — SCHEDULE LAYOUT CORRECTION
   Do not force the resource column through the global fixed
   table algorithm. LibreBooking uses several schedule modes.
   ========================================================= */

/* The original LibreBooking schedule has its own table sizing rules.
   Keep fixed layout only for compact/mobile variants where the source
   explicitly uses it; let the resource column determine its real width
   in the desktop schedule. */
table.reservations:not(.mobile):not(.condensed) {
    table-layout: auto !important;
}

/* Resource column: compact, but not cramped. */
table.reservations:not(.mobile) td.resourcename {
    width: 175px !important;
    min-width: 175px !important;
    max-width: 175px !important;
    padding: 6px 8px !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.18 !important;
}

/* In the vertical/resource-first rendering, reslabel is the schedule
   label area, not the resource-name column. Do NOT assign it a fixed
   desktop width — it must consume the remaining schedule space. */
table.reservations td.reslabel {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Give the actual time/schedule cell the remaining width. */
table.reservations td.resourcename + td {
    width: auto !important;
    min-width: 0 !important;
}

/* Day header spans the available schedule area without creating a huge
   artificial resource column. */
table.reservations td.resdate {
    width: auto !important;
    min-width: 0 !important;
}

/* Keep the first row from deciding the resource column width when the
   date header uses colspan. */
table.reservations td.resdate {
    white-space: nowrap !important;
}

/* Tall view keeps LibreBooking's intended automatic sizing. */
table.reservations.reservations-tall {
    table-layout: auto !important;
}

/* Condensed and mobile retain their own native fixed sizing. */
table.reservations.condensed,
table.reservations.mobile {
    table-layout: fixed !important;
}

table.reservations.condensed td.resourcename {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
}

table.reservations.mobile td.resourcename {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
}

/* =========================================================
   V15 — LEGEND
   ========================================================= */

.schedule-legend .d-flex.justify-content-center.flex-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

div.legend {
    width: auto !important;
    min-width: 116px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #CBD6D7 !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--sirius-text) !important;
    line-height: 18px !important;
    white-space: nowrap !important;
}

/* Paint the legend item itself, because the stock legend classes are
   applied inconsistently between schedule renderings. */
div.legend.reserved,
div.legend[data-status="reserved"] {
    background: var(--sirius-purple-soft) !important;
    border-color: #C8B4D4 !important;
}

div.legend.mine,
div.legend[data-status="mine"] {
    background: #E3F6F8 !important;
    border-color: #8FD5DE !important;
}

div.legend.participating,
div.legend[data-status="participating"] {
    background: var(--sirius-blue-soft) !important;
    border-color: #AFC5D7 !important;
}

div.legend.pending,
div.legend[data-status="pending"] {
    background: var(--sirius-yellow-soft) !important;
    border-color: #E2C78F !important;
}

/* If the legend contains the real reservation sample, preserve its color. */
div.legend .reserved {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin-right: 6px !important;
    padding: 0 !important;
    border-radius: 4px !important;
}

/* =========================================================
   V15 — MODE SWITCHER
   ========================================================= */

.schedule-style {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 3px !important;
    padding: 5px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

.schedule-style:hover {
    background: #F2FAFB !important;
    border-color: #BFE6EB !important;
}

.schedule-style.active {
    background: #EAF8FA !important;
    border: 1px solid #A6DCE3 !important;
    border-bottom: 3px solid var(--sirius-primary) !important;
    padding-bottom: 4px !important;
    margin-bottom: 0 !important;
}

.schedule-style img,
.schedule-style .schedule_icon {
    max-width: 28px !important;
    max-height: 28px !important;
}

/* =========================================================
   V15 — DO NOT OVERRIDE LIBREBOOKING'S EVENT GEOMETRY
   ========================================================= */

#reservations .event,
#reservations .buffer {
    position: absolute !important;
    box-sizing: border-box !important;
}

#reservations .table-cell-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* =========================================================
   V16 — FIX THE ACTUAL MOBILE SCHEDULE TABLE
   The supplied LibreBooking page uses:
   <table class="reservations mobile">
       <tr><td class="resdate" colspan="2">...</td></tr>
       <tr><td class="resourcename">...</td><td>...</td></tr>
   </table>

   Because the first row has colspan="2", table-layout: fixed makes
   the browser split the two columns roughly 50/50. Width on the
   later .resourcename cells therefore cannot control the first column.
   Use auto layout for this view and explicitly constrain both cells.
   ========================================================= */

@media only screen and (min-width: 769px) {
    #reservations table.reservations.mobile {
        width: 100% !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
    }

    /* Actual resource-name column in the supplied HTML */
    #reservations table.reservations.mobile td.resourcename {
        width: 185px !important;
        min-width: 185px !important;
        max-width: 185px !important;
        box-sizing: border-box !important;
        padding: 6px 8px !important;
        overflow: hidden !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        line-height: 1.2 !important;
        vertical-align: middle !important;
    }

    /* The adjacent schedule cell gets all remaining width. */
    #reservations table.reservations.mobile td.resourcename + td {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* Do not let the nested reservation layer create a minimum width. */
    #reservations table.reservations.mobile td.resourcename + td > div.reservations {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #reservations table.reservations.mobile td.resourcename + td > div.reservable {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 3px !important;
    }

    /* Keep the date row full width; it must not participate in column sizing. */
    #reservations table.reservations.mobile td.resdate {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* Remove any inherited spacing that visually makes the resource column
       look wider than its actual 185px width. */
    #reservations table.reservations.mobile td.resourcename a {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #reservations table.reservations.mobile td.resourcename i {
        margin-right: 4px !important;
    }
}

/* Compact desktop/tall/condensed views retain their own native layout. */
@media only screen and (min-width: 769px) {
    #reservations table.reservations.mobile + * {
        box-sizing: border-box !important;
    }
}

@media only screen and (max-width: 768px) {
    #reservations table.reservations.mobile {
        table-layout: auto !important;
        width: 100% !important;
    }

    #reservations table.reservations.mobile td.resourcename {
        width: 125px !important;
        min-width: 125px !important;
        max-width: 125px !important;
        box-sizing: border-box !important;
        padding: 5px 6px !important;
    }

    #reservations table.reservations.mobile td.resourcename + td {
        width: auto !important;
        min-width: 0 !important;
    }
}