/* ============================================
   MOBILE RESPONSIVE STYLES
   Complete mobile optimization for PMS
   Breakpoint: < 768px (md)
   ============================================ */

/* ============================================
   1. BASE MOBILE FIXES
   ============================================ */

@media (max-width: 767px) {

    /* Prevent horizontal overflow and background scrolling */
    html.modal-open,
    body.modal-open {
        overflow: hidden !important;
        height: 100% !important;
        width: 100% !important;
        position: fixed !important;
        top: 0;
        left: 0;
    }

    body {
        overflow-x: hidden;
        padding: 0 !important;
    }

    /* Main app container — full-bleed, no border-radius */
    #app {
        border-radius: 0;
        margin: 0;
    }

    /* ============================================
       2. HEADER & NAVIGATION
       ============================================ */

    /* Mobile header - vertical stacking */
    header {
        padding: 0.75rem !important;
        min-height: auto !important;
        flex-direction: column;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }

    /* Hide desktop navigation elements */
    #header-nav {
        width: 100%;
        flex-wrap: wrap !important;
        /* 7 visible buttons + month label can't fit one row on <400px viewports;
           let the toolbar buttons (search, auto-msg, calculator) wrap to a 2nd
           line instead of spilling off-screen. */
        gap: 0.375rem !important;
        justify-content: center;
        row-gap: 0.5rem !important;
    }

    /* Month navigation - compact (shrunk by ~40%) */
    #header-nav button {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem !important;
        min-height: 38px !important;
        min-width: 38px !important;
    }

    #current-month-year {
        font-size: 0.9rem !important;
        min-width: 100px !important;
    }

    #header-nav .text-sm {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.85rem !important;
        min-height: 38px !important;
    }

    /* Toolbar icon buttons (Search / Auto Message / Calculator) — keep them
       small so they fit in the 2nd row without further spillover. */
    #header-nav > button[onclick*="openSearchModal"],
    #header-nav > button[onclick*="openAutoMessageModal"],
    #header-nav > button[onclick*="openCalculator"] {
        padding: 0.4rem !important;
        min-width: 36px !important;
        min-height: 36px !important;
        margin-left: 0 !important;
    }
    #header-nav > button[onclick*="openSearchModal"] svg,
    #header-nav > button[onclick*="openAutoMessageModal"] svg,
    #header-nav > button[onclick*="openCalculator"] svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Fix drag ghost in corner issue */
    .dragging-ghost {
        pointer-events: none !important;
        z-index: 10000 !important;
        opacity: 0.8 !important;
        position: fixed !important;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
        transform: scale(1.11) !important;
    }

    @media (prefers-reduced-motion: no-preference) {
        .dragging-ghost {
            animation: wiggle 0.3s ease-in-out infinite;
        }

        @keyframes wiggle {
            0%   { transform: scale(1.11) rotate(0deg); }
            25%  { transform: scale(1.11) rotate(-2deg); }
            50%  { transform: scale(1.11) rotate(0deg); }
            75%  { transform: scale(1.11) rotate(2deg); }
            100% { transform: scale(1.11) rotate(0deg); }
        }
    }

    /* Hide clock on very small screens */
    #digital-clock {
        display: none !important;
    }

    /* Right header block (revenue pill + user controls) — WRAPPING row.
       Without this it's a rigid flex row: the pill grows with the revenue
       figure and silently clips the theme + Settings buttons off-screen
       (body hides overflow-x). Wrap + center keeps every control reachable
       no matter how wide the pill gets. */
    #header-right {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin-left: 0 !important;
    }

    /* Revenue & Sync Toolbar - centered pill */
    #header-tools {
        width: fit-content !important;
        max-width: 100% !important;
        margin: 0 !important;
        flex-wrap: nowrap;
        padding: 0.25rem 0.75rem !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        min-height: auto !important;
        border-radius: 9999px !important;
    }

    #header-tools button {
        margin-right: 0 !important;
        /* Remove competing HTML margin */
        padding: 0.25rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    #header-tools button svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Revenue display - vertical alignment fix */
    #header-tools .text-lg {
        font-size: 0.9rem !important;
        line-height: normal !important;
        display: flex !important;
        align-items: center !important;
    }

    #month-total-revenue {
        line-height: 1 !important;
    }

    #header-tools .text-\[10px\] {
        font-size: 8px !important;
        margin-bottom: -2px !important;
        /* Tiny nudge for RON if needed */
    }

    /* User controls - compact */
    #user-controls {
        gap: 0.125rem !important;
        width: auto;
        justify-content: flex-end;
    }

    #user-controls button {
        padding: 0.125rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    #user-controls svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Settings dropdown - better positioning on mobile */
    #settings-dropdown {
        right: 0.5rem;
        left: auto;
        width: 280px;
        max-width: calc(100vw - 1rem);
        margin: 0;
    }

    /* ============================================
       3. PROPERTY TABS
       ============================================ */

    #property-tabs-bar {
        padding: 0.5rem 0 !important;
        /* Remove horizontal padding so divider line reaches edges */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #property-tabs-list {
        gap: 0.5rem !important;
        padding: 0 0.5rem !important;
        /* Add padding here instead of bar to allow scroll but keep buttons off edge */
    }

    /* Property tab buttons - smaller */
    #property-tabs-list button {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }

    /* Hide scrollbar for property tabs bar to avoid "abrupt line" look */
    #property-tabs-bar {
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    #property-tabs-bar::-webkit-scrollbar {
        display: none !important;
        /* Chrome/Safari */
    }

    /* ============================================
       4. CALENDAR GRID - MOBILE OPTIMIZATION
       ============================================ */

    /* Restore room sidebar on mobile - Slimmer 65px width */
    #room-column-container {
        display: block !important;
        width: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
        flex-shrink: 0 !important;
        z-index: 40 !important;
        background-color: inherit;
        border-right: 1px solid #d1d5db !important;
    }

    /* Ensure the "Rooms" header title matches grid height (56px) and width (65px) */
    #room-header-list>div:first-child {
        height: 56px !important;
        width: 65px !important;
        font-size: 10px !important;
        padding-left: 0.25rem !important;
        padding-right: 0.125rem !important;
        display: flex !important;
        align-items: center !important;
    }

    html.dark #room-header-list>div:first-child {
        border-right-color: #374151 !important;
    }

    #room-header-list .room-row {
        padding-left: 0.25rem !important;
        padding-right: 0.125rem !important;
        justify-content: flex-start !important;
        height: 56px !important;
        width: 65px !important;
    }

    #room-header-list .room-row span {
        font-size: 9px !important;
        white-space: normal !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* Hide settings gear and resizer on mobile to save space */
    #room-header-list button,
    #room-column-resizer {
        display: none !important;
    }

    /* Calendar container - horizontal layout */
    #calendar-controls .flex {
        flex-direction: row !important;
    }

    /* Hide mobile filter dropdown container */
    #mobile-room-filter-container {
        display: none !important;
    }

    /* Calendar grid wrapper - ENABLE horizontal scroll */
    #calendar-controls>div>div:last-child {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    /* Calendar grid - REMOVE width constraint to allow scrolling */
    #calendar-grid {
        min-width: fit-content !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Date header - must be horizontal row */
    #date-header {
        display: flex !important;
        flex-direction: row !important;
    }

    /* Room grid body */
    #room-grid-body {
        display: block !important;
    }

    /* Date cells - Match JS width (48px) for perfect alignment */
    .date-cell {
        min-width: 48px !important;
        max-width: 48px !important;
        width: 48px !important;
        flex: 0 0 48px !important;
        height: 56px !important;
        font-size: 0.75rem !important;
        border-right: 1px solid #e5e7eb !important;
        border-bottom: 1px solid #e5e7eb !important;
        box-sizing: border-box !important;
    }

    /* Calendar grid selector - Ensure SNAP-FIT to sidebar */
    #calendar-scroll-container {
        margin: 0 !important;
        border-left: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #calendar-grid {
        width: max-content !important;
        min-width: 1550px !important;
        /* (31 days * 48px) = 1488px + buffer */
        display: block !important;
    }

    /* Room rows - taller for touch */
    .room-row {
        height: 56px !important;
        display: flex !important;
        flex-direction: row !important;
    }

    /* Booking blocks - larger and more readable */
    .booking-block {
        height: 50px !important;
        top: 3px !important;
        padding: 4px 6px !important;
        font-size: 0.625rem !important;
        line-height: 1.2;
    }

    /* Cleaning icon — bumped to 24px on touch so it's tap-friendly.
       Reduced negative offset so it doesn't overlap text on 50px-tall blocks. */
    .cleaning-icon {
        width: 24px !important;
        height: 24px !important;
        top: -4px !important;
        right: -4px !important;
    }

    /* Reserve right-side space inside booking blocks for the cleaning icon. */
    .booking-block {
        padding-right: 20px !important;
    }

    /* Drag creation ghosts - larger */
    .drag-create-ghost {
        height: 50px !important;
        top: 3px !important;
        font-size: 0.75rem !important;
    }

    .drag-create-ghost-v {
        width: 50px !important;
        left: 3px !important;
        font-size: 0.65rem !important;
    }

    /* Date header - sticky, above booking-block badges (cleaning-icon z-31), below the z-40 room column */
    #date-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 35 !important;
    }

    /* Calendar grid wrapper - ENABLE horizontal scroll */
    #calendar-scroll-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: none !important;
        /* Allow free dragging */
    }

    /* ============================================
       5. MODALS - FULL SCREEN ON MOBILE
       ============================================ */

    /* All modals - full screen */
    #booking-modal,
    #sync-modal,
    #booking-com-sync-modal,
    #convert-override-modal,
    #copy-modal,
    #add-room-modal,
    #edit-room-modal,
    #bulk-edit-modal,
    #add-property-modal,
    #delete-property-confirm-modal {
        overflow: hidden !important;
        /* Prevent backdrop itself from having a scrollbar */
    }

    #booking-modal>div,
    #sync-modal>div,
    #booking-com-sync-modal>div,
    #convert-override-modal>div,
    #copy-modal>div,
    #add-room-modal>div,
    #edit-room-modal>div,
    #bulk-edit-modal>div,
    #add-property-modal>div,
    #delete-property-confirm-modal>div {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        /* Ensure no horizontal overflow within the modal container itself */
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        /* The flex-grow child handles vertical scroll */
        box-sizing: border-box !important;
        position: relative;
    }

    /* Modal headers - full width on mobile */
    #booking-modal h2,
    #bulk-edit-modal h2,
    #sync-modal h2,
    #room-settings-modal h2,
    #add-property-modal h2,
    #edit-property-modal h2 {
        font-size: 1.1rem !important;
        padding: 0.5rem !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        flex: 1 !important;
        width: 100% !important;
        text-align: center !important;
    }

    #booking-modal .p-3,
    #bulk-edit-modal .p-3 {
        padding: 0.5rem !important;
    }

    /* Fix Dates Overflow and Prevent horizontal scroll on modals */
    #booking-modal input[type="date"],
    #bulk-edit-modal input[type="date"],
    #booking-modal .compact-input,
    #bulk-edit-modal .compact-input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        display: block !important;
        margin: 0 !important;
        /* Ensure no margins push it out */
        appearance: none;
        -webkit-appearance: none;
        border-radius: 6px !important;
    }

    /* Target the container of the date inputs specifically */
    #booking-modal .space-y-2>div,
    #bulk-edit-modal .space-y-2>div {
        width: 100% !important;
        overflow: hidden !important;
        /* Force containment */
        box-sizing: border-box !important;
    }

    /* Modal content scrollable area and layout constraints */
    #booking-modal .flex-grow,
    #bulk-edit-modal .flex-grow {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Force all card containers to stay within viewport */
    #booking-modal .bg-white,
    #bulk-edit-modal .bg-white,
    #booking-modal .dark\:bg-gray-800,
    #bulk-edit-modal .dark\:bg-gray-800 {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #booking-modal div,
    #bulk-edit-modal div {
        min-width: 0;
        /* Prevent flex/grid items from overflowing */
    }

    /* Fix header button overflow in Booking Modal */
    #booking-modal .flex.items-center.space-x-2 {
        gap: 0.25rem !important;
        /* was space-x-2 ~ 0.5rem */
    }

    #booking-modal .space-x-2> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.25rem * var(--tw-space-x-reverse));
        margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
    }

    #booking-modal button,
    #bulk-edit-modal button {
        /* Keep vertical padding but reduce horizontal drastically */
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
        padding-left: 0.5rem !important;
        /* Reduced from 0.75rem */
        padding-right: 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Specifically target the icon buttons in header to be square/compact */
    #booking-modal header button {
        padding: 0.25rem !important;
    }

    /* Form grids - single column */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Compact inputs - larger for touch */
    .compact-input {
        padding: 0.75rem 1rem !important;
        font-size: 16px !important;
        /* Prevents iOS zoom */
        min-height: 48px;
    }

    /* Textareas */
    textarea.compact-input {
        min-height: 80px !important;
    }

    /* Select dropdowns */
    select.compact-input {
        min-height: 48px !important;
    }

    /* Status buttons - larger touch targets */
    .status-btn {
        padding: 0.875rem 1rem !important;
        font-size: 0.875rem !important;
        min-height: 52px !important;
    }

    /* ============================================
       6. BUTTONS & INTERACTIVE ELEMENTS
       ============================================ */

    /* All buttons - minimum touch size 44x44px */
    button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 1rem;
    }

    /* Icon buttons */
    button svg {
        min-width: 20px;
        min-height: 20px;
    }

    /* Header action buttons */
    header button {
        padding: 0.5rem 0.75rem !important;
    }

    /* Save/Cancel buttons in modals */
    #booking-modal button,
    #sync-modal button,
    .py-2.px-4 {
        padding: 0.75rem 1.5rem !important;
        min-height: 48px;
        font-size: 1rem !important;
    }

    /* ============================================
       7. BULK TOOLBAR - FLOATING PILL
       ============================================ */
    #bulk-toolbar {
        bottom: 1rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 1rem) !important;
        max-width: 500px !important;
        /* Allow inner buttons + dividers to wrap onto multiple rows
           on narrow viewports instead of pushing labels off-screen. */
        border-radius: 1rem !important;
        padding: 0.5rem 0.75rem !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        row-gap: 0.375rem !important;
        background-color: #111827 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
    }

    html.dark #bulk-toolbar {
        background-color: #ffffff !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
    }

    /* Fixed alignment for Select button inside toolbar */
    #bulk-toolbar button {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.25rem !important;
        border-radius: 9999px !important;
        min-width: auto !important;
        min-height: auto !important;
        white-space: nowrap !important;
    }
    #bulk-toolbar button svg {
        width: 14px !important;
        height: 14px !important;
    }

    #bulk-select-btn svg {
        margin-right: 0 !important;
        /* Use gap instead */
    }

    /* Vertical dividers inside pill */
    #bulk-toolbar div.w-px {
        height: 1.5rem !important;
        margin: 0 0.25rem !important;
    }

    /* ============================================
       8. MESSAGE BOX - POSITION
       ============================================ */

    #message-box {
        bottom: 5rem !important;
        /* Above bulk toolbar if visible */
        right: 1rem !important;
        left: 1rem !important;
        width: auto !important;
    }

    /* ============================================
       9. DECORATIONS - SHOWN ON MOBILE
       ============================================ */

    /* Festive + Easter skins now render on mobile too; scale-down rules below if needed */
    /*
    .light-wire li {
        width: 6px !important;
        height: 12px !important;
        margin: 8px !important;
    }

    .snowman-container {
        width: 80px !important;
        height: 100px !important;
        bottom: -5px !important;
        right: 5px !important;
    }

    .snowflake {
        font-size: 20px !important;
    }
    */

    /* ============================================
       10. LOGIN MODAL - MOBILE OPTIMIZATION
       ============================================ */

    #login-modal>div {
        max-width: calc(100vw - 2rem) !important;
        margin: 1rem !important;
    }

    #login-modal input {
        font-size: 16px !important;
        /* Prevents iOS zoom */
        padding: 0.75rem 1rem !important;
        min-height: 48px;
    }

    #login-modal button {
        min-height: 48px !important;
        padding: 0.75rem 1rem !important;
    }

    /* ============================================
       11. MOBILE ROOM SELECTOR (NEW)
       ============================================ */

    /* Add a mobile room filter that replaces the sidebar */
    #mobile-room-filter-container {
        display: block;
        padding: 0.75rem 1rem;
        background: white;
        border-bottom: 1px solid #e5e7eb;
    }

    html.dark #mobile-room-filter-container {
        background: #1f2937;
        border-bottom-color: #374151;
    }

    #mobile-room-filter {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
        padding: 0.75rem 1rem;
    }

    /* ============================================
       12. TOUCH IMPROVEMENTS
       ============================================ */

    /* Remove hover effects on touch devices */
    .is-touch .date-cell:hover::after {
        background-color: transparent !important;
    }

    .is-touch .date-cell.cleaning-hint-eligible:hover::before {
        content: none !important;
    }

    .is-touch button:hover {
        transform: none !important;
    }

    /* Larger tap targets for booking blocks */
    .is-touch .booking-block {
        cursor: pointer;
    }

    /* Better active states for touch */
    .is-touch button:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

    /* ============================================
       13. SCROLLBAR STYLING - MOBILE
       ============================================ */

    /* Thin scrollbars on mobile */
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
    }

    html.dark ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
    }

    /* ============================================
       14. SYNC MODAL SPECIFICS
       ============================================ */

    #sync-tabs-container {
        max-height: 40vh !important;
    }

    /* Tab cell configs - single column */
    .grid.grid-cols-2.gap-2 {
        grid-template-columns: 1fr !important;
    }

    /* ============================================
       15. iOS SPECIFIC FIXES
       ============================================ */

    /* Prevent zoom on input focus */
    .is-ios input,
    .is-ios select,
    .is-ios textarea {
        font-size: 16px !important;
    }

    /* Safe area for notch devices */
    .is-ios body {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    /* ============================================
       16. LANDSCAPE OPTIMIZATIONS
       ============================================ */

    @media (max-height: 500px) and (orientation: landscape) {

        /* Smaller header in landscape */
        header {
            padding: 0.5rem !important;
        }

        /* Smaller modals in landscape */
        #booking-modal .p-5 {
            padding: 1rem !important;
        }

        /* More compact cells */
        .date-cell {
            min-width: 48px !important;
            max-width: 48px !important;
            height: 48px !important;
        }

        .room-row {
            height: 48px !important;
        }

        .booking-block {
            height: 42px !important;
        }
    }

    /* ============================================
       17. PERFORMANCE OPTIMIZATIONS
       ============================================ */

    /* Hardware acceleration for smoother scrolling */
    #calendar-grid,
    .booking-block,
    .drag-create-ghost,
    .drag-create-ghost-v {
        transform: translateZ(0);
        will-change: transform;
    }

    /* Reduce animations on mobile for performance.
       Gated on prefers-reduced-motion: no-preference so users who opt INTO
       reduced motion get their OS-level no-animation preference respected
       instead of being forced into 0.2s/0.15s. */
    @media (prefers-reduced-motion: no-preference) {
        * {
            animation-duration: 0.2s !important;
            transition-duration: 0.15s !important;
        }
    }

    /* ============================================
       18. ACCESSIBILITY - MOBILE
       ============================================ */

    /* Larger focus indicators on mobile */
    .is-touch button:focus,
    .is-touch input:focus,
    .is-touch select:focus {
        outline: 3px solid #3b82f6;
        outline-offset: 2px;
    }

    /* ============================================
       19. CALENDAR VIEW TOGGLE (FUTURE)
       ============================================ */

    /* Placeholder for list view toggle button */
    #mobile-view-toggle {
        display: flex;
        justify-content: center;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    #mobile-view-toggle button {
        flex: 1;
        max-width: 150px;
    }
}

