/* Bootstrap 5 primary = brand FOREST (was forced blue). This single change
   rebrands every Bootstrap button / link / badge / alert / form control across
   the app, because the brand primary flows through --bs-primary everywhere.
   Orange is intentionally NOT the global primary — it stays a disciplined
   accent (CTAs, capture, wayfinding) applied via .ho-btn-accent. */
:root {
    --bs-primary: #2d6a4f;            /* pine — readable with white text */
    --bs-primary-rgb: 45, 106, 79;
    --bs-link-color: #226048;
    --bs-link-hover-color: #14402f;
}

.btn-primary {
    --bs-btn-bg: #2d6a4f;
    --bs-btn-border-color: #2d6a4f;
    --bs-btn-hover-bg: #235740;
    --bs-btn-hover-border-color: #1f4e3a;
    --bs-btn-active-bg: #1b4332;
    --bs-btn-active-border-color: #173a2c;
    --bs-btn-disabled-bg: #2d6a4f;
    --bs-btn-disabled-border-color: #2d6a4f;
}

.btn-outline-primary {
    --bs-btn-color: #2d6a4f;
    --bs-btn-border-color: #2d6a4f;
    --bs-btn-hover-bg: #2d6a4f;
    --bs-btn-hover-border-color: #2d6a4f;
    --bs-btn-active-bg: #1b4332;
    --bs-btn-active-border-color: #1b4332;
}

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, Helvetica, Arial;
    height: 100%;
    overflow: hidden;
    background-color: var(--ho-canvas, #f5f2ea);   /* warm paper, not cool gray */
}
.mainLayout {
    height: 100%;
    overflow: hidden;
}

.vh-100 {
    height: auto !important;
}

.vh-90 {
    height: 90% !important;
}

.page {
    overflow: visible !important;
}


.e-bigger {
    font-size: large;
}

a, .btn-link {
    color: #226048;
}

/* Reconnect modal styles are in ReconnectModal.razor.css */

/* ===================================================================
   HANG OUTDOORS — BRAND SHELL ("Expedition" re-skin)
   Promotes the validated /coming-soon palette into reusable vars and
   re-skins the app chrome (header, nav rail, FABs) to carry the brand.
   Structure & behavior of every component is unchanged — this is skin
   only. Overrides target Atlas RCL components (header, drawer, capture
   FAB) without editing the package, via higher specificity / !important
   (same pattern ComingSoonLayout uses for the reconnect modal).
   =================================================================== */
