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

/* Global Box Sizing Fix */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
    overflow-x: hidden;
    user-select: none;
    /* Prevent text selection while dragging */
    transition: background-color 0.2s, color 0.2s;
}

/* All modals — re-enable text selection (body sets none for calendar drag).
   Targets any element whose id ends in "-modal" (the project's modal naming convention). */
[id$="-modal"],
[id$="-modal"] * {
    user-select: text;
    -webkit-user-select: text;
}

/* Force colorful emoji rendering in the clock capsule — Inter has no emoji
   glyphs, so symbols like ☀ would otherwise fall through to a text-style
   monochrome glyph. */
#clock-weather {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", emoji, sans-serif;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    min-width: 1.1em;
    text-align: center;
}

/* --- DARK MODE OVERRIDES --- */
html.dark body {
    background-color: #111827;
    /* gray-900 */
    color: #f3f4f6;
}

/* Grid Lines in Dark Mode */
html.dark .date-cell {
    border-right: 1px solid #374151;
    /* gray-700 */
    border-bottom: 1px solid #374151;
    color: #d1d5db;
}

html.dark .date-cell:hover:not(.day-header) {
    background-color: #1f2937;
    /* gray-800 */
}

html.dark .room-row {
    border-color: #374151;
}

/* Input Fields in Dark Mode (Custom class override) */
html.dark .compact-input {
    background-color: #374151;
    border-color: #4b5563;
    color: white;
}

html.dark .compact-input:focus {
    border-color: #60a5fa;
    /* blue-400 */
    box-shadow: 0 0 0 1px #60a5fa;
}

/* --- GRID STYLES --- */

#room-grid-body {
    position: relative;
    width: 100%;
}

.room-row {
    height: 48px;
    display: flex;
    position: relative;
    width: 100%;
}

.date-cell {
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    text-align: center;

    /* Borders on the cell itself for perfect alignment.
       Light-mode borders softened from gray-300 to gray-200 for a less harsh grid. */
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;

    cursor: pointer;
    transition: background-color 0.1s;
    position: relative;
}

.date-cell:hover:not(.day-header) {
    background-color: #d1d5db;
}

/* Custom colors for booking blocks (Keep mostly same for contrast, maybe slightly dimmed if needed, but standard is fine) */
.status-lack {
    background-color: #fecaca;
    color: #b91c1c;
    border-left: 4px solid #f87171;
    border-right: 4px solid #f87171;
}

.status-down {
    background-color: #fde68a;
    color: #b45309;
    border-left: 4px solid #fbbf24;
    border-right: 4px solid #fbbf24;
}

.status-paid {
    background-color: #a7f3d0;
    color: #065f46;
    border-left: 4px solid #34d399;
    border-right: 4px solid #34d399;
}

.status-cancelled {
    background-color: #d1d5db;
    color: #374151;
    border-left: 4px solid #9ca3af;
    border-right: 4px solid #9ca3af;
}

.status-unavailable {
    background-color: #d1d5db;
    color: #374151;
    border-left: 4px solid #9ca3af;
    border-right: 4px solid #9ca3af;
}

/* Unavailable = room blocker: hide the guest-billing cluster whose own JS decides its visibility. */
#booking-modal.unavailable-mode #billing-section,
#booking-modal.unavailable-mode #generate-invoice-btn,
#booking-modal.unavailable-mode #generate-payment-btn,
#booking-modal.unavailable-mode #generate-remainder-btn,
#booking-modal.unavailable-mode #invoice-issued-pill,
#booking-modal.unavailable-mode #payment-issued-pill {
    display: none !important;
}

.template-highlight-wrapper {
    position: relative;
}
.template-highlight-bg {
    position: absolute;
    inset: 0;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    pointer-events: none;
}
html.dark .template-highlight-bg {
    background-color: #374151;
    border-color: #4b5563;
}
.template-highlight-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: transparent;
    background: transparent;
    box-sizing: border-box;
}
.template-highlight-overlay mark {
    background-color: rgba(250, 204, 21, 0.45);
    color: transparent;
    border-radius: 2px;
    padding: 0;
    margin: 0;
    border: 0;
    display: inline;
}
html.dark .template-highlight-overlay mark {
    background-color: rgba(202, 138, 4, 0.55);
}
.template-highlight-input {
    position: relative;
    background-color: transparent !important;
    /* Font MUST match overlay exactly so highlights line up. Browsers default
       textarea to monospace, which doesn't match Inter from the body. */
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0;
    resize: vertical;
}
html.dark .template-highlight-input {
    background-color: transparent !important;
}

.auto-msg-tab-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.auto-msg-tab-btn:hover {
    color: #374151;
}
.auto-msg-tab-btn.is-active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}
html.dark .auto-msg-tab-btn {
    color: #9ca3af;
}
html.dark .auto-msg-tab-btn:hover {
    color: #d1d5db;
}
html.dark .auto-msg-tab-btn.is-active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}

.booking-block {
    position: absolute;
    height: 40px;
    top: 3px;
    /* Centered vertically */
    padding: 2px 4px;
    margin-right: 2px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: visible;
    cursor: grab;
    /* Shows it can be moved */
    font-size: 10px;
    font-weight: 600;
    transition: width 0.3s ease, transform 0.1s, box-shadow 0.2s;
    /* auto, not 10: a stacking context here would trap the corner badges below the sticky date header */
    z-index: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Guest-name label clips with ellipsis so the block itself can stay
   overflow:visible — lets the cleaning icon poke outside the top-right corner. */
.booking-block > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.booking-block:active {
    cursor: grabbing;
}

/* Draft block (imported from iCal, not yet converted to a real reservation).
   Dashed border + diagonal stripes so it visually reads as "tentative". Drafts
   sit at z-index 12 (above the default 10) so when they conflict with a real
   booking and render at half-width on the right, they paint above it. Drafts
   are fully clickable — clicking opens the booking modal where the user can
   Convert or Delete. They have no resize handles because the dates come from
   the iCal feed and aren't user-editable. */
.booking-block.booking-block-draft {
    border: 2px dashed currentColor;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(255, 255, 255, 0.2) 4px,
        rgba(255, 255, 255, 0.2) 7px
    );
    z-index: 12;
    cursor: pointer;
}

