/* /Components/AttendanceSection.razor.rz.scp.css */
/* Attendance section container. */
.attendance-section[b-xaijy6iqmv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Header row: title on the left, nudge button on the right. */
.attendance-section__header[b-xaijy6iqmv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Section title — uppercase muted text. */
.attendance-section__title[b-xaijy6iqmv] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #78909c;
    letter-spacing: 0.05em;
}

/* Nudge button — green/teal text with bell icon. */
.attendance-section__nudge-btn[b-xaijy6iqmv] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: #4CAF50;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.attendance-section__nudge-btn:hover[b-xaijy6iqmv] {
    background-color: rgba(76, 175, 80, 0.08);
}

/* Housemate list. */
.attendance-section__list[b-xaijy6iqmv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Individual housemate row — rounded card with avatar+name on left, buttons on right. */
.attendance-section__row[b-xaijy6iqmv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
}

/* Housemate info: avatar + name. */
.attendance-section__housemate[b-xaijy6iqmv] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

/* Housemate name — bold, truncated if too long. */
.attendance-section__name[b-xaijy6iqmv] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status button group. */
.attendance-section__buttons[b-xaijy6iqmv] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Individual status button — circular outline. */
.attendance-section__btn[b-xaijy6iqmv] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #9ca3af;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.attendance-section__btn:hover:not(:disabled)[b-xaijy6iqmv] {
    border-color: #6b7280;
    color: #6b7280;
}

.attendance-section__btn:disabled[b-xaijy6iqmv] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* EatingIn active state — green filled. */
.attendance-section__btn--eating-in[b-xaijy6iqmv] {
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #ffffff;
}

.attendance-section__btn--eating-in:hover:not(:disabled)[b-xaijy6iqmv] {
    background-color: #43A047;
    border-color: #43A047;
    color: #ffffff;
}

/* Unknown active state — yellow filled. */
.attendance-section__btn--unknown[b-xaijy6iqmv] {
    background-color: #FFC107;
    border-color: #FFC107;
    color: #ffffff;
}

.attendance-section__btn--unknown:hover:not(:disabled)[b-xaijy6iqmv] {
    background-color: #FFB300;
    border-color: #FFB300;
    color: #ffffff;
}

/* NotEatingIn active state — red filled. */
.attendance-section__btn--not-eating-in[b-xaijy6iqmv] {
    background-color: #F44336;
    border-color: #F44336;
    color: #ffffff;
}

.attendance-section__btn--not-eating-in:hover:not(:disabled)[b-xaijy6iqmv] {
    background-color: #E53935;
    border-color: #E53935;
    color: #ffffff;
}

/* Error toast. */
.attendance-section__toast[b-xaijy6iqmv] {
    background-color: #FEE2E2;
    color: #991B1B;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8125rem;
    margin-top: 8px;
}

/* Chef toggle button — inactive state (muted). */
.attendance-section__chef-btn[b-xaijy6iqmv] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.attendance-section__chef-btn:hover:not(:disabled)[b-xaijy6iqmv] {
    border-color: #6b7280;
    color: #6b7280;
}

.attendance-section__chef-btn:disabled[b-xaijy6iqmv] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Chef toggle button — active state (blue filled). */
.attendance-section__chef-btn--active[b-xaijy6iqmv] {
    background-color: #42A5F5;
    border-color: #42A5F5;
    color: #ffffff;
}

.attendance-section__chef-btn--active:hover:not(:disabled)[b-xaijy6iqmv] {
    background-color: #1E88E5;
    border-color: #1E88E5;
    color: #ffffff;
}

