/* ===================================================================== */
/* Cabin palette                                                          */
/*                                                                        */
/* Drawn from the lodge photo: charcoal siding, cedar posts, stone        */
/* pillars, pine trees. The --rz-* overrides re-skin every Radzen         */
/* component (buttons, focus rings, select bars, menus, badges) in one    */
/* place — app.css loads AFTER the theme, so these win.                   */
/* ===================================================================== */
:root {
    --cabin-charcoal: #33383d;      /* header, dark surfaces */
    --cabin-ink: #26292c;           /* headings/body text */
    --cabin-lake: #3f6478;          /* lake stone — the primary accent */
    --cabin-lake-dark: #32505f;
    --cabin-stone: #6d7278;         /* muted text, icons */
    --cabin-mist: #eef0f1;          /* light neutral surfaces */
    --cabin-locked: #e7eaee;        /* calendar: past/locked days */
    --cabin-pine: #43a35e;          /* success / "open" green */
    --cabin-gold: #e9d92f;          /* warning / "shared" yellow */
    --cabin-clay: #b3423a;          /* danger / "reserved" red */

    /* Radzen theme re-skin */
    --rz-primary: var(--cabin-lake);
    --rz-primary-light: #6d8d9d;
    --rz-primary-lighter: #e5edf1;
    --rz-primary-dark: var(--cabin-lake-dark);
    --rz-primary-darker: #243c47;

    --rz-secondary: var(--cabin-stone);
    --rz-secondary-light: #8a8f94;
    --rz-secondary-lighter: #e9eaeb;
    --rz-secondary-dark: #565b60;
    --rz-secondary-darker: #3f4347;

    --rz-info: #56707f;
    --rz-info-light: #7d93a0;
    --rz-info-lighter: #e3eaee;
    --rz-info-dark: #445965;
    --rz-info-darker: #33434c;

    --rz-success: var(--cabin-pine);
    --rz-success-light: #6dc189;
    --rz-success-lighter: #d5eddf;
    --rz-success-dark: #2f7742;
    --rz-success-darker: #235931;

    --rz-warning: var(--cabin-gold);
    --rz-warning-light: #f2e878;
    --rz-warning-lighter: #fbf6d2;
    --rz-warning-dark: #bfb016;
    --rz-warning-darker: #85790c;

    --rz-danger: var(--cabin-clay);
    --rz-danger-light: #c66b64;
    --rz-danger-lighter: #f5e1df;
    --rz-danger-dark: #93342d;
    --rz-danger-darker: #722822;

    /* Text-on-tinted-background colors: Material bakes these as literals (indigo/pink),
       and the button ripple uses currentColor — so purple text meant purple ripples. */
    --rz-on-primary-lighter: var(--cabin-lake-dark);
    --rz-on-secondary-lighter: var(--rz-secondary-dark);
    --rz-on-info-lighter: var(--rz-info-dark);
    --rz-on-success-lighter: var(--rz-success-dark);
    --rz-on-warning-lighter: var(--rz-warning-darker);
    --rz-on-danger-lighter: var(--rz-danger-dark);

    --rz-link-color: var(--cabin-lake-dark);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--cabin-pine);
}

.invalid {
    outline: 1px solid var(--cabin-clay);
}

.validation-message {
    color: var(--cabin-clay);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ===================================================================== */
/* Cabin app shell (MainLayout)                                          */
/* ===================================================================== */
.rz-header {
    background-color: var(--cabin-charcoal) !important;
}

/* Body content full width, with the cabin photo behind a light scrim so dark text
   and white cards stay readable. */
.rz-body {
    margin-left: 0 !important;
    background-image:
        linear-gradient(rgba(225, 225, 225, 0.55), rgba(225, 225, 225, 0.7)),
        url('/images/crandall_cabin.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.cabin-brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 576px) {
    .cabin-brand {
        font-size: 0.95rem;
    }
}

.cabin-user {
    color: #fff !important;
    text-decoration: none;
    font-weight: 500;
}

.cabin-header form {
    margin: 0;
}

/* Slide-out nav drawer (NavSidebar). The hamburger toggle sits in the dark header; the
   sidebar + mask render from an island inside the header, so they're fixed-positioned to
   overlay the whole page. */
.cabin-header .rz-sidebar-toggle,
.cabin-header .rz-sidebar-toggle .rzi {
    color: #fff !important;
}

.cabin-header .rz-sidebar-toggle {
    margin: 0;
}

.cabin-sidebar.rz-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100dvh;
    z-index: 1002;
}

.cabin-sidebar-mask {
    position: fixed !important;
    inset: 0;
    z-index: 1001;
}

/* Sidebar menu: dark text/icons in every state; lake tint for hover/current page. */
.cabin-sidebar .rz-navigation-item-link,
.cabin-sidebar .rz-navigation-item-link .rz-navigation-item-text,
.cabin-sidebar .rz-navigation-item-link .rz-navigation-item-icon,
.cabin-sidebar .rz-navigation-item-link .rzi {
    color: var(--cabin-ink) !important;
}

.cabin-sidebar .rz-navigation-item-wrapper:hover {
    background: var(--cabin-mist) !important;
}

.cabin-sidebar .rz-navigation-item-active,
.cabin-sidebar .rz-navigation-item-active .rz-navigation-item-wrapper {
    background: var(--rz-primary-lighter) !important;
}

/* Person-icon user menu in the top-right: transparent trigger in every state — the theme
   otherwise paints its primary color on the focused/active trigger. */
.cabin-profile .rz-navigation-item,
.cabin-profile .rz-navigation-item-wrapper,
.cabin-profile .rz-navigation-item-link,
.cabin-profile .rz-navigation-item-wrapper:focus-within,
.cabin-profile .rz-navigation-item-link:hover,
.cabin-profile .rz-navigation-item-link:focus,
.cabin-profile .rz-navigation-item-link:active {
    background: transparent !important;
    box-shadow: none !important;
}

.cabin-profile .rz-navigation-item-wrapper:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px;
}

