@import 'VetOS.Client.ka3gs9crch.bundle.scp.css';

/* /Components/Account/Pages/Login.razor.rz.scp.css */
.field[b-mb24fs2nud] {
    margin-top: 8px;
    margin-bottom: 20px;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* App shell — VetOS × Apple visual pass.
   --app-topnav-height lives in wwwroot/nimbus.css since Blazor scoped CSS
   rewrites :root selectors and the variable would otherwise be invisible
   to scoped components that reference it. */

/* Top nav — fixed, frosted parchment.
   Apple handoff: 52px tall, parchment with backdrop blur, single
   hairline bottom border, no shadow. The previous 0.85 alpha let scrolled
   content (Schedule-X events especially) read clearly through the
   backdrop, so the bar didn't *feel* sticky even though it was. Bumped
   to 0.96 — still picks up a hint of what's behind via the saturate blur
   without doubling as a translucent overlay. */
.app-topnav[b-nmi97w6lxy] {
    /* z-index 300 sits above Schedule-X's sticky week-header (z 100)
       and above the schedule slide-over panel (z 210), so the app
       shell always wins. The bar starts at top: 0 with height 52px;
       slide-overs and modals open below it (top: 52px) so visually
       the topnav stays clean even though its z stack-context is on
       top of everything else. */
    position: fixed; top: 0; left: 0; right: 0; z-index: 300;
    height: var(--app-topnav-height);
    display: flex; align-items: center; gap: 1.25rem;
    padding: 0 20px;
    background: rgba(245, 245, 247, 0.96);
    backdrop-filter: var(--blur-frost); -webkit-backdrop-filter: var(--blur-frost);
    border-bottom: 1px solid var(--color-hairline);
}

.app-brand[b-nmi97w6lxy] { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.app-brand-icon[b-nmi97w6lxy] {
    width: 28px; height: 28px;
    background: var(--color-ink);
    color: var(--color-canvas);
    font-family: var(--font-display);
    font-weight: 700; font-size: 13px; letter-spacing: -0.05em;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.app-brand-text[b-nmi97w6lxy] {
    font-family: var(--font-display);
    font-size: 14px; font-weight: 600;
    color: var(--color-ink);
    letter-spacing: -0.224px;
    line-height: 1.15;
}
.app-brand-dot[b-nmi97w6lxy] { color: var(--color-primary); }

/* Top-nav global search now lives in the GlobalSearch WASM island
   (VetOS.Client/Components/Search/GlobalSearch.razor + .razor.css). Its root
   (.gsx-root) carries the flex:1 centering the .app-topnav-search div used to
   provide, so the pill stays centred between the brand and the avatar. */

.app-topnav-right[b-nmi97w6lxy] { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.app-topnav-right .ava[b-nmi97w6lxy] {
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
}
.app-topnav-right .ava:hover[b-nmi97w6lxy] { border-color: var(--color-primary); }

/* Settings cog — relocated from the sidebar to sit left of the avatar.
   Mirrors the 28px avatar footprint + pill radius + primary hover ring. */
.app-topnav-icon[b-nmi97w6lxy] {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    color: var(--color-ink-muted-48);
    border: 1px solid transparent;
    text-decoration: none;
}
.app-topnav-icon:hover[b-nmi97w6lxy] {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Left sidebar — fixed, opaque white. */
.app-sidebar[b-nmi97w6lxy] {
    position: fixed;
    top: var(--app-topnav-height);
    left: 0; bottom: 0;
    width: 232px;
    background: var(--color-canvas);
    border-right: 1px solid var(--color-hairline);
    overflow-y: auto;
    z-index: 50;
    padding: 0;
    display: flex; flex-direction: column;
}

/* Main content — parchment background, no max-width clamp by default
   (full-width slabs are part of the new aesthetic; pages can clamp via
   their own container). */
.app-main[b-nmi97w6lxy] {
    margin-left: 232px;
    position: relative;
    min-height: 100vh;
    background: var(--color-canvas-parchment);
}
.app-content[b-nmi97w6lxy] {
    max-width: 1280px;
    margin: 0 auto;
    padding: calc(var(--app-topnav-height) + 24px) 28px 48px;
}

@media (max-width: 900px) {
    .app-sidebar[b-nmi97w6lxy] { display: none; }
    .app-main[b-nmi97w6lxy] { margin-left: 0; }
    .app-content[b-nmi97w6lxy] { padding: calc(var(--app-topnav-height) + 12px) 16px 32px; }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar nav — VetOS × Apple visual pass.
   White surface, ink text, sky-tinted active fill (no left bar, no shadow). */

.nav-rail[b-zo8bdd0uc8] { display: flex; flex-direction: column; height: 100%; min-width: 0; padding: 8px 0 16px; }

.nav-group[b-zo8bdd0uc8] { margin-bottom: 4px; }
/* Sentence-case nav section labels (Nimbus default; per Issue 55, ALL-CAPS
   transform caused a prerender → hydration content jump because the
   scoped CSS hadn't loaded yet at the prerender pass). Keep the source
   strings as title-case and render them as-is. */
.nav-group-label[b-zo8bdd0uc8] {
    padding: 16px 20px 4px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0;
    color: var(--color-ink-muted-48);
}

[b-zo8bdd0uc8] .nav-item {
    display: flex; align-items: center; gap: 10px;
    width: calc(100% - 20px);
    margin: 1px 10px;
    padding: 7px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--color-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.2px;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, color 0.12s ease;
}
[b-zo8bdd0uc8] .nav-item:hover:not(.nav-active) {
    background: var(--color-canvas-parchment);
    color: var(--color-ink);
}
[b-zo8bdd0uc8] .nav-item:focus-visible {
    outline: 2px solid var(--color-primary-focus);
    outline-offset: -2px;
    background: var(--color-canvas-parchment);
}
[b-zo8bdd0uc8] .nav-item.nav-active {
    background: rgba(0, 102, 204, 0.08);
    color: var(--color-primary);
    font-weight: 600;
}
[b-zo8bdd0uc8] .nav-icon {
    width: 15px; height: 15px;
    color: currentColor;
    stroke-width: 1.75;
    flex-shrink: 0;
}
[b-zo8bdd0uc8] .nav-active .nav-icon { color: var(--color-primary); }

.nav-footer[b-zo8bdd0uc8] {
    margin-top: auto;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--color-divider-soft);
}
.nav-logout[b-zo8bdd0uc8] {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 7px 12px;
    border: 0; border-radius: 7px;
    background: transparent;
    color: var(--color-ink-muted-48);
    font-family: inherit;
    font-size: 13px; font-weight: 400; letter-spacing: -0.2px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.nav-logout:hover[b-zo8bdd0uc8] {
    background: rgba(193, 18, 31, 0.06);
    color: var(--color-danger);
}
.nav-version[b-zo8bdd0uc8] {
    padding: 12px 12px 0;
    font-size: 10px;
    color: var(--color-ink-muted-48);
    line-height: 1.5;
}