/* Dashboard Container - Full Width Override */
.dashboard-container {
    width: 100% !important;
    max-width: none !important;
    padding: 0px !important;
    background: white;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0px;
    display: flex;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Aggressive WordPress theme overrides.
   Scoped to pages that really render the dashboard so the stylesheet can never
   restyle a builder/editor document that happens to embed it.
   `hippo-has-dashboard` is added by PHP; `:has()` also covers templates that
   PHP cannot detect (theme builder layouts, widgets, reusable blocks).
   Never target `html` here: this stylesheet is also loaded on pages that only
   embed the widget, and an unscoped `html` rule leaked into the whole site. */
body.hippo-has-dashboard,
body:has(.dashboard-container),
body.hippo-has-dashboard :is(.wp-site-blocks, .wp-block-group, .entry-content, .site-content, .content-area, .site-main, .hfeed, .site),
body:has(.dashboard-container) :is(.wp-site-blocks, .wp-block-group, .entry-content, .site-content, .content-area, .site-main, .hfeed, .site) {
    max-width: none !important;
    width: 100% !important;
}

/* Layout wrappers stay full width. Descendants keep their own sizing so
   day/date columns, nav arrows, and sticky headers can work. */
.dashboard-container,
.view-container,
.main-card,
.lodge-availability-calendar-container,
.calendar-card,
.calendar-main,
.calendar-view-container,
.calendar-grid-wrapper {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* Override WordPress theme container constraints */
.dashboard-container,
.dashboard-container * {
    box-sizing: border-box !important;
}

/* Ensure parent containers don't constrain width */
.dashboard-container {
    clear: both !important;
}

/* Additional WordPress theme overrides */

/* Nav arrows: match the public availability calendar */
.nav-arrow {
    background-color: #f0f0f0 !important;
    border: 1px solid #ccc !important;
    padding: 5px 8px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    border-radius: 3px !important;
    color: #333 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    width: auto !important;
    min-width: 28px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
.nav-arrow:hover {
    background-color: #e0e0e0 !important;
    color: #000 !important;
}
.nav-arrow:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #f5f5f5 !important;
    color: #999 !important;
}
/* Calendar Navigation Layout Fixes */
.calendar-navigation {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}
.calendar-navigation > * {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.calendar-navigation .room-filter {
    margin-left: auto !important;
}
.calendar-navigation .current-month-year {
    white-space: nowrap;
    width: auto !important;
    flex: 0 0 auto !important;
    font-size: 14px !important;
    font-weight: bold !important;
}
body .dashboard-container,
.wp-site-blocks .dashboard-container,
.wp-block-group .dashboard-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* View Container - Full Width */
.view-container {
    width: 100%;
    padding: 0;
}

/* Override WordPress theme content width constraints */
.dashboard-container .view-container,
.dashboard-container .main-card,
.dashboard-container .table-container,
.dashboard-container .calendar-view-container,
.dashboard-container .calendar-grid-wrapper,
.dashboard-container .calendar-table {
    max-width: none !important;
    width: 100% !important;
}

/* Force full width override for WordPress themes - Calendar Specific */
.calendar-view-container,
.calendar-table {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Additional WordPress theme overrides for calendar */
body .calendar-view-container,
.wp-site-blocks .calendar-view-container,
.wp-block-group .calendar-view-container,
body .calendar-grid-wrapper,
.wp-site-blocks .calendar-grid-wrapper,
.wp-block-group .calendar-grid-wrapper,
.entry-content .calendar-view-container,
.site-content .calendar-view-container,
.content-area .calendar-view-container,
.entry-content .calendar-grid-wrapper,
.site-content .calendar-grid-wrapper,
.content-area .calendar-grid-wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Override any theme content width constraints */
.entry-content,
.site-content,
.content-area {
    max-width: none !important;
    width: 100% !important;
}

/* Ensure calendar container hierarchy uses full width */
.dashboard-container .view-container .main-card .calendar-view-container,
.dashboard-container .view-container .main-card .calendar-view-container .calendar-grid-wrapper,
.dashboard-container .view-container .main-card .calendar-view-container .calendar-grid-wrapper .calendar-table {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}



/* Back button */
.btn {
    padding: 6px 22px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 500;
    transition: background-color 0.2s ease;
    margin-right: 10px;
}

.btn-secondary {
    background: #f8f9fa;
    color: #525062;
    border: 1px solid #dfe3e8;
}

.btn-secondary:hover {
    background: #e9ecef;
}

/* Textarea styling */
textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* Header Section */
.header-section {
    align-self: stretch;
    padding: 10px 20px;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    display: inline-flex;
}

.header-content {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    display: inline-flex;
}

.header-title-wrapper {
    align-self: stretch;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex;
}

.header-title {
    color: #3F3F46;
    font-size: 11px;
    font-family: Roboto;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 18px;
    letter-spacing: 1px;
    word-wrap: break-word;
}

.header-subtitle-wrapper {
    align-self: stretch;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex;
}

.header-subtitle {
    color: #71717A;
    font-size: 13px;
    font-family: Roboto;
    font-weight: 400;
    line-height: 22px;
    word-wrap: break-word;
}

/* Main Card */
.main-card {
    width: 100% !important;
    max-width: none !important;
    padding: 20px 15px;
    background: white;
    overflow: visible;
    border-radius: 3px;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    display: flex;
    box-sizing: border-box;
}

/* Card Header */
.card-header {
    align-self: stretch;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
}

.card-header-left {
    flex: 1 1 0;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    display: flex;
}

.card-title-section {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    display: inline-flex;
}

.card-title-wrapper {
    align-self: stretch;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex;
}

.card-title {
    color: #3F3F46;
    font-size: 11px;
    font-family: Roboto;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 18px;
    letter-spacing: 1px;
    word-wrap: break-word;
}

.card-subtitle-wrapper {
    align-self: stretch;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex;
}

.card-subtitle {
    color: #71717A;
    font-size: 13px;
    font-family: Roboto;
    font-weight: 400;
    line-height: 22px;
    word-wrap: break-word;
}

.card-header-right {
    flex: 1 1 0;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    display: flex;
}

.add-booking-btn {
    height: 27px;
    padding: 6px 22px;
    background: #525062;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: flex;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.add-booking-btn:hover {
    background: #424153;
}

.add-booking-text {
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 12px;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 500;
    word-wrap: break-word;
}

.actions-icon {
    width: 25.07px;
    height: 25.07px;
    position: relative;
}

.dot-icon {
    width: 2.09px;
    height: 2.09px;
    position: absolute;
    top: 11.49px;
    outline: 2.09px #525062 solid;
    outline-offset: -1.04px;
}

.dot-1 { left: 18.81px; width: 1.04px; }
.dot-2 { left: 12.54px; width: 1.04px; }
.dot-3 { left: 5.22px; }

.invisible-overlay {
    width: 25.07px;
    height: 25.07px;
    left: 0px;
    top: 0px;
    position: absolute;
    opacity: 0;
}

/* Pagination Footer */
.pagination-footer {
    align-self: stretch;
    padding: 5px 15px;
    background: white;
    outline: 1px #E2E8F0 solid;
    outline-offset: -1px;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    display: flex;
}

.pagination-info {
    display: none; /* Hide this as we use pagination-text now */
    flex: 1 1 0;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    display: flex;
}

.pagination-text {
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #1E1D26;
    font-size: 12px;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.10px;
    word-wrap: break-word;
}

.pagination-controls {
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: flex;
}

.pagination-numbers {
    display: flex;
    gap: 8px;
}

.csv-btn {
    padding: 5px 10px;
    background: white;
    border-radius: 4px;
    outline: 1px #DFE3E8 solid;
    outline-offset: -1px;
    border: none;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex;
}

.csv-btn:hover {
    background: #f0f4ff;
}

.csv-btn-content {
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex;
}

.csv-btn-text {
    text-align: center;
    color: #878788;
    font-size: 14px;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 600;
    line-height: 20px;
    word-wrap: break-word;
}

/* Body defaults.
   Cosmetic only: the plugin must not set page layout. These properties used to
   include `display: flex; justify-content: center`, which turned the dashboard
   page into a centred content-sized column and also broke the Elementor editor
   chrome (the editor renders the document inside wp-admin). Page width and
   spacing belong to the theme and the Elementor container settings.
   Scoped to dashboard pages; `hippo-has-dashboard` is added by PHP and the
   `:has()` fallback covers templates PHP cannot detect.
   The page background uses the theme token so a dark-mode site keeps a dark
   page, and the module font is scoped to the dashboard instead of <body> —
   setting the font on body also restyled the theme header and footer. */
body.hippo-has-dashboard,
body:has(.dashboard-container) {
    background: var(--cc-background, #f4f4f4);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.hippo-has-dashboard .dashboard-container,
body:has(.dashboard-container) .dashboard-container {
    font-family: var(--cc-font-body, 'Roboto', Arial, sans-serif);
}

/* Interactive table row (now for <tr> elements) */
.table-row-interactive {
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
    position: relative; /* Needed for pseudo-elements */
}

.table-row-interactive:hover {
    background: #f0f4ff !important;
}

.table-row-interactive:active {
    transform: translateY(1px);
}

.table-row-interactive:focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: -2px;
}

.table-row-interactive::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: 0 0 0 0 rgba(37,99,235,0.4);
    border-radius: 2px;
    pointer-events: none;
    transition: box-shadow 0.25s ease;
}

.table-row-interactive:hover::after {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.04);
}

.table-row-interactive[data-active="true"] {
    background: #e0ecff !important;
}

.table-row-interactive[data-active="true"]::after {
    box-shadow: 0 0 0 2px #2563eb inset;
}

/* Utility: force Montserrat headings to still work where explicitly declared */
.header-title, .header-subtitle, .card-title, .card-subtitle { font-family: 'Roboto', Arial, sans-serif; }

/* HTML Table with Vertical Dividers */
.table-container {
    align-self: stretch;
    overflow-x: auto;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e2e8f0;
    font-family: 'Roboto', Arial, sans-serif;
}

.table-header {
    background: #f9f9f9;
}

.table-header-cell {
    padding: 16px 10px; /* Increased padding for better spacing */
    color: #222222;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.10px;
    text-align: left;
    border-right: 1px solid #D1D5DB;
    border-bottom: 1px solid #e2e8f0;
}

.table-header-cell-last {
    border-right: none;
}

.table-row {
    background: white;
}

.table-row:hover {
    background: #F7F7F7; /* Subtle hover for non-interactive rows too */
}

.table-row-alternate {
    background: #FAFAFA;
}

.table-cell {
    padding: 13px 10px;
    border-top: 1px solid #e2e8f0;
    border-right: 1px solid #D1D5DB;
    color: #1e1d26;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    text-align: left;
    vertical-align: middle; /* Align content vertically */
}

.table-cell-last {
    border-right: 0;
}

/* Actions column styling */
.actions-icon {
    width: 25.07px;
    height: 25.07px;
    position: relative;
    cursor: pointer;
}

.actions-icon .dot-icon {
    width: 2.09px;
    height: 2.09px;
    position: absolute;
    top: 11.49px;
    outline: 2.09px #525062 solid;
    outline-offset: -1.04px;
}

.actions-icon .dot-1 {
    left: 18.81px; 
    width: 1.04px; 
}

.actions-icon .dot-2 {
    left: 12.54px; 
    width: 1.04px; 
}

.actions-icon .dot-3 {
    left: 5.22px; 
}

.actions-icon .invisible-overlay {
    width: 25.07px;
    height: 25.07px;
    left: 0px;
    top: 0px;
    position: absolute;
    opacity: 0;
}

/* Pagination button styling updates */
.pagination-btn {
    width: 32px;
    height: 32px;
    position: relative;
    background: white;
    border-radius: 4px;
    outline: 1px #dfe3e8 solid;
    outline-offset: -1px;
    border: none;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #878788;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn:not(:disabled):hover {
    background: #f0f4ff;
    border-color: #a5b4fc;
}

.pagination-btn svg {
    color: #000000;
}

.pagination-btn:disabled svg {
    color: #666666;
}

.pagination-btn-active {
    background: #525062 !important;
    color: white !important;
    border-color: #525062 !important;
    overflow: hidden;
}

.pagination-btn-active:hover {
    background: #424153 !important;
}

/* --- Modal Styles --- */

/* Modal Overlay */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: rgba(9, 30, 66, 0.54) !important;
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    box-sizing: border-box !important;
    transform: none !important;
    max-width: none !important;
    max-height: none !important;
}

.modal-overlay.visible {
    display: flex !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* General Modal Content Box */
.modal-content {
    background-color: #ffffff !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31) !important;
    transform: translateY(-20px);
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    max-height: 90vh !important;
    overflow-y: auto;
    position: relative !important;
    margin: auto !important;
    box-sizing: border-box !important;
}

.modal-overlay.visible .modal-content {
    transform: translateY(0) !important;
}

/* Specific styles for the Edit Booking Modal */
.edit-booking-modal {
    width: 95vw !important;
    max-width: 1200px !important;
    min-width: 800px !important;
    background: #FAFAFA !important;
    margin: 0 auto !important;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px; /* Increased padding to match body */
    height: 50px; /* Slightly increased height */
    background: rgba(119, 177, 188, 0.32);
    flex-shrink: 0;
}

.modal-title {
    color: black;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    margin: 0;
}

.modal-close-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 43px !important;
    height: 43px !important;
    background: none !important;
    border: none !important;
    font-size: 28px !important;
    line-height: 1 !important;
    color: #424242 !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

.modal-close-btn:hover {
    background-color: rgba(0,0,0,0.1) !important;
}

.modal-body {
    padding: 20px 30px; /* Increased padding for better spacing */
    overflow-y: auto;
}

.form-row {
    display: flex;
    gap: 30px; /* Increased gap between form elements */
    width: 100%;
}

.form-row .form-group {
    flex: 1 1 0;
}

.form-group {
    margin-bottom: 20px; /* Increased bottom margin for better spacing */
}

.form-label {
    display: block;
    margin-bottom: 8px; /* Increased margin */
    color: black;
    font-size: 14px; /* Increased font size */
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 12px 15px; /* Increased padding for better spacing */
    background: white;
    border-radius: 3px;
    border: 1px solid #D2D2D2;
    box-sizing: border-box; /* Important */
    font-family: 'Roboto', sans-serif;
    font-size: 14px; /* Increased font size */
    color: #333;
}

.form-control::placeholder {
    color: rgba(0, 0, 0, 0.40);
}

.form-hint {
    margin: -8px 0 16px;
    color: rgba(0, 0, 0, 0.55);
    font-size: 13px;
    line-height: 1.4;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    padding: 0 14px 12px;
    flex-shrink: 0;
}

.btn {
    height: 31px;
    padding: 7px 12px;
    border-radius: 2px;
    border: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: filter 0.2s ease;
}

.btn:hover {
    filter: brightness(0.9);
}

.btn-secondary {
    background: #E7EAEE;
    color: #424242;
    min-width: 97px;
}

.btn-primary {
    background: #0C768A;
    color: white;
}

/* WordPress Theme Override Styles - Force Full Width */
/* Override common WordPress theme containers */
.site-main .dashboard-container,
.content-area .dashboard-container,
.entry-content .dashboard-container,
.post-content .dashboard-container,
.page-content .dashboard-container,
.site-content .dashboard-container,
.content .dashboard-container,
.main .dashboard-container,
.primary .dashboard-container,
#content .dashboard-container,
#main .dashboard-container,
#primary .dashboard-container,
.container .dashboard-container,
.wrap .dashboard-container,
.site-inner .dashboard-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Ensure the parent containers of the dashboard don't constrain it */
.dashboard-container {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Force table to use full available width */
.dashboard-container .data-table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
}

/* Define column widths for proper spacing */
.data-table th:nth-child(1),
.data-table td:nth-child(1) {
    width: 10% !important; /* Number column */
    text-align: center !important;
}

.data-table th:nth-child(2),
.data-table td:nth-child(2) {
    width: 35% !important; /* Name column */
}

.data-table th:nth-child(3),
.data-table td:nth-child(3) {
    width: 15% !important; /* Guests column */
}

.data-table th:nth-child(4),
.data-table td:nth-child(4) {
    width: 15% !important; /* Rooms column */
}

.data-table th:nth-child(5),
.data-table td:nth-child(5) {
    width: 25% !important; /* Price column */
}

/* Styling for number column */
.table-cell-number {
    font-weight: 600 !important;
    color: #6B7280 !important;
    font-size: 13px !important;
}

/* Ensure proper spacing on smaller screens */
@media (max-width: 768px) {
    .dashboard-container {
        padding: 10px 15px !important;
    }
    
    .view-container {
        padding: 0;
    }
    
    .header-section {
        padding: 10px 15px;
    }
    
    .site-main .dashboard-container,
    .content-area .dashboard-container,
    .entry-content .dashboard-container,
    .post-content .dashboard-container,
    .page-content .dashboard-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}
/* Sortable table styles (converted from provided SCSS) */

/* Force inline legacy fonts to Roboto */
[style*="font-family: Montserrat"],
[style*="font-family: 'Montserrat'"],
[style*="font-family: DM Sans"],
[style*="font-family: 'DM Sans'"] {
    font-family: 'Roboto', Arial, sans-serif !important;
}

/* WordPress Admin Modal Override (dashboard pages only) */
body.hippo-has-dashboard .modal-overlay.visible,
body:has(.dashboard-container) .modal-overlay.visible {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
}

/* Additional modal full-screen overrides for WordPress themes (dashboard pages only) */
body.hippo-has-dashboard .modal-overlay,
body:has(.dashboard-container) .modal-overlay,
.dashboard-container .modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
}

/* Ensure visible modal always displays full screen (dashboard pages only) */
body.hippo-has-dashboard .modal-overlay.visible,
body:has(.dashboard-container) .modal-overlay.visible,
.dashboard-container .modal-overlay.visible {
    display: flex !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   CALENDAR COMPONENT STYLES
   ======================================== */

/* View Toggle Button */
.view-toggle-btn {
    padding: 8px 16px;
    background: #f8f9fa;
    color: #525062;
    border: 1px solid #dfe3e8;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-left: 10px;
}

.view-toggle-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.view-toggle-btn.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

/* Calendar Controls */
.calendar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    flex-wrap: wrap;
    gap: 15px;
}

/* Calendar View Container - Force Full Width Override */
.calendar-view-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
    position: static !important;
    padding: 0px;
    background: white;
    border-radius: 3px;
    box-sizing: border-box;
}



.calendar-tools {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.date-range-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.date-range-selector label {
    font-size: 12px;
    font-weight: 500;
    color: #525062;
}

.date-input {
    padding: 6px 10px;
    border: 1px solid #dfe3e8;
    border-radius: 3px;
    font-size: 12px;
    font-family: 'Roboto', Arial, sans-serif;
    color: #3F3F46;
}

.date-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}



.room-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.room-filter label {
    font-size: 12px;
    font-weight: 500;
    color: #525062;
}

.room-select {
    padding: 6px 12px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: #333;
    background: #e0e0e0;
    cursor: pointer;
    min-width: 140px;
    height: 30px;
}

/* Bulk Edit Controls */
.bulk-edit-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bulk-mode-btn {
    padding: 6px 16px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    background: #e0e0e0;
    color: #333;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.bulk-mode-btn:hover {
    background: #d0d0d0;
    border-color: #c0c0c0;
}

.bulk-mode-btn.active {
    background: #0d2c54;
    border-color: #0d2c54;
    color: white;
}

.bulk-mode-btn.active:hover {
    background: #0a2242;
}

.clear-all-btn {
    padding: 6px 12px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    background: #e0e0e0;
    color: #333;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.clear-all-btn:hover {
    background: #dc3545;
    color: white;
}

.room-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Calendar Legend */
.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 3px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border: 1px solid #dfe3e8;
    border-radius: 2px;
}

