/* /Components/Account/Shared/AccountLayout.razor.rz.scp.css */
/* ==========================================================================
   AccountLayout — Centers auth content in a clean themed container
   ========================================================================== */

.auth-container[b-029quy71oq] {
    max-width: 480px;
    margin: var(--space-8) auto;
}

/* Override Bootstrap form elements within auth pages to use theme tokens */
.auth-container[b-029quy71oq]  h1 {
    text-align: center;
    margin-bottom: var(--space-6);
}

.auth-container[b-029quy71oq]  h2 {
    font-size: 1rem;
    color: var(--color-text-secondary);
    font-weight: 400;
    text-align: center;
    margin-bottom: var(--space-4);
}

.auth-container[b-029quy71oq]  hr {
    border-color: var(--color-border-subtle);
    margin: var(--space-4) 0;
}

.auth-container[b-029quy71oq]  .form-floating {
    margin-bottom: var(--space-4);
}

.auth-container[b-029quy71oq]  .form-control {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
}

.auth-container[b-029quy71oq]  .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.auth-container[b-029quy71oq]  .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    font-weight: 500;
    padding: var(--space-3) var(--space-5);
    font-family: inherit;
    transition: background-color 200ms ease;
}

.auth-container[b-029quy71oq]  .btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.auth-container[b-029quy71oq]  a {
    color: var(--color-primary);
}

.auth-container[b-029quy71oq]  .text-danger {
    color: var(--color-error) !important;
    font-size: 0.8125rem;
}

/* Hide the external login column on these scaffolded pages */
.auth-container[b-029quy71oq]  .col-md-6.col-md-offset-2 {
    display: none;
}

/* Make the form column full-width since we hid the external login section */
.auth-container[b-029quy71oq]  .col-md-4 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* ==========================================================================
   ManageLayout — Account management pages
   ========================================================================== */

.manage-layout[b-msqucxzuka] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-6);
    align-items: start;
}

.manage-nav[b-msqucxzuka] {
    position: sticky;
    top: var(--space-8);
}

.manage-content[b-msqucxzuka] {
    min-width: 0;
}

/* Override parent auth-container max-width for manage pages */
[b-msqucxzuka] .auth-container {
    max-width: 720px;
}

@media (max-width: 767px) {
    .manage-layout[b-msqucxzuka] {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .manage-nav[b-msqucxzuka] {
        position: static;
    }
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* ==========================================================================
   ManageNavMenu — Scoped styles for account management sidebar nav
   ========================================================================== */

.manage-nav-menu[b-ymbqldpqte] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.manage-nav-menu[b-ymbqldpqte]  .manage-nav-link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 150ms ease, color 150ms ease;
}

.manage-nav-menu[b-ymbqldpqte]  .manage-nav-link:hover {
    background-color: var(--color-primary-subtle);
    color: var(--color-text);
}

.manage-nav-menu[b-ymbqldpqte]  .manage-nav-link.active {
    background-color: var(--color-primary-subtle);
    color: var(--color-primary);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   MainLayout — Top navigation + main content area
   Reference: PRD-003 Section 3.2, Aesthetics Bible Section 7.6
   ========================================================================== */

.page[b-cm6libt5p0] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-cm6libt5p0] {
    flex: 1;
}

.content[b-cm6libt5p0] {
    padding-top: var(--space-8);
    padding-bottom: var(--space-12);
}

/* --------------------------------------------------------------------------
   Blazor error boundary
   -------------------------------------------------------------------------- */

#blazor-error-ui[b-cm6libt5p0] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-cm6libt5p0] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   NavMenu — Horizontal top navigation bar
   Reference: Aesthetics Bible Section 7.6, PRD-003 Section 3.2
   ========================================================================== */

.top-nav[b-qi7b9edltq] {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-1);
}

.nav-inner[b-qi7b9edltq] {
    display: flex;
    align-items: center;
    height: 56px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    gap: var(--space-2);
}


/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

.nav-brand[b-qi7b9edltq] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    margin-right: var(--space-6);
}

.nav-brand:hover[b-qi7b9edltq] {
    color: var(--color-primary-hover);
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   Navigation Links
   -------------------------------------------------------------------------- */

.nav-links[b-qi7b9edltq] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
}

.nav-links[b-qi7b9edltq]  .nav-link-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    border-bottom: 2px solid transparent;
    transition: color 200ms ease, background-color 200ms ease;
    white-space: nowrap;
}