:root {
    --ho-deep:    #08152b;  /* deepest predawn sky */
    --ho-night:   #16264c;  /* logo navy */
    --ho-slate:   #3e5680;  /* logo mountain slate */
    --ho-forest:  #1b4332;  /* forest */
    --ho-pine:    #2d6a4f;  /* midtone pine */
    --ho-emerald: #40916c;  /* light forest */
    --ho-mint:    #6ee7b7;  /* mint accent */
    --ho-orange:  #f26b1f;  /* hunter orange */
    --ho-amber:   #ff9a3c;  /* warm sunrise */
    --ho-gold:    #ffd68a;  /* sun highlight */
    --ho-cream:   #fff5e6;  /* sun center / chrome text */

    /* ---- Semantic role tokens (the unified system's working vocabulary) ---- */
    --ho-ink:      #1d2a23;   /* primary text — warm near-black, green-tinted */
    --ho-ink-soft: #44524b;   /* secondary text */
    --ho-muted:    #6b7a72;   /* tertiary / captions */
    --ho-line:     #e7e1d4;   /* warm hairline border (replaces cool #e7e5e4) */
    --ho-line-soft:#f0ebe0;
    --ho-surface:  #ffffff;   /* card / panel surface */
    --ho-raised:   #fbf9f4;   /* faintly warm raised surface / striping */
    --ho-canvas:   #f5f2ea;   /* warm paper page background */
    --ho-tint:     #eef4ef;   /* faint forest tint (section fills, hovers) */
    --ho-tint-warm:#fdf4e7;   /* faint sunrise tint */

    --ho-radius:    14px;
    --ho-radius-sm: 10px;
    --ho-radius-lg: 20px;
    --ho-shadow-sm: 0 1px 2px rgba(27,67,50,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --ho-shadow-md: 0 10px 24px rgba(0,0,0,0.10);
    --ho-shadow-lg: 0 18px 44px rgba(8,21,43,0.16);

    /* ---- Sanctioned classification accents (wayfinding + variety) ----
       Heroes, library sections, and cards may lean on these. They ARE part of
       the system — not every surface must be forest green. */
    --acc-places:  #2d6a4f;   /* forest */
    --acc-fauna:   #2563eb;   /* blue */
    --acc-flora:   #16a34a;   /* green */
    --acc-geology: #78716c;   /* stone */
    --acc-fungi:   #ea580c;   /* orange */
    --acc-astro:   #4f46e5;   /* indigo */
    --acc-guides:  #d97706;   /* amber */
    --acc-water:   #0891b2;   /* cyan (water bodies) */

    /* Header banners — ONE knob for all page heroes. Navy to blend with the
       dark nav rail so the chrome reads as a single frame. Flip to
       var(--ho-forest) for green headers. */
    --ho-header-bg: #16264c;  /* logo navy */
}

/* ---- Header: warm off-white with a hunter-orange trail stripe ---- */
.siteHeader {
    background: #fffaf2 !important;
    border-bottom: 1px solid #e7dccb !important;
    border-top: 3px solid var(--ho-orange) !important;
    box-shadow: 0 1px 0 rgba(27, 67, 50, 0.04) !important;
}
/* Drawer toggle — forest, fills on hover */
.siteHeader .siteHeader-drawer-toggle {
    background: #ffffff !important;
    border-color: var(--ho-pine) !important;
    color: var(--ho-forest) !important;
}
.siteHeader .siteHeader-drawer-toggle:hover {
    background: var(--ho-forest) !important;
    color: #ffffff !important;
}
/* Right-side items — warm hover instead of cool stone */
.siteHeader .siteHeader-item:hover {
    background: #f7efe2 !important;
    border-color: #ead9bf !important;
    color: var(--ho-forest) !important;
}

/* ---- Nav rail: dark navy → forest "expedition" panel ----
   Atlas WorkspaceDrawer sets the panel background to #fff at
   `.ws-drawer-host .ws-drawer-panel`. The Outdoors layout adds the
   `ho-drawer` class, so this 3-class selector wins on specificity. */
.ws-drawer-host.ho-drawer .ws-drawer-panel {
    background: linear-gradient(180deg, var(--ho-night) 0%, #143a37 58%, #0f3d2e 100%);
    /* Faint topographic contour rings — emanate from corners like a peak.
       Very low opacity so cream nav text stays crisp. */
    background-image:
        linear-gradient(180deg, var(--ho-night) 0%, #143a37 58%, #0f3d2e 100%),
        repeating-radial-gradient(circle at 118% 4%, rgba(110, 231, 183, 0.05) 0 1px, transparent 1px 26px),
        repeating-radial-gradient(circle at -12% 94%, rgba(255, 214, 138, 0.045) 0 1px, transparent 1px 30px);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
/* Desktop mode draws an ID-scoped light border-right — override its color. */
.ws-drawer-host.ho-drawer .ws-drawer-panel {
    border-right-color: rgba(255, 255, 255, 0.06) !important;
}
/* Thin dark scrollbar so the rail reads as one dark surface. */
.ws-drawer-host.ho-drawer .ws-drawer-panel::-webkit-scrollbar { width: 8px; }
.ws-drawer-host.ho-drawer .ws-drawer-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

/* ---- Capture FAB (Atlas): green → hunter orange (the "capture" action) ---- */
.atlas-capture-fab {
    background: linear-gradient(135deg, var(--ho-amber) 0%, var(--ho-orange) 100%) !important;
    box-shadow: 0 8px 18px rgba(242, 107, 31, 0.42), 0 2px 4px rgba(0, 0, 0, 0.10) !important;
}
.atlas-capture-fab:hover {
    box-shadow: 0 12px 24px rgba(242, 107, 31, 0.5), 0 3px 6px rgba(0, 0, 0, 0.12) !important;
}

/* ===================================================================
   UNIFIED COMPONENT KIT
   Shared vocabulary every consumer surface draws from. The goal is a
   warm, cohesive, "field guide" feel — never the cold white-washed SaaS
   look. Brand palette governs chrome + components; heroes & classification
   surfaces may use the sanctioned --acc-* accents for standout/variety.
   =================================================================== */

/* ---- Typography: warm ink instead of pure black/cool slate ---- */
.ho-scope, .ho-page { color: var(--ho-ink); }
.ho-eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--ho-pine);
}
.ho-eyebrow--accent { color: var(--acc, var(--ho-orange)); }

/* Section header: an eyebrow + title + optional rule, used to break up the
   long entity/detail pages so they read as chapters, not a white wall. */
.ho-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin: 0 0 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--ho-line);
}
.ho-section-title {
    margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em;
    color: var(--ho-ink);
    display: inline-flex; align-items: center; gap: 0.55rem;
}
.ho-section-title > i { color: var(--acc, var(--ho-pine)); }