.legend-item span {
    font-size: 12px;
    color: #525062;
    font-weight: 500;
}

/* Status Colors */
.status-available {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
}

.status-provisional {
    background-color: #ffff44 !important;
    border: 1px solid #ddd !important;
}

.status-provisionally-reserved {
    background-color: #ffff44 !important;
    border: 1px solid #ddd !important;
}

.status-not-available {
    background-color: #ff4444 !important;
    border: 1px solid #ddd !important;
}

.status-selected {
    background-color: #cce5ff !important;
    border-color: #007bff !important;
}

/* Calendar Grid */
.calendar-grid-wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #dcdcdc;
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: none;
    max-height: min(72vh, 760px);
    position: relative;
    box-sizing: border-box;
}

.calendar-table {
    width: 100%;
    min-width: 720px;
    max-width: none;
    border-collapse: collapse;
    font-size: 12px;
    font-family: Arial, sans-serif;
    table-layout: fixed;
    box-sizing: border-box;
}

.header-room-col,
.header-chalet-col,
.cell-availability {
    width: auto;
    min-width: 0;
}

.header-date-col,
.cell-day {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
}

.header-date-col:nth-child(2),
.cell-date {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
}

.header-month-col,
.cell-month,
.col-month {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
}

.calendar-header {
    background: #f8f9fa;
    border-bottom: 2px solid #dfe3e8;
}

