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

/* Pinned bottom nav group (RoleNavBottom: My account / What's new / App feedback) — sits under the
   scrolling sections in the dark console sidebar, separated by a hairline. PublicChrome (anonymous
   visitors only) never renders RoleNavBottom, so there is no public-drawer variant to style. */
.mud-drawer .lrr-nav-bottom-wrap {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 6px 0;
}

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

/* 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);
}
/* Phones/tablets: fully opaque — at 92% the page visibly slid behind the bar while scrolling
   (owner report 2026-09-29). The frosted look stays on large screens. */
@media (max-width: 959.98px) {
    .lrr-appbar-public {
        background: rgb(253, 246, 238) !important;
        backdrop-filter: none;
    }
}

/* ── Console mobile top bar (below lg): solid, theme-aware, never see-through ─ */
.lrr-appbar-console {
    background: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
    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; }
}

/* ── Static account pages (no circuit: Identity pages under [ExcludeFromInteractiveRouting]) ──
   MudBlazor's own responsive drawer only reveals itself below the lg breakpoint once its JS
   breakpoint watcher clears the library's own "mud-drawer--initial" class — which never happens
   without a circuit, so `.mud-drawer-responsive.mud-drawer-lg.mud-drawer--initial` stays
   `display:none !important` there (see MudBlazor.min.css). static-nav.js toggles OUR OWN class
   instead; `_open` already renders true (the interactive breakpoint correction in
   ConsoleChrome.OnAfterRenderAsync never runs on a static page either), so the drawer is already
   positioned at left:0 by MudBlazor's own `.mud-drawer--open` rule — only `display` needs
   restoring here. */
@media (max-width: 1279.98px) {
    .mud-drawer.mud-drawer-responsive.mud-drawer-lg.mud-drawer--initial.lrr-drawer-static-open {
        display: block !important;
    }
}

/* Our own tap-to-close scrim for the static drawer (MudBlazor's built-in overlay is Razor-gated
   the same way the drawer is, so it isn't reliable without a circuit either). Sits above the
   mobile app bar, below the drawer (z-index: calc(appbar + 2) — see MudBlazor.min.css). */
.lrr-static-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: calc(var(--mud-zindex-appbar, 1100) + 1);
}

.lrr-static-nav-overlay.lrr-static-nav-overlay-open {
    display: block;
}

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

/* ── Show-password eye (js/password-toggle.js, BACKLOG §29) ──────────────────────────────── */
.lrr-pw-wrap { position: relative; }
.lrr-pw-wrap .auth-input { padding-right: 44px; }
.lrr-pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--mud-palette-text-secondary, #6b5747);
}
.lrr-pw-toggle svg { pointer-events: none; }
.lrr-pw-toggle:hover { color: var(--mud-palette-primary, #2e6b53); }
.lrr-pw-toggle:focus-visible { outline: 2px solid var(--mud-palette-primary, #2e6b53); outline-offset: 2px; border-radius: 8px; }

/* ── Passkeys (js/passkeys.js) ─────────────────────────────────────────────── */
.lrr-passkey-status { min-height: 1.2em; margin: 8px 0 0; font-size: 13px; color: var(--mud-palette-text-secondary); text-align: center; }
.lrr-passkey-status.lrr-passkey-error { color: var(--mud-palette-error); }
.lrr-passkey-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--mud-palette-text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.lrr-passkey-divider::before, .lrr-passkey-divider::after { content: ""; flex: 1; height: 1px; background: var(--mud-palette-lines-default); }

/* ── What's new (release notes) ─────────────────────────────────────────────── */
.lrr-whats-new-pill { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--mud-palette-secondary); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; vertical-align: middle; }
.lrr-whats-new-list { margin: 8px 0 0; padding-left: 20px; }
.lrr-whats-new-list li { margin: 6px 0; line-height: 1.5; }
.lrr-whats-new-list li p { margin: 0; }

/* ── Rich-text editor (Quill): token chips, plain-language header names, single-line mode ── */
.ql-editor .lrr-token {
    display: inline-block;
    padding: 0 .5em;
    margin: 0 .05em;
    border-radius: 999px;
    background: #E7EFE5;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    font-weight: 600;
    font-size: .92em;
    line-height: 1.55;
    white-space: nowrap;
    user-select: none;
    cursor: default;
}
.ql-editor .lrr-token-block {
    display: block;
    margin: .5em 0;
    padding: .5em .9em;
    border-radius: 8px;
    border: 1px dashed var(--mud-palette-primary);
    background: #E7EFE5;
    color: var(--mud-palette-primary);
    font-weight: 600;
    user-select: none;
    cursor: default;
}
.ql-editor .lrr-token-block::before { content: "\2630\00a0"; }

/* The header picker says what it does, never "H2/H3". */
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before { content: "Normal text"; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: "Heading"; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: "Subheading"; }
.ql-snow .ql-picker.ql-header { width: 9.5em; }

.quill-single-line .ql-container.ql-snow { border: 1px solid var(--mud-palette-lines-inputs); border-radius: 4px; }
.quill-single-line .ql-editor { min-height: 0; padding: 10px 12px; white-space: nowrap; overflow-x: auto; }
.quill-single-line .ql-editor p { margin: 0; }

/* ── Row action buttons in list tables (My applications): side by side, labels never broken ──
   A narrow action column used to squeeze paired buttons into a stack and split labels like
   "Mark as done" over two lines (owner, 2026-09-30). The table gives the column the width it
   needs instead. On phones MudTable renders each row as a card, where wrapping is fine. */
.lrr-row-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }
.lrr-row-actions .mud-button-root { white-space: nowrap; }
@media (max-width: 599.98px) {
    .lrr-row-actions { flex-wrap: wrap; }
}