/* ---- Card: warm surface, soft shadow, accent-aware ---- */
.ho-card {
    background: var(--ho-surface);
    border: 1px solid var(--ho-line);
    border-radius: var(--ho-radius);
    box-shadow: var(--ho-shadow-sm);
    transition: transform 0.14s ease, box-shadow 0.18s ease, border-color 0.14s ease;
}
.ho-card--interactive { cursor: pointer; }
.ho-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--ho-shadow-md);
    border-color: color-mix(in srgb, var(--acc, var(--ho-pine)) 45%, var(--ho-line));
}
/* A card with a tinted "ranger" header strip in its accent color. */
.ho-card-accent { border-top: 3px solid var(--acc, var(--ho-pine)); }

/* ---- Panel surface: a warm framed block (for content sections) ---- */
.ho-panel {
    background: var(--ho-surface);
    border: 1px solid var(--ho-line);
    border-radius: var(--ho-radius);
    box-shadow: var(--ho-shadow-sm);
    padding: 1.1rem 1.25rem;
}
.ho-panel--tinted {
    background: linear-gradient(180deg, var(--ho-tint) 0%, var(--ho-surface) 60%);
}

/* ---- Chips / pills (filters, tags) ---- */
.ho-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.32rem 0.75rem;
    background: var(--ho-surface);
    border: 1px solid var(--ho-line);
    border-radius: 999px;
    color: var(--ho-ink-soft);
    font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
    transition: all 0.14s ease;
}
.ho-chip:hover { border-color: var(--ho-pine); color: var(--ho-forest); background: var(--ho-tint); }
.ho-chip.is-active {
    background: var(--ho-pine); border-color: var(--ho-pine); color: #fff;
    box-shadow: 0 2px 8px rgba(45,106,79,0.28);
}

/* ---- Badges ---- */
.ho-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.18rem 0.6rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.ho-badge--forest { background: var(--ho-tint); color: var(--ho-forest); }
.ho-badge--gold   { background: linear-gradient(135deg,#fde68a,#f59e0b); color:#78350f; }
.ho-badge--accent { background: color-mix(in srgb, var(--acc, var(--ho-orange)) 16%, white); color: color-mix(in srgb, var(--acc, var(--ho-orange)) 70%, black); }

/* ---- Accent button (orange — the disciplined CTA / capture / hero action) ---- */
.ho-btn-accent {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.25rem; border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--ho-orange) 0%, var(--ho-amber) 100%);
    color: #08152b; font-weight: 800; font-size: 1rem; letter-spacing: 0.01em;
    cursor: pointer; text-decoration: none;
    box-shadow: 0 8px 22px rgba(242,107,31,0.38);
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.ho-btn-accent:hover { transform: translateY(-1px); color:#08152b; box-shadow: 0 12px 30px rgba(242,107,31,0.5); }

/* ---- Hero: rich, expressive header band. Defaults to the dawn gradient;
   per-surface heroes override --acc / background for standout variety. ---- */
.ho-hero {
    position: relative;
    border-radius: 0;               /* square header banners */
    overflow: hidden;
    padding: 2.25rem 2rem;
    color: var(--ho-cream);
    background: var(--ho-header-bg);   /* solid brand header — uniform across the app */
}
.ho-hero > * { position: relative; z-index: 1; }
.ho-hero h1, .ho-hero .ho-hero-title {
    font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.5rem;
}
.ho-hero p, .ho-hero .ho-hero-sub { color: rgba(255,247,230,0.9); margin: 0; max-width: 60ch; }

/* ---- Warm up shared Bootstrap surfaces so nothing reads cold/white-washed ---- */
.card {
    border-color: var(--ho-line);
    border-radius: var(--ho-radius-sm);
}
hr { border-color: var(--ho-line); opacity: 1; }

/* Soft, brand-tinted focus ring on inputs everywhere (matches atlas-theme). */
.form-control:focus, .form-select:focus {
    border-color: var(--ho-pine);
    box-shadow: 0 0 0 0.2rem rgba(45,106,79,0.18);
}

/* ===================================================================
   SIDE-PANEL + DIALOG CHROME (Atlas SidebarHost + Syncfusion SfDialog)
   One set of overrides brands the chrome of all ~35 PanelService panels +
   dialogs. The Atlas component ships blue (#0d6efd) header icons / back
   buttons on a cool-gray header; rebrand to warm forest. Color only — no
   layout, no grid internals (Syncfusion grids are fragile). !important is
   needed because the package's inline <style> renders after app.css. */
.sidebar-header {
    background: linear-gradient(180deg, var(--ho-tint) 0%, var(--ho-raised) 100%) !important;
    border-bottom: 1px solid var(--ho-line) !important;
}
.sidebar-header-icon { color: var(--ho-pine) !important; }
.sidebar-header-title { color: var(--ho-ink) !important; }
.sidebar-back-btn { color: var(--ho-pine) !important; }
.sidebar-back-btn:hover { background-color: var(--ho-tint) !important; color: var(--ho-forest) !important; }
.sidebar-action-btn:hover, .sidebar-close-btn:hover { background-color: var(--ho-tint) !important; color: var(--ho-forest) !important; }
.sidebar-action-btn.active { background-color: var(--ho-tint) !important; color: var(--ho-pine) !important; }
.sidebar-action-btn:focus, .sidebar-close-btn:focus, .sidebar-back-btn:focus { outline-color: var(--ho-pine) !important; }

/* Syncfusion dialog (SfDialog) header — warm brand strip, forest title.
   Buttons inside inherit the brand .e-primary rule below. Dialogs are not
   grids, so this is safe. */
.e-dialog .e-dlg-header-content {
    background: linear-gradient(180deg, var(--ho-tint) 0%, var(--ho-surface) 100%);
    border-bottom: 1px solid var(--ho-line);
}
.e-dialog .e-dlg-header, .e-dialog .e-dlg-header * { color: var(--ho-ink); }

/* Syncfusion PRIMARY buttons → brand forest (used in dialogs, pickers, toolbars).
   Scoped to .e-primary so default/flat Syncfusion buttons and grid controls are
   untouched. */
.e-btn.e-primary, .e-css.e-btn.e-primary {
    background-color: var(--ho-pine);
    border-color: var(--ho-pine);
}
.e-btn.e-primary:hover, .e-css.e-btn.e-primary:hover {
    background-color: var(--ho-forest);
    border-color: var(--ho-forest);
}

/* ===================================================================
   AUTH PAGES (Atlas AuthLayout — login / register / forgot, etc.)
   Consumer-only rebrand: the package ships a muddy gray branding panel +
   an oversized logo + cold borders. Override here (app.css loads on auth
   pages) so the Outdoors auth screens carry the brand WITHOUT editing the
   reusable Atlas package. Static CSS — shows on refresh, no restart.
   =================================================================== */
/* SINGLE CENTERED COLUMN over a real outdoors photo: logo badge on top, white
   form card centered below. The package's two-column split looks lopsided once
   the side panel is transparent (logo strands in a corner), so we collapse it to
   one balanced, centered stack. */
.auth-split {
    position: relative;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh;
    padding: 2.5rem 1rem;
    background:
        linear-gradient(160deg, rgba(8,21,43,0.52) 0%, rgba(27,67,50,0.34) 52%, rgba(8,21,43,0.60) 100%),
        url('/images/backgrounds/sitebackgroundold.jpg');
    background-size: cover;
    background-position: center;
}
.auth-split::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse at 50% 115%, rgba(242,107,31,0.26) 0%, transparent 55%);
}
.auth-split > * { position: relative; z-index: 1; }