.header-date-col,
.header-month-col,
.header-room-col,
.header-chalet-col {
    padding: 6px;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 20;
}

.header-date-col {
    background: #6c757d;
    color: #ffffff;
    font-size: 10px;
}

.header-room-col,
.header-chalet-col {
    background: #0d2c54;
    color: #ffffff;
    font-size: 11px;
    cursor: pointer;
}

.header-room-col:hover {
    background: #e9ecef;
}

.header-room-col:last-child {
    border-right: none;
}

/* Calendar Body */
#availability-calendar-body tr {
    border-bottom: 1px solid #dfe3e8;
}

#availability-calendar-body tr:hover {
    background: #f8f9fa;
}

#availability-calendar-body tr.weekend-row {
    background: #f1f3f4;
}

#availability-calendar-body tr.weekend-row:hover {
    background: #e8eaed;
}

.cell-day,
.cell-date {
    padding: 6px;
    text-align: center;
    font-weight: bold;
    color: #333;
    border-right: 1px solid #dcdcdc;
    background: #f2f2f2;
}

.cell-day {
    text-align: left;
    padding-left: 8px;
}

.cell-availability {
    padding: 6px;
    text-align: center;
    border-right: 1px solid #dcdcdc;
    cursor: pointer;
    transition: filter 0.2s ease;
    position: relative;
    height: 30px;
}