/* When the draft is rendered at half-width on top of a real block, give it a
   sharper left edge so the seam between the visible real-block half and the
   overlaid draft half is unmistakable. */
.booking-block.booking-block-draft-conflict {
    border-left: 3px solid rgba(0, 0, 0, 0.45);
}

/* NEW: Selection Style */
.booking-block.selected-block {
    border: 2px solid #2563eb;
    /* Blue-600 */
    z-index: 20;
    /* Bring to front */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

html.dark .booking-block.selected-block {
    border-color: #60a5fa;
    /* Blue-400 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

/* Style for the element being dragged */
.dragging-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    /* Let clicks pass through to detect drop target */
    opacity: 0.9;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    transform: rotate(2deg) scale(1.02);
    transition: none;
}

/* Drag creation ghosts */
.drag-create-ghost,
.drag-create-ghost-v {
    position: absolute;
    z-index: 30;
    pointer-events: none;
    opacity: 0.8;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    background-color: #bfdbfe;
    /* blue-200 */
    color: #1e3a8a;
    /* blue-900 */
    border: 2px dashed #2563eb;
    /* blue-600 */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
}

.drag-create-ghost {
    height: 40px;
    top: 3px;
    padding: 2px 4px;
    white-space: nowrap;
}

.drag-create-ghost-v {
    width: 40px;
    left: 4px;
    /* Centered in 48px cell */
    padding: 4px 2px;
    flex-direction: column;
}

/* Modal Specific Styles for Compactness */
.compact-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

/* Dark mode label adjustment */
html.dark .compact-label {
    color: #9ca3af;
    /* gray-400 */
}

.compact-input {
    width: 100%;
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background-color: white;
}

.compact-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
}

/* Date cell hover effect for drag creation */
.date-cell::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    transition: background-color 0.1s;
    pointer-events: none;
}

.date-cell:hover::after {
    background-color: rgba(59, 130, 246, 0.1);
}

/* --- WEATHER CALENDAR STRIP --- */

/* Compact weather line inside each day-header cell */
.weather-cell {
    font-size: 0.6rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    min-height: 14px; /* reserve space even when empty */
    color: #374151;
}

/* Emoji stack on the glyph only; emoji fonts render digits full-width. */
.weather-cell .wx-icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji, sans-serif;
}

.weather-cell .wx-temp {
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
}

html.dark .weather-cell {
    color: #d1d5db;
}

/* When strip is ON, expand day-header cells to fit the extra row */
#date-header.weather-strip-on .day-header {
    height: 64px !important;
}

/* Match the Rooms sticky header height */
#room-header-list .rooms-label-row.weather-strip-on {
    height: 64px !important;
}

/* --- SNOWFLAKE ANIMATION --- */
.snowflake {
    position: fixed;
    top: -20px;
    z-index: 1;
    pointer-events: none;
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    font-size: 30px;
    color: #bfdbfe;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
}

.snowflake::before {
    content: '❄';
}

html:not(.dark) .snowflake {
    background-color: #bfdbfe;
}

@keyframes fall {
    0% {
        transform: translateY(-20px) translateX(0);
    }

    25% {
        transform: translateY(25vh) translateX(10px);
    }

    50% {
        transform: translateY(50vh) translateX(-10px);
    }

    75% {
        transform: translateY(75vh) translateX(10px);
    }

    100% {
        transform: translateY(110vh) translateX(0);
    }
}

/* --- CHRISTMAS LIGHTS --- */
.light-wire {
    text-align: center;
    white-space: nowrap;
    position: fixed;
    /* Fixed to stay at top */
    top: -12px;
    /* Hang slightly off top (was -15) */
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 1000;
    /* overflow: hidden; Removed to allow glow to show */
}

.light-wire li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 10px;
    /* was 12 */
    height: 22px;
    /* was 28 */
    border-radius: 50%;
    margin: 16px;
    /* was 20 */
    background: #fff;
    animation-name: flash;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}



.light-wire li:nth-child(6n+1) {
    background: #FFFF00;
    /* Yellow */
    box-shadow: 0px 5px 24px 3px #FFFF00;
    animation-direction: alternate;
}

.light-wire li:nth-child(6n+2) {
    background: #00ffff;
    /* Cyan */
    box-shadow: 0px 5px 24px 3px #00ffff;
    animation-delay: 0.3s;
}

.light-wire li:nth-child(6n+3) {
    background: #00FF00;
    /* Green */
    box-shadow: 0px 5px 24px 3px #00FF00;
    animation-delay: 0.6s;
}

.light-wire li:nth-child(6n+4) {
    background: #f70094;
    /* Purple/Magenta */
    box-shadow: 0px 5px 24px 3px #f70094;
    animation-delay: 0.9s;
}

.light-wire li:nth-child(6n+5) {
    background: #FFA500;
    /* Orange */
    box-shadow: 0px 5px 24px 3px #FFA500;
    animation-delay: 1.2s;
}

.light-wire li:nth-child(6n+6) {
    background: #FF0000;
    /* Red */
    box-shadow: 0px 5px 24px 3px #FF0000;
    animation-delay: 1.5s;
}

.light-wire li:before {
    content: "";
    position: absolute;
    background: #222;
    width: 8px;
    /* was 10 */
    height: 8px;
    /* was 10 */
    border-radius: 3px;
    top: -4px;
    /* was -5 */
    left: 1px;
}

.light-wire li:after {
    content: "";
    top: -11px;
    /* was -14 */
    left: 7px;
    /* was 9 */
    position: absolute;
    width: 42px;
    /* was 52 */
    height: 15px;
    /* was 19 */
    border-bottom: solid #222 2px;
    border-radius: 50%;
}

.light-wire li:last-child:after {
    content: none;
}

@keyframes flash {

    0%,
    100% {
        opacity: 1;
        transform: scale(1.1);
    }


    50% {
        opacity: 0.4;
        transform: scale(0.9);
    }
}

