.pms-loader-card,
.pms-loading-line-card {
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    padding: 18px;
    border-radius: 18px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.pms-filter-card {
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 18px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.pms-filter-actions {
    display: flex;
    align-items: center;
}

.board-filter-secondary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-divider);
}

.board-filter-hint {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.pms-primary-button {
    height: 40px;
    padding: 0 20px !important;
    border-radius: 12px !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-transform: none !important;
    background: linear-gradient(135deg, #8B5CF6, #A78BFA) !important;
    box-shadow: 0 10px 24px rgba(139, 92, 246, .28);
    white-space: nowrap;
}

    .pms-primary-button:hover {
        box-shadow: 0 14px 30px rgba(139, 92, 246, .36);
    }

.pms-secondary-button {
    height: 40px;
    padding: 0 18px !important;
    border-radius: 12px !important;
    color: #7C3AED !important;
    font-weight: 700 !important;
    text-transform: none !important;
    background: rgba(139, 92, 246, .08) !important;
    white-space: nowrap;
}

    .pms-secondary-button:hover {
        background: rgba(139, 92, 246, .14) !important;
    }

.pms-outline-button {
    height: 42px;
    padding: 0 16px !important;
    border-radius: 12px !important;
    color: #7C3AED !important;
    border-color: rgba(139, 92, 246, .30) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    background: var(--mud-palette-surface) !important;
    white-space: nowrap;
}

    .pms-outline-button:hover {
        background: rgba(139, 92, 246, .08) !important;
    }

.board-toolbar-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}

.board-toolbar-nav,
.board-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.board-period {
    min-width: 220px;
    padding: 8px 14px;
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-divider);
    text-align: center;
}

    .board-period .mud-typography-caption {
        color: var(--mud-palette-text-secondary);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .board-period .mud-typography-subtitle1 {
        color: var(--mud-palette-text-primary);
        font-weight: 900;
        line-height: 1.2;
    }

.room-search {
    width: 170px;
}

.board-legend-card {
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .04);
}

.board-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

    .board-legend span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--mud-palette-text-secondary);
        font-weight: 700;
        font-size: 13px;
    }

.legend {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 5px;
}

.booking-board-scroll {
    max-height: calc(100vh - 360px);
    overflow: auto;
    border-radius: 18px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.booking-board-table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .82rem;
    min-width: 100%;
    table-layout: fixed;
    color: var(--mud-palette-text-secondary);
}

    .booking-board-table th,
    .booking-board-table td {
        min-width: 88px;
        height: 44px;
        padding: 7px;
        text-align: center;
        border-bottom: 1px solid var(--mud-palette-divider);
        border-right: 1px solid var(--mud-palette-divider);
    }

    .booking-board-table thead th {
        position: sticky;
        top: 0;
        z-index: 3;
        color: var(--mud-palette-text-primary);
        font-weight: 900;
        background: var(--mud-palette-surface);
        backdrop-filter: blur(10px);
    }

    .booking-board-table thead tr:nth-child(2) th {
        top: 44px;
    }

    .booking-board-table .resource-column {
        position: sticky;
        left: 0;
        min-width: 160px;
        width: 160px;
        text-align: left;
        z-index: 2;
        font-weight: 800;
    }

    .booking-board-table .location-column {
        position: sticky;
        left: 160px;
        min-width: 190px;
        width: 190px;
        text-align: left;
        z-index: 2;
        color: var(--mud-palette-text-secondary);
        font-weight: 600;
    }

    .booking-board-table thead .resource-column,
    .booking-board-table thead .location-column {
        z-index: 5;
        background: linear-gradient(135deg, rgba(139, 92, 246, .10), rgba(167, 139, 250, .06));
    }

    .booking-board-table tbody .resource-column,
    .booking-board-table tbody .location-column {
        background: var(--mud-palette-surface);
        backdrop-filter: blur(8px);
    }

    .booking-board-table tbody tr.row-alt .resource-column,
    .booking-board-table tbody tr.row-alt .location-column {
        background: var(--mud-palette-background-gray) !important;
    }

    .booking-board-table .day-column {
        min-width: 88px;
        width: 88px;
    }

.day-column span,
.day-column small {
    display: block;
}

.day-column span {
    font-weight: 900;
}

