/* KoopsDesk - Responsive Styles */

/* Reset and Base Styles */
:root{
    /* Light mode colors - Beige Minimalist Modern Interior Design Palette */
    --primary-color: #4594A2;
    --secondary-color: #8AC6CC;
    --accent-light: #D4EEE5;
    --warm-neutral: #E9BDA0;
    --warm-accent: #DF986C;
    --light-accent: #FEE892;
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f9fa;
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    /* Muted / tertiary grays — single source for the var(--text-muted)/var(--gf-ink-3) fallbacks used across the app */
    --text-muted: #6c757d;
    --gf-ink-3: #888888;
    --border-color: #dee2e6;
    --border-light: #dee2e6;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --gradient-bg: linear-gradient(135deg, rgba(69, 148, 162, 0.05) 0%, rgba(138, 198, 204, 0.05) 100%);
    
    /* Legacy compatibility */
    --primary-dark: #3a7d87;
    --success-color: #4CAF50;
    --push-dot-registered: #22c55e;
    --warning-color: #DF986C;
    --error-color: #F44336;
    --background: var(--bg-primary);
    --surface: var(--bg-secondary);
    --shadow: var(--shadow-light);
    --shadow-large: var(--shadow-medium);
    --border-radius: 8px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
}/* Reset and base styles */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    background-image: var(--gradient-bg);
    min-height: 100vh;
}/* Header */
.app-header{
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-light);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
    transition: transform 0.3s ease-in-out;
}/* Auto-hide header on scroll down */
.app-header.header-hidden{
    transform: translateY(-100%);
}/* Navigation tabs should also auto-hide */
.nav-tabs{
    transition: transform 0.3s ease-in-out;
}.nav-tabs.nav-hidden{
    transform: translateY(-100%);
}/* Expand calendar when headers are hidden */
.calendar-view.headers-hidden .calendar-container-new{
    height: calc(100vh - 20px); /* Full height minus small margin */
    transition: height 0.3s ease-in-out;
}/* Adjust main content when headers are hidden */
.main-content.headers-hidden{
    margin-top: 0;
    transition: margin-top 0.3s ease-in-out;
}.logo-container{
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);
}.logo-container:hover{
    background: rgba(69, 148, 162, 0.1);
    transform: scale(1.02);
}/* Prevent automatic translation - app has built-in multilingual support */
.notranslate{
    translate: no;
}html[translate="no"],
body[translate="no"],
.notranslate{
    /* Note: transform: translateZ(0) intentionally removed — it breaks position: fixed
       (any transform on a parent creates a new containing block for fixed elements,
       making them scroll with the page). Translation is prevented via the HTML
       translate="no" attribute and <meta name="google" content="notranslate"> alone. */
}.version{
    font-size: 0.5em;
    font-weight: 400;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-left: var(--spacing-xs);
}.logo-icon{
    width: 32px;
    height: 32px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}.tenant-selector{
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    font-size: 0.9rem;
}.btn-icon{
    background: none;
    border: none;
    font-size: 1.2rem;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s;
}.btn-icon:hover{
    background: var(--bg-primary);
}.push-status-dot{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    vertical-align: middle;
    margin-right: 3px;
    transition: background 0.4s;
}.push-status-dot.registered{
    background: var(--push-dot-registered, #22c55e);
}/* Refresh icon button (bookings toolbar) — bare icon,
no button chrome */
.refresh-btn{
    color: var(--text-secondary, var(--text-primary));
}.refresh-btn svg{
    display: block;
    transition: transform 0.4s ease;
}.refresh-btn:hover{
    color: var(--primary-color);
}.refresh-btn:hover svg{
    transform: rotate(90deg);
}.refresh-btn:disabled svg{
    animation: spin 0.8s linear infinite;
}.refresh-btn:disabled{
    cursor: default;
    color: var(--primary-color);
}/* Navigation Tabs */
.nav-tabs{
    background: var(--bg-secondary);
    display: flex;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: transform 0.3s ease-in-out;
    position: sticky;
    top: 0;
    z-index: 99;
}.nav-tabs.nav-hidden{
    transform: translateY(-100%);
}.nav-tabs::-webkit-scrollbar{
    display: none;
}.nav-tab{
    background: none;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    font-size: 0.9rem;
    font-weight: 500;
}.nav-tab:hover{
    background: var(--bg-primary);
}.nav-tab.active{
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
}/* Main Content */
.main-content{
    padding: 0;
    padding-top: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}.view{
    display: none;
}.view.active{
    display: block;
}/* #calendar-view fills its parent (.main-content) fully on all screen sizes —
   Timeline/List views rely on this bounded height for their internal scroll
   areas (sticky headers, scroll-to-today) instead of a fixed vh guess that
   leaves unused space when content is shorter than the viewport. Calendars
   view intentionally opts out via its own .view-calendars override further
   down (it wants to grow with content and let the page scroll instead). */
#calendar-view.view.active{
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}.view-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    /* Same height as the sidebar's own brand block (.app-sidebar .sidebar-top, 60px), so
       the two bottom borders form one continuous line across the top of the app instead of
       stepping 7px where the sidebar meets the content. */
    min-height: 60px;
    border-bottom: 1px solid var(--gf-line, #e7e4dd);
    background-color: var(--gf-paper-warm, #faf8f3);
    margin-bottom: 0;
}.view-header h2{
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gf-ink-1, #1f1d1a);
}/* Controls sitting in a view header (Breakfast's date navigation, Reports' year picker,
   Expenses' search + New button) are shrunk to 34px so the header stays exactly the
   sidebar's 60px rather than being stretched to 69px by a row of default-size buttons.
   Desktop only: on a phone the header wraps to two rows anyway, where min-height is a
   floor rather than a target, and full-size controls stay easier to hit. */
@media (min-width: 769px) {
    .view-header .btn-primary,
    .view-header .btn-secondary,
    .view-header input[type="date"],
    .view-header select,
    .section-header .btn-primary,
    .section-header .btn-secondary,
    .section-header .settings-nav-btn,
    .section-header select{
        height: 34px;
        min-height: 34px;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 0.85rem;
    }
}/* ── Pill search box ───────────────────────────────────────────────────────
   The rounded search field from the Calendar toolbar, shared so the Settings filters look
   the same. Calendar's own .booking-search-input carries this class too and adds nothing
   but its toolbar width — the values live here once rather than being copied per screen. */
.search-pill{
    width: var(--search-pill-w, 240px);
    max-width: 100%;
    padding: 4px 10px;
    border: 1.5px solid var(--gf-line, #e7e4dd);
    border-radius: 20px;
    background: var(--gf-paper, #ffffff);
    color: var(--gf-ink-1, #1f1d1a);
    font-size: 12px;
    font-family: inherit;
    transition: width 0.18s ease, border-color 0.15s ease;
}/* These placeholders list everything the box can match, which is longer than the box —
   so it grows on hover or focus to show the whole sentence, then settles back. The title
   attribute in the markup carries the same text for anyone who cannot hover. */
.search-pill:hover,
.search-pill:focus{
    width: var(--search-pill-w-open, var(--search-pill-w, 240px));
}.search-pill:focus{
    outline: none;
    border-color: var(--primary-color, #4594A2);
}.search-pill::placeholder{
    color: var(--gf-ink-4, #a8a49c);
}#customerSearchInput{
    --search-pill-w: 250px;
    --search-pill-w-open: 380px;
}.search-pill-wrapper{
    position: relative;
    display: inline-flex;
}/* Keeps .pending-popover's right-edge anchoring: these boxes sit at the right end of a
   title bar, so a left-anchored list would hang off the side of the window. The Calendar's
   own booking search is at the LEFT end of its toolbar and flips this back in
   calendar-refresh.css. */
.search-pill-popover{
    min-width: 280px;
    max-width: min(420px, 90vw);
}/* Long e-mail addresses shorten instead of being cut off by the popover's edge. */
.search-pill-popover .pbr-dates{
    overflow: hidden;
    text-overflow: ellipsis;
}/* ── Icon navigation button ────────────────────────────────────────────────
   Previous/Next controls (Calendar's month nav, Breakfast's day nav, Reports' year nav).
   Deliberately built to look like a sidebar entry's icon — same 8px rounded square, same
   soft teal tint, same thin-stroke SVG at the same size — rather than the solid gradient
   .btn-control, which as a single "‹" glyph rendered as an oversized coloured pill.
   The chevron is inline SVG in the markup, so it scales cleanly and inherits currentColor. */
.btn-icon-nav{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    /* Same pair as .nav-icon[data-color="teal"] in navigation.css. */
    background: rgba(74, 159, 165, 0.13);
    color: #3d8f96;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}.btn-icon-nav svg{
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}.btn-icon-nav:hover:not(:disabled){
    background: rgba(74, 159, 165, 0.24);
}.btn-icon-nav:disabled{
    opacity: 0.35;
    cursor: not-allowed;
}/* Buttons */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-control{
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}.btn-sm{
    font-size: 0.8rem;
    padding: 4px 10px;
    height: 30px;
    min-width: unset;
    gap: 4px;
}.btn-primary{
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
}.btn-primary:hover{
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
}.btn-secondary{
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}.btn-secondary:hover{
    background: var(--bg-primary);
}.btn-danger{
    background: linear-gradient(135deg, var(--warm-accent) 0%, #C5894F 100%);
    color: white;
    border: none;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(223, 152, 108, 0.2);
}.btn-danger:hover{
    background: linear-gradient(135deg, #C5894F 0%, #A67442 100%);
    box-shadow: 0 4px 8px rgba(223, 152, 108, 0.3);
    transform: translateY(-1px);
}.btn-control{
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    border: none;
    border-radius: 50%;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 1.4rem;
    font-weight: bold;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}.btn-control:hover{
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    transform: scale(1.05);
}.btn-control:active{
    transform: scale(0.95);
}/* Calendar Styles */
.calendar-controls{
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}.calendar-controls h2{
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 var(--spacing-md);
}.dates-header-unified{
    grid-column: 2;
    grid-row: 1;
    display: flex;
    background: var(--background);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
}.calendar-grid-unified{
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}/* Transform-based horizontal scrolling */
.dates-header-unified,
.rooms-grid-section,
.cars-grid-section{
    transform: translateX(var(--scroll-x, 0px));
    transition: transform 0.05s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    min-width: fit-content;
}/* Ensure grid sections are visible by default */
.rooms-grid-section,
.cars-grid-section{
    display: flex;
    flex-direction: column;
    width: 100%;
}/* Prevent text selection during scrolling */
.calendar-grid-unified{
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}/* Enable text selection for content */
.grid-cell,
.room-row,
.car-row{
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}/* Legacy support - keep old classes working during transition */
.calendar-container{
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    height: 70vh;
    display: flex;
    flex-direction: column;
}.date-cell{
    min-width: 80px;
    width: 80px;
    height: 60px;
    padding: var(--spacing-sm); /* Reduced from md for better fit */
    text-align: center;
    border-right: 1px solid var(--border-color);
    font-size: 0.8rem;
    cursor: pointer;
    scroll-snap-align: start;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px; /* Small gap between day number and weekday */
}.date-cell div{
    line-height: 1.1; /* Tight line height for compact display */
    margin: 0; /* Remove default margins */
}.date-cell.weekend{
    background: var(--gf-paper-warm);
}.date-cell.holiday{
    background: var(--warm-neutral);
    font-weight: 600;
}.date-cell.today{
    background: var(--primary-color) !important;
    color: white !important;
    border: 2px solid var(--secondary-color) !important;
    font-weight: bold !important;
    box-shadow: 0 0 10px rgba(69, 148, 162, 0.5) !important;
}/* ===== TIMELINE UNIFIED STYLES ===== */
/* These styles ensure consistent heights and fonts between sidebar and grid */

.Timeline_MonthRow{
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: var(--spacing-sm);
    font-weight: 600;
    text-align: center;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 8;
    box-sizing: border-box;
}.Timeline_DaysRow{
    display: flex;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    height: 60px;
    min-height: 60px;
    position: sticky;
    top: var(--tl-month-h, 36px); /* directly below the sticky Timeline_MonthRow — same variable as its height */
    z-index: 7;
    align-items: center;
    font-weight: 500;
    font-size: 0.9rem;
}.Timeline_Section{
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: var(--spacing-sm);
    font-weight: 600;
    text-align: center;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}/* Rooms and Cars Label Containers */
.rooms-labels,
.cars-labels{
    display: flex;
    flex-direction: column;
}/* Room and Car Rows - Match Calendar Row Heights */
.room-row,
.car-row{
    height: 60px; /* Match month-room-row and month-car-row height */
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}.room-row:hover,
.car-row:hover{
    background-color: var(--accent-light);
}.room-info{
    padding: var(--spacing-sm) var(--spacing-md);
    width: 100%;
}.room-info h4{
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}.room-info p{
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.3;
}/* Grid Sections */
.rooms-grid-section,
.cars-grid-section{
    display: flex;
    flex-direction: column;
    min-width: fit-content;
}.section-header{
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}/* New Calendar Layout - Sidebar + Scrolling Months */
.calendar-container-new{
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    flex: 1;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}.calendar-main-layout{
    display: flex;
    flex: 1;
    overflow: hidden;
}/* Timeline sidebar (room / vehicle labels). First child of .months-scroll-container — the ONE
   scroll container for both axes — and pinned to its left edge with position: sticky, so it shares
   the grid's scrollTop by construction and its rows cannot drift from the month rows. Until
   v4.1.69 it was a second scroll container that setupMobileScrollSync() kept in step from scroll
   events: always a frame behind, and gliding on Safari because the grid had scroll-behavior:
   smooth. The width lives in --tl-sidebar-w (set on .months-scroll-container) because the month
   title's sticky `left` must be the same number. */
.static-sidebar{
    width: var(--tl-sidebar-w, 250px);
    background: var(--bg-secondary);
    border-right: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    left: 0;
    /* Sized by its own rows, never by the flex line: align-self: stretch made it exactly the
       scroll container's VISIBLE height, so its background (and the range its sticky stats
       block could stick in) ended one screen-height into the content — every row below that
       point showed the grid through it once scrolled into view. The minimum keeps the column
       painted down to the bottom when there are fewer rows than fit. */
    align-self: flex-start;
    min-height: 100%;
    z-index: 20; /* above the sticky month/day header rows (8/7), the month title (9) and every bar layer (≤15) */
}.hidden{
    display: none !important;
}.schema-history-toggle-btn{
    margin-top: var(--spacing-md);
}.months-scroll-container{
    /* Layout constants shared by the sticky sidebar, the sticky Timeline_MonthRow /
       Timeline_DaysRow and the sidebar's stats block, so the three can never disagree about
       where the first row starts. Per-breakpoint values follow in the media blocks below and in
       calendar-refresh.css (loaded later, so its values are the ones in effect). */
    --tl-sidebar-w: 250px;
    --tl-month-h: 36px;
    --tl-days-h: 54px;
    flex: 1;
    overflow-x: auto;
    overflow-y: auto; /* Enable vertical scrolling */
    display: flex;
    background: var(--bg-primary);
    position: relative;
    /* A horizontal trackpad swipe that reaches the first (or last) loaded month must not chain
       on to the document, where macOS Safari and Chrome turn the leftover swipe into a "go
       back" navigation. The neighbouring month is normally loaded before the edge is reached,
       but a fast fling can get there first, and at the two-year floor the edge is real. */
    overscroll-behavior-x: contain;
    /* No scroll-behavior: smooth here — it made every programmatic scrollTop/scrollLeft
       assignment animate, which is what the old sidebar sync was fighting against. */
}/* Individual Month Container */
.month-container{
    display: flex;
    flex-direction: column;
    min-width: fit-content;
    border-right: 2px solid var(--primary-color);
    background: var(--bg-secondary);
}.month-sticky-title{
    position: sticky;
    left: var(--tl-sidebar-w, 0px); /* the sidebar occupies the scroll container's left edge */
    background: transparent;
    color: white;
    font-weight: 600;
    text-align: center;
    font-size: 0.8rem; /* Smaller font for compact view */
    z-index: 9;
    padding-right: var(--spacing-md);
}.month-room-row,
.month-car-row{
    display: flex;
    border-bottom: 1px solid var(--border-color);
    height: 60px;
    min-height: 60px;
    box-sizing: border-box;
    position: relative; /* contain absolutely-positioned booking bars */
    overflow: visible;  /* bars may extend slightly outside (e.g. hover lift) */
}/* "Show Rates" sub-row — one per active rate plan,
directly below its room's row.
   Grid variant (.month-rate-row) and sidebar variant (.rate-plan-row) MUST share
   the same height so the two independently-scrolling columns stay aligned. */
.month-rate-row{
    display: flex;
    border-bottom: 1px solid var(--border-color);
    height: 32px;
    min-height: 32px;
    box-sizing: border-box;
    background: var(--bg-primary);
}.month-cell.rate-cell{
    position: relative;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
}.month-cell.rate-cell:hover{
    background: var(--accent-light);
    color: var(--text-primary);
}.month-cell.rate-cell.no-rate{
    color: var(--border-color);
    font-weight: 400;
}/* Stop Sell — whole cell flagged,
rate struck through */
.month-cell.rate-cell.stop-sell{
    background: rgba(244, 67, 54, 0.1);
    color: var(--error-color);
    text-decoration: line-through;
}/* Closed to Arrival / Closed to Departure — compact corner badges so the
   centered rate number stays readable and the cell isn't overloaded. */
.month-cell.rate-cell.cta::before,
.month-cell.rate-cell.ctd::after{
    position: absolute;
    top: 1px;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--error-color);
}.month-cell.rate-cell.cta::before{
    content: 'CA';
    left: 2px;
}.month-cell.rate-cell.ctd::after{
    content: 'CD';
    right: 2px;
}/* Min / max stay — small muted numbers in the bottom corners (informational,
   not a blocking restriction, so kept visually distinct from CA/CD/stop-sell). */
.rate-cell .stay-badge{
    position: absolute;
    bottom: 1px;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-secondary);
}.rate-cell .stay-badge-min{
    left: 2px;
}.rate-cell .stay-badge-max{
    right: 2px;
}/* A period with more prices than the base cell shown (per person / per sleeping room
   rows, length-of-stay columns) — thin accent bar; the tooltip lists the matrix. */
.month-cell.rate-cell.has-matrix{
    box-shadow: inset 0 -2px 0 var(--primary-color);
}.month-cell{
    min-width: 80px;
    width: 80px;
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.2s;
}/* Month cells that are also grid cells (room/car cells) should have light green background when available */
.month-cell.grid-cell{
    background: #e8f5e8; /* Nice light green background for available cells */
}.month-cell:hover{
    background: var(--accent-light);
}.section-header h3{
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}.room-row{
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
    box-sizing: border-box;
}.room-row:hover{
    background: var(--bg-primary);
}.room-row.selected{
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--secondary-color) 100%);
    border-left: 4px solid var(--primary-color);
}/* Car selection styles (matching room styles) */
.car-row{
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
    box-sizing: border-box;
}.car-row:hover{
    background: var(--bg-primary);
}.car-row.selected{
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--secondary-color) 100%);
    border-left: 4px solid var(--primary-color);
}/* "Show Rates" sidebar sub-row — sibling of the grid's .month-rate-row,
same height */
.rate-plan-row{
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md) 0 calc(var(--spacing-md) + 12px);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}.rate-plan-row-label{
    font-size: 0.72rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}/* Time-slot car: disabled when incompatible selection active */
.car-row.slot-disabled,
.room-row.slot-disabled{
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}/* Badge shown on time-slot car labels */
.time-slot-car-badge{
    display: inline-block;
    font-size: 12px;
    background: #e8f4fd;
    color: #0066cc;
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 4px;
    vertical-align: middle;
    cursor: help;
}/* Property badge shown on the mobile "Calendars" tab's per-room mini-calendar header in
   "All Properties" mode (each room already has its own separate card there, so a badge next
   to its title is an unambiguous, non-repetitive indicator of which Property it belongs to). */
.property-badge{
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    background: var(--accent-light);
    color: var(--primary-color);
    border-radius: var(--border-radius);
    padding: 1px var(--spacing-xs);
    margin-left: var(--spacing-xs);
    vertical-align: middle;
}/* Property caption row — Timeline sidebar (rooms-labels) and Timeline grid (month-container),
inserted once per Property group in "All Properties" mode. Rooms are 1:1 with a Property,
so
   grouping them under one caption row is unambiguous (unlike Vehicles, which are never grouped
   this way — see car_tenant_assignments many-to-many). Uses a distinct warm color so it's not
   confused with the teal "Rooms"/"Vehicles" .Timeline_Section captions. Fixed height (rather
   than content-driven) so the sidebar's and every month-container's copy of this row resolve
   to the exact same pixel height regardless of Property-name length/width,
keeping the two
   independently-scrolling panels vertically aligned. */
