/* Copyright (c) 2026 Tapiwanashe Mabvudzi. All rights reserved.
   Part of Zim Voyage. Proprietary and confidential - see LICENSE at the repository root. */
/* 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: #0A2219;
    --zv-forest-800: #10352A;
    --zv-green-600: #0E5A3F;
    --zv-green-700: #0B4A34;
    --zv-gold-500: #D99A1E;
    --zv-terracotta-500: #C2552B;
    --zv-sand-50: #F7F5F0;
    --zv-ink-900: #17231D;
    --zv-ink-600: #55625A;
    --zv-radius: 12px;
    --zv-radius-lg: 18px;
    /* Elevation: soft, green-tinted shadows (never pure black - it looks muddy on warm stone). */
    --zv-shadow-1: 0 1px 2px rgba(10, 34, 25, 0.05), 0 2px 8px rgba(10, 34, 25, 0.04);
    --zv-shadow-2: 0 2px 6px rgba(10, 34, 25, 0.06), 0 12px 28px rgba(10, 34, 25, 0.09);
    --zv-focus: 0 0 0 3px rgba(14, 90, 63, 0.35);
    --zv-space-section: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
}

/* 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: #06100C;
    --zv-forest-800: #0D1A15;
    --zv-sand-50: #0B1410;
    --zv-ink-900: #E8EFEA;
    --zv-ink-600: #A6B5AD;
    --zv-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --zv-shadow-2: 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 30px rgba(0, 0, 0, 0.3);
    --zv-focus: 0 0 0 3px rgba(79, 209, 149, 0.45);
}

/* 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: switch the
   running site to dark, then copy the --mud-palette-* variables from MudThemeProvider's <style>. */
html[data-theme="dark"] {
    --mud-palette-black: rgba(4,9,7,1);
    --mud-palette-white: rgba(255,255,255,1);
    --mud-palette-primary: rgba(79,209,149,1);
    --mud-palette-primary-rgb: 79,209,149;
    --mud-palette-primary-text: rgba(4,18,11,1);
    --mud-palette-primary-darken: rgb(51,199,130);
    --mud-palette-primary-lighten: rgb(109,217,167);
    --mud-palette-primary-hover: rgba(79,209,149,0.058823529411764705);
    --mud-palette-secondary: rgba(240,180,68,1);
    --mud-palette-secondary-rgb: 240,180,68;
    --mud-palette-secondary-text: rgba(26,20,8,1);
    --mud-palette-secondary-darken: rgb(237,164,29);
    --mud-palette-secondary-lighten: rgb(243,194,104);
    --mud-palette-secondary-hover: rgba(240,180,68,0.058823529411764705);
    --mud-palette-tertiary: rgba(233,130,90,1);
    --mud-palette-tertiary-rgb: 233,130,90;
    --mud-palette-tertiary-text: rgba(26,13,7,1);
    --mud-palette-tertiary-darken: rgb(228,106,58);
    --mud-palette-tertiary-lighten: rgb(237,153,120);
    --mud-palette-tertiary-hover: rgba(233,130,90,0.058823529411764705);
    --mud-palette-info: rgba(100,178,234,1);
    --mud-palette-info-rgb: 100,178,234;
    --mud-palette-info-text: rgba(6,18,27,1);
    --mud-palette-info-darken: rgb(67,161,229);
    --mud-palette-info-lighten: rgb(129,193,238);
    --mud-palette-info-hover: rgba(100,178,234,0.058823529411764705);
    --mud-palette-success: rgba(92,203,145,1);
    --mud-palette-success-rgb: 92,203,145;
    --mud-palette-success-text: rgba(4,18,11,1);
    --mud-palette-success-darken: rgb(61,194,125);
    --mud-palette-success-lighten: rgb(119,212,164);
    --mud-palette-success-hover: rgba(92,203,145,0.058823529411764705);
    --mud-palette-warning: rgba(244,176,74,1);
    --mud-palette-warning-rgb: 244,176,74;
    --mud-palette-warning-text: rgba(26,20,8,1);
    --mud-palette-warning-darken: rgb(242,161,38);
    --mud-palette-warning-lighten: rgb(247,192,110);
    --mud-palette-warning-hover: rgba(244,176,74,0.058823529411764705);
    --mud-palette-error: rgba(240,115,115,1);
    --mud-palette-error-rgb: 240,115,115;
    --mud-palette-error-text: rgba(28,6,6,1);
    --mud-palette-error-darken: rgb(237,80,80);
    --mud-palette-error-lighten: rgb(244,149,149);
    --mud-palette-error-hover: rgba(240,115,115,0.058823529411764705);
    --mud-palette-dark: rgba(8,17,13,1);
    --mud-palette-dark-rgb: 8,17,13;
    --mud-palette-dark-text: rgba(255,255,255,1);
    --mud-palette-dark-darken: rgb(0,0,0);
    --mud-palette-dark-lighten: rgb(20,42,32);
    --mud-palette-dark-hover: rgba(8,17,13,0.058823529411764705);
    --mud-palette-text-primary: rgba(232,239,234,1);
    --mud-palette-text-primary-rgb: 232,239,234;
    --mud-palette-text-secondary: rgba(166,181,173,1);
    --mud-palette-text-secondary-rgb: 166,181,173;
    --mud-palette-text-disabled: rgba(232,239,234,0.3764705882352941);
    --mud-palette-text-disabled-rgb: 232,239,234;
    --mud-palette-action-default: rgba(166,181,173,1);
    --mud-palette-action-default-hover: rgba(166,181,173,0.058823529411764705);
    --mud-palette-action-disabled: rgba(232,239,234,0.25882352941176473);
    --mud-palette-action-disabled-background: rgba(232,239,234,0.11764705882352941);
    --mud-palette-surface: rgba(20,32,26,1);
    --mud-palette-surface-rgb: 20,32,26;
    --mud-palette-background: rgba(11,20,16,1);
    --mud-palette-background-gray: rgba(16,27,22,1);
    --mud-palette-drawer-background: rgba(8,17,13,1);
    --mud-palette-drawer-text: rgba(232,239,234,0.8588235294117647);
    --mud-palette-drawer-icon: rgba(232,239,234,0.6);
    --mud-palette-appbar-background: rgba(8,17,13,1);
    --mud-palette-appbar-text: rgba(232,239,234,1);
    --mud-palette-lines-default: rgba(36,52,45,1);
    --mud-palette-lines-inputs: rgba(58,76,68,1);
    --mud-palette-table-lines: rgba(33,48,42,1);
    --mud-palette-table-striped: rgba(79,209,149,0.0392156862745098);
    --mud-palette-table-hover: rgba(79,209,149,0.0784313725490196);
    --mud-palette-divider: rgba(36,52,45,1);
    --mud-palette-divider-rgb: 36,52,45;
    --mud-palette-divider-light: rgba(28,42,36,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(14, 90, 63, 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(217, 154, 30, 0.35);
}

/* One visible, consistent keyboard focus ring everywhere (WCAG 2.4.7) - mouse clicks don't show it. */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--zv-focus);
    border-radius: 6px;
}