/* --- SNOWMAN --- */
.snowman-container {
    position: fixed;
    bottom: -10px;
    right: 20px;
    width: 150px;
    height: 180px;
    z-index: 50;
    /* Above background, below some tooltips */
    pointer-events: none;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
    animation: sway 5s ease-in-out infinite alternate;
}

@keyframes sway {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(2deg);
    }
}

.snowman {
    position: relative;
    width: 100%;
    height: 100%;
}

.snow-body {
    background: radial-gradient(circle at 30% 30%, #fff, #f0f0f0, #dcdcdc);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.snow-body.bottom {
    width: 100px;
    height: 100px;
    bottom: 0;
    z-index: 10;
}

.snow-body.middle {
    width: 75px;
    height: 75px;
    bottom: 65px;
    z-index: 11;
}

.snow-head {
    width: 55px;
    height: 55px;
    background: radial-gradient(circle at 30% 30%, #fff, #f0f0f0, #dcdcdc);
    border-radius: 50%;
    position: absolute;
    bottom: 115px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
}

/* Details */
.button {
    width: 6px;
    height: 6px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.snow-body.middle .button:nth-child(1) {
    top: 25px;
}

.snow-body.middle .button:nth-child(2) {
    top: 45px;
}

.eye {
    width: 6px;
    height: 6px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    top: 20px;
}

.eye.left {
    left: 15px;
}

.eye.right {
    right: 15px;
}

.nose {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 14px solid #ff7f00;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    border-radius: 2px;
}

.hat {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    width: 35px;
    height: 25px;
    border-radius: 2px;
}

.hat .brim {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 6px;
    background: #333;
    border-radius: 2px;
}

.hat::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #c33;
}

.scarf {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 12px;
    background: #d62828;
    border-radius: 10px;
    z-index: 15;
}

.scarf::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 12px;
    height: 25px;
    background: #d62828;
    border-radius: 4px;
    transform: rotate(-15deg);
}

.arm {
    position: absolute;
    width: 40px;
    height: 3px;
    background: #8b4513;
    /* Brown stick */
    top: 30px;
    z-index: 5;
}

.arm.left {
    right: 68px;
    transform: rotate(20deg);
}

.arm.right {
    left: 68px;
    transform: rotate(-20deg);
}

/* Lasso Selection */
.selection-lasso {
    position: fixed;
    border: 2px dashed #2563eb;
    background-color: rgba(191, 219, 254, 0.4);
    /* blue-200 with opacity */
    z-index: 9999;
    pointer-events: none;
    border-radius: 4px;
}

/* Resize Handle (Columns) */
.resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: 50;
    transition: background-color 0.2s;
}

.resize-handle:hover::after,
.resize-handle.resizing::after {
    content: '';
    position: absolute;
    left: 4px;
    width: 2px;
    height: 100%;
    background-color: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

/* Booking Block Edge Resize Handles — widened + a centered grip on hover so
   they're easy to grab with a mouse. */
.resize-handle-left, .resize-handle-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    cursor: ew-resize;
    z-index: 25;
    background-color: transparent;
    transition: background-color 0.15s;
}

.resize-handle-left { left: 0; }
.resize-handle-right { right: 0; }

.resize-handle-left:hover, .resize-handle-right:hover {
    background-color: rgba(59, 130, 246, 0.18);
}

/* Vertically-centered grip that fades in on hover so the grab area is obvious. */
.resize-handle-left::before, .resize-handle-right::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 42%;
    border-radius: 2px;
    background-color: rgba(59, 130, 246, 0.85);
    opacity: 0;
    transition: opacity 0.15s;
}
.resize-handle-left::before { left: 3px; }
.resize-handle-right::before { right: 3px; }
.resize-handle-left:hover::before, .resize-handle-right:hover::before { opacity: 1; }

/* Cleaning icon — small red circle with a white check, positioned at the
   top-right corner of either a booking block (cleaning due today) or a
   date cell (cleaning is overdue and walked forward to today). Click =
   mark clean. */
.cleaning-icon {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    padding: 3px;
    color: #fff;
    background-color: #dc2626; /* red-600 */
    border: 1.5px solid #fff;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 46; /* above the sticky date header (40) — badges ride on top */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.12s, background-color 0.12s;
}

.cleaning-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cleaning-icon:hover {
    background-color: #b91c1c; /* red-700 */
    transform: scale(1.12);
}

html.dark .cleaning-icon {
    border-color: #1f2937; /* gray-800 — blends into the dark grid bg */
}

/* Manual-cleaning gesture hint: quiet sparkle on hover; cleaning.js owns the class per cell. */
.date-cell.cleaning-hint-eligible:hover::before {
    content: '✨';
    position: absolute;
    bottom: 2px;
    left: 3px;
    font-size: 10px;
    line-height: 1;
    opacity: 0.4;
    pointer-events: none;
}

/* Overdue escalation: pending cleaning whose source booking checked out
   before today gets its icon dropped on today's cell of the room AND that
   cell's background tinted red so the row visually screams. */
.cell-cleaning-overdue {
    background-color: rgba(220, 38, 38, 0.12) !important;
}

html.dark .cell-cleaning-overdue {
    background-color: rgba(220, 38, 38, 0.22) !important;
}

/* "Already messaged" badge — bottom-left of the booking block, overflowing the
   corner like the cleaning icon. pointer-events:none so it never blocks drag,
   resize, or the block's click handler. */