.cell-availability:last-child {
    border-right: none;
}

.cell-availability:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.cell-availability.selected {
    border: 2px solid #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    transform: scale(1.02);
    transition: all 0.1s ease;
}

.cell-availability.range-start {
    border-left: 3px solid #007bff !important;
}

.cell-availability.range-end {
    border-right: 3px solid #007bff !important;
}

.cell-availability.range-middle {
    background: linear-gradient(to right, #cce5ff 0%, #e6f3ff 50%, #cce5ff 100%) !important;
}

/* Enhanced visual feedback for drag selection */
.cell-availability:hover {
    cursor: pointer;
    transform: scale(1.01);
    transition: transform 0.1s ease;
}

/* Drag selection cursor in bulk edit mode */
.dashboard-container.bulk-edit-mode .cell-availability {
    cursor: crosshair;
}

/* Prevent text selection during drag */
.dashboard-container.bulk-edit-mode {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Selection Info Panel */
.selection-info-panel {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 300px;
    background: white;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    font-family: 'Roboto', Arial, sans-serif;
}

.selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #dfe3e8;
    background: #f8f9fa;
    border-radius: 6px 6px 0 0;
}

.selection-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #3F3F46;
}

.close-selection-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.close-selection-btn:hover {
    background: #e9ecef;
    color: #495057;
}

