/* LRR ARB global styles — 2026 redesign.
   The Material design system is provided by the MudBlazor theme (Theme/LrrTheme.cs);
   this file layers the warm earth-tone "look and feel" from the design handoff:
   Hanken Grotesk type, bold ink headings, warm surfaces, the dark forest console nav,
   focus rings, and a small set of reusable .lrr-* helpers. Account/Security (Identity
   Manage) area styles are inlined in ManageLayout.razor. */

/* ── Type ──────────────────────────────────────────────────────────────────── */
html, body {
    font-family: "Hanken Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--mud-palette-text-primary);
}

.mud-typography-h5, .mud-typography-h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

/* ── Reusable helpers ──────────────────────────────────────────────────────── */
.lrr-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mud-palette-secondary);
}

.lrr-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.lrr-pill .lrr-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

/* Surface cards: soft warm shadow + lift on hover. */
.lrr-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 12px 30px rgba(40, 35, 25, .05);
    transition: transform .18s ease, box-shadow .18s ease;
}

.lrr-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(40, 35, 25, .12);
}

.lrr-stat-number {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.lrr-stat-number.lrr-accent { color: var(--mud-palette-secondary); }

/* ── Buttons: pill CTAs with colored shadow ────────────────────────────────── */
.mud-button-root.mud-button-filled {
    border-radius: 999px;
    text-transform: none;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: none;
}

.mud-button-root.mud-button-filled.mud-button-filled-primary {
    box-shadow: 0 8px 20px rgba(46, 107, 83, .22);
}

.mud-button-root.mud-button-filled.mud-button-filled-secondary {
    box-shadow: 0 10px 24px rgba(185, 96, 63, .24);
}

.mud-button-root.mud-button-outlined {
    border-radius: 999px;
    text-transform: none;
    font-weight: 700;
    border-width: 1.5px;
}

.mud-button-root.mud-button-text { text-transform: none; font-weight: 600; }

/* ── Focus ring (inputs) ───────────────────────────────────────────────────── */
.mud-input-control .mud-input.mud-input-focused {
    box-shadow: 0 0 0 3px rgba(46, 107, 83, .14);
    border-radius: 12px;
}

/* ── Tables: warm row hover + soft dividers ────────────────────────────────── */
.mud-table-root .mud-table-row:hover > td {
    background: var(--mud-palette-background-gray);
}

/* ── Dark forest console drawer nav ────────────────────────────────────────── */
.mud-drawer .mud-navmenu {
    padding: 8px 10px;
}

.mud-drawer .mud-nav-link {
    color: #d9e4dc;
    border-radius: 12px;
    margin: 2px 0;
    font-weight: 600;
    font-size: 14.5px;
}

.mud-drawer .mud-nav-link .mud-nav-link-icon {
    color: #9fd9bd;
}

.mud-drawer .mud-nav-link:hover {
    background: #2A3A31;
    color: #fff;
}

/* Active link: a clearly-visible light-green tint over the dark forest sidebar, a bright green
   accent bar on the leading edge, and a bright icon — so the current page reads at a glance. */
/* Active link: a LIGHT pill (pale-green background + dark ink text) so the current page reads as
   "lit up" against the dark forest sidebar — the opposite of the surrounding dark rows. */
.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-nav-link.mud-nav-link-active {
    /* !important: MudBlazor's own `.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(...)` rule
       is more specific (0,5,0) and would otherwise win with a dull hover-grey background. */
    background: #E7EFE5 !important;
    color: var(--mud-palette-primary-darken) !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon,
.mud-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

/* Section labels in the dark drawer = small uppercase headers. */
.mud-drawer .lrr-navsection {
    padding: 16px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8aa496;
}

.mud-drawer .lrr-navsection:first-child { padding-top: 4px; }

/* Collapsible section HEADERS (MudNavGroup) — the direct-child link only, so nested links keep the
   normal nav styling. Uppercase label + expand chevron; a subtle hover shows they're clickable. */
.mud-drawer .mud-nav-group > .mud-nav-link {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 700;
    color: #a9c4b6;
}

.mud-drawer .mud-nav-group > .mud-nav-link:hover {
    background: #2A3A31;
    color: #fff;
}

.mud-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-icon { color: #a9c4b6; }

/* Admin surface: even darker sidebar (applied via .lrr-admin on the drawer). */
.mud-drawer.lrr-admin { background: #1a2620 !important; }

/* Public mobile drawer is light/warm (overrides the dark console nav styling). */
.mud-drawer.lrr-public-drawer { background: #fff !important; }
.mud-drawer.lrr-public-drawer .mud-nav-link { color: var(--mud-palette-text-primary); }
.mud-drawer.lrr-public-drawer .mud-nav-link .mud-nav-link-icon { color: var(--mud-palette-primary); }
.mud-drawer.lrr-public-drawer .mud-nav-link:hover { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); }
.mud-drawer.lrr-public-drawer .mud-nav-link.active,
.mud-drawer.lrr-public-drawer .mud-nav-link.mud-nav-link-active {
    background: #E7EFE5 !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}
.mud-drawer.lrr-public-drawer .mud-nav-link.active .mud-nav-link-icon,
.mud-drawer.lrr-public-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-icon { color: var(--mud-palette-primary) !important; }

/* ── Breadcrumbs (PageHeader trail) — small, quiet, warm ───────────────────── */
.lrr-crumbs .mud-breadcrumb-item,
.lrr-crumbs .mud-breadcrumb-separator {
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.lrr-crumbs .mud-breadcrumb-item a {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.lrr-crumbs .mud-breadcrumb-item a:hover { text-decoration: underline; }

/* ── AI assistant rich-text answers ────────────────────────────────────────── */
.lrr-ai-answer {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
}

.lrr-ai-answer p {
    margin: 0 0 10px;
}

.lrr-ai-answer p:last-child {
    margin-bottom: 0;
}

.lrr-ai-answer ul,
.lrr-ai-answer ol {
    margin: 0 0 10px;
    padding-left: 22px;
}

.lrr-ai-answer li {
    margin-bottom: 4px;
}

.lrr-ai-answer h1,
.lrr-ai-answer h2,
.lrr-ai-answer h3,
.lrr-ai-answer h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 12px 0 6px;
}

.lrr-ai-answer code {
    background: var(--mud-palette-background-gray, #f4efe6);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.8rem;
}

.lrr-ai-answer blockquote {
    border-left: 3px solid var(--mud-palette-primary);
    margin: 0 0 10px;
    padding: 2px 12px;
    color: var(--mud-palette-text-secondary);
}

/* ── Community map legend ──────────────────────────────────────────────────── */
.lrr-map-legend {
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--mud-palette-text-primary);
}

.lrr-map-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 7px;
    vertical-align: -1px;
}

/* ── Sticky translucent public header ──────────────────────────────────────── */
.lrr-appbar-public {
    background: rgba(253, 246, 238, .92) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ── Console shell: no top app bar on desktop (the sidebar carries the brand, nav
      and user controls, matching the design). The mobile-only app bar appears below
      the lg breakpoint, so only then must the content clear it. ───────────────── */
.lrr-console-main { padding-top: 0 !important; }
@media (max-width: 1279.98px) {
    .lrr-console-main { padding-top: var(--mud-appbar-height, 64px) !important; }
}
/* With no app bar on desktop, pin the full-height sidebar to the very top so it isn't
   offset down (which clipped the footer's "Public site" link off the bottom). */
@media (min-width: 1280px) {
    .mud-drawer.lrr-console-drawer { top: 0 !important; }
}

/* ── Sticky footer (design sweep D1): the chrome's main content is a full-viewport flex
      column whose content region grows, so on SHORT pages the footer still sits at the
      viewport bottom instead of floating mid-screen. box-sizing is border-box, so the
      app-bar padding-top is included in the 100vh. ─────────────────────────────────── */
.lrr-main-flex { display: flex; flex-direction: column; min-height: 100vh; }
.lrr-main-flex > .lrr-grow { flex: 1 1 auto; }

/* ── Validation / framework / error UI (unchanged) ─────────────────────────── */
.validation-message { color: var(--mud-palette-error, #b03a2e); }

.blazor-error-boundary {
    background: #b03a2e;
    padding: 1rem;
    color: white;
    border-radius: 12px;
}

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

#blazor-error-ui {
    color-scheme: light dark;
    background: #fbf1e4;
    color: #3a2a1f;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Auth pages (Identity static SSR forms) ────────────────────────────────── */
.auth-input {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--mud-palette-lines-inputs, #e2d4bf);
    border-radius: 12px;
    font-size: 14px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #3a2a1f);
    margin-bottom: 12px;
    box-sizing: border-box;
}

.auth-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary, #2e6b53);
    box-shadow: 0 0 0 3px rgba(46, 107, 83, .14);
}

.auth-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--mud-palette-text-secondary, #6b5747);
    margin-bottom: 4px;
    display: block;
}

.auth-links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; }