.day-column small {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.day-column.weekend span,
.day-column.weekend small {
    color: #DC2626;
}

.day-column.today-column {
    background: rgba(124, 58, 237, .14) !important;
}

.day-column.blocked-column {
    background: repeating-linear-gradient(
        45deg,
        rgba(239, 68, 68, .04),
        rgba(239, 68, 68, .04) 10px,
        rgba(239, 68, 68, .08) 10px,
        rgba(239, 68, 68, .08) 20px
    ) !important;
}

    .day-column.today-column span,
    .day-column.today-column small {
        color: #7C3AED;
    }

    .day-column.blocked-column span,
    .day-column.blocked-column small {
        color: #DC2626;
    }

.month-header th {
    position: sticky;
    top: 0;
    z-index: 4;
    text-align: center;
    font-weight: 900;
    color: var(--mud-palette-text-primary);
    background: linear-gradient(135deg, rgba(139, 92, 246, .10), rgba(167, 139, 250, .06));
}

.room-row {
    font-weight: 700;
}

.bed-row .resource-name {
    padding-left: 18px;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.resource-name {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
}

.board-cell {
    position: relative;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

    .board-cell.clickable {
        cursor: pointer;
    }

        .board-cell.clickable:hover {
            filter: brightness(.97);
            box-shadow: inset 0 0 0 2px rgba(139, 92, 246, .18);
        }

        .board-cell.clickable.available::after {
            content: "+";
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 900;
            line-height: 1;
            color: #059669;
            background: rgba(16, 185, 129, .18);
            opacity: 0;
            pointer-events: none;
            transition: opacity .15s ease;
        }

        .board-cell.clickable.available:hover::after {
            opacity: 1;
        }

    .board-cell.weekend {
        background-image: linear-gradient(rgba(100, 116, 139, .07), rgba(100, 116, 139, .07));
    }

    .board-cell.today-column,
    .reservation-bar-cell.today-column {
        box-shadow: inset 2px 0 0 0 rgba(124, 58, 237, .45), inset -2px 0 0 0 rgba(124, 58, 237, .45);
    }

    .board-cell.blocked-column {
        background-image: repeating-linear-gradient(
            45deg,
            rgba(239, 68, 68, .04),
            rgba(239, 68, 68, .04) 10px,
            rgba(239, 68, 68, .08) 10px,
            rgba(239, 68, 68, .08) 20px
        ) !important;
    }

    .board-cell.drag-over-cell {
        background-color: rgba(124, 58, 237, .16) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 2px #7C3AED !important;
    }

    .board-cell.selected-cell {
        background-color: rgba(124, 58, 237, .16) !important;
        background-image: none !important;
        box-shadow: inset 0 0 0 2px #7C3AED !important;
    }

        .board-cell.selected-cell::after {
            content: "✓" !important;
            opacity: 1 !important;
            font-size: 18px !important;
            background: transparent !important;
            color: #7C3AED !important;
        }

.available {
    background: rgba(16, 185, 129, .14);
}

.partial {
    background: rgba(245, 158, 11, .14);
}

.occupied {
    background: rgba(239, 68, 68, .14);
}

.unavailable {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.reservation-bar-cell {
    position: relative;
    padding: 0 !important;
    background: rgba(16, 185, 129, .14);
}

.reservation-bar {
    position: absolute;
    inset: 4px 3px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: grab;
    color: #FFFFFF;
    text-align: left;
    font-weight: 800;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18), inset 0 0 0 1px rgba(255, 255, 255, .18);
    transition: filter .16s ease, box-shadow .16s ease;
}

    .reservation-bar:hover,
    .reservation-bar.active {
        filter: brightness(.96);
        box-shadow: 0 6px 14px rgba(15, 23, 42, .24), inset 0 0 0 1px rgba(255, 255, 255, .28);
    }

    /* The bar being dragged: soften it so the moving ghost is the focus. */
    .reservation-bar.bb-dragging {
        opacity: .35;
        cursor: grabbing;
    }

    .reservation-bar .mud-icon-root {
        margin-right: 4px;
        vertical-align: middle;
    }

.reservation-bar-text {
    display: inline-block;
    max-width: calc(100% - 30px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: ew-resize;
    background: rgba(255, 255, 255, .20);
}

/* Cleaning marker next to the room name — shown only while the room is manually set to the
   Cleaning status by staff. */
.resource-name-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.resource-cleaning-icon {
    flex: none;
    color: #F59E0B;
}

/* Right-click status menu on a resource: let the menu fill the resource cell so the whole name is
   the right-click target, and give the header a muted caption look. */
.bb-resource-menu { width: 100%; }
.bb-resource-menu .mud-menu-activator { width: 100%; cursor: context-menu; }
.bb-resource-menu-title {
    padding: 4px 16px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mud-palette-text-secondary);
    opacity: .8;
}

/* ── Overlay board (flex/grid layout; reservations are absolute overlays over a day grid) ── */
.bb-board {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 14px;
    background: var(--mud-palette-surface);
}

.bb-inner {
    min-width: calc(460px + var(--bb-days) * 88px);
}

.bb-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 0 var(--mud-palette-divider);
}

.bb-head-row,
.bb-row {
    display: grid;
    grid-template-columns: 220px 170px 70px 1fr;
    align-items: stretch;
}

.bb-row {
    border-top: 1px solid var(--mud-palette-divider);
}

    .bb-row.row-alt {
        background: rgba(100, 116, 139, .035);
    }

    /* Child bed rows sit under an aggregate room row — indent the "Место N" label. */
    .bb-row.is-bed .resource-name {
        padding-left: 22px;
        font-size: .8rem;
        color: var(--mud-palette-text-secondary);
    }

.bb-cell-resource,
.bb-cell-location,
.bb-cell-places {
    position: sticky;
    z-index: 4;
    display: flex;
    align-items: center;
    padding: 6px 14px;
    border-right: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    min-height: 44px;
}

.bb-row.row-alt .bb-cell-resource,
.bb-row.row-alt .bb-cell-location,
.bb-row.row-alt .bb-cell-places {
    background: var(--mud-palette-surface);
}

.bb-cell-resource { left: 0; }
.bb-cell-location { left: 220px; color: var(--mud-palette-text-secondary); font-size: .82rem; }
.bb-cell-places { left: 390px; color: var(--mud-palette-text-secondary); font-size: .82rem; justify-content: center; padding: 6px; }

.bb-corner { font-weight: 800; color: var(--mud-palette-text-secondary); }

.bb-days-grid {
    display: grid;
    grid-template-columns: repeat(var(--bb-days), minmax(88px, 1fr));
    height: 100%;
}

.bb-month {
    text-align: center;
    font-weight: 800;
    padding: 8px 0;
    border-right: 1px solid var(--mud-palette-divider);
    white-space: nowrap;
}

.bb-daycol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    border-right: 1px solid var(--mud-palette-divider);
    font-size: .8rem;
}

    .bb-daycol span { font-weight: 800; color: #ef4444; }
    .bb-daycol small { color: var(--mud-palette-text-secondary); }
    .bb-daycol.weekend { background: rgba(100, 116, 139, .06); }
    .bb-daycol.today-column { background: rgba(124, 58, 237, .12); box-shadow: inset 2px 0 0 #7C3AED; }
    .bb-daycol.blocked-column,
    .bb-daycol.blocked-am,
    .bb-daycol.blocked-pm {
        background-image: repeating-linear-gradient(45deg, rgba(239, 68, 68, .12) 0 6px, transparent 6px 12px);
        background-repeat: no-repeat;
    }
    /* Boundary days of a stream (noon→noon) are only half-shaded: the stream's end (departure) day
       keeps its afternoon free, its start day keeps its morning free. */
    .bb-daycol.blocked-am { background-size: 50% 100%; background-position: left center; }
    .bb-daycol.blocked-pm { background-size: 50% 100%; background-position: right center; }

.bb-days {
    position: relative;
    min-height: 44px;
}

.bb-daybg {
    border-right: 1px solid var(--mud-palette-divider);
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 2px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .bb-daybg.available { background: rgba(16, 185, 129, .10); }
    /* Weekends: a clear solid tint instead of a hatch (the hatch was confused with the blocked
       period). Placed after .available but before .occupied so free weekends stand out while a
       busy day still reads as occupied. */
    .bb-daybg.weekend {
        background: rgb(255 255 255 / 18%);
    }
    .bb-daybg.occupied { background: rgba(239, 68, 68, .14); }
    .bb-daybg.partial { background: rgba(245, 158, 11, .14); }
    .bb-daybg.unavailable { background: var(--mud-palette-background-gray); }
    .bb-daybg.blocked-column,
    .bb-daybg.blocked-am,
    .bb-daybg.blocked-pm {
        background-image: repeating-linear-gradient(45deg, rgba(239, 68, 68, .10) 0 6px, transparent 6px 12px);
        background-repeat: no-repeat;
    }
    /* Half-shade the two boundary days so the free half (afternoon of the departure day / morning of
       the arrival day) reads as bookable, matching the noon→noon turnover the bars already show. */
    .bb-daybg.blocked-am { background-size: 50% 100%; background-position: left center; }
    .bb-daybg.blocked-pm { background-size: 50% 100%; background-position: right center; }
    /* "Today" reads as a solid vertical accent line down the whole board (a bold left edge on every
       today cell stacks into one continuous line) plus a faint column tint. */
    .bb-daybg.today-column {
        box-shadow: inset 2px 0 0 #7C3AED;
        background: rgba(124, 58, 237, .06);
    }
    .bb-daybg.clickable { cursor: pointer; }
    .bb-daybg.clickable:hover {
        background: rgba(124, 58, 237, .10);
        box-shadow: inset 0 0 0 2px rgba(124, 58, 237, .20);
    }
    .bb-daybg.selected-cell {
        background: rgba(124, 58, 237, .18);
        box-shadow: inset 0 0 0 2px #7C3AED;
    }

.bb-bar {
    position: absolute;
    top: 4px;
    height: calc(100% - 8px);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border-radius: 10px;
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
    font-weight: 800;
    font-size: .82rem;
    cursor: grab;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .18), inset 0 0 0 1px rgba(255, 255, 255, .18);
    transition: filter .16s ease, box-shadow .16s ease;
}

    .bb-bar:hover,
    .bb-bar.active {
        filter: brightness(.96);
        box-shadow: 0 6px 14px rgba(15, 23, 42, .24), inset 0 0 0 1px rgba(255, 255, 255, .28);
        z-index: 3;
    }

    .bb-bar.bb-dragging {
        opacity: .35;
        cursor: grabbing;
        pointer-events: none;
    }

    /* A whole-room booking is drawn in every "Место" row; these copies fuse into one seamless
       vertical block — fill the whole row height (+1px to cover the row divider), drop the drop
       shadow and internal rounding; only the group's top/bottom get rounded corners. */
    .bb-bar.bb-fused {
        top: 0;
        height: calc(100% + 1px);
        border-radius: 0;
        box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2), inset -1px 0 0 rgba(255, 255, 255, .2);
    }

        .bb-bar.bb-fused.fuse-top {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2), inset -1px 0 0 rgba(255, 255, 255, .2);
        }

        .bb-bar.bb-fused.fuse-bottom {
            height: 100%;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

    /* Aggregate summary strip — solid half-day bar, purely informational (not draggable). */
    .bb-bar.bb-bar-summary {
        cursor: default;
        pointer-events: none;
        font-weight: 700;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    }

.bb-bar-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.bb-bar .mud-icon-root { flex: none; }

/* ── Drag & resize (pointer engine in bookingBoard.js) ───────────────────────────── */

/* Highlight the row the pointer is currently over as a valid drop target. */
.bb-row.bb-drop-target .bb-days {
    box-shadow: inset 0 0 0 2px rgba(124, 58, 237, .45);
    background-color: rgba(124, 58, 237, .06);
}

/* While a drag is in progress: kill text selection and show the grabbing cursor everywhere. */
body.bb-drag-active {
    cursor: grabbing !important;
    user-select: none;
    -webkit-user-select: none;
}

/* The live placement preview that follows the pointer, snapped to day columns. */
.bb-ghost {
    position: fixed;
    z-index: 1500;
    pointer-events: none;
    border-radius: 10px;
    background: rgba(124, 58, 237, .28);
    border: 2px solid #7C3AED;
    box-shadow: 0 8px 20px rgba(124, 58, 237, .30);
    transition: none;
}

    .bb-ghost.bb-ghost-resize {
        background: rgba(37, 99, 235, .26);
        border-color: #2563EB;
        box-shadow: 0 8px 20px rgba(37, 99, 235, .30);
    }

    /* Placement not allowed (stream booking dragged outside its period) — the drop is ignored. */
    .bb-ghost.bb-ghost-invalid {
        background: rgba(239, 68, 68, .26) !important;
        border-color: #ef4444 !important;
        box-shadow: 0 8px 20px rgba(239, 68, 68, .32) !important;
        cursor: not-allowed;
    }

    /* Optimistic placeholder: the drop is committed and we're waiting for the board to re-render.
       Keep the exact same look the ghost had mid-drag (no translucent→solid jump at release), so the
       placeholder simply freezes in place — no flicker. */

/* A bar whose move is committed optimistically stays hidden until the reloaded board re-renders it
   in its new spot — prevents the brief snap-back to the old position during the round-trip. */
.bb-bar.bb-pending-hidden {
    display: none !important;
}

.reservation-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: transparent;
}

.reservation-popover {
    position: fixed;
    z-index: 1201;
    transform: translate(-50%, 14px);
    width: 280px;
    max-width: calc(100vw - 24px);
    padding: 14px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
    color: var(--mud-palette-text-primary);
}

.reservation-popover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.reservation-popover-number {
    font-weight: 900;
    font-size: 15px;
}

.reservation-popover-guest {
    margin-top: 2px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
}

.reservation-popover-guests {
    color: var(--mud-palette-text-secondary);
}

.reservation-popover-status {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 8px;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 11px;
    white-space: nowrap;
}

.reservation-popover-dates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    font-weight: 700;
    font-size: 13px;
}

    .reservation-popover-dates > div {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.reservation-popover-arrow {
    color: var(--mud-palette-text-secondary);
}

.reservation-popover-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

    .reservation-popover-balance strong {
        color: var(--mud-palette-text-primary);
        font-weight: 900;
    }

.reservation-popover-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-divider);
}