.selection-content {
    padding: 20px;
}

.selected-dates,
.selected-rooms {
    margin-bottom: 15px;
}

.selected-dates strong,
.selected-rooms strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #3F3F46;
    margin-bottom: 5px;
}

.selected-dates span,
.selected-rooms span {
    font-size: 12px;
    color: #525062;
}

.selection-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-btn {
    padding: 8px 12px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: center;
}

.available-btn {
    background: #28a745;
    color: white;
}

.available-btn:hover {
    background: #218838;
}

.provisional-btn {
    background: #ffc107;
    color: #212529;
}

.provisional-btn:hover {
    background: #e0a800;
}

.not-available-btn {
    background: #dc3545;
    color: white;
}

.not-available-btn:hover {
    background: #c82333;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .selection-info-panel {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    
    .calendar-controls {
        flex-direction: column;
        align-items: flex-start;
        width: auto;
    }
    
    .calendar-tools {
        justify-content: flex-start;
        width: auto;
    }
    
    .date-range-selector {
        justify-content: flex-start;
        width: auto;
    }
    
    .calendar-legend {
        justify-content: center;
        gap: 10px;
    }
    
    .header-room-col,
    .cell-availability {
        min-width: 60px;
        font-size: 10px;
        padding: 8px 4px;
    }
    
    .current-month-year {
        font-size: 14px;
        width: auto;
    }
    
    /* Enhanced mobile calendar width overrides */
    .calendar-view-container,
    .calendar-grid-wrapper,
    .calendar-table {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .calendar-table {
        min-width: 600px; /* Reduced for mobile */
    }
}

/* Additional responsive breakpoints for calendar width */
@media (max-width: 480px) {
    .calendar-view-container,
    .calendar-grid-wrapper,
    .calendar-table {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    
    .calendar-table {
        min-width: 400px; /* Further reduced for small screens */
        font-size: 10px;
    }
}

/* ========================================
   AVAILABILITY CALENDAR STYLES
   ======================================== */

/* Lodge Availability Calendar Container */
.lodge-availability-calendar-container {
    width: 100%;
    background: white;
    border-radius: 3px;
    overflow: visible;
    left: auto;
}



/* Calendar Card */
.calendar-card {
    padding: 15px;
    background: white;
}



/* Removed .footer-button styles as the Terms & Conditions button was deleted */



/* Calendar Main */
.calendar-main {
    width: 100%;
}





/* Color Legend Enhanced */
.color-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 8px 0;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-color-box {
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

.legend-item span {
    font-size: 12px;
    color: #333;
    font-family: 'Roboto', Arial, sans-serif;
}

/* Calendar Table Enhanced */
.calendar-grid-wrapper table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    background: white;
    border: 1px solid #dcdcdc;
}

.calendar-grid-wrapper table th {
    padding: 6px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #dcdcdc;
    height: 30px;
}

.calendar-grid-wrapper table td {
    padding: 6px;
    text-align: center;
    border: 1px solid #dcdcdc;
    height: 30px;
    position: relative;
}

/* Error message styling */
.lodge-dashboard-error {
    background: #ffebee;
    border: 1px solid #f44336;
    border-radius: 4px;
    padding: 15px;
    margin: 20px 0;
    color: #c62828;
}

/* Calendar Body Cells */
#calendar-body td {
    position: relative;
}

#calendar-body td.date-cell {
    background: #f8f9fa;
    font-weight: 500;
    color: #525062;
}