.msg-sent-badge {
    position: absolute;
    top: -6px;
    z-index: 45; /* above the sticky date header (40) */
    width: 16px;
    height: 16px;
    padding: 2.5px;
    color: #fff;
    border: 1.5px solid #fff;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.msg-sent-badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

.msg-sent-badge.whatsapp {
    background-color: #16a34a; /* green-600 */
}

.msg-sent-badge.email {
    background-color: #2563eb; /* blue-600 */
}

/* Hand-marked "message sent" - slate, so it never reads as a real WhatsApp/email send. */
.msg-sent-badge.manual {
    background-color: #64748b; /* slate-500 */
}

/* "Read the internal notes" flag — right corner, same realm as the cleaning
   icon. Yellow, not red: an attention cue, not an error. Clickable: dismisses
   the flag straight from the block (no modal round-trip). */
.msg-sent-badge.note-flag {
    background-color: #eab308; /* yellow-500 */
    left: auto;
    right: -6px;
    z-index: 45; /* above the sticky date header (40); just under the cleaning icon (46) */
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.12s, background-color 0.12s;
}

.msg-sent-badge.note-flag:hover {
    background-color: #ca8a04; /* yellow-600 */
    transform: scale(1.12);
}

/* Handled: green check, stays on the block like the WhatsApp "sent" badge. */
.msg-sent-badge.note-flag.note-flag--done {
    background-color: #16a34a; /* green-600 */
}

.msg-sent-badge.note-flag.note-flag--done:hover {
    background-color: #15803d; /* green-700 */
}

/* When a cleaning icon shares the corner, tuck the note flag to its left so the
   two badges tag along instead of overlapping. */
.booking-block:has(.cleaning-icon) .msg-sent-badge.note-flag {
    right: 16px;
}

/* Internal-note popover — floats over the note-flag badge (position:fixed, body
   child). Pops in from the badge; dismisses via X / Escape / click-outside. */
.note-popover {
    position: fixed;
    z-index: 1000;
    width: 240px;
    max-width: calc(100vw - 16px);
    padding: 12px 14px 14px;
    background-color: #fff;
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: scale(0.94);
    transform-origin: top right;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.note-popover.note-popover--in {
    opacity: 1;
    transform: scale(1);
}

/* Recent-changes (History) popover - same scale+fade entrance as the note popover. */
#undo-history-panel {
    opacity: 0;
    transform: scale(0.94);
    transform-origin: top left;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

#undo-history-panel.undo-history--in {
    opacity: 1;
    transform: scale(1);
}

/* To-do sticky note - same scale+fade entrance as the note & history popovers. */
#pms-todo-note {
    opacity: 0;
    transform: scale(0.94);
    transform-origin: center;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

#pms-todo-note.todo-note--in {
    opacity: 1;
    transform: scale(1);
}

/* Full modals - same scale+fade curve as the popovers above, plus the backdrop
   blur interpolating in rather than snapping. Pure CSS via @starting-style +
   allow-discrete, so the ~15 modals that toggle .hidden directly animate too,
   with no call-site changes; browsers without it simply snap as before.
   The .pms-modal class is applied at runtime by js/modal-helpers.js. */
.pms-modal {
    transition: opacity 0.18s ease, backdrop-filter 0.18s ease,
        -webkit-backdrop-filter 0.18s ease, display 0.18s allow-discrete;
    opacity: 1;
}

/* No settled transform is declared on purpose: any non-none transform makes the
   panel a containing block for position:fixed descendants. It must end at none. */
.pms-modal > * {
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.pms-modal.hidden {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

.pms-modal.hidden > * {
    transform: scale(0.96);
    opacity: 0;
}

@starting-style {
    .pms-modal:not(.hidden) {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }

    .pms-modal:not(.hidden) > * {
        transform: scale(0.96);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pms-modal,
    .pms-modal > * {
        transition: none;
    }
}

.note-popover__close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 22px;
    height: 22px;
    font-size: 18px;
    line-height: 1;
    color: #9ca3af; /* gray-400 */
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
}

.note-popover__close:hover {
    color: #4b5563; /* gray-600 */
    background-color: #f3f4f6; /* gray-100 */
}

.note-popover__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #eab308; /* yellow-500 — the flag's colour */
    margin-bottom: 5px;
    padding-right: 20px;
}

.note-popover__body {
    font-size: 13px;
    line-height: 1.45;
    color: #1f2937; /* gray-800 */
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.note-popover__empty {
    color: #9ca3af; /* gray-400 */
    font-style: italic;
}

.note-popover__action {
    width: 100%;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background-color: #16a34a; /* green-600 — "mark done" */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.12s;
}

.note-popover__action:hover {
    background-color: #15803d; /* green-700 */
}

.note-popover__action.is-undo {
    background-color: #eab308; /* yellow-500 — revert to unhandled */
}

.note-popover__action.is-undo:hover {
    background-color: #ca8a04; /* yellow-600 */
}

html.dark .note-popover {
    background-color: #1f2937; /* gray-800 */
    border-color: #374151; /* gray-700 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

html.dark .note-popover__body {
    color: #e5e7eb; /* gray-200 */
}

html.dark .note-popover__close:hover {
    color: #e5e7eb;
    background-color: #374151;
}

html.dark .msg-sent-badge {
    border-color: #1f2937; /* gray-800 — blends into the dark grid bg */
}

/* Reservation-window send button, once a message has gone out for this booking:
   solid green fill so "already messaged" is unmistakable. Green for both
   channels (universal "done"), overriding the per-channel Tailwind hover hues. */
.btn-msg-sent {
    background-color: #16a34a !important; /* green-600 */
    border-color: #16a34a !important;
    color: #fff !important;
    opacity: 1 !important;
}

.btn-msg-sent:hover {
    background-color: #15803d !important; /* green-700 */
    color: #fff !important;
}

/* Ensure room-column-container can be sized via JS */
#room-column-container {
    min-width: 120px;
}

/* --- GLOBAL SWEEP EFFECT --- */
.global-shimmer {
    position: relative;
    overflow: hidden;
}

.global-shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.02) 45%,
            rgba(255, 255, 255, 0.06) 50%,
            rgba(255, 255, 255, 0.02) 55%,
            transparent 100%);
    animation: sweep 3s infinite linear;
    pointer-events: none;
    z-index: 100;
}

html.dark .skeleton {
    background: #1f2937;
    background-image: linear-gradient(to right, #1f2937 0%, #374151 50%, #1f2937 100%);
}

/* Specific highlight for dark mode header areas */
html.dark .global-shimmer::after {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.01) 45%,
            rgba(255, 255, 255, 0.04) 50%,
            rgba(255, 255, 255, 0.01) 55%,
            transparent 100%);
}

