/* /Layout/MainLayout.razor.rz.scp.css */
/* Mobile-first shell. Min target is 375px width per FEATURE_SPECS § Final integration. */
.needlr-shell[b-o4l6cl7u00] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #fafafa;
    color: #1f1f1f;
    /* Bottom nav reserves space — keep main from underlapping. */
    padding-bottom: 64px;
}

.needlr-top[b-o4l6cl7u00] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #ffffff;
    border-bottom: 1px solid #e6e6e6;
}

.needlr-top-inner[b-o4l6cl7u00] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

.needlr-brand[b-o4l6cl7u00] {
    font-weight: 700;
    font-size: 1.25rem;
    color: #111;
    text-decoration: none;
    letter-spacing: -0.01em;
}

/* Top nav: hidden on mobile (the bottom nav covers it), shown on tablet+. */
.needlr-top-nav[b-o4l6cl7u00] { display: none; gap: 1rem; align-items: center; }
.needlr-top-nav[b-o4l6cl7u00]  .needlr-link {
    color: #555;
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
}
.needlr-top-nav[b-o4l6cl7u00]  .needlr-link:hover { background: #f0f0f0; color: #111; }
.needlr-top-nav[b-o4l6cl7u00]  .needlr-link.active { color: #111; font-weight: 600; }
.needlr-top-nav[b-o4l6cl7u00]  .needlr-link.primary {
    background: #111; color: #fff;
}
.needlr-top-nav[b-o4l6cl7u00]  .needlr-link.primary:hover { background: #333; }

.needlr-main[b-o4l6cl7u00] {
    flex: 1;
    padding: 1rem;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

.needlr-footer[b-o4l6cl7u00] {
    text-align: center;
    color: #888;
    font-size: 0.8rem;
    padding: 1rem;
    /* Mobile: hidden behind the bottom nav anyway, but here for tablet+. */
    display: none;
}

/* Mobile bottom nav. */
.needlr-bottom-nav[b-o4l6cl7u00] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.needlr-bottom-nav[b-o4l6cl7u00]  .needlr-bottom-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #888;
    font-size: 0.7rem;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    flex: 1;
    text-align: center;
}
.needlr-bottom-nav[b-o4l6cl7u00]  .needlr-bottom-link.active { color: #111; font-weight: 600; }
.needlr-bottom-nav[b-o4l6cl7u00]  .needlr-bottom-link span:first-child { font-size: 1.2rem; }

@media (min-width: 768px) {
    .needlr-shell[b-o4l6cl7u00] { padding-bottom: 0; }
    .needlr-top-nav[b-o4l6cl7u00] { display: flex; }
    .needlr-bottom-nav[b-o4l6cl7u00] { display: none; }
    .needlr-footer[b-o4l6cl7u00] { display: block; }
    .needlr-main[b-o4l6cl7u00] { padding: 1.5rem 2rem; }
}