#calendar-body td.availability-cell {
    background: white;
    cursor: pointer;
}

#calendar-body td.availability-cell.not-available {
    background-color: #ff4444;
}

#calendar-body td.availability-cell.provisional {
    background-color: #ffff44;
}

#calendar-body td.availability-cell.available {
    background-color: #ffffff;
}

/* Card Footer Controls */
.card-footer-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8f9fa;
    border-top: 1px solid #dfe3e8;
    flex-wrap: wrap;
    gap: 10px;
}

/* Responsive Design for Availability Calendar */
@media (max-width: 768px) {
    
    .card-footer-controls {
        flex-direction: column;
        align-items: stretch;
    }
    

    
    .color-legend {
        flex-wrap: wrap;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .calendar-card {
        padding: 10px;
    }
    
    .calendar-grid-wrapper table th,
    .calendar-grid-wrapper table td {
        padding: 4px 2px;
        font-size: 10px;
    }
    
    /* .footer-button mobile styles removed */
}

.dashboard-container {
    --hippo-ivory: #333333;
    --hippo-dusk: #ffffff;
    --hippo-night: #ffffff;
    --hippo-gold: #0d2c54;
    --hippo-search-surface: #f9f9f9;
    --hippo-header-date: #6c757d;
    --hippo-header-date-text: #ffffff;
    --hippo-header-room: #0d2c54;
    --hippo-header-room-text: #ffffff;
    --hippo-day-cell: #f2f2f2;
    --hippo-day-cell-text: #333333;
    --hippo-weekend-cell: #d9e2f3;
    --hippo-weekend-cell-text: #333333;
    --hippo-available: #ffffff;
    --hippo-provisional: #ffff44;
    --hippo-unavailable: #ff4444;
    --hippo-button-background: #e0e0e0;
    --hippo-button-text: #333333;
    --hippo-button-border: #c0c0c0;
    --hippo-button-hover: #d0d0d0;
    --hippo-button-hover-text: #333333;
    --hippo-modal-overlay: rgba(9, 30, 66, 0.54);
    --hippo-modal-background: #ffffff;
    --hippo-modal-text: #333333;
    --hippo-modal-header: rgba(119, 177, 188, 0.32);
    --hippo-modal-button-background: #0c768a;
    --hippo-modal-button-text: #ffffff;
    --hippo-modal-button-hover: #0a6273;
    background: var(--hippo-night);
    color: var(--hippo-ivory);
}

.dashboard-container .lodge-availability-calendar-container,
.dashboard-container .calendar-card,
.dashboard-container .main-card,
.dashboard-container .calendar-grid-wrapper table {
    background: var(--hippo-dusk) !important;
}

.dashboard-container .header-title,
.dashboard-container .header-subtitle,
.dashboard-container .current-month-year,
.dashboard-container .legend-item span,
.dashboard-container .form-label,
.dashboard-container .modal-title {
    color: var(--hippo-ivory);
}

.dashboard-container .header-date-col,
.dashboard-container .header-month-col {
    background: var(--hippo-header-date) !important;
    color: var(--hippo-header-date-text) !important;
}

.dashboard-container .header-chalet-col,
.dashboard-container .header-room-col {
    background: var(--hippo-header-room) !important;
    color: var(--hippo-header-room-text) !important;
}

.dashboard-container .cell-day,
.dashboard-container .cell-date,
.dashboard-container .cell-month {
    background: var(--hippo-day-cell) !important;
    color: var(--hippo-day-cell-text) !important;
}

.dashboard-container #calendar-body tr.weekend-row,
.dashboard-container #calendar-body tr.weekend-row .cell-day,
.dashboard-container #calendar-body tr.weekend-row .cell-date {
    background: var(--hippo-weekend-cell) !important;
    color: var(--hippo-weekend-cell-text) !important;
}