/* ============================================
   20. TABLET OPTIMIZATIONS (768px - 1023px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    /* Calendar cells - medium size for tablets */
    .date-cell {
        min-width: 52px;
        max-width: 52px;
        height: 52px;
    }

    .room-row {
        height: 52px;
    }

    .booking-block {
        height: 46px;
        font-size: 0.7rem;
    }

    /* Room sidebar - narrower on tablets */
    #room-column-container {
        width: 160px;
    }

    /* Modals - reasonable size on tablets */
    #booking-modal>div,
    #sync-modal>div {
        max-width: 90vw !important;
        max-height: 90vh !important;
    }
}

/* ============================================
   21. PRINT STYLES
   ============================================ */

@media print {

    /* Hide UI chrome when printing */
    header,
    #bulk-toolbar,
    #message-box,
    .light-wire,
    .snowman-container,
    button {
        display: none !important;
    }

    /* Optimize calendar for printing */
    #calendar-grid {
        min-width: 100% !important;
    }

    .date-cell {
        border: 1px solid #000 !important;
    }

    .booking-block {
        break-inside: avoid;
    }
}

/* Mobile: activation checklist becomes a full-width bottom sheet */
@media (max-width: 767px) {
    #activation-card {
        left: 0.5rem !important;
        right: 0.5rem !important;
        bottom: 0.5rem !important;
        width: auto !important;
        max-width: none !important;
    }

    #activation-steps {
        max-height: 40vh;
        overflow-y: auto;
    }
}

/* Mobile: slightly taller day-header cells when weather strip is active */
@media (max-width: 768px) {
    /* Keep weekday/number/weather stacked vertically. The broad
       `#calendar-controls .flex` row-override bleeds onto these .flex cells and
       flips them to row, which crams + clips the day number in a 48px cell. */
    #calendar-grid #date-header .day-header {
        flex-direction: column !important;
    }

    #date-header.weather-strip-on .day-header {
        height: 72px !important;
    }

    #room-header-list .rooms-label-row.weather-strip-on {
        height: 72px !important;
    }

    .weather-cell {
        font-size: 0.55rem;
    }
}