/* ===================================================================== */
/* 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-timber: #9c6b3f;        /* cedar — the primary accent */
    --cabin-timber-dark: #7f5430;
    --cabin-stone: #6d7278;         /* muted text, icons */
    --cabin-mist: #eef0f1;          /* light neutral surfaces */
    --cabin-locked: #dfe2e4;        /* calendar: past/locked days */
    --cabin-pine: #4f7359;          /* success / "open" green */
    --cabin-gold: #d9a62e;          /* warning / "shared" yellow */
    --cabin-clay: #b3423a;          /* danger / "reserved" red */

    /* Radzen theme re-skin */
    --rz-primary: var(--cabin-timber);
    --rz-primary-light: #b98a5e;
    --rz-primary-lighter: #f0e6da;
    --rz-primary-dark: var(--cabin-timber-dark);
    --rz-primary-darker: #63411f;

    --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: #74937e;
    --rz-success-lighter: #e6eee8;
    --rz-success-dark: #3e5c47;
    --rz-success-darker: #2e4635;

    --rz-warning: var(--cabin-gold);
    --rz-warning-light: #e3bc5f;
    --rz-warning-lighter: #f8efd6;
    --rz-warning-dark: #b3872a;
    --rz-warning-darker: #8a6820;

    --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-timber-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-timber-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; timber 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-light);
}

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

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

/* 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;
}

/* Taller booking chips that wrap long notes. The month view stacks chips with em-based
   inline offsets, so scaling the event's font-size grows the chip and its stacking slot
   together; the inner font-size keeps the text itself at a readable size. */
.schedule-page .rz-event {
    font-size: 1.55em;
}

.schedule-page .rz-event-content {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

/* ===================================================================== */
/* 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-timber);
    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-timber-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-timber);
    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);
}