.nav-links[b-qi7b9edltq]  .nav-link-item i {
    font-size: 20px;
}

.nav-links[b-qi7b9edltq]  .nav-link-item:hover {
    color: var(--color-text);
    background-color: var(--color-primary-subtle);
    text-decoration: none;
}

.nav-links[b-qi7b9edltq]  .nav-link-item.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   Right-side items (user, swatches, version)
   -------------------------------------------------------------------------- */

.nav-right[b-qi7b9edltq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.nav-user[b-qi7b9edltq] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    transition: color 200ms ease;
}

.nav-user:hover[b-qi7b9edltq] {
    color: var(--color-text);
    text-decoration: none;
}

.nav-user i[b-qi7b9edltq] {
    font-size: 18px;
}

.nav-logout[b-qi7b9edltq] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    font-size: 18px;
    transition: color 200ms ease;
}

.nav-logout:hover[b-qi7b9edltq] {
    color: var(--color-error);
}


/* --------------------------------------------------------------------------
   Theme Swatches (Task 124)
   Intentionally understated — functional but almost an easter egg.
   -------------------------------------------------------------------------- */

.theme-swatches[b-qi7b9edltq] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--space-2);
}

.theme-swatch[b-qi7b9edltq] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 150ms ease, border-color 150ms ease;
}

.theme-swatch:hover[b-qi7b9edltq] {
    transform: scale(1.25);
}

.theme-swatch--active[b-qi7b9edltq] {
    border-color: var(--color-text);
    transform: scale(1.15);
}


/* --------------------------------------------------------------------------
   Version badge
   -------------------------------------------------------------------------- */

.nav-version[b-qi7b9edltq] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    opacity: 0.6;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Mobile hamburger
   -------------------------------------------------------------------------- */

.nav-hamburger[b-qi7b9edltq] {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: var(--space-2);
    margin-left: auto;
    font-size: 24px;
    -webkit-tap-highlight-color: transparent;
}


/* --------------------------------------------------------------------------
   Mobile responsive (< 768px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .nav-hamburger[b-qi7b9edltq] {
        display: flex;
    }

    .nav-links[b-qi7b9edltq] {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-2);
        padding: var(--space-2) 0;
        gap: 0;
    }

    .nav-links--open[b-qi7b9edltq] {
        display: flex;
    }

    .nav-links[b-qi7b9edltq]  .nav-link-item {
        padding: var(--space-3) var(--space-6);
        border-bottom: none;
        border-radius: 0;
        width: 100%;
    }

    .nav-right[b-qi7b9edltq] {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        background-color: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-2);
        padding: var(--space-3) var(--space-6);
        gap: var(--space-3);
        margin-left: 0;
    }

    .nav-right--open[b-qi7b9edltq] {
        display: flex;
        /* Stack below nav-links */
        top: auto;
    }

    .theme-swatches[b-qi7b9edltq] {
        padding: var(--space-2) 0;
    }

    .nav-user-name[b-qi7b9edltq] {
        display: inline;
    }
}
/* /Components/Pages/Calendar/MealCalendar.razor.rz.scp.css */
/* ==========================================================================
   MealCalendar — scoped styles
   ========================================================================== */

/* Page header */
.cal-header[b-629i4ga2yh] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.cal-header h1[b-629i4ga2yh] {
    margin: 0;
}

/* Empty / loading states */
.cal-empty[b-629i4ga2yh] {
    max-width: 560px;
    margin: var(--space-8) auto;
    padding: var(--space-10);
}

/* Alert */
.cal-alert[b-629i4ga2yh] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-error);
    border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
    font-size: 0.875rem;
    margin-bottom: var(--space-4);
}