.property-caption{
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-md);
    background: linear-gradient(135deg, var(--warm-accent) 0%, var(--warm-neutral) 100%);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--border-color);
}.slot-booked-tag{
    font-size: 11px;
    background: #ffecec;
    color: #c0392b;
    border-radius: 3px;
    padding: 1px 5px;
}/* ── Inline slot section inside booking modal ──────────────────────────── */
#slotSection{
    background: #f7fbff;
    border: 1px solid #c8e0f7;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
}#slotSection .form-group{
    margin-bottom: 10px;
}#slotSection .form-control{
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}.slot-inline-info{
    margin: 0 0 10px;
    font-size: 12px;
    color: #555;
}.slot-inline-checkboxes{
    display: flex;
    flex-direction: column;
    gap: 6px;
}.slot-inline-option{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    transition: border-color .12s, background .12s;
}.slot-inline-option:hover{ border-color: #4594a2; background: #f0fafb; }.slot-inline-option input{ flex-shrink: 0; accent-color: #4594a2; }.slot-inline-label{ flex: 1; font-weight: 600; font-size: 13px; }.slot-inline-time{ font-size: 12px; color: #667085; }.slot-inline-option.slot-booked{
    opacity: 0.5;
    background: #f5f5f5;
    cursor: not-allowed;
}/* List-view slot grid: horizontal layout within a 32px day row */
.lv-slot-grid{
    flex-direction: row;
    position: absolute;
    inset: 0;
    padding: 3px 2px;
    gap: 2px;
    pointer-events: none;
}.lv-slot-grid .slot-cell-row{
    border-radius: 3px;
}.lv-slot-grid .slot-cell-label{
    font-size: 7px;
}/* Calendar-view slot chips inside day cells */
.mobile-day-cell{
    position: relative; /* ensure chips are contained */
}.cal-slot-grid{
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
    width: 100%;
}.cal-slot-chip{
    border-radius: 2px;
    font-size: 7px;
    font-weight: 700;
    line-height: 1;
    padding: 1px 2px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}.cal-slot-chip.slot-cell-free{
    background: rgba(0,0,0,0.06);
    color: transparent; /* hide label for free slots — just show the stripe */
}.cal-slot-chip.slot-cell-booked.is-confirmed{
    background: var(--gf-confirmed, #4594A2);
    color: var(--gf-confirmed-fg, #fff);
}.cal-slot-chip.slot-cell-booked.is-tentative{
    background: var(--gf-tentative, #FEE892);
    color: var(--gf-tentative-fg, #6a4a08);
}/* Selected Rooms | Selected Vehicles side by side — same .form-row bug workaround as
   .date-row/.guest-count-row (search that class here for the full explanation): a later,
unconditional .form-group rule forces flex-direction: column,
so a plain .form-row would
   stack instead of sitting side by side. Rooms is always the first child (left),
Vehicles
   the second (right, when shown) — DOM order,
not just CSS,
so it still reads Rooms-then-
   Vehicles with no CSS at all (e.g. a screen reader). */
.rooms-vehicles-row{
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md, 16px);
    margin-top: 4px;
    margin-bottom: var(--spacing-md, 16px);
}.rooms-vehicles-row .form-group{
    flex: 1;
    margin-bottom: 0;
}/* ── Slot-grid cell visual (timeline) ──────────────────────────────────── */
/*  Replaces the old occupied/half-day classes for time-slot cars.          */
/*  Horizontal (row) layout: slots read left-to-right within the day cell,
*/
/*  matching the Timeline's own left-to-right day axis (e.g. AM left of PM).*/
.slot-cell-grid{
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    gap: 1px;
    padding: 2px;
    box-sizing: border-box;
}.slot-cell-row{
    flex: 1;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}.slot-cell-row.slot-cell-free{
    background: rgba(0,0,0,0.04);
    border: 1px dashed rgba(0,0,0,0.12);
}.slot-cell-row.slot-cell-booked.is-confirmed{
    background: var(--gf-confirmed, #4594A2);
    color: var(--gf-confirmed-fg, #fff);
}.slot-cell-row.slot-cell-booked.is-tentative{
    background: var(--gf-tentative, #FEE892);
    color: var(--gf-tentative-fg, #6a4a08);
}.slot-cell-label{
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}/* Date range selection styles - Generic grid-cell selectors */
.grid-cell.date-selected{
    background: rgba(33, 150, 243, 0.2) !important;
    border: 2px solid var(--primary-color) !important;
}/* ==========================================
   MOBILE CALENDAR LAYOUT
   ========================================== */

/* Mobile Calendar Container - Hidden on desktop,
shown on mobile */
.mobile-calendar-container{
    display: none;
    flex-direction: column;
    background: var(--bg-primary);
    height: 70vh;
    overflow: hidden;
}.mobile-calendar-container.active{
    display: flex;
}/* Mobile List Container (separate view) */
.mobile-list-container{
    display: none;
    flex-direction: column;
    background: var(--bg-primary);
    flex: 1;
    overflow: hidden;
    min-height: 0;
}.mobile-list-container.active{
    display: flex;
}.mobile-list-view{
    flex: 1;
    padding: var(--spacing-md);
}.mobile-tab{
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-right: 1px solid var(--border-color);
}.mobile-tab:last-child{
    border-right: none;
}.mobile-tab.active{
    background: var(--primary-color);
    color: white;
}.mobile-tab:hover:not(.active){
    background: var(--accent-light);
}.mobile-list-view,
.mobile-calendar-view{
    display: none;
    height: 100%;
    overflow-y: auto;
}.mobile-list-view.active,
.mobile-calendar-view.active{
    display: flex;
    flex-direction: column;
}.mobile-no-rooms,
.mobile-no-cars{
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
    font-style: italic;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-color);
}/* Mobile Calendars Grid */
.mobile-calendars-grid{
    padding: var(--spacing-md);
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns side by side */
    gap: var(--spacing-md);
    overflow-y: auto;
    min-height: 600px; /* Increased for full month display */
}/* Individual Room/Car Calendar */
.mobile-room-calendar,
.mobile-car-calendar{
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-light);
    overflow: hidden;
    border: 1px solid var(--border-color);
    height: auto;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}/* Mobile Calendar Header (Room/Car name) */
.mobile-calendar-item-header{
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: var(--spacing-sm); /* Smaller padding for compact view */
    font-weight: 600;
    text-align: center;
    font-size: 0.8rem; /* Smaller font for compact view */
    transition: all 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
}/* Mobile Calendar Header Selected State */
.mobile-calendar-item-header.selected{
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.3);
    transform: scale(1.02);
}/* Mobile Calendar Container Selected State */
.mobile-room-calendar.selected,
.mobile-car-calendar.selected{
    border: 2px solid #28a745;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.2);
}/* ---- Calendar view: week-row grid with spanning booking bars ---- */

.cal-month-grid{
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-color);
    margin: 1px;
    width: 100%;
}/* Weekday-name header row */
.cal-week-headers{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-color);
}.cal-wday-header{
    background: var(--bg-primary);
    padding: 4px 2px;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}/* One week per row; bars are absolute children */
.cal-week-row{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-color);
    position: relative;
    min-height: 60px;
}/* Day cells: day number sits in top-left corner */
.cal-week-row .mobile-day-cell{
    min-height: 60px;
    flex-direction: column;   /* number on top, slot grid fills remaining height */
    align-items: flex-start;
    justify-content: flex-start;
    padding: 3px 4px 4px;
    font-size: 0.68rem;
    z-index: 1;
}/* Slot-car chips: fill the space below the date number */
.cal-week-row .mobile-day-cell .cal-slot-grid{
    flex: 1;
    width: 100%;
    margin-top: 3px;
    gap: 2px;
    min-height: 0;
}.cal-week-row .mobile-day-cell .cal-slot-chip{
    flex: 1;
    min-height: 12px;
    font-size: 9px;
    padding: 1px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}/* Bar fills the row vertically below the day number,
like the timeline bar */
.booking-bar-span.cal-bar{
    position: absolute;
    top: 18px;
    bottom: 5px;
    height: auto;
    font-size: 11px;
    padding: 0 8px 0 4px;
    border-radius: 20px;
    gap: 5px;
    line-height: 1;
    z-index: 2;
}.booking-bar-span.cal-bar .bar-avatar{
    width: 22px;
    height: 22px;
    font-size: 10px;
}.booking-bar-span.cal-bar .bar-name{
    font-size: 11px;
    font-weight: 600;
}.booking-bar-span.cal-bar .bar-guests{
    font-size: 10px;
    padding: 0 4px;
}.booking-bar-span.cal-bar .bar-icon{
    font-size: 12px;
    background: rgba(255,255,255,0.90);
    border-radius: 3px;
    padding: 0 2px;
    line-height: 1.3;
}/* ── DRAFT BOOKING (new booking in progress) ───────────────────────── */
/* Confirmed draft: stripe pattern with primary colour,
same as timeline-bar-selection */
.booking-bar-span.is-draft{
    background: repeating-linear-gradient(
        45deg,
        color-mix(in oklab, var(--primary-color) 55%, white) 0 6px,
        color-mix(in oklab, var(--primary-color) 30%, white) 6px 12px
    );
    color: var(--primary-color);
    border: 1.5px dashed var(--primary-color);
    box-shadow: 0 1px 6px color-mix(in oklab, var(--primary-color) 25%, transparent);
    cursor: pointer;
    z-index: 3; /* always above existing booking bars (z-index 2) */
}/* Pending draft (start set, no end): subtle stub */
.booking-bar-span.is-draft-pending{
    background: color-mix(in oklab, var(--primary-color) 20%, white);
    color: var(--primary-color);
    border: 1.5px dashed color-mix(in oklab, var(--primary-color) 60%, white);
    opacity: 0.7;
    pointer-events: none;
    border-radius: 20px 0 0 20px; /* rounded-left = starts here, flat-right = continues */
    z-index: 3;
}/* Confirmed selection bar: dashed outline{
    background: repeating-linear-gradient(
        45deg,
        color-mix(in oklab, var(--primary-color) 55%, white) 0 6px,
        color-mix(in oklab, var(--primary-color) 30%, white) 6px 12px
    );
    color: var(--primary-color);
    border: 1.5px dashed var(--primary-color);
    box-shadow: 0 1px 6px color-mix(in oklab, var(--primary-color) 25%, transparent);
    pointer-events: none;
}/* Hover preview bar: very light ghost */
.booking-bar-span.cal-bar.cal-bar-preview{
    background: color-mix(in oklab, var(--primary-color) 15%, white);
    color: color-mix(in oklab, var(--primary-color) 80%, black);
    border: 1.5px dashed color-mix(in oklab, var(--primary-color) 50%, white);
    opacity: 0.75;
    pointer-events: none;
    transition: none;
}/* Timeline hover preview bar (rubber-band during date range selection) */
.booking-bar-span.timeline-bar-preview{
    background: color-mix(in oklab, var(--primary-color) 15%, white);
    color: color-mix(in oklab, var(--primary-color) 80%, black);
    border: 1.5px dashed color-mix(in oklab, var(--primary-color) 50%, white);
    opacity: 0.75;
    pointer-events: none;
    transition: none;
    border-radius: 20px;
}/* Timeline start-only stub (before end date is chosen) */
.booking-bar-span.timeline-bar-start{
    background: color-mix(in oklab, var(--primary-color) 15%, white);
    color: color-mix(in oklab, var(--primary-color) 80%, black);
    border: 1.5px dashed color-mix(in oklab, var(--primary-color) 50%, white);
    opacity: 0.75;
    pointer-events: none;
    transition: none;
    border-radius: 20px 0 0 20px; /* rounded-left = starts here, flat-right = continues */
    z-index: 3;
}/* Timeline confirmed selection bar (after end date chosen) */
.booking-bar-span.timeline-bar-selection{
    background: repeating-linear-gradient(
        45deg,
        color-mix(in oklab, var(--primary-color) 55%, white) 0 6px,
        color-mix(in oklab, var(--primary-color) 30%, white) 6px 12px
    );
    color: var(--primary-color);
    border: 1.5px dashed var(--primary-color);
    box-shadow: 0 1px 6px color-mix(in oklab, var(--primary-color) 25%, transparent);
    pointer-events: none;
    border-radius: 20px;
}.booking-bar-span.timeline-bar-selection .bar-name.timeline-end-label,
.booking-bar-span.timeline-bar-preview .bar-name.timeline-end-label{
    margin-left: auto;
    text-align: right;
    padding-right: 6px;
}/* Mobile Calendar Day Cells */
.mobile-day-cell{
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    padding: 2px;
    /* Remove min-height - let grid rows determine size */
}.mobile-day-cell:hover{
    background: var(--accent-light);
}.mobile-day-cell.other-month{
    color: var(--text-secondary);
    opacity: 0.5;
}.mobile-day-cell.today{
    background: color-mix(in oklab, #22c55e 18%, white);
    color: var(--text-primary);
    font-weight: 600;
}.mobile-day-cell.weekend{
    background: var(--gf-paper-warm);
}.mobile-day-cell.holiday{
    background: var(--warm-neutral);
    font-weight: 600;
}.mobile-day-cell.is-blocked{
    background: var(--error-color);
    color: white;
}.mobile-day-cell.is-blocked::before{
    content: "✕";
    position: absolute;
    font-size: 0.7rem;
    top: 2px;
    right: 2px;
}/* Mobile calendar item selection highlighting */
.mobile-room-calendar.selected,
.mobile-car-calendar.selected{
    border: 2px solid var(--primary-color) !important;
    background: rgba(69, 148, 162, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(69, 148, 162, 0.3) !important;
}.mobile-calendar-item-header.selected{
    background: var(--primary-color) !important;
    color: white !important;
    font-weight: bold !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}/* Responsive Design */
@media (max-width: 768px){
    /* Hide desktop calendar on mobile */
    .desktop-calendar {
        display: none;
    }
    
    /* Show mobile calendar on mobile */
    .mobile-calendar-container {
        display: flex;
    }
    
    /* Adjust calendar view height for mobile */
    .mobile-calendar-container {
        height: calc(100vh - 200px); /* Account for header and nav */
    }
    
    /* Mobile calendar grid adjustments for very small screens */
    .mobile-calendars-grid {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
        grid-template-columns: 1fr; /* Single column on very small screens */
    }
    
    /* Even smaller day cells on very small screens */
    .mobile-day-cell {
        min-height: 20px;
        font-size: 0.6rem;
    }
}

@media (min-width: 769px) {/* Show desktop calendar on larger screens by default */
    .desktop-calendar{
        display: flex;
    }/* Hide mobile calendar on desktop by default */
    .mobile-calendar-container{
        display: none;
    }
}/* Large tablets and desktop - option to switch to mobile view */
/* Three-View Switcher for all screen sizes */
.view-switcher{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 8px;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}.view-btn{
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
    font-size: 0.9rem;
    flex: 1;
    min-width: 100px;
    max-width: 150px;
}.view-btn.active{
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}.view-btn:hover:not(.active){
    background: var(--accent-light);
}/* Responsive view button sizing */
@media (max-width: 480px){
    .view-btn {
        font-size: 0.8rem;
        padding: var(--spacing-xs) var(--spacing-sm);
        min-width: 80px;
    }
}/* Force view display classes - highest specificity */
.view-timeline .desktop-calendar{
    display: flex !important;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
}.view-timeline .mobile-calendar-container,
.view-timeline .mobile-list-container{
    display: none !important;
}.view-calendars .mobile-calendar-container{
    display: flex !important;
}.view-calendars .desktop-calendar,
.view-calendars .mobile-list-container{
    display: none !important;
}.view-list .mobile-list-container{
    display: flex !important;
}.view-list .desktop-calendar,
.view-list .mobile-calendar-container{
    display: none !important;
}/* Shared Month Header for all views */
.shared-month-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--primary-color);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    box-shadow: var(--shadow-light);
}.month-display-shared{
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
    flex: 1;
    margin: 0 var(--spacing-md);
}/* The month navigator's own look now comes from .btn-icon-nav, which both buttons carry —
   they used to be 40px solid-teal circles defined here. Only the JS hooks (.prev-month-shared
   / .next-month-shared, see modules/bookings/app.js) remain on them. */

/* Date range indicator elements (new approach - no grid cell modification) */
/* ONLY used for MIDDLE dates - start/end use existing half-day indicators */
.date-range-indicator{
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    z-index: 10;
    border-radius: 4px;
    transition: all 0.2s ease;
}/* Middle date indicators - subtle bar in center of cell */
.date-range-indicator.range-middle{
    top: 40%;
    left: 10%;
    right: 10%;
    height: 20%;
    background: rgba(33, 150, 243, 0.4);
    border: 1px solid rgba(33, 150, 243, 0.6);
    border-radius: 2px;
}/* Conflict middle date indicators */
.date-range-indicator.conflict.range-middle{
    background: rgba(244, 67, 54, 0.4);
    border: 1px solid rgba(244, 67, 54, 0.6);
}/* Hover effects for date range indicators - improves clickability feedback */
.date-range-indicator:hover{
    opacity: 0.8;
    transform: scale(1.05);
}/* Ensure indicators work well with existing booking blocks */
.date-range-indicator + .booking-block,
.booking-block + .date-range-indicator{
    z-index: 15;
}/* Edit mode styling for booking blocks */
.booking-block.edit-mode-start,
.booking-block.edit-mode-end{
    outline: 3px solid var(--primary-color) !important;
    outline-offset: -2px;
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.4);
    z-index: 10;
    /* Avoid position: relative to prevent flex layout issues */
}/* Special handling for half-day blocks in edit mode */
.grid-cell.half-day .booking-block.edit-mode-start,
.grid-cell.half-day .booking-block.edit-mode-end{
    outline-offset: -1px;
    box-shadow: inset 0 0 8px rgba(33, 150, 243, 0.3);
}/* Subtle grid cell highlighting for edit mode without layout disruption */
.grid-cell.edit-mode-cell{
    /* Very subtle highlighting that doesn't interfere with existing layout */
    filter: brightness(1.05);
}/* Selected car display */
.selected-car{
    display: inline-block;
    background: var(--warm-accent);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    margin-right: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
}.selected-car .remove{
    margin-left: var(--spacing-xs);
    cursor: pointer;
    font-weight: bold;
}.selected-car .remove:hover{
    color: #ffcdd2;
}.room-info h4{
    font-size: 0.9rem;
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.2;
}.room-info p{
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.2;
}.grid-row{
    display: flex;
    height: 90px;
    min-height: 90px;
    max-height: 90px;
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
}.grid-cell{
    min-width: 80px;
    width: 80px;
    height: 100%;
    padding: var(--spacing-md);
    text-align: center;
    border-right: 1px solid var(--border-color);
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}.grid-cell:hover{
    background: #f0f0f0;
}/* Grid cells should always have consistent background - clean grid design */
.grid-cell{
    background: #fff; /* Default white background for clean grid */
    border: 1px solid #e0e0e0;
}/* Remove the half-day override - not needed anymore */

.grid-cell.selected{
    background: var(--primary-color);
    opacity: 0.8;
    position: relative;
}/* Date adjustment buttons for selected cells during booking creation */
.grid-cell.selected .selection-date-adjust-buttons{
    display: flex;
    gap: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}.grid-cell.selected:hover .selection-date-adjust-buttons{
    opacity: 1;
}.selection-date-adjust-btn{
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #333;
    line-height: 1;
}.selection-date-adjust-btn:hover{
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}.selection-date-adjust-btn.extend{
    background: rgba(76, 175, 80, 0.9);
    color: white;
}.selection-date-adjust-btn.extend:hover{
    background: #4CAF50;
}.selection-date-adjust-btn.reduce{
    background: rgba(244, 67, 54, 0.9);
    color: white;
}.selection-date-adjust-btn.reduce:hover{
    background: #F44336;
}.booking-block{
    border-radius: 4px;
    padding: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 100%;
    width: 100%;
}/* Guest name styling - two lines,
left aligned */
.booking-block .guest-name{
    font-size: 9px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    padding: 0;
    text-align: left;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}.booking-block.empty-half{
    /* Positioning is now handled by .half-day-content-container rules above */
    min-height: 40px;
}.booking-block.confirmed{
    background: var(--success-color);
    color: white;
}.booking-block.reservation{
    background: var(--warning-color);
    color: white;
    border: 2px dashed rgba(255,255,255,0.5);
}/* Half-day indicators - full height bars that sit within existing cells */
.half-day-indicator{
    position: absolute;
    width: 50%;
    height: 100%;
    background: var(--primary-color);
    border: 1px solid var(--primary-dark);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    /* Ensure the indicator doesn't affect the parent's layout */
    pointer-events: auto;  /* Allow button clicks */
}.half-day-indicator.checkin-indicator{
    /* Position on the right half for start date (checkin) */
    right: 0;
    left: auto;  /* Ensure left is not interfering */
}.half-day-indicator.checkout-indicator{
    /* Position on the left half for end date (checkout) */
    left: 0;
    right: auto;  /* Ensure right is not interfering */
}/* Simple conflict background for half-day indicators */
.half-day-indicator.conflict-background{
    background: #f44336 !important; /* Red background for conflicts */
    border: 2px solid #d32f2f !important;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.4) !important;
}/* Half-day indicator states - matching booking block styles */
.half-day-indicator.confirmed{
    background: var(--success-color);
    border: 1px solid var(--success-dark);
    color: white;
}.half-day-indicator.reservation{
    background: var(--warning-color);
    border: 2px dashed rgba(255,255,255,0.5);
    color: white;
}.half-day-indicator.selection-indicator{
    background: rgba(33, 150, 243, 0.4) !important; /* Blue for new booking selections */
}/* Buttons within the indicator */
.indicator-buttons{
    display: flex;
    flex-direction: column;
    gap: 3px;
}/* Half-day styles - back to original grid-cell approach */
.grid-cell.half-day{
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 0px;
    padding: 0;
}/* Empty half for single checkin/checkout - NO RED BACKGROUND */
.booking-block.empty-half{
    background: transparent;
    border: none;
    opacity: 1;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}/* Selection blocks for new booking preview */
.booking-block.selection-block{
    background: var(--primary-color);
    border: 1px solid var(--primary-dark);
}/* Buttons within selection blocks */
.booking-block.selection-block .selection-date-adjust-buttons{
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 0.2s ease;
    z-index: 10;
}.date-adjust-buttons{
    display: flex;
    gap: 2px;
    margin-top: 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
}.booking-block:hover .date-adjust-buttons{
    opacity: 1;
}.date-adjust-btn{
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #333;
    line-height: 1;
}.date-adjust-btn:hover{
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}.date-adjust-btn.extend{
    background: rgba(76, 175, 80, 0.9);
    color: white;
}.date-adjust-btn.extend:hover{
    background: #4CAF50;
}.date-adjust-btn.reduce{
    background: rgba(244, 67, 54, 0.9);
    color: white;
}.date-adjust-btn.reduce:hover{
    background: #F44336;
}/* Ensure buttons don't interfere with text readability */
.booking-block{
    position: relative;
}/* Modal Styles */
.modal{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
    /* pan-y: allow vertical scroll inside modal-body to reach inner containers
       while blocking horizontal swipes from triggering browser back/forward navigation. */
    touch-action: pan-y;
}.modal.active{
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}.modal-content{
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-large);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    min-width: 0; /* prevent flex children from forcing width beyond viewport */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.2s ease-out;
}.modal-content.fullscreen{
    position: absolute;
    top: 2%;
    bottom: 2%;
    left: 1%;
    right: 1%;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0;
}/* Floating modal: no dimming backdrop,
page behind stays visible/clickable,
only the modal card itself intercepts clicks. Draggable via its header. */
.modal.floating{
    background: transparent;
    pointer-events: none;
}.modal.floating .modal-content{
    pointer-events: auto;
    box-shadow: var(--shadow-large), 0 0 0 1px var(--border-color);
}/* Modal header icon buttons — copy, expand, close — share one 32px round target so they sit on
   one line, centred, evenly spaced, and are as easy to hit as each other. Each keeps its own
   glyph size; the box, not the glyph, sets the rhythm. */