.dashboard-container .status-available,
.dashboard-container .legend-available {
    background-color: var(--hippo-available) !important;
}

.dashboard-container .status-provisional,
.dashboard-container .status-provisionally-reserved,
.dashboard-container .legend-provisional {
    background-color: var(--hippo-provisional) !important;
}

.dashboard-container .status-not-available,
.dashboard-container .legend-not-available {
    background-color: var(--hippo-unavailable) !important;
}

.dashboard-container .color-legend {
    background: #ffffff !important;
    border: 1px solid #dcdcdc;
}

.dashboard-container .nav-arrow,
.dashboard-container .bulk-mode-btn,
.dashboard-container .room-select {
    background-color: var(--hippo-button-background) !important;
    color: var(--hippo-button-text) !important;
    border-color: var(--hippo-button-border) !important;
}

.dashboard-container .nav-arrow:hover,
.dashboard-container .bulk-mode-btn:hover {
    background-color: var(--hippo-button-hover) !important;
    color: var(--hippo-button-hover-text) !important;
}

.dashboard-container .bulk-mode-btn.active {
    background: var(--hippo-gold) !important;
    border-color: var(--hippo-gold) !important;
    color: #ffffff !important;
}

.dashboard-container .modal-overlay {
    background-color: var(--hippo-modal-overlay) !important;
}

.dashboard-container .modal-content,
.dashboard-container .edit-booking-modal {
    background: var(--hippo-modal-background) !important;
    color: var(--hippo-modal-text) !important;
}

.dashboard-container .modal-header {
    background: var(--hippo-modal-header) !important;
}

.dashboard-container .btn-primary {
    background: var(--hippo-modal-button-background) !important;
    color: var(--hippo-modal-button-text) !important;
}

.dashboard-container .btn-primary:hover {
    background: var(--hippo-modal-button-hover) !important;
}

.dashboard-container .calendar-grid-wrapper table thead th {
    position: sticky;
    top: 0;
    left: auto;
    z-index: 20;
}

.dashboard-container .calendar-grid-wrapper table td:first-child,
.dashboard-container .calendar-grid-wrapper table th:first-child {
    border-right: 1px solid #dcdcdc;
}

.dashboard-container .calendar-grid-wrapper table td:nth-child(2),
.dashboard-container .calendar-grid-wrapper table th:nth-child(2) {
    border-right: 2px solid #b0b0b0;
}

