/* /Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-qkr6bi1ei4] {
    --app-background: #f3f5f7;
    --app-shell: #e5e7eb;
    --app-surface: #ffffff;
    --app-surface-muted: #eef1f5;
    --app-surface-tint: #fff1f1;
    --app-row: #fff7f7;
    --app-row-alt: #f4f6f8;
    --app-panel-heading: #2b2f33;
    --app-panel-heading-text: #ffffff;
    --app-sidebar: #171717;
    --app-sidebar-text: #f7f7f7;
    --app-sidebar-muted: #c9c9c9;
    --app-sidebar-active: #bb0000;
    --app-text: #1d2329;
    --app-muted: #64707d;
    --app-primary: #bb0000;
    --app-secondary: #666666;
    --app-accent: #111111;
    --app-danger: #b42318;
    --app-warning: #c47f17;
    --app-success: #1f7a4d;
    --app-border: #cfd5dc;
    --app-focus: #bb0000;
    --app-shadow: 0 10px 28px rgba(17, 17, 17, 0.08);
    --rz-primary: var(--app-primary);
    --rz-primary-light: color-mix(in srgb, var(--app-primary) 18%, white);
    --rz-primary-dark: color-mix(in srgb, var(--app-primary) 84%, black);
    --rz-on-primary: #ffffff;
    --rz-base-background-color: var(--app-background);
    --rz-base-50: var(--app-surface);
    --rz-base-100: var(--app-surface-muted);
    --rz-base-200: var(--app-border);
    --rz-base-300: var(--app-border);
    --rz-text-color: var(--app-text);
    --rz-text-secondary-color: var(--app-muted);
    --rz-body-color: var(--app-text);
    --rz-body-background-color: var(--app-background);
    --rz-grid-background-color: var(--app-surface);
    --rz-grid-header-background-color: var(--app-surface-muted);
    --rz-grid-cell-color: var(--app-text);
    --rz-input-background-color: var(--app-surface);
    --rz-input-border: var(--app-border);
    --rz-input-value-color: var(--app-text);
    --rz-dropdown-item-hover-background-color: var(--app-surface-muted);
    --rz-dropdown-item-selected-background-color: var(--rz-primary-light);
    --rz-card-background-color: var(--app-surface);
    --rz-card-color: var(--app-text);
    --rz-border-color: var(--app-border);
    background: var(--app-shell);
    color: var(--app-text);
    display: flex;
    min-height: 100vh;
}

.theme-bengals[b-qkr6bi1ei4] {
    --app-background: #fff7f2;
    --app-shell: #171717;
    --app-surface: #ffffff;
    --app-surface-muted: #fff0e8;
    --app-surface-tint: #ffe2d4;
    --app-row: #fff4ed;
    --app-row-alt: #f7f1ee;
    --app-panel-heading: #171717;
    --app-panel-heading-text: #ffffff;
    --app-sidebar: #111111;
    --app-sidebar-text: #ffffff;
    --app-sidebar-muted: #d6d0cc;
    --app-sidebar-active: #fb4f14;
    --app-text: #151515;
    --app-muted: #62544d;
    --app-primary: #fb4f14;
    --app-secondary: #111111;
    --app-accent: #fef3c7;
    --app-border: #edc5b4;
    --app-focus: #fb4f14;
    --app-shadow: 0 10px 28px rgba(17, 17, 17, 0.14);
    --rz-on-primary: #111111;
}

.theme-dark[b-qkr6bi1ei4] {
    --app-background: #111827;
    --app-shell: #05070a;
    --app-surface: #172033;
    --app-surface-muted: #22304a;
    --app-surface-tint: #163c3a;
    --app-row: #1d2940;
    --app-row-alt: #162033;
    --app-panel-heading: #0f766e;
    --app-panel-heading-text: #ecfeff;
    --app-sidebar: #080b10;
    --app-sidebar-text: #f8fafc;
    --app-sidebar-muted: #a8b5c5;
    --app-sidebar-active: #6ee7b7;
    --app-text: #f2f5f7;
    --app-muted: #bdc8d5;
    --app-primary: #6ee7b7;
    --app-secondary: #93c5fd;
    --app-accent: #facc15;
    --app-danger: #f87171;
    --app-warning: #fbbf24;
    --app-success: #34d399;
    --app-border: #3b4b63;
    --app-focus: #6ee7b7;
    --app-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
    --rz-on-primary: #06231d;
}

.theme-purple-light[b-qkr6bi1ei4] {
    --app-background: #fbf7ff;
    --app-shell: #ece4ff;
    --app-surface: #ffffff;
    --app-surface-muted: #f1eaff;
    --app-surface-tint: #eadcff;
    --app-row: #f7f0ff;
    --app-row-alt: #eef9f7;
    --app-panel-heading: #5b21b6;
    --app-panel-heading-text: #ffffff;
    --app-sidebar: #2e1065;
    --app-sidebar-text: #faf5ff;
    --app-sidebar-muted: #d8b4fe;
    --app-sidebar-active: #a78bfa;
    --app-text: #27213a;
    --app-muted: #6b5d82;
    --app-primary: #7c3aed;
    --app-secondary: #0f766e;
    --app-accent: #f59e0b;
    --app-border: #cdbdfa;
    --app-focus: #7c3aed;
    --app-shadow: 0 10px 28px rgba(91, 33, 182, 0.12);
}

.sidebar[b-qkr6bi1ei4] {
    background:
        radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--app-sidebar-active) 18%, transparent), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--app-sidebar) 88%, #10202a), var(--app-sidebar));
    border-right: 1px solid color-mix(in srgb, var(--app-sidebar-active) 24%, transparent);
    box-shadow: 10px 0 28px rgba(0, 0, 0, 0.16);
    flex: 0 0 5rem;
    overflow: hidden;
    position: sticky;
    top: 0;
    transition: flex-basis 160ms ease, width 160ms ease;
    width: 5rem;
    z-index: 3;
}

.sidebar:hover:not(:has(.nav-hover-suppressed))[b-qkr6bi1ei4],
.sidebar:focus-within:not(:has(.nav-hover-suppressed))[b-qkr6bi1ei4],
.sidebar:has(.nav-pinned)[b-qkr6bi1ei4] {
    flex-basis: 16rem;
    width: 16rem;
}

.main-panel[b-qkr6bi1ei4] {
    flex: 1;
    min-width: 0;
}

.top-row[b-qkr6bi1ei4] {
    align-items: center;
    background: var(--app-panel-heading);
    border-bottom: 1px solid var(--app-border);
    color: var(--app-panel-heading-text);
    display: flex;
    justify-content: space-between;
    min-height: 4.5rem;
    padding: 0.75rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 2;
}

.top-row h1[b-qkr6bi1ei4] {
    color: var(--app-panel-heading-text);
    font-size: 1.35rem;
    margin: 0;
}

.top-kicker[b-qkr6bi1ei4] {
    color: color-mix(in srgb, var(--app-panel-heading-text) 76%, transparent);
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0 0 0.1rem;
    text-transform: uppercase;
}

.theme-picker[b-qkr6bi1ei4] {
    min-width: 9.5rem;
}

.display-controls[b-qkr6bi1ei4] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.logout-button[b-qkr6bi1ei4] {
    align-items: center;
    background: color-mix(in srgb, var(--app-panel-heading-text) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--app-panel-heading-text) 28%, transparent);
    border-radius: 8px;
    color: var(--app-panel-heading-text);
    display: inline-flex;
    font-weight: 700;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0 0.8rem;
}

.logout-button:hover[b-qkr6bi1ei4],
.logout-button:focus[b-qkr6bi1ei4] {
    background: color-mix(in srgb, var(--app-primary) 36%, transparent);
    border-color: var(--app-primary);
}

.content[b-qkr6bi1ei4] {
    background: var(--app-background);
    padding: 1.5rem;
}

.style-cards[b-qkr6bi1ei4] {
    --app-shadow: 0 16px 34px color-mix(in srgb, var(--app-sidebar) 18%, transparent);
}

.style-cards .content[b-qkr6bi1ei4] {
    padding: 1.25rem;
}

.style-contrast[b-qkr6bi1ei4] {
    --app-border: color-mix(in srgb, var(--app-primary) 38%, var(--app-text));
    --app-shadow: 0 10px 0 color-mix(in srgb, var(--app-primary) 24%, transparent);
}

.style-contrast .top-row[b-qkr6bi1ei4] {
    border-bottom: 3px solid var(--app-primary);
}

.style-contrast .sidebar[b-qkr6bi1ei4] {
    border-right-width: 3px;
}

.style-compact .top-row[b-qkr6bi1ei4],
.style-compact .brand-row[b-qkr6bi1ei4] {
    min-height: 3.9rem;
}

.style-compact .content[b-qkr6bi1ei4] {
    padding: 1rem;
}

@media (max-width: 760px) {
    .app-shell[b-qkr6bi1ei4] {
        display: block;
    }

    .sidebar[b-qkr6bi1ei4] {
        border-bottom: 1px solid var(--app-border);
        border-right: 0;
        overflow: visible;
        position: relative;
        top: auto;
        width: 100%;
        flex-basis: auto;
    }

    .sidebar:hover:not(:has(.nav-hover-suppressed))[b-qkr6bi1ei4],
    .sidebar:focus-within:not(:has(.nav-hover-suppressed))[b-qkr6bi1ei4],
    .sidebar:has(.nav-pinned)[b-qkr6bi1ei4] {
        flex-basis: auto;
        width: 100%;
    }

    .top-row[b-qkr6bi1ei4] {
        align-items: flex-start;
        gap: 0.75rem;
        flex-direction: column;
        position: relative;
    }

    .display-controls[b-qkr6bi1ei4],
    .theme-picker[b-qkr6bi1ei4] {
        width: 100%;
    }

    .logout-button[b-qkr6bi1ei4] {
        justify-content: center;
        width: 100%;
    }

    .content[b-qkr6bi1ei4] {
        padding: 1rem;
    }

    .style-cards .content[b-qkr6bi1ei4],
    .style-compact .content[b-qkr6bi1ei4] {
        padding: 0.75rem;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.brand-row[b-zgn3mlq4gz] {
    align-items: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-sidebar-text) 9%, transparent), transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--app-sidebar-text) 14%, transparent);
    display: flex;
    min-height: 5.5rem;
}

.container-fluid[b-zgn3mlq4gz] {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 0 1rem;
}

.navbar-brand[b-zgn3mlq4gz] {
    align-items: center;
    color: var(--app-sidebar-text);
    display: flex;
    font-size: 1.15rem;
    font-weight: 800;
    gap: 0.55rem;
    min-width: 0;
    text-decoration: none;
}

.navbar-brand.active[b-zgn3mlq4gz],
.navbar-brand:hover[b-zgn3mlq4gz],
.navbar-brand:focus[b-zgn3mlq4gz] {
    color: var(--app-sidebar-text);
}

.brand-mark[b-zgn3mlq4gz] {
    align-items: center;
    background: transparent;
    border-radius: 6px;
    display: inline-flex;
    flex: 0 0 3rem;
    height: 3rem;
    justify-content: center;
    overflow: hidden;
}

.brand-mark img[b-zgn3mlq4gz] {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.brand-name[b-zgn3mlq4gz],
.nav-text[b-zgn3mlq4gz],
.nav-section-title[b-zgn3mlq4gz] {
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 140ms ease, transform 140ms ease;
    white-space: nowrap;
}

.pin-toggle[b-zgn3mlq4gz],
.menu-toggle[b-zgn3mlq4gz] {
    align-items: center;
    background: color-mix(in srgb, var(--app-sidebar-text) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--app-sidebar-text) 24%, transparent);
    border-radius: 6px;
    color: var(--app-sidebar-text);
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    width: 2.25rem;
}

.pin-toggle:hover[b-zgn3mlq4gz],
.pin-toggle:focus[b-zgn3mlq4gz],
.menu-toggle:hover[b-zgn3mlq4gz],
.menu-toggle:focus[b-zgn3mlq4gz] {
    background: color-mix(in srgb, var(--app-sidebar-active) 32%, transparent);
    border-color: var(--app-sidebar-active);
    color: var(--app-sidebar-text);
}

.pin-toggle.pinned[b-zgn3mlq4gz] {
    background: color-mix(in srgb, var(--app-sidebar-active) 34%, transparent);
    border-color: var(--app-sidebar-active);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--app-sidebar-active) 18%, transparent);
    color: var(--app-sidebar-text);
}

.pin-toggle[b-zgn3mlq4gz]  .rz-icon {
    transition: transform 140ms ease;
}

.pin-toggle.pinned[b-zgn3mlq4gz]  .rz-icon {
    transform: rotate(-45deg);
}

.nav[b-zgn3mlq4gz] {
    gap: 0.95rem;
    padding: 0.9rem;
}

.nav-slide[b-zgn3mlq4gz] {
    min-height: 0;
}

.nav-section[b-zgn3mlq4gz] {
    border-bottom: 1px solid color-mix(in srgb, var(--app-sidebar-text) 11%, transparent);
    display: grid;
    gap: 0.45rem;
    padding-bottom: 0.95rem;
}

.nav-section:last-child[b-zgn3mlq4gz] {
    border-bottom: 0;
}

.nav-section-title[b-zgn3mlq4gz] {
    color: color-mix(in srgb, var(--app-sidebar-text) 58%, transparent);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0;
    padding: 0 0.35rem;
    text-transform: uppercase;
}

.nav-link[b-zgn3mlq4gz] {
    --nav-accent: var(--app-sidebar-active);
    align-items: center;
    background: color-mix(in srgb, var(--app-sidebar-text) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--app-sidebar-text) 10%, transparent);
    border-radius: 8px;
    color: var(--app-sidebar-muted) !important;
    display: flex;
    font-weight: 700;
    gap: 0.65rem;
    min-height: 3rem;
    overflow: hidden;
    padding: 0 0.55rem;
    position: relative;
    text-decoration: none !important;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.nav-link[b-zgn3mlq4gz]::before {
    background: var(--nav-accent);
    border-radius: 0 999px 999px 0;
    content: "";
    height: 1.55rem;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 140ms ease;
    width: 0.18rem;
}

.nav-dashboard[b-zgn3mlq4gz] {
    --nav-accent: #4fd1c5;
}

.nav-calendar[b-zgn3mlq4gz] {
    --nav-accent: #f6ad55;
}

.nav-chores[b-zgn3mlq4gz] {
    --nav-accent: #68d391;
}

.nav-projects[b-zgn3mlq4gz] {
    --nav-accent: #90cdf4;
}

.nav-recipes[b-zgn3mlq4gz] {
    --nav-accent: #f6e05e;
}

.nav-events[b-zgn3mlq4gz] {
    --nav-accent: #fc8181;
}

.nav-family[b-zgn3mlq4gz] {
    --nav-accent: #f687b3;
}

.nav-icon[b-zgn3mlq4gz] {
    align-items: center;
    background: color-mix(in srgb, var(--nav-accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--nav-accent) 36%, transparent);
    border-radius: 7px;
    color: var(--nav-accent);
    display: inline-flex;
    flex: 0 0 2.05rem;
    height: 2.05rem;
    justify-content: center;
    width: 2.05rem;
}

.nav-icon[b-zgn3mlq4gz]  .rz-icon {
    color: currentColor;
    font-size: 1.25rem;
    line-height: 1;
}

.nav-link.active[b-zgn3mlq4gz],
.nav-link:hover[b-zgn3mlq4gz],
.nav-link:focus[b-zgn3mlq4gz] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--nav-accent) 24%, transparent), color-mix(in srgb, var(--app-sidebar-text) 8%, transparent));
    border-color: color-mix(in srgb, var(--nav-accent) 56%, transparent);
    color: var(--app-sidebar-text) !important;
    transform: translateX(0.1rem);
}

.nav-link.active[b-zgn3mlq4gz] {
    box-shadow: 0 8px 18px color-mix(in srgb, var(--nav-accent) 18%, transparent);
}

.nav-link.active[b-zgn3mlq4gz]::before {
    opacity: 1;
}

.nav-link.active .nav-icon[b-zgn3mlq4gz],
.nav-link:hover .nav-icon[b-zgn3mlq4gz],
.nav-link:focus .nav-icon[b-zgn3mlq4gz] {
    background: var(--nav-accent);
    border-color: var(--nav-accent);
    color: #071014;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--nav-accent) 24%, transparent);
}

@media (min-width: 761px) {
    .menu-toggle[b-zgn3mlq4gz] {
        display: none;
    }

    .pin-toggle[b-zgn3mlq4gz] {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-0.25rem);
        transition: opacity 140ms ease, transform 140ms ease;
    }

    .brand-name[b-zgn3mlq4gz],
    .nav-text[b-zgn3mlq4gz] {
        opacity: 0;
        transform: translateX(-0.35rem);
    }

    .sidebar:hover:not(:has(.nav-hover-suppressed)) .brand-name[b-zgn3mlq4gz],
    .sidebar:focus-within:not(:has(.nav-hover-suppressed)) .brand-name[b-zgn3mlq4gz],
    .sidebar:has(.nav-pinned) .brand-name[b-zgn3mlq4gz],
    .sidebar:hover:not(:has(.nav-hover-suppressed)) .nav-text[b-zgn3mlq4gz],
    .sidebar:focus-within:not(:has(.nav-hover-suppressed)) .nav-text[b-zgn3mlq4gz],
    .sidebar:has(.nav-pinned) .nav-text[b-zgn3mlq4gz],
    .sidebar:hover:not(:has(.nav-hover-suppressed)) .pin-toggle[b-zgn3mlq4gz],
    .sidebar:focus-within:not(:has(.nav-hover-suppressed)) .pin-toggle[b-zgn3mlq4gz],
    .sidebar:has(.nav-pinned) .pin-toggle[b-zgn3mlq4gz] {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }

    .nav-link[b-zgn3mlq4gz] {
        justify-content: flex-start;
    }

    .nav-scrollable[b-zgn3mlq4gz] {
        height: calc(100vh - 4.5rem);
        overflow-y: auto;
    }
}

@media (max-width: 760px) {
    .pin-toggle[b-zgn3mlq4gz] {
        display: none;
    }

    .brand-name[b-zgn3mlq4gz],
    .nav-text[b-zgn3mlq4gz] {
        opacity: 1;
        transform: none;
    }

    .nav[b-zgn3mlq4gz] {
        padding: 0.75rem;
    }

    .nav-scrollable[b-zgn3mlq4gz] {
        display: grid;
        grid-template-rows: 1fr;
        opacity: 1;
        transition: grid-template-rows 180ms ease, opacity 140ms ease;
    }

    .nav-scrollable.nav-closed[b-zgn3mlq4gz] {
        grid-template-rows: 0fr;
        opacity: 0;
        pointer-events: none;
    }

    .nav-slide[b-zgn3mlq4gz] {
        overflow: hidden;
    }

    .nav-link[b-zgn3mlq4gz] {
        min-height: 3.1rem;
        padding: 0 0.7rem;
    }
}