.modal-expand,
.modal-copy-btn,
.close-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background-color 0.2s;
}.modal-expand{
    font-size: 1.8rem;
    color: #999;
    user-select: none;
}.modal-expand:hover,
.modal-expand.is-expanded{
    color: #333;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}.modal-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--gf-paper-warm, #faf8f3);
    cursor: grab;
    /* no border-bottom here — the nav strip below provides the separator */
}.modal-content.fullscreen .modal-header{
    cursor: default;
}.modal-header h3{
    font-size: 1.2rem;
    font-weight: 600;
}.modal-title-group{
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}.modal-copy-btn{
    color: #999;
}.modal-copy-btn svg{
    width: 18px;
    height: 18px;
}.modal-copy-btn:hover{
    color: #333;
    background: var(--background);
}/* Customer modal only: title shrinks and the title-group grows to fill the header row, so the
   "No Payment Messages" toggle — now a sibling of .modal-title-group/.modal-header-actions,
   not nested inside the title-group — sits right-aligned directly next to the expand/close
   icons on the same line. #bookingModal shares .modal-title-group/.modal-copy-btn but not this
   toggle, so the title/title-group overrides are scoped to #customerModal to leave it untouched.
   On a narrow screen, #customerModal .modal-header itself wraps: the title-group (forced to full
   row width) takes line 1 alone, and the toggle + expand/close icons wrap together onto line 2,
   still grouped and right-aligned as a pair — never the title's line, never split apart. */
#customerModal #customerModalTitle{
    font-size: 0.85rem;
    flex-shrink: 0;
}#customerModal .modal-header{
    flex-wrap: wrap;
    row-gap: 6px;
}#customerModal .modal-title-group{
    flex: 1 1 auto;
    min-width: 0;
}.modal-payment-toggle{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.04);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gf-ink-2, #555);
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}.modal-payment-toggle input[type="checkbox"]{
    margin: 0;
    cursor: pointer;
}@media (max-width: 480px){
    #customerModal .modal-title-group{
        flex-basis: 100%;
    }
    #customerModal .modal-payment-toggle{
        margin-left: auto;
        margin-right: 8px;
    }
}/* Small copy-icon buttons inline with row/card actions (e.g. Customer modal's
   Booking tab — one per listed booking),
as opposed to .modal-copy-btn's title-line use. */
.gf-copy-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
}.gf-copy-btn svg{
    width: 14px;
    height: 14px;
}.gf-copy-btn:hover{
    color: #333;
    background: var(--background);
}/* Generic small icon button inline with a label/caption (e.g. booking form's Customer
   label → Send Message icon) — same visual weight as .gf-copy-btn,
kept separate since
   it's not copy-specific. */
.gf-icon-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
}.gf-icon-btn svg{
    width: 20px;
    height: 20px;
}.gf-icon-btn:hover{
    color: #333;
    background: var(--background);
}/* Row pairing a .form-group's <label> with a right-aligned action (e.g. .gf-icon-btn) on
   the same line — the label's own margin-bottom moves to the row so spacing below stays
   the same as a plain label. */
.form-group-label-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
}.form-group-label-row label{
    margin-bottom: 0;
}.modal-header-actions{
    display: flex;
    align-items: center;
    gap: var(--spacing-xs); /* equal, tight gaps between the 32px targets */
}.close-btn{
    font-size: 1.5rem;
}.close-btn:hover{
    background: var(--background);
}.modal-body{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--spacing-lg);
    overscroll-behavior: contain;
    touch-action: pan-y;
}/* Pretty-printed JSON viewer used by the Channex API log modal (settings > system status) */
.json-log-body{
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    font-family: monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
}.json-log-details{
    margin-bottom: var(--spacing-md);
}.json-log-details summary{
    cursor: pointer;
    font-weight: 600;
    padding: var(--spacing-sm) 0;
    color: var(--text-primary);
}.json-log-details .json-log-body{
    margin-top: var(--spacing-sm);
}/* Prevent iOS Safari from auto-zooming on input focus (requires font-size >= 16px) */
.modal input,
.modal select,
.modal textarea{
    font-size: 16px;
}/* Same anti-zoom guard for page-level filter/search inputs that live outside a
   modal (Settings customer/booking filters, extras search, log/subscription
   filters, Translations search/filter, Messaging template search). iOS zooms
   the viewport on focus whenever an input's font-size is below 16px. */
.form-control,
.search-input,
.filter-select,
.filter-controls select,
#templateSearch,
#roomExtrasSearch,
#carExtrasSearch{
    font-size: 16px;
}
/* (Seven .modal-footer declarations used to hang here without a selector — a v3.10.519 edit
   pasted the rule above over their selector line. They were never applied; the live footer
   styling is the .modal-footer rule further down. Removed in v4.1.32.) */

/* Booking modal footer: 3 action buttons side by side,
each equal width */
.booking-modal-footer{
    justify-content: stretch;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}.booking-modal-footer button{
    flex: 1;
    min-width: 120px;
    justify-content: center;
    text-align: center;
}

@media (max-width: 380px) {.booking-modal-footer{
        flex-direction: column;
    }.booking-modal-footer button{
        flex: none;
        width: 100%;
    }
}/* Form Styles */
.form-group{
    margin-bottom: var(--spacing-md);
}.form-row{
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}.form-row .form-group{
    flex: 1;
    margin-bottom: 0;
}.form-group label{
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    font-size: 0.9rem;
}.flight-inline-row{
    display: flex;
    gap: var(--spacing-sm);
}.flight-inline-row .flight-number-input{
    flex: 1 1 0;
    min-width: 0;
}.flight-inline-row .flight-time-input{
    /* Fixed width that always fits "HH:MM" (v4.1.105): sharing the row by ratio squeezed the
       time field until the minutes were cut off on narrow modals — on the Mac it showed "15:"
       and nothing more. The flight number takes whatever is left. */
    flex: 0 0 6em;
    width: 6em;
    min-width: 6em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}.flight-time-input.is-invalid{
    /* Not a time of day (see app.js _normalizeFlightTimeInput) — the save is refused too. */
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}.form-help-text{
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    font-style: italic;
}.form-section-header{
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--primary-color);
}.form-section-header h4{
    margin: 0;
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
}/* Date input group with adjustment buttons */
.date-input-group{
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 2px;
    background: var(--surface);
}.date-input-group input[type="date"]{
    flex: 1;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    background: transparent;
    outline: none;
}.date-input-group:focus-within{
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}.date-adjust-btn-modal{
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-primary);
}.date-adjust-btn-modal:hover{
    background: var(--background);
    transform: scale(1.05);
}.date-adjust-btn-modal.extend{
    background: rgba(76, 175, 80, 0.1);
    border-color: #4CAF50;
    color: #4CAF50;
}.date-adjust-btn-modal.extend:hover{
    background: rgba(76, 175, 80, 0.2);
    border-color: #388E3C;
}.date-adjust-btn-modal.reduce{
    background: rgba(244, 67, 54, 0.1);
    border-color: #F44336;
    color: #F44336;
}.date-adjust-btn-modal.reduce:hover{
    background: rgba(244, 67, 54, 0.2);
    border-color: #D32F2F;
}.date-range-invalid{
    border-color: #F44336 !important;
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.15) !important;
}.form-group input,
.form-group select,
.form-group textarea{
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline: none;
    border-color: var(--primary-color);
}.form-group input[type="checkbox"]{
    width: auto;
    margin-right: var(--spacing-xs);
}/* Checkbox + its label sit inline */
.checkbox-group{
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}.form-group .checkbox-group label{
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1;
}.checkbox-group input[type="checkbox"]{
    margin: 0;
}/* Status field: "Status" label + Active toggle on a single line */
.form-group:has(> label + .checkbox-group){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
}.form-group:has(> label + .checkbox-group) > label{
    margin-bottom: 0;
    line-height: 1;
    white-space: nowrap;
}/* Dual List Selector */
.dual-list-container{
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-top: 8px;
}.dual-list-section{
    flex: 1;
    display: flex;
    flex-direction: column;
}.dual-list-header{
    font-size: 12px;
    font-weight: 600;
    color: #666;
    margin-bottom: 6px;
    padding: 4px 8px;
    background: #f5f5f5;
    border-radius: 4px;
    text-align: center;
}.dual-list-box{
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: white;
    cursor: pointer;
}.dual-list-box option{
    padding: 6px 8px;
    cursor: pointer;
}.dual-list-box option:hover{
    background: #f0f0f0;
}.dual-list-buttons{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 0 4px;
}.dual-list-btn{
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}.dual-list-btn:hover{
    background: var(--primary-dark);
}.dual-list-btn:active{
    transform: scale(0.95);
}.form-section{
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: var(--background);
    border-radius: var(--border-radius);
}.form-section h4{
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}.form-actions{
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}.form-actions:has(#deleteBooking:not([style*="display: none"])){
    justify-content: space-between;
}.selected-rooms{
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}/* "+ Add Room" / "+ Add Vehicle" picker row,
shown below the selected-room(s)/car(s) chips. */
.add-resource-row{
    margin-top: var(--spacing-xs);
}.add-resource-select{
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
}.selected-room{
    background: var(--primary-color);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
}.selected-room-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
}.selected-room .remove{
    cursor: pointer;
    font-weight: bold;
}.selected-room .room-rate-plan-select{
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.75rem;
    padding: 2px 4px;
}.selected-room .room-rate-plan-select option{
    color: #101828;
}.customer-card{
    background: var(--surface);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: box-shadow 0.2s;
}.customer-card:hover{
    box-shadow: var(--shadow-large);
}.customer-card h4{
    margin-bottom: var(--spacing-xs);
}.customer-card p{
    color: var(--text-secondary);
    font-size: 0.9rem;
}.customer-stat{
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}.car-card{
    background: var(--surface);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow 0.2s;
}.car-card:hover{
    box-shadow: var(--shadow-large);
}.car-image{
    height: 200px;
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}.car-info{
    padding: var(--spacing-md);
}.car-info h4{
    margin-bottom: var(--spacing-xs);
}.car-info p{
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
}.car-price{
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.1rem;
}.report-card{
    background: var(--surface);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
}.report-card h3{
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}/* Breakfast Orders */
.breakfast-orders{
    display: grid;
    gap: var(--spacing-md);
}.breakfast-order{
    background: var(--surface);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
}.breakfast-order h4{
    margin-bottom: var(--spacing-sm);
}.breakfast-items{
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}.breakfast-item{
    background: var(--background);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: 0.8rem;
}/* Loading Indicator */
/* The page's own full-screen loading overlay (#loadingIndicator). Its own class since v4.1.127:
   as .loading it also collected the inline row's spinning ring and the hourglass from the two
   other .loading definitions this file carried, so it showed an hourglass in a small ring above
   its .spinner. Inline "Loading…" rows use .loading (further down). */
.loading-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    flex-direction: column;
}.loading-overlay.active{
    display: flex;
}.spinner{
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}/* Skeleton Loading — .isLoading
   Applied to content containers in HTML at page load.
   Removed by JS once database data has fully loaded. */
.isLoading{
    position: relative;
    overflow: hidden;
    pointer-events: none;
    min-height: 60px;
    border-radius: var(--border-radius, 4px);
}.isLoading > *{
    visibility: hidden;
}/* The Timeline's sticky sidebar lives inside #monthsScrollContainer and shimmers its own
   stats/labels blocks — keep it visible while the month grid around it is still loading. */
#monthsScrollContainer.isLoading > .static-sidebar{
    visibility: visible;
}.isLoading::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #e8eaec 25%, #f2f4f6 50%, #e8eaec 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: inherit;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}/* Toast Notifications */
.toast-container{
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: flex-end;
}/* One-click prompt to resume fullscreen after a sidebar navigation,
shown when the
   browser rejects the automatic re-request (no carried-over user gesture). */
.fullscreen-resume-prompt{
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-large);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    animation: slideInRight 0.3s ease-out;
}.fullscreen-resume-prompt:hover{
    background: var(--secondary-color);
}.fullscreen-resume-dismiss{
    font-weight: 400;
    opacity: 0.8;
    padding: 0 var(--spacing-xs);
}.fullscreen-resume-dismiss:hover{
    opacity: 1;
}.toast{
    background: var(--accent-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-large);
    padding: var(--spacing-md);
    min-width: auto;
    max-width: 400px;
    width: max-content;
    animation: slideInRight 0.3s ease-out;
    border-left: 4px solid var(--primary-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    position: relative;
}.toast-message{
    flex: 1;
}.toast-close{
    background: none;
    border: none;
    color: inherit;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}.toast-close:hover{
    opacity: 1;
}.toast.success{
    background: var(--accent-light);
    border-left-color: var(--success-color);
}.toast.error{
    background: var(--warm-accent);
    border-left-color: var(--error-color);
    color: white;
}.toast.warning{
    background: var(--warm-neutral);
    border-left-color: var(--warning-color);
    color: white;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}/* Responsive Design */
@media (max-width: 768px){
    .app-header {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .logo-icon {
        width: 28px;
        height: 28px;
    }

    .main-content {
        padding: var(--spacing-md);
    }

    .calendar-controls {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-sm);
        flex-wrap: nowrap;
    }

    .calendar-controls h2 {
        text-align: center;
        margin: 0 var(--spacing-sm);
        font-size: 1.2rem;
        min-width: 0;
        flex: 1;
    }

    /* On mobile, make the whole chain flex-fill instead of using magic calc() numbers.
       main-content must not scroll itself — the internal containers handle scroll. */
    .main-content {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* #calendar-view fills its parent (.main-content) fully */
    #calendar-view.view.active {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Mobile optimizations for new calendar layout */
    .calendar-container-new {
        flex: 1;          /* fills #calendar-view instead of a fixed/calc height */
        height: auto;     /* override the desktop 70vh */
        min-height: 0;
        border-radius: 0; /* Remove border radius on mobile */
    }

    .months-scroll-container {
        --tl-sidebar-w: 200px; /* Narrower sidebar on mobile */
    }

    /* Ensure consistent row heights on mobile - separate different elements */
    .room-row, .car-row,
    .month-room-row, .month-car-row,
    .Timeline_DaysRow {
        height: 50px !important; /* Larger rows on mobile */
        min-height: 50px !important;
        max-height: 50px !important;
    }
    
    .month-cell {
        min-width: 60px; /* Smaller cells on mobile */
        width: 60px;
    }

    /* Touch-friendly buttons */
    .btn-primary, .btn-secondary, .btn-danger {
        min-height: 44px; /* iOS recommended touch target */
        padding: var(--spacing-sm) var(--spacing-md);
    }



    .Timeline_DaysRow {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
        top: var(--tl-month-h, 36px); /* the month row's height — a fixed 20px here let the month row cover the day row on scroll */
    }
}/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px){
    .months-scroll-container {
        --tl-sidebar-w: 220px;
    }

    /* Medium-sized rows for tablets */
    .room-row, .car-row,
    .month-room-row, .month-car-row,
    .Timeline_DaysRow {
        height: 55px !important;
        min-height: 55px !important;
        max-height: 55px !important;
    }
    
    .month-cell {
        min-width: 70px;
        width: 70px;
    }

    .Timeline_DaysRow {
        height: 55px !important;
        min-height: 55px !important;
        max-height: 55px !important;
        top: var(--tl-month-h, 36px); /* the month row's height — a fixed 20px here let the month row cover the day row on scroll */
    }

    /* Timeline elements height constraints for mobile. Timeline_MonthRow used to be in this
       selector too (32px !important) — the one breakpoint where the month row was not the 36px
       calendar-refresh.css gives it, which left the rows 4px below the sidebar's 90px stats block. */
    .Timeline_Section {
        height: 32px !important; /* Match mobile-calendar-item-header */
        min-height: 32px !important;
        max-height: 32px !important;
        padding: var(--spacing-xs) !important;
        font-size: 0.75rem !important;
    }
    .Timeline_Section {
        display: none !important;
    }
}/* Desktop styles - ensure proper alignment on large screens */
@media (min-width: 1025px){

    .Timeline_DaysRow {
        height: 55px !important;
        min-height: 55px !important;
        max-height: 55px !important;
    }
    
    .Timeline_Section {
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
    }
    
    .Timeline_DaysRow {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }
    
    .Timeline_Section {
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
    }
}.btn-control{
        touch-action: manipulation;
    }.room-info h4{
        font-size: 0.8rem;
    }.room-info p{
        font-size: 0.7rem;
    }.date-cell{
        min-width: 60px;
        height: 55px !important; /* Match tablet sidebar height */
        min-height: 55px !important;
        max-height: 55px !important;
        padding: var(--spacing-xs); /* Minimal padding on mobile */
        font-size: 0.7rem;
        gap: 2px; /* Minimal gap between day number and weekday */
    }.date-cell div{
        line-height: 1; /* Tight line height for compact content */
        margin: 0; /* Remove any default margins */
    }.grid-cell{
        min-width: 60px;
    }.grid-row{
        height: 60px;
    }.room-row{
        height: 60px;
    }
/* The rules around this one were written for tablets and phones (max-width 768px) but have
   applied on every screen size since v3.23.299 lost the media query's opening line — and that
   is the look everyone knows now, so they deliberately stay global. Only the stacked form rows
   are scoped back to small screens: on desktop, two-field rows (Room Number | Room Name,
   Floor | Size) sit side by side again, as the forms were designed. v4.1.32. */
@media (max-width: 768px){
    .form-row{
        flex-direction: column;
        gap: 0;
    }.form-row .form-group{
        margin-bottom: var(--spacing-md);
    }
}.modal-content{
        width: 95%;
        margin: var(--spacing-md);
    }.form-actions{
        flex-direction: column-reverse;
    }.toast-container{
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        left: auto;
        align-items: flex-end;
    }.toast{
        min-width: auto;
        max-width: calc(100vw - 2 * var(--spacing-sm));
        width: max-content;
    }

/* A phone-only block (@media max-width 480px: smaller nav tabs, 50px Timeline day cells, hidden
   ROOMS/VEHICLES section rows) used to follow here. It had been dead since v3.23.299, when a stray
   closing brace in front of it made the browser drop it, and the phone layout everyone knows is the
   one WITHOUT it — so it was retired on purpose in v4.1.32 rather than revived. See git history. */
/* Print Styles */
@media print{
    .nav-tabs,
    .modal,
    .toast-container,
    .loading,
    .loading-overlay {
        display: none !important;
    }

    .main-content {
        padding: 0;
    }

    .calendar-container {
        box-shadow: none;
        border: 1px solid var(--border-color);
    }
}/* Extra small screens (phones in portrait) */
@media (max-width: 480px){
    .calendar-controls {
        padding: var(--spacing-sm);
        background: var(--surface);
        border-radius: var(--border-radius);
        margin-bottom: var(--spacing-md);
        box-shadow: var(--shadow);
    }

    .calendar-controls h2 {
        font-size: 1rem;
        font-weight: 600;
    }

    .btn-control {
        min-width: 48px;
        min-height: 48px;
        font-size: 1.6rem;
        touch-action: manipulation;
    }

    .btn-control:hover,
    .btn-control:active {
        background: var(--primary-dark);
        transform: scale(0.95);
        transition: all 0.1s ease;
    }

    .main-content {
        padding: var(--spacing-sm);
    }
}/* Customer Search Styles */
.customer-search-container{
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}.customer-search-container input[type="text"]{
    flex: 1;
    min-width: 0;
}.customer-search-cancel-btn{
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    padding: 6px 10px;
}.customer-search-cancel-btn:hover{
    background: var(--bg-secondary);
    color: var(--text-primary);
}/* Prevent browser autocomplete dropdown */
#customerSearch{
    position: relative !important;
}#customerSearch::-webkit-contacts-auto-fill-button,
#customerSearch::-webkit-credentials-auto-fill-button{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 0 !important;
}/* Prevent browser autocomplete suggestions */
#customerSearch:-webkit-autofill,
#customerSearch:-webkit-autofill:hover,
#customerSearch:-webkit-autofill:focus,
#customerSearch:-webkit-autofill:active{
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}.customer-search-results{
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-sm);
    max-height: 300px;
    overflow-y: auto;
    box-shadow: var(--shadow-medium);
    z-index: 999999; /* High z-index to appear above browser autofill dropdowns */
}.search-results-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9em;
    color: var(--text-secondary);
    font-weight: 500;
}.search-header-actions{
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}.search-header-actions .btn-primary{
    font-size: 0.8em;
    padding: 4px 8px;
    white-space: nowrap;
}.search-results-list{
    max-height: 250px;
    overflow-y: auto;
}.customer-search-result{
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}.customer-search-result:hover{
    background: var(--accent-light);
}.customer-search-result:last-child{
    border-bottom: none;
}.customer-result-info{
    flex: 1;
}.customer-result-name{
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}.customer-result-details{
    font-size: 0.9em;
    color: var(--text-secondary);
    line-height: 1.4;
}.customer-result-meta{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-xs);
    font-size: 0.8em;
    color: var(--text-secondary);
    min-width: 80px;
}.customer-result-age{
    background: var(--warm-neutral);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.75em;
}.selected-customer-display{
    background: var(--accent-light);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
}.selected-customer-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
}.selected-customer-info{
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}.selected-customer-info:hover{
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}.customer-details strong{
    color: var(--primary-color);
    font-weight: 600;
    display: block;
    margin-bottom: var(--spacing-xs);
}.customer-details span{
    color: var(--text-secondary);
    font-size: 0.9em;
}.customer-actions{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: var(--spacing-xs);
    align-items: flex-end;
}.btn-link{
    background: none;
    border: none;
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9em;
    padding: 0;
}.btn-link:hover{
    color: var(--primary-dark);
}.customer-search-empty{
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}/* Customer form loading state */
.loading{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    color: var(--text-secondary);
}.loading::before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: var(--spacing-sm);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}/* =============================================
   MONTH CONTAINER SYSTEM
   ============================================= */