.dashboard-container .header-month-col {
    background: var(--hippo-header-date) !important;
    color: var(--hippo-header-date-text) !important;
    font-size: 10px;
}

.dashboard-container .cell-month {
    background: var(--hippo-day-cell) !important;
    color: var(--hippo-day-cell-text) !important;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.25;
    white-space: normal;
    vertical-align: top;
    padding-top: 8px;
}

.dashboard-container .cell-month-label {
    position: sticky;
    top: 32px;
}

.dashboard-container .cell-month-label span {
    display: block;
}

.dashboard-container .col-month,
.dashboard-container .header-month-col,
.dashboard-container .cell-month {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
}

.dashboard-container .cell-availability:hover {
    filter: brightness(1.15);
    transform: none;
}

.dashboard-container .legend-available {
    background-color: var(--hippo-available) !important;
}

.dashboard-container .legend-provisional {
    background-color: var(--hippo-provisional) !important;
}

.dashboard-container .legend-not-available {
    background-color: var(--hippo-unavailable) !important;
}

.dashboard-container .clear-all-btn {
    background-color: var(--hippo-button-background) !important;
    color: var(--hippo-button-text) !important;
    border-color: var(--hippo-button-border) !important;
}

.dashboard-container .col-day,
.dashboard-container .header-date-col:first-child,
.dashboard-container .cell-day {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
}

.dashboard-container .col-date,
.dashboard-container .header-date-col:nth-child(2),
.dashboard-container .cell-date {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
}

/* Phones: the toolbar wraps instead of pushing buttons off-screen, and the
   Day/Date/Month columns slim down so the room columns stay readable. */
@media (max-width: 768px) {
    .calendar-navigation {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
        overflow: visible !important;
    }

    .calendar-navigation .room-filter {
        flex: 1 1 100%;
        margin-left: 0 !important;
    }

    .calendar-navigation .room-select {
        width: 100%;
    }

    .calendar-navigation .bulk-edit-controls {
        display: flex;
        flex: 1 1 100%;
        gap: 8px;
    }

    .calendar-navigation .bulk-mode-btn,
    .calendar-navigation .clear-all-btn {
        flex: 1 1 auto;
    }

    .dashboard-container .col-day,
    .dashboard-container .header-date-col:first-child,
    .dashboard-container .cell-day {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        padding: 6px 2px !important;
        font-size: 9px !important;
    }

    .dashboard-container .col-date,
    .dashboard-container .header-date-col:nth-child(2),
    .dashboard-container .cell-date {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 6px 2px !important;
    }

    .dashboard-container .col-month,
    .dashboard-container .header-month-col,
    .dashboard-container .cell-month {
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
        font-size: 9px !important;
    }

    .dashboard-container .header-room-col,
    .dashboard-container .header-chalet-col {
        min-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Visible warning shown when availability cannot be fetched. */
.hippo-calendar-notice {
    align-items: center;
    background: #fff4e5;
    border: 1px solid #f0b429;
    border-left: 4px solid #d97706;
    border-radius: 3px;
    color: #7c4a03;
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 12px;
    justify-content: space-between;
    margin: 0 0 10px;
    padding: 10px 14px;
}

.hippo-calendar-notice__retry {
    background: #d97706;
    border: 0;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    text-transform: uppercase;
}

.hippo-calendar-notice__retry:hover,
.hippo-calendar-notice__retry:focus-visible {
    background: #b45309;
}

/* Bulk-edit selection highlight.
   "Available" cells are plain white (--hippo-available: #ffffff), so the old
   border-only treatment was almost impossible to spot. Selected cells now carry
   a bold blue border plus a diagonal stripe overlay. The stripes use
   background-image, which paints above background-color, so the underlying
   status colour still reads through on Not Available (red) and Provisional
   (yellow) cells while the selection stays obvious on white ones. */
.dashboard-container .cell-availability.selected,
.dashboard-container .cell-availability.range-middle {
    background-image: repeating-linear-gradient(
        135deg,
        rgba(11, 94, 215, 0.55) 0,
        rgba(11, 94, 215, 0.55) 5px,
        transparent 5px,
        transparent 10px
    ) !important;
    border: 2px solid #0b5ed7 !important;
    box-shadow: 0 0 0 2px rgba(11, 94, 215, 0.45);
    transform: none;
    z-index: 2;
}

.dashboard-container .cell-availability.range-start {
    border-left: 3px solid #0b5ed7 !important;
}

.dashboard-container .cell-availability.range-end {
    border-right: 3px solid #0b5ed7 !important;
}

/* In bulk mode the crosshair cursor alone gives no feedback about which cell a
   drag is about to cover, so outline the cell under the pointer. */
.dashboard-container.bulk-edit-mode .cell-availability:hover {
    box-shadow: inset 0 0 0 2px rgba(11, 94, 215, 0.5);
}