/* Hide the desktop side panel; reuse the top branding block as the centered logo. */
.auth-branding { display: none !important; }
.auth-branding-mobile {
    display: block !important;
    background: transparent !important;
    backdrop-filter: none !important;
    text-align: center;
    padding: 0 1rem 1.25rem !important;
    width: 100%;
    max-width: 440px;
}
.auth-branding-mobile img {
    height: auto !important;
    max-height: 90px !important;
    max-width: 230px !important;
    margin: 0 auto 0.75rem !important;
    background: #ffffff;
    padding: 0.55rem 0.85rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(8,21,43,0.45);
}
.auth-branding-mobile .brand-name {
    color: #ffffff !important; font-weight: 700;
    text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.auth-branding-mobile .brand-tagline {
    color: rgba(255,255,255,0.88) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}

/* Form area — centered, not full-height-stretched (so the card sits in the
   middle of the photo, not glued to the top edge). */
.auth-form-area {
    flex: 0 0 auto !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 1rem !important;
}
/* Form card — clean white, centered, floating on the landscape with a deep lift
   shadow and a thin hunter-orange trail-stripe along the top. */
.auth-container {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.55) !important;
    border-top: 3px solid var(--ho-orange, #f26b1f) !important;
    background: #ffffff !important;
    box-shadow: 0 26px 64px rgba(8,21,43,0.5) !important;
}
.auth-container:not(.wide) { max-width: 430px !important; }
/* "Back to Hang Outdoors" sits on the photo below the card — keep it legible. */
.auth-back-link, .auth-back-link a { color: #ffffff !important; text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
.auth-container .form-control { border-color: var(--ho-line, #e7e1d4) !important; }
.auth-container h1 { color: var(--ho-ink, #1d2a23) !important; }
.auth-container hr,
.auth-container .auth-footer,
.auth-divider::before, .auth-divider::after { border-color: var(--ho-line, #e7e1d4) !important; }
.auth-container .alert-info { background: var(--ho-tint, #eef4ef) !important; color: var(--ho-forest, #1b4332) !important; }
/* Sign-up call-to-action box on the login page (uses Bootstrap .bg-light = cold). */
.auth-container .signup-cta, .auth-form-area .bg-light {
    background: var(--ho-tint-warm, #fdf4e7) !important;
    border-color: var(--ho-line, #e7e1d4) !important;
}