/* Month container structure */
.month-container{
    /* Container is primarily for organization, not display */
    position: relative;
}.month-header{
    /* Debug header - hidden by default */
    display: none;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 2px 5px;
    background: var(--accent-light);
    border-bottom: 1px solid var(--border-color);
}/* Date sections within month containers */
.dates-section{
    display: flex;
    /* Each dates section contains a month's worth of date cells */
}/* Room and car sections within month containers */
.rooms-section,
.cars-section{
    /* These are organizational containers */
    position: relative;
}/* Ensure grid cells within containers maintain their styling */
.dates-section .date-cell{
    /* Maintain existing behavior with explicit inheritance */
    position: relative;
}/* High Contrast Mode */
@media (prefers-contrast: high){
    :root {
        --border-color: #000000;
        --shadow-light: rgba(0, 0, 0, 0.3);
        --shadow-medium: rgba(0, 0, 0, 0.4);
    }
}/* ========================================
   GUEST STATUS OVERVIEW STYLES
   ======================================== */

.guest-status-container{
    padding: 15px;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}/* Row layout for side-by-side sections */
.guest-status-row{
    display: flex;
    gap: 15px;
    width: 100%;
}/* Section sizing */
.guest-status-section{
    background: var(--card-background);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    overflow: hidden;
    flex: 1;
}.guest-status-section.full-width{
    width: 100%;
}.guest-status-section.half-width{
    flex: 1;
    min-width: 0; /* Allow flexbox to shrink */
}.guest-status-section.highlight-inroom{
    border-left: 4px solid var(--primary-color);
}.guest-status-section.highlight-today{
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 123, 191, 0.1);
}.guest-status-section.highlight-tomorrow{
    border-left: 4px solid var(--secondary-color);
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.1);
}.status-section-header{
    padding: 12px 15px;
    background: var(--background-light);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}.status-section-header h3{
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}.status-section-header .status-count{
    background: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}/* Feedback Badge Styles */
.feedback-badge{
    background: var(--error-color);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
    margin-left: 8px;
    animation: pulse-subtle 2s infinite;
}.feedback-badge.zero{
    display: none;
}/* Badge animations */
@keyframes pulse-subtle{
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.05);
    }
}/* Customer Card Feedback Badge */
.guest-card .customer-feedback-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--error-color);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
    animation: pulse-subtle 2s infinite;
    flex-shrink: 0;
}.guest-card .customer-feedback-badge.zero{
    display: none;
}/* Badge shown on imported-calendar guest cards (no customer profile) */
.imported-guest-badge{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--gf-ink-3, #888);
    background: var(--gf-surface-2, #f3f4f6);
    border: 1px solid var(--gf-border, #ddd);
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 500;
}.status-section-header h3{
    margin: 0;
    font-size: 1.1em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}/* Guest cards container layouts */
.guest-cards-container{
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}.guest-cards-container.inline-layout{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}/* Compact guest card design */
.guest-card{
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    flex: 1;
    min-width: 260px;
    max-width: 300px;
}.guest-card:hover{
    border-color: var(--primary-color);
    box-shadow: 0 3px 8px var(--shadow-light);
    transform: translateY(-1px);
}.guest-card.currently-in-room{
    border-left: 3px solid var(--success-color);
}.guest-card.departing-today,
.guest-card.arriving-today{
    border-left: 3px solid var(--primary-color);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(0, 123, 191, 0.02) 100%);
}.guest-card.departing-tomorrow,
.guest-card.arriving-tomorrow{
    border-left: 3px solid var(--secondary-color);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(255, 193, 7, 0.02) 100%);
}/* Compact guest card header */
.guest-card-header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}.guest-name{
    font-weight: 600;
    font-size: 1em;
    color: var(--text-primary);
    line-height: 1.2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}.edit-indicator{
    opacity: 0.5;
    transition: opacity 0.2s ease;
}.guest-card:hover .edit-indicator{
    opacity: 1;
}.guest-stat{
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85em;
    color: var(--text-secondary);
}.stat-value{
    font-weight: 500;
}.rating-display{
    display: flex;
    align-items: center;
    gap: 4px;
}.rating-stars{
    color: var(--accent-color);
    font-size: 0.8em;
}.rating-number{
    font-size: 0.75em;
    color: var(--text-secondary);
}.no-rating{
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.75em;
}.push-status{
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8em;
}.push-icon{
    font-size: 0.9em;
}.push-text{
    color: var(--text-secondary);
    font-size: 0.75em;
}.push-text.registered{
    color: var(--success-color);
}.push-text.not-registered{
    color: var(--text-muted);
}/* ── Unified booking card (GF_renderBookingCard) ──────────────────────────── */

