/* Brand tokens - mirror ZimVoyageTheme.cs (MudBlazor's palette) for the handful of places
   outside Mud components: the nav shell, the preloader, Bootstrap leftovers. */
:root {
    --zv-forest-900: #0B211A;
    --zv-forest-800: #12352A;
    --zv-green-600: #146B4C;
    --zv-green-700: #0F573D;
    --zv-gold-500: #E3A72F;
    --zv-terracotta-500: #B9532F;
    --zv-sand-50: #F6F4EE;
    --zv-ink-900: #1D2A24;
    --zv-ink-600: #56635C;
    --zv-radius: 10px;
}

/* Dark mode: <html data-theme="dark"> is set before first paint by window.zvTheme (App.razor);
   MudBlazor's own --mud-palette-* variables switch once MainLayout applies PaletteDark. */
html[data-theme="dark"] {
    --zv-forest-900: #08110E;
    --zv-forest-800: #0E1A16;
    --zv-sand-50: #0D1613;
    --zv-ink-900: #E7EEE9;
    --zv-ink-600: #A3B2AA;
}

/* MudBlazor's PaletteDark variables, copied verbatim from what MudThemeProvider generates for
   ZimVoyageTheme.PaletteDark. The prerendered HTML always carries the LIGHT palette (the server
   can't know the visitor's preference), and MudThemeProvider only switches to dark once the app
   is interactive - which can take seconds on a slow phone. Keyed off <html data-theme="dark">
   (set before first paint), this makes the page dark from the very first frame instead. Higher
   specificity than Mud's own :root rule; once the user picks light, data-theme flips and Mud's
   light :root values apply again. If you change PaletteDark, regenerate this block. */
html[data-theme="dark"] {
    --mud-palette-black: rgba(5,10,8,1);
    --mud-palette-white: rgba(255,255,255,1);
    --mud-palette-primary: rgba(76,195,138,1);
    --mud-palette-primary-rgb: 76,195,138;
    --mud-palette-primary-text: rgba(6,20,14,1);
    --mud-palette-primary-darken: rgb(59,176,119);
    --mud-palette-primary-lighten: rgb(102,204,155);
    --mud-palette-primary-hover: rgba(76,195,138,0.058823529411764705);
    --mud-palette-secondary: rgba(240,185,74,1);
    --mud-palette-secondary-rgb: 240,185,74;
    --mud-palette-secondary-text: rgba(28,26,20,1);
    --mud-palette-secondary-darken: rgb(238,173,43);
    --mud-palette-secondary-lighten: rgb(244,200,113);
    --mud-palette-secondary-hover: rgba(240,185,74,0.058823529411764705);
    --mud-palette-tertiary: rgba(224,122,82,1);
    --mud-palette-tertiary-rgb: 224,122,82;
    --mud-palette-tertiary-text: rgba(26,13,7,1);
    --mud-palette-tertiary-darken: rgb(218,95,47);
    --mud-palette-tertiary-lighten: rgb(231,149,116);
    --mud-palette-tertiary-hover: rgba(224,122,82,0.058823529411764705);
    --mud-palette-info: rgba(90,169,230,1);
    --mud-palette-info-rgb: 90,169,230;
    --mud-palette-info-text: rgba(255,255,255,1);
    --mud-palette-info-darken: rgb(60,154,226);
    --mud-palette-info-lighten: rgb(122,186,235);
    --mud-palette-info-hover: rgba(90,169,230,0.058823529411764705);
    --mud-palette-success: rgba(91,192,138,1);
    --mud-palette-success-rgb: 91,192,138;
    --mud-palette-success-text: rgba(255,255,255,1);
    --mud-palette-success-darken: rgb(69,176,119);
    --mud-palette-success-lighten: rgb(115,201,155);
    --mud-palette-success-hover: rgba(91,192,138,0.058823529411764705);
    --mud-palette-warning: rgba(242,169,59,1);
    --mud-palette-warning-rgb: 242,169,59;
    --mud-palette-warning-text: rgba(255,255,255,1);
    --mud-palette-warning-darken: rgb(240,154,25);
    --mud-palette-warning-lighten: rgb(245,184,92);
    --mud-palette-warning-hover: rgba(242,169,59,0.058823529411764705);
    --mud-palette-error: rgba(239,107,107,1);
    --mud-palette-error-rgb: 239,107,107;
    --mud-palette-error-text: rgba(255,255,255,1);
    --mud-palette-error-darken: rgb(235,76,76);
    --mud-palette-error-lighten: rgb(243,145,145);
    --mud-palette-error-hover: rgba(239,107,107,0.058823529411764705);
    --mud-palette-dark: rgba(11,21,17,1);
    --mud-palette-dark-rgb: 11,21,17;
    --mud-palette-dark-text: rgba(255,255,255,1);
    --mud-palette-dark-darken: rgb(0,0,0);
    --mud-palette-dark-lighten: rgb(25,47,38);
    --mud-palette-dark-hover: rgba(11,21,17,0.058823529411764705);
    --mud-palette-text-primary: rgba(231,238,233,1);
    --mud-palette-text-primary-rgb: 231,238,233;
    --mud-palette-text-secondary: rgba(163,178,170,1);
    --mud-palette-text-secondary-rgb: 163,178,170;
    --mud-palette-text-disabled: rgba(231,238,233,0.3764705882352941);
    --mud-palette-text-disabled-rgb: 231,238,233;
    --mud-palette-action-default: rgba(163,178,170,1);
    --mud-palette-action-default-hover: rgba(163,178,170,0.058823529411764705);
    --mud-palette-action-disabled: rgba(231,238,233,0.25882352941176473);
    --mud-palette-action-disabled-background: rgba(231,238,233,0.11764705882352941);
    --mud-palette-surface: rgba(21,33,28,1);
    --mud-palette-surface-rgb: 21,33,28;
    --mud-palette-background: rgba(13,22,19,1);
    --mud-palette-background-gray: rgba(18,29,25,1);
    --mud-palette-drawer-background: rgba(11,21,17,1);
    --mud-palette-drawer-text: rgba(231,238,233,0.8470588235294118);
    --mud-palette-drawer-icon: rgba(255,255,255,0.4980392156862745);
    --mud-palette-appbar-background: rgba(11,21,17,1);
    --mud-palette-appbar-text: rgba(231,238,233,1);
    --mud-palette-lines-default: rgba(38,53,47,1);
    --mud-palette-lines-inputs: rgba(58,75,68,1);
    --mud-palette-table-lines: rgba(34,48,42,1);
    --mud-palette-table-striped: rgba(76,195,138,0.0392156862745098);
    --mud-palette-table-hover: rgba(76,195,138,0.0784313725490196);
    --mud-palette-divider: rgba(38,53,47,1);
    --mud-palette-divider-rgb: 38,53,47;
    --mud-palette-divider-light: rgba(30,43,38,1);
    --mud-palette-skeleton: rgba(255,255,255,0.10980392156862745);
    --mud-palette-overlay-dark: rgba(0,0,0,0.6);
    --mud-palette-overlay-light: rgba(255,255,255,0.4980392156862745);
}