@keyframes sweep {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

/* --- ROOM REORDERING DRAG STYLES --- */
.draggable-room {
    transition: transform 0.2s, background-color 0.2s, border 0.2s;
}

.draggable-room[draggable="true"] {
    cursor: grab;
}

.draggable-room[draggable="true"]:active {
    cursor: grabbing;
}

.draggable-room.opacity-50 {
    opacity: 0.5;
    background-color: rgba(59, 130, 246, 0.05);
    /* Very light blue tint */
}

/* Drop target indicator (the line where it will be inserted) */
.draggable-room.border-t-2.border-blue-500 {
    border-top-color: #3b82f6 !important;
}

/* Ensure the drag handle icon also shows correct cursor */
.draggable-room .cursor-grab {
    cursor: grab;
}

.draggable-room .cursor-grab:active {
    cursor: grabbing;
}

/* --- SOURCE & FOOD SELECTOR BUTTONS --- */
.source-btn,
.bulk-source-btn,
.food-btn,
.bulk-food-btn {
    color: #6b7280;
    /* Gray-500 */
    cursor: pointer;
}

.source-btn:hover,
.bulk-source-btn:hover,
.food-btn:hover,
.bulk-food-btn:hover {
    color: #374151;
    /* Gray-700 */
    background-color: rgba(255, 255, 255, 0.5);
}

html.dark .source-btn,
html.dark .bulk-source-btn,
html.dark .food-btn,
html.dark .bulk-food-btn {
    color: #9ca3af;
    /* Gray-400 */
}

html.dark .source-btn:hover,
html.dark .bulk-source-btn:hover,
html.dark .food-btn:hover,
html.dark .bulk-food-btn:hover {
    color: #f3f4f6;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Active State handled by JS classes like bg-white and text-gray-800 */
.source-btn.bg-white,
.bulk-source-btn.bg-white,
.food-btn.bg-white,
.bulk-food-btn.bg-white {
    color: #1f2937 !important;
    /* Gray-800 */
}

html.dark .source-btn.dark\:bg-gray-600,
html.dark .bulk-source-btn.dark\:bg-gray-600,
html.dark .food-btn.dark\:bg-gray-600,
html.dark .bulk-food-btn.dark\:bg-gray-600 {
    color: #ffffff !important;
}

/* --- EASTER MODE --- */
.easter-element {
    position: fixed;
    top: -30px;
    z-index: 1000;
    pointer-events: none;
    animation-name: fall-easter;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@keyframes fall-easter {
    0% {
        transform: translateY(-30px) translateX(0) rotate(0deg);
    }

    25% {
        transform: translateY(25vh) translateX(30px) rotate(calc(var(--target-rotation) * 0.25));
    }

    50% {
        transform: translateY(50vh) translateX(-30px) rotate(calc(var(--target-rotation) * 0.5));
    }

    75% {
        transform: translateY(75vh) translateX(30px) rotate(calc(var(--target-rotation) * 0.75));
    }

    100% {
        transform: translateY(110vh) translateX(0) rotate(var(--target-rotation));
    }
}

/* --- EASTER EGGS SCATTERED --- */
.egg-wire {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 47;
    /* Overlay above the opaque #app (z-10), below bunny/grass */
}

.egg-wire li {
    position: absolute;
    list-style: none;
    width: 20px;
    height: 30px;
    /* Egg shape */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: #fff;
    transform-origin: center center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Coloring the Eggs (Reddish tones) */
.egg-wire li:nth-child(6n+1) {
    background: #ff4d4d;
}

/* Bright Red */
.egg-wire li:nth-child(6n+2) {
    background: #ff6666;
}

/* Light Red */
.egg-wire li:nth-child(6n+3) {
    background: #ff3333;
}

/* Strong Red */
.egg-wire li:nth-child(6n+4) {
    background: #e60000;
}

/* Darker Red */
.egg-wire li:nth-child(6n+5) {
    background: #cc0000;
}

/* Crimson Red */
.egg-wire li:nth-child(6n+6) {
    background: #ff8080;
}

/* Soft Red */

/* --- EASTER BUNNY --- */
.bunny-container {
    position: fixed;
    bottom: -10px;
    right: 30px;
    width: 150px;
    height: 180px;
    z-index: 50;
    pointer-events: none;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
    animation: peek 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform-origin: bottom right;
}

/* Bunny peeking and jumping */
@keyframes peek {
    0%,
    40%,
    75%,
    100% {
        transform: translateY(10px);
    }

    /* Peeking slightly */
    12% {
        transform: translateY(2px);
    }

    /* Tucking in to jump */
    24% {
        transform: translateY(45px);
    }

    /* Quick Reveal Leap */
    89% {
        transform: translateY(-130px);
    }

    /* Land softly */
    93% {
        transform: translateY(10px);
    }
}

.bunny {
    position: relative;
    width: 100%;
    height: 100%;
}

.bunny-body {
    background: radial-gradient(circle at 30% 30%, #fff, #f8f8f8, #e0e0e0);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.bunny-body.bottom {
    width: 90px;
    height: 100px;
    bottom: 0px;
    z-index: 10;
}

.bunny-head {
    width: 70px;
    height: 65px;
    background: radial-gradient(circle at 30% 30%, #fff, #f8f8f8, #e0e0e0);
    border-radius: 50%;
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
}

.bunny-ear {
    width: 20px;
    height: 60px;
    background: #fff;
    border-radius: 50% 50% 10% 10% / 50% 50% 10% 10%;
    position: absolute;
    top: -45px;
    z-index: 11;
    border: 1px solid #eee;
}

.bunny-ear::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 45px;
    background: #ffb3ba;
    /* pink inside */
    border-radius: inherit;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.bunny-ear.left {
    left: 10px;
    transform: rotate(-15deg);
}

.bunny-ear.right {
    right: 10px;
    transform: rotate(15deg);
}

.bunny-eye {
    width: 6px;
    height: 8px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    top: 25px;
}

.bunny-eye.left {
    left: 20px;
}

.bunny-eye.right {
    right: 20px;
}

.bunny-nose {
    width: 8px;
    height: 6px;
    background: #ffb3ba;
    border-radius: 50%;
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
}

.whisker {
    position: absolute;
    width: 25px;
    height: 1px;
    background: #aaa;
}

.whisker.left-top {
    top: 35px;
    left: -10px;
    transform: rotate(5deg);
}

.whisker.left-btm {
    top: 40px;
    left: -10px;
    transform: rotate(-5deg);
}

.whisker.right-top {
    top: 35px;
    right: -10px;
    transform: rotate(-5deg);
}

.whisker.right-btm {
    top: 40px;
    right: -10px;
    transform: rotate(5deg);
}

.bunny-paw {
    width: 25px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    bottom: 5px;
    z-index: 15;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.bunny-paw.left {
    left: 25px;
    transform: rotate(15deg);
}

.bunny-paw.right {
    right: 25px;
    transform: rotate(-15deg);
}

/* --- GRASS BLADES --- */
.grass-blade {
    position: absolute;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to top, #2d5a27, #4e9a44);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 5;
    animation: sway-grass 4s ease-in-out infinite alternate;
    transform-origin: bottom center;
    --rot: 0deg;
}

@keyframes sway-grass {
    0% {
        transform: rotate(calc(var(--rot) - 2deg));
    }

    100% {
        transform: rotate(calc(var(--rot) + 2deg));
    }
}



#easter-grass-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
    z-index: 49;
    display: flex;
    align-items: flex-end;
}
.grass-egg {
    position: fixed;
    bottom: -1px;
    width: 32px;
    height: 44px;
    background: radial-gradient(circle at 30% 30%, #ff5c5c, #d90000);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    z-index: 48;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.grass-egg-1 {
    left: 40px;
    transform: rotate(-15deg);
}

.grass-egg-2 {
    left: 85px;
    transform: rotate(10deg) scale(0.85);
}

.bunny-egg {
    position: fixed;
    bottom: -2px;
    right: 85px;
    /* (30px offset + 75px mid - 20px half-width) */
    width: 40px;
    height: 56px;
    background: radial-gradient(circle at 30% 30%, #ff5c5c, #d90000);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    z-index: 48;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* --- Calendar month-change slide animation --- */
#calendar-scroll-container.is-animating {
    overflow-x: hidden;
}

.calendar-slide-out-left {
    animation: calendarSlideOutLeft 75ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.calendar-slide-out-right {
    animation: calendarSlideOutRight 75ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.calendar-slide-in-from-right {
    animation: calendarSlideInFromRight 75ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.calendar-slide-in-from-left {
    animation: calendarSlideInFromLeft 75ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes calendarSlideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-40px); opacity: 0; }
}
@keyframes calendarSlideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(40px); opacity: 0; }
}
@keyframes calendarSlideInFromRight {
    from { transform: translateX(40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes calendarSlideInFromLeft {
    from { transform: translateX(-40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-slide-out-left,
    .calendar-slide-out-right,
    .calendar-slide-in-from-right,
    .calendar-slide-in-from-left {
        animation: none;
    }
}

/* ============================================
   UPGRADE MODAL · FEATURE SPOTLIGHT CAROUSEL
   Animated mini-mockups shown on the right side of the Upgrade-to-Pro
   modal. Each .spotlight-frame is absolutely positioned; one carries the
   .active class at a time. JS rotates active every ~3.5s.
   ============================================ */

.spotlight-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.spotlight-frame.active {
    opacity: 1;
    pointer-events: auto;
}

.spotlight-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: rgb(199 210 254);
    transition: width 0.2s ease, background 0.2s ease;
    border: 0;
    padding: 0;
    cursor: pointer;
}
html.dark .spotlight-dot { background: rgba(99, 102, 241, 0.35); }
.spotlight-dot.active {
    background: rgb(79 70 229);
    width: 20px;
}
html.dark .spotlight-dot.active { background: rgb(165 180 252); }

/* --- Mockup: Multi-property ---------------------------------------- */
.mockup-prop {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 320px;
}
.mockup-prop-card {
    flex: 1;
    padding: 10px;
    background: white;
    border: 2px solid rgb(229 231 235);
    border-radius: 8px;
    transition: all 0.4s ease;
}
html.dark .mockup-prop-card {
    background: rgb(31 41 55);
    border-color: rgb(75 85 99);
}
.mockup-prop-title {
    font-size: 11px;
    font-weight: 700;
    color: rgb(55 65 81);
    margin-bottom: 6px;
}
html.dark .mockup-prop-title { color: rgb(229 231 235); }
.mockup-prop-rows { display: flex; flex-direction: column; gap: 4px; }
.mockup-prop-row {
    height: 6px;
    border-radius: 3px;
    background: rgb(229 231 235);
}
html.dark .mockup-prop-row { background: rgb(55 65 81); }
.spotlight-frame.active .mockup-prop-a {
    animation: prop-pulse-a 3s infinite ease-in-out;
}
.spotlight-frame.active .mockup-prop-b {
    animation: prop-pulse-b 3s infinite ease-in-out;
}
@keyframes prop-pulse-a {
    0%, 45% {
        background: rgb(238 242 255);
        border-color: rgb(99 102 241);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.18);
        transform: scale(1.02);
    }
    50%, 100% {
        background: white;
        border-color: rgb(229 231 235);
        box-shadow: none;
        transform: scale(1);
    }
}
@keyframes prop-pulse-b {
    0%, 45% {
        background: white;
        border-color: rgb(229 231 235);
        box-shadow: none;
        transform: scale(1);
    }
    50%, 100% {
        background: rgb(238 242 255);
        border-color: rgb(99 102 241);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.18);
        transform: scale(1.02);
    }
}
html.dark .spotlight-frame.active .mockup-prop-a,
html.dark .spotlight-frame.active .mockup-prop-b {
    /* keyframes set background to a specific colour — override the "off"
       state to the dark surface so cards don't flash white in dark mode. */
}
html.dark .spotlight-frame.active .mockup-prop-a {
    animation: prop-pulse-a-dark 3s infinite ease-in-out;
}
html.dark .spotlight-frame.active .mockup-prop-b {
    animation: prop-pulse-b-dark 3s infinite ease-in-out;
}
@keyframes prop-pulse-a-dark {
    0%, 45% {
        background: rgba(99, 102, 241, 0.22);
        border-color: rgb(129 140 248);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        transform: scale(1.02);
    }
    50%, 100% {
        background: rgb(31 41 55);
        border-color: rgb(75 85 99);
        box-shadow: none;
        transform: scale(1);
    }
}
@keyframes prop-pulse-b-dark {
    0%, 45% {
        background: rgb(31 41 55);
        border-color: rgb(75 85 99);
        box-shadow: none;
        transform: scale(1);
    }
    50%, 100% {
        background: rgba(99, 102, 241, 0.22);
        border-color: rgb(129 140 248);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        transform: scale(1.02);
    }
}

/* --- Mockup: Bulk edit -------------------------------------------- */
.mockup-bulk {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 240px;
}
.mockup-bulk-pill {
    height: 22px;
    border-radius: 4px;
    background: rgb(254 243 199);
    border-left: 3px solid rgb(245 158 11);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.spotlight-frame.active .mockup-bulk-pill {
    animation: bulk-flip 3s infinite ease-in-out;
}
@keyframes bulk-flip {
    0%, 25% {
        background: rgb(254 243 199);
        border-left-color: rgb(245 158 11);
        transform: scale(1);
    }
    40%, 75% {
        background: rgb(187 247 208);
        border-left-color: rgb(34 197 94);
        transform: scale(1.03);
    }
    90%, 100% {
        background: rgb(254 243 199);
        border-left-color: rgb(245 158 11);
        transform: scale(1);
    }
}

/* --- Mockup: Stripe pay links ------------------------------------- */
.mockup-stripe {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.mockup-stripe-step {
    padding: 6px 10px;
    border-radius: 6px;
    background: white;
    border: 1px solid rgb(229 231 235);
    font-size: 12px;
    font-weight: 600;
    color: rgb(55 65 81);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    opacity: 0.3;
    transition: opacity 0.3s;
}
html.dark .mockup-stripe-step {
    background: rgb(31 41 55);
    border-color: rgb(75 85 99);
    color: rgb(229 231 235);
}
.mockup-stripe-arrow {
    color: rgb(156 163 175);
    font-weight: 700;
    opacity: 0.3;
    transition: opacity 0.3s;
}
.mockup-stripe-paid {
    background: rgb(220 252 231);
    color: rgb(22 101 52);
    border-color: rgb(134 239 172);
}
html.dark .mockup-stripe-paid {
    background: rgba(34, 197, 94, 0.18);
    color: rgb(134 239 172);
    border-color: rgba(34, 197, 94, 0.4);
}
.spotlight-frame.active .mockup-stripe-step-1 { animation: stripe-pulse 3s infinite; animation-delay: 0s; }
.spotlight-frame.active .mockup-stripe-arrow-1 { animation: stripe-pulse 3s infinite; animation-delay: 0.4s; }
.spotlight-frame.active .mockup-stripe-step-2 { animation: stripe-pulse 3s infinite; animation-delay: 0.8s; }
.spotlight-frame.active .mockup-stripe-arrow-2 { animation: stripe-pulse 3s infinite; animation-delay: 1.2s; }
.spotlight-frame.active .mockup-stripe-step-3 { animation: stripe-pulse 3s infinite; animation-delay: 1.6s; }
@keyframes stripe-pulse {
    0%, 10% { opacity: 0.3; transform: scale(1); }
    20%, 70% { opacity: 1; transform: scale(1.05); }
    80%, 100% { opacity: 0.3; transform: scale(1); }
}

/* --- Mockup: Channel sync ---------------------------------------- */
.mockup-sync {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 320px;
    justify-content: space-between;
}
.mockup-sync-sources {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mockup-sync-source {
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: white;
}
.mockup-sync-source-airbnb { background: rgb(255 56 92); }
.mockup-sync-source-booking { background: rgb(0 53 128); }
.mockup-sync-flow {
    position: relative;
    width: 80px;
    height: 4px;
    background: rgb(229 231 235);
    border-radius: 9999px;
}
html.dark .mockup-sync-flow { background: rgb(55 65 81); }
.mockup-sync-dot {
    position: absolute;
    top: -3px;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: rgb(99 102 241);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.spotlight-frame.active .mockup-sync-dot { animation: sync-travel 2.2s infinite ease-in-out; }
.spotlight-frame.active .mockup-sync-dot-1 { animation-delay: 0s; }
.spotlight-frame.active .mockup-sync-dot-2 { animation-delay: 0.4s; }
.spotlight-frame.active .mockup-sync-dot-3 { animation-delay: 0.8s; }
@keyframes sync-travel {
    0% { left: 0; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 70px; opacity: 0; }
}
.mockup-sync-target {
    padding: 6px 10px;
    border-radius: 6px;
    background: rgb(238 242 255);
    border: 1px solid rgb(165 180 252);
    font-size: 11px;
    font-weight: 700;
    color: rgb(67 56 202);
}
html.dark .mockup-sync-target {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgb(99 102 241);
    color: rgb(199 210 254);
}

/* --- Mockup: Full Dashboard --------------------------------------- */
.mockup-dash {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 280px;
}
.mockup-dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.mockup-dash-kpi {
    padding: 6px;
    border-radius: 6px;
    background: white;
    border: 1px solid rgb(229 231 235);
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html.dark .mockup-dash-kpi {
    background: rgb(31 41 55);
    border-color: rgb(75 85 99);
}
.mockup-dash-kpi b {
    display: block;
    font-size: 14px;
    color: rgb(67 56 202);
    font-weight: 700;
}
html.dark .mockup-dash-kpi b { color: rgb(165 180 252); }
.mockup-dash-kpi span {
    font-size: 9px;
    color: rgb(107 114 128);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
html.dark .mockup-dash-kpi span { color: rgb(156 163 175); }
.mockup-dash-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 50px;
    padding: 6px;
    border-radius: 6px;
    background: white;
    border: 1px solid rgb(229 231 235);
}
html.dark .mockup-dash-bars {
    background: rgb(31 41 55);
    border-color: rgb(75 85 99);
}
.mockup-dash-bar {
    flex: 1;
    background: linear-gradient(to top, rgb(99 102 241), rgb(165 180 252));
    border-radius: 2px 2px 0 0;
    height: 0%;
}
.spotlight-frame.active .mockup-dash-bar {
    animation: dash-rise 2.5s infinite ease-out;
}
.spotlight-frame.active .mockup-dash-bar:nth-child(1) { animation-delay: 0s; }
.spotlight-frame.active .mockup-dash-bar:nth-child(2) { animation-delay: 0.1s; }
.spotlight-frame.active .mockup-dash-bar:nth-child(3) { animation-delay: 0.2s; }
.spotlight-frame.active .mockup-dash-bar:nth-child(4) { animation-delay: 0.3s; }
.spotlight-frame.active .mockup-dash-bar:nth-child(5) { animation-delay: 0.4s; }
@keyframes dash-rise {
    0% { height: 0%; }
    40%, 80% { height: var(--bar-h, 50%); }
    100% { height: 0%; }
}

/* --- Mockup: Auto-message ---------------------------------------- */
.mockup-msg {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 300px;
    padding: 12px 14px;
    background: white;
    border: 1px solid rgb(229 231 235);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: rgb(55 65 81);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html.dark .mockup-msg {
    background: rgb(31 41 55);
    border-color: rgb(75 85 99);
    color: rgb(229 231 235);
}
.mockup-msg-fill {
    display: inline-block;
    padding: 0 4px;
    border-radius: 3px;
    background: rgb(238 242 255);
    color: rgb(67 56 202);
    font-weight: 700;
    transition: all 0.3s ease;
}
html.dark .mockup-msg-fill {
    background: rgba(99, 102, 241, 0.25);
    color: rgb(199 210 254);
}
.spotlight-frame.active .mockup-msg-fill { animation: msg-fill 3s infinite; }
.spotlight-frame.active .mockup-msg-fill-1 { animation-delay: 0s; }
.spotlight-frame.active .mockup-msg-fill-2 { animation-delay: 0.4s; }
.spotlight-frame.active .mockup-msg-fill-3 { animation-delay: 0.6s; }
.spotlight-frame.active .mockup-msg-fill-4 { animation-delay: 0.9s; }
@keyframes msg-fill {
    0%, 15% {
        background: rgb(254 226 226);
        color: rgb(153 27 27);
    }
    25%, 90% {
        background: rgb(238 242 255);
        color: rgb(67 56 202);
    }
    100% {
        background: rgb(254 226 226);
        color: rgb(153 27 27);
    }
}

/* Reduced motion: kill the animations, keep the static state. */
@media (prefers-reduced-motion: reduce) {
    .spotlight-frame.active .mockup-prop-a,
    .spotlight-frame.active .mockup-prop-b,
    .spotlight-frame.active .mockup-bulk-pill,
    .spotlight-frame.active .mockup-stripe-step,
    .spotlight-frame.active .mockup-stripe-arrow,
    .spotlight-frame.active .mockup-sync-dot,
    .spotlight-frame.active .mockup-dash-bar,
    .spotlight-frame.active .mockup-msg-fill {
        animation: none !important;
    }
    .spotlight-frame { transition: none; }
}

/* Calculator — modal width switches with mode (classic = narrow, advanced = wide).
   Transition only kicks in after first user-driven mode swap (calc-transition-on
   class), so the first open doesn't visibly animate from default to narrow. */
#calculator-modal-panel.calc-panel-classic { max-width: 22rem; }
#calculator-modal-panel.calc-panel-numi    { max-width: 42rem; }
#calculator-modal-panel.calc-transition-on { transition: max-width 0.2s ease; }

/* Classic number-pad keys */
.calc-key {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: #1f2937;
    background: #f9fafb;
    border: none;
    border-radius: 9999px;
    transition: transform 0.06s ease, background-color 0.12s ease;
    user-select: none;
    cursor: pointer;
    min-height: 48px;
    aspect-ratio: 1 / 1;
}
.calc-key:hover { background: #f3f4f6; }
.calc-key:active { transform: scale(0.94); background: #e5e7eb; }
.calc-key-fn { background: #e5e7eb; color: #374151; font-size: 1.05rem; }
.calc-key-fn:hover { background: #d1d5db; }
.calc-key-op { background: #ffffff; color: #4f46e5; font-weight: 600; font-size: 1.4rem; box-shadow: inset 0 0 0 1px #e0e7ff; }
.calc-key-op:hover { background: #eef2ff; }
.calc-key-op.calc-key-op-active { background: #4f46e5; color: #ffffff; box-shadow: none; }
.calc-key-eq { background: #4f46e5; color: #ffffff; font-weight: 700; font-size: 1.4rem; }
.calc-key-eq:hover { background: #4338ca; }
.calc-key-eq:active { background: #3730a3; }

html.dark .calc-key { background: #374151; color: #f3f4f6; }
html.dark .calc-key:hover { background: #4b5563; }
html.dark .calc-key:active { background: #6b7280; }
html.dark .calc-key-fn { background: #1f2937; color: #d1d5db; }
html.dark .calc-key-fn:hover { background: #374151; }
html.dark .calc-key-op { background: #1f2937; color: #c7d2fe; box-shadow: inset 0 0 0 1px #3730a3; }
html.dark .calc-key-op:hover { background: #312e81; }
html.dark .calc-key-op.calc-key-op-active { background: #c7d2fe; color: #1e1b4b; box-shadow: none; }
html.dark .calc-key-eq { background: #6366f1; color: #ffffff; }
html.dark .calc-key-eq:hover { background: #4f46e5; }
html.dark .calc-key-eq:active { background: #4338ca; }

/* Mode-toggle segmented control — active tab gets a white pill */
#calc-tab-classic.calc-tab-active,
#calc-tab-numi.calc-tab-active {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
html.dark #calc-tab-classic.calc-tab-active,
html.dark #calc-tab-numi.calc-tab-active {
    background: #4b5563;
    color: #f9fafb;
}
#calc-tab-classic:not(.calc-tab-active),
#calc-tab-numi:not(.calc-tab-active) {
    color: #6b7280;
}
html.dark #calc-tab-classic:not(.calc-tab-active),
html.dark #calc-tab-numi:not(.calc-tab-active) {
    color: #9ca3af;
}