.gf-card-badge-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}.gf-card-badge-right{
    font-size: 11px;
    color: var(--gf-ink-3, #888);
}.gf-card-badge-right .push-status,
.gf-card-badge-right .push-text{
    font-size: 1em;
}.gf-card-badge{
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}.gf-card-body{
    display: flex;
    flex-direction: column;
    gap: 8px;
}.gf-card-dates-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}.gf-card-dates-grid--3col{
    grid-template-columns: 1fr 1fr 1fr;
}.gf-card-cell-label{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--gf-ink-3, #888);
    margin-bottom: 2px;
}.gf-card-cell-value{
    font-weight: 600;
    color: var(--gf-ink-1);
    font-size: 13px;
}.gf-card-resources{
    /* stacked block under dates */
}.gf-card-resource{
    font-size: 13px;
    font-weight: 500;
    color: var(--gf-ink-1);
    padding: 1px 0;
}.gf-card-breakfast-badge{
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #b45309;
    background: color-mix(in oklab, #f59e0b 15%, white);
}.gf-card-airport{
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color, #2196F3);
}.gf-card-airport-badge{
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #1d4ed8;
    background: color-mix(in oklab, #3b82f6 15%, white);
}.gf-card-extra-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}.gf-card-footer{
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--gf-border, #e5e5e0);
}.gf-card-stats{
    font-size: 11px;
    color: var(--gf-ink-3, #888);
    margin-bottom: 4px;
}.gf-card-notes{
    font-size: 12px;
    color: var(--gf-ink-3, #888);
    font-style: italic;
}.gf-card-edit-btn{
    margin-top: 12px;
}.gf-card-actions{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}.gf-card-actions .gf-card-edit-btn{
    margin-top: 0;
}.no-guests-message{
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 30px 15px;
    background: var(--background-light);
    border-radius: 6px;
    border: 2px dashed var(--border-light);
    font-size: 0.9em;
}/* Loading and Empty States */
.loading-state{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}.loading-spinner{
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-light);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}.empty-state{
    display: none;
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}.empty-state p{
    font-size: 1em;
    margin: 0;
}
/* Responsive Design for Guest Status */
@media (max-width: 968px){
    .guest-status-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .guest-status-section.half-width {
        width: 100%;
    }
    
    .guest-cards-container.inline-layout {
        flex-direction: column;
    }
}

@media (max-width: 768px) {.guest-status-container{
        padding: 12px;
        gap: 12px;
    }.guest-cards-container{
        padding: 12px;
        gap: 10px;
    }.status-section-header{
        padding: 10px 12px;
    }.guest-card{
        padding: 10px;
        min-width: 240px;
        max-width: 280px;
    }
}

@media (max-width: 480px) {.guest-status-container{
        padding: 10px;
    }.guest-cards-container{
        padding: 10px;
        gap: 8px;
    }.guest-card{
        padding: 8px;
        min-width: 200px;
        max-width: 260px;
    }.guest-card-header{
        margin-bottom: 6px;
    }.guest-name{
        font-size: 0.95em;
    }.status-section-header h3{
        font-size: 1em;
    }
}/* ================================================= */
/* Guest Status Overview — Table View                */
/* ================================================= */

.view-header-actions{
    display: flex;
    align-items: center;
    gap: 14px;
}.view-subtitle{
    font-size: 0.85rem;
    color: var(--gf-ink-3, #7a766f);
}/* The Guest Status list is a full-bleed panel, not a floating card: it fills the width and
   the height under the header, with no outer border, rounded corner or surrounding gap. The
   Expenses view is built the same way (assets/css/expenses-styles.css) so the two main list
   views are one design. */
#customers-view.view.active{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}#customers-view > .view-header{
    flex: 0 0 auto;
}/* Every view header in a flex-column view: min-height: 60px above replaces the automatic
   content-based minimum, so in a view that is taller than the phone the header could shrink
   to 60px and its wrapped second row (search, New button) was painted over by the panel that
   follows — Expenses showed it first (v4.1.129). */
.main-content > .view > .view-header{
    flex: 0 0 auto;
}.customers-table-wrap{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    margin: 0;
}/* #nonRegisteredSection below the table is markup nothing populates yet, so its wrapper's
   own padding would leave a strip under the pinned legend and stop the panel reaching the
   bottom. Moved onto the row itself, which is display:none until something fills it. */
#customers-view > .guest-status-container{
    flex: 0 0 auto;
    padding: 0;
    max-width: none;
}#customers-view > .guest-status-container > .guest-status-row{
    padding: 15px;
}#customers-view > .loading-state,
#customers-view > .empty-state{
    flex: 0 0 auto;
}.customers-table-stats{
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 16px;
    background: var(--gf-paper, #ffffff);
    border-bottom: 1px solid var(--gf-line, #e7e4dd);
    font-size: 13px;
    color: var(--gf-ink-3, #7a766f);
    flex: 0 0 auto;
}.cts-stat strong{
    color: var(--success-color, #4CAF50);
    font-size: 15px;
    margin-right: 4px;
}.cts-stat.cts-stat--departing strong{
    color: #dc2626;
}.cts-stat.cts-stat--accent strong{
    color: var(--gf-ink-1, #1f1d1a);
}.customers-table-scroll{
    overflow: auto;
    background: var(--gf-paper, #ffffff);
    flex: 1 1 auto;
    min-height: 0;
}.customers-table{
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    font-size: 13px;
}.customers-table thead th{
    background: var(--gf-paper-tint, #f4f1ea);
    color: var(--gf-ink-3, #7a766f);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gf-line, #e7e4dd);
    white-space: nowrap;
}.customers-table tbody td{
    padding: 10px 14px;
    border-bottom: 1px solid var(--gf-line-soft, #f1eee7);
    color: var(--gf-ink-1, #1f1d1a);
    vertical-align: middle;
    white-space: nowrap;
}.customers-table tbody tr.customers-table-row{
    cursor: pointer;
    transition: background 0.15s ease;
}/* The ROW, not its cells. Below 768px this row becomes a CSS grid with column-gap: 8px and
   row-gap: 5px (see the media query further down), and a background painted per-cell leaves
   those gaps unpainted — the hover then reads as a set of disconnected blocks with white
   channels through it rather than one highlighted row. Painting the row covers the gaps too,
   and is what the `transition: background` on this very selector was already written for. Safe
   in the table layout as well: no td carries a background of its own, and the status/MESSAGE
   badges keep theirs by sitting on top. */
.customers-table tbody tr.customers-table-row:hover{
    background: var(--gf-paper-tint, #f4f1ea);
}.customers-table tbody tr.customers-table-row:last-child td{
    border-bottom: none;
}.customers-table-empty{
    text-align: center;
    font-style: italic;
    color: var(--gf-ink-3, #7a766f);
    padding: 28px !important;
    white-space: normal !important;
}/* Status badges */
.ctr-badge{
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1.5px solid transparent;
}/* "Cleaning" chip inside the room label of the calendar rail (appendRoomRow, v4.1.110). Sits in
   the h4 line so the rail row keeps the height the grid row is aligned to. */
.room-row .room-cleaning-chip{
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--warm-accent, #DF986C);
    color: #fff;
}/* Colors reused from elsewhere in the app, not picked fresh: green matches the Messages tab's
   channel-availability badges (.msg-channel-badge.available uses --success-color), orange
   matches the Delete All Messages button (.btn-danger's --warm-accent gradient) — so a status
   badge here reads the same "green/orange" language staff already know from those. */
.ctr-badge--currently-in-room{
    background: var(--success-color, #4CAF50);
    border-color: var(--success-color, #4CAF50);
    color: #fff;
}.ctr-badge--departing-today{
    background: var(--warm-accent, #DF986C);
    border-color: var(--warm-accent, #DF986C);
    color: #fff;
}.ctr-badge--arriving-today{
    background: color-mix(in oklab, var(--success-color, #4CAF50) 25%, white);
    border-color: var(--success-color, #4CAF50);
    color: var(--success-color, #4CAF50);
}.ctr-badge--departing-tomorrow{
    background: transparent;
    border-color: var(--warm-accent, #DF986C);
    color: var(--warm-accent, #DF986C);
}.ctr-badge--arriving-tomorrow{
    background: transparent;
    border-color: var(--success-color, #4CAF50);
    color: var(--success-color, #4CAF50);
}.ctr-badge--upcoming-imported{
    background: transparent;
    border-style: dashed;
    border-color: var(--gf-ink-4, #a8a49c);
    color: var(--gf-ink-3, #7a766f);
}.ctr-badge--message{
    /* Same blue already used for the unread-message count on this exact screen
       (.status-section-header .status-count) — reused, not picked fresh. */
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}/* A room whose guest has checked out and that waits for housekeeping (v4.1.110): the warm
   accent of Departing, on a light ground so the row reads as "to do", not as a guest. */
.ctr-badge--cleaning{
    background: color-mix(in oklab, var(--warm-accent, #DF986C) 22%, white);
    border-color: var(--warm-accent, #DF986C);
    color: #b8632f;
}/* Check in / Check out / Done buttons in the trailing Action column (v4.1.110). */
.ctc-action{
    text-align: right;
    white-space: nowrap;
}.ctr-action-btn{
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    background: var(--gf-paper, #fff);
    color: var(--gf-ink-2, #44423d);
    border-color: var(--gf-line, #e7e4dd);
}.ctr-action-btn:hover{
    filter: brightness(0.96);
}.ctr-action-btn[disabled]{
    opacity: 0.55;
    cursor: default;
}.ctr-action-btn--check-in{
    background: var(--success-color, #4CAF50);
    border-color: var(--success-color, #4CAF50);
    color: #fff;
}.ctr-action-btn--check-out{
    background: var(--warm-accent, #DF986C);
    border-color: var(--warm-accent, #DF986C);
    color: #fff;
}.ctr-action-btn--done{
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}.cts-stat.cts-stat--cleaning strong{
    color: #b8632f;
}/* Cell content */
.ctr-guest{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-weight: 600;
    white-space: normal;
}/* .gf-card-breakfast-badge is the Card view's own badge (components/customer-modal.js), reused
   here for the Board column so both views show breakfast the same way — its margin-top:4px was
   sized for stacking under a room list on the card, not a table cell's vertical centering. */
.ctc-board .gf-card-breakfast-badge{
    margin-top: 0;
}/* Multiple rooms are joined with <br> (createGuestTableRow()) rather than ", " so a multi-room
   booking wraps onto its own lines instead of widening the whole column/table. */
.ctc-room{
    white-space: normal;
}/* Board column can hold both a Breakfast badge and airport pickup/dropoff info at once —
   stacked instead of run together inline. */
.ctr-board-stack{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}.ctr-airport-badge{
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-color, #4594A2);
    background: color-mix(in oklab, var(--primary-color, #4594A2) 15%, white);
    white-space: nowrap;
}.ctr-reg-symbol{
    display: inline-block;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}.ctr-reg-symbol.is-registered{
    color: #16a34a;
}.ctr-reg-symbol.is-missing{
    color: #dc2626;
}.ctr-note{
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-style: italic;
    color: var(--gf-ink-2, #44423d);
}.ctr-rating{
    font-weight: 600;
    font-size: 12.5px;
    color: var(--gf-ink-2, #44423d);
}.ctr-muted{
    font-style: italic;
    font-size: 12.5px;
    color: var(--gf-ink-4, #a8a49c);
    white-space: nowrap;
}/* Legend footer */
.customers-table-legend{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px; /* row gap, column gap: wrapped lines sit close (v4.1.128) */
    padding: 10px 16px;
    background: var(--gf-paper, #ffffff);
    border-top: 1px solid var(--gf-line, #e7e4dd);
    font-size: 11.5px;
    color: var(--gf-ink-3, #7a766f);
    flex: 0 0 auto;
}.customers-table-legend strong{
    color: var(--gf-ink-2, #44423d);
}
@media (max-width: 768px){
    .view-header{
        flex-wrap: wrap;
        gap: 10px;
    }/* Views that give the hamburger's band back (navigation.css, v4.1.128): the title row is
       the button's row. The button is fixed at 16px/16px and 44px square, so the row starts at
       the same 16px, is at least 44px tall, and the title clears the button's right edge (60px)
       by 12px: 20px header padding + 52px. Whatever wraps below (search, date navigation)
       lands under the button. */
    .main-content > .view > .view-header{
        /* .main-content keeps 16px of padding at this width (8px below 480px, see the rule
           further up), so the header itself adds only what is missing to 16px. */
        padding-top: 0;
    }.main-content > .view > .view-header > h2{
        display: flex;
        align-items: center;
        min-height: 44px;
        margin-left: 52px;
    }/* Pages whose title bar sits directly under .sidebar-content, above a tab bar (Messaging,
       Translations, Breakfast management): the same row logic. No .main-content padding above
       it here, so the header adds the full 16px itself (v4.1.129). */
    .sidebar-content > .section-header{
        padding-top: var(--spacing-md);
    }.sidebar-content > .section-header > h2{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        min-height: 44px;
        margin-left: 52px;
    }.view-header-actions{
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }/* Below this width the table stops being a real table (no more horizontal scrolling to
       read a row) and each guest becomes a fixed 3-line card instead — Status+Guest,
       Room+In+Out+Pax, then Stays+Board+Registration+Rating — laid out with CSS Grid so the
       line each field lands on is deterministic regardless of content length. */
    .customers-table-scroll{
        overflow-x: visible;
    }.customers-table{
        min-width: 0;
        width: 100%;
    }.customers-table thead{
        display: block;
    }/* The head takes the same three-line grid as a guest card, so every title sits over the
       field it names and breaks the same way (v4.1.128); the ths carry the tds' ctc-* classes. */
    .customers-table thead tr{
        display: grid;
        grid-template-columns: minmax(118px, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
        grid-template-areas:
            "status guest  guest  action"
            "room   in     out    pax"
            "stays  board  reg    rating";
        column-gap: 8px;
        row-gap: 3px;
        padding: 8px 14px;
        background: var(--gf-paper-tint, #f4f1ea);
        border-bottom: 1px solid var(--gf-line, #e7e4dd);
    }.customers-table thead th,
    .customers-table thead th:first-child,
    .customers-table thead th:last-child{ /* the first/last-column padding rule further down outranks a plain th */
        display: block;
        padding: 0;
        border: none;
        background: transparent;
        white-space: normal;
    }.customers-table, .customers-table tbody{
        display: block;
        width: 100%;
    }.customers-table tr{
        display: block;
    }.customers-table tbody tr.customers-table-row{
        display: grid;
        /* First column carries the status badge in row 1 ("Depart Tmrw"/"Arrive Tmrw" are the
           widest labels) as well as Room/Stays in rows 2-3 — minmax(0,...) elsewhere would let
           the badge's nowrap text overflow into the guest-name column, so it gets a fixed floor
           wide enough for the longest badge instead. */
        grid-template-columns: minmax(118px, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
        grid-template-areas:
            "status guest  guest  action"
            "room   in     out    pax"
            "stays  board  reg    rating";
        column-gap: 8px;
        row-gap: 5px;
        padding: 12px 14px;
    }.customers-table tbody tr.customers-table-row td{
        display: block;
        padding: 0;
        border: none;
        white-space: normal;
        font-size: 12.5px;
        color: var(--gf-ink-2, #44423d);
    }.customers-table-empty{
        padding: 20px !important;
    }.customers-table-legend{
        padding: 8px 14px;
        line-height: 1.3;
    }.ctc-status .ctr-badge{
        font-size: 9.5px;
        padding: 2px 7px;
    }.ctc-status{
        grid-area: status;
    }.ctc-guest{
        grid-area: guest;
        align-self: center;
    }.ctc-guest .ctr-guest{
        font-size: 14px;
        color: var(--gf-ink-1, #1f1d1a);
    }.ctc-room{
        grid-area: room;
        font-weight: 600;
        color: var(--gf-ink-1, #1f1d1a);
    }.ctc-in{
        grid-area: in;
    }td.ctc-in::before{
        content: "In ";
        color: var(--gf-ink-4, #a8a49c);
    }.ctc-out{
        grid-area: out;
    }td.ctc-out::before{
        content: "Out ";
        color: var(--gf-ink-4, #a8a49c);
    }.ctc-pax{
        grid-area: pax;
    }td.ctc-pax::before{
        content: "Pax ";
        color: var(--gf-ink-4, #a8a49c);
    }.ctc-stays{
        grid-area: stays;
    }td.ctc-stays::before{
        content: "Stays ";
        color: var(--gf-ink-4, #a8a49c);
    }.ctc-board{
        grid-area: board;
    }.ctc-registration{
        grid-area: reg;
    }.ctc-rating{
        grid-area: rating;
    }.ctc-action{
        grid-area: action;
        justify-self: end;
        align-self: center;
    }/* Desktop keeps these single-line + ellipsis/nowrap to fit a fixed column width; on mobile
       the rating cell has a full grid row to itself, so let them wrap instead of forcing the
       row wider than its column and pushing the card past the viewport edge. */
    .ctc-rating .ctr-note,
    .ctc-rating .ctr-rating,
    .ctc-rating .ctr-muted{
        white-space: normal;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        display: inline;
    }
}
@media (max-width: 480px){
    /* Below 480px .main-content keeps only 8px of padding (rule further up), so the header tops
       itself up to the button's 16px. After the 768px rule on purpose: same specificity, and
       the later one wins (v4.1.128). */
    .main-content > .view > .view-header{
        padding-top: var(--spacing-sm);
    }
}/* ================================================= */
/* Customer Modal — Booking tab table                */
/* (loadCustomerBooking() in components/customer-modal.js) */
/* ================================================= */

.cbt-wrap{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 20px;
}.cbt-stats{
    font-size: 12px;
    color: var(--gf-ink-3, #7a766f);
}.cbt-scroll{
    overflow-x: auto;
    border: 1px solid var(--gf-line, #e7e4dd);
    border-radius: var(--border-radius, 8px);
    background: var(--gf-paper, #ffffff);
}.cbt-table{
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 13px;
}.cbt-table thead th{
    background: var(--gf-paper-tint, #f4f1ea);
    color: var(--gf-ink-3, #7a766f);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--gf-line, #e7e4dd);
    white-space: nowrap;
}.cbt-table tbody td{
    padding: 9px 12px;
    border-bottom: 1px solid var(--gf-line-soft, #f1eee7);
    color: var(--gf-ink-1, #1f1d1a);
    vertical-align: middle;
    white-space: nowrap;
}.cbt-table tbody tr.cbt-row{
    cursor: pointer;
    transition: background 0.15s ease;
}/* Painted on the ROW, not its cells — below 768px this row is a CSS grid with gaps, and a
   per-cell background leaves those gaps unpainted, so the hover reads as disconnected blocks
   with white channels through it. Same fix and reasoning as .customers-table-row's hover in
   this file. */
.cbt-table tbody tr.cbt-row:hover{
    background: var(--gf-paper-tint, #f4f1ea);
}.cbt-table tbody tr.cbt-row:last-child td{
    border-bottom: none;
}.cbt-room{
    white-space: normal;
}.cbt-badge{
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1.5px solid;
    background: transparent;
}.cbt-actions{
    text-align: right;
}.cbt-actions .gf-copy-btn{
    vertical-align: middle;
}@media (max-width: 640px){
    .cbt-wrap{
        padding: 12px 14px 16px;
    }.cbt-scroll{
        overflow-x: visible;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }.cbt-table{
        min-width: 0;
        width: 100%;
    }.cbt-table thead{
        display: none;
    }.cbt-table, .cbt-table tbody{
        display: block;
        width: 100%;
    }.cbt-table tr{
        display: block;
    }.cbt-table tbody tr.cbt-row{
        display: grid;
        grid-template-columns: minmax(80px, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
        grid-template-areas:
            "status type   type"
            "room   room   room"
            "in     out    pax"
            "ref    board  total";
        column-gap: 8px;
        row-gap: 5px;
        padding: 11px 4px;
    }.cbt-table tbody tr.cbt-row td{
        display: block;
        padding: 0;
        border: none;
        white-space: normal;
        font-size: 12.5px;
        color: var(--gf-ink-2, #44423d);
    }.cbt-status{ grid-area: status; }
    .cbt-type{ grid-area: type; text-align: right; color: var(--gf-ink-3, #7a766f); }
    .cbt-room{ grid-area: room; font-weight: 600; color: var(--gf-ink-1, #1f1d1a); }
    .cbt-in{ grid-area: in; }
    .cbt-in::before{ content: "In "; color: var(--gf-ink-4, #a8a49c); }
    .cbt-out{ grid-area: out; }
    .cbt-out::before{ content: "Out "; color: var(--gf-ink-4, #a8a49c); }
    .cbt-pax{ grid-area: pax; text-align: right; }
    .cbt-pax::before{ content: "Pax "; color: var(--gf-ink-4, #a8a49c); }
    .cbt-ref{ grid-area: ref; }
    .cbt-board{ grid-area: board; }
    .cbt-total{ grid-area: total; text-align: right; font-weight: 600; }
    .cbt-actions{
        grid-column: 1 / -1;
        text-align: right;
        margin-top: 2px;
    }
}/* ================================================= */
/* Customer Feedback Integration Styles             */
/* ================================================= */

/* Feedback badges for tabs */
.nav-tab .feedback-badge{
    background: #ff4444;
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 11px;
    margin-left: 5px;
    min-width: 16px;
    text-align: center;
    font-weight: 600;
}/* Customer feedback badges */
.customer-feedback-badge{
    background: #ff4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    margin-right: 8px;
    cursor: pointer;
    min-width: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(255, 68, 68, 0.3);
}.customer-feedback-badge:hover{
    background: #cc0000;
    transform: scale(1.1);
}/* Animation for feedback panel slide down */
@keyframes slideDown{
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 400px;
        transform: translateY(0);
    }
}/* Three-View Navigation System */
.view-toggles{
    display: flex;
    gap: 0;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 4px;
    margin: 20px;
}/* Main layout structure */
.main-layout{
    display: flex;
    flex-direction: column;
    height: 100vh;
}.calendar-main-layout{
    display: flex;
    flex: 1;
    overflow: hidden;
}/* Shared Month Header Layout */
.shared-month-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    gap: 20px;
}.month-navigation{
    display: flex;
    align-items: center;
    gap: 16px;
}.show-rates-toggle{
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}.show-rates-toggle input[type="checkbox"]{
    cursor: pointer;
}/* View-specific visibility */
.view-timeline .mobile-calendar-view,
.view-timeline .mobile-list-view{
    display: none !important;
}/* "Show Rates" toggle only makes sense in the Timeline sub-view */
.view-calendars #showRatesToggleWrap,
.view-list #showRatesToggleWrap{
    display: none !important;
}/* .calendar-container-new is the persistent outer wrapper — never hidden */
.view-calendars .static-sidebar,
.view-calendars .mobile-list-view{
    display: none !important;
}.view-list .static-sidebar,
.view-list .mobile-calendar-view{
    display: none !important;
}/* Mobile List View Styles */
.mobile-list-view{
    flex: 1;
    overflow-y: auto;
    background: var(--bg-primary);
}/* Modal Tabs */
.modal-tabs{
    display: flex;
    flex-wrap: wrap; /* allow tabs to wrap on narrow viewports */
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary);
    padding: 0 var(--spacing-lg);
    flex-shrink: 0;
}/* Modal nav — compact override of .settings-nav (which is designed for full-page modules) */
nav.modal-nav{
    position: static;
    flex-shrink: 0;        /* prevent modal flex-column from squashing the tab strip */
    padding: 2px 12px;
    border-top: 1px solid var(--gf-line, #e7e4dd);
    border-bottom: 1px solid var(--gf-line, #e7e4dd);
    background: var(--gf-paper, #ffffff);
    border-radius: 0;
    z-index: auto;
    overflow: visible;     /* override overflow-x: auto from .settings-nav */
}nav.modal-nav .settings-nav-btn{
    padding: 6px 12px;
    font-size: 12px;
}.modal-tab-btn{
    background: none;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    position: relative;
}.modal-tab-btn:hover{
    color: var(--primary);
    background: rgba(69, 148, 162, 0.05);
}.modal-tab-btn.active{
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: var(--surface);
}.modal-tab-btn .badge,
.settings-nav-btn .badge{
    display: inline-block;
    background: var(--error-color);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    min-width: 18px;
    text-align: center;
}.modal-tab-content,
.modal-tab-panel{
    display: none;
    animation: fadeIn 0.2s;
}.modal-tab-content.active,
.modal-tab-panel.active{
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}/* Messages tab: fill modal-body without outer scroll */
.modal-body.messages-active{
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}#messagesTab{
    flex: 1;
    min-height: 0;
}#messagesTab.active{
    display: flex;
    flex-direction: column;
    height: 100%;
}/* Message Thread */
#messageThreadContainer{
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: var(--spacing-md);
    padding-bottom: 0;
}.message-thread{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-md);
    background: var(--background);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}.message-input-container{
    flex-shrink: 0;
    padding: 0 var(--spacing-md) var(--spacing-md);
}/* Side-by-side layout: compose panel alongside message list on wider viewports */
@media (min-width: 640px){
    #messageThreadContainer {
        flex-direction: row;
        padding: 0;
        align-items: stretch;
    }

    #messageThreadContainer .message-thread {
        border-radius: var(--border-radius) 0 0 var(--border-radius);
        margin-bottom: 0;
        margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-md);
    }

    #messageThreadContainer .message-input-container {
        /* Grows with the window (at roughly a third the rate of the thread pane, which keeps
           the flex-grow:1 it already had) instead of staying pinned at a fixed 290px — but
           capped so the compose column never dominates the conversation view on very wide
           screens. */
        flex: 0.35 1 290px;
        max-width: 420px;
        display: flex;
        flex-direction: column;
        /* Without this, a flex child defaults to min-height:auto, which lets its content (e.g.
           a long template growing #messageText) push the column taller than its allotted space
           instead of clipping and scrolling here as overflow-y:auto below intends. */
        min-height: 0;
        padding: var(--spacing-md);
        border-left: 1px solid var(--border-color);
        overflow-y: auto;
        background: var(--gf-paper-warm, #faf8f3);
    }

    #messageForm {
        display: flex;
        flex-direction: column;
    }

    #messageThreadContainer .message-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    #messageThreadContainer #replyIndicator {
        flex-shrink: 0;
    }

    /* Opens downward here instead of upward — see .msg-template-picker-panel's own comment. */
    #messageThreadContainer .msg-template-picker-panel {
        bottom: auto;
        top: 100%;
        margin-bottom: 0;
        margin-top: 8px;
    }
}/* Groups the language badge + channel-availability badges as one unit on the left side of
   .msg-lang-status-bar's space-between row,
so inserting the channel badges doesn't push the
   Original/Translated toggle (the row's other flex child) away from the right edge. */
.msg-lang-and-channels{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}/* Communication-channel availability badges (GuestApp / Email / OTA / WhatsApp) — always shown,
green when reachable. See _updateChannelBadges() in components/customer-modal.js. */
.msg-channel-badges{
    display: flex;
    gap: 6px;
}.msg-channel-badge{
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}.msg-channel-badge.available{
    background: var(--success-color);
    color: #fff;
    border-color: var(--success-color);
}/* Guest message translation: language status bar + Original/App-language toggle */
.msg-lang-status-bar{
    position: relative; /* anchors #msgGuestLangPicker's .flag-select-menu popover */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px var(--spacing-md);
    background: var(--gf-paper-warm, #faf8f3);
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
}.msg-detected-lang-info{
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}.msg-lang-badge-missing{
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--error-color, #F44336);
    color: #fff;
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
}.msg-lang-edit-btn{
    border: none;
    background: transparent;
    padding: 0 0 0 2px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}.msg-lang-edit-btn:hover{
    opacity: 1;
}/* .msg-guest-lang-picker is now a .flag-select-menu popover (see customer-modal.php) — its own
   styling comes entirely from that shared class,
nothing extra needed here. */

/* Generic flag-based <select> replacement — see GF_flagifySelect() in assets/js/utils/utils.js.
   A native <option> can only ever render plain text (no HTML/SVG),
so a real flag icon needs a
   custom trigger+popover instead; the original <select> stays in the DOM (just visually hidden)
   so everything that already reads/listens to it (onchange handlers, FormData) keeps working. */
.flag-select-wrapper{
    position: relative;
    display: inline-block;
}.flag-select-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}.flag-select-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--surface, #fff);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
}.flag-select-btn:hover{ background: var(--bg-secondary); }.flag-select-menu{
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 160px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px var(--shadow-medium);
    z-index: 500;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xs, 4px);
    gap: 2px;
}.flag-select-menu[hidden]{ display: none; }.msg-guest-lang-picker{
    /* 23 languages are taller than the Messages tab, whose body clips overflow:
       the list scrolls itself; _toggleGuestLangPicker() fits it to the room left (v4.1.125) */
    max-height: 60vh;
    overflow-y: auto;
}.flag-select-option{
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}.flag-select-option:hover{ background: var(--bg-secondary); }.flag-select-option.active{ font-weight: 600; color: var(--primary-color); }.msg-view-toggle{
    display: flex;
    align-items: center;
    gap: 6px;
}.msg-view-toggle-label{
    color: var(--text-secondary);
    margin-right: 2px;
}.msg-view-toggle-btn{
    border: 1px solid var(--border-color);
    background: var(--surface, #fff);
    color: var(--text-primary);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}.msg-view-toggle-btn.active{
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}/* Reply panel: translate-before-send checkbox + live preview */
.msg-translate-toggle{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}.msg-translate-preview{
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--gf-paper-warm, #faf8f3);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}.msg-translate-preview-label{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 4px;
}.msg-translate-refresh-btn{
    border: 1px solid var(--border-color);
    background: var(--surface, #fff);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: normal;
    cursor: pointer;
}.msg-translate-refresh-btn:disabled{
    opacity: 0.6;
    cursor: default;
}.msg-translate-preview-text{
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.4;
    /* Bounded + internally scrollable for the same reason as #messageText (see its own comment)
       — a long template translated in full can otherwise grow this box indefinitely. */
    max-height: 200px;
    overflow-y: auto;
}.msg-translate-preview-text.msg-translate-preview-placeholder,
.msg-translate-preview-text.msg-translate-preview-unavailable{
    color: var(--text-secondary);
    font-style: italic;
}.msg-translate-preview-text.msg-translate-preview-stale{
    opacity: 0.5;
}.message-item{
    display: flex;
    margin-bottom: var(--spacing-lg);
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}.message-item.sent{
    flex-direction: row-reverse;
}.message-item.received{
    flex-direction: row;
}.message-content{
    max-width: 70%;
    display: flex;
    flex-direction: column;
}.message-bubble{
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    position: relative;
    word-wrap: break-word;
}.message-text{
    word-wrap: break-word;
    line-height: 1.5;
    margin: 0;
    font-size: 13px;
}/* Links inherit the bubble's own text color (white on sent/teal, dark on received/light)
   instead of the default browser blue — underline alone marks them as links. */
.message-text a{
    color: inherit;
    text-decoration: underline;
}.message-item.sent .message-bubble{
    background: var(--primary-color);
    border-bottom-right-radius: 4px;
}.message-item.sent .message-text{
    color: white;
}.message-item.received .message-bubble{
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}/* Feedback-type message: a rating + subject block above the text,
and a left accent so a
   feedback item is spottable at a glance while scrolling the thread. */
.message-item.feedback .message-bubble{
    border-left: 3px solid var(--warning-color);
}.feedback-details{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 6px;
}/* Container for the per-category tick-ladder rows,
stacked one per line below the overall
   rating row — kept as its own flex column so its 4px row gap can differ from the parent
   .feedback-details gap around it. */
.feedback-tick-rows{
    display: flex;
    flex-direction: column;
    gap: 4px;
}/* One label + ladder + number line — used for both the overall rating and each scored
   category,
so they read as the same visual language. Label sits in a fixed-width column so
   every row's ladder starts at the same x position; the ladder itself is the only flexible
   piece,
growing to fill whatever width the bubble actually has,
so the row always spans the
   full container instead of hugging its own content width; the number is pinned to the end,
right-aligned by simply being what's left after the ladder's grown to fill the rest. */
.feedback-tick-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}.feedback-tick-label{
    font-size: 0.72rem;
    flex: 0 0 auto;
    min-width: 78px;
    opacity: 0.85;
}.feedback-tick-ladder{
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 50px;
}.feedback-tick{
    flex: 1 1 0;
    min-width: 0;
    height: 11px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.1);
}.feedback-tick.full{
    background: var(--success-color);
}/* Left half filled,
right half the same empty tone as an untouched tick — a clean split fill
   rather than a separate shape,
so half- and full-ticks read as the same unit at a glance. */
.feedback-tick.half{
    background: linear-gradient(to right, var(--success-color) 50%, rgba(0, 0, 0, 0.1) 50%);
}/* Below FEEDBACK_TICK_LOW_THRESHOLD (customer-modal.js),
a row's ticks switch to amber instead
   of green — flags a weak score at a glance instead of making staff read every number. */
.feedback-tick-row.low .feedback-tick.full{
    background: var(--warning-color);
}.feedback-tick-row.low .feedback-tick.half{
    background: linear-gradient(to right, var(--warning-color) 50%, rgba(0, 0, 0, 0.1) 50%);
}.feedback-tick-score{
    font-size: 0.78rem;
    font-weight: 600;
    flex: 0 0 auto;
}/* Its own line right under the overall rating row,
right-aligned to match where every row's
   own number sits — pulled up close to that row rather than spaced like a full sibling row. */
.feedback-avg-row{
    text-align: right;
    margin-top: -3px;
}/* Computed,
not stored — staff-facing only (see renderFeedbackDetails()'s docblock) — so it
   reads as a derived figure,
not another number the guest actually gave. */
.feedback-category-avg{
    font-size: 0.72rem;
    font-weight: 600;
    font-style: italic;
    opacity: 0.7;
}.message-item.sent .feedback-tick{
    background: rgba(255, 255, 255, 0.28);
}.message-item.sent .feedback-tick.full{
    background: rgba(255, 255, 255, 0.95);
}.message-item.sent .feedback-tick.half{
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.28) 50%);
}.message-meta{
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
    padding: 0 var(--spacing-xs);
}.message-item.sent .message-meta{
    justify-content: flex-end;
}/* Sender name + timestamp,
grouped so the mobile breakpoint can stack them onto their own
   line without disturbing the channel badge / status / reply button that follow. */
.message-meta-identity{
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
}.message-status{
    display: inline-flex;
    align-items: center;
    gap: 4px;
}.message-status.pending{ color: var(--warning-color); }.message-status.sent{ color: var(--success-color); }.message-status.delivered{ color: var(--success-color); }.message-status.read{ color: var(--primary); }.message-status.failed{ color: var(--error-color); }/* Channel source badge (OTA / WhatsApp) — displayed inline in .message-meta */
.msg-channel-badge{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
}.msg-channel-channex{
    background: #e8f0fe;
    color: #1a56db;
}.msg-channel-whatsapp{
    background: #dcf8c6;
    color: #128c7e;
}.msg-channel-direct{
    background: #ede9fe;
    color: #6d28d9;
}.msg-channel-email{
    background: #fef3c7;
    color: #92400e;
}/* Reply-via channel selector injected into the message form — child of .message-actions,
appended (not prepended) so it lands on the right of #pushRegistrationStatus in that
   space-between flex row. font-size/color deliberately left unset here to inherit from the
   parent instead of duplicating it,
keeping the two visually consistent at every breakpoint
   (including the mobile .message-actions override) automatically. */
.ota-channel-control{
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}#messageChannel{
    padding: 3px 22px 3px 8px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: var(--input-bg, #fff);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 9px 6px;
}#messageChannel:disabled{
    cursor: not-allowed;
    opacity: .7;
}/* OTA booking selector injected above the compose textarea for OTA-email customers */
.ota-booking-row{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}.ota-booking-label{
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 12px;
}.ota-booking-loading{
    color: var(--text-secondary);
    font-size: 12px;
    font-style: italic;
}.ota-booking-select{
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    font-size: 12px;
    background: var(--input-bg, #fff);
    color: var(--text-primary);
}/* Single-booking chip (replaces dropdown when only one linked booking exists) */
.ota-booking-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 12px;
}.ota-booking-chip-ota{
    background: var(--primary-color);
    color: #fff;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
}.ota-booking-chip-dates{
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
}.message-read-toggle{
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-tertiary);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
}.message-read-toggle:hover{
    border-color: var(--success-color);
    color: var(--success-color);
}.message-read-toggle.is-read{
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}.message-read-toggle:disabled{
    cursor: default;
    opacity: 0.9;
}.message-url{
    display: inline-block;
    margin-top: var(--spacing-xs);
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}.message-item.sent .message-url{
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}.message-item.received .message-url{
    color: var(--primary);
    border: 1px solid var(--primary);
}.message-url:hover{
    transform: translateX(2px);
    opacity: 0.9;
}.message-url-after-text{
    margin-top: 4px;
    font-size: 0.8rem;
    opacity: 0.8;
}.message-item.sent .message-url-after-text{
    color: white;
}.message-item.received .message-url-after-text{
    color: var(--text-primary);
}.message-input-container{
    border-top: 2px solid var(--border-color);
    padding-top: var(--spacing-md);
    background: var(--surface);
}.message-actions{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}/* WhatsApp-style compose row: auto-growing textarea + circular icon-only send button.
   position:relative anchors .msg-template-picker-panel directly to this row (not the whole
   .message-input-container) so it lines up with the row regardless of what else the container
   holds,
and — on desktop,
see the side-by-side layout below — isn't clipped by the container's
   own overflow-y:auto when it pops upward. */
.message-input-row{
    display: flex;
    align-items: flex-end;
    gap: 8px;
    position: relative;
}.msg-compose-actions{
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}.msg-textarea-wrap{
    position: relative;
    flex: 1;
}.msg-clear-text-btn{
    position: absolute;
    top: 6px;
    right: 8px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}.msg-clear-text-btn:hover{
    background: rgba(0, 0, 0, 0.16);
}#messageText{
    width: 100%;
    resize: none;
    overflow-y: auto;
    /* Matches .msg-compose-actions' stacked-buttons height (40+6+40) so the box isn't
       oddly short next to it by default. */
    min-height: 86px;
    /* Bounds how tall a long template (or anything else pasted in) can grow the box before it
       scrolls internally instead — without this, a large template just kept growing the box
       with no way to reach the send button below it. Mobile uses a smaller cap, see the
       max-width:600px block below. */
    max-height: 260px;
    /* Extra right padding so typed text doesn't run under .msg-clear-text-btn, which sits
       top-right of .msg-textarea-wrap. */
    padding: 10px 32px 10px 14px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}.msg-send-btn{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}.msg-send-btn svg{
    margin-left: 2px; /* optical centering for the triangle shape */
}.msg-send-btn:hover{
    filter: brightness(1.08);
}.msg-send-btn:disabled{
    opacity: 0.5;
    cursor: default;
}/* Template picker: 📋 button opens a scrollable list of Settings → Messaging templates that
   pops up above the compose row (works identically on desktop and phone widths since it's
   100% the width of its anchor, .message-input-container). */
.msg-template-btn{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: var(--surface, #fff);
    color: var(--text-primary);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}.msg-template-btn:hover{
    background: var(--gf-paper-warm, #faf8f3);
}.customers-table-message > td{
    /* Loading / empty message shown in place of the rows, directly under the column headings.
       Centred over the full width and given real height so the table does not collapse to a
       sliver while the first load is in flight. */
    padding: var(--spacing-lg, 24px) var(--spacing-md, 16px);
    text-align: center;
    color: var(--text-secondary, #666);
}.customers-table-message p{
    margin: 8px 0 0;
}.customers-table-message .loading-spinner{
    margin: 0 auto;
}.msg-autoanswer-btn{
    /* Same 40px circle as .msg-template-btn — these two read as a pair of compose actions.
       Note: a stray extra "}" used to sit right before this selector. Browsers fold a stray
       "}" into the next rule's prelude, which makes the selector invalid and drops the whole
       rule — so ✨ rendered as a bare default button while 📋 and Send were circles. */
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: var(--surface, #fff);
    color: var(--text-primary);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}.msg-autoanswer-btn:hover:not(:disabled){
    background: var(--gf-paper-warm, #faf8f3);
}.msg-autoanswer-btn:disabled{
    opacity: .55;
    cursor: default;
}.message-input-row.has-autoanswer #messageText{
    /* ✨ stacks under 📋, so the action column becomes three 40px buttons: 40+6+40+6+40 = 132px.
       #messageText's own min-height (see below) is 86px, sized for the two-button stack, which
       would leave the textarea visibly shorter than the buttons beside it. Matched here instead
       of shrinking the buttons, because the compose row has the vertical room in both layouts.
       Scoped to .has-autoanswer (set by _maybeShowAutoanswer() in customer-modal.js) so a site
       without the feature keeps exactly the composer it had. */
    min-height: 132px;
}.msg-template-picker-panel{
    position: absolute;
    left: 0;
    right: 0;
    /* Pops up above the compose row by default (phones — the row sits at the very bottom of
       the screen there, so there's no room below it). Flipped to open downward on desktop's
       side-by-side layout, see the min-width:640px override below — that layout's compose
       column has its own overflow-y:auto, which would otherwise clip a panel popping upward
       off the top of its scroll area. */
    bottom: 100%;
    margin-bottom: 8px;
    background: var(--surface, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 20;
    overflow: hidden;
}.msg-template-picker-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    background: var(--gf-paper-warm, #faf8f3);
    border-bottom: 1px solid var(--border-color);
}.msg-template-picker-close{
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 2px;
}.msg-template-picker-list{
    max-height: 240px;
    overflow-y: auto;
}.msg-template-picker-item{
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface, #fff);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}.msg-template-picker-item:last-child{
    border-bottom: none;
}.msg-template-picker-item:hover{
    background: var(--gf-paper-warm, #faf8f3);
}.msg-template-picker-sent-badge{
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #6c8c5a;
}.msg-template-picker-empty{
    padding: 14px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}/* ===================================
   Message Threading Styles
   =================================== */

/* Reply button */
.reply-btn{
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: var(--spacing-xs);
}.reply-btn:hover{
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}/* Thread line styles removed - cleaner appearance for nested replies */

/* Reply indicator */
.reply-to-indicator{
    background: var(--surface);
    border: 1px solid var(--primary-color);
    border-left: 3px solid var(--primary-color);
    border-radius: 4px;
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}.reply-to-indicator strong{
    color: var(--primary-color);
}.cancel-reply-btn{
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 var(--spacing-xs);
    transition: color 0.2s;
}.cancel-reply-btn:hover{
    color: var(--error-color);
}/* Adjust message content max-width for nested messages */
.message-item[data-depth="1"] .message-content{
    max-width: 65%;
}.message-item[data-depth="2"] .message-content{
    max-width: 60%;
}.message-item[data-depth="3"] .message-content,
.message-item[data-depth="4"] .message-content,
.message-item[data-depth="5"] .message-content{
    max-width: 55%;
}/* Alternate background for nested replies for better readability */
.message-item.received[data-depth="1"] .message-bubble,
.message-item.received[data-depth="3"] .message-bubble,
.message-item.received[data-depth="5"] .message-bubble{
    background: var(--surface-hover, #f8f9fa);
}/* Replying-to indicator */
.replying-to-indicator{
    background: rgba(var(--primary-rgb, 0, 120, 255), 0.08);
    border-left: 3px solid var(--primary-color);
    padding: 6px 10px;
    margin-bottom: 6px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}.replying-to-indicator strong{
    color: var(--primary-color);
    font-weight: 600;
}/* ===================================
   Message Thread Blocks (Collapsible)
   =================================== */

.message-thread-block{
    background: var(--surface);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    transition: all 0.3s ease;
}.message-thread-block:hover{
    box-shadow: var(--shadow-large);
}.message-thread-block.collapsed{
    opacity: 0.8;
}.thread-header{
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark, #0056b3) 100%);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
    user-select: none;
}.thread-header:hover{
    background: linear-gradient(135deg, var(--primary-dark, #0056b3) 0%, var(--primary-color) 100%);
}.thread-toggle{
    font-size: 0.8rem;
    transition: transform 0.2s;
}.thread-info{
    flex: 1;
}.thread-content{
    padding: var(--spacing-md);
    background: var(--background);
    transition: all 0.3s ease;
}.thread-replies{
    margin-top: var(--spacing-md);
    padding-left: var(--spacing-md);
}/* Remove margin from messages in thread blocks */
.message-thread-block .message-item{
    margin-bottom: var(--spacing-md);
}.message-thread-block .message-item:last-child{
    margin-bottom: 0;
}/* Adjust indentation in thread blocks - subtle,
no borders */
.thread-replies .message-item[data-depth="1"]{
    margin-left: 0;
}.thread-replies .message-item[data-depth="2"]{
    margin-left: 20px;
}.thread-replies .message-item[data-depth="3"],
.thread-replies .message-item[data-depth="4"],
.thread-replies .message-item[data-depth="5"]{
    margin-left: 40px;
}.empty-thread{
    text-align: center;
    padding: var(--spacing-xxl);
    color: var(--text-secondary);
}.empty-thread-icon{
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}.empty-thread-text{
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm);
}.empty-thread-hint{
    font-size: 0.9rem;
    color: var(--text-tertiary);
}/* ============================================================
   SHARED UI COMPONENTS
   (formerly modules/settings/settings-styles.css)
   Used across: Settings,
Messaging,
Translations,
Breakfast,
Bookings (customer modal),
and any future module.
   ============================================================ */
/* Settings Page Specific Styles */

.container{
    max-width: 100%;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}/* Settings Navigation — matches main nav style from calendar-refresh.css */
.settings-nav{
    background: var(--gf-paper, #ffffff);
    display: flex;
    border-bottom: 1px solid var(--gf-line, #e7e4dd);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: sticky;
    top: 0;
    z-index: 99;
    padding: 4px 12px;
    gap: 2px;
    margin: 0;
}.settings-nav::-webkit-scrollbar{
    display: none;
}.nav-left{
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}.nav-left::-webkit-scrollbar{
    display: none;
}#globalTenantSelector{
    display: none;
}.settings-nav-btn{
    background: none;
    border: 0;
    border-bottom: 0;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 8px;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 500;
    color: var(--gf-ink-3, #7a766f);
    flex-shrink: 0;
}.settings-nav-btn:hover{
    background: var(--gf-paper-tint, #f4f1ea);
}.settings-nav-btn.active{
    background: color-mix(in oklab, var(--primary-color) 10%, white);
    color: var(--primary-color);
    border-bottom: 0;
}.settings-nav-btn--primary{
    background: var(--primary-color);
    color: white;
    box-shadow: 0 1px 3px color-mix(in oklab, var(--primary-color) 30%, transparent);
}.settings-nav-btn--primary:hover{
    background: color-mix(in oklab, var(--primary-color) 88%, black);
    color: white;
}.settings-nav-btn--actions{
    border-left: 1px solid var(--gf-line, #e7e4dd);
    margin-left: 6px;
    padding-left: 18px;
}#globalTenantSelector{
    display: none !important;
    width: 0;
    min-width: 0;
}/* Responsive Navigation */
@media (max-width: 768px){
    .settings-nav {
        flex-direction: row;
        align-items: center;
    }

    .nav-left {
        overflow-x: auto;
        padding-bottom: 0;
    }

    .nav-left .btn-secondary {
        margin-right: 10px;
    }
}.main-content{
    flex: 1;
    overflow-y: auto;
    background-color: var(--gf-paper, #ffffff);
}.settings-section{
    display: none;
    background: white;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}.settings-section.active{
    display: block;
}/* The Settings-family pages' title bar (Settings sections, Breakfast, Messaging,
   Translations, Image Manager). Same height and chrome as the SPA views' .view-header, so
   the line under it continues the sidebar's own across every screen in the app. */
.section-header[hidden]{
    display: none;
}.section-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 16px);
    padding: 12px 20px;
    min-height: 60px;
    border-bottom: 1px solid var(--gf-line, #e7e4dd);
    background-color: var(--gf-paper-warm, #faf8f3);
    border-radius: 0;
}/* Tab bars (Breakfast, Messaging, Translations) render after the title bar, so they pin
   below it rather than both claiming top: 0 and overlapping as the page scrolls. */
.section-header-sticky + .settings-nav,
.section-header + .settings-nav{
    top: 60px;
}.section-header-sticky{
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--gf-paper-warm, #faf8f3);
    border-radius: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}.section-header h2{
    margin: 0;
    color: var(--gf-ink-1, #1f1d1a);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
}.section-header .btn-secondary,
.section-header .btn-primary,
.section-header .settings-nav-btn{
    white-space: nowrap;
    width: auto;
    padding: 8px 14px;
    font-size: 13px;
}.section-controls{
    display: flex;
    gap: 10px;
    align-items: center;
}.section-content{
    padding: 0;
}/* ── Table Styles ────────────────────────────────────────────────────────────
   Full-bleed, and headed the same way the Customers / Expenses / Reports tables are:
   small uppercase muted labels on the paper tint, no outer border, rounded corner or
   card. Every Settings-family table (.data-table) shares this. */
.table-container{
    overflow-x: auto;
    background: var(--gf-paper, #ffffff);
}.data-table{
    width: 100%;
    border-collapse: collapse;
    background: var(--gf-paper, #ffffff);
    font-size: 13px;
}.data-table thead{
    background: var(--gf-paper-tint, #f4f1ea);
}.data-table th,
.data-table td{
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--gf-line-soft, #f1eee7);
}.data-table th{
    background: var(--gf-paper-tint, #f4f1ea);
    color: var(--gf-ink-3, #7a766f);
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: 1px solid var(--gf-line, #e7e4dd);
}.data-table td{
    color: var(--gf-ink-1, #1f1d1a);
}
/* Tax abbreviations sitting inside a rate cell in the Rooms and Vehicles tables
   ("€ 45.00 VAT, TT"). Deliberately quiet: the amount is what the eye is looking for, and
   the codes qualify it — the full tax names are on the element's tooltip. nowrap so a
   two-code list never wraps under the amount and doubles the row height. */
/* "Shared across Properties" marker, used by the Extras and Vehicles lists. Sits beside a name
   rather than in a column of its own, so it stays small and does not compete with the name it
   qualifies; the tooltip carries the actual Property list. help cursor advertises that. */
.shared-badge{
    font-size: 0.85em;
    line-height: 1;
    cursor: help;
    opacity: 0.75;
    vertical-align: baseline;
    white-space: nowrap;
}
.shared-badge:hover{ opacity: 1; }

.rate-tax-codes{
    color: var(--gf-ink-3, #7a766f);
    font-size: 0.82em;
    white-space: nowrap;
}/* A full-bleed table has no container gutter, so the inset has to come from the outermost
   cells. 20px matches the title bar's own padding above it, which is what makes the first
   column look deliberately aligned rather than pushed against the window edge. */
.data-table th:first-child,
.data-table td:first-child,
.customers-table th:first-child,
.customers-table td:first-child,
.expenses-table th:first-child,
.expenses-table td:first-child,
.reports-table th:first-child,
.reports-table td:first-child{
    padding-left: var(--spacing-lg, 24px);
}.data-table th:last-child,
.data-table td:last-child,
.customers-table th:last-child,
.customers-table td:last-child,
.expenses-table th:last-child,
.expenses-table td:last-child,
.reports-table th:last-child,
.reports-table td:last-child{
    padding-right: var(--spacing-lg, 24px);
}.data-table tbody tr:hover{
    background: var(--gf-paper-tint, #f4f1ea);
}/* Clickable entity rows (settings tables open the edit modal on row click) */
.data-table tbody tr[data-id]{
    cursor: pointer;
}/* Modal footer: actions right-aligned,
Delete pushed to the far left */
.modal-footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 25px;
}/* Keep all footer buttons identical (Delete carries an emoji, Cancel carries
   .close-btn which would otherwise force 1.5rem — normalise them all here).
   Target both .btn (legacy PHP modals) and standalone .btn-* (ModalBuilder). */
.modal-footer .btn,
.modal-footer .btn-primary,
.modal-footer .btn-secondary,
.modal-footer .btn-danger{
    height: 38px;
    line-height: 1;
    font-size: 0.9rem;
    font-weight: 500;
    flex: none;    /* never grow or shrink — stay at natural content width */
    width: auto;
}/* Modal footer delete button sits on the left,
away from Cancel/Save */
.modal-delete-btn{
    margin-right: auto;
}/* Customer modal,
Messages tab only: takes over the same left-hand footer slot as
   .modal-delete-btn (mutually exclusive with it — see switchCustomerTab) */
.messages-footer-actions{
    display: flex;
    gap: 10px;
    margin-right: auto;
}/* ── Tenant Billing Info tab ──────────────────────────────────────────────── */
.billing-section-box{
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: var(--border-radius, 8px);
    padding: 16px;
    margin-bottom: 16px;
    background: #fff;
}.billing-section-box h4{ margin: 0 0 .35rem; }.billing-section-box .billing-section-desc{
    margin: 0 0 .85rem;
    color: #666;
    font-size: .85rem;
}.billing-add-row{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: .85rem;
}.billing-add-row input{
    padding: 6px 9px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: .85rem;
}.billing-add-row .lbl-input{ flex: 1 1 auto; min-width: 0; }/* Label grows with the modal */
.billing-add-row .code-input{ flex: 0 0 80px;  width: 80px; }/* Code stays fixed */

/* ── Shared info tooltip ("?" icon) ──────────────────────────────────────────
   Replaces long inline description paragraphs/hints with a compact icon.
   Click-to-toggle (not hover-only) so it also works on touch devices. */
.info-tooltip{
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: var(--spacing-sm, 8px);
}.info-tooltip-trigger{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    background: transparent;
    color: var(--primary-color);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}.info-tooltip-trigger:hover,
.info-tooltip-trigger:focus,
.info-tooltip.is-open .info-tooltip-trigger{
    background: var(--primary-color);
    color: #fff;
    outline: none;
}.info-tooltip-content{
    display: none;
    position: absolute;
    z-index: 60;
    top: 24px;
    left: 0;
    width: 280px;
    max-width: 70vw;
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: var(--border-radius, 8px);
    background: #fff;
    box-shadow: var(--shadow-large, var(--shadow));
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.4;
    color: #666;
    white-space: normal;
    text-align: left;
    /* Prevent inheriting text-transform: uppercase / bold weight from parent
       headings (h3/h4/th) the tooltip icon is placed inside. */
    text-transform: none;
}.info-tooltip.is-open .info-tooltip-content{
    display: block;
}/* The Max Adults guest-combination helper's list length depends on the room's own
   occupancy numbers (unlike every other info-tooltip's fixed short text) — a high-occupancy
   room can produce dozens of lines. Bound it to a scrollable panel so it can't grow tall
   enough to spill past the Add/Edit Room modal's own scrollable body. */
#roomGuestComboContent{
    max-height: 160px;
    overflow-y: auto;
}.billing-add-row .val-input{ flex: 0 0 140px; width: 140px; }/* Value stays fixed */
.billing-add-row .cp-label{
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    white-space: nowrap;
}.billing-add-row .add-btn{ margin-left: auto; }/* +Add pinned to the far right */

/* Compact billing tables — column spacing matches the input fields above */
.billing-section-box .data-table th,
.billing-section-box .data-table td{
    padding: 8px 9px;
}.billing-section-box .data-table td input{
    width: 100%;
    padding: 6px 9px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: .85rem;
}.data-table tbody tr:last-child td{
    border-bottom: none;
}/* Sticky Column Styles */
.data-table .sticky-column{
    position: sticky;
    left: 0;
    background-color: var(--gf-paper, #ffffff);
    z-index: 10;
    border-right: 1px solid var(--gf-line, #e7e4dd);
    min-width: 120px;
    white-space: nowrap;
}.data-table thead .sticky-column{
    background-color: var(--gf-paper-tint, #f4f1ea);
    z-index: 11;
}.data-table tbody tr:hover .sticky-column{
    background-color: var(--gf-paper-tint, #f4f1ea);
}/* Action Buttons */
.action-buttons{
    display: flex;
    gap: 5px;
}.btn-action{
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}.btn-edit{
    background-color: #28a745;
    color: white;
}.btn-edit:hover{
    background-color: #218838;
}.btn-delete{
    background-color: #dc3545;
    color: white;
}.btn-delete:hover{
    background-color: #c82333;
}/* Form Styles */
.form-row{
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}.form-group{
    flex: 1;
    display: flex;
    flex-direction: column;
}.form-group label{
    margin-bottom: 5px;
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}.form-group input,
.form-group select,
.form-group textarea{
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}.form-group textarea{
    resize: vertical;
    min-height: 80px;
}/* Modal Enhancements */
.modal-content{
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    min-width: 0;
    overflow-y: auto;
}/* Prevent iOS Safari from auto-zooming on input focus (requires font-size >= 16px) */
.modal input,
.modal select,
.modal textarea{
    font-size: 16px;
}.modal-.status-badge.inactive{
    background-color: #6c757d;
    color: white;
}.actions-cell{
    white-space: nowrap;
}.actions-cell .btn{
    padding: 5px 9px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    margin-right: 3px;
}.actions-cell .btn:last-child{
    margin-right: 0;
}.btn.btn-primary{
    background-color: var(--primary-color);
    border: none;
    color: white;
}.btn.btn-primary:hover{
    background: color-mix(in oklab, var(--primary-color) 88%, black);
}.filter-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}.filter-controls{
    display: flex;
    align-items: center;
    gap: 10px;
}.filter-controls label{
    font-weight: bold;
}.filter-controls select{
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
}.filter-controls select:hover{
    border-color: #0066cc;
}.filter-controls select:focus{
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 3px rgba(0, 102, 204, 0.3);
}/* body/modal-header/modal-footer duplicates from settings-styles.css removed — originals in styles.css take precedence */

/* Status Badges */
.status-badge{
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}.status-badge.sent{ background: #d1fae5; color: #065f46; }.status-badge.failed{ background: #fee2e2; color: #991b1b; }.status-badge.pending{ background: #fef3c7; color: #92400e; }.status-badge.dismissed{ background: #f3f4f6; color: #6b7280; }.status-badge.paid{ background: #d4edda; color: #155724; }.status-badge.due{ background: #fff3cd; color: #856404; }.status-badge.overdue{ background: #f8d7da; color: #721c24; }/* Booking modal: payment status pill (see _loadBookingPaymentStatusPill() in app.js) */
.booking-payment-status-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    color: #333;
    transition: background-color .15s, border-color .15s;
}.booking-payment-status-pill:hover{
    background: #f8f9fa;
    border-color: #adb5bd;
}.booking-payment-status-pill span:first-child{
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}.status-active{
    background-color: #d4edda;
    color: #155724;
}.status-inactive{
    background-color: #f8d7da;
    color: #721c24;
}/* Loading State: .loading (inline row with a small ring) is defined once, under
   "Customer form loading state"; the copy with an hourglass that lived here was removed in v4.1.127. */
/* Empty State */
.empty-state{
    text-align: center;
    padding: 40px;
    color: #6c757d;
}.empty-state h3{
    color: #495057;
    margin-bottom: 10px;
}.empty-state p{
    margin-bottom: 20px;
}/* Responsive Design */
@media (max-width: 768px){
    .settings-nav {
        flex-wrap: wrap;
    }
    
    .settings-nav-btn {
        min-width: auto;
        flex: 1;
        padding: 12px 15px;
    }
    
    .section-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .section-controls {
        justify-content: flex-end;
    }
    
    .form-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .action-buttons {
        flex-wrap: wrap;
    }
    
    .data-table {
        font-size: 0.8rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 8px 10px;
    }
}

@media (max-width: 480px) {.section-content{
        padding: 0;
    }.section-header{
        /* No flex-wrap here: the 768px rule above already stacks this bar with
           flex-direction: column, and adding wrap to a COLUMN container produces a
           column-wrap layout — which puts the title and its controls back side by side,
           overflowing the screen. */
        padding: 12px 16px;
    }.modal-content{
        width: 95%;
    }.modal-body,
.modal-header,
.modal-footer{
        padding: 15px 20px;
    }
}/* Modal footer buttons on narrow phones: the footer never wraps or shrinks its buttons
   (see .modal-footer .btn above, "never grow or shrink"),
so 3 buttons in a row — e.g.
   Update/Cancel/Close,
or Mark as Read/Delete All Messages/Close — overflow the screen
   edge. Rather than wrapping BUTTONS onto extra rows (which left one button stranded
   alone with a big gap),
keep a single row and let each button's own TEXT wrap onto a
   second line instead — every button shares the row equally (flex:1 1 0) and shrinks
   below its natural content width (min-width:0, needed for text-wrap to kick in at all
   on a flex item) at the tab-bar's own text size (nav.modal-nav .settings-nav-btn, 12px).
   .messages-footer-actions is unwrapped via display:contents so its 2 buttons become
   direct flex items here too,
sharing the row evenly with Close instead of being
   confined to their own half. */
@media (max-width: 600px){
    .messages-footer-actions {
        display: contents;
    }
    .modal-footer .btn,
    .modal-footer .btn-primary,
    .modal-footer .btn-secondary,
    .modal-footer .btn-danger {
        flex: 1 1 0;
        min-width: 0;
        height: auto;
        min-height: 32px;
        padding: 4px 4px;
        font-size: 12px;
        line-height: 1.15;
        white-space: normal;
        text-align: center;
    }
    /* Fullscreen (expand button) sizing on mobile is handled in calendar-refresh.css,
       which needs !important there to win over its own mobile .modal-content constraints —
       see .modal-content.fullscreen in that file's @media (max-width: 768px) block. */

    /* Messages tab: smaller bubble text + tighter vertical spacing so more of the
       conversation and compose area fit on screen without scrolling. */
    .message-text {
        font-size: 12px;
    }

    /* Cap the auto-growing compose box a bit tighter on phones than the base rule's 260px —
       there's less vertical room to spare here. */
    #messageText {
        max-height: 180px;
    }

    .message-bubble {
        padding: 8px 10px;
    }

    .message-item {
        margin-bottom: 10px;
    }

    /* Stack the timestamp under the sender name instead of wrapping mid-row — the meta row
       (name, time, channel badge, status, reply) doesn't fit on one line at phone widths, and
       an unplanned wrap looked messy. This makes the 2-line height intentional. */
    .message-meta {
        flex-wrap: wrap;
    }
    .message-meta-identity {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        line-height: 1.3;
    }

    .msg-translate-toggle {
        margin-top: 4px;
        font-size: 11px;
    }

    .msg-translate-preview {
        margin-top: 4px;
        padding: 6px 8px;
    }

    .msg-translate-preview-text {
        max-height: 140px;
    }

    .message-actions {
        margin-top: 4px;
        font-size: 11px;
    }

    .message-input-container {
        /* Tighter side insets than the 16px base rule (.message-input-container, unmodified
           desktop) — phones have less width to spare, so give more of it to the reply box,
           translate checkbox, preview and "Registered for push" line instead of margin. */
        padding: 8px 8px var(--spacing-md);
    }

    .msg-template-picker-list {
        max-height: 180px;
    }

    .modal-footer {
        padding: 8px 12px;
    }
}/* Print Styles */
@media print{
    .settings-nav,
    .section-header .btn-primary,
    .action-buttons,
    .modal {
        display: none !important;
    }
    
    .settings-section {
        display: block !important;
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-after: always;
    }
    
    .settings-section:last-child {
        page-break-after: auto;
    }
}/* ── Onboarding Guide (documentation/onboarding-guide.php) ──────────────────── */
.onboarding-guide{
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
}.og-hero{
    padding: 0 0 20px;
    border-bottom: 2px solid var(--primary-color);
    margin-bottom: 28px;
}.og-title-row{
    display: flex;
    align-items: center;
    gap: 12px;
}.og-hero-logo{
    width: 34px;
    height: 34px;
    border-radius: 7px;
    flex-shrink: 0;
}.og-hero h1{
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--primary-color);
}.og-title-line2{
    margin: 10px 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-color);
    opacity: 0.8;
}.og-audience{
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}.og-overview{
    margin-bottom: 32px;
}.og-overview h2{
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}/* Collapsible Part A / Part B wrappers */
.og-part{
    margin-top: 56px;
}.og-part:first-of-type{
    margin-top: 16px;
}.og-part-title{
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--primary-color);
    cursor: pointer;
    list-style: none;
    padding: 6px 0 18px;
    margin-bottom: 28px;
    border-bottom: 3px solid var(--primary-color);
}.og-part-title::-webkit-details-marker{ display: none; }.og-part-title::before{
    content: '▸';
    display: inline-block;
    font-size: 0.65em;
    color: var(--text-secondary);
    transition: transform 0.15s ease;
}.og-part[open] > .og-part-title::before{ transform: rotate(90deg); }.og-part-title:hover{ opacity: 0.85; }/* Each phase separated by a top rule with breathing room */
.og-phase{
    padding-top: 28px;
    margin-bottom: 4px;
    border-top: 1px solid var(--border-color);
}.og-phase:first-of-type{
    padding-top: 0;
    border-top: none;
}.og-phase h2{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}.og-phase-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}/* Settings Reference icon chips — same shape/size as the sidebar's Settings
   submenu icons; color comes from the shared .nav-icon[data-color] rule
   (navigation.css) so it's always identical to the live sidebar. */
.og-icon-chip{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex-shrink: 0;
}.og-icon-chip svg{
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}.og-phase h3{
    font-size: 0.95rem;
    font-weight: 700;
    margin: 22px 0 8px;
}.og-phase p{ margin: 0 0 10px; }.og-phase ol,
.og-phase ul{ margin: 0 0 12px; padding-left: 20px; }.og-phase li{ margin-bottom: 5px; }.og-checklist{ list-style: none; padding: 0; }.og-checklist li::before{ content: '☐ '; color: var(--primary-color); font-size: 1.1em; }.og-callout{
    display: block;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 10px 0;
    font-size: 13px;
    line-height: 1.5;
}.og-callout-warning{ background: #fff8e1; border-left: 3px solid var(--warning-color, #f59e0b); }.og-callout-info{ background: #e8f4f8; border-left: 3px solid var(--primary-color); }/* CLI command block in the WhatsApp Export Guide modal (Property → WhatsApp tab) */
.wa-export-cli{
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12.5px;
    line-height: 1.5;
    padding: 12px 14px;
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}.og-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 12px;
}.og-table th,
.og-table td{
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}.og-table thead{ background: var(--bg-tertiary); }.og-table th{ font-weight: 600; }.og-table a{ color: var(--primary-color); }.og-toc{
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    margin-top: 14px;
}.og-toc-col{ flex: 1 1 220px; min-width: 200px; }.og-toc-col h4{ margin: 0 0 8px; font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.02em; }.og-toc-col ul{ list-style: none; margin: 0; padding: 0; }.og-toc-col li{ margin-bottom: 6px; }.og-toc-col a{ display: inline-flex; align-items: center; gap: 8px; color: var(--primary-color); text-decoration: none; font-size: 13px; }.og-toc-col a:hover{ text-decoration: underline; }/* Payment Workflow diagram (Part C) — a vertical flow of numbered steps connected by a
   rail line,
distinguishing automated (cron-driven Workflow rules) from manual
   (staff-triggered, e.g. Billing tab buttons) steps,
with a final branch for the two
   possible outcomes (guest pays vs. guest cancels). */
.og-flow{
    position: relative;
    margin: 20px 0 28px;
    padding-left: 46px;
}.og-flow::before{
    content: '';
    position: absolute;
    left: 17px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: var(--border-color);
}.og-flow-step{
    position: relative;
    padding-bottom: 26px;
}.og-flow-step:last-child{ padding-bottom: 0; }.og-flow-badge{
    position: absolute;
    left: -46px;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    background: var(--primary-color);
    color: #fff;
    z-index: 1;
}.og-flow-step[data-kind="manual"] .og-flow-badge{ background: var(--warning-color, #f59e0b); }.og-flow-step[data-kind="outcome"] .og-flow-badge{ background: #6c757d; }.og-flow-card{
    background: var(--bg-secondary, #f4f6f8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
}.og-flow-kind{
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 4px;
    margin-bottom: 6px;
}.og-flow-step[data-kind="auto"]    .og-flow-kind{ background: #e0e7ff; color: #3730a3; }.og-flow-step[data-kind="manual"]  .og-flow-kind{ background: #fff3cd; color: #856404; }.og-flow-step[data-kind="outcome"] .og-flow-kind{ background: #e2e3e5; color: #383d41; }.og-flow-card h4{ margin: 0 0 6px; font-size: 0.95rem; font-weight: 700; }.og-flow-card p{ margin: 0 0 6px; font-size: 13px; line-height: 1.55; }.og-flow-card p:last-child{ margin-bottom: 0; }.og-flow-card code{ font-size: 12px; }.og-flow-branch{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}.og-flow-branch .og-flow-card{ flex: 1 1 260px; }/* Button disabled state for visual feedback when no tenant selected */
.btn-disabled{
    opacity: 0.6;
    cursor: not-allowed;
    /* Allow pointer events so clicks can trigger validation messages */
    pointer-events: auto !important;
}.btn-disabled:hover{
    opacity: 0.6 !important;
}/* Ensure disabled buttons can still be clicked for validation */
.btn-primary.btn-disabled{
    pointer-events: auto !important;
}/* Database Management Styles */
.info-card{
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}.info-card h3{
    margin: 0 0 15px 0;
    color: #495057;
    font-size: 1.2em;
    font-weight: 600;
}/* Card header row with action button(s) on the right — opt-in via modifier so
   it doesn't affect the other .card-header-row usages that stack h3/p only. */
.card-header-row-with-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm, 12px);
}.card-header-row-with-actions h3{
    margin: 0;
    flex: 0 1 auto;
}.card-header-row-with-actions .card-description{
    flex: 1 1 100%;
    order: 3;
    margin: 0;
}.card-header-actions{
    display: flex;
    gap: var(--spacing-sm, 8px);
    flex-shrink: 0;
}/* Collapsible info-card (e.g. Booking.com import — hidden by default when Channex is connected) */
.info-card-toggle{
    cursor: pointer;
    user-select: none;
}.info-card-toggle-icon{
    display: inline-block;
    font-size: 0.75em;
    color: #999;
    margin-left: 6px;
    transition: transform 0.15s;
}.info-card-toggle-icon.is-collapsed{
    transform: rotate(-90deg);
}.info-card-body.is-collapsed{
    display: none;
}.schema-info{
    display: flex;
    flex-direction: column;
    gap: 10px;
}.info-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f3f4;
}.info-row:last-child{
    border-bottom: none;
}.status-badge{
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
}.status-badge.up-to-date{
    background-color: #d4edda;
    color: #155724;
}.status-badge.needs-update{
    background-color: #fff3cd;
    color: #856404;
}.status-badge.error{
    background-color: #f8d7da;
    color: #721c24;
}/* Danger Zone Styling */
.danger-zone{
    border-color: #dc3545;
    background: #fff5f5;
}.danger-zone h3{
    color: #dc3545;
    display: flex;
    align-items: center;
    gap: 8px;
}.warning-text{
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 12px;
    margin: 15px 0;
}/* Collapsible danger-zone card (e.g. Channex Unlink) — title-only summary,
expands to reveal the warning text + action button. Reuses .json-log-details
   for the <details>/<summary> mechanics,
restyled to match .danger-zone h3. */
.channex-unlink-summary{
    cursor: pointer;
    font-weight: 600;
    font-size: 1.2em;
    color: #dc3545;
    padding: var(--spacing-sm) 0;
}.channex-unlink-details[open] .channex-unlink-summary{
    margin-bottom: var(--spacing-sm);
}/* Collapsible info-card sections (calendar export/import) */
.info-card > details > summary{
    cursor: pointer;
    list-style: none;
    padding: var(--spacing-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}.info-card > details > summary::-webkit-details-marker{ display: none; }.info-card > details > summary::before{
    content: '▶';
    font-size: 0.7em;
    color: var(--text-secondary);
    transition: transform 0.15s;
    flex-shrink: 0;
}.info-card > details[open] > summary::before{ transform: rotate(90deg); }.info-card > details > summary h3{
    margin: 0;
    display: inline;
}.info-card > details[open] > summary{
    margin-bottom: var(--spacing-sm);
}/* Nested sub-sections within a collapsible info-card (e.g. Channex.io's Queue Failures /
   Task IDs / Webhook Events / API Log, grouped under one major card). Same collapse
   mechanics as .info-card > details > summary above,
just indented + a smaller marker to
   read as a sub-level rather than a sibling top-level card. */
.info-subsection{
    margin: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-md);
    padding-left: var(--spacing-sm);
    border-left: 2px solid #e9ecef;
}.info-subsection > summary{
    cursor: pointer;
    list-style: none;
    padding: var(--spacing-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}.info-subsection > summary::-webkit-details-marker{ display: none; }.info-subsection > summary::before{
    content: '▶';
    font-size: 0.65em;
    color: var(--text-secondary);
    transition: transform 0.15s;
    flex-shrink: 0;
}.info-subsection[open] > summary::before{ transform: rotate(90deg); }.info-subsection > summary h4{
    margin: 0;
    display: inline;
}.info-subsection[open] > summary{
    margin-bottom: var(--spacing-sm);
}.import-result{
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    background: var(--surface-2, #f7f5f2);
    border: 1px solid var(--border-color, #e0dcd4);
}.import-result ul{
    margin: var(--spacing-sm) 0 0;
    padding-left: 20px;
}.import-result .import-result-summary{
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    font-weight: 500;
}.duplicate-group-card{
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    background: var(--surface-2, #f7f5f2);
    border: 1px solid var(--border-color, #e0dcd4);
}.duplicate-group-header{
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
}.duplicate-group-header .badge{
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--warm-accent, #C5894F);
    color: white;
    font-size: 0.8em;
    font-weight: 500;
}.duplicate-candidates{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}.duplicate-candidate{
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-color, #e0dcd4);
    cursor: pointer;
}.duplicate-candidate input[type="radio"]{
    margin-top: 3px;
}.duplicate-group-actions{
    margin-top: var(--spacing-md);
    display: flex;
    justify-content: flex-end;
}.action-buttons{
    display: flex;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
}.btn-danger{
    background: linear-gradient(135deg, var(--warm-accent) 0%, #C5894F 100%);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    box-shadow: none;
    transform: none;
}.btn-danger:hover{
    background: linear-gradient(135deg, #C5894F 0%, #A67442 100%);
    box-shadow: none;
    transform: none;
}.btn-warning{
    background-color: #ffc107;
    color: #212529;
    border: 1px solid #ffc107;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}.btn-warning:hover{
    background-color: #e0a800;
    border-color: #d39e00;
}.btn-success{
    background-color: #28a745;
    color: white;
    border: 1px solid #28a745;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}.btn-success:hover{
    background-color: #218838;
    border-color: #1e7e34;
}.action-descriptions{
    margin-top: 20px;
}.action-desc{
    margin-bottom: 12px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
    font-size: 0.9em;
}.action-desc strong{
    color: #495057;
}/* Responsive adjustments for database section */
@media (max-width: 768px){
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .action-buttons {
        flex-direction: column;
    }

    /* Table row action buttons must stay horizontal and auto-sized */
    .data-table .action-buttons {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .data-table .action-buttons .btn-action {
        width: auto;
    }
    
    .btn-danger,
    .btn-warning,
    .btn-success {
        width: 100%;
        text-align: center;
    }

    /* Table row secondary buttons: not full-width */
    .data-table .btn-warning,
    .data-table .btn-success,
    .data-table .btn-action {
        width: auto;
    }

    /* Table action icon buttons: equal square size */
    .data-table .btn-primary,
    .data-table .btn-danger {
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}/* Notification Management Styles */
.notification-stats{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}.stat-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
}.notification-form{
    display: flex;
    flex-direction: column;
    gap: 15px;
}.form-actions{
    display: flex;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
}.template-btn{
    padding: 12px 16px;
    text-align: left;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}.template-btn:hover{
    background: #e9ecef;
    border-color: #adb5bd;
}.template-btn:active{
    background: #dee2e6;
}/* Hidden elements */
.hidden{
    display: none !important;
}#screenTypeRow.hidden,
#customerIdsRow.hidden,
#templateVariables.hidden,
#addDemoDataBtn.hidden,
#addDemoDataDesc.hidden{
    display: none;
}/* Template Variables */
.variable-inputs{
    display: flex;
    flex-direction: column;
    gap: 8px;
}.variable-inputs input{
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
}.variable-inputs input:focus{
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}.help-text{
    color: #6c757d;
    font-size: 0.85em;
    margin-top: 4px;
    display: block;
}#customerSpokenLanguages{
    height: 120px;
}/* Push Notification Logs */
.log-controls{
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: center;
    flex-wrap: wrap;
}.log-container{
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: white;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
}.log-table{
    width: 100%;
    border-collapse: collapse;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85em;
    line-height: 1.4;
}.log-table thead{
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 10;
}.log-table th{
    padding: 8px 6px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
    font-size: 0.8em;
    white-space: nowrap;
}.log-table td{
    padding: 6px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
}/* Column widths */
.log-col-time{ width: 80px; }.log-col-level{ width: 60px; }.log-col-message{ width: 40%; }.log-col-ip{ width: 100px; }.log-col-request{ width: 25%; }.log-col-context{ width: 80px; }/* Row styling based on log level */
.log-row.ERROR{
    background-color: #fff5f5;
}.log-row.WARNING{
    background-color: #fffbf0;
}.log-row.INFO{
    background-color: #f0f8ff;
}.log-row.DEBUG{
    background-color: #f8f9fa;
}.log-row:hover{
    background-color: rgba(0,123,255,0.1);
}.log-time{
    font-weight: 600;
    color: #6c757d;
    white-space: nowrap;
}.log-level-badge{
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: 700;
    white-space: nowrap;
}.log-level-badge.ERROR{
    background-color: #dc3545;
    color: white;
}.log-level-badge.WARNING{
    background-color: #ffc107;
    color: #212529;
}.log-level-badge.INFO{
    background-color: #17a2b8;
    color: white;
}.log-level-badge.DEBUG{
    background-color: #6c757d;
    color: white;
}.log-message-cell{
    color: #495057;
    word-break: break-word;
}.log-ip{
    font-weight: 500;
    color: #6c757d;
    white-space: nowrap;
}.log-request{
    font-family: monospace;
    color: #495057;
    word-break: break-all;
    font-size: 0.9em;
}.log-context-details{
    cursor: pointer;
}.log-context-details summary{
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.8em;
    -webkit-user-select: none;
    user-select: none;
}.log-context-details summary:hover{
    background: #dee2e6;
}.log-context-data{
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    padding: 8px;
    margin-top: 4px;
    font-size: 0.8em;
    color: #6c757d;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 150px;
    overflow-y: auto;
}.log-context-empty{
    color: #adb5bd;
    font-style: italic;
}.log-stats{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.9em;
    color: #6c757d;
}.log-empty{
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}/* Responsive design for smaller screens */
@media (max-width: 768px){
    .log-table {
        font-size: 0.75em;
    }
    
    .log-col-time { width: 70px; }
    .log-col-level { width: 50px; }
    .log-col-ip { width: 80px; }
    .log-col-context { width: 60px; }
    
    .log-table th,
    .log-table td {
        padding: 4px;
    }
}/* Enhanced Push Notification Management Styles */

/* Sortable table enhancements */
.sortable-table th.sortable{
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background-color 0.2s;
}.sortable-table th.sortable:hover{
    background-color: #f8f9fa;
}.sortable-table th.sortable:active{
    background-color: #e9ecef;
}.sort-indicator{
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.5;
    transition: opacity 0.2s;
}.sort-indicator::before{
    content: "⇅";
}.sort-indicator.asc::before{
    content: "↑";
    opacity: 1;
    color: #007bff;
}.sort-indicator.desc::before{
    content: "↓";
    opacity: 1;
    color: #007bff;
}/* Customer selection styles */
.customer-count{
    background: #e3f2fd;
    color: #1565c0;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-left: 10px;
}.selected-summary{
    background: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
    border-left: 4px solid #28a745;
    font-weight: 500;
}.subscription-checkbox{
    margin: 0;
    transform: scale(1.2);
    cursor: pointer;
}.subscription-row.selected{
    background-color: #e8f5e8 !important;
}.subscription-row.selected:hover{
    background-color: #d4edda !important;
}/* Enhanced template dropdown styling */
#notificationTemplate optgroup{
    font-weight: bold;
    color: #495057;
    background: #f8f9fa;
}#notificationTemplate option{
    font-weight: normal;
    padding: 4px 8px;
}/* Responsive filter controls */
.filter-controls{
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}.filter-controls label{
    font-weight: 500;
    margin: 0;
}.filter-controls select{
    min-width: 150px;
}.filter-controls button{
    white-space: nowrap;
}/* Fix for hidden form rows */
.hidden,
.form-row.hidden{
    display: none !important;
}

@media (max-width: 768px) {.filter-controls{
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }.filter-controls > *{
        width: 100%;
    }.sortable-table th{
        font-size: 0.875rem;
    }.sort-indicator{
        font-size: 10px;
        right: 4px;
    }
}/* ========================================
   LIST VIEW — vertical Timeline-style bars
   Rows = dates,
columns = resources (rooms/cars)
   Multiple months stack vertically with lazy loading.
   Booking bars span multiple rows,
same half-row
   cap logic as Timeline.
   ======================================== */

.list-view-wrapper{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg-primary);
}/* Single scrollable area — header is sticky inside it */
.list-scroll-area{
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}/* ── Sticky column header ── */
.list-grid-header{
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--primary-color);
    min-width: max-content;
}.list-header-label{
    width: 64px;
    min-width: 64px;
    /* Corner cell above the date column: pinned to the left edge like the column itself, so a
       horizontal scroll (a phone, or many rooms on a desktop) never carries it away. Both rows
       of the header (Property super-header, resource names) start with one of these. */
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-secondary);
    padding: 5px 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
}.list-header-cell{
    flex: 1 1 72px;     /* matches .list-res-col — both stretch equally */
    width: 72px;        /* explicit width caps max-content so header = same min-width as body */
    min-width: 72px;
    padding: 5px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    border-right: 1px solid var(--border-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.list-header-cell:last-child{ border-right: none; }.list-header-cell.type-room{ border-top: 3px solid var(--primary-color); }.list-header-cell.type-car{ border-top: 3px solid var(--warning-color); }/* ── Property super-header row (List view, "All Properties" mode) ──
   Sits above .list-resource-row,
grouping contiguous Room columns under their Property name
   (rooms are 1:1 with a Property). Vehicle columns get a blank filler cell instead — cars are
   many-to-many with Properties (car_tenant_assignments),
so a Property header over them would
   be misleading. Same warm color as the Timeline's .property-caption rows for consistency. */
.list-property-row{
    display: flex;
    border-bottom: 1px solid var(--border-color);
}.list-resource-row{
    display: flex;
}.list-property-cell{
    padding: 4px 6px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: white;
    background: linear-gradient(135deg, var(--warm-accent) 0%, var(--warm-neutral) 100%);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid var(--bg-secondary);
    box-sizing: border-box;
}.list-property-cell:last-child{ border-right: none; }.list-property-cell-blank{
    background: transparent;
}/* ── Body: month blocks stacked vertically ── */
.list-grid-body{
    display: flex;
    flex-direction: column;
    min-width: max-content;
    position: relative;
}/* ── Date column ── */
.list-date-col{
    width: 64px;
    min-width: 64px;
    flex-shrink: 0;
    /* Pinned to the scroll area's left edge while the resource columns scroll under it — the
       same position: sticky the Timeline's sidebar uses. It is a flex child of each
       .list-month-block (min-width: max-content), which is the range it sticks within. Opaque
       background because bars now pass beneath it; z-index above .lv-bar (2), its selected ring
       (4) and .list-bg-cell (1), below the sticky header (10). The row builder must not set an
       inline position on it (it used to set position:relative, which would win over this). */
    position: sticky;
    left: 0;
    z-index: 6;
    background: var(--bg-primary);
    border-right: 1px solid rgba(0,0,0,0.15);
}/* Individual date cell (absolute positioned) */
.list-date-cell{
    position: absolute;
    left: 0; right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0,0,0,0.10);
    font-size: 12px;
    user-select: none;
}.list-date-cell .ldc-day{
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1;
}.list-date-cell .ldc-dow{
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.2px;
}/* Today highlight */
.list-date-cell.today{
    background: rgba(69, 148, 162, 0.12);
}.list-date-cell.today .ldc-day{
    color: var(--primary-color);
    font-weight: 800;
}/* Weekend */
.list-date-cell.weekend .ldc-day,
.list-date-cell.weekend .ldc-dow{
    color: var(--text-secondary);
    opacity: 0.75;
}/* Month separator label */
.list-month-label{
    display: flex;
    align-items: center;
    padding: 0 6px;
    box-sizing: border-box;
    border-bottom: 2px solid var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-secondary);
    user-select: none;
}/* ── Resource column ── */
.list-res-col{
    flex: 1 1 72px;     /* matches .list-header-cell — both stretch equally */
    min-width: 72px;
    position: relative;
    border-right: 1px solid rgba(0,0,0,0.10);
}.list-res-col:last-child{ border-right: none; }/* Background clickable cells */
.list-bg-cell{
    position: absolute;
    left: 0; right: 0;
    cursor: pointer;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0,0,0,0.10);
    transition: background 0.1s;
    z-index: 1;
}.list-bg-cell:hover{
    background: rgba(69, 148, 162, 0.07);
}/* Today highlight: spans the full row,
all resource columns (not just the date column) */
.list-bg-cell.today{
    background: rgba(69, 148, 162, 0.06);
}.list-bg-cell.today:hover{
    background: rgba(69, 148, 162, 0.10);
}/* Row hover: highlight the date label in the first column */
.list-date-cell.lv-row-hover{
    background: rgba(69, 148, 162, 0.13);
}.list-date-cell.lv-row-hover .ldc-day{
    color: var(--primary-color);
}/* Selection states */
.list-bg-cell.lv-selected{
    background: rgba(69, 148, 162, 0.16) !important;
}/* Check-in row: bottom half filled + 2px accent line at the midpoint */
.list-bg-cell.lv-range-start{
    background: linear-gradient(
        to bottom,
        transparent               calc(50% - 1px),
        var(--primary-color)      calc(50% - 1px),
        var(--primary-color)      calc(50% + 1px),
        rgba(69, 148, 162, 0.28)  calc(50% + 1px)
    ) !important;
}/* Check-out row: top half filled + 2px accent line at the midpoint */
.list-bg-cell.lv-range-end{
    background: linear-gradient(
        to bottom,
        rgba(69, 148, 162, 0.28)  calc(50% - 1px),
        var(--primary-color)      calc(50% - 1px),
        var(--primary-color)      calc(50% + 1px),
        transparent               calc(50% + 1px)
    ) !important;
}/* Single-cell selection (start == end): both halves = full fill with line */
.list-bg-cell.lv-range-start.lv-range-end{
    background: linear-gradient(
        to bottom,
        rgba(69, 148, 162, 0.18)  calc(50% - 1px),
        var(--primary-color)      calc(50% - 1px),
        var(--primary-color)      calc(50% + 1px),
        rgba(69, 148, 162, 0.18)  calc(50% + 1px)
    ) !important;
}/* ── Vertical booking bar ── */
.lv-bar{
    position: absolute;
    left: 3px;
    right: 3px;
    z-index: 2;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 3px;
    box-sizing: border-box;
    transition: filter 0.1s;
    border-left: 8px solid var(--source-stripe, transparent);
}.lv-bar:hover{ filter: brightness(1.12); }/* Selected booking ring — matches .booking-bar-span.is-selected style */
.lv-bar.is-selected{
    outline: 3px solid white;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 5px var(--primary-color);
    z-index: 4;
    filter: brightness(1.05);
}/* Status colours — source color shown as left border via --source-stripe set on each bar element */
.lv-bar.status-confirmed{ background: var(--gf-confirmed); color: var(--gf-confirmed-fg); }.lv-bar.status-inhouse{ background: var(--gf-inhouse);   color: var(--gf-inhouse-fg); }.lv-bar.status-tentative{ background: var(--gf-tentative); color: var(--gf-tentative-fg); }.lv-bar.status-blocked{ background: var(--gf-blocked); color: var(--gf-blocked-fg); }.lv-bar.status-imported{ background: var(--gf-imported); color: var(--gf-imported-fg); }/* Room-closure blocks (imported placeholder marked as "not a real booking"): blend blocked-black with the import colour */
.lv-bar.status-closure{ background: var(--gf-blocked); color: #fff; }.lv-bar.is-closure{
  background: repeating-linear-gradient(45deg,
    var(--gf-blocked) 0 6px,
    var(--gf-imported) 6px 12px);
  color: #fff;
  z-index: 1;
  opacity: .85;
}/* Draft selection bars — same look as Calendar/Timeline selection bars */
.lv-bar.is-draft{
    background: repeating-linear-gradient(
        45deg,
        color-mix(in oklab, var(--primary-color) 55%, white) 0 6px,
        color-mix(in oklab, var(--primary-color) 30%, white) 6px 12px
    );
    color: var(--primary-color);
    border: 1.5px dashed var(--primary-color);
    box-shadow: 0 1px 6px color-mix(in oklab, var(--primary-color) 25%, transparent);
    z-index: 1; /* behind real booking bars (z-index 2) */
    pointer-events: none;
}.lv-bar.is-draft-pending{
    background: color-mix(in oklab, var(--primary-color) 20%, white);
    color: var(--primary-color);
    border: 1.5px dashed color-mix(in oklab, var(--primary-color) 60%, white);
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
}/* Import source banner shown at the top of the booking modal for ICS-imported bookings */
.import-banner{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 14px;
    background: color-mix(in oklab, var(--gf-imported) 12%, white);
    border: 1px solid color-mix(in oklab, var(--gf-imported) 40%, white);
    border-left: 4px solid var(--gf-imported);
    border-radius: 6px;
    font-size: 13px;
    color: color-mix(in oklab, var(--gf-imported) 70%, #1f1d1a);
}.import-banner{ cursor: pointer; }.import-banner:hover{ filter: brightness(0.95); }.import-banner-icon{ font-size: 16px; flex: 0 0 auto; }.import-banner-closure-toggle{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    padding: 2px 8px;
    border: 1px solid color-mix(in oklab, var(--gf-imported) 40%, white);
    border-radius: 4px;
    user-select: none;
}.import-banner-closure-toggle:hover{ background: color-mix(in oklab, var(--gf-imported) 15%, white); }.import-banner-closure-toggle input{ cursor: pointer; margin: 0; }.import-banner-lock{
    margin-left: auto;
    font-size: 12px;
    opacity: 0.75;
    white-space: nowrap;
}/* Locked input/select fields for imported or Channex-synced (OTA) bookings */
input.field-locked,
input[disabled].field-locked,
select.field-locked,
select[disabled].field-locked{
    background: #f3f3f3 !important;
    color: #888 !important;
    cursor: not-allowed !important;
    border-color: #ccc !important;
    opacity: 1;
}/* Avatar circle (initials) inside the vertical bar */
.lv-bar .bar-avatar{
    width: 24px;
    height: 24px;
    font-size: 10px;
    flex: 0 0 auto;
    margin-top: 2px;
    background: rgba(127,127,127,0.20);
    color: inherit;
}/* Wraps avatar + pickup icon side by side when a pickup is set — replaces the bare .bar-avatar
   as the bar's top-level first child in that case (see _lvRenderBarContent). */
.lv-bar .bar-top-row{
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    margin-top: 2px;
}.lv-bar .bar-top-row .bar-avatar{
    margin-top: 0; /* bar-top-row already carries the top margin */
}/* Guest name — horizontal,
clipped to bar width */
.lv-bar .bar-name-wrap{
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}.lv-bar .bar-name{
    font-size: 10px;
    font-weight: 600;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    text-align: center;
    width: 100%;
    padding: 0 2px;
}/* Booking source shown below the guest name,
e.g. "Booking.com" / "Direct Booking" */
.lv-bar .bar-source{
    font-size: 8px;
    font-weight: 500;
    opacity: 0.8;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    text-align: center;
    width: 100%;
    padding: 0 2px;
}/* Guest count + dropoff icon — pinned to the bottom of the bar. margin-top:auto pushes it down
   regardless of whether .bar-name-wrap is present in this segment (a booking split across month
   blocks may host meta and name on different segments — see _applyUnifiedListViewBookingContent).
   Row,
not column: keeps this block's height constant whether or not the dropoff icon is
   present,
so .bar-name-wrap's centered midpoint doesn't shift based on that flag. */
.lv-bar .bar-meta{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    margin-top: auto;
    padding-bottom: 3px;
    opacity: 0.9;
}.lv-bar .bar-guests{
    font-size: 9px;
    font-weight: 700;
    color: inherit;
    background: rgba(127,127,127,0.15);
    border-radius: 4px;
    padding: 1px 4px;
    pointer-events: none;
}.lv-bar .bar-icon{
    font-size: 11px;
    background: rgba(255,255,255,0.90);
    border-radius: 3px;
    padding: 0 2px;
    line-height: 1.3;
    pointer-events: none;
}/* ── Responsive ── */
@media (max-width: 480px){
    .list-header-label,
    .list-date-col {
        width: 50px;
        min-width: 50px;
    }

    .list-header-cell {
        flex: 1 1 56px;
        width: 56px;
        min-width: 56px;
    }

    .list-res-col {
        flex: 1 1 56px;
        min-width: 56px;
    }

    .list-date-cell .ldc-day { font-size: 12px; }
}/* ---- Stepper field (label left, stepper right) --- */
.stepper-field{
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
}/* Dedicated row for the Adults/Children/Infants guest-count group (booking form's
   .stepper-field trio and Settings → Rooms' Max Adults/Children/Infants trio) — deliberately
   NOT relying on the shared .form-row class,
which an unconditional (mis-scoped) later rule
   forces into flex-direction: column regardless of viewport width. */
.guest-count-row{
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md, 16px);
    margin-bottom: var(--spacing-md, 16px);
}.guest-count-row .form-group{
    flex: 1;
    margin-bottom: 0;
}/* Label-above-stepper (instead of .stepper-field's default label-left/stepper-right) so
   Adults/Children/Infants fit on one line without overflowing a narrow modal. */
.guest-count-row .stepper-field{
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}.guest-count-row .stepper-field__label{
    font-size: 0.8rem;
}/* Dedicated row for Check-in/Check-out — same .form-row bug workaround as .guest-count-row
   above (that shared class stays vertically stacked regardless of viewport width). */
.date-row{
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md, 16px);
    margin-bottom: var(--spacing-md, 16px);
}.date-row .form-group{
    flex: 1;
    margin-bottom: 0;
}/* Row for Include Breakfast + the payment status pill — same .form-row bug workaround as
   .guest-count-row/.date-row above. */
.breakfast-payment-row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: var(--spacing-md, 16px);
}/* The payment pill keeps to the right edge on its own: with the Include Breakfast group hidden
   (no breakfast on offer, v4.1.77) it is the row's only child, and space-between would put it
   on the left. */
.breakfast-payment-row > .booking-payment-status-pill{
    margin-left: auto;
}.stepper-field__label{
    font-weight: 500;
    font-size: 0.9rem;
    color: #374151;
    white-space: nowrap;
}.bw-number-input{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border: 1.5px solid #d0d5dd;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    height: 36px;
    flex-shrink: 0;
}.bw-num-btn{
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 0;
    background: #f9fafb;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #344054;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.12s;
}.bw-num-btn:first-child{
    border-right: 1.5px solid #d0d5dd;
}.bw-num-btn:last-child{
    border-left: 1.5px solid #d0d5dd;
}.bw-num-btn:hover{ background: #eaecf0; }.bw-num-btn:active{ background: #d0d5dd; }.bw-number-input input[type="number"]{
    width: 44px;
    text-align: center;
    border: none;
    border-radius: 0;
    padding: 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: #101828;
    background: #fff;
    height: 36px;
    -moz-appearance: textfield;
    outline: none;
}.bw-number-input input[type="number"]::-webkit-outer-spin-button,
.bw-number-input input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; }/* Channex.io tab — Status row with inline action button */
.channex-status-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}.channex-status-row.is-collapsed{
    display: none;
}.rate-plan-channex-toggle.active{
    background: var(--bg-primary);
}.rate-plan-restrictions-toggle.active{
    background: var(--bg-primary);
}.rates-restrictions-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    font-size: 0.85rem;
}.rates-restrictions-row.is-collapsed{
    display: none;
}.rates-restrictions-row label{
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}/* Room Rates tab — one card per named Rate Plan (e.g. Best Available Rate, Bed & Breakfast Rate) */
.rate-plan-card{
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background: var(--surface);
}.rate-plan-card-header{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}.rate-plan-name{
    font-size: 1rem;
}.rate-plan-card-actions{
    display: flex;
    gap: var(--spacing-xs);
    margin-left: auto;
}.rate-plan-badge{
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}/* Room Details tab — Channex facility tag input (combobox with grouped dropdown, like Channex's own Edit Room > Content > Facilities) */
.facility-tag-input{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    min-height: 40px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color, #ccc);
    border-radius: var(--border-radius);
    background: #fff;
    margin-top: var(--spacing-xs);
}.facility-tag-input:focus-within{
    border-color: var(--primary-color);
}.facility-tags{
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}.facility-tag{
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: var(--background-secondary, #f0f0f0);
    border-radius: 999px;
    padding: 2px var(--spacing-sm);
    font-size: 0.85em;
    white-space: nowrap;
}.facility-tag button{
    border: none;
    background: none;
    cursor: pointer;
    color: #888;
    font-size: 1em;
    line-height: 1;
    padding: 0;
}.facility-tag button:hover{
    color: var(--danger-color, #c0392b);
}.facility-tag-input input[type="text"]{
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    padding: 4px 0;
    background: transparent;
}.facility-dropdown{
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border-color, #ccc);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-large);
    z-index: 20;
}.facility-dropdown .facility-group-title{
    font-size: 0.8em;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: var(--spacing-xs) var(--spacing-sm) 2px;
}.facility-dropdown .facility-option{
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px var(--spacing-sm);
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.95em;
}.facility-dropdown .facility-option:hover,
.facility-dropdown .facility-option.is-active{
    background: var(--background-secondary, #f0f0f0);
}.facility-dropdown .facility-empty{
    padding: var(--spacing-sm);
    color: #888;
    font-size: 0.9em;
}/* Modal Save buttons — spinner shown while an async save is in progress */
.btn.btn-loading{
    cursor: default;
    opacity: 0.85;
}.btn-spinner{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: var(--spacing-xs);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: middle;
    animation: btn-spinner-rotate 0.6s linear infinite;
}
@keyframes btn-spinner-rotate {
    to { transform: rotate(360deg); }
}/* ── Cancel / No-Show confirmation modal ───────────────────────────────────── */

/* This confirmation is opened from inside #bookingModal, which itself can already be raised to
   z-index 1010 (see openBookingEditFromCustomer()/closeModal() in app.js/customer-modal.js, for
   the case where the Booking modal was opened from on top of the Customer modal). Both modals
   share the base .modal{z-index:1000}, so without this override #cancelNoShowModal was tied
   with (or behind) the raised booking modal — not just a visual glitch: with the booking modal's
   full-viewport backdrop on top, every click meant for this dialog's own Confirm button was
   silently intercepted by whatever sat underneath it in the booking form instead. 1020 stays
   above every ad-hoc bump used elsewhere in the app (max 1010 today).*/
#cancelNoShowModal{
    z-index: 1020;
}.cns-modal-content{
    max-width: 560px;
    width: 95vw;
}.cns-modal-body{
    padding: var(--spacing-md) var(--spacing-lg);
    max-height: 60vh;
    overflow-y: auto;
}.cns-section{
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-light, #e9ecef);
}.cns-section:last-child{
    border-bottom: none;
    margin-bottom: 0;
}.cns-section h4{
    margin: 0 0 var(--spacing-xs) 0;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #6c757d);
}.cns-table{
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}.cns-table th,
.cns-table td{
    padding: 4px 8px;
    text-align: left;
}.cns-table thead th{
    font-weight: 600;
    border-bottom: 1px solid var(--border-light, #e9ecef);
}.cns-amount{
    text-align: right;
    white-space: nowrap;
}.cns-total-row td{
    border-top: 1px solid var(--border-light, #e9ecef);
    padding-top: 6px;
}.cns-policy-line{
    font-size: .9rem;
    margin: 0 0 var(--spacing-xs) 0;
}.cns-calc{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    font-size: .88rem;
    padding: var(--spacing-xs) 0;
}.cns-refund-label{
    font-weight: 600;
    color: var(--success-color, #28a745);
}.cns-refund-value{
    font-weight: 700;
    color: var(--success-color, #28a745);
    text-align: right;
}.cns-backpay-note{
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: var(--border-radius, 4px);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: .88rem;
    color: #5d4037;
}.cns-waive-row{
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: #f8f9fa;
    border-radius: var(--border-radius, 4px);
    font-size: .88rem;
}.cns-waive-row label{
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}.cns-hint{
    margin: 4px 0 0 24px;
    font-size: .8rem;
    color: var(--text-muted, #6c757d);
}.cns-no-data{
    font-size: .85rem;
    color: var(--text-muted, #6c757d);
    margin: 0;
}.cns-ota-note{
    font-size: .82rem;
    color: var(--text-muted, #6c757d);
    margin: 2px 0 0 0;
}/* ── Billing — backpay tab badges ──────────────────────────────────────────── */

.cns-backpay-badge{
    display: inline-block;
    font-size: .72rem;
    padding: 1px 6px;
    border-radius: 10px;
    background: #dc3545;
    color: #fff;
    font-weight: 500;
    margin-right: 4px;
}.cns-backpay-amount{
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--primary-color, #007bff);
}/* ── Billing — advance downpayment overdue badge ───────────────────────────── */

.advance-due-badge{
    display: inline-block;
    font-size: .72rem;
    padding: 1px 6px;
    border-radius: 10px;
    background: #ff9800;
    color: #fff;
    font-weight: 500;
    margin-right: 4px;
}

/* Phones: the title bar's own rule further up already stacks it (flex-direction: column,
   align-items: stretch), which puts the controls on their own full-width row under the
   title. All that was missing is letting the control GROUP wrap internally — without it a
   row of buttons, filters and dropdowns simply ran off the right edge of the screen where
   it could not be reached.

   Do not add flex-wrap here: on a column container that produces a column-WRAP layout,
   which puts the title and the controls side by side again — which is exactly what was
   happening before this comment existed. */
@media (max-width: 768px) {
    .section-header .section-controls,
    .section-header .section-header-actions{
        flex-wrap: wrap;
        gap: 8px;
    }.section-header .search-pill,
    .view-header .search-pill{
        /* Full width of its row, and no hover-grow — there is nothing to grow into. */
        --search-pill-w: 100%;
        --search-pill-w-open: 100%;
        flex: 1 1 180px;
    }.view-header .search-pill-wrapper{
        width: 100%;
    }
}

/* Import / Export move files on and off a computer and need a file picker — desktop chores.
   They were also crowding the buttons that matter out of a phone's title bar. */
@media (max-width: 768px) {
    .hide-on-mobile{
        display: none !important;
    }
}

/* ── Room form: sleeping arrangements (spaces + beds) — see renderRoomSpaces() in settings.js ── */
.room-spaces-wrap{
    container-type: inline-size;   /* the space cards go two abreast once THIS box is wide enough — the
                                      modal's width (expanded or not), not the screen's, decides */
}.room-spaces{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
@container (min-width: 900px){
    .room-spaces{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}
.room-space{
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    background: #f3f4f6;             /* light grey, so each space reads as its own card */
}.room-space-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}.room-space-no{
    font-weight: 600;
}
/* The global .form-group input/select rules make every control full width and stacked;
   these controls sit side by side, so widths are set explicitly (two-class selectors win). */
.room-space-header{
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}.room-space-header .room-space-type,
.room-space-header .room-space-name,
.room-bed-row .room-bed-qty,
.room-bed-row .room-bed-type,
.room-bed-row .room-bed-occupant{
    width: auto;
    min-width: 0;
    padding: 4px 6px;
    font-size: 0.85rem;
    margin: 0;
}.room-space-header .room-space-type{
    flex: 0 0 42%;
}.room-space-header .room-space-name{
    flex: 1 1 auto;
}.room-space-bath{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
}.room-space-bath input[type="checkbox"]{
    width: auto;
    margin: 0;
}.room-space-remove,
.room-bed-remove{
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}.room-space-remove:hover,
.room-bed-remove:hover{
    color: var(--error-color);
}.room-space-beds{
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 2px 0 6px;
}.room-bed-row{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}.room-bed-row .room-bed-qty{
    flex: 0 0 64px;
    text-align: center;
}.room-bed-row .room-bed-type{
    flex: 1 1 160px;
}.room-bed-row .room-bed-occupant{
    flex: 0 0 150px;
}.room-bed-x{
    color: var(--text-secondary);
    font-size: 0.85rem;
}.room-space-nobeds{
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}.room-bed-add,
.room-spaces-actions button{
    border: 1px dashed var(--border-color);
    background: transparent;
    color: var(--primary-color);
    border-radius: var(--border-radius);
    padding: 3px 8px;
    font-size: 0.8rem;
    cursor: pointer;
}.room-bed-add:hover,
.room-spaces-actions button:hover{
    background: var(--accent-light);
}.room-spaces-actions{
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}.room-spaces-summary{
    margin-top: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--text-secondary);
}.room-spaces-ota{
    margin-top: var(--spacing-xs);
    font-size: 0.8rem;
    color: var(--text-secondary);
}.room-spaces-ota summary{
    cursor: pointer;
    color: var(--primary-color);
}.room-spaces-ota ul{
    margin: 4px 0 6px 18px;
    padding: 0;
}input.derived-field{
    background: var(--bg-secondary);
    color: var(--text-secondary);
}.room-bedrooms-badge{
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-left: 4px;
}

/* Booking modal: "bedrooms occupied" choice under a selected multi-bedroom unit */
.selected-room .room-bedrooms-select{
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.75rem;
    padding: 2px 4px;
    margin-top: 2px;
}.selected-room .room-bedrooms-select option{
    color: #101828;
}