.cabin-profile .rz-navigation-item-icon-children {
    display: none;
}

/* Keep Radzen dialogs (booking dialog etc.) inside the viewport on phones. */
.rz-dialog {
    max-width: calc(100vw - 1.5rem);
}

.cabin-body {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* ===================================================================== */
/* Schedule page                                                          */
/* ===================================================================== */
/* The schedule needs more room than the standard page column so a month of
   bookings stays readable. */
.cabin-body:has(.schedule-page) {
    max-width: 1500px;
}

/* Solid panel behind the legend so it doesn't wash out over the cabin photo —
   same white as the calendar itself. */
.schedule-legend {
    background: #fff;
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

.legend-swatch-open {
    background: var(--rz-success);
}

.legend-swatch-shared {
    background: var(--rz-warning);
}

.legend-swatch-reserved {
    background: var(--rz-danger);
}

/* There's only one view (Month), so the view-picker button in the scheduler header
   is pure noise. visibility (not display) so it still occupies its slot in the header's
   flex layout — otherwise the month title slides over to the right edge. */
.schedule-page .rz-scheduler-nav-views {
    visibility: hidden;
}

/* Day-of-month number in each calendar cell — bold so the date still reads clearly against
   the green/yellow/red day tints. */
.schedule-page .rz-slot-title {
    font-weight: 700;
}

/* Booking chips. Deliberately a single line with an ellipsis: the month view gives each chip
   a fixed-height slot, so wrapping a long note just overflowed it and clipped the text
   mid-line. Whatever doesn't fit is read by clicking the booking. */
.schedule-page {
    --rz-scheduler-event-content-padding: 0.15rem 0.4rem;
}

/* Each week row is its own size container so the chips can be sized off the row's real height
   instead of a guess. The month view lays every event out at top = (band + 1) * 1.5em with
   height = 1.5em, both relative to the event's own font-size — so a font-size of one sixth of
   the row makes the day-number strip plus three stacked chips (our MaxAppointmentsInSlot) fill
   the row exactly, with no dead space underneath. The plain em value is the fallback for
   browsers without container queries, and the inner font-size keeps the text itself readable. */
.schedule-page .rz-month-view .rz-week {
    container-type: size;

    /* Clips the overhang below so a stay running past Saturday doesn't widen the grid. */
    overflow: hidden;
}

/* Stays are overnight: you turn up part-way through the first day and head home the morning
   after the last one. A bar that fills whole cells therefore reads a day too eager at the front
   and a day too short at the back. Nudging every chip a third of a day slot to the right — a
   slot is a seventh of the row, and 0.33 of one is the knob to turn — starts it in the
   afternoon of the first day and ends it in the morning of the day after, which is the shape
   the stay actually has. The percentage resolves against the week row, since that's the chip's
   containing block. */
.schedule-page .rz-event {
    margin-inline-start: calc(100% / 7 * 0.33);
}

/* Except for a chip Radzen pinned flush to the left edge of a row because the stay began in an
   earlier week — those guests were already in bed when the row started, so that bar has no
   half-day to give up. Matching on the inline style is the only way to tell that chip from a
   stay that genuinely begins on a Sunday; if Radzen ever reformats the style string this rule
   simply stops matching and every chip shifts, which is the old behaviour, not a broken one. */
.schedule-page .rz-event:not([data-starts-week])[style*="inset-inline-start: 0%"] {
    margin-inline-start: 0;
}

.schedule-page .rz-event {
    font-size: 1.15em;
    font-size: clamp(0.9rem, calc(100cqh / 6), 1.75rem);
}

.schedule-page .rz-event-content {
    display: flex;
    align-items: center;
    overflow: hidden;
    line-height: 1.25;
    font-size: 0.85rem;
    font-weight: 600;
}

.booking-chip {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.booking-chip-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-chip-note {
    font-weight: 400;
    opacity: 0.85;
}

/* Stand-in for the name on phones — see the media query below. */
.booking-chip-initials {
    display: none;
}

/* Phones. A month cell is only ~40px wide here, so no amount of layout makes a name plus a
   note readable — show the booker's initials on the colored chip instead and let a tap open
   the booking for the rest. */
@media (max-width: 768px) {
    .schedule-page {
        --rz-scheduler-event-content-padding: 0.1rem 0.15rem;
        --rz-scheduler-day-number-padding: 0 0.25rem;
        --rz-scheduler-toolbar-title-font-size: 1.25rem;
    }

    .schedule-page .rz-event {
        font-size: 1em;
        font-size: clamp(0.75rem, calc(100cqh / 6), 1.15rem);
    }

    .schedule-page .rz-event-content {
        font-size: 0.7rem;
        letter-spacing: 0.02em;
    }

    .booking-chip-text {
        display: none;
    }

    .booking-chip-initials {
        display: block;
        width: 100%;
        text-align: center;
    }

    .schedule-page .rz-slot-title {
        font-size: 0.75rem;
    }

    .schedule-legend {
        padding: 0.6rem 0.75rem;
    }
}

/* ===================================================================== */
/* Booking dialog                                                         */
/* ===================================================================== */
/* Whose booking this is. Only rendered when it isn't yours, so it can be a quiet name-and-face
   line rather than a card — the surprise is the point, not the emphasis. */
.booking-owner-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--cabin-lake);
    color: #fff;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

.booking-owner-name {
    color: var(--cabin-ink);
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* One-line helper under the shared/private toggle. */
.booking-hint {
    color: var(--cabin-stone);
}

.booking-note {
    width: 100%;
}

/* ===================================================================== */
/* Login / Register (AuthLayout)                                          */
/* ===================================================================== */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        linear-gradient(rgba(200, 200, 200, 0.5), rgba(200, 200, 200, 0.65)),
        url('/images/crandall_cabin.jpg') center / cover no-repeat,
        #e0e0e0;
}

.auth-stack {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-banner {
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.auth-label {
    display: block;
    font-weight: 600;
    margin: 0.75rem 0 0.25rem;
}

.auth-input {
    width: 100%;
    box-sizing: border-box;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.85rem 0;
}

.auth-submit {
    width: 100%;
    background: var(--cabin-lake);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
}

.auth-submit:hover {
    background: var(--cabin-lake-dark);
}

.auth-links {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.auth-links a {
    color: var(--rz-secondary-dark);
}

/* ===================================================================== */
/* Account manage pages (static Identity SSR, styled to match the site)   */
/* ===================================================================== */
.manage-nav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0 0 1.25rem;
}

.manage-nav a {
    display: block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: #fff;
    color: var(--rz-secondary-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.manage-nav a.active {
    background: var(--cabin-lake);
    color: #fff;
}

.manage-card {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    max-width: 520px;
    margin-bottom: 1.25rem;
}

.manage-card h4 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--cabin-ink);
}

.manage-email-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.manage-badge {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.manage-badge-ok {
    background: var(--rz-success-lighter);
    color: var(--rz-success-darker);
}

.manage-badge-warn {
    background: var(--rz-warning-lighter);
    color: var(--rz-warning-darker);
}

.manage-link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0.35rem 0 0;
    color: var(--rz-secondary-dark);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
}

.manage-hint {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--cabin-stone);
}

/* Status + validation messages used across the Identity pages. */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    max-width: 520px;
}

.alert-success {
    background: var(--rz-success-lighter);
    color: var(--rz-success-darker);
}

.alert-danger {
    background: var(--rz-danger-lighter);
    color: var(--rz-danger-darker);
}

.text-danger {
    color: var(--cabin-clay);
}

/* ===================================================================== */
/* Weather dashboard (webcam page)                                        */
/* ===================================================================== */
.weather-big-temp {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cabin-ink);
}

.weather-muted {
    color: var(--cabin-stone);
}

.weather-hours {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.weather-hour {
    flex: 0 0 auto;
    min-width: 62px;
    text-align: center;
}

.weather-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.weather-day {
    flex: 1 1 110px;
    text-align: center;
    background: var(--cabin-mist);
    border-radius: 8px;
    padding: 0.6rem 0.4rem;
}

/* ===================================================================== */
/* Home dashboard tiles                                                   */
/* ===================================================================== */
/* Square, icon-and-title-only tiles; the whole card is the button. */
.home-tile {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    cursor: pointer;
    border-radius: 12px;
    background: transparent !important;
    box-shadow: none !important;
    transition: background 0.15s ease;
    user-select: none;
}

.home-tile:hover {
    background: rgba(255, 255, 255, 0.45) !important;
}

.home-tile .home-tile-icon {
    font-size: 4rem;
    color: var(--cabin-charcoal);
}

.home-tile .rz-text-h6 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--cabin-ink);
}