/* Respect "reduce motion" for every hover lift and transition below. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ---------- 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, #E4E0D6);
    box-shadow: var(--zv-shadow-1) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
    .mud-card:hover {
        box-shadow: var(--zv-shadow-2) !important;
    }
}

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

/* Outlined papers (panels, forms) share the card border and radius. */
.mud-paper-outlined {
    border-color: var(--mud-palette-lines-default) !important;
}

/* Filled buttons get a little depth; text/outlined ones stay flat. */
.mud-button-filled:not(.mud-button-disabled) {
    box-shadow: 0 1px 2px rgba(10, 34, 25, 0.12) !important;
}

/* Chips: pill-shaped and a touch bolder so they read as tags, not buttons. */
.mud-chip {
    font-weight: 500;
}

/* ---------- Page building blocks (shared by the redesigned pages) ---------- */

/* A page section with consistent vertical rhythm. */
.zv-section {
    margin-block: var(--zv-space-section);
}

/* Section heading: small coloured eyebrow, title, optional lead, optional "see all" link on the right. */
.zv-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.25rem;
}

.zv-eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--mud-palette-tertiary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.zv-lead {
    max-width: 60ch;
    color: var(--mud-palette-text-secondary);
}

/* A whole card that's one link: lifts on hover, shows the focus ring on keyboard focus. */
.zv-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--zv-radius);
    box-shadow: var(--zv-shadow-1);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

    .zv-card-link:hover {
        color: inherit;
        border-color: rgba(var(--mud-palette-primary-rgb), 0.35);
        box-shadow: var(--zv-shadow-2);
    }

@media (hover: hover) {
    .zv-card-link:hover {
        transform: translateY(-2px);
    }
}

/* Round tinted icon badge used on feature cards. */
.zv-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

    .zv-icon-badge.gold {
        background: rgba(var(--mud-palette-secondary-rgb), 0.18);
        color: #8A5E00;
    }

    .zv-icon-badge.terracotta {
        background: rgba(var(--mud-palette-tertiary-rgb), 0.12);
        color: var(--mud-palette-tertiary);
    }

html[data-theme="dark"] .zv-icon-badge.gold {
    color: var(--mud-palette-secondary);
}

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

/* ---------- Map explorer markers (wwwroot/js/geoMap.js) - global: Leaflet builds them outside component scope ---------- */
.zv-geo-marker {
    background: none;
    border: 0;
}

    .zv-geo-marker span {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
        color: #fff;
        font-size: 15px;
        line-height: 1;
        border: 2px solid #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    }

    .zv-geo-marker span i {
        font-style: normal;
        transform: rotate(45deg); /* undo the teardrop's rotation so the symbol stays upright */
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    }

.zv-geo-marker--selected span {
    border-width: 3px;
    box-shadow: 0 0 0 4px rgba(227, 167, 47, 0.6), 0 3px 10px rgba(0, 0, 0, 0.45);
}

.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
    background-color: rgba(14, 90, 63, 0.25) !important;
}

    .marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
        background-color: rgba(14, 90, 63, 0.85) !important;
        color: #fff !important;
        font-weight: 700;
    }