/* ---------- Base ---------- */
*, *::before, *::after {
    box-sizing: border-box; /* was Bootstrap's reboot */
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    font-family: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--mud-palette-background, var(--zv-sand-50));
    color: var(--mud-palette-text-primary, var(--zv-ink-900));
}

body {
    margin: 0;
    overflow-x: hidden; /* last-resort guard; the rules below keep content from overflowing in the first place */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, .btn-link {
    color: var(--mud-palette-primary, var(--zv-green-600));
}

    a:hover {
        color: var(--mud-palette-primary-darken, var(--zv-green-700));
    }

.btn-primary {
    color: #fff;
    background-color: var(--zv-green-600);
    border-color: var(--zv-green-700);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(20, 107, 76, 0.55);
}

h1:focus {
    outline: none;
}

/* Bootstrap is no longer loaded - the one utility the error page still uses */
.text-danger {
    color: var(--mud-palette-error, #C62828);
}

::selection {
    background: rgba(227, 167, 47, 0.35);
}

/* ---------- Responsive safety net ---------- */
img, video, iframe, canvas, svg {
    max-width: 100%;
}

img, video {
    height: auto;
}

/* Long words/URLs (emails, slugs, addresses) shouldn't force horizontal scrolling on phones */
.mud-typography, .mud-alert-message, .mud-card-content, .mud-table-cell {
    overflow-wrap: anywhere;
}

/* Tables scroll inside their own box rather than widening the page */
.mud-table-container, .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Leaflet/Pannellum containers: inline heights (300-400px) are fine on desktop but take most of
   a phone screen - cap them to the viewport there. */
.leaflet-container, .pnlm-container {
    max-height: 60vh;
    border-radius: var(--zv-radius);
    z-index: 0; /* keep map panes below the sticky top bar */
}

/* Dim map tiles in dark mode so they don't glare against dark surfaces */
html[data-theme="dark"] .leaflet-tile {
    filter: brightness(0.78) contrast(1.08) saturate(0.9);
}

/* Rows of buttons/chips wrap instead of overflowing */
.mud-card-actions, .mud-stack-row {
    flex-wrap: wrap;
}

/* MudContainer adds its own gutters inside .content's padding - trim them on phones */
@media (max-width: 599.98px) {
    .content .mud-container {
        padding-left: 0;
        padding-right: 0;
    }

    .mud-dialog {
        margin: 0.75rem;
        max-width: calc(100vw - 1.5rem) !important;
    }

    .mud-button-root[class*="-size-large"] {
        width: 100%;
    }
}

/* ---------- Component polish ---------- */
.mud-card {
    border: 1px solid var(--mud-palette-lines-default, #E8E4DA);
    box-shadow: 0 1px 2px rgba(16, 33, 26, 0.04), 0 4px 14px rgba(16, 33, 26, 0.04) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
    .mud-card:hover {
        box-shadow: 0 2px 6px rgba(16, 33, 26, 0.06), 0 12px 28px rgba(16, 33, 26, 0.09) !important;
    }
}

.mud-card-media {
    border-radius: var(--zv-radius) var(--zv-radius) 0 0;
}

/* Hero banner used on the home page */
.zv-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-radius: 16px !important;
    padding: clamp(1.75rem, 4vw, 3.5rem) !important;
    background:
        radial-gradient(circle at 85% 15%, rgba(227, 167, 47, 0.35), transparent 45%),
        radial-gradient(circle at 10% 110%, rgba(185, 83, 47, 0.35), transparent 50%),
        linear-gradient(135deg, var(--zv-forest-900) 0%, var(--zv-green-600) 100%) !important;
}

    .zv-hero .zv-hero__lead {
        max-width: 52ch;
        opacity: 0.92;
    }

    .zv-hero .zv-hero__outline {
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.7) !important;
    }

/* ---------- Validation / Blazor defaults ---------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #2E7D4F;
}

.invalid {
    outline: 1px solid #C62828;
}

.validation-message {
    color: #C62828;
}

.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."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}