/* Button group container. */
.attendance-section__btn-group[b-xaijy6iqmv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* === Mobile-only collapse/expand behavior (< 480px) === */
@media (max-width: 479.98px) {
    /*
     * Remove parent gap on mobile so the btn-group handles all spacing.
     * The chef button gets an explicit margin-right.
     */
    .attendance-section__buttons[b-xaijy6iqmv] {
        gap: 0;
    }

    .attendance-section__chef-btn[b-xaijy6iqmv] {
        margin-right: 8px;
    }

    /*
     * Animation strategy: the btn-group container has a fixed height and animates
     * its width between 32px (one button) and full width (all buttons + gaps).
     * Buttons are position: absolute inside and animate their `left` property.
     * overflow: hidden on the container clips inactive buttons as they slide
     * behind the active button — creating a true "slide behind" effect where
     * inactive buttons remain full-size throughout.
     *
     * Button positions (left-to-right): slot 0, slot 1, slot 2.
     * Each slot = 32px button + 8px gap = 40px offset per slot.
     * Expanded width = 3 * 32px + 2 * 8px = 112px.
     * Collapsed width = 32px.
     */

    .attendance-section__btn-group[b-xaijy6iqmv] {
        position: relative;
        height: 32px;
        gap: 0;
        overflow: hidden;
        transition: width 250ms ease;
    }

    .attendance-section__btn-group--collapsed[b-xaijy6iqmv] {
        width: 32px;
    }

    .attendance-section__btn-group--expanded[b-xaijy6iqmv] {
        width: 112px;
    }

    /* All buttons are absolutely positioned within the container. */
    .attendance-section__btn-group .attendance-section__btn[b-xaijy6iqmv] {
        position: absolute;
        top: 0;
        width: 32px;
        height: 32px;
        transition: left 250ms ease;
    }

    /* In collapsed state, the active button is on top so others slide behind it. */
    .attendance-section__btn-group--collapsed .attendance-section__btn--active[b-xaijy6iqmv] {
        z-index: 3;
    }

    .attendance-section__btn-group--collapsed .attendance-section__btn:not(.attendance-section__btn--active)[b-xaijy6iqmv] {
        z-index: 1;
    }

    /* In expanded state, the active button is still slightly elevated so that when
       the collapse starts in the same frame, it's already on top. */
    .attendance-section__btn-group--expanded .attendance-section__btn--active[b-xaijy6iqmv] {
        z-index: 2;
    }

    .attendance-section__btn-group--expanded .attendance-section__btn:not(.attendance-section__btn--active)[b-xaijy6iqmv] {
        z-index: 1;
    }

    /* === EXPANDED positions: buttons at their natural slots. === */
    .attendance-section__btn-group--expanded .attendance-section__btn:nth-child(1)[b-xaijy6iqmv] {
        left: 0;
    }

    .attendance-section__btn-group--expanded .attendance-section__btn:nth-child(2)[b-xaijy6iqmv] {
        left: 40px;
    }

    .attendance-section__btn-group--expanded .attendance-section__btn:nth-child(3)[b-xaijy6iqmv] {
        left: 80px;
    }

    /* === COLLAPSED positions: all buttons slide to left:0 (behind the active button). === */
    .attendance-section__btn-group--collapsed .attendance-section__btn[b-xaijy6iqmv] {
        left: 0;
    }

    /* Inactive buttons in collapsed state are not interactive. */
    .attendance-section__btn-group--collapsed .attendance-section__btn:not(.attendance-section__btn--active)[b-xaijy6iqmv] {
        pointer-events: none;
    }

    /* Chef button transitions — always keep 8px right margin on mobile. */
    .attendance-section__chef-btn--collapsed[b-xaijy6iqmv] {
        transition: margin-right 250ms ease-in;
        margin-right: 8px;
    }

    .attendance-section__chef-btn--expanded[b-xaijy6iqmv] {
        transition: margin-right 250ms ease-out;
        margin-right: 8px;
    }
}

/* === Wide viewport (≥ 480px) — always show all buttons in standard layout === */
@media (min-width: 480px) {
    .attendance-section__btn-group[b-xaijy6iqmv] {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .attendance-section__btn-group .attendance-section__btn[b-xaijy6iqmv] {
        position: relative;
        top: auto;
        left: auto;
    }

    .attendance-section__chef-btn[b-xaijy6iqmv] {
        order: -1;
    }
}

/* === Hover hint on pointer devices at mobile viewport === */
@media (max-width: 479.98px) and (hover: hover) {
    .attendance-section__btn-group--collapsed .attendance-section__btn--active[b-xaijy6iqmv] {
        cursor: pointer;
    }
}

/* Name truncation when row is expanded — constrain width to leave room for buttons. */
@media (max-width: 479.98px) {
    .attendance-section__name--truncated[b-xaijy6iqmv] {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* /Components/CalendarGrid.razor.rz.scp.css */
.calendar-grid[b-y3d5qeso9v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.calendar-grid__day-headers[b-y3d5qeso9v] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.calendar-grid__day-header[b-y3d5qeso9v] {
    font-size: 12px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    padding: 4px 0;
}

.calendar-grid__body[b-y3d5qeso9v] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-grid__cell[b-y3d5qeso9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2px;
    min-height: 52px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.calendar-grid__cell:hover[b-y3d5qeso9v] {
    background-color: rgba(76, 175, 80, 0.08);
}

.calendar-grid__cell--outside[b-y3d5qeso9v] {
    opacity: 0.4;
}

.calendar-grid__cell--today[b-y3d5qeso9v] {
    background-color: rgba(76, 175, 80, 0.06);
    border: 2px solid rgba(76, 175, 80, 0.4);
}

.calendar-grid__cell--today:hover[b-y3d5qeso9v] {
    background-color: rgba(76, 175, 80, 0.12);
}

.calendar-grid__cell--today .calendar-grid__cell-number[b-y3d5qeso9v] {
    margin-top: 16px;
}

.calendar-grid__cell--selected[b-y3d5qeso9v] {
    background-color: rgba(76, 175, 80, 0.1);
    border: 2px solid #4CAF50;
}

.calendar-grid__cell--selected:hover[b-y3d5qeso9v] {
    background-color: rgba(76, 175, 80, 0.15);
}

.calendar-grid__cell-number[b-y3d5qeso9v] {
    font-size: 14px;
    color: #333333;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    width: 100%;
    font-variant-numeric: tabular-nums;
    margin-top: 18px;
}

.calendar-grid__cell--selected .calendar-grid__cell-number[b-y3d5qeso9v] {
    font-weight: 700;
    color: #4CAF50;
    margin-top: 16px;
}

.calendar-grid__cell--outside .calendar-grid__cell-number[b-y3d5qeso9v] {
    color: #999999;
}

.calendar-grid__dots[b-y3d5qeso9v] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
    max-width: 100%;
    margin-top: 3px;
    overflow: visible;
}

.calendar-grid__dot[b-y3d5qeso9v] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* /Components/ColorPickerModal.razor.rz.scp.css */
.color-modal__overlay[b-3urwsmpjdk] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1100;
}

.color-modal[b-3urwsmpjdk] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 380px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1101;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.color-modal__header[b-3urwsmpjdk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.color-modal__title[b-3urwsmpjdk] {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
}

.color-modal__close-btn[b-3urwsmpjdk] {
    background: none;
    border: none;
    font-size: 20px;
    color: #666666;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}

.color-modal__close-btn:hover[b-3urwsmpjdk] {
    color: #333333;
    background-color: #f0f0f0;
}

.color-modal__grid[b-3urwsmpjdk] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-modal__swatch[b-3urwsmpjdk] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.color-modal__swatch:hover:not(.color-modal__swatch--disabled):not(.color-modal__swatch--selected)[b-3urwsmpjdk] {
    transform: scale(1.2);
    border-color: #333333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.color-modal__swatch--selected[b-3urwsmpjdk] {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px #333333;
    transform: scale(1.15);
    cursor: default;
}

.color-modal__swatch--disabled[b-3urwsmpjdk] {
    opacity: 0.25;
    cursor: not-allowed;
}
/* /Components/CommentsSection.razor.rz.scp.css */
.comments-section[b-oxzexmlmqx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comments-section__header[b-oxzexmlmqx] {
    font-size: 12px;
    font-weight: 600;
    color: #78909c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.comments-section__list[b-oxzexmlmqx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Row: avatar on the left, bubble on the right. */
.comments-section__row[b-oxzexmlmqx] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.comments-section__row--clickable[b-oxzexmlmqx] {
    cursor: pointer;
}

/* The bubble contains name + text, with its own background/border. */
.comments-section__bubble[b-oxzexmlmqx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-radius: 12px;
    background-color: #f5f5f5;
    border: 2px solid transparent;
}

.comments-section__row--clickable .comments-section__bubble:hover[b-oxzexmlmqx] {
    border-color: #4CAF50;
}

/* Placeholder state: dotted border, no background. */
.comments-section__bubble--placeholder[b-oxzexmlmqx] {
    background-color: transparent;
    border: 2px dashed #cccccc;
}

.comments-section__row:hover .comments-section__bubble--placeholder[b-oxzexmlmqx] {
    border-color: #4CAF50;
}

/* Editing state: solid green border. */
.comments-section__bubble--editing[b-oxzexmlmqx] {
    border: 2px solid #4CAF50;
    background-color: #ffffff;
}

.comments-section__name[b-oxzexmlmqx] {
    font-size: 11px;
    font-weight: 600;
    color: #9e9e9e;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.comments-section__text[b-oxzexmlmqx] {
    font-size: 14px;
    color: #333333;
    word-wrap: break-word;
}

.comments-section__placeholder-text[b-oxzexmlmqx] {
    font-size: 14px;
    color: #9e9e9e;
    font-style: italic;
}

.comments-section__input[b-oxzexmlmqx] {
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: 14px;
    color: #333333;
    outline: none;
    box-sizing: border-box;
    background: transparent;
}

.comments-section__input:focus[b-oxzexmlmqx] {
    border: none;
}

.comments-section__input:disabled[b-oxzexmlmqx] {
    opacity: 0.6;
}

.comments-section__edit-block[b-oxzexmlmqx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comments-section__actions-wrapper[b-oxzexmlmqx] {
    overflow: hidden;
    animation: slide-down-b-oxzexmlmqx 0.25s ease forwards;
}

.comments-section__actions-wrapper--closing[b-oxzexmlmqx] {
    animation: slide-up-b-oxzexmlmqx 0.25s ease-out forwards;
}

@keyframes slide-down-b-oxzexmlmqx {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 48px;
        opacity: 1;
    }
}

@keyframes slide-up-b-oxzexmlmqx {
    from {
        max-height: 48px;
        margin-top: 0;
        opacity: 1;
    }
    to {
        max-height: 0;
        margin-top: -4px;
        opacity: 0;
    }
}

.comments-section__actions[b-oxzexmlmqx] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-left: 48px;
}

.comments-section__action-btn[b-oxzexmlmqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.comments-section__action-btn:disabled[b-oxzexmlmqx] {
    opacity: 0.5;
    cursor: not-allowed;
}

.comments-section__action-btn--accept[b-oxzexmlmqx] {
    color: #4CAF50;
}

.comments-section__action-btn--accept:hover:not(:disabled)[b-oxzexmlmqx] {
    background-color: rgba(76, 175, 80, 0.15);
}

.comments-section__action-btn--discard[b-oxzexmlmqx] {
    color: #F44336;
}

.comments-section__action-btn--discard:hover:not(:disabled)[b-oxzexmlmqx] {
    background-color: rgba(244, 67, 54, 0.15);
}

.toast--error[b-oxzexmlmqx] {
    padding: 8px 12px;
    border-radius: 8px;
    background-color: #ffebee;
    color: #c62828;
    font-size: 13px;
    margin-top: 8px;
}
/* /Components/DateNavigationPanel.razor.rz.scp.css */
.date-nav[b-lsavc2ird9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    gap: 12px;
}

.date-nav__arrow[b-lsavc2ird9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.date-nav__arrow:hover[b-lsavc2ird9] {
    background-color: #f0f0f0;
}

.date-nav__arrow-icon[b-lsavc2ird9] {
    color: #333333;
}

.date-nav__center[b-lsavc2ird9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.date-nav__center:hover[b-lsavc2ird9] {
    background-color: #f0f0f0;
}

.date-nav__center--static[b-lsavc2ird9] {
    cursor: default;
}

.date-nav__center--static:hover[b-lsavc2ird9] {
    background-color: transparent;
}

.date-nav__title[b-lsavc2ird9] {
    font-size: 16px;
    color: #333333;
    line-height: 1.3;
}

.date-nav__title--bold[b-lsavc2ird9] {
    font-weight: 700;
}

.date-nav__date[b-lsavc2ird9] {
    font-size: 13px;
    color: #666666;
    line-height: 1.3;
}

.date-nav__date--bold[b-lsavc2ird9] {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
}
/* /Components/DishPanel.razor.rz.scp.css */
.dish-panel[b-z40awoc3jr] {
    background-color: #1a2332;
    border-radius: 16px;
    padding: 16px 20px;
}

.dish-panel--animating[b-z40awoc3jr] {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .dish-panel[b-z40awoc3jr] {
        transition: none;
    }
}

.dish-panel__header[b-z40awoc3jr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dish-panel__header-left[b-z40awoc3jr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dish-panel__food-icon-bg[b-z40awoc3jr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(76, 175, 80, 0.15);
    flex-shrink: 0;
}

.dish-panel__food-icon[b-z40awoc3jr] {
    color: #4CAF50;
}

.dish-panel__label[b-z40awoc3jr] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4CAF50;
}

.dish-panel__header-right[b-z40awoc3jr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dish-panel__edit-btn[b-z40awoc3jr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #a0aec0;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.dish-panel__edit-btn:hover[b-z40awoc3jr] {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.dish-panel__action-btn[b-z40awoc3jr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.dish-panel__action-btn:disabled[b-z40awoc3jr] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dish-panel__action-btn--accept[b-z40awoc3jr] {
    color: #4CAF50;
}

.dish-panel__action-btn--accept:hover:not(:disabled)[b-z40awoc3jr] {
    background-color: rgba(76, 175, 80, 0.15);
}

.dish-panel__action-btn--discard[b-z40awoc3jr] {
    color: #F44336;
}

.dish-panel__action-btn--discard:hover:not(:disabled)[b-z40awoc3jr] {
    background-color: rgba(244, 67, 54, 0.15);
}

.dish-panel__body[b-z40awoc3jr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dish-panel__body--has-time[b-z40awoc3jr] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.dish-panel__text-column[b-z40awoc3jr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dish-panel__text-column .dish-panel__dish-text[b-z40awoc3jr] {
    word-break: break-word;
}

.dish-panel__time-column[b-z40awoc3jr] {
    max-width: 30%;
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.dish-panel__time-value[b-z40awoc3jr] {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.dish-panel__time-label[b-z40awoc3jr] {
    font-size: 12px;
    color: #718096;
    text-align: right;
}

.dish-panel__dish-text[b-z40awoc3jr] {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    word-break: break-word;
}

.dish-panel__empty-text[b-z40awoc3jr] {
    font-size: 18px;
    font-style: italic;
    color: #a0aec0;
    line-height: 1.3;
}

.dish-panel__meta[b-z40awoc3jr] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #718096;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

.dish-panel__meta-clock[b-z40awoc3jr] {
    color: #718096;
    flex-shrink: 0;
}

.dish-panel__input[b-z40awoc3jr] {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    color: #ffffff;
    background-color: #2d3748;
    border: none;
    border-radius: 12px;
    outline: none;
    transition: box-shadow 0.15s ease;
}

.dish-panel__input[b-z40awoc3jr]::placeholder {
    color: #718096;
    font-style: italic;
}

.dish-panel__input:focus[b-z40awoc3jr] {
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.4);
}

.dish-panel__input:disabled[b-z40awoc3jr] {
    opacity: 0.6;
}

.dish-panel__time-input-group[b-z40awoc3jr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.dish-panel__time-header[b-z40awoc3jr] {
    font-size: 12px;
    font-weight: 600;
    color: #a0aec0;
}

.dish-panel__time-input-row[b-z40awoc3jr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dish-panel__time-input[b-z40awoc3jr] {
    flex: 1;
}

.dish-panel__clear-btn[b-z40awoc3jr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background-color: rgba(244, 67, 54, 0.15);
    border-radius: 50%;
    color: #F44336;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.dish-panel__clear-btn:hover:not(:disabled)[b-z40awoc3jr] {
    background-color: rgba(244, 67, 54, 0.3);
}

.dish-panel__clear-btn:disabled[b-z40awoc3jr] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dish-panel__validation-error[b-z40awoc3jr] {
    font-size: 12px;
    color: #F44336;
}

.dish-panel__toast[b-z40awoc3jr] {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #F44336;
    color: #ffffff;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}
/* /Components/HistorySection.razor.rz.scp.css */
.history-section[b-ah66aaqzmz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-section__header[b-ah66aaqzmz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #78909c;
    margin: 0;
}

.history-section__header-icon[b-ah66aaqzmz] {
    font-size: 14px;
}

.history-section__empty[b-ah66aaqzmz] {
    font-size: 14px;
    font-style: italic;
    color: #78909c;
    margin: 0;
}

.history-section__list[b-ah66aaqzmz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-section__entry[b-ah66aaqzmz] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.history-section__entry-content[b-ah66aaqzmz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.history-section__entry-header[b-ah66aaqzmz] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.history-section__name[b-ah66aaqzmz] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.history-section__clock-icon[b-ah66aaqzmz] {
    color: #78909c;
    flex-shrink: 0;
}

.history-section__time[b-ah66aaqzmz] {
    font-size: 12px;
    color: #78909c;
}

.history-section__description[b-ah66aaqzmz] {
    font-size: 13px;
    font-style: italic;
    color: #607d8b;
}
/* /Components/HousemateAvatar.razor.rz.scp.css */
.avatar[b-r5vzarz6lh] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid transparent;
    box-sizing: border-box;
    cursor: default;
}

.avatar__initial[b-r5vzarz6lh] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

.avatar--hoverable[b-r5vzarz6lh] {
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.avatar--hoverable:hover[b-r5vzarz6lh] {
    border-color: #4CAF50;
}
/* /Components/HousemateColorPicker.razor.rz.scp.css */
.color-picker[b-ycjqxlz3cr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
}

.color-swatch[b-ycjqxlz3cr] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}

.color-swatch:hover:not(:disabled)[b-ycjqxlz3cr] {
    transform: scale(1.2);
    border-color: #333333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.color-swatch--selected[b-ycjqxlz3cr] {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px #333333;
    transform: scale(1.15);
}

.color-swatch--selected:hover[b-ycjqxlz3cr] {
    transform: scale(1.15);
}

.color-swatch--disabled[b-ycjqxlz3cr] {
    opacity: 0.3;
    cursor: not-allowed;
}

.color-swatch__check[b-ycjqxlz3cr] {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* /Components/LocaleSwitcher.razor.rz.scp.css */
.locale-switcher[b-tucail395d] {
    display: flex;
    gap: 4px;
}

.locale-btn[b-tucail395d] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: #666666;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
}

.locale-btn:hover[b-tucail395d] {
    color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.08);
}

.locale-btn--active[b-tucail395d] {
    font-weight: bold;
    color: #4CAF50;
}
/* /Components/NudgeModal.razor.rz.scp.css */
.nudge-modal__overlay[b-4d2jc6xrxk] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1100;
}

.nudge-modal[b-4d2jc6xrxk] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1101;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.nudge-modal__header[b-4d2jc6xrxk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.nudge-modal__header-left[b-4d2jc6xrxk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nudge-modal__bell-icon[b-4d2jc6xrxk] {
    font-size: 20px;
}

.nudge-modal__title[b-4d2jc6xrxk] {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
    text-transform: uppercase;
}

.nudge-modal__help-link[b-4d2jc6xrxk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #555;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
}

.nudge-modal__help-link:hover[b-4d2jc6xrxk] {
    background-color: #ccc;
    color: #333;
}

.nudge-modal__close-btn[b-4d2jc6xrxk] {
    background: none;
    border: none;
    font-size: 20px;
    color: #666666;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}

.nudge-modal__close-btn:hover[b-4d2jc6xrxk] {
    color: #333333;
    background-color: #f0f0f0;
}

.nudge-modal__body[b-4d2jc6xrxk] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nudge-modal__section-header[b-4d2jc6xrxk] {
    font-size: 12px;
    font-weight: 600;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.nudge-modal__recipients[b-4d2jc6xrxk] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nudge-modal__recipient-chip[b-4d2jc6xrxk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1.5px solid #e0e0e0;
    background-color: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    font-size: 14px;
}

.nudge-modal__recipient-chip--selected[b-4d2jc6xrxk] {
    border-color: #4CAF50;
    background-color: #f0faf0;
}

.nudge-modal__recipient-dot[b-4d2jc6xrxk] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.nudge-modal__recipient-name[b-4d2jc6xrxk] {
    color: #2e7d32;
    font-weight: 500;
}

.nudge-modal__recipient-check[b-4d2jc6xrxk] {
    color: #4CAF50;
    font-size: 12px;
    font-weight: 700;
}

.nudge-modal__message-toggle[b-4d2jc6xrxk] {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0;
}

.nudge-modal__tab[b-4d2jc6xrxk] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    color: #888888;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 0.5px;
    margin-bottom: -1px;
}

.nudge-modal__tab--active[b-4d2jc6xrxk] {
    color: #4CAF50;
    border-bottom-color: #4CAF50;
}

.nudge-modal__predefined-messages[b-4d2jc6xrxk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nudge-modal__message-card[b-4d2jc6xrxk] {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid #e0e0e0;
    background-color: #ffffff;
    text-align: left;
    font-size: 14px;
    color: #333333;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.nudge-modal__message-card:hover[b-4d2jc6xrxk] {
    border-color: #a5d6a7;
}

.nudge-modal__message-card--selected[b-4d2jc6xrxk] {
    border-color: #4CAF50;
    background-color: #f0faf0;
}

.nudge-modal__custom-message[b-4d2jc6xrxk] {
    display: flex;
}

.nudge-modal__custom-input[b-4d2jc6xrxk] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid #e0e0e0;
    font-size: 14px;
    color: #333333;
    outline: none;
    transition: border-color 0.15s ease;
}

.nudge-modal__custom-input:focus[b-4d2jc6xrxk] {
    border-color: #4CAF50;
}

.nudge-modal__footer[b-4d2jc6xrxk] {
    margin-top: 20px;
}

.nudge-modal__send-btn[b-4d2jc6xrxk] {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    background-color: #4CAF50;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.nudge-modal__send-btn:hover:not(:disabled)[b-4d2jc6xrxk] {
    background-color: #43a047;
}

.nudge-modal__send-btn:disabled[b-4d2jc6xrxk] {
    background-color: #cccccc;
    color: #888888;
    cursor: not-allowed;
}

.nudge-modal__send-icon[b-4d2jc6xrxk] {
    font-size: 16px;
}

.nudge-modal__error[b-4d2jc6xrxk] {
    padding: 10px 14px;
    border-radius: 8px;
    background-color: #fdecea;
    color: #c62828;
    font-size: 13px;
    font-weight: 500;
}
/* /Layout/LoginLayout.razor.rz.scp.css */
.login-page[b-cf8xvzdxay] {
    min-height: 100dvh;
    background-color: #E8EEF4;
    padding: 16px;
    box-sizing: border-box;
}

@media (min-width: 641px) {
    .login-page[b-cf8xvzdxay] {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-ygpaywrg87] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #E8EEF4;
}

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

.content[b-ygpaywrg87] {
    padding: 16px;
}

/* Desktop layout (≥641px): show sidebar, hide mobile components. */
@media (min-width: 641px) {
    .page[b-ygpaywrg87] {
        flex-direction: row;
    }

    .sidebar-container[b-ygpaywrg87] {
        display: block;
    }

    .mobile-header-container[b-ygpaywrg87] {
        display: none;
    }

    .mobile-bottom-nav-container[b-ygpaywrg87] {
        display: none;
    }

    main[b-ygpaywrg87] {
        margin-left: 250px;
    }
}

/* Mobile layout (<641px): hide sidebar, show mobile components. */
@media (max-width: 640.98px) {
    .sidebar-container[b-ygpaywrg87] {
        display: none;
    }

    .mobile-header-container[b-ygpaywrg87] {
        display: block;
    }

    .mobile-bottom-nav-container[b-ygpaywrg87] {
        display: block;
    }

    main[b-ygpaywrg87] {
        padding-top: 56px;
        padding-bottom: 60px;
    }
}

/* Push notification permission denied banner. */
.push-denied-banner[b-ygpaywrg87] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background-color: #FFF3CD;
    border: 1px solid #FFECB5;
    border-radius: 8px;
    color: #664D03;
    font-size: 0.875rem;
    line-height: 1.4;
}

.push-denied-banner__dismiss[b-ygpaywrg87] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #664D03;
    padding: 4px;
    line-height: 1;
}

.push-denied-banner__link[b-ygpaywrg87] {
    color: #664D03;
    font-weight: 600;
    text-decoration: underline;
}

/* Push notification enable prompt banner. */
.push-enable-banner[b-ygpaywrg87] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background-color: #D1ECF1;
    border: 1px solid #BEE5EB;
    border-radius: 8px;
    color: #0C5460;
    font-size: 0.875rem;
    line-height: 1.4;
}

.push-enable-banner__actions[b-ygpaywrg87] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.push-enable-banner__enable[b-ygpaywrg87] {
    padding: 6px 12px;
    background-color: #0C5460;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.push-enable-banner__enable:hover[b-ygpaywrg87] {
    background-color: #094049;
}

.push-enable-banner__dismiss[b-ygpaywrg87] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #0C5460;
    padding: 4px;
    line-height: 1;
}
/* /Layout/MobileBottomNav.razor.rz.scp.css */
.bottom-nav[b-4rzy6z75a8] {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #1a1a2e;
    padding: 12px 0;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.bottom-nav__item[b-4rzy6z75a8] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 12px 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.15s ease;
}

.bottom-nav__item .bottom-nav__icon[b-4rzy6z75a8] {
    stroke: #6b7280;
}

.bottom-nav__item:hover .bottom-nav__icon[b-4rzy6z75a8] {
    stroke: #4CAF50;
}

.bottom-nav__item--active .bottom-nav__icon[b-4rzy6z75a8] {
    stroke: #4CAF50;
}

.bottom-nav__icon[b-4rzy6z75a8] {
    width: 22px;
    height: 22px;
}
/* /Layout/MobileHeader.razor.rz.scp.css */
.mobile-header[b-vcy2lhn6d0] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background-color: #f0f4f8;
    border-bottom: 1px solid #e0e5ec;
    z-index: 1000;
}

.mobile-header__brand[b-vcy2lhn6d0] {
    font-size: 20px;
    font-weight: 800;
    font-style: italic;
    color: #1a1a2e;
    text-transform: uppercase;
}

.mobile-header__right[b-vcy2lhn6d0] {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* /Layout/Sidebar.razor.rz.scp.css */
.sidebar[b-s3lsjilxdx] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 250px;
    height: 100vh;
    padding: 24px 16px;
    background-color: #ffffff;
    color: #333333;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-right: 1px solid #e8eef4;
}

.sidebar__top[b-s3lsjilxdx] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sidebar__brand[b-s3lsjilxdx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar__logo[b-s3lsjilxdx] {
    width: 36px;
    height: 36px;
    background-color: #4CAF50;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.sidebar__title[b-s3lsjilxdx] {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
}

.sidebar__nav[b-s3lsjilxdx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar__nav-item[b-s3lsjilxdx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #555555;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar__nav-item:hover[b-s3lsjilxdx] {
    background-color: rgba(76, 175, 80, 0.08);
    color: #4CAF50;
}

.sidebar__nav-item--active[b-s3lsjilxdx] {
    background-color: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    font-weight: 600;
}

.sidebar__nav-item--active .sidebar__nav-icon[b-s3lsjilxdx] {
    stroke: #4CAF50;
}

.sidebar__nav-icon[b-s3lsjilxdx] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: #555555;
}

.sidebar__nav-item:hover .sidebar__nav-icon[b-s3lsjilxdx] {
    stroke: #4CAF50;
}

.sidebar__bottom[b-s3lsjilxdx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar__tagline[b-s3lsjilxdx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 12px 12px 14px;
    border-radius: 8px;
    border: 1px solid #e8eef4;
    border-left: 3px solid #4CAF50;
    line-height: 1.4;
}

.sidebar__tagline-title[b-s3lsjilxdx] {
    font-size: 12px;
    font-weight: 700;
    color: #4CAF50;
    letter-spacing: 0.5px;
}

.sidebar__tagline-text[b-s3lsjilxdx] {
    font-size: 12px;
    color: #555555;
}

.sidebar__version[b-s3lsjilxdx] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #aaaaaa;
    font-family: monospace;
}

.sidebar__bottom-row[b-s3lsjilxdx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    position: relative;
}

.sidebar__logout-btn[b-s3lsjilxdx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.sidebar__logout-btn:hover[b-s3lsjilxdx] {
    background-color: rgba(0, 0, 0, 0.05);
}

.sidebar__logout-icon[b-s3lsjilxdx] {
    width: 18px;
    height: 18px;
    stroke: #888888;
}

.sidebar__logout-btn:hover .sidebar__logout-icon[b-s3lsjilxdx] {
    stroke: #555555;
}
/* /Pages/CalendarPage.razor.rz.scp.css */
/* Base layout: vertical stack with spacing. */
.calendar-page[b-y1gyrxwr9h] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Desktop (≥641px): center content within available space, max-width 600px. */
@media (min-width: 641px) {
    .calendar-page[b-y1gyrxwr9h] {
        max-width: 600px;
        margin: 0 auto;
        padding: 24px 16px;
    }
}

/* Mobile (<641px): full viewport width with 16px horizontal padding. */
@media (max-width: 640.98px) {
    .calendar-page[b-y1gyrxwr9h] {
        width: 100%;
        padding: 16px;
    }
}

.calendar-page__info[b-y1gyrxwr9h] {
    font-size: 13px;
    color: #666666;
    text-align: center;
    line-height: 1.5;
    background-color: rgba(76, 175, 80, 0.06);
    border-radius: 12px;
    padding: 14px 20px;
    margin: 0;
}

.calendar-page__today-btn[b-y1gyrxwr9h] {
    display: block;
    padding: 6px 16px;
    border: none;
    background-color: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    font-size: 13px;
    font-weight: 600;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    align-self: flex-end;
}

.calendar-page__today-btn:hover[b-y1gyrxwr9h] {
    background-color: rgba(76, 175, 80, 0.18);
}
/* /Pages/DayPlanPage.razor.rz.scp.css */
/* Base layout: vertical stack with spacing between sections. */
.day-plan-page[b-xrqkg2z9s7] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* Desktop (≥641px): center content within available space, max-width 600px. */
@media (min-width: 641px) {
    .day-plan-page[b-xrqkg2z9s7] {
        max-width: 600px;
        margin: 0 auto;
        padding: 24px 16px;
    }
}

/* Mobile (<641px): full viewport width with 16px horizontal padding. */
@media (max-width: 640.98px) {
    .day-plan-page[b-xrqkg2z9s7] {
        width: 100%;
        padding: 16px;
    }
}
/* /Pages/HousematesPage.razor.rz.scp.css */
/* Base layout: vertical stack, matching DayPlan/Calendar pages. */
.housemates-page[b-yiwbnp8jbb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Desktop (≥641px): center content within available space, max-width 600px. */
@media (min-width: 641px) {
    .housemates-page[b-yiwbnp8jbb] {
        max-width: 600px;
        margin: 0 auto;
        padding: 24px 16px;
    }
}

/* Mobile (<641px): full viewport width with 16px horizontal padding. */
@media (max-width: 640.98px) {
    .housemates-page[b-yiwbnp8jbb] {
        width: 100%;
        padding: 16px;
    }
}

/* Header: title + plus button. */
.housemates-page__header[b-yiwbnp8jbb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.housemates-page__title[b-yiwbnp8jbb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.housemates-page__add-btn[b-yiwbnp8jbb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: #4CAF50;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.housemates-page__add-btn:hover[b-yiwbnp8jbb] {
    background-color: #43A047;
    transform: scale(1.05);
}

/* Add panel: input + V/X buttons. */
.housemates-page__add-panel[b-yiwbnp8jbb] {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Shared input style. */
.housemates-page__input[b-yiwbnp8jbb] {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 2px solid #4CAF50;
    border-radius: 12px;
    font-size: 0.9375rem;
    color: #333333;
    outline: none;
    transition: border-color 0.15s ease;
}

.housemates-page__input:focus[b-yiwbnp8jbb] {
    border-color: #388E3C;
}

/* V/X action buttons — same style as CommentsSection. */
.housemates-page__action-btn[b-yiwbnp8jbb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

.housemates-page__action-btn:disabled[b-yiwbnp8jbb] {
    opacity: 0.4;
    cursor: not-allowed;
}

.housemates-page__action-btn--accept[b-yiwbnp8jbb] {
    color: #4CAF50;
}

.housemates-page__action-btn--accept:hover:not(:disabled)[b-yiwbnp8jbb] {
    background-color: rgba(76, 175, 80, 0.15);
}

.housemates-page__action-btn--discard[b-yiwbnp8jbb] {
    color: #F44336;
}

.housemates-page__action-btn--discard:hover:not(:disabled)[b-yiwbnp8jbb] {
    background-color: rgba(244, 67, 54, 0.15);
}

/* Housemate list. */
.housemates-page__list[b-yiwbnp8jbb] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual housemate item. */
.housemates-page__item[b-yiwbnp8jbb] {
    background-color: #ffffff;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.housemates-page__item:hover[b-yiwbnp8jbb] {
    border-color: rgba(76, 175, 80, 0.3);
}

.housemates-page__item--active[b-yiwbnp8jbb] {
    border-color: #4CAF50;
    box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.2), 0 2px 8px rgba(76, 175, 80, 0.1);
    cursor: default;
}

.housemates-page__item--active:hover[b-yiwbnp8jbb] {
    border-color: #4CAF50;
}

/* Display row: identity on left, actions on right. */
.housemates-page__row[b-yiwbnp8jbb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.housemates-page__identity[b-yiwbnp8jbb] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.housemates-page__name[b-yiwbnp8jbb] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Action buttons row. */
.housemates-page__actions[b-yiwbnp8jbb] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Icon buttons (edit, color, delete, move). */
.housemates-page__icon-btn[b-yiwbnp8jbb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    color: #9ca3af;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.housemates-page__icon-btn:hover:not(:disabled)[b-yiwbnp8jbb] {
    background-color: #f3f4f6;
    color: #6b7280;
}

.housemates-page__icon-btn:disabled[b-yiwbnp8jbb] {
    opacity: 0.3;
    cursor: not-allowed;
}

.housemates-page__icon-btn--danger:hover:not(:disabled)[b-yiwbnp8jbb] {
    background-color: rgba(244, 67, 54, 0.08);
    color: #F44336;
}

/* Edit row (rename mode). */
.housemates-page__edit-row[b-yiwbnp8jbb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Modal overlay — used by delete confirmation. */
.modal-overlay[b-yiwbnp8jbb] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
}

/* Modal dialog — used by delete confirmation. */
.modal-dialog[b-yiwbnp8jbb] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    max-width: 380px;
    width: calc(100% - 32px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 1001;
}

.modal-dialog h2[b-yiwbnp8jbb] {
    font-size: 1.125rem;
    font-weight: bold;
    margin: 0 0 16px 0;
    color: #111827;
}

.modal-dialog p[b-yiwbnp8jbb] {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Modal action buttons. */
.modal-actions[b-yiwbnp8jbb] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.modal-btn[b-yiwbnp8jbb] {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background-color 0.15s ease;
}

.modal-btn--cancel[b-yiwbnp8jbb] {
    background-color: #f3f4f6;
    color: #374151;
}

.modal-btn--cancel:hover[b-yiwbnp8jbb] {
    background-color: #e5e7eb;
}

.modal-btn--danger[b-yiwbnp8jbb] {
    background-color: #F44336;
    color: #ffffff;
}

.modal-btn--danger:hover[b-yiwbnp8jbb] {
    background-color: #D32F2F;
}

/* Error toast. */
.toast[b-yiwbnp8jbb] {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: toast-in-b-yiwbnp8jbb 0.2s ease-out;
}

.toast--error[b-yiwbnp8jbb] {
    background-color: #F44336;
    color: #ffffff;
}

@keyframes toast-in-b-yiwbnp8jbb {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Logout button. */
.housemates-page__logout-btn[b-yiwbnp8jbb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    align-self: flex-end;
}

.housemates-page__logout-btn:hover[b-yiwbnp8jbb] {
    background-color: rgba(244, 67, 54, 0.06);
    border-color: #F44336;
    color: #F44336;
}

.housemates-page__logout-btn:hover svg[b-yiwbnp8jbb] {
    stroke: #F44336;
}

.housemates-page__version[b-yiwbnp8jbb] {
    font-size: 11px;
    color: #aaaaaa;
    font-family: monospace;
}

.housemates-page__footer-row[b-yiwbnp8jbb] {
    display: flex;
    align-items: center;
    position: relative;
}

.housemates-page__footer-row .housemates-page__version[b-yiwbnp8jbb] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.housemates-page__footer-row .housemates-page__logout-btn[b-yiwbnp8jbb] {
    margin-left: auto;
    align-self: auto;
}

@media (min-width: 641px) {
    .housemates-page__version[b-yiwbnp8jbb] {
        display: none;
    }
}
/* /Pages/LoginPage.razor.rz.scp.css */
/* Login card container. */
.login-card[b-419j4x822u] {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 641px) {
    .login-card[b-419j4x822u] {
        max-width: 400px;
        padding: 32px;
    }
}

/* Locale toggle — flex row pinned to the top-right of the card. */
.login-locale-toggle[b-419j4x822u] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-bottom: 8px;
}

/* Individual locale button. */
.locale-btn[b-419j4x822u] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: #666666;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
}

.locale-btn:hover[b-419j4x822u] {
    color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.08);
}

/* Active locale button. */
.locale-btn--active[b-419j4x822u] {
    font-weight: bold;
    color: #4CAF50;
}

/* Brand logo — 56×56px green rounded square with centered white "H". */
.login-logo[b-419j4x822u] {
    width: 56px;
    height: 56px;
    background-color: #4CAF50;
    border-radius: 8px;
    color: #ffffff;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
}

/* Welcome heading. */
h1[b-419j4x822u] {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 0 4px 0;
    color: #111827;
    text-align: center;
}

/* Housemate selection sub-heading. */
h2[b-419j4x822u] {
    font-size: 1.125rem;
    font-weight: bold;
    margin: 0 0 12px 0;
    color: #111827;
}

/* Subtitle paragraph below the welcome heading. */
.login-subtitle[b-419j4x822u] {
    font-size: 0.9375rem;
    color: #6b7280;
    margin: 0 0 20px 0;
    text-align: center;
}

/* Password field wrapper — pill-shaped with subtle border; focus-within highlights in brand green. */
.password-field[b-419j4x822u] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d1d5db;
    border-radius: 24px;
    padding: 12px 16px;
    background-color: #f3f4f6;
    margin-bottom: 12px;
}

.password-field:focus-within[b-419j4x822u] {
    border-color: #4CAF50;
    outline: none;
}

/* Lock icon inside the password field. */
.password-field svg[b-419j4x822u] {
    color: #9ca3af;
    flex-shrink: 0;
}

/* Password input — fills remaining space, blends into the wrapper seamlessly. */
/* Font size must be at least 16px to prevent iOS Safari auto-zoom on focus. */
.password-field[b-419j4x822u]  input {
    flex: 1;
    border: 0 !important;
    outline: 0 !important;
    font-size: 1rem;
    background: transparent !important;
    min-width: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    box-shadow: none !important;
}

/* Login submit button. */
.login-btn[b-419j4x822u] {
    width: 100%;
    padding: 12px;
    background-color: #4CAF50;
    color: #ffffff;
    font-weight: bold;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
}

.login-btn:hover:not(:disabled)[b-419j4x822u] {
    background-color: #43A047;
}

.login-btn:disabled[b-419j4x822u] {
    background-color: #A5D6A7;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Housemate list — no list decoration, stacked with gap. */
.housemate-list[b-419j4x822u] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Housemate row button — full-width flex row with subtle border. */
.housemate-row[b-419j4x822u] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    color: #111827;
}

/* Hover state — brand green outline with drop shadow. */
.housemate-row:hover[b-419j4x822u] {
    outline: 2px solid #4CAF50;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Housemate avatar — 36×36px colored rounded square with white initial. */
.housemate-avatar[b-419j4x822u] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #ffffff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

/* Housemate name — bold, fills remaining row space. */
.housemate-name[b-419j4x822u] {
    font-weight: bold;
    flex: 1;
}
/* /Pages/PushHelpPage.razor.rz.scp.css */
.push-help[b-mtget1qt4r] {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
}

.push-help__title[b-mtget1qt4r] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1a1a2e;
}

.push-help__intro[b-mtget1qt4r] {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
    margin-bottom: 24px;
}

.push-help__section[b-mtget1qt4r] {
    margin-bottom: 24px;
}

.push-help__section-title[b-mtget1qt4r] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a1a2e;
}

.push-help__steps[b-mtget1qt4r] {
    padding-left: 20px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #444;
}

.push-help__note[b-mtget1qt4r] {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
    margin-top: 16px;
    margin-bottom: 24px;
}

.push-help__back[b-mtget1qt4r] {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4a6fa5;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.push-help__back:hover[b-mtget1qt4r] {
    background-color: #3d5d8a;
}