/* Week navigation */
.cal-week-nav[b-629i4ga2yh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.cal-week-label[b-629i4ga2yh] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

/* Action buttons */
.cal-actions[b-629i4ga2yh] {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Member tabs */
.cal-tabs[b-629i4ga2yh] {
    display: flex;
    gap: var(--space-1);
    border-bottom: 2px solid var(--color-border-subtle);
    margin-bottom: var(--space-5);
    padding-bottom: 0;
}

.cal-tab[b-629i4ga2yh] {
    padding: var(--space-2) var(--space-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
}

.cal-tab:hover[b-629i4ga2yh] {
    color: var(--color-text);
}

.cal-tab--active[b-629i4ga2yh] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Calendar grid: 7 columns */
.cal-grid-wrapper[b-629i4ga2yh] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-6);
}

.cal-grid[b-629i4ga2yh] {
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Day headers */
.cal-day-header[b-629i4ga2yh] {
    padding: var(--space-2) var(--space-2);
    text-align: center;
    background-color: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border-subtle);
    border-right: 1px solid var(--color-border-subtle);
}

.cal-day-header:last-of-type[b-629i4ga2yh] {
    border-right: none;
}

.cal-day-header--today[b-629i4ga2yh] {
    background-color: var(--color-primary-subtle);
}

.cal-day-header__name[b-629i4ga2yh] {
    display: block;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-day-header__date[b-629i4ga2yh] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* Day cells */
.cal-day[b-629i4ga2yh] {
    padding: var(--space-2);
    min-height: 120px;
    border-right: 1px solid var(--color-border-subtle);
    background-color: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.cal-day:nth-child(14)[b-629i4ga2yh] {
    border-right: none;
}

.cal-day--today[b-629i4ga2yh] {
    background-color: var(--color-primary-subtle);
}

.cal-day__empty[b-629i4ga2yh] {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-align: center;
    padding: var(--space-4) 0;
}

/* Meal cards */
.cal-meal[b-629i4ga2yh] {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 100ms ease, box-shadow 150ms ease;
}

.cal-meal:hover[b-629i4ga2yh] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-1);
}

.cal-meal--prep[b-629i4ga2yh] {
    background-color: color-mix(in srgb, var(--color-success) 12%, transparent);
    border-left: 3px solid var(--color-success);
}

.cal-meal--leftover[b-629i4ga2yh] {
    background-color: var(--color-surface-raised);
    border-left: 3px solid var(--color-border);
}

.cal-meal__name[b-629i4ga2yh] {
    display: block;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.3;
    margin-bottom: var(--space-1);
}

.cal-meal__meta[b-629i4ga2yh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cal-meal__type[b-629i4ga2yh] {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-meal--prep .cal-meal__type[b-629i4ga2yh] {
    color: var(--color-success);
}

.cal-meal--leftover .cal-meal__type[b-629i4ga2yh] {
    color: var(--color-text-secondary);
}

.cal-meal__cal[b-629i4ga2yh] {
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.cal-meal__members[b-629i4ga2yh] {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

/* Plan summary */
.cal-summary[b-629i4ga2yh] {
    padding: var(--space-6);
}

.cal-summary h2[b-629i4ga2yh] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.cal-summary-grid[b-629i4ga2yh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}

.cal-summary-item[b-629i4ga2yh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Spinner animation */
@keyframes spin-b-629i4ga2yh {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 767px) {
    .cal-grid[b-629i4ga2yh] {
        grid-template-columns: repeat(7, minmax(100px, 1fr));
    }

    .cal-meal__name[b-629i4ga2yh] {
        font-size: 0.75rem;
    }

    .cal-actions[b-629i4ga2yh] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   Home Page Dashboard Styles
   Reference: PRD-003 Phase 4, Task 135
   ========================================================================== */

.home-hero[b-hq1qkws90u] {
    margin-bottom: var(--space-6);
}

.home-hero h1[b-hq1qkws90u] {
    margin-bottom: var(--space-2);
}

.home-nav-grid[b-hq1qkws90u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-6);
}

.home-nav-card[b-hq1qkws90u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: var(--space-8) var(--space-6);
}

.home-nav-card:hover[b-hq1qkws90u] {
    text-decoration: none;
    color: inherit;
}

.home-nav-card h3[b-hq1qkws90u] {
    margin: 0 0 var(--space-2) 0;
    color: var(--color-text);
}

.home-nav-icon[b-hq1qkws90u] {
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}
/* /Components/Pages/Recipes/RecipeDetail.razor.rz.scp.css */
/* ==========================================================================
   RecipeDetail — scoped styles
   Theme tokens from theme-tokens.css, component tokens from app.css
   ========================================================================== */

/* Breadcrumb */
.detail-breadcrumb[b-e2wj4jn4w6] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.detail-breadcrumb a[b-e2wj4jn4w6] {
    color: var(--color-primary);
    text-decoration: none;
}

.detail-breadcrumb a:hover[b-e2wj4jn4w6] {
    text-decoration: underline;
}

.detail-breadcrumb__sep[b-e2wj4jn4w6] {
    color: var(--color-border);
}

/* Header */
.detail-header[b-e2wj4jn4w6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.detail-header h1[b-e2wj4jn4w6] {
    margin-bottom: var(--space-2);
}

.detail-header__meta[b-e2wj4jn4w6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.detail-header__actions[b-e2wj4jn4w6] {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Cuisine tag uses Origin colors (consistent with RecipeCard) */
.detail-cuisine-tag[b-e2wj4jn4w6] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background-color: var(--tag-origin-bg);
    color: var(--tag-origin-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Two-column layout */
.detail-layout[b-e2wj4jn4w6] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-8);
    align-items: start;
}

/* Sidebar */
.detail-sidebar[b-e2wj4jn4w6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.detail-hero-image[b-e2wj4jn4w6] {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.detail-hero-image img[b-e2wj4jn4w6] {
    width: 100%;
    display: block;
}

.detail-meta-card[b-e2wj4jn4w6] {
    padding: var(--space-5);
}

.detail-dl[b-e2wj4jn4w6] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    font-size: 0.875rem;
}

.detail-dl dt[b-e2wj4jn4w6] {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.detail-dl dd[b-e2wj4jn4w6] {
    margin: 0;
}

/* Main content */
.detail-main[b-e2wj4jn4w6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.detail-description[b-e2wj4jn4w6] {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.detail-section[b-e2wj4jn4w6] {
    padding: var(--space-6);
}

.detail-section h2[b-e2wj4jn4w6] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.detail-section__header[b-e2wj4jn4w6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.detail-section__header h2[b-e2wj4jn4w6] {
    margin-bottom: 0;
}

/* Ingredient list */
.detail-ingredient-list[b-e2wj4jn4w6] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-ingredient-list li[b-e2wj4jn4w6] {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 0.9375rem;
}

.detail-ingredient-list li:last-child[b-e2wj4jn4w6] {
    border-bottom: none;
}

/* Progress bar */
.detail-progress[b-e2wj4jn4w6] {
    height: 8px;
    background-color: var(--color-border-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.detail-progress__bar[b-e2wj4jn4w6] {
    height: 100%;
    background-color: var(--color-success);
    border-radius: var(--radius-full);
    transition: width 300ms ease;
}

/* Nutrition table */
.detail-table[b-e2wj4jn4w6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-top: var(--space-3);
}

.detail-table th[b-e2wj4jn4w6],
.detail-table td[b-e2wj4jn4w6] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
}

.detail-table th[b-e2wj4jn4w6] {
    text-align: left;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-table tfoot td[b-e2wj4jn4w6] {
    border-top: 2px solid var(--color-border);
    border-bottom: none;
}

/* Delete modal */
.modal-overlay[b-e2wj4jn4w6] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

[b-e2wj4jn4w6] .modal-content {
    max-width: 440px;
    width: 100%;
    padding: var(--space-8);
}

[b-e2wj4jn4w6] .modal-content h2 {
    margin-bottom: var(--space-3);
}

[b-e2wj4jn4w6] .modal-content p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.modal-actions[b-e2wj4jn4w6] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 1023px) {
    .detail-layout[b-e2wj4jn4w6] {
        grid-template-columns: 280px 1fr;
        gap: var(--space-6);
    }
}

@media (max-width: 767px) {
    .detail-layout[b-e2wj4jn4w6] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .detail-header[b-e2wj4jn4w6] {
        flex-direction: column;
    }

    .detail-header__actions[b-e2wj4jn4w6] {
        width: 100%;
    }

    .detail-header__actions[b-e2wj4jn4w6]  .btn-foodsey {
        flex: 1;
    }
}
/* /Components/Pages/Recipes/RecipeEdit.razor.rz.scp.css */
/* ==========================================================================
   RecipeEdit — scoped styles
   ========================================================================== */

/* Breadcrumb */
.edit-breadcrumb[b-utxvj1r0yi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.edit-breadcrumb a[b-utxvj1r0yi] {
    color: var(--color-primary);
    text-decoration: none;
}

.edit-breadcrumb a:hover[b-utxvj1r0yi] {
    text-decoration: underline;
}

.edit-breadcrumb__sep[b-utxvj1r0yi] {
    color: var(--color-border);
}

/* Alert */
.edit-alert[b-utxvj1r0yi] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: 0.875rem;
}

.edit-alert--error[b-utxvj1r0yi] {
    background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-error);
    border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
}

/* Two-column layout */
.edit-layout[b-utxvj1r0yi] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-8);
    align-items: start;
}

.edit-main[b-utxvj1r0yi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.edit-sidebar__card[b-utxvj1r0yi] {
    padding: var(--space-5);
}

/* Field group */
.edit-field[b-utxvj1r0yi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.edit-field + .edit-field[b-utxvj1r0yi] {
    margin-top: var(--space-1);
}

/* Two-column row within sidebar */
.edit-row[b-utxvj1r0yi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* Checkbox */
.edit-checkbox[b-utxvj1r0yi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    cursor: pointer;
    margin-top: var(--space-2);
}

.edit-checkbox input[type="checkbox"][b-utxvj1r0yi] {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    accent-color: var(--color-primary);
}

/* Form actions */
.edit-actions[b-utxvj1r0yi] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Spinner animation */
@keyframes spin-b-utxvj1r0yi {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 767px) {
    .edit-layout[b-utxvj1r0yi] {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}
/* /Components/Pages/Recipes/RecipeList.razor.rz.scp.css */
/* ==========================================================================
   RecipeList Page Styles
   Reference: Aesthetics Bible Section 7.2, PRD-003 Section 3.4
   Task 126: CSS Grid layout
   ========================================================================== */

.recipe-list-header[b-lo5k7lhg48] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
    flex-wrap: wrap;
}

.recipe-list-header h1[b-lo5k7lhg48] {
    margin: 0;
}

/* Filter bar */
.recipe-filters[b-lo5k7lhg48] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

@media (max-width: 1023px) {
    .recipe-filters[b-lo5k7lhg48] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .recipe-filters[b-lo5k7lhg48] {
        grid-template-columns: 1fr;
    }
}

/* Recipe grid: 3-4 columns on desktop, responsive */
.recipe-grid[b-lo5k7lhg48] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
}
/* /Components/Pages/Shopping/ShoppingListPage.razor.rz.scp.css */
/* ==========================================================================
   ShoppingListPage — scoped styles
   ========================================================================== */

/* Empty / loading state */
.shop-empty[b-f8ktlmb2uq] {
    max-width: 560px;
    margin: var(--space-8) auto;
}

/* Alert */
.shop-alert[b-f8ktlmb2uq] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-error);
    border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
    font-size: 0.875rem;
    margin-bottom: var(--space-4);
}

/* Toolbar */
.shop-toolbar[b-f8ktlmb2uq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.shop-toolbar__info[b-f8ktlmb2uq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.shop-toolbar__actions[b-f8ktlmb2uq] {
    display: flex;
    gap: var(--space-2);
}

/* Progress bar */
.shop-progress-wrap[b-f8ktlmb2uq] {
    margin-bottom: var(--space-5);
}

.shop-progress-meta[b-f8ktlmb2uq] {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}

.shop-progress[b-f8ktlmb2uq] {
    height: 6px;
    background-color: var(--color-border-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.shop-progress__bar[b-f8ktlmb2uq] {
    height: 100%;
    background-color: var(--color-success);
    border-radius: var(--radius-full);
    transition: width 300ms ease;
}

/* Category card */
.shop-category[b-f8ktlmb2uq] {
    padding: 0;
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.shop-category__title[b-f8ktlmb2uq] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border-subtle);
    margin: 0;
}

/* Item list */
.shop-item-list[b-f8ktlmb2uq] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop-item[b-f8ktlmb2uq] {
    border-bottom: 1px solid var(--color-border-subtle);
}

.shop-item:last-child[b-f8ktlmb2uq] {
    border-bottom: none;
}

.shop-item__label[b-f8ktlmb2uq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    cursor: pointer;
    transition: background-color 100ms ease;
}

.shop-item__label:hover[b-f8ktlmb2uq] {
    background-color: var(--color-primary-subtle);
}

.shop-item__label input[type="checkbox"][b-f8ktlmb2uq] {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.shop-item__text[b-f8ktlmb2uq] {
    flex: 1;
    font-size: 0.9375rem;
}

.shop-item--checked .shop-item__text[b-f8ktlmb2uq] {
    text-decoration: line-through;
    color: var(--color-text-secondary);
}

.shop-item__recipes[b-f8ktlmb2uq] {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    margin-left: var(--space-1);
}

/* Spinner animation */
@keyframes spin-b-f8ktlmb2uq {
    to { transform: rotate(360deg); }
}

/* Print-only section */
.shop-print-only[b-f8ktlmb2uq] {
    display: none;
}

@media print {
    .shop-print-only[b-f8ktlmb2uq] {
        display: block;
    }
}

/* Responsive */
@media (max-width: 767px) {
    .shop-toolbar[b-f8ktlmb2uq] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Shared/GradientPlaceholder.razor.rz.scp.css */
/* ==========================================================================
   Gradient Placeholder Styles
   Three gradient pairs per theme, selected via CSS class.
   Gradient colors come from theme tokens defined in theme-tokens.css.
   Reference: Aesthetics Bible Section 8
   ========================================================================== */

.gradient-placeholder[b-nisdq77bpw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-4);
    box-sizing: border-box;
    overflow: hidden;
}

.gradient-placeholder--0[b-nisdq77bpw] {
    background: linear-gradient(135deg, var(--gradient-1-from), var(--gradient-1-to));
}

.gradient-placeholder--1[b-nisdq77bpw] {
    background: linear-gradient(135deg, var(--gradient-2-from), var(--gradient-2-to));
}

.gradient-placeholder--2[b-nisdq77bpw] {
    background: linear-gradient(135deg, var(--gradient-3-from), var(--gradient-3-to));
}

.gradient-placeholder__text[b-nisdq77bpw] {
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    line-height: 1.3;
    max-width: 80%;
    word-break: break-word;
}
/* /Components/Shared/RecipeCard.razor.rz.scp.css */
/* ==========================================================================
   RecipeCard Styles
   Reference: Aesthetics Bible Sections 7.2, 7.7, 9.3
   Tasks: 125 (card), 128 (cuisine tag), 129 (hover)
   ========================================================================== */

.recipe-card[b-xet31mfm0v] {
    display: block;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

/* Task 129: Hover interaction — gentle rise with deeper shadow */
.recipe-card:hover[b-xet31mfm0v] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    text-decoration: none;
    color: inherit;
}

/* Task 129: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .recipe-card[b-xet31mfm0v] {
        transition: none;
    }

    .recipe-card:hover[b-xet31mfm0v] {
        transform: none;
    }
}

/* Image area: 3:2 aspect ratio */
.recipe-card__image[b-xet31mfm0v] {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--color-border-subtle);
}

.recipe-card__image img[b-xet31mfm0v] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content area */
.recipe-card__content[b-xet31mfm0v] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.recipe-card__title[b-xet31mfm0v] {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--color-text);
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta row: tags + badges */
.recipe-card__meta[b-xet31mfm0v] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Task 128: Cuisine tag as Origin category pill (blue hue) */
.recipe-card__tag[b-xet31mfm0v] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background-color: var(--tag-origin-bg);
    color: var(--tag-origin-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
/* /Components/Shared/Skeleton.razor.rz.scp.css */
/* ==========================================================================
   Skeleton Loading Component Styles
   Reference: Aesthetics Bible Section 9.5
   ========================================================================== */

/* Pulse animation: 1.5s gentle brightness oscillation */
@keyframes skeleton-pulse-b-5a7tandwwq {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.skeleton[b-5a7tandwwq] {
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Text line variant (default) */
.skeleton--text[b-5a7tandwwq] {
    height: 16px;
    width: 100%;
    background-color: var(--color-border-subtle);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse-b-5a7tandwwq 1.5s ease-in-out infinite;
}

/* Rect variant — custom dimensions via style attribute */
.skeleton--rect[b-5a7tandwwq] {
    background-color: var(--color-border-subtle);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse-b-5a7tandwwq 1.5s ease-in-out infinite;
}

/* Card variant */
.skeleton--card[b-5a7tandwwq] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-1);
}

/* Recipe card variant */
.skeleton--recipe-card[b-5a7tandwwq] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.skeleton__image[b-5a7tandwwq] {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-color: var(--color-border-subtle);
    animation: skeleton-pulse-b-5a7tandwwq 1.5s ease-in-out infinite;
}

.skeleton__content[b-5a7tandwwq] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.skeleton__line[b-5a7tandwwq] {
    height: 14px;
    width: 100%;
    background-color: var(--color-border-subtle);
    border-radius: var(--radius-sm);
    animation: skeleton-pulse-b-5a7tandwwq 1.5s ease-in-out infinite;
}

.skeleton__line--title[b-5a7tandwwq] {
    height: 18px;
    width: 70%;
}

.skeleton__line--short[b-5a7tandwwq] {
    width: 40%;
}

/* Respect prefers-reduced-motion: static gray, no animation */
@media (prefers-reduced-motion: reduce) {
    .skeleton--text[b-5a7tandwwq],
    .skeleton--rect[b-5a7tandwwq],
    .skeleton__image[b-5a7tandwwq],
    .skeleton__line[b-5a7tandwwq] {
        animation: none;
        opacity: 0.7;
    }
}