.reservation-popover-link,
.reservation-popover-action,
.reservation-popover-action-danger {
    padding: 0 10px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    min-width: 0;
}

.reservation-popover-link {
    color: #7C3AED !important;
    background: rgba(139, 92, 246, .08) !important;
}

.reservation-popover-action {
    color: var(--mud-palette-text-primary) !important;
    background: var(--mud-palette-background-gray) !important;
}

.reservation-popover-action-danger {
    color: #DC2626 !important;
    background: rgba(220, 38, 38, .08) !important;
}

@@media (max-width: 1100px) {
    .board-toolbar-card {
        flex-direction: column;
        align-items: stretch;
    }

    .board-toolbar-nav,
    .board-toolbar-actions {
        justify-content: space-between;
    }

    .room-search {
        flex: 1;
        min-width: 180px;
    }
}

@@media (max-width: 700px) {
    .pms-page-header {
        padding: 18px;
        align-items: flex-start;
        flex-direction: column;
    }

    .pms-page-header-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    .pms-filter-card {
        padding: 14px;
    }

    .board-filter-secondary {
        flex-direction: column;
        align-items: stretch;
    }

    .board-toolbar-nav,
    .board-toolbar-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .board-period {
        min-width: 0;
        width: 100%;
    }

    .pms-primary-button,
    .pms-secondary-button,
    .pms-outline-button {
        width: 100%;
    }

    .room-search {
        width: 100%;
    }

    .booking-board-scroll {
        max-height: calc(100vh - 430px);
    }
}

/* ── Right-side filter drawer ─────────────────────────────────────────────────────
   z-index sits below MudBlazor's popover layer (1200) so MudSelect dropdowns inside
   the panel still render on top of it, but above the nav drawer/appbar (1100). */
.board-filter-primary-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.board-filter-drawer {
    position: fixed;
    inset: 0;
    z-index: 1150;
    visibility: hidden;
    pointer-events: none;
}

    .board-filter-drawer.open {
        visibility: visible;
        pointer-events: auto;
    }

.board-filter-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    transition: opacity .25s ease;
}

.board-filter-drawer.open .board-filter-drawer-backdrop {
    opacity: 1;
}

.board-filter-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 380px;
    max-width: 92vw;
    background: var(--mud-palette-surface, #fff);
    box-shadow: -12px 0 32px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.board-filter-drawer.open .board-filter-drawer-panel {
    transform: translateX(0);
}

.board-filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 12px 14px 18px;
    background: rgba(139, 92, 246, .08);
    border-bottom: 1px solid rgba(139, 92, 246, .12);
    margin-top: 65px;
}

.board-filter-drawer-body {
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.board-filter-drawer-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--mud-palette-divider);
}