/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* styles preserved; no changes required for rename */

/* Mobile-first adjustments for MainLayout */
.page[b-asdn20in5f] {
    padding-top: env(safe-area-inset-top);
}

.top-header[b-asdn20in5f] {
    padding: 0.5rem;
    font-size: 1rem;
}

main[b-asdn20in5f] {
    padding: 0.5rem 0;
}

.sidebar-border[b-asdn20in5f] {
    border-top: 1px solid var(--surface-contrast);
}

@media (min-width: 992px) {
    .sidebar-border[b-asdn20in5f] {
        border-top: none;
        border-left: 1px solid var(--surface-contrast);
    }
}

@media (max-width: 767.98px) {
    .top-header[b-asdn20in5f] {
        /* header still exists so position:fixed children (mobile-bottom-nav) render,
           but there's no visible content here on mobile */
        padding: 0;
        background: transparent;
        box-shadow: none;
        /* Drop sticky on mobile — sticky+z-index creates a stacking context that
           breaks backdrop-filter on the fixed bottom nav inside it (WKWebView). */
        position: static !important;
        top: auto !important;
        z-index: auto !important;
    }
    main[b-asdn20in5f] {
        padding: 0 0 var(--bottom-nav-space) 0;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-brand[b-q27qflgu53] {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff !important;
    margin-right: 1.5rem;
}

.nav-item[b-q27qflgu53] {
    font-size: 0.875rem;
}

.nav-item[b-q27qflgu53]  .nav-link {
    color: rgba(226, 232, 240, 0.85);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.nav-item[b-q27qflgu53]  a.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 500;
}

.nav-item[b-q27qflgu53]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.member-picker-btn[b-q27qflgu53] {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    color: rgba(226, 232, 240, 0.95);
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.member-picker-btn:hover[b-q27qflgu53] {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.member-picker-btn.is-dependent[b-q27qflgu53] {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.45);
    color: #fde68a;
}

.member-picker-menu[b-q27qflgu53] {
    min-width: 220px;
}

/* Compact icon-only button (theme toggle, view-mode, user menu) */
.nav-icon-btn[b-q27qflgu53] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(226, 232, 240, 0.85);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-icon-btn:hover[b-q27qflgu53] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Account dropdown */
.nav-dropdown[b-q27qflgu53] {
    --bs-dropdown-bg: #1a3050;
    --bs-dropdown-link-color: #e2e8f0;
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-divider-bg: rgba(255, 255, 255, 0.1);
    min-width: 180px;
    padding: 0.25rem 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #1a3050;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.nav-dropdown .dropdown-item[b-q27qflgu53] {
    color: #e2e8f0;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    transition: background 0.12s ease, color 0.12s ease;
}

.nav-dropdown .dropdown-item:hover[b-q27qflgu53],
.nav-dropdown .dropdown-item:focus[b-q27qflgu53] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-dropdown .dropdown-item button[b-q27qflgu53] {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    width: 100%;
    text-align: left;
}

.nav-dropdown .dropdown-divider[b-q27qflgu53] {
    border-color: rgba(255, 255, 255, 0.12);
    margin: 0.25rem 0;
}

/* ::deep needed for Blazor scoped CSS to reach NavLink's anchor */
.nav-dropdown[b-q27qflgu53]  a.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

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

@media (max-width: 767.98px) {
    .desktop-nav[b-q27qflgu53] {
        display: none !important;
    }

    .mobile-bottom-nav[b-q27qflgu53] {
        display: flex;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: calc(4px + env(safe-area-inset-bottom));
        z-index: var(--z-nav, 1030);
        background: var(--glass-bg);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        border: var(--glass-border);
        border-radius: var(--radius-pill);
        box-shadow: var(--shadow-pop);
        padding: 6px 10px;
        justify-content: space-around;
        align-items: stretch;
        overflow: hidden;
        isolation: isolate;
    }

    .mobile-bottom-nav[b-q27qflgu53]::before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(env(safe-area-inset-bottom) + 18px);
        background: rgba(249, 249, 249, 0.55);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
        backdrop-filter: saturate(180%) blur(24px);
        z-index: -1;
        pointer-events: none;
    }

    .mobile-bottom-nav[b-q27qflgu53]  .mbn-item {
        flex: 1 1 0;
        min-height: var(--tap-min, 44px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 2px;
        color: rgba(60, 60, 67, 0.65);
        text-decoration: none;
        font-family: var(--font-system);
        font-size: 10px;
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0.12px;
        text-align: center;
        transition: color 0.15s ease-out, transform 0.12s ease-out;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav[b-q27qflgu53]  .mbn-item:active {
        opacity: 0.55;
        transform: scale(0.94);
    }

    .mobile-bottom-nav[b-q27qflgu53]  .mbn-item i {
        font-size: 22px;
        width: auto;
        height: auto;
        margin: 0;
        top: 0;
        background: transparent;
        line-height: 1;
        padding: 5px 12px;
        border-radius: 9999px;
        transition: background-color 0.15s ease-out, color 0.15s ease-out;
    }

    .mobile-bottom-nav[b-q27qflgu53]  .mbn-item.active {
        color: var(--accent);
    }

    .mobile-bottom-nav[b-q27qflgu53]  .mbn-item.active i {
        background-color: rgba(var(--accent-rgb), 0.14);
    }
}

/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-biutv8txll],
.components-reconnect-repeated-attempt-visible[b-biutv8txll],
.components-reconnect-failed-visible[b-biutv8txll],
.components-pause-visible[b-biutv8txll],
.components-resume-failed-visible[b-biutv8txll],
.components-rejoining-animation[b-biutv8txll] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-biutv8txll],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-biutv8txll],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-biutv8txll],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-biutv8txll],
#components-reconnect-modal.components-reconnect-retrying[b-biutv8txll],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-biutv8txll],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-biutv8txll],
#components-reconnect-modal.components-reconnect-failed[b-biutv8txll],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-biutv8txll] {
    display: block;
}


#components-reconnect-modal[b-biutv8txll] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-biutv8txll 0.5s both;
}

#components-reconnect-modal[open][b-biutv8txll] {
    animation: components-reconnect-modal-slideUp-b-biutv8txll 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-biutv8txll 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-biutv8txll]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-biutv8txll 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-biutv8txll {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-biutv8txll {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-biutv8txll {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
/* /Components/Pages/Admin/AdminSettings.razor.rz.scp.css */
.admin-card[b-nl5lvdfh4a] {
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 0.875rem;
    overflow: hidden;
    background: #fff;
}

.admin-card__header[b-nl5lvdfh4a] {
    padding: 0.65rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.admin-toggle[b-nl5lvdfh4a] {
    width: 2.5rem;
    height: 1.35rem;
    cursor: pointer;
}

.admin-matrix[b-nl5lvdfh4a] {
    margin: 0;
    background: #fff;
}

.admin-matrix thead th[b-nl5lvdfh4a] {
    background: #f8fafc;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.admin-matrix__feature[b-nl5lvdfh4a] {
    width: 60%;
    padding: 0.85rem 1rem;
}

.admin-matrix tbody td.admin-matrix__feature[b-nl5lvdfh4a] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.admin-matrix__name[b-nl5lvdfh4a] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
}

.admin-matrix__key[b-nl5lvdfh4a] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-family: monospace;
}

.admin-matrix__device[b-nl5lvdfh4a] {
    width: 6rem;
    padding: 0.6rem 0.5rem;
}

.admin-matrix__cell[b-nl5lvdfh4a] {
    padding: 0.85rem 0.5rem;
    vertical-align: middle;
}

.admin-matrix__absent[b-nl5lvdfh4a] {
    color: #cbd5e1;
    font-size: 1.1rem;
    user-select: none;
}

.admin-matrix tbody tr[b-nl5lvdfh4a] {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.admin-matrix tbody tr:last-child[b-nl5lvdfh4a] { border-bottom: none; }

/* /Components/Pages/Admin/Rls/RlsTester.razor.rz.scp.css */
.rls-shell[b-zgdvwsagrv] {
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 0 1rem 3rem;
}

.rls-header h2[b-zgdvwsagrv] {
    margin: 0 0 0.25rem;
    font-weight: 700;
}

.rls-sub[b-zgdvwsagrv] {
    color: var(--bs-secondary-color, #6c757d);
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}

.rls-loading[b-zgdvwsagrv] {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}

.rls-grid[b-zgdvwsagrv] {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.rls-card--wide[b-zgdvwsagrv] {
    grid-column: 1 / -1;
}

.rls-card[b-zgdvwsagrv] {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #e2e2e2);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rls-card__head[b-zgdvwsagrv] {
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color, #e2e2e2);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.rls-card__body[b-zgdvwsagrv] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rls-field[b-zgdvwsagrv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.rls-field span[b-zgdvwsagrv] {
    color: var(--bs-secondary-color, #6c757d);
}

.rls-actor__row[b-zgdvwsagrv] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    padding: 0.15rem 0;
}

.rls-actor__label[b-zgdvwsagrv] {
    color: var(--bs-secondary-color, #6c757d);
}

.rls-actor__value[b-zgdvwsagrv] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-all;
    text-align: right;
}

.rls-meta[b-zgdvwsagrv] {
    border-left: 3px solid var(--bs-primary, #0d6efd);
    padding: 0.5rem 0.75rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-radius: 4px;
    margin-top: 0.25rem;
}

.rls-meta__path[b-zgdvwsagrv] {
    display: block;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.rls-hint[b-zgdvwsagrv] {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
}

.rls-body[b-zgdvwsagrv] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
}

.rls-resetbody[b-zgdvwsagrv] {
    align-self: flex-start;
    padding: 0;
}

.rls-empty[b-zgdvwsagrv] {
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
    padding: 1.5rem 0;
}

.rls-resmeta[b-zgdvwsagrv] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.rls-status[b-zgdvwsagrv] {
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: #eee;
}

.rls-status--ok[b-zgdvwsagrv] { background: #d1e7dd; color: #0a3622; }
.rls-status--client[b-zgdvwsagrv] { background: #fff3cd; color: #664d03; }
.rls-status--server[b-zgdvwsagrv] { background: #f8d7da; color: #58151c; }
.rls-status--err[b-zgdvwsagrv] { background: #e2e3e5; color: #41464b; }
.rls-status--info[b-zgdvwsagrv] { background: #cff4fc; color: #055160; }

.rls-resmeta__text[b-zgdvwsagrv] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
    flex: 1;
}

.rls-resmeta__elapsed[b-zgdvwsagrv] {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8rem;
}

.rls-details[b-zgdvwsagrv] {
    margin-top: 0.6rem;
    border: 1px solid var(--bs-border-color, #e2e2e2);
    border-radius: 6px;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.rls-details > summary[b-zgdvwsagrv] {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
}

.rls-pre[b-zgdvwsagrv] {
    margin: 0;
    padding: 0.75rem;
    border-top: 1px solid var(--bs-border-color, #e2e2e2);
    font-size: 0.78rem;
    background: var(--bs-body-bg, #fff);
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 60vh;
}

@media (max-width: 800px) {
    .rls-grid[b-zgdvwsagrv] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/Supplements/SupplementsAdmin.razor.rz.scp.css */
.admin-card[b-vqj7fwiz8i] {
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 0.875rem;
    overflow: hidden;
    background: #fff;
}

.admin-card__header[b-vqj7fwiz8i] {
    padding: 0.65rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.admin-row[b-vqj7fwiz8i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.admin-row:last-child[b-vqj7fwiz8i] {
    border-bottom: none;
}

.admin-row__info[b-vqj7fwiz8i] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.admin-row__name[b-vqj7fwiz8i] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1e293b;
}

.admin-row__key[b-vqj7fwiz8i] {
    font-size: 0.75rem;
    color: #94a3b8;
}
/* /Components/Pages/Auth/ForgotPassword.razor.rz.scp.css */
.forgot-page[b-tdq7tmo1kg] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom));
    background: var(--bg);
    background-image:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.forgot-shell[b-tdq7tmo1kg] {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.25rem;
}

.forgot-header[b-tdq7tmo1kg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
}

.forgot-mark[b-tdq7tmo1kg] {
    width: 64px;
    height: 64px;
    border-radius: 24%;
    overflow: hidden;
    margin: 0 auto 1rem;
    box-shadow:
        0 18px 36px rgba(80, 60, 200, 0.28),
        0 4px 10px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.forgot-mark img[b-tdq7tmo1kg] {
    display: block;
    width: 100%;
    height: 100%;
}

.forgot-title[b-tdq7tmo1kg] {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
    color: inherit;
    outline: none;
}

.forgot-subtitle[b-tdq7tmo1kg] {
    font-size: 1rem;
    line-height: 1.35;
    color: var(--muted);
    margin: 0.15rem 0 0;
    letter-spacing: -0.01em;
    max-width: 280px;
}

.forgot-shell[b-tdq7tmo1kg]  .forgot-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

.forgot-field-group[b-tdq7tmo1kg] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.forgot-field[b-tdq7tmo1kg] {
    position: relative;
}

.forgot-field-group[b-tdq7tmo1kg]  .forgot-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    padding: 1.05rem 1.1rem !important;
    margin: 0 !important;
    font: inherit !important;
    font-size: 1rem !important;
    color: #1f2937 !important;
    color-scheme: light;
    caret-color: var(--accent);
    outline: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background 120ms ease;
}

.forgot-field-group[b-tdq7tmo1kg]  .forgot-input:-webkit-autofill,
.forgot-field-group[b-tdq7tmo1kg]  .forgot-input:-webkit-autofill:focus {
    -webkit-text-fill-color: inherit !important;
    -webkit-box-shadow: 0 0 0 1000px var(--card-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.forgot-field-group[b-tdq7tmo1kg]  .forgot-input::placeholder {
    color: var(--muted);
    opacity: 0.85;
}

.forgot-field-group[b-tdq7tmo1kg]  .forgot-input:focus,
.forgot-field-group[b-tdq7tmo1kg]  .forgot-input:focus-visible {
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    outline: none !important;
}

.forgot-field-group[b-tdq7tmo1kg]  .forgot-input.valid,
.forgot-field-group[b-tdq7tmo1kg]  .forgot-input.modified,
.forgot-field-group[b-tdq7tmo1kg]  .forgot-input.invalid,
.forgot-field-group[b-tdq7tmo1kg]  .forgot-input:valid,
.forgot-field-group[b-tdq7tmo1kg]  .forgot-input:invalid {
    padding: 1.05rem 1.1rem !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
}

.forgot-field[b-tdq7tmo1kg]  .forgot-validation {
    display: block;
    color: #ff453a;
    font-size: 0.82rem;
    padding: 0 1.1rem 0.6rem;
}

.forgot-error[b-tdq7tmo1kg] {
    background: color-mix(in srgb, #ff453a 12%, transparent);
    color: #c0271d;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
    text-align: center;
    border: 1px solid color-mix(in srgb, #ff453a 25%, transparent);
}

.forgot-success[b-tdq7tmo1kg] {
    background: color-mix(in srgb, #34c759 14%, transparent);
    color: color-mix(in srgb, #34c759 80%, #000);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    text-align: center;
    border: 1px solid color-mix(in srgb, #34c759 28%, transparent);
    line-height: 1.45;
}

.forgot-primary[b-tdq7tmo1kg] {
    appearance: none;
    border: 0;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    transition: transform 80ms ease, background 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent);
}

.forgot-primary:hover:not(:disabled)[b-tdq7tmo1kg] {
    background: color-mix(in srgb, var(--accent) 92%, #000);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent);
}

.forgot-primary:active:not(:disabled)[b-tdq7tmo1kg] {
    transform: scale(0.985);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}

.forgot-primary:disabled[b-tdq7tmo1kg] {
    opacity: 0.7;
    cursor: progress;
}

.forgot-link[b-tdq7tmo1kg] {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--accent);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.6rem;
    align-self: center;
    transition: opacity 120ms ease;
}

.forgot-link:hover[b-tdq7tmo1kg] {
    opacity: 0.75;
}

.forgot-spinner[b-tdq7tmo1kg] {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: forgot-spin-b-tdq7tmo1kg 700ms linear infinite;
}

@keyframes forgot-spin-b-tdq7tmo1kg {
    to { transform: rotate(360deg); }
}

@media (min-height: 720px) {
    .forgot-page[b-tdq7tmo1kg] {
        align-items: flex-start;
        padding-top: clamp(3rem, 12vh, 6rem);
    }
}

@media (max-width: 360px) {
    .forgot-title[b-tdq7tmo1kg] { font-size: 1.75rem; }
    .forgot-mark[b-tdq7tmo1kg] { width: 56px; height: 56px; }
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
.login-page[b-t3bckw96ru] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom));
    background: var(--bg);
    /* Soft bloom behind the form — adds the depth iOS gives you for free
       when you sit a sheet on top of a Live Activity / dynamic background.
       Falls back to flat var(--bg) if any of these mixes aren't supported. */
    background-image:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.login-shell[b-t3bckw96ru] {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.25rem;
}

.login-header[b-t3bckw96ru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
}

.login-mark[b-t3bckw96ru] {
    width: 64px;
    height: 64px;
    border-radius: 24%;
    overflow: hidden;
    margin: 0 auto 1rem;
    /* iOS app-icon style: tight inner shadow plus a soft outer glow */
    box-shadow:
        0 18px 36px rgba(80, 60, 200, 0.28),
        0 4px 10px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.login-mark svg[b-t3bckw96ru],
.login-mark img[b-t3bckw96ru] {
    display: block;
    width: 100%;
    height: 100%;
}

.login-title[b-t3bckw96ru] {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
    color: inherit;
    /* MAUI WebView occasionally shows a focus rectangle on the first heading
       it encounters during initial render. The title isn't interactive, so
       suppress the outline outright. */
    outline: none;
}

.login-title:focus[b-t3bckw96ru],
.login-title:focus-visible[b-t3bckw96ru] {
    outline: none;
}

.login-subtitle[b-t3bckw96ru] {
    font-size: 1rem;
    line-height: 1.35;
    color: var(--muted);
    margin: 0.15rem 0 0;
    letter-spacing: -0.01em;
    max-width: 280px;
}

/* <EditForm> is a Blazor component — its rendered <form> doesn't carry the
   scoped attribute either, so target it through ::deep from .login-shell
   (which IS in scope). Without this, the gap between the field-group and
   the Sign-In button silently dropped and the button visually butted up
   against the password row. */
.login-shell[b-t3bckw96ru]  .login-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

.login-field-group[b-t3bckw96ru] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    /* Slightly stronger border than var(--surface-contrast) so the field
       group reads as a clear container against both light and dark pages. */
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.login-field[b-t3bckw96ru] {
    position: relative;
}

/* Hairline divider between Email and Password rows. As a real top border on
   the second field instead of an absolutely-positioned ::before — the old
   approach drew on the row above and used --surface-contrast (≈6% white in
   dark mode), which on a navy card was essentially invisible. */
.login-field + .login-field[b-t3bckw96ru] {
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

/* `::deep` is essential here. <InputText> renders its <input> in its own
   component scope, so the scoped-CSS attribute (`b-xyz`) Blazor injects on
   Login.razor never lands on the actual input. Without ::deep, the
   `width: 100%` rule silently drops and the input renders at its default
   20-character intrinsic width — that's the narrow-input-inside-wide-card
   artifact that was visible on the dark-mode screenshots. */
.login-field-group[b-t3bckw96ru]  .login-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    padding: 1.05rem 1.1rem !important;
    margin: 0 !important;
    font: inherit !important;
    font-size: 1rem !important;
    color: #1f2937 !important;
    color-scheme: light;
    caret-color: var(--accent);
    outline: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background 120ms ease;
}

/* Kill iOS' yellow autofill background which otherwise overrides our
   transparent fill once the user lets the keychain populate the form. */
.login-field-group[b-t3bckw96ru]  .login-input:-webkit-autofill,
.login-field-group[b-t3bckw96ru]  .login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: inherit !important;
    -webkit-box-shadow: 0 0 0 1000px var(--card-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.login-field-group[b-t3bckw96ru]  .login-input::placeholder {
    color: var(--muted);
    opacity: 0.85;
}

.login-field-group[b-t3bckw96ru]  .login-input:focus,
.login-field-group[b-t3bckw96ru]  .login-input:focus-visible {
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    outline: none !important;
}

/* Blazor validation state classes (valid/modified/invalid) and browser :valid/:invalid
   must not change the input geometry — Bootstrap checkmark icon adds padding-right and
   background-image that visually shrink the input relative to its container. */
.login-field-group[b-t3bckw96ru]  .login-input.valid,
.login-field-group[b-t3bckw96ru]  .login-input.modified,
.login-field-group[b-t3bckw96ru]  .login-input.invalid,
.login-field-group[b-t3bckw96ru]  .login-input:valid,
.login-field-group[b-t3bckw96ru]  .login-input:invalid {
    padding: 1.05rem 1.1rem !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
}

/* <ValidationMessage> is a Blazor component too — same ::deep treatment. */
.login-field[b-t3bckw96ru]  .login-validation {
    display: block;
    color: #ff453a;
    font-size: 0.82rem;
    padding: 0 1.1rem 0.6rem;
}

.login-error[b-t3bckw96ru] {
    background: color-mix(in srgb, #ff453a 12%, transparent);
    color: #c0271d;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
    text-align: center;
    border: 1px solid color-mix(in srgb, #ff453a 25%, transparent);
}

.login-primary[b-t3bckw96ru] {
    appearance: none;
    border: 0;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 14px;
    /* ~50px tall — iOS-standard primary CTA touch target */
    padding: 1rem 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    transition: transform 80ms ease, background 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent);
}

.login-primary:hover:not(:disabled)[b-t3bckw96ru] {
    background: color-mix(in srgb, var(--accent) 92%, #000);
    transform: none;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent);
}

.login-primary:active:not(:disabled)[b-t3bckw96ru] {
    transform: scale(0.985);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}

.login-primary:disabled[b-t3bckw96ru] {
    opacity: 0.7;
    cursor: progress;
}

.login-link[b-t3bckw96ru] {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--accent);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.6rem;
    align-self: center;
    transition: opacity 120ms ease;
}

.login-link:hover[b-t3bckw96ru] {
    opacity: 0.75;
    transform: none;
    box-shadow: none;
}

.login-link--muted[b-t3bckw96ru] {
    color: var(--muted);
    font-size: 0.88rem;
}

.login-spinner[b-t3bckw96ru] {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: login-spin-b-t3bckw96ru 700ms linear infinite;
}

@keyframes login-spin-b-t3bckw96ru {
    to { transform: rotate(360deg); }
}

.login-divider[b-t3bckw96ru] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.login-divider[b-t3bckw96ru]::before,
.login-divider[b-t3bckw96ru]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, currentColor 18%, transparent);
}

.login-apple[b-t3bckw96ru] {
    appearance: none;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    background: var(--card-bg);
    color: inherit;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.login-apple:hover:not(:disabled)[b-t3bckw96ru] {
    background: color-mix(in srgb, var(--card-bg) 85%, currentColor);
}

.login-apple:active:not(:disabled)[b-t3bckw96ru] {
    transform: scale(0.985);
}

.login-apple:disabled[b-t3bckw96ru] {
    opacity: 0.6;
    cursor: progress;
}

.login-apple-icon[b-t3bckw96ru] {
    width: 1.1rem;
    height: 1.1rem;
    fill: currentColor;
    flex-shrink: 0;
}

.login-google[b-t3bckw96ru] {
    appearance: none;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    background: var(--card-bg);
    color: inherit;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.login-google:hover:not(:disabled)[b-t3bckw96ru] {
    background: color-mix(in srgb, var(--card-bg) 85%, currentColor);
}

.login-google:active:not(:disabled)[b-t3bckw96ru] {
    transform: scale(0.985);
}

.login-google:disabled[b-t3bckw96ru] {
    opacity: 0.6;
    cursor: progress;
}

.login-google-icon[b-t3bckw96ru] {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

/* On tall mobile viewports, anchor the shell slightly above center the way
   iOS auth screens do — pure dead-center looks bottom-heavy with the keyboard. */
@media (min-height: 720px) {
    .login-page[b-t3bckw96ru] {
        align-items: flex-start;
        padding-top: clamp(3rem, 12vh, 6rem);
    }
}

/* Phone-sized viewports: keep the title scale punchy without overflowing. */
@media (max-width: 360px) {
    .login-title[b-t3bckw96ru] { font-size: 1.75rem; }
    .login-mark[b-t3bckw96ru] { width: 56px; height: 56px; }
}
/* /Components/Pages/Auth/MagicLinkFinish.razor.rz.scp.css */
.ml-finish[b-8meqn669gw] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--bg);
    color: inherit;
}

.ml-finish-card[b-8meqn669gw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    max-width: 360px;
    text-align: center;
}

.ml-finish-spinner[b-8meqn669gw] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-top-color: var(--accent);
    animation: ml-finish-spin-b-8meqn669gw 700ms linear infinite;
}

@keyframes ml-finish-spin-b-8meqn669gw {
    to { transform: rotate(360deg); }
}

.ml-finish-status[b-8meqn669gw] {
    margin: 0;
    font-size: 1rem;
    color: var(--muted);
}

.ml-finish-error[b-8meqn669gw] {
    margin: 0;
    font-size: 0.95rem;
    color: #c0271d;
}

.ml-finish-link[b-8meqn669gw] {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.95rem;
}

.ml-finish-link:hover[b-8meqn669gw] {
    text-decoration: underline;
}
/* /Components/Pages/Auth/ResetPassword.razor.rz.scp.css */
.reset-page[b-6na56p2ddx] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom));
    background: var(--bg);
    background-image:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 60%);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.reset-shell[b-6na56p2ddx] {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.25rem;
}

.reset-header[b-6na56p2ddx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
}

.reset-mark[b-6na56p2ddx] {
    width: 64px;
    height: 64px;
    border-radius: 24%;
    overflow: hidden;
    margin: 0 auto 1rem;
    box-shadow:
        0 18px 36px rgba(80, 60, 200, 0.28),
        0 4px 10px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.reset-mark img[b-6na56p2ddx] {
    display: block;
    width: 100%;
    height: 100%;
}

.reset-title[b-6na56p2ddx] {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
    color: inherit;
    outline: none;
}

.reset-loading[b-6na56p2ddx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.reset-status[b-6na56p2ddx] {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0;
}

.reset-shell[b-6na56p2ddx]  .reset-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

.reset-field-group[b-6na56p2ddx] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.reset-field[b-6na56p2ddx] {
    position: relative;
}

.reset-field + .reset-field[b-6na56p2ddx] {
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.reset-field-group[b-6na56p2ddx]  .reset-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    padding: 1.05rem 1.1rem !important;
    margin: 0 !important;
    font: inherit !important;
    font-size: 1rem !important;
    color: #1f2937 !important;
    color-scheme: light;
    caret-color: var(--accent);
    outline: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background 120ms ease;
}

.reset-field-group[b-6na56p2ddx]  .reset-input:-webkit-autofill,
.reset-field-group[b-6na56p2ddx]  .reset-input:-webkit-autofill:focus {
    -webkit-text-fill-color: inherit !important;
    -webkit-box-shadow: 0 0 0 1000px var(--card-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.reset-field-group[b-6na56p2ddx]  .reset-input::placeholder {
    color: var(--muted);
    opacity: 0.85;
}

.reset-field-group[b-6na56p2ddx]  .reset-input:focus,
.reset-field-group[b-6na56p2ddx]  .reset-input:focus-visible {
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
    outline: none !important;
}

.reset-field-group[b-6na56p2ddx]  .reset-input.valid,
.reset-field-group[b-6na56p2ddx]  .reset-input.modified,
.reset-field-group[b-6na56p2ddx]  .reset-input.invalid,
.reset-field-group[b-6na56p2ddx]  .reset-input:valid,
.reset-field-group[b-6na56p2ddx]  .reset-input:invalid {
    padding: 1.05rem 1.1rem !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
}

.reset-field[b-6na56p2ddx]  .reset-validation {
    display: block;
    color: #ff453a;
    font-size: 0.82rem;
    padding: 0 1.1rem 0.6rem;
}

.reset-error-card[b-6na56p2ddx] {
    background: color-mix(in srgb, #ff453a 12%, transparent);
    color: #c0271d;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
    text-align: center;
    border: 1px solid color-mix(in srgb, #ff453a 25%, transparent);
}

.reset-success[b-6na56p2ddx] {
    background: color-mix(in srgb, #34c759 14%, transparent);
    color: color-mix(in srgb, #34c759 80%, #000);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    text-align: center;
    border: 1px solid color-mix(in srgb, #34c759 28%, transparent);
    line-height: 1.45;
}

.reset-primary[b-6na56p2ddx] {
    appearance: none;
    border: 0;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    transition: transform 80ms ease, background 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent);
}

.reset-primary:hover:not(:disabled)[b-6na56p2ddx] {
    background: color-mix(in srgb, var(--accent) 92%, #000);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent);
}

.reset-primary:active:not(:disabled)[b-6na56p2ddx] {
    transform: scale(0.985);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}

.reset-primary:disabled[b-6na56p2ddx] {
    opacity: 0.7;
    cursor: progress;
}

.reset-link[b-6na56p2ddx] {
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    align-self: center;
    transition: opacity 120ms ease;
}

.reset-link:hover[b-6na56p2ddx] {
    opacity: 0.75;
}

.reset-spinner[b-6na56p2ddx] {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-top-color: var(--accent);
    animation: reset-spin-b-6na56p2ddx 700ms linear infinite;
}

.reset-btn-spinner[b-6na56p2ddx] {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    animation: reset-spin-b-6na56p2ddx 700ms linear infinite;
}

@keyframes reset-spin-b-6na56p2ddx {
    to { transform: rotate(360deg); }
}

@media (min-height: 720px) {
    .reset-page[b-6na56p2ddx] {
        align-items: flex-start;
        padding-top: clamp(3rem, 12vh, 6rem);
    }
}

@media (max-width: 360px) {
    .reset-title[b-6na56p2ddx] { font-size: 1.75rem; }
    .reset-mark[b-6na56p2ddx] { width: 56px; height: 56px; }
}
/* /Components/Pages/Auth/Signup.razor.rz.scp.css */
/* Styles for Signup */
/* /Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* ============================================================
   Color-coded dashboard sections
   ============================================================ */

.dash-section[b-jeqfg2mxwc] {
    --section-color: 13, 110, 253;
    margin-top: 1.5rem;
}

.dash-section--medications[b-jeqfg2mxwc] { --section-color: 236, 72, 153; }   /* pink */
.dash-section--care[b-jeqfg2mxwc]        { --section-color: 34, 197, 94; }    /* green */
.dash-section--admin[b-jeqfg2mxwc]       { --section-color: 220, 38, 38; }    /* red */

.dash-section__header[b-jeqfg2mxwc] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
    padding-left: 0.1rem;
}

.dash-section__icon[b-jeqfg2mxwc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.5rem;
    background: rgba(var(--section-color), 0.12);
    color: rgb(var(--section-color));
    font-size: 1rem;
}

.dash-section__title[b-jeqfg2mxwc] {
    margin: 0;
    flex-grow: 1;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
}

.dash-card-grid[b-jeqfg2mxwc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.dash-card[b-jeqfg2mxwc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border: 1px solid rgba(var(--section-color), 0.18);
    background: linear-gradient(180deg,
        rgba(var(--section-color), 0.05),
        rgba(var(--section-color), 0.02));
    border-radius: 0.85rem;
    padding: 0.85rem 0.95rem;
    text-align: left;
    cursor: pointer;
    appearance: none;
    outline: none;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease,
                background 0.15s ease;
}

.dash-card:hover[b-jeqfg2mxwc],
.dash-card:focus-visible[b-jeqfg2mxwc] {
    border-color: rgba(var(--section-color), 0.55);
    background: linear-gradient(180deg,
        rgba(var(--section-color), 0.10),
        rgba(var(--section-color), 0.04));
    box-shadow: 0 4px 12px rgba(var(--section-color), 0.16);
    color: inherit;
    text-decoration: none;
}

.dash-card:active[b-jeqfg2mxwc] { transform: scale(0.985); }

.dash-card__icon[b-jeqfg2mxwc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgb(var(--section-color));
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.dash-card__body[b-jeqfg2mxwc] {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dash-card__name[b-jeqfg2mxwc] {
    font-size: 1.0rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.25;
}

.dash-card__desc[b-jeqfg2mxwc] {
    font-size: 0.825rem;
    color: #64748b;
}

.dash-card__arrow[b-jeqfg2mxwc] {
    color: rgba(var(--section-color), 0.7);
    font-size: 1.1rem;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .dash-card-grid[b-jeqfg2mxwc] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.6rem;
    }
    .dash-section[b-jeqfg2mxwc] { margin-top: 1.25rem; }
    .dash-section__title[b-jeqfg2mxwc] { font-size: 1rem; }
}

/* 7-day mood dots */
.mood-dots[b-jeqfg2mxwc] {
    display: flex;
    gap: 0;
    margin-bottom: 0.625rem;
}

.mood-dot[b-jeqfg2mxwc] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
}

.mood-dot--green[b-jeqfg2mxwc]  { background: #22c55e; }
.mood-dot--orange[b-jeqfg2mxwc] { background: #f97316; }
.mood-dot--red[b-jeqfg2mxwc]    { background: #ef4444; }
.mood-dot--empty[b-jeqfg2mxwc]  { background: transparent; border: 1.5px solid #cbd5e1; }

.trend--improving[b-jeqfg2mxwc] { color: #22c55e; }
.trend--worsening[b-jeqfg2mxwc] { color: #ef4444; }
.trend--stable[b-jeqfg2mxwc]    { color: #94a3b8; }

/* /Components/Pages/Export/ExportData.razor.rz.scp.css */
.export-page[b-b2t8rgifh2] {
    max-width: 720px;
}

.export-sections[b-b2t8rgifh2] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
/* /Components/Pages/HealthKit/HealthKitSettings.razor.rz.scp.css */
.healthkit-page[b-nv15e2vk6g] {
    max-width: 720px;
    padding: 1.25rem;
    color: var(--text-primary);
}

.healthkit-page h1[b-nv15e2vk6g],
.healthkit-page h2[b-nv15e2vk6g],
.healthkit-page h3[b-nv15e2vk6g],
.healthkit-page p[b-nv15e2vk6g],
.healthkit-page label[b-nv15e2vk6g],
.healthkit-page strong[b-nv15e2vk6g],
.healthkit-page span[b-nv15e2vk6g],
.healthkit-page li[b-nv15e2vk6g],
.healthkit-page summary[b-nv15e2vk6g],
.healthkit-page .form-check-label[b-nv15e2vk6g],
.healthkit-page .form-label[b-nv15e2vk6g] {
    color: var(--text-primary);
}

.healthkit-page h1[b-nv15e2vk6g] {
    margin-bottom: 0.5rem;
}

.healthkit-page .text-muted[b-nv15e2vk6g],
.healthkit-page .hk-muted[b-nv15e2vk6g] {
    color: var(--muted) !important;
}

.healthkit-page .card[b-nv15e2vk6g],
.healthkit-page .card-body[b-nv15e2vk6g],
.healthkit-page .card-header[b-nv15e2vk6g] {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--surface-contrast);
}

.healthkit-page .form-control[b-nv15e2vk6g] {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--hairline);
}

.healthkit-page .form-control[b-nv15e2vk6g]::placeholder {
    color: var(--muted);
}

/* Generic card surface used by status + sections */
.hk-card[b-nv15e2vk6g] {
    background: var(--card-bg);
    border: 1px solid var(--surface-contrast);
    border-radius: var(--radius-card);
    padding: 0.875rem 1rem;
}

/* A. Live status card */
.hk-status-card[b-nv15e2vk6g] {
    margin-top: 1rem;
    transition: border-color 200ms ease, background 200ms ease;
}

.hk-status-card.is-syncing[b-nv15e2vk6g] {
    border-color: var(--accent);
}

.hk-status-card.is-failed[b-nv15e2vk6g] {
    border-color: var(--danger);
    background: rgba(var(--danger-rgb), 0.06);
}

.hk-status-head[b-nv15e2vk6g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.hk-status-title[b-nv15e2vk6g] {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
}

.hk-status-sub[b-nv15e2vk6g] {
    font-size: 0.85rem;
    opacity: 0.75;
    margin-top: 0.15rem;
}

.hk-progress[b-nv15e2vk6g] {
    height: 6px;
    margin-top: 0.75rem;
    border-radius: 3px;
}

/* Section header style shared across data types / recent activity / bg */
.hk-section[b-nv15e2vk6g] {
    margin-top: 1.5rem;
}

.hk-section-title[b-nv15e2vk6g] {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}

/* B. Per-type rows */
.hk-type-group[b-nv15e2vk6g] {
    margin-bottom: 0.75rem;
    border: 1px solid var(--surface-contrast);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--card-bg);
}

.hk-type-group-summary[b-nv15e2vk6g] {
    padding: 0.5rem 0.875rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    background: var(--surface-contrast);
}

.hk-type-group-summary[b-nv15e2vk6g]::-webkit-details-marker {
    display: none;
}

.hk-type-group-summary[b-nv15e2vk6g]::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 150ms ease;
}

.hk-type-group[open] .hk-type-group-summary[b-nv15e2vk6g]::before {
    transform: rotate(90deg);
}

.hk-kind-group[b-nv15e2vk6g] {
    margin-bottom: 0.75rem;
}

.hk-kind-group-title[b-nv15e2vk6g] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.65;
    margin-bottom: 0.25rem;
}

.btn-xs[b-nv15e2vk6g] {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

.hk-types[b-nv15e2vk6g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.25rem 0.75rem;
}

.hk-type-list[b-nv15e2vk6g] {
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent;
}

.hk-type-row[b-nv15e2vk6g] {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.875rem;
    border-bottom: 1px solid var(--hairline);
}

.hk-type-row:last-child[b-nv15e2vk6g] {
    border-bottom: none;
}

.hk-type-name[b-nv15e2vk6g] {
    font-weight: 500;
}

.hk-type-time[b-nv15e2vk6g] {
    font-size: 0.85rem;
}

.hk-type-count[b-nv15e2vk6g] {
    min-width: 3.5rem;
    text-align: right;
}

.hk-muted[b-nv15e2vk6g] {
    opacity: 0.6;
}

.hk-kind-sync-btn[b-nv15e2vk6g] {
    color: var(--muted);
    opacity: 0;
    transition: opacity 150ms ease, color 150ms ease;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hk-type-row:hover .hk-kind-sync-btn[b-nv15e2vk6g],
.hk-kind-sync-btn:focus-visible[b-nv15e2vk6g] {
    opacity: 1;
}

.hk-kind-sync-btn:hover[b-nv15e2vk6g] {
    color: var(--accent) !important;
    opacity: 1;
}

.hk-kind-sync-btn:disabled[b-nv15e2vk6g] {
    pointer-events: none;
    opacity: 0.35;
}

/* Touch devices have no hover — the per-type sync button would be
   permanently invisible (opacity:0). Always show it there, and give it a
   real >=44px tap area (desktop keeps the compact glyph to avoid widening
   the action column). */
@media (hover: none) {
    .hk-kind-sync-btn[b-nv15e2vk6g] {
        opacity: 1;
        min-width: var(--tap-min);
        min-height: var(--tap-min);
    }
}

/* C. Recent activity */
.hk-runs[b-nv15e2vk6g] {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--surface-contrast);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--card-bg);
}

.hk-run[b-nv15e2vk6g] {
    display: grid;
    grid-template-columns: 4.5rem 6rem 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.875rem;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--hairline);
}

.hk-run:last-child[b-nv15e2vk6g] {
    border-bottom: none;
}

.hk-run-time[b-nv15e2vk6g] {
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.hk-trigger[b-nv15e2vk6g] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}

.hk-trigger-manual[b-nv15e2vk6g] {
    background: var(--accent-soft);
    color: var(--accent);
}

.hk-trigger-bg[b-nv15e2vk6g] {
    background: var(--surface-contrast);
    color: var(--muted);
}

.hk-trigger-realtime[b-nv15e2vk6g] {
    background: rgba(var(--success-rgb), 0.16);
    color: var(--success);
}

/* D. Diagnostics list */
.hk-diag-list[b-nv15e2vk6g] {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}

.hk-diag-list li[b-nv15e2vk6g] {
    padding: 0.3rem 0;
    font-size: 0.92rem;
}

.hk-diag-dot[b-nv15e2vk6g] {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
    background: var(--surface-contrast);
}

.hk-diag-dot.on[b-nv15e2vk6g] {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.18);
}

.hk-diag-dot.off[b-nv15e2vk6g] {
    background: var(--muted);
}

/* ---- Mobile: >=44px touch targets + bottom-nav clearance ---- */
@media (max-width: 767.98px) {
    .healthkit-page[b-nv15e2vk6g] {
        padding-bottom: var(--bottom-nav-space);
    }

    /* Action buttons (Connect / Run first sync / Sync now / Retry /
       Run diagnostic / Reset) need a comfortable tap height. Covers the
       full-size primary CTAs (.btn) as well as the small/extra-small
       variants. Icon-only buttons stay square (handled below). */
    .healthkit-page .btn[b-nv15e2vk6g],
    .healthkit-page .btn-sm[b-nv15e2vk6g],
    .healthkit-page .btn-xs[b-nv15e2vk6g] {
        min-height: var(--tap-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Select all / Unselect all chips: keep the visible size readable but
       guarantee the 44px hit height. */
    .healthkit-page .btn-xs[b-nv15e2vk6g] {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    /* Per-type sync glyph: always visible on a small screen and a full
       44px square so it is tappable even on a touch laptop that reports
       hover capability. */
    .healthkit-page .hk-kind-sync-btn[b-nv15e2vk6g] {
        opacity: 1;
        min-width: var(--tap-min);
        min-height: var(--tap-min);
    }
}
/* /Components/Pages/History/History.razor.rz.scp.css */
/* Styles for History */
/* /Components/Pages/Medication/MedicationAddForm.razor.rz.scp.css */
.add-med-card[b-twov4ytm46] {
    border: 1.5px dashed var(--accent);
    background: var(--bs-body-bg);
}

.med-category-toggles[b-twov4ytm46] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.med-category-btn[b-twov4ytm46] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
    background: transparent;
    color: var(--bs-body-color);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.med-category-btn:hover[b-twov4ytm46] {
    background: rgba(0, 0, 0, 0.04);
}

.med-category-btn.is-on[b-twov4ytm46] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

@media (max-width: 767.98px) {
    .med-category-btn[b-twov4ytm46] {
        min-height: var(--tap-min);
    }
}

.med-category-subtypes[b-twov4ytm46] {
    padding-left: 0.5rem;
    border-left: 2px solid rgba(var(--accent-rgb), 0.25);
}

.med-category-btn-sub.is-on[b-twov4ytm46] {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

.med-recents-row[b-twov4ytm46] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.med-recents-label[b-twov4ytm46] {
    margin-right: 0.1rem;
}

.med-recent-chip[b-twov4ytm46] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.med-recent-chip:hover[b-twov4ytm46] {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--accent);
}

.med-recent-chip:active[b-twov4ytm46] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ── Mobile: promote the primary Save action to a full-width, >=44px tap
   target. Cancel stays beside it but also reaches the 44px minimum. Desktop
   keeps the compact inline btn-sm pair. ─────────────────────────────── */
@media (max-width: 767.98px) {
    .med-addform-save[b-twov4ytm46] {
        flex: 1 1 auto;
        min-height: var(--tap-min);
    }

    .med-addform-cancel[b-twov4ytm46] {
        flex: 0 0 auto;
        min-height: var(--tap-min);
    }
}
/* /Components/Pages/Medication/MedicationDetail.razor.rz.scp.css */
.med-detail-page[b-aoioc7db59] {
    max-width: 720px;
}

.dow-toggles[b-aoioc7db59] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.dow-btn[b-aoioc7db59] {
    flex: 1 1 auto;
    min-width: 56px;
    padding: 0.45rem 0.6rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--card-bg, #fff);
    color: #1f2937;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease-out, color 0.15s ease-out, transform 0.12s ease-out;
}

.dow-btn:active[b-aoioc7db59] {
    transform: scale(0.96);
}

.dow-btn.is-on[b-aoioc7db59] {
    background: var(--accent, #512BD4);
    color: #fff;
    border-color: var(--accent, #512BD4);
}

.time-input[b-aoioc7db59] {
    max-width: 160px;
}

.med-category-toggles[b-aoioc7db59] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.med-category-btn[b-aoioc7db59] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
    background: transparent;
    color: var(--bs-body-color);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.med-category-btn:hover[b-aoioc7db59] {
    background: rgba(0, 0, 0, 0.04);
}

.med-category-btn.is-on[b-aoioc7db59] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

@media (max-width: 767.98px) {
    .med-category-btn[b-aoioc7db59] {
        min-height: var(--tap-min);
    }
}

.med-category-btn-sub[b-aoioc7db59] {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
}

.med-category-btn-sub.is-on[b-aoioc7db59] {
    background: rgba(var(--accent-rgb), 0.75);
    border-color: rgba(var(--accent-rgb), 0.75);
}

.intake-week-header[b-aoioc7db59] {
    background: var(--bs-tertiary-bg, #f8f9fa);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-top: 1px solid var(--bs-border-color);
}

.intake-week-header:first-child[b-aoioc7db59] {
    border-top: none;
}

.intake-row-clickable[b-aoioc7db59] {
    cursor: pointer;
}

.intake-row-clickable:hover td[b-aoioc7db59] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* Intake-history per-row delete: keep the small trash glyph but guarantee a
   >=44px tap target on mobile. Vertical negative margin absorbs the extra
   height so the table row stays compact. */
@media (max-width: 767.98px) {
    .intake-delete-btn[b-aoioc7db59] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--tap-min);
        min-height: var(--tap-min);
        margin-top: -10px;
        margin-bottom: -10px;
    }
}

.med-summary-card[b-aoioc7db59] {
    border-left: 4px solid rgb(var(--group-color, var(--accent-rgb)));
}

.med-summary-icon[b-aoioc7db59] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--group-color, var(--accent-rgb)), 0.12);
    color: rgb(var(--group-color, var(--accent-rgb)));
    font-size: 1.4rem;
    flex-shrink: 0;
}

.med-summary-name[b-aoioc7db59] {
    font-size: 1.05rem;
    line-height: 1.25;
    word-break: break-word;
}

.med-summary-meta[b-aoioc7db59] {
    margin-top: 0.15rem;
}

.med-status-pill[b-aoioc7db59] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
}

.med-status-pill.is-on[b-aoioc7db59] {
    background: rgba(25, 135, 84, 0.12);
    color: #146c43;
    border-color: rgba(25, 135, 84, 0.35);
}

.med-timeline-row[b-aoioc7db59] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}

.med-timeline-row + .med-timeline-row[b-aoioc7db59] {
    border-top: 1px dashed var(--bs-border-color, rgba(0, 0, 0, 0.08));
}

.med-timeline-label[b-aoioc7db59] {
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.med-timeline-value[b-aoioc7db59] {
    font-weight: 600;
    color: var(--bs-body-color);
}

.med-subtype-badge[b-aoioc7db59] {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.45rem;
}

.med-subtype-rx[b-aoioc7db59] {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
}

.med-subtype-otc[b-aoioc7db59] {
    background: color-mix(in srgb, var(--info) 12%, transparent);
    color: var(--info);
}

/* Lightweight modal sheet used by the "Log at..." action. Avoids pulling in
   Bootstrap JS just to show a single date/dose picker. */
.modal-backdrop-custom[b-aoioc7db59] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
}

.modal-dialog-custom[b-aoioc7db59] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
}

.modal-dialog-custom > .modal-content[b-aoioc7db59] {
    pointer-events: auto;
    width: min(440px, 100%);
    border-radius: 16px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.1));
}

.modal-dialog-custom .modal-header[b-aoioc7db59],
.modal-dialog-custom .modal-footer[b-aoioc7db59] {
    padding: 0.75rem 1rem;
}

.modal-dialog-custom .modal-body[b-aoioc7db59] {
    padding: 1rem;
}

.modal-dialog-custom .modal-footer[b-aoioc7db59] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
}

.modal-dialog-custom .modal-header[b-aoioc7db59] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
}

/* /Components/Pages/Medication/MedicationGroupedList.razor.rz.scp.css */
/* ============================================================
   Group container — sets --group-color from the C# CategoryOption.
   Every descendant card/header consumes it via rgb()/rgba().
   ============================================================ */

.med-group[b-r7kfqa9d5v] {
    --group-color: var(--accent-rgb); /* fallback if no inline var */
    margin-bottom: 1.5rem;
}

.med-group:last-child[b-r7kfqa9d5v] {
    margin-bottom: 0;
}

/* ── Group header ─────────────────────────────────────────────────── */

.med-group-header[b-r7kfqa9d5v] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.25rem 0.25rem 0.6rem;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    background: transparent;
    border: none;
    text-align: left;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.med-group-header:focus-visible[b-r7kfqa9d5v] {
    outline: 2px solid rgb(var(--group-color));
    outline-offset: 2px;
    border-radius: 0.35rem;
}

.med-group-chevron[b-r7kfqa9d5v] {
    margin-left: 0.35rem;
    color: rgba(var(--group-color), 0.7);
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.med-group--collapsed .med-group-chevron[b-r7kfqa9d5v] {
    transform: rotate(-90deg);
}

.med-group-header-icon[b-r7kfqa9d5v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.5rem;
    background: rgba(var(--group-color), 0.12);
    color: rgb(var(--group-color));
    font-size: 1rem;
    flex-shrink: 0;
}

.med-group-header-title[b-r7kfqa9d5v] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.01em;
}

.med-group-count[b-r7kfqa9d5v] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.4rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(var(--group-color), 0.12);
    color: rgb(var(--group-color));
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Card stack ───────────────────────────────────────────────────── */

.med-card-stack[b-r7kfqa9d5v] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* ── Sub-group (Prescribed / OTC inside the Medications group) ─────── */

.med-subgroup + .med-subgroup[b-r7kfqa9d5v] {
    margin-top: 1rem;
}

.med-subgroup-header[b-r7kfqa9d5v] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.1rem 0.1rem 0.35rem;
    color: rgb(var(--group-color));
}

.med-subgroup-icon[b-r7kfqa9d5v] {
    font-size: 0.85rem;
}

.med-subgroup-title[b-r7kfqa9d5v] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(var(--group-color), 0.85);
}

.med-subgroup-count[b-r7kfqa9d5v] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.15rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(var(--group-color), 0.10);
    color: rgb(var(--group-color));
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.med-subgroup-stack[b-r7kfqa9d5v] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* ── Individual card ──────────────────────────────────────────────── */

.med-card[b-r7kfqa9d5v] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 0.85rem;
    background: linear-gradient(180deg,
        rgba(var(--group-color), 0.04),
        rgba(var(--group-color), 0.015));
    border: 1px solid rgba(var(--group-color), 0.18);
    border-left: 4px solid rgb(var(--group-color));
    border-radius: 0.75rem;
    text-align: left;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease,
                border-color 0.15s ease,
                box-shadow 0.18s ease,
                background 0.15s ease;
}

.med-card:hover[b-r7kfqa9d5v] {
    border-color: rgba(var(--group-color), 0.55);
    background: linear-gradient(180deg,
        rgba(var(--group-color), 0.08),
        rgba(var(--group-color), 0.03));
    box-shadow: 0 4px 14px rgba(var(--group-color), 0.18);
    transform: translateY(-1px);
}

.med-card:focus-visible[b-r7kfqa9d5v] {
    outline: 2px solid rgb(var(--group-color));
    outline-offset: -3px;
}

.med-card--inactive[b-r7kfqa9d5v] {
    opacity: 0.55;
    background: rgba(0, 0, 0, 0.015);
}

.med-card--inactive:hover[b-r7kfqa9d5v] {
    opacity: 0.85;
}

.med-card-body[b-r7kfqa9d5v] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
}

.med-card-arrow[b-r7kfqa9d5v] {
    color: rgba(var(--group-color), 0.6);
    font-size: 1rem;
    flex-shrink: 0;
}

.med-card:hover .med-card-arrow[b-r7kfqa9d5v] {
    color: rgb(var(--group-color));
}

/* ── Taken-today state ────────────────────────────────────────────── */

.med-card--taken[b-r7kfqa9d5v] {
    border-color: rgba(34, 197, 94, 0.45);
    border-left-color: rgb(34, 197, 94);
    background: linear-gradient(180deg,
        rgba(34, 197, 94, 0.08),
        rgba(34, 197, 94, 0.02));
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.12);
}

.med-card--taken:hover[b-r7kfqa9d5v] {
    border-color: rgba(34, 197, 94, 0.65);
    background: linear-gradient(180deg,
        rgba(34, 197, 94, 0.12),
        rgba(34, 197, 94, 0.04));
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.22);
}

.med-card-check[b-r7kfqa9d5v] {
    color: rgb(34, 197, 94);
    font-size: 1.25rem;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(34, 197, 94, 0.35));
}

.med-card-name-row[b-r7kfqa9d5v] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.med-card-name[b-r7kfqa9d5v] {
    font-size: 0.98rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

.med-card-meta[b-r7kfqa9d5v] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: #64748b;
}

.med-card-meta-chunk[b-r7kfqa9d5v] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.med-card-meta-chunk .bi[b-r7kfqa9d5v] {
    color: rgba(var(--group-color), 0.85);
    font-size: 0.78rem;
}

/* ── Badges ────────────────────────────────────────────────────────── */

.med-card-inactive-badge[b-r7kfqa9d5v] {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.07);
    color: #475569;
    padding: 0.15rem 0.45rem;
    border-radius: 0.4rem;
}

/* ── Mobile tightening ────────────────────────────────────────────── */

@media (max-width: 576px) {
    .med-card[b-r7kfqa9d5v] {
        padding: 0.65rem 0.75rem;
        gap: 0.6rem;
    }

    .med-card-name[b-r7kfqa9d5v] {
        font-size: 0.92rem;
    }
}
/* /Components/Pages/Medication/Medications.razor.rz.scp.css */
/* ── Taken Today summary section ─────────────────────────────────── */

.taken-today[b-59bgf648ci] {
    --taken-green: 34, 197, 94;
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem 0.85rem;
    border: 1px solid rgba(var(--taken-green), 0.25);
    border-left: 4px solid rgb(var(--taken-green));
    border-radius: 0.75rem;
    background: linear-gradient(180deg,
        rgba(var(--taken-green), 0.06),
        rgba(var(--taken-green), 0.015));
}

/* Match the col-lg-6 width of the medication / supplement columns below it,
   then center horizontally. Below the lg breakpoint the section spans full
   width like the stacked columns do. */
@media (min-width: 992px) {
    .taken-today[b-59bgf648ci] {
        max-width: calc(50% - 0.5rem);
        margin-left: auto;
        margin-right: auto;
    }
}

.taken-today-header[b-59bgf648ci] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0 0 0.6rem;
    background: transparent;
    border: none;
    text-align: left;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.taken-today-header:focus-visible[b-59bgf648ci] {
    outline: 2px solid rgb(var(--taken-green));
    outline-offset: 2px;
    border-radius: 0.35rem;
}

.taken-today-chevron[b-59bgf648ci] {
    margin-left: 0.35rem;
    color: rgba(var(--taken-green), 0.8);
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.taken-today--collapsed .taken-today-chevron[b-59bgf648ci] {
    transform: rotate(-90deg);
}

.taken-today--collapsed .taken-today-header[b-59bgf648ci] {
    padding-bottom: 0;
}

.taken-today-header-icon[b-59bgf648ci] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.5rem;
    background: rgba(var(--taken-green), 0.18);
    color: rgb(var(--taken-green));
    font-size: 1rem;
    flex-shrink: 0;
}

.taken-today-header-title[b-59bgf648ci] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: -0.01em;
}

.taken-today-header-count[b-59bgf648ci] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.4rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(var(--taken-green), 0.18);
    color: rgb(var(--taken-green));
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.taken-today-stack[b-59bgf648ci] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.taken-today-card[b-59bgf648ci] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(var(--taken-green), 0.25);
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.6);
}

.taken-today-card-icon[b-59bgf648ci] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: rgba(var(--taken-green), 0.16);
    color: rgb(var(--taken-green));
    font-size: 0.95rem;
    flex-shrink: 0;
}

.taken-today-card-body[b-59bgf648ci] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.taken-today-card-name[b-59bgf648ci] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.taken-today-card-meta[b-59bgf648ci] {
    font-size: 0.78rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.taken-today-card-meta > span + span[b-59bgf648ci] {
    margin-left: 0.25rem;
}

.taken-today-card-time[b-59bgf648ci] {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgb(var(--taken-green));
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.taken-today-card-delete[b-59bgf648ci] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

/* Keep the small trash glyph but ensure a >=44px tap target on mobile. */
@media (max-width: 767.98px) {
    .taken-today-card-delete[b-59bgf648ci] {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
        /* pull negative margin so the larger hit area doesn't bloat the row */
        margin: calc((var(--tap-min) - 1.85rem) / -2);
    }
}

.taken-today-card-delete:hover:not(:disabled)[b-59bgf648ci] {
    background: rgba(var(--danger-rgb), 0.1);
    color: var(--danger);
}

.taken-today-card-delete:disabled[b-59bgf648ci] {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 576px) {
    .taken-today[b-59bgf648ci] {
        padding: 0.65rem 0.7rem 0.7rem;
    }

    .taken-today-card[b-59bgf648ci] {
        padding: 0.5rem 0.6rem;
        gap: 0.6rem;
    }

    .taken-today-card-name[b-59bgf648ci] {
        font-size: 0.9rem;
    }
}

.empty-state i.bi[b-59bgf648ci] {
    opacity: 0.35;
}

/* Rx / OTC subtype badges */
.med-subtype-badge[b-59bgf648ci] {
    font-size: 0.65rem;
    font-weight: 600;
    vertical-align: middle;
    letter-spacing: 0.03em;
}

/* /Components/Pages/Metrics/MetricDetail.razor.rz.scp.css */
.metric-detail-header h4[b-zse7u3m692] {
    font-weight: 600;
}

.metric-log-card.sticky-top[b-zse7u3m692] {
    top: 0.5rem;
    z-index: 5;
    position: relative; /* establishes a containing block for the close button below */
}

.metric-log-card__close[b-zse7u3m692] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 6;
    /* slightly enlarged tap target */
    padding: 0.4rem;
    opacity: 0.65;
    transition: opacity 120ms ease;
}

.metric-log-card__close:hover[b-zse7u3m692],
.metric-log-card__close:focus[b-zse7u3m692] {
    opacity: 1;
}

.metric-log-reopen[b-zse7u3m692] {
    text-decoration: none;
}

.metric-log-reopen:hover[b-zse7u3m692] {
    text-decoration: underline;
}

/* Segmented Day / Week / Month control — kept identical to the
   QuestionnaireDetail page's segment so the two read as one design system. */
.group-by-segment[b-zse7u3m692] {
    display: flex;
    width: 100%;
    border-radius: 0.625rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--card-bg, #fff);
}

.group-by-option[b-zse7u3m692] {
    flex: 1;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease-out, color 0.15s ease-out;
}

.group-by-option + .group-by-option[b-zse7u3m692] {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.group-by-option.is-active[b-zse7u3m692] {
    background: var(--accent, #512BD4);
    color: #fff;
}

/* /Components/Pages/Misc/About.razor.rz.scp.css */
.about-hero[b-7wmzsuojh4] {
    background: linear-gradient(135deg, var(--bs-primary-bg-subtle, #e7f1ff) 0%, var(--bs-body-bg, #fff) 100%);
    border: none;
}

.app-logo[b-7wmzsuojh4] {
    font-size: 4rem;
    color: var(--bs-primary, #0d6efd);
    line-height: 1;
}

.list-group-item[b-7wmzsuojh4] {
    padding: 1rem 1.25rem;
}

.list-group-item i[b-7wmzsuojh4] {
    font-size: 1.1rem;
    flex-shrink: 0;
}
/* /Components/Pages/Misc/Error.razor.rz.scp.css */
/* Styles for Error */
/* /Components/Pages/Misc/NotFound.razor.rz.scp.css */
/* Styles for NotFound */
/* /Components/Pages/Misc/Support.razor.rz.scp.css */
.accordion-button:not(.collapsed)[b-08gzae04b3] {
    font-weight: 600;
}
/* /Components/Pages/Mood/MoodCharts.razor.rz.scp.css */
.mood-charts h2[b-rs996jrmfm] {
    color: inherit;
}

/* Pin the period nav + Day/Week/Month tabs to the top of the viewport while
   the user scrolls through the radar/line/bar cards below. */
.mood-controls-sticky[b-rs996jrmfm] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg, #f4f7fb);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 0;
}

.group-by-segment[b-rs996jrmfm] {
    display: flex;
    width: 100%;
    border-radius: 0.625rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
    margin-bottom: 0.625rem;
    background: var(--card-bg, #fff);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

.group-by-option[b-rs996jrmfm] {
    flex: 1;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease-out, color 0.15s ease-out;
}

.group-by-option + .group-by-option[b-rs996jrmfm] {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.group-by-option.is-active[b-rs996jrmfm] {
    background: var(--accent, #512BD4);
    color: #fff;
}

/* /Components/Pages/Mood/MoodHistory.razor.rz.scp.css */
.mood-history[b-pqkr48sfnf] {
    padding: 0.75rem 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    /* Allow vertical scroll while still detecting horizontal swipes */
    touch-action: pan-y;
}

@media (min-width: 768px) {
    .mood-history[b-pqkr48sfnf] {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

.mood-history-title[b-pqkr48sfnf] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    padding: 0 0.5rem;
}

.mood-history-meta[b-pqkr48sfnf] {
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted, #6c757d);
    margin-top: 0.5rem;
}

.mood-history-empty[b-pqkr48sfnf] {
    text-align: center;
    color: var(--muted, #6c757d);
    padding: 3rem 1rem;
    font-size: 0.95rem;
}

.mood-history-loading[b-pqkr48sfnf] {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}

.mood-history-spinner[b-pqkr48sfnf] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: mh-spin-b-pqkr48sfnf 0.8s linear infinite;
}

@keyframes mh-spin-b-pqkr48sfnf {
    to { transform: rotate(360deg); }
}

.mood-history-aggregate[b-pqkr48sfnf] {
    margin-bottom: 1.5rem;
}

.mood-history-section-label[b-pqkr48sfnf] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0.75rem 0 0.5rem;
}

.mood-history-section-count[b-pqkr48sfnf] {
    margin-left: auto;
    font-weight: 500;
    opacity: 0.7;
}

.mood-history-entries[b-pqkr48sfnf] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.mood-entry[b-pqkr48sfnf] {
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
    border-radius: 0.65rem;
    padding: 0.6rem 0.75rem;
    background: var(--bs-body-bg, #fff);
}

.mood-entry-header[b-pqkr48sfnf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.mood-entry-time[b-pqkr48sfnf] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

.mood-entry-actions[b-pqkr48sfnf] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.mood-entry-action-btn[b-pqkr48sfnf] {
    position: relative;
    background: none;
    border: 1px solid var(--hairline, rgba(0, 0, 0, 0.12));
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.74rem;
    transition: background 0.15s, box-shadow 0.15s;
    color: var(--text-secondary, #6c757d);
}

/* Invisible hit-area expander: keeps the 26px visual but extends the
   tappable region to >=44px on touch screens (centered on the glyph). */
.mood-entry-action-btn[b-pqkr48sfnf]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap-min, 44px);
    height: var(--tap-min, 44px);
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.mood-entry-action-btn:focus-visible[b-pqkr48sfnf] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35);
}

.mood-entry-action-btn:active[b-pqkr48sfnf] {
    transform: scale(0.92);
}

.mood-entry-action-btn--edit[b-pqkr48sfnf] {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.3);
}

.mood-entry-action-btn--edit:hover[b-pqkr48sfnf] {
    background: rgba(var(--accent-rgb), 0.08);
}

.mood-entry-action-btn--delete[b-pqkr48sfnf] {
    color: var(--danger);
    border-color: rgba(var(--danger-rgb), 0.35);
}

.mood-entry-action-btn--delete:hover[b-pqkr48sfnf] {
    background: rgba(var(--danger-rgb), 0.08);
}

.mood-entry-action-btn--delete:focus-visible[b-pqkr48sfnf] {
    box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.35);
}

@media (max-width: 767.98px) {
    /* Separate the two 44px invisible hit areas so they do not overlap:
       a 44px target centered on a 26px button extends 9px past each edge,
       so the buttons must sit >=18px apart for the tappable regions to meet
       without overlapping. Without this, taps in the overlap band would fall
       through to the destructive Delete (later in source order, so its
       absolutely-positioned ::before stacks on top of Edit's). */
    .mood-entry-actions[b-pqkr48sfnf] {
        gap: 1.15rem;
    }
}

/* Inline delete confirm */
.mood-entry-delete-confirm[b-pqkr48sfnf] {
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(220, 38, 38, 0.25);
    background: rgba(254, 226, 226, 0.4);
    border-radius: 6px;
    font-size: 0.82rem;
    color: #7f1d1d;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mood-entry-error[b-pqkr48sfnf] {
    font-size: 0.78rem;
    color: #b91c1c;
    background: #fee2e2;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
}

.mood-entry-confirm-actions[b-pqkr48sfnf] {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.mood-entry-btn[b-pqkr48sfnf] {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.3rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.mood-entry-btn:disabled[b-pqkr48sfnf] {
    opacity: 0.55;
    cursor: not-allowed;
}

.mood-entry-btn--primary[b-pqkr48sfnf] {
    background: var(--accent);
    color: #fff;
}

.mood-entry-btn--primary:hover:not(:disabled)[b-pqkr48sfnf] {
    background: var(--accent-strong);
}

.mood-entry-btn--secondary[b-pqkr48sfnf] {
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    border-color: rgba(0, 0, 0, 0.15);
}

.mood-entry-btn--secondary:hover:not(:disabled)[b-pqkr48sfnf] {
    background: rgba(0, 0, 0, 0.04);
}

.mood-entry-btn--danger[b-pqkr48sfnf] {
    background: #dc2626;
    color: #fff;
}

.mood-entry-btn--danger:hover:not(:disabled)[b-pqkr48sfnf] {
    background: #b91c1c;
}

/* Inline edit form */
.mood-entry-edit[b-pqkr48sfnf] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.mood-entry-edit-slider[b-pqkr48sfnf] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mood-entry-edit-row[b-pqkr48sfnf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.78rem;
}

.mood-entry-edit-label[b-pqkr48sfnf] {
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.66rem;
    font-weight: 700;
}

.mood-entry-edit-value[b-pqkr48sfnf] {
    font-weight: 700;
    font-size: 0.88rem;
}

.mood-entry-edit-input[b-pqkr48sfnf] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    outline: none;
    background: linear-gradient(
        to right,
        var(--thumb-color, var(--accent)) 0%,
        var(--thumb-color, var(--accent)) var(--fill-pct, 0%),
        rgba(0, 0, 0, 0.1) var(--fill-pct, 0%),
        rgba(0, 0, 0, 0.1) 100%
    );
    cursor: pointer;
}

.mood-entry-edit-input[b-pqkr48sfnf]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--thumb-color, var(--accent));
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.mood-entry-edit-input[b-pqkr48sfnf]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--thumb-color, var(--accent));
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.mood-entry-edit-notes-label[b-pqkr48sfnf] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}

.mood-entry-edit-notes-optional[b-pqkr48sfnf] {
    font-weight: 400;
    text-transform: none;
    opacity: 0.7;
}

.mood-entry-edit-notes[b-pqkr48sfnf] {
    font-size: 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    resize: vertical;
}

.mood-entry-axes[b-pqkr48sfnf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
}

.mood-entry-axis[b-pqkr48sfnf] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: color-mix(in srgb, var(--axis-color) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--axis-color) 35%, transparent);
    color: var(--axis-color);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mood-entry-axis__initial[b-pqkr48sfnf] {
    opacity: 0.85;
}

.mood-entry-axis__value[b-pqkr48sfnf] {
    font-weight: 700;
}

.mood-entry-notes[b-pqkr48sfnf] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--bs-body-color);
    white-space: pre-wrap;
}
/* /Components/Pages/Profile/PersonalInfo.razor.rz.scp.css */
/* Styles for PersonalInfo */
/* /Components/Pages/Questionnaire/TakeQuestionnaire.razor.rz.scp.css */
/* Styles for TakeQuestionnaire */

[b-zc1nwq3c64] .date-title-input {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    padding: 0;
    outline: none;
    width: 100%;
    max-width: 145px;
    font-family: inherit;
}

.questionnaire-list[b-zc1nwq3c64] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.5rem;

    max-width: 960px;
    margin: 0 auto;
}

.questionnaire-card[b-zc1nwq3c64] {
    border: none;
    background: none;
    outline: none;
    box-shadow: none;
    appearance: none;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.65rem 2rem 0.65rem 0.85rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--surface-contrast, #dee2e6);
    border-radius: 0.75rem;
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.questionnaire-card[b-zc1nwq3c64]::after {
    content: "›";
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--muted, #6c757d);
    line-height: 1;
}

.questionnaire-card:hover[b-zc1nwq3c64] {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.12);
}

.questionnaire-card--completed[b-zc1nwq3c64] {
    border-color: #198754;
    background: color-mix(in srgb, #198754 6%, var(--card-bg, #fff));
}

.questionnaire-card--completed:hover[b-zc1nwq3c64] {
    border-color: #198754;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.2);
}

.questionnaire-card__name[b-zc1nwq3c64] {
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
}

.questionnaire-card__desc[b-zc1nwq3c64] {
    font-size: 0.8rem;
    color: var(--muted, #6c757d);
}

.questionnaire-card--with-actions[b-zc1nwq3c64] {
    flex-direction: row;
    align-items: center;
    padding: 0 0.5rem 0 0;
    gap: 0;
    cursor: default;
}

.questionnaire-card--with-actions[b-zc1nwq3c64]::after {
    display: none;
}

.questionnaire-card__body[b-zc1nwq3c64] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.65rem 0.5rem 0.65rem 0.85rem;
    background: none;
    border: none;
    outline: none;
    appearance: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.questionnaire-card__copy-btn[b-zc1nwq3c64] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    color: var(--muted, #6c757d);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.questionnaire-card__copy-btn:hover[b-zc1nwq3c64] {
    background: rgba(25, 135, 84, 0.12);
    border-color: #198754;
    color: #198754;
}

.summary-view[b-zc1nwq3c64] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.summary-view__header[b-zc1nwq3c64] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.summary-view__back[b-zc1nwq3c64] {
    background: none;
    border: 1px solid var(--surface-contrast, #dee2e6);
    border-radius: 0.5rem;
    padding: 0.3rem 0.75rem;
    color: inherit;
    cursor: pointer;
    font-size: 0.875rem;
}

.summary-view__back:hover[b-zc1nwq3c64] {
    border-color: var(--accent);
    color: var(--accent);
}

.summary-view__title[b-zc1nwq3c64] {
    flex: 1;
    min-width: 0;
}

.summary-view__date[b-zc1nwq3c64] {
    color: var(--muted, #6c757d);
    font-size: 0.85rem;
}

.summary-view__edit[b-zc1nwq3c64] {
    background: none;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 0.5rem;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.summary-view__edit:hover[b-zc1nwq3c64] {
    background: rgba(var(--accent-rgb), 0.10);
}

.summary-view__scoreline[b-zc1nwq3c64] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--surface-contrast, #dee2e6);
    border-radius: 0.75rem;
}

.summary-view__score[b-zc1nwq3c64] {
    display: flex;
    flex-direction: column;
}

.summary-view__score-label[b-zc1nwq3c64] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #6c757d);
}

.summary-view__score-value[b-zc1nwq3c64] {
    font-size: 1.5rem;
    font-weight: 700;
}

.severity-badge[b-zc1nwq3c64] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    background: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

.severity-badge--low[b-zc1nwq3c64] {
    background: #d1e7dd;
    color: #146c43;
    border-color: #badbcc;
}

.severity-badge--mild[b-zc1nwq3c64] {
    background: #fff3cd;
    color: #997404;
    border-color: #ffecb5;
}

.severity-badge--moderate[b-zc1nwq3c64] {
    background: #fde2c5;
    color: #b65a16;
    border-color: #fbcfa3;
}

.severity-badge--high[b-zc1nwq3c64] {
    background: #f8d7da;
    color: #b02a37;
    border-color: #f5c2c7;
}

.severity-badge--severe[b-zc1nwq3c64] {
    background: #842029;
    color: #fff;
    border-color: #842029;
}

.summary-view__answers[b-zc1nwq3c64] {
    list-style: none;
    counter-reset: q;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.summary-view__answer[b-zc1nwq3c64] {
    counter-increment: q;
    background: var(--card-bg, #fff);
    border: 1px solid var(--surface-contrast, #dee2e6);
    border-radius: 0.65rem;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.summary-view__answer[b-zc1nwq3c64]::before {
    content: counter(q) ".";
    color: var(--muted, #6c757d);
    font-size: 0.75rem;
    font-weight: 600;
}

.summary-view__question[b-zc1nwq3c64] {
    font-size: 0.95rem;
    line-height: 1.35;
}

.summary-view__response[b-zc1nwq3c64] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.summary-view__response-label[b-zc1nwq3c64] {
    font-weight: 600;
    color: var(--accent);
}

.summary-view__response-value[b-zc1nwq3c64] {
    color: var(--muted, #6c757d);
    background: var(--surface-soft, #f8f9fa);
    border: 1px solid var(--surface-contrast, #dee2e6);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
}

@media (max-width: 767.98px) {
    [b-zc1nwq3c64] .take-questionnaire-container {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        margin-top: 0.25rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
        padding-bottom: var(--bottom-nav-space);
    }

    [b-zc1nwq3c64] .take-questionnaire-container .mud-paper {
        padding: 0.5rem !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    [b-zc1nwq3c64] .take-questionnaire-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .questionnaire-list[b-zc1nwq3c64] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
        width: 100%;
        box-sizing: border-box;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .questionnaire-card[b-zc1nwq3c64] {
        padding: 0.5rem 2rem 0.5rem 0.65rem;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    [b-zc1nwq3c64] .take-questionnaire-container .mud-input-root input[type="date"] {
        width: 100%;
    }

    [b-zc1nwq3c64] .take-questionnaire-container .mud-button-root {
        width: 100%;
    }
}

/* ── Day / Week view toggle ── */

.view-mode-bar[b-zc1nwq3c64] {
    display: flex;
    gap: 0.25rem;
    max-width: 720px;
}

.view-mode-btn[b-zc1nwq3c64] {
    padding: 0.28rem 0.85rem;
    border: 1px solid var(--surface-contrast, #ced4da);
    border-radius: 1.25rem;
    background: var(--card-bg, #fff);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.view-mode-btn:hover[b-zc1nwq3c64] {
    border-color: var(--accent);
    color: var(--accent);
}

.view-mode-btn--active[b-zc1nwq3c64] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
/* /Components/Pages/Questionnaire/TakeQuestionnaireMatrixBlock.razor.rz.scp.css */
.matrix-block[b-21x9m0i71a] {
    background: var(--card-bg, #fff);
    border: 1px solid var(--surface-contrast, #dee2e6);
    border-radius: 0.75rem;
    overflow: hidden;
}

.matrix-scroll[b-21x9m0i71a] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.matrix-table[b-21x9m0i71a] {
    width: 100%;
    border-collapse: collapse;
}

.matrix-row[b-21x9m0i71a] {
    border-bottom: 1px solid color-mix(in srgb, var(--surface-contrast, #dee2e6) 60%, transparent);
}

.matrix-row:last-child[b-21x9m0i71a] {
    border-bottom: none;
}

.matrix-row:nth-child(even)[b-21x9m0i71a] {
    background: color-mix(in srgb, var(--surface-contrast, #dee2e6) 18%, var(--card-bg, #fff));
}

.matrix-question-text[b-21x9m0i71a] {
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.4;
    vertical-align: middle;
}

.matrix-question-number[b-21x9m0i71a] {
    font-weight: 700;
    margin-right: 0.3rem;
}

.matrix-options-cell[b-21x9m0i71a] {
    padding: 0.4rem 0.75rem 0.4rem 0;
    vertical-align: middle;
    width: 1%;
    white-space: nowrap;
}

.matrix-answer-options[b-21x9m0i71a] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
}

/* Reuse the answer-btn style from TakeQuestionnaireQuestionCard */
.answer-btn[b-21x9m0i71a] {
    padding: 0.28rem 0.75rem;
    border: 1px solid var(--surface-contrast, #ced4da);
    border-radius: 1.25rem;
    background: var(--card-bg, #fff);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.answer-btn:hover[b-21x9m0i71a] {
    border-color: var(--accent, #512BD4);
    color: var(--accent, #512BD4);
}

.answer-btn--selected[b-21x9m0i71a] {
    background: var(--accent, #512BD4);
    border-color: var(--accent, #512BD4);
    color: #fff;
}

@media (max-width: 767.98px) {
    /* Collapse the nowrap scrolling row into a single-question card:
       question text on its own line, options stacked full-width below.
       The table markup is unchanged — the cells just stop behaving as a row. */
    .matrix-scroll[b-21x9m0i71a] {
        overflow-x: visible;
    }

    .matrix-table[b-21x9m0i71a],
    .matrix-table tbody[b-21x9m0i71a] {
        display: block;
    }

    .matrix-row[b-21x9m0i71a] {
        display: block;
        padding: 0.75rem 0.85rem;
    }

    .matrix-question-text[b-21x9m0i71a] {
        display: block;
        padding: 0;
        font-size: 0.95rem;
        line-height: 1.4;
        color: var(--text-primary, #1f2937);
    }

    .matrix-options-cell[b-21x9m0i71a] {
        display: block;
        width: auto;
        padding: 0.6rem 0 0;
        white-space: normal;
    }

    .matrix-answer-options[b-21x9m0i71a] {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.4rem;
    }

    .answer-btn[b-21x9m0i71a] {
        width: 100%;
        min-height: var(--tap-min, 44px);
        padding: 0.6rem 0.85rem;
        border: 1px solid var(--surface-contrast, #d1d5db);
        border-radius: var(--radius, 12px);
        background: var(--card-bg, #fff);
        color: var(--text-primary, #1f2937);
        font-size: 0.9375rem;
        font-weight: 500;
        text-align: left;
        line-height: 1.35;
        white-space: normal;
        display: flex;
        align-items: center;
        justify-content: space-between;
        -webkit-tap-highlight-color: transparent;
    }

    .answer-btn:active[b-21x9m0i71a] {
        transform: scale(0.985);
    }

    .answer-btn--selected[b-21x9m0i71a] {
        background: var(--accent, #512BD4);
        border-color: var(--accent, #512BD4);
        color: #fff;
        font-weight: 600;
    }

    .answer-btn--selected[b-21x9m0i71a]::after {
        content: "\2713";
        margin-left: 0.75rem;
        font-size: 1.05rem;
        line-height: 1;
    }
}
/* /Components/Pages/Questionnaire/TakeQuestionnaireQuestionCard.razor.rz.scp.css */
.question-card[b-m5bwmql2cb] {
    padding: 0.5rem 0.75rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--surface-contrast, #dee2e6);
    border-radius: 0.75rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem 1rem;
}

.question-text[b-m5bwmql2cb] {
    font-size: 0.9375rem;
    margin-bottom: 0;
}

.question-number[b-m5bwmql2cb] {
    font-weight: 700;
    margin-right: 0.35rem;
}

.answer-options[b-m5bwmql2cb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}

.answer-btn[b-m5bwmql2cb] {
    padding: 0.28rem 0.75rem;
    border: 1px solid var(--surface-contrast, #ced4da);
    border-radius: 1.25rem;
    background: var(--card-bg, #fff);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.answer-btn:hover[b-m5bwmql2cb] {
    border-color: var(--accent);
    color: var(--accent);
}

.answer-btn--selected[b-m5bwmql2cb] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

@media (max-width: 767.98px) {
    .question-card[b-m5bwmql2cb] {
        padding: 0.65rem 0.75rem;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .question-text[b-m5bwmql2cb] {
        font-size: 0.9375rem;
        margin-bottom: 0.65rem;
        line-height: 1.35;
    }

    .answer-options[b-m5bwmql2cb] {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 0.4rem;
        justify-content: flex-start;
    }

    .answer-btn[b-m5bwmql2cb] {
        width: 100%;
        min-height: var(--tap-min);
        padding: 0.6rem 0.85rem;
        border: 1px solid var(--surface-contrast, #d1d5db);
        border-radius: 0.75rem;
        background: var(--card-bg, #fff);
        color: var(--text-primary, #1f2937);
        font-size: 0.9375rem;
        font-weight: 500;
        text-align: left;
        white-space: normal;
        line-height: 1.35;
        display: flex;
        align-items: center;
        justify-content: space-between;
        -webkit-tap-highlight-color: transparent;
    }

    .answer-btn:active[b-m5bwmql2cb] {
        transform: scale(0.985);
        background: rgba(var(--accent-rgb), 0.06);
    }

    .answer-btn--selected[b-m5bwmql2cb] {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
        font-weight: 600;
    }

    .answer-btn--selected[b-m5bwmql2cb]::after {
        content: "\2713";
        margin-left: 0.75rem;
        font-size: 1.05rem;
        line-height: 1;
    }
}
/* /Components/Pages/Questionnaire/TakeQuestionnaireQuestions.razor.rz.scp.css */
/* Questionnaire detail */

.questionnaire-header[b-avzyxio8hl] {
    max-width: 720px;
    margin-bottom: 0.75rem;
}

.q-header-row[b-avzyxio8hl] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.q-back-btn[b-avzyxio8hl] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--surface-contrast, rgba(0,0,0,0.1));
    background: var(--card-bg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--accent);
    transition: background 0.12s;
}

.q-back-btn:hover[b-avzyxio8hl] {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.q-header-title[b-avzyxio8hl] {
    font-size: 1rem;
    font-weight: 600;
}

.questions-container[b-avzyxio8hl] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 720px;
}

.submit-row[b-avzyxio8hl] {
    max-width: 720px;
    margin-top: 1rem;
    margin-bottom: 2rem;
}
/* /Components/Pages/Questionnaire/TakeQuestionnaireSwipeCards.razor.rz.scp.css */
.swipe-stage[b-aq2u4jhyld] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    max-width: 460px;
    margin: 0 auto;
    padding-top: 0.5rem;
}

.swipe-stage__topbar[b-aq2u4jhyld] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.swipe-stage__progress[b-aq2u4jhyld] {
    font-size: 0.85rem;
    color: var(--bs-secondary, #6c757d);
    font-variant-numeric: tabular-nums;
}

.swipe-stage__title[b-aq2u4jhyld] {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.swipe-stage__subtitle[b-aq2u4jhyld] {
    color: var(--bs-secondary, #6c757d);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.swipe-card-stage[b-aq2u4jhyld] {
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.swipe-card[b-aq2u4jhyld] {
    --yes-opacity: 0;
    --no-opacity: 0;
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 360px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, rgba(0,0,0,0.1));
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    /* Lock all gestures to the card so vertical scroll can't steal horizontal swipes mid-drag. */
    touch-action: none;
    cursor: grab;
    will-change: transform, opacity;
    animation: swipe-card-enter-b-aq2u4jhyld 220ms ease-out;
}

@keyframes swipe-card-enter-b-aq2u4jhyld {
    from { transform: translate3d(0, 16px, 0) scale(0.96); opacity: 0; }
    to   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}

.swipe-card.swipe-card--dragging[b-aq2u4jhyld] {
    cursor: grabbing;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    /* Drag transforms drive position directly — kill the entry keyframes if
       the user grabs before they finish so the card snaps to the finger. */
    animation: none;
}

.swipe-card__qnumber[b-aq2u4jhyld] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary, #6c757d);
    margin-bottom: 1rem;
}

.swipe-card__question[b-aq2u4jhyld] {
    font-size: 1.35rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--bs-body-color, #212529);
    margin: 0;
}

.swipe-card__hint[b-aq2u4jhyld] {
    margin-top: auto;
    margin-bottom: 0;
    font-size: 0.8rem;
    color: var(--bs-secondary, #6c757d);
}

.swipe-card__decision[b-aq2u4jhyld] {
    position: absolute;
    top: 1rem;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    border: 3px solid currentColor;
    pointer-events: none;
    transition: opacity 80ms linear;
}

.swipe-card__decision--yes[b-aq2u4jhyld] {
    right: 1rem;
    color: var(--bs-success, #198754);
    transform: rotate(12deg);
    opacity: var(--yes-opacity, 0);
}

.swipe-card__decision--no[b-aq2u4jhyld] {
    left: 1rem;
    color: var(--bs-danger, #dc3545);
    transform: rotate(-12deg);
    opacity: var(--no-opacity, 0);
}

.swipe-stage__nav[b-aq2u4jhyld] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 2px;
    margin-top: -0.25rem;
}

.swipe-stage__nav[b-aq2u4jhyld]::-webkit-scrollbar {
    display: none;
}

.swipe-dot[b-aq2u4jhyld] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--surface-contrast, rgba(0, 0, 0, 0.12));
    background: transparent;
    color: var(--bs-secondary, #6c757d);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 80ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.swipe-dot:hover[b-aq2u4jhyld] {
    border-color: var(--accent);
    color: var(--accent);
}

.swipe-dot--answered[b-aq2u4jhyld] {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.35);
    color: var(--accent);
}

.swipe-dot--current[b-aq2u4jhyld] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.35);
}

.swipe-controls[b-aq2u4jhyld] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.swipe-controls__btn[b-aq2u4jhyld] {
    flex: 1 1 auto;
    min-width: 100px;
    max-width: 160px;
    padding: 0.6rem 1rem;
    font-weight: 600;
    border-radius: 999px;
}

.swipe-controls__nav[b-aq2u4jhyld] {
    flex: 0 0 auto;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.swipe-controls__nav:disabled[b-aq2u4jhyld] {
    opacity: 0.35;
}

.swipe-finish-chip[b-aq2u4jhyld] {
    align-self: center;
    margin-top: 0.5rem;
    appearance: none;
    border: 0;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.30);
    transition: transform 80ms ease, opacity 120ms ease, box-shadow 120ms ease;
}

.swipe-finish-chip:hover:not(:disabled)[b-aq2u4jhyld] {
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.40);
}

.swipe-finish-chip:active:not(:disabled)[b-aq2u4jhyld] {
    transform: scale(0.98);
}

.swipe-finish-chip:disabled[b-aq2u4jhyld] {
    opacity: 0.7;
    cursor: progress;
}

.swipe-card__hint--prior[b-aq2u4jhyld] {
    color: var(--accent);
    font-weight: 500;
}

.swipe-done[b-aq2u4jhyld] {
    text-align: center;
    padding: 2rem 1rem;
}

.swipe-done__check[b-aq2u4jhyld] {
    font-size: 3rem;
    color: var(--bs-success, #198754);
    line-height: 1;
    margin-bottom: 0.75rem;
}

.swipe-done__msg[b-aq2u4jhyld] {
    font-size: 1rem;
    margin-bottom: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .swipe-card[b-aq2u4jhyld] {
        transition: none !important;
        animation: none !important;
    }
}

@media (max-width: 767.98px) {
    /* Keep the whole flow clear of the fixed glass bottom nav. */
    .swipe-stage[b-aq2u4jhyld] {
        padding-bottom: var(--bottom-nav-space);
    }

    /* Fixed 360-380px stages can push the controls + finish chip under the
       bottom nav on short phones. Let the stage shrink to the available space
       while staying tall enough to read the question. */
    .swipe-card-stage[b-aq2u4jhyld] {
        height: clamp(220px, 42vh, 380px);
    }

    .swipe-card[b-aq2u4jhyld] {
        height: 100%;
        max-width: none;
    }

    /* The dot strip is a horizontal scroller; setting overflow-x:auto forces
       overflow-y to compute to auto too, which would clip a 44px tap overlay
       above/below the 26px dots. Give the row enough vertical room (and let it
       size to its content) so the overlay isn't cut off. */
    .swipe-stage__nav[b-aq2u4jhyld] {
        min-height: var(--tap-min);
        padding-top: 9px;
        padding-bottom: 9px;
    }

    /* 26px dots fall short of the 44px tap minimum — expand the hit area
       without enlarging the visible glyph. */
    .swipe-dot[b-aq2u4jhyld] {
        position: relative;
    }

    .swipe-dot[b-aq2u4jhyld]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--tap-min);
        height: var(--tap-min);
        transform: translate(-50%, -50%);
    }
}
/* /Components/Pages/Questionnaire/TakeQuestionnaireWeekMatrix.razor.rz.scp.css */
.wm-header[b-0vzdy75f0e] {
    margin-bottom: 0.75rem;
}

.wm-header-row[b-0vzdy75f0e] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.wm-scroll[b-0vzdy75f0e] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--surface-contrast, #dee2e6);
    border-radius: 0.75rem;
    overflow: hidden;
}

.wm-table[b-0vzdy75f0e] {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

/* ── Header ── */

.wm-table thead tr[b-0vzdy75f0e] {
    background: color-mix(in srgb, var(--accent, #512BD4) 5%, var(--card-bg, #fff));
    border-bottom: 2px solid var(--surface-contrast, #dee2e6);
}

.wm-q-col[b-0vzdy75f0e] {
    min-width: 160px;
    padding: 0.5rem 0.75rem;
}

.wm-day-col[b-0vzdy75f0e] {
    width: 100px;
    min-width: 88px;
    text-align: center;
    padding: 0.4rem 0.25rem;
    border-left: 1px solid var(--surface-contrast, #dee2e6);
}

.wm-day-col--today[b-0vzdy75f0e] {
    background: color-mix(in srgb, var(--accent, #512BD4) 10%, var(--card-bg, #fff));
}

.wm-day-col--future[b-0vzdy75f0e] {
    opacity: 0.45;
}

.wm-cell--future[b-0vzdy75f0e] {
    opacity: 0.35;
    pointer-events: none;
}

.wm-day-label[b-0vzdy75f0e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    position: relative;
}

.wm-day-dow[b-0vzdy75f0e] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-body, #212529);
}

.wm-day-date[b-0vzdy75f0e] {
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
}

.wm-saved-dot[b-0vzdy75f0e] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #512BD4);
    display: block;
    margin-top: 0.1rem;
}

/* ── Rows ── */

.wm-row[b-0vzdy75f0e] {
    border-bottom: 1px solid color-mix(in srgb, var(--surface-contrast, #dee2e6) 55%, transparent);
}

.wm-row:last-child[b-0vzdy75f0e] {
    border-bottom: none;
}

.wm-row:nth-child(even)[b-0vzdy75f0e] {
    background: color-mix(in srgb, var(--surface-contrast, #dee2e6) 15%, var(--card-bg, #fff));
}

.wm-row:nth-child(odd) .wm-q-text[b-0vzdy75f0e] {
    background: var(--card-bg, #fff);
}

.wm-row:nth-child(even) .wm-q-text[b-0vzdy75f0e] {
    background: color-mix(in srgb, var(--surface-contrast, #dee2e6) 15%, var(--card-bg, #fff));
}

.wm-q-text[b-0vzdy75f0e] {
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.35;
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.07);
}

.wm-q-num[b-0vzdy75f0e] {
    font-weight: 700;
    margin-right: 0.3rem;
}

.wm-cell[b-0vzdy75f0e] {
    text-align: center;
    padding: 0.4rem 0.35rem;
    vertical-align: middle;
    border-left: 1px solid color-mix(in srgb, var(--surface-contrast, #dee2e6) 55%, transparent);
}

.wm-cell--today[b-0vzdy75f0e] {
    background: color-mix(in srgb, var(--accent, #512BD4) 5%, transparent) !important;
}

/* ── Select ── */

.wm-select[b-0vzdy75f0e] {
    width: 100%;
    max-width: 94px;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--surface-contrast, #ced4da);
    border-radius: 0.4rem;
    background: var(--card-bg, #fff);
    font-size: 0.78rem;
    color: var(--text-body, #212529);
    cursor: pointer;
    appearance: auto;
    transition: border-color 0.12s;
}

.wm-select:focus[b-0vzdy75f0e] {
    outline: none;
    border-color: var(--accent, #512BD4);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #512BD4) 20%, transparent);
}

/* ── Binary tap button ── */

.wm-binary-btn[b-0vzdy75f0e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    color: var(--surface-contrast, #ced4da);
    font-size: 1.25rem;
    transition: color 0.12s, transform 0.1s;
}

.wm-binary-btn:hover:not(:disabled)[b-0vzdy75f0e] {
    color: var(--accent, #512BD4);
    transform: scale(1.15);
}

.wm-binary-btn--yes[b-0vzdy75f0e] {
    color: var(--accent, #512BD4);
}

.wm-binary-btn--yes:hover:not(:disabled)[b-0vzdy75f0e] {
    color: color-mix(in srgb, var(--accent, #512BD4) 70%, #000);
}

.wm-binary-btn:disabled[b-0vzdy75f0e] {
    opacity: 0.3;
    cursor: default;
}

/* ── Total row ── */

.wm-total-row[b-0vzdy75f0e] {
    border-top: 2px solid var(--surface-contrast, #dee2e6);
    background: color-mix(in srgb, var(--accent, #512BD4) 5%, var(--card-bg, #fff));
}

.wm-total-label[b-0vzdy75f0e] {
    font-weight: 700;
    font-size: 0.875rem;
}

.wm-total-cell[b-0vzdy75f0e] {
    text-align: center;
}

.wm-total-score[b-0vzdy75f0e] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent, #512BD4);
}

.wm-total-empty[b-0vzdy75f0e] {
    color: var(--text-muted, #6c757d);
    font-size: 0.875rem;
}

/* ── Footer ── */

.wm-footer[b-0vzdy75f0e] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* The mobile per-day layout is only rendered at the mobile breakpoint;
   hidden by default so desktop keeps the grid table. */
.wm-mobile[b-0vzdy75f0e] {
    display: none;
}

@media (max-width: 767.98px) {
    /* Swap the horizontally-scrolling grid for a stacked per-day layout. */
    .wm-desktop[b-0vzdy75f0e] {
        display: none;
    }

    .wm-mobile[b-0vzdy75f0e] {
        display: block;
    }

    /* ── Day pager (segmented control) ── */
    .wm-day-pager[b-0vzdy75f0e] {
        display: flex;
        gap: 0.4rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.15rem 0.1rem 0.5rem;
        scrollbar-width: none;
    }

    .wm-day-pager[b-0vzdy75f0e]::-webkit-scrollbar {
        display: none;
    }

    .wm-pager-btn[b-0vzdy75f0e] {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.05rem;
        min-width: 52px;
        min-height: var(--tap-min, 44px);
        padding: 0.35rem 0.55rem;
        border: 1px solid var(--surface-contrast, #dee2e6);
        border-radius: var(--radius, 12px);
        background: var(--card-bg, #fff);
        color: var(--text-secondary, #475569);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    }

    .wm-pager-btn--today[b-0vzdy75f0e] {
        border-color: rgba(var(--accent-rgb, 81, 43, 212), 0.4);
    }

    .wm-pager-btn--active[b-0vzdy75f0e] {
        background: var(--accent, #512BD4);
        border-color: var(--accent, #512BD4);
        color: #fff;
    }

    .wm-pager-dow[b-0vzdy75f0e] {
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .wm-pager-date[b-0vzdy75f0e] {
        font-size: 0.72rem;
        line-height: 1.1;
    }

    .wm-pager-btn--active .wm-pager-date[b-0vzdy75f0e] {
        color: rgba(255, 255, 255, 0.85);
    }

    .wm-pager-btn .wm-saved-dot[b-0vzdy75f0e] {
        background: var(--accent, #512BD4);
        margin-top: 0.05rem;
    }

    .wm-pager-btn--active .wm-saved-dot[b-0vzdy75f0e] {
        background: #fff;
    }

    /* ── Day panel ── */
    .wm-day-panel[b-0vzdy75f0e] {
        border: 1px solid var(--surface-contrast, #dee2e6);
        border-radius: var(--radius-card, 14px);
        background: var(--card-bg, #fff);
        padding: 0.75rem 0.85rem 0.5rem;
    }

    .wm-day-panel--future[b-0vzdy75f0e] {
        opacity: 0.85;
    }

    .wm-day-panel-head[b-0vzdy75f0e] {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid color-mix(in srgb, var(--surface-contrast, #dee2e6) 60%, transparent);
    }

    .wm-day-panel-title[b-0vzdy75f0e] {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-primary, #1f2937);
    }

    .wm-day-panel-total[b-0vzdy75f0e] {
        font-size: 0.85rem;
        color: var(--text-secondary, #475569);
        white-space: nowrap;
    }

    .wm-day-panel-total strong[b-0vzdy75f0e] {
        color: var(--accent, #512BD4);
        font-size: 0.95rem;
    }

    .wm-future-note[b-0vzdy75f0e] {
        font-size: 0.85rem;
        color: var(--muted, #64748b);
        margin: 0 0 0.5rem;
    }

    /* ── Per-question block ── */
    .wm-m-question[b-0vzdy75f0e] {
        padding: 0.7rem 0;
        border-bottom: 1px solid color-mix(in srgb, var(--surface-contrast, #dee2e6) 55%, transparent);
    }

    .wm-m-question:last-child[b-0vzdy75f0e] {
        border-bottom: none;
        padding-bottom: 0.3rem;
    }

    .wm-m-q-text[b-0vzdy75f0e] {
        font-size: 0.95rem;
        line-height: 1.4;
        margin: 0 0 0.55rem;
        color: var(--text-primary, #1f2937);
    }

    .wm-m-options[b-0vzdy75f0e] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .wm-m-option-btn[b-0vzdy75f0e] {
        width: 100%;
        min-height: var(--tap-min, 44px);
        padding: 0.6rem 0.85rem;
        border: 1px solid var(--surface-contrast, #d1d5db);
        border-radius: var(--radius, 12px);
        background: var(--card-bg, #fff);
        color: var(--text-primary, #1f2937);
        font-size: 0.9375rem;
        font-weight: 500;
        text-align: left;
        line-height: 1.35;
        white-space: normal;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    }

    .wm-m-option-btn:active[b-0vzdy75f0e] {
        transform: scale(0.985);
    }

    .wm-m-option-btn--selected[b-0vzdy75f0e] {
        background: var(--accent, #512BD4);
        border-color: var(--accent, #512BD4);
        color: #fff;
        font-weight: 600;
    }

    .wm-m-option-btn--selected[b-0vzdy75f0e]::after {
        content: "\2713";
        margin-left: 0.75rem;
        font-size: 1.05rem;
        line-height: 1;
    }

    .wm-m-option-btn:disabled[b-0vzdy75f0e] {
        opacity: 0.5;
        cursor: default;
    }

    /* ── Binary (yes/no) control ── */
    .wm-m-binary-btn[b-0vzdy75f0e] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: var(--tap-min, 44px);
        padding: 0.55rem 1rem;
        border: 1px solid var(--surface-contrast, #d1d5db);
        border-radius: var(--radius-pill, 9999px);
        background: var(--card-bg, #fff);
        color: var(--text-secondary, #475569);
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    }

    .wm-m-binary-btn i[b-0vzdy75f0e] {
        font-size: 1.2rem;
    }

    .wm-m-binary-btn--yes[b-0vzdy75f0e] {
        background: var(--accent, #512BD4);
        border-color: var(--accent, #512BD4);
        color: #fff;
    }

    .wm-m-binary-btn:disabled[b-0vzdy75f0e] {
        opacity: 0.5;
        cursor: default;
    }

    /* Keep the save button clear of the fixed glass bottom nav. */
    .wm-footer[b-0vzdy75f0e] {
        padding-bottom: var(--bottom-nav-space, 0);
    }

    .wm-footer .btn[b-0vzdy75f0e] {
        min-height: var(--tap-min, 44px);
    }
}
/* /Components/Pages/Relationships/Relationships.razor.rz.scp.css */
.rel-page[b-d9m8yf9xv6] {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.25rem 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rel-header h1[b-d9m8yf9xv6] {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
}

.rel-subtitle[b-d9m8yf9xv6] {
    margin: 0;
    color: var(--text-muted, #6c757d);
}

.rel-section[b-d9m8yf9xv6] {
    background: var(--surface, #fff);
    border: 1px solid var(--border-color, #e6e6e6);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.rel-section--id[b-d9m8yf9xv6] {
    background: linear-gradient(180deg, rgba(76, 175, 80, 0.06), rgba(76, 175, 80, 0));
}

.rel-section-head[b-d9m8yf9xv6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rel-section-head h2[b-d9m8yf9xv6] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.rel-section-icon[b-d9m8yf9xv6] {
    color: var(--text-muted, #6c757d);
    font-size: 1.1rem;
}

.rel-section-lede[b-d9m8yf9xv6] {
    margin: 0 0 0.75rem;
    color: var(--text-muted, #6c757d);
    font-size: 0.95rem;
}

.rel-handle-card[b-d9m8yf9xv6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: var(--bg-subtle, #f5f5f7);
    border-radius: 10px;
}

.rel-handle[b-d9m8yf9xv6] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-default, #212529);
    flex: 1;
    word-break: break-all;
}

.rel-add[b-d9m8yf9xv6] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.rel-input[b-d9m8yf9xv6] {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--border-color, #ced4da);
    border-radius: 8px;
    background: var(--surface, #fff);
}

.rel-input:focus[b-d9m8yf9xv6] {
    outline: 2px solid rgba(var(--accent-rgb), 0.25);
    outline-offset: 0;
    border-color: var(--accent);
}

.rel-add-help[b-d9m8yf9xv6] {
    margin: 0.5rem 0 0;
}

.rel-error[b-d9m8yf9xv6] {
    margin: 0.5rem 0 0;
    color: #c0392b;
    font-size: 0.9rem;
}

.rel-btn-primary[b-d9m8yf9xv6] {
    appearance: none;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.rel-btn-primary:hover:not(:disabled)[b-d9m8yf9xv6] {
    background: var(--accent-strong);
}

.rel-btn-primary:disabled[b-d9m8yf9xv6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.rel-btn-secondary[b-d9m8yf9xv6] {
    appearance: none;
    background: transparent;
    color: var(--text-default, #212529);
    border: 1px solid var(--border-color, #ced4da);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.rel-btn-secondary:hover:not(:disabled)[b-d9m8yf9xv6] {
    background: rgba(0, 0, 0, 0.04);
}

.rel-btn-secondary:disabled[b-d9m8yf9xv6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.rel-btn-danger[b-d9m8yf9xv6] {
    appearance: none;
    background: transparent;
    color: #c0392b;
    border: 1px solid rgba(192, 57, 43, 0.5);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.rel-btn-danger:hover:not(:disabled)[b-d9m8yf9xv6] {
    background: rgba(192, 57, 43, 0.08);
}

.rel-btn-danger:disabled[b-d9m8yf9xv6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.rel-list[b-d9m8yf9xv6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rel-row[b-d9m8yf9xv6] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: var(--bg-subtle, #f5f5f7);
}

.rel-row--enhanceable[b-d9m8yf9xv6] {
    grid-template-columns: 1.2fr 1.4fr auto;
}

.rel-row-main[b-d9m8yf9xv6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.rel-row-name[b-d9m8yf9xv6] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rel-row-meta[b-d9m8yf9xv6] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.875rem;
}

.rel-grant[b-d9m8yf9xv6] {
    color: var(--text-muted, #6c757d);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.rel-grant--on[b-d9m8yf9xv6] {
    color: var(--success);
}

.rel-grant--inverse[b-d9m8yf9xv6] {
    color: var(--info);
    font-size: 0.8rem;
}

.rel-row-actions[b-d9m8yf9xv6] {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
}

/* "View profile" link styled as a secondary button. */
a.rel-btn-view[b-d9m8yf9xv6] {
    text-decoration: none;
    white-space: nowrap;
}

.rel-avatar[b-d9m8yf9xv6] {
    font-size: 1.3rem;
    color: var(--accent);
}

.rel-avatar.muted[b-d9m8yf9xv6] {
    color: var(--text-muted, #6c757d);
}

.muted[b-d9m8yf9xv6] {
    color: var(--text-muted, #6c757d);
}

.small[b-d9m8yf9xv6] {
    font-size: 0.875rem;
}

@media (max-width: 767.98px) {
    /* Keep page content clear of the fixed glass bottom nav. */
    .rel-page[b-d9m8yf9xv6] {
        padding-bottom: var(--bottom-nav-space);
    }

    /* The fixed 3-col grid crams name + grant lines + action into one row
       and overflows on phones. Stack to a single column: name on top,
       meta next, full-width action last. */
    .rel-row[b-d9m8yf9xv6],
    .rel-row--enhanceable[b-d9m8yf9xv6] {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.5rem;
    }

    .rel-row-meta[b-d9m8yf9xv6] {
        font-size: 0.9rem;
    }

    .rel-row-actions[b-d9m8yf9xv6] {
        justify-content: stretch;
    }

    /* Full-width, comfortable tap height for the row actions. */
    .rel-row-actions > button[b-d9m8yf9xv6],
    .rel-row-actions > a[b-d9m8yf9xv6] {
        flex: 1 1 auto;
        min-height: var(--tap-min);
    }

    .rel-row-actions > a.rel-btn-view[b-d9m8yf9xv6] {
        justify-content: center;
    }

    /* Add-relationship form also stacks so the input + button each get a row. */
    .rel-add[b-d9m8yf9xv6] {
        flex-direction: column;
        align-items: stretch;
    }

    .rel-add .rel-input[b-d9m8yf9xv6],
    .rel-add .rel-btn-primary[b-d9m8yf9xv6] {
        width: 100%;
        min-height: var(--tap-min);
    }

    /* Handle card: copy button full-width tap target under the code. */
    .rel-handle-card[b-d9m8yf9xv6] {
        flex-wrap: wrap;
    }

    .rel-handle-card .rel-btn-secondary[b-d9m8yf9xv6] {
        min-height: var(--tap-min);
    }
}
/* /Components/Pages/Review/Daily/ReviewDaily.razor.rz.scp.css */
/* ── Page wrapper ─────────────────────────────────────────────── */
.rd-page[b-9ilo5bcdei] {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--rd-header-height, 56px);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg, #f4f7fb);
    z-index: 10;
}

/* ── Top bar ─────────────────────────────────────────────────── */
.rd-topbar[b-9ilo5bcdei] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--card-bg, #fff);
    flex-shrink: 0;
}

.rd-nav-btn[b-9ilo5bcdei] {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #512BD4);
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.rd-nav-btn:hover:not(:disabled)[b-9ilo5bcdei] {
    background: rgba(0, 0, 0, 0.04);
}

.rd-nav-btn:disabled[b-9ilo5bcdei] {
    opacity: 0.35;
    cursor: not-allowed;
}

.rd-date-input[b-9ilo5bcdei] {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    font-size: 0.88rem;
    background: var(--card-bg, #fff);
    color: inherit;
}

.rd-date-label[b-9ilo5bcdei] {
    font-weight: 600;
    font-size: 0.95rem;
    margin-left: 0.25rem;
    white-space: nowrap;
}

/* ── Loading state ───────────────────────────────────────────── */
.rd-loading[b-9ilo5bcdei] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── 3-column grid ───────────────────────────────────────────── */
.rd-columns[b-9ilo5bcdei] {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.rd-col[b-9ilo5bcdei] {
    overflow-y: auto;
    padding: 1rem;
    border-right: 1px solid rgba(0, 0, 0, 0.07);
    -webkit-overflow-scrolling: touch;
}

.rd-col:last-child[b-9ilo5bcdei] {
    border-right: none;
}

.rd-col-title[b-9ilo5bcdei] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted, #6c757d);
    margin-bottom: 0.75rem;
}

/* ── Empty state ─────────────────────────────────────────────── */
.rd-empty[b-9ilo5bcdei] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--muted, #6c757d);
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    margin-top: 0.25rem;
    font-size: 0.88rem;
}

.rd-empty p[b-9ilo5bcdei] {
    margin: 0;
}

.rd-empty-icon[b-9ilo5bcdei] {
    font-size: 1.75rem;
    margin-bottom: 0.4rem;
    opacity: 0.55;
}

/* ── Session cards (left column) ────────────────────────────── */
.rd-session-group[b-9ilo5bcdei] {
    margin-bottom: 1.1rem;
}

.rd-session-group-name[b-9ilo5bcdei] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent, #512BD4);
    margin-bottom: 0.4rem;
}

.rd-session-card[b-9ilo5bcdei] {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left-width: 3px;
    border-radius: 10px;
    margin-bottom: 0.45rem;
    overflow: hidden;
    background: var(--card-bg, #fff);
    border-left-color: rgba(0, 0, 0, 0.15);
}

.rd-session-header[b-9ilo5bcdei] {
    width: 100%;
    background: none;
    border: none;
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    gap: 0.5rem;
}

.rd-session-header:hover[b-9ilo5bcdei] {
    background: rgba(0, 0, 0, 0.025);
}

.rd-session-info[b-9ilo5bcdei] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.rd-session-time[b-9ilo5bcdei] {
    font-size: 0.78rem;
    color: var(--muted, #6c757d);
}

.rd-score-wrap[b-9ilo5bcdei] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.rd-score[b-9ilo5bcdei] {
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 1.8rem;
    text-align: right;
    color: var(--muted, #6c757d);
}

.rd-chevron[b-9ilo5bcdei] {
    font-size: 0.8rem;
    color: var(--muted, #6c757d);
}

.rd-severity-badge[b-9ilo5bcdei] {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.38rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--muted, #6c757d);
}

.rd-session-body[b-9ilo5bcdei] {
    padding: 0.45rem 0.8rem 0.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.rd-link[b-9ilo5bcdei] {
    color: var(--accent, #512BD4);
    text-decoration: none;
    font-size: 0.84rem;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.rd-link:hover[b-9ilo5bcdei] {
    text-decoration: underline;
}

/* ── Severity colour tokens ──────────────────────────────────── */
/* Card border-left */
.rd-session-card.sev-none[b-9ilo5bcdei]          { border-left-color: #22c55e; }
.rd-session-card.sev-mild[b-9ilo5bcdei]          { border-left-color: #f59e0b; }
.rd-session-card.sev-moderate[b-9ilo5bcdei]      { border-left-color: #f97316; }
.rd-session-card.sev-mod-severe[b-9ilo5bcdei],
.rd-session-card.sev-severe[b-9ilo5bcdei]        { border-left-color: var(--bs-danger, #dc3545); }

/* Score text */
.rd-score.sev-none[b-9ilo5bcdei]                 { color: #16a34a; }
.rd-score.sev-mild[b-9ilo5bcdei]                 { color: #d97706; }
.rd-score.sev-moderate[b-9ilo5bcdei]             { color: #ea580c; }
.rd-score.sev-mod-severe[b-9ilo5bcdei],
.rd-score.sev-severe[b-9ilo5bcdei]               { color: var(--bs-danger, #dc3545); }

/* Severity badge */
.rd-severity-badge.sev-none[b-9ilo5bcdei]        { background: #dcfce7; color: #15803d; }
.rd-severity-badge.sev-mild[b-9ilo5bcdei]        { background: #fef9c3; color: #92400e; }
.rd-severity-badge.sev-moderate[b-9ilo5bcdei]    { background: #ffedd5; color: #c2410c; }
.rd-severity-badge.sev-mod-severe[b-9ilo5bcdei],
.rd-severity-badge.sev-severe[b-9ilo5bcdei]      { background: #fee2e2; color: #991b1b; }

/* ── Task list (middle column) ───────────────────────────────── */
.rd-task-list[b-9ilo5bcdei] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rd-task-item[b-9ilo5bcdei] {
    display: grid;
    grid-template-columns: 5.25rem 1fr;
    gap: 0.6rem;
    align-items: stretch;
}

.rd-task-time[b-9ilo5bcdei] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding-top: 0.55rem;
    font-size: 0.78rem;
    color: var(--muted, #6c757d);
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.rd-task-time-start[b-9ilo5bcdei] {
    font-weight: 600;
    color: inherit;
}

.rd-task-card[b-9ilo5bcdei] {
    border-left: 3px solid var(--accent, #512BD4);
    border-radius: 0 8px 8px 0;
    background: var(--card-bg, #fff);
    padding: 0.5rem 0.7rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.rd-task-title[b-9ilo5bcdei] {
    font-weight: 600;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.rd-task-notes[b-9ilo5bcdei] {
    font-size: 0.8rem;
    color: var(--muted, #6c757d);
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}

/* Mood check-in variant of the task card */
.rd-task-card--mood[b-9ilo5bcdei] {
    border-left: 3px solid #ec4899;
    background: linear-gradient(180deg, rgba(236, 72, 153, 0.04), var(--card-bg, #fff));
}

.rd-task-card--mood .rd-task-title[b-9ilo5bcdei] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #be185d;
}

.rd-mood-stats[b-9ilo5bcdei] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

/* Symptom-log variant of the task card */
.rd-task-card--symptom[b-9ilo5bcdei] {
    border-left: 3px solid #6366f1;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.05), var(--card-bg, #fff));
}

.rd-task-card--symptom .rd-task-title[b-9ilo5bcdei] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #4338ca;
}

.rd-symptom-header[b-9ilo5bcdei] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rd-symptom-tags[b-9ilo5bcdei] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.rd-symptom-tag[b-9ilo5bcdei] {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    padding: 0.12rem 0.5rem;
    background: rgba(99, 102, 241, 0.08);
    color: #4338ca;
    border-radius: 999px;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.rd-symptom-tag--disorder[b-9ilo5bcdei] {
    background: rgba(99, 102, 241, 0.18);
    font-weight: 600;
    text-transform: none;
}

.rd-mood-stat[b-9ilo5bcdei] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.74rem;
    padding: 0.12rem 0.45rem;
    background: rgba(236, 72, 153, 0.08);
    border-radius: 999px;
}

.rd-mood-stat-label[b-9ilo5bcdei] {
    color: var(--muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.62rem;
}

.rd-mood-stat-value[b-9ilo5bcdei] {
    font-weight: 700;
    color: #be185d;
}

.rd-mood-header[b-9ilo5bcdei] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rd-mood-actions[b-9ilo5bcdei] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.rd-mood-edit-btn[b-9ilo5bcdei] {
    background: none;
    border: 1px solid rgba(236, 72, 153, 0.35);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #be185d;
    cursor: pointer;
    font-size: 0.78rem;
    transition: background 0.15s;
    flex-shrink: 0;
}

.rd-mood-edit-btn:hover[b-9ilo5bcdei] {
    background: rgba(236, 72, 153, 0.1);
}

.rd-mood-delete-btn[b-9ilo5bcdei] {
    background: none;
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b91c1c;
    cursor: pointer;
    font-size: 0.78rem;
    transition: background 0.15s;
    flex-shrink: 0;
}

.rd-mood-delete-btn:hover[b-9ilo5bcdei] {
    background: rgba(220, 38, 38, 0.1);
}

.rd-mood-delete-confirm[b-9ilo5bcdei] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(220, 38, 38, 0.25);
    background: rgba(254, 226, 226, 0.4);
    border-radius: 6px;
    font-size: 0.82rem;
    color: #7f1d1d;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rd-mood-btn-danger[b-9ilo5bcdei] {
    background: #dc2626;
    color: #fff;
}

.rd-mood-btn-danger:hover:not(:disabled)[b-9ilo5bcdei] {
    background: #b91c1c;
}

/* Inline edit form */
.rd-mood-edit[b-9ilo5bcdei] {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.rd-mood-edit-slider[b-9ilo5bcdei] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.rd-mood-edit-row[b-9ilo5bcdei] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.78rem;
}

.rd-mood-edit-label[b-9ilo5bcdei] {
    color: var(--muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.66rem;
    font-weight: 700;
}

.rd-mood-edit-value[b-9ilo5bcdei] {
    font-weight: 700;
    font-size: 0.88rem;
}

.rd-mood-edit-input[b-9ilo5bcdei] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    outline: none;
    background: linear-gradient(
        to right,
        var(--thumb-color, #ec4899) 0%,
        var(--thumb-color, #ec4899) var(--fill-pct, 0%),
        rgba(0, 0, 0, 0.1) var(--fill-pct, 0%),
        rgba(0, 0, 0, 0.1) 100%
    );
    cursor: pointer;
}

.rd-mood-edit-input[b-9ilo5bcdei]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--thumb-color, #ec4899);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.rd-mood-edit-input[b-9ilo5bcdei]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--thumb-color, #ec4899);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.rd-mood-edit-notes-label[b-9ilo5bcdei] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}

.rd-mood-edit-notes-optional[b-9ilo5bcdei] {
    font-weight: 400;
    text-transform: none;
    opacity: 0.7;
}

.rd-mood-edit-notes[b-9ilo5bcdei] {
    font-size: 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    resize: vertical;
}

.rd-mood-edit-actions[b-9ilo5bcdei] {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.rd-mood-btn[b-9ilo5bcdei] {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.3rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.rd-mood-btn:disabled[b-9ilo5bcdei] {
    opacity: 0.55;
    cursor: not-allowed;
}

.rd-mood-btn-primary[b-9ilo5bcdei] {
    background: #ec4899;
    color: #fff;
}

.rd-mood-btn-primary:hover:not(:disabled)[b-9ilo5bcdei] {
    background: #db2777;
}

.rd-mood-btn-secondary[b-9ilo5bcdei] {
    background: transparent;
    color: var(--muted, #6c757d);
    border-color: rgba(0, 0, 0, 0.12);
}

.rd-mood-btn-secondary:hover:not(:disabled)[b-9ilo5bcdei] {
    background: rgba(0, 0, 0, 0.04);
}

.rd-mood-edit-error[b-9ilo5bcdei] {
    font-size: 0.78rem;
    color: #b91c1c;
    background: #fee2e2;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
}

.rd-mood-triggers[b-9ilo5bcdei] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.rd-mood-trigger-chip[b-9ilo5bcdei] {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--muted, #6c757d);
}

/* ── Right column sections ───────────────────────────────────── */
.rd-section[b-9ilo5bcdei] {
    margin-bottom: 1.4rem;
}

.rd-section-title[b-9ilo5bcdei] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted, #6c757d);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.rd-muted[b-9ilo5bcdei] {
    font-size: 0.84rem;
    color: var(--muted, #6c757d);
    margin: 0;
}

/* Medications — category groups */
.rd-med-category[b-9ilo5bcdei] {
    margin-bottom: 0.85rem;
}

.rd-med-category-label[b-9ilo5bcdei] {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.3rem;
}

/* Category colour tokens */
.cat-medication[b-9ilo5bcdei]  { background: #dbeafe; color: #1e40af; }
.cat-supplement[b-9ilo5bcdei]  { background: #dcfce7; color: #15803d; }
.cat-vitamin[b-9ilo5bcdei]     { background: #fef9c3; color: #854d0e; }
.cat-herb[b-9ilo5bcdei]        { background: #d1fae5; color: #065f46; }
.cat-probiotic[b-9ilo5bcdei]   { background: #ede9fe; color: #5b21b6; }
.cat-mineral[b-9ilo5bcdei]     { background: #ffedd5; color: #9a3412; }
.cat-other[b-9ilo5bcdei]       { background: rgba(0,0,0,0.06); color: var(--muted, #6c757d); }

/* Medication list */
.rd-med-list[b-9ilo5bcdei] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rd-med-row[b-9ilo5bcdei] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.87rem;
}

.rd-med-row:last-child[b-9ilo5bcdei] {
    border-bottom: none;
}

.rd-med-main[b-9ilo5bcdei] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.rd-med-name[b-9ilo5bcdei] {
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-med-dose[b-9ilo5bcdei] {
    font-size: 0.76rem;
    color: var(--muted, #6c757d);
    flex-shrink: 0;
}

/* Intake time chips */
.rd-med-intakes[b-9ilo5bcdei] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rd-intake-chip[b-9ilo5bcdei] {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
    /* inherits the cat-* colour from parent markup */
}

/* Metrics grid */
.rd-metric-grid[b-9ilo5bcdei] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.45rem;
}

.rd-metric-card[b-9ilo5bcdei] {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
}

.rd-metric-name[b-9ilo5bcdei] {
    font-size: 0.68rem;
    color: var(--muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-metric-value[b-9ilo5bcdei] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.1rem;
}

.rd-metric-unit[b-9ilo5bcdei] {
    font-size: 0.68rem;
    color: var(--muted, #6c757d);
}

/* Sleep */
.rd-sleep-summary[b-9ilo5bcdei] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.rd-sleep-row[b-9ilo5bcdei] {
    display: flex;
    justify-content: space-between;
    font-size: 0.87rem;
}

.rd-sleep-label[b-9ilo5bcdei] {
    color: var(--muted, #6c757d);
}

.rd-sleep-value[b-9ilo5bcdei] {
    font-weight: 600;
}

/* ── Mobile: stack columns vertically + tablet/phone polish ─── */
@media (max-width: 767.98px) {
    /* Page wrapper: drop the fixed-position scroll trap. Use natural
       body scroll so iOS Safari's address-bar resize works correctly,
       and leave room for the floating mobile bottom nav. */
    .rd-page[b-9ilo5bcdei] {
        position: static;
        overflow: visible;
        padding-bottom: var(--bottom-nav-space);
    }

    /* Topbar becomes sticky to the page so the date picker stays in
       reach while scrolling. Wrapping lets the long day label drop
       onto its own line at small widths. */
    .rd-topbar[b-9ilo5bcdei] {
        position: sticky;
        top: var(--rd-header-height, 56px);
        z-index: 5;
        flex-wrap: wrap;
        padding: 0.5rem 0.75rem;
        gap: 0.4rem;
    }

    .rd-date-input[b-9ilo5bcdei] {
        flex: 1 1 0;
        min-width: 0;
        font-size: 0.9rem;
        padding: 0.4rem 0.55rem;
    }

    .rd-date-label[b-9ilo5bcdei] {
        flex: 1 0 100%;
        margin-left: 0;
        font-size: 0.85rem;
        color: var(--muted, #6c757d);
        font-weight: 500;
    }

    /* Stack columns. */
    .rd-columns[b-9ilo5bcdei] {
        grid-template-columns: 1fr;
        overflow: visible;
        flex: unset;
    }

    .rd-col[b-9ilo5bcdei] {
        overflow-y: visible;
        padding: 1rem 0.75rem;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }

    .rd-col:last-child[b-9ilo5bcdei] {
        border-bottom: none;
    }

    /* Column / section titles become real section headers when
       everything's one long scroll. */
    .rd-col-title[b-9ilo5bcdei],
    .rd-section-title[b-9ilo5bcdei] {
        font-size: 0.78rem;
        color: var(--text-default, #1f2937);
        margin-bottom: 0.7rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .rd-section[b-9ilo5bcdei] {
        margin-bottom: 1.1rem;
    }

    /* Task rows: stack the timestamp above the card so the card
       captures the full row width on narrow screens. */
    .rd-task-item[b-9ilo5bcdei] {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .rd-task-time[b-9ilo5bcdei] {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        padding-top: 0;
        text-align: left;
        font-size: 0.72rem;
        gap: 0.4rem;
    }

    .rd-task-card[b-9ilo5bcdei] {
        padding: 0.55rem 0.7rem;
    }

    /* Mood stats: pin to a 3-up grid so the pills don't squash
       arbitrarily when half a dozen axes are recorded. */
    .rd-mood-stats[b-9ilo5bcdei] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .rd-mood-stat[b-9ilo5bcdei] {
        justify-content: space-between;
        padding: 0.2rem 0.5rem;
    }

    /* Metric grid: 2-up at most, tighter gutters. */
    .rd-metric-grid[b-9ilo5bcdei] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    /* Med rows: name can wrap; dosage drops to a new line. */
    .rd-med-name[b-9ilo5bcdei] {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .rd-med-main[b-9ilo5bcdei] {
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    /* Touch targets: expand hit areas to the 44px minimum on mobile.
       The visible glyph stays its original size (centred via flex). */
    .rd-nav-btn[b-9ilo5bcdei],
    .rd-mood-edit-btn[b-9ilo5bcdei],
    .rd-mood-delete-btn[b-9ilo5bcdei] {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
    }
}

/* Very narrow phones — 2 mood stats per row, even tighter gutters. */
@media (max-width: 419.98px) {
    .rd-mood-stats[b-9ilo5bcdei] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rd-col[b-9ilo5bcdei] {
        padding: 0.85rem 0.65rem;
    }

    .rd-topbar[b-9ilo5bcdei] {
        padding: 0.5rem 0.65rem;
    }
}
/* /Components/Pages/Review/Metrics/ReviewMetrics.razor.rz.scp.css */
/* ================= Mobile review-metrics layout ================= */

.rm-mobile[b-2eaag90xpr] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    background: #f5f7fb;
    /* clear the fixed glass bottom nav so the last chart isn't hidden */
    padding-bottom: var(--bottom-nav-space);
}

.rm-header[b-2eaag90xpr] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.5rem 0.75rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* lift slightly so content can scroll under it cleanly */
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

/* Horizontal scrolling chip rails — patients, range presets */
.rm-chip-row[b-2eaag90xpr] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.15rem 0;
    /* allow chips to break out of the parent's padding so the first chip lines up with content edge */
    margin: 0 -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.rm-chip-row[b-2eaag90xpr]::-webkit-scrollbar { display: none; }

.rm-chip[b-2eaag90xpr] {
    flex: 0 0 auto;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.rm-chip:active[b-2eaag90xpr] { transform: scale(0.97); }

.rm-chip.active[b-2eaag90xpr] {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.rm-patient-chip[b-2eaag90xpr] {
    flex: 0 0 auto;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #1f2937;
    border-radius: 999px;
    padding: 0.25rem 0.85rem 0.25rem 0.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    max-width: 200px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.rm-patient-chip.active[b-2eaag90xpr] {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.rm-patient-chip.active .rm-avatar[b-2eaag90xpr] {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.rm-avatar[b-2eaag90xpr] {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.rm-patient-name[b-2eaag90xpr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.rm-custom-range[b-2eaag90xpr] {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.rm-custom-label[b-2eaag90xpr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rm-custom-label input[b-2eaag90xpr] { font-size: 0.9rem; }

.rm-action-row[b-2eaag90xpr] {
    display: flex;
    gap: 0.5rem;
}

.rm-action-btn[b-2eaag90xpr] {
    flex: 1;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #1f2937;
    border-radius: 0.6rem;
    padding: 0.55rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.rm-action-btn:active[b-2eaag90xpr] { background: #f3f4f6; }

/* Charts area */
.rm-charts[b-2eaag90xpr] {
    flex: 1;
    padding: 0.65rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.rm-empty[b-2eaag90xpr] {
    margin: 2rem 1rem;
    padding: 2rem 1rem;
    text-align: center;
    color: #4b5563;
    background: #ffffff;
    border: 1px dashed #d1d5db;
    border-radius: 0.85rem;
}

.rm-empty-icon[b-2eaag90xpr] {
    font-size: 2.25rem;
    color: #9ca3af;
    display: block;
    margin-bottom: 0.5rem;
}

.rm-chart-card[b-2eaag90xpr] {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.65rem 0.75rem 0.85rem;
}

.rm-chart-header[b-2eaag90xpr] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.rm-chart-title[b-2eaag90xpr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: #111827;
    font-size: 0.95rem;
    min-width: 0;
}

.rm-chart-title .rm-name[b-2eaag90xpr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-trend[b-2eaag90xpr] { font-size: 1.1rem; }

.rm-chart-trend-text[b-2eaag90xpr] {
    font-size: 0.72rem;
    color: #6b7280;
    text-align: right;
    flex: 0 0 auto;
    max-width: 45%;
    line-height: 1.2;
}

.rm-chart-body[b-2eaag90xpr] {
    height: 220px;
    position: relative;
}

.rm-chart-body-secondary[b-2eaag90xpr] {
    height: 160px;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
}

.rm-chart-spinner[b-2eaag90xpr] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
}

/* Bottom-sheet pickers */
.rm-sheet-overlay[b-2eaag90xpr] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 50;
    animation: rm-fade-in-b-2eaag90xpr 0.15s ease;
}

.rm-sheet[b-2eaag90xpr] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 51;
    background: #ffffff;
    border-top-left-radius: 1.1rem;
    border-top-right-radius: 1.1rem;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.16);
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    /* respect iOS home-indicator safe area */
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: rm-slide-up-b-2eaag90xpr 0.18s ease;
}

.rm-sheet-short[b-2eaag90xpr] { max-height: 50vh; }

.rm-sheet-handle[b-2eaag90xpr] {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 999px;
    margin: 0.5rem auto 0.25rem;
}

.rm-sheet-header[b-2eaag90xpr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 1rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

/* Metric buttons grid */
.rm-metric-grid[b-2eaag90xpr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.rm-metric-buttons[b-2eaag90xpr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rm-metric-btn[b-2eaag90xpr] {
    flex: 0 0 auto;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #1f2937;
    border-radius: 0.625rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.2;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
}

.rm-metric-btn:hover[b-2eaag90xpr] {
    background: #f9fafb;
    border-color: #9ca3af;
}

.rm-metric-btn.active[b-2eaag90xpr] {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.rm-metric-name[b-2eaag90xpr] {
    font-weight: 500;
}

.rm-metric-unit[b-2eaag90xpr] {
    font-size: 0.75rem;
    opacity: 0.75;
}

.rm-metric-btn.active .rm-metric-unit[b-2eaag90xpr] {
    opacity: 0.9;
}

.rm-metric-btn.no-data[b-2eaag90xpr] {
    opacity: 0.55;
    color: var(--bs-secondary-color, #6c757d);
}

.rm-metric-btn.no-data:hover[b-2eaag90xpr] {
    opacity: 0.85;
}

.rm-metric-btn.no-data.active[b-2eaag90xpr] {
    opacity: 0.9;
}

.rm-cap-notice[b-2eaag90xpr] {
    font-size: 0.85rem;
}

@keyframes rm-fade-in-b-2eaag90xpr {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rm-slide-up-b-2eaag90xpr {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
/* /Components/Pages/Review/Questionnaires/QuestionnaireCharts.razor.rz.scp.css */
.qtype-card[b-vudqru6qrk] {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    text-align: left;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease-out, border-color 0.15s ease-out;
}

.qtype-card:hover[b-vudqru6qrk] {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.qtype-card:focus-visible[b-vudqru6qrk] {
    outline: 2px solid var(--accent, #512BD4);
    outline-offset: 2px;
}

.qtype-card-header[b-vudqru6qrk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.qtype-chevron[b-vudqru6qrk] {
    color: var(--muted, #6c757d);
    font-size: 0.85rem;
}

/* /Components/Pages/Review/Questionnaires/QuestionnaireDetail.razor.rz.scp.css */
.questionnaire-detail-page[b-s6fl33trqa] {
    max-width: 920px;
}

.group-by-segment[b-s6fl33trqa] {
    display: flex;
    width: 100%;
    border-radius: 0.625rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--card-bg, #fff);
}

.group-by-option[b-s6fl33trqa] {
    flex: 1;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease-out, color 0.15s ease-out;
}

.group-by-option + .group-by-option[b-s6fl33trqa] {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.group-by-option.is-active[b-s6fl33trqa] {
    background: var(--accent, #512BD4);
    color: #fff;
}

/* /Components/Pages/Review/Questionnaires/ReviewQuestionnaires.razor.rz.scp.css */
.group-by-segment[b-qts0h74yxx] {
    display: flex;
    width: 100%;
    border-radius: 0.625rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
    margin-bottom: 0.625rem;
    background: var(--card-bg, #fff);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

.group-by-option[b-qts0h74yxx] {
    flex: 1;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease-out, color 0.15s ease-out;
}

.group-by-option + .group-by-option[b-qts0h74yxx] {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.group-by-option.is-active[b-qts0h74yxx] {
    background: var(--accent);
    color: #fff;
}

.date-range-bar[b-qts0h74yxx] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.date-range-nav[b-qts0h74yxx] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

.date-range-label[b-qts0h74yxx] {
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1f2937;
    padding: 0 0.5rem;
}

[b-qts0h74yxx] .period-rail {
    margin-bottom: 1rem;
}

/* /Components/Pages/Review/Questionnaires/SessionDetail.razor.rz.scp.css */
.sd-page[b-a5tdkpgef2] {
    max-width: 960px;
    margin: 1.25rem auto 4rem;
    padding: 0 1.25rem;
}

.sd-back[b-a5tdkpgef2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
}

.sd-back:hover[b-a5tdkpgef2] { text-decoration: underline; }

.sd-loading[b-a5tdkpgef2],
.sd-empty[b-a5tdkpgef2] {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--muted);
}

.sd-actions[b-a5tdkpgef2] {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 0.85rem;
}

.sd-delete[b-a5tdkpgef2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid rgba(var(--danger-rgb), 0.4);
    color: var(--danger);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.sd-delete:hover:not(:disabled)[b-a5tdkpgef2] {
    background: rgba(var(--danger-rgb), 0.08);
}

.sd-delete:disabled[b-a5tdkpgef2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.sd-header[b-a5tdkpgef2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.sd-eyebrow[b-a5tdkpgef2] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-bottom: 0.2rem;
}

.sd-title[b-a5tdkpgef2] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.sd-score[b-a5tdkpgef2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex: 0 0 auto;
}

.sd-score-value[b-a5tdkpgef2] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.sd-score-band[b-a5tdkpgef2] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted, #5b6470);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sd-section[b-a5tdkpgef2] {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.sd-section-title[b-a5tdkpgef2] {
    margin: 0 0 0.7rem 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sd-muted[b-a5tdkpgef2] {
    margin: 0;
    color: var(--muted, #5b6470);
    font-size: 0.92rem;
}

.sd-response-table-wrap[b-a5tdkpgef2] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sd-response-table[b-a5tdkpgef2] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.sd-response-table thead th[b-a5tdkpgef2] {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted, #5b6470);
    padding: 0.75rem 1rem;
    background: rgba(var(--accent-rgb), 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sd-response-table tbody td[b-a5tdkpgef2] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    vertical-align: middle;
    line-height: 1.4;
}

.sd-response-table tbody tr:last-child td[b-a5tdkpgef2] {
    border-bottom: none;
}

.sd-response-table tbody tr:nth-child(even) td[b-a5tdkpgef2] {
    background: rgba(0, 0, 0, 0.018);
}

.sd-response-table tbody tr:hover td[b-a5tdkpgef2] {
    background: rgba(var(--accent-rgb), 0.05);
}

.sd-col-question[b-a5tdkpgef2] {
    width: auto;
}

.sd-col-answer[b-a5tdkpgef2] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    padding-right: 1.5rem !important;
}

.sd-col-points[b-a5tdkpgef2] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.sd-response-table thead th.sd-col-answer[b-a5tdkpgef2],
.sd-response-table thead th.sd-col-points[b-a5tdkpgef2] {
    text-align: right;
}

.sd-response-num[b-a5tdkpgef2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.4rem;
    padding: 0 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: 999px;
    letter-spacing: 0.04em;
    margin-right: 0.65rem;
    vertical-align: middle;
}

.sd-response-text[b-a5tdkpgef2] {
    font-size: 0.95rem;
    color: var(--text-primary, #232a35);
}

.sd-response-answer[b-a5tdkpgef2] {
    display: inline-block;
    font-weight: 600;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.85rem;
    line-height: 1.2;
}

.sd-response-value[b-a5tdkpgef2] {
    display: inline-block;
    min-width: 1.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--muted, #5b6470);
    font-variant-numeric: tabular-nums;
}

.sd-meds-list[b-a5tdkpgef2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.sd-med[b-a5tdkpgef2] {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.025);
}

.sd-med-name[b-a5tdkpgef2] {
    flex: 1 1 auto;
    font-weight: 600;
}

.sd-med-dose[b-a5tdkpgef2],
.sd-med-time[b-a5tdkpgef2] {
    color: var(--muted, #5b6470);
    font-size: 0.85rem;
}

@media (max-width: 767.98px) {
    .sd-page[b-a5tdkpgef2] {
        padding: 0 0.85rem;
        margin-bottom: var(--bottom-nav-space);
    }

    /* Avoid sideways page scroll: render the response table as a stacked
       card-per-question instead of a 3-column grid with nowrap cells. */
    .sd-response-table-wrap[b-a5tdkpgef2] {
        overflow-x: visible;
    }

    .sd-response-table[b-a5tdkpgef2] {
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        display: block;
    }

    .sd-response-table thead[b-a5tdkpgef2] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .sd-response-table tbody[b-a5tdkpgef2] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .sd-response-table tbody tr[b-a5tdkpgef2] {
        display: block;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 12px;
        padding: 0.7rem 0.85rem;
        background: var(--card-bg, #fff);
    }

    /* Reset the desktop striping / hover so cards read evenly. */
    .sd-response-table tbody tr:nth-child(even) td[b-a5tdkpgef2],
    .sd-response-table tbody tr:hover td[b-a5tdkpgef2] {
        background: transparent;
    }

    .sd-response-table tbody td[b-a5tdkpgef2] {
        display: block;
        padding: 0;
        border-bottom: none;
    }

    .sd-col-question[b-a5tdkpgef2] {
        margin-bottom: 0.55rem;
    }

    /* Answer pill + points sit on one row below the question. */
    .sd-col-answer[b-a5tdkpgef2] {
        width: auto !important;
        white-space: normal !important;
        text-align: left !important;
        padding-right: 0 !important;
        display: inline-flex !important;
        align-items: center;
        gap: 0.5rem;
    }

    .sd-col-points[b-a5tdkpgef2] {
        width: auto !important;
        white-space: normal !important;
        text-align: left !important;
        display: inline-flex !important;
        align-items: center;
        margin-left: 0.5rem;
    }

    .sd-response-value[b-a5tdkpgef2]::before {
        content: "+";
    }
}

/* /Components/Pages/Review/Questionnaires/SubmissionsMatrix.razor.rz.scp.css */
/* ── Submissions matrix ──────────────────────────────────────── */
.submissions-matrix-wrap[b-mzmcfha5ml] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.submissions-matrix[b-mzmcfha5ml] {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    font-size: 0.875rem;
}

.submissions-matrix thead th[b-mzmcfha5ml] {
    padding: 0.5rem 0.75rem;
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    white-space: nowrap;
    background: var(--card-bg, #fff);
}

.submissions-matrix thead th.matrix-label-col[b-mzmcfha5ml] {
    text-align: left;
    min-width: 130px;
    position: sticky;
    left: 0;
    z-index: 2;
}

.matrix-date-day[b-mzmcfha5ml] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #6c757d);
    font-weight: 600;
}

.matrix-date-md[b-mzmcfha5ml] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1f2937;
}

.submissions-matrix tbody td[b-mzmcfha5ml] {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    text-align: center;
    vertical-align: middle;
}

.submissions-matrix tbody td.matrix-label-col[b-mzmcfha5ml] {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    color: #1f2937;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card-bg, #fff);
}

.matrix-name-link[b-mzmcfha5ml] {
    color: inherit;
    text-decoration: none;
    border-radius: 0.35rem;
    padding: 0.1rem 0.25rem;
    margin: -0.1rem -0.25rem;
    transition: color 0.15s ease-out, background 0.15s ease-out;
}

.matrix-name-link:hover[b-mzmcfha5ml],
.matrix-name-link:focus[b-mzmcfha5ml] {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
    text-decoration: none;
}

.matrix-score-link[b-mzmcfha5ml] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    border-radius: 0.5rem;
    padding: 0.3rem 0.5rem;
    transition: background 0.15s ease-out;
}

.matrix-score-link:hover[b-mzmcfha5ml] {
    background: rgba(var(--accent-rgb), 0.08);
}

.matrix-score[b-mzmcfha5ml] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent);
    line-height: 1;
}

.empty-cell .matrix-empty[b-mzmcfha5ml] {
    color: rgba(0,0,0,0.15);
    font-size: 1.1rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    /* Bump the tiny matrix type so it stays legible on a phone, and shrink the
       sticky name column so more date columns fit before horizontal scroll. */
    .submissions-matrix[b-mzmcfha5ml] {
        font-size: 0.92rem;
    }

    .submissions-matrix thead th[b-mzmcfha5ml],
    .submissions-matrix tbody td[b-mzmcfha5ml] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .submissions-matrix thead th.matrix-label-col[b-mzmcfha5ml] {
        min-width: 96px;
    }

    .matrix-date-day[b-mzmcfha5ml] {
        font-size: 0.72rem;
    }
}
/* /Components/Pages/Review/Sleep/Sleep.razor.rz.scp.css */
.sleep-page[b-ond9vx4h1g] {
    max-width: 1080px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    color: #1f2937;
}

.sleep-header[b-ond9vx4h1g] {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sleep-title-row[b-ond9vx4h1g] {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.sleep-title-row h1[b-ond9vx4h1g] {
    margin: 0;
    font-size: 1.75rem;
    flex: 1 1 auto;
    color: inherit;
}

.sleep-log-btn[b-ond9vx4h1g] {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--tap-min);
    white-space: nowrap;
}

.sleep-controls[b-ond9vx4h1g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.mode-selector[b-ond9vx4h1g] {
    display: inline-flex;
    align-self: flex-start;
    gap: 0.25rem;
    background: var(--surface-contrast);
    padding: 0.25rem;
    border-radius: 999px;
}

.day-nav[b-ond9vx4h1g] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--surface-contrast);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
}

.day-nav-button[b-ond9vx4h1g] {
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.day-nav-button:hover:not(:disabled)[b-ond9vx4h1g] {
    background: var(--surface-contrast);
}

.day-nav-button:disabled[b-ond9vx4h1g] {
    opacity: 0.4;
    cursor: not-allowed;
}

.day-nav-label[b-ond9vx4h1g] {
    min-width: 11rem;
    text-align: center;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.range-display[b-ond9vx4h1g] {
    font-size: 0.95rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.mode-button[b-ond9vx4h1g] {
    border: none;
    background: transparent;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    color: var(--muted);
    min-width: 72px;
}

.mode-button.active[b-ond9vx4h1g] {
    background: var(--accent);
    color: #fff;
}

/* Day mode */
.day-summary[b-ond9vx4h1g] {
    background: var(--card-bg);
    border: 1px solid var(--surface-contrast);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: inherit;
}

.day-total[b-ond9vx4h1g] {
    text-align: center;
}

.day-total-value[b-ond9vx4h1g] {
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    margin: 0.25rem 0 0.5rem;
    color: inherit;
}

.phase-breakdown[b-ond9vx4h1g] {
    display: grid;
    gap: 0.5rem;
}

.phase-row[b-ond9vx4h1g] {
    display: grid;
    grid-template-columns: 80px 1fr 110px;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
}

.phase-name[b-ond9vx4h1g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: inherit;
}

.phase-swatch[b-ond9vx4h1g] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.phase-bar-track[b-ond9vx4h1g] {
    height: 10px;
    background: var(--surface-contrast);
    border-radius: 6px;
    overflow: hidden;
}

.phase-bar-fill[b-ond9vx4h1g] {
    height: 100%;
    border-radius: 6px;
}

.phase-value[b-ond9vx4h1g] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: inherit;
}

.day-extras[b-ond9vx4h1g] {
    text-align: center;
    border-top: 1px solid var(--surface-contrast);
    padding-top: 1rem;
}

/* Week / Month summary cards */
.summary-grid[b-ond9vx4h1g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.summary-card[b-ond9vx4h1g] {
    background: var(--card-bg);
    border: 1px solid var(--surface-contrast);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    color: inherit;
}

.summary-label[b-ond9vx4h1g] {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.summary-value[b-ond9vx4h1g] {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    color: inherit;
}

.summary-sub[b-ond9vx4h1g] {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.chart-block[b-ond9vx4h1g] {
    background: var(--card-bg);
    border: 1px solid var(--surface-contrast);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    color: inherit;
}

.chart-block h2[b-ond9vx4h1g] {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    color: inherit;
}

.chart-block p[b-ond9vx4h1g] {
    margin: 0 0 0.75rem 0;
}

.chart-canvas[b-ond9vx4h1g] {
    position: relative;
    height: 320px;
}

.chart-canvas canvas[b-ond9vx4h1g] {
    width: 100% !important;
    height: 100% !important;
}

.source-block[b-ond9vx4h1g] {
    background: var(--card-bg);
    border: 1px solid var(--surface-contrast);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    color: inherit;
}

.source-block h2[b-ond9vx4h1g] {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    color: inherit;
}

.source-block p[b-ond9vx4h1g] {
    margin: 0;
}

.empty-state[b-ond9vx4h1g] {
    background: var(--card-bg);
    border: 1px dashed var(--surface-contrast);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    color: inherit;
}

.muted[b-ond9vx4h1g] {
    color: var(--muted);
}

.small[b-ond9vx4h1g] {
    font-size: 0.85rem;
}

/* Mobile: charts and cards go edge-to-edge so the canvas isn't squeezed
   into a 60% strip on a 360px-wide screen. Header keeps its side padding. */
@media (max-width: 720px) {
    .sleep-page[b-ond9vx4h1g] {
        padding: 0;
        margin: 1rem 0 2rem;
    }

    .sleep-header[b-ond9vx4h1g] {
        padding: 0 1rem;
    }

    .day-nav-label[b-ond9vx4h1g] {
        min-width: 9rem;
    }

    .summary-grid[b-ond9vx4h1g] {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .day-summary[b-ond9vx4h1g],
    .chart-block[b-ond9vx4h1g],
    .source-block[b-ond9vx4h1g],
    .empty-state[b-ond9vx4h1g] {
        border-left: none;
        border-right: none;
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .chart-block[b-ond9vx4h1g] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .chart-canvas[b-ond9vx4h1g] {
        height: 280px;
    }
}

/* App-standard mobile breakpoint: clear the fixed glass bottom nav and
   ensure the day-nav arrows meet the 44px touch-target minimum. */
@media (max-width: 767.98px) {
    .sleep-page[b-ond9vx4h1g] {
        padding-bottom: var(--bottom-nav-space);
    }

    .day-nav-button[b-ond9vx4h1g] {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
    }
}
/* /Components/Pages/Review/Sleep/SleepEditorModal.razor.rz.scp.css */
.sleep-editor-backdrop[b-w15olewdx2] {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 2000);
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.sleep-editor[b-w15olewdx2] {
    width: 100%;
    max-width: 460px;
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}

.sleep-editor__header[b-w15olewdx2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--surface-contrast);
}

.sleep-editor__title[b-w15olewdx2] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sleep-editor__body[b-w15olewdx2] {
    padding: 1rem 1.1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sleep-editor__section[b-w15olewdx2] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sleep-editor__section-title[b-w15olewdx2] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.sleep-editor__field[b-w15olewdx2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.sleep-editor__input[b-w15olewdx2] {
    flex: 1 1 auto;
    max-width: 60%;
    min-height: var(--tap-min);
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--surface-contrast);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.sleep-editor__input:focus[b-w15olewdx2] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 0.18rem rgba(var(--accent-rgb), 0.18);
}

.sleep-editor__toggle[b-w15olewdx2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--tap-min);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.sleep-editor__toggle input[type="checkbox"][b-w15olewdx2] {
    width: 2.6rem;
    height: 1.5rem;
    accent-color: var(--accent);
    cursor: pointer;
}

.sleep-editor__stepper-row[b-w15olewdx2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.sleep-editor__stepper-label[b-w15olewdx2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.sleep-editor__dot[b-w15olewdx2] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.sleep-editor__stepper[b-w15olewdx2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.sleep-editor__stepper .icon-btn[b-w15olewdx2] {
    border: 1px solid var(--surface-contrast);
    color: var(--accent);
}

.sleep-editor__stepper .icon-btn:disabled[b-w15olewdx2] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sleep-editor__stepper-value[b-w15olewdx2] {
    min-width: 4.5rem;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.sleep-editor__footnote[b-w15olewdx2] {
    font-size: 0.85rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.sleep-editor__source[b-w15olewdx2] {
    font-size: 0.8rem;
    color: var(--muted);
}

.sleep-editor__error[b-w15olewdx2] {
    font-size: 0.875rem;
    color: var(--danger);
    background: rgba(var(--danger-rgb), 0.08);
    border: 1px solid rgba(var(--danger-rgb), 0.25);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
}

.sleep-editor__footer[b-w15olewdx2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--surface-contrast);
}

.sleep-editor__spacer[b-w15olewdx2] {
    flex: 1 1 auto;
}

.sleep-editor__delete[b-w15olewdx2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--tap-min);
    padding: 0 0.5rem;
    border: none;
    background: transparent;
    color: var(--danger);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.sleep-editor__delete:hover:not(:disabled)[b-w15olewdx2] {
    background: rgba(var(--danger-rgb), 0.10);
}

.sleep-editor__confirm[b-w15olewdx2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.sleep-editor__footer .btn-primary[b-w15olewdx2] {
    min-height: var(--tap-min);
}

/* Mobile: slide up as a bottom sheet, full-width, rounded top corners. */
@media (max-width: 767.98px) {
    .sleep-editor-backdrop[b-w15olewdx2] {
        align-items: flex-end;
        padding: 0;
    }

    .sleep-editor[b-w15olewdx2] {
        max-width: 100%;
        max-height: 92dvh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        animation: sleep-sheet-up-b-w15olewdx2 0.22s ease-out;
    }

    .sleep-editor__input[b-w15olewdx2] {
        max-width: 55%;
    }
}

@keyframes sleep-sheet-up-b-w15olewdx2 {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
/* /Components/Pages/Settings/Settings.razor.rz.scp.css */
/* Styles for Settings */

.qpref-list[b-qyvowj0pbm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.qpref-row[b-qyvowj0pbm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.qpref-row:last-child[b-qyvowj0pbm] {
    border-bottom: none;
}

.qpref-label[b-qyvowj0pbm] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.qpref-label > strong[b-qyvowj0pbm] {
    font-size: 0.95rem;
    line-height: 1.3;
}

.qpref-desc[b-qyvowj0pbm] {
    color: var(--muted, #6c757d);
    font-size: 0.8rem;
    line-height: 1.3;
}

.qpref-switch[b-qyvowj0pbm] {
    flex: 0 0 auto;
    margin: 0;
    padding-left: 2.5em;
    min-height: auto;
}

.qpref-switch .form-check-input[b-qyvowj0pbm] {
    width: 2.25em;
    height: 1.25em;
    margin-left: -2.5em;
    cursor: pointer;
}

/* /Components/Pages/Shared/MemberProfile.razor.rz.scp.css */
.member-profile-header[b-5lgqtvhk8p] {
    margin-bottom: 1.25rem;
}

.member-profile-header h1[b-5lgqtvhk8p] {
    font-size: 1.6rem;
    margin: 0.25rem 0 0.15rem;
}

.member-profile-back[b-5lgqtvhk8p] {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.member-profile-back:hover[b-5lgqtvhk8p] {
    text-decoration: underline;
}

.member-profile-empty[b-5lgqtvhk8p] {
    text-align: center;
    padding: 3rem 1rem;
    max-width: 460px;
    margin: 0 auto;
}

.member-profile-empty i[b-5lgqtvhk8p] {
    font-size: 2.5rem;
    color: var(--muted, #64748b);
}

.member-profile-empty h2[b-5lgqtvhk8p] {
    font-size: 1.3rem;
    margin: 0.75rem 0 0.4rem;
}

.member-profile-empty .btn[b-5lgqtvhk8p] {
    margin-top: 1rem;
}
/* /Components/Pages/Shared/ProfileTabStrip.razor.rz.scp.css */
/* Segmented pill tab strip — mirrors the .mode-selector pattern used across the
   review pages (Sleep, Questionnaires) so the shared profile feels native. */
.profile-tab-strip[b-cv1xu8seb9] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: var(--surface-contrast, #eef2f7);
    padding: 0.25rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
    max-width: 100%;
}

.profile-tab-btn[b-cv1xu8seb9] {
    border: none;
    background: transparent;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    color: var(--muted, #64748b);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.profile-tab-btn:hover[b-cv1xu8seb9] {
    color: var(--text-primary, #1f2937);
}

.profile-tab-btn.active[b-cv1xu8seb9] {
    background: var(--accent, #512BD4);
    color: #fff;
}

.profile-tab-btn i[b-cv1xu8seb9] {
    font-size: 0.95rem;
}

.profile-tab-panel[b-cv1xu8seb9] {
    animation: profile-tab-fade-b-cv1xu8seb9 0.15s ease;
}

@keyframes profile-tab-fade-b-cv1xu8seb9 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Print: stack every section with a heading. */
.profile-tab-print-section[b-cv1xu8seb9] {
    margin-bottom: 2rem;
    break-inside: avoid;
}

.profile-tab-print-title[b-cv1xu8seb9] {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border, #e2e8f0);
    padding-bottom: 0.35rem;
}
/* /Components/Pages/Shared/SharedMedicationsMatrix.razor.rz.scp.css */
.med-matrix-scroll[b-t3h27yqbjs] {
    overflow-x: auto;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    background: var(--card-bg, #fff);
}

.med-matrix[b-t3h27yqbjs] {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85rem;
}

.med-matrix th[b-t3h27yqbjs],
.med-matrix td[b-t3h27yqbjs] {
    border-bottom: 1px solid var(--border, #eef2f7);
}

/* Sticky medication-name column so it stays visible while day columns scroll. */
.med-matrix-name[b-t3h27yqbjs] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card-bg, #fff);
    text-align: left;
    padding: 0.5rem 0.85rem;
    min-width: 160px;
    max-width: 220px;
    font-weight: 500;
    box-shadow: 1px 0 0 var(--border, #e2e8f0);
}

.med-matrix-corner[b-t3h27yqbjs] {
    z-index: 3;
    color: var(--muted, #64748b);
    font-weight: 600;
}

.med-matrix-med-name[b-t3h27yqbjs] {
    display: block;
    color: var(--text-primary, #1f2937);
}

.med-matrix-day[b-t3h27yqbjs] {
    padding: 0.35rem 0.25rem;
    min-width: 38px;
    text-align: center;
    color: var(--muted, #64748b);
    font-weight: 500;
    line-height: 1.1;
    vertical-align: middle;
}

.med-matrix-day.is-today[b-t3h27yqbjs] {
    color: var(--accent, #512BD4);
    font-weight: 700;
}

.med-matrix-dow[b-t3h27yqbjs] {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
}

.med-matrix-dom[b-t3h27yqbjs] {
    display: block;
    font-size: 0.8rem;
}

.med-matrix-group[b-t3h27yqbjs] {
    text-align: left;
    padding: 0.45rem 0.85rem;
    background: var(--surface-contrast, #eef2f7);
    color: var(--text-secondary, #475569);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky;
    left: 0;
}

.med-matrix-cell[b-t3h27yqbjs] {
    text-align: center;
    padding: 0.4rem 0.2rem;
    vertical-align: middle;
}

.med-matrix-cell.has-dose .med-matrix-dot[b-t3h27yqbjs] {
    color: var(--accent, #512BD4);
}

.med-matrix-dot[b-t3h27yqbjs] {
    font-size: 0.85rem;
}

/* Dosage amount shown in the cell (unit lives in the row label). */
.med-matrix-amount[b-t3h27yqbjs] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    font-variant-numeric: tabular-nums;
}

.med-matrix-empty[b-t3h27yqbjs] {
    color: var(--border, #cbd5e1);
}
/* /Components/Pages/Shared/SharedMoodView.razor.rz.scp.css */
.shared-mood-summary[b-8aoi7flhac] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.shared-mood-spider[b-8aoi7flhac] {
    max-width: 360px;
    width: 100%;
}

.shared-mood-list[b-8aoi7flhac] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
}

.shared-mood-entry[b-8aoi7flhac] {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    padding: 0.75rem 1rem;
}

.shared-mood-entry-time[b-8aoi7flhac] {
    margin-bottom: 0.5rem;
}

.shared-mood-axes[b-8aoi7flhac] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.shared-mood-chip[b-8aoi7flhac] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    background: var(--surface-contrast, #eef2f7);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
}

.shared-mood-chip-label[b-8aoi7flhac] {
    color: var(--muted, #64748b);
}

.shared-mood-chip-val[b-8aoi7flhac] {
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}
/* /Components/Pages/Shared/SharedProfile.razor.rz.scp.css */
.share-expiry-banner[b-4cxcq445nf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: var(--radius-sm);
    color: var(--accent-strong);
    font-size: 0.9rem;
}

.shared-holistic-supporting[b-4cxcq445nf] {
    margin-top: 2rem;
}
/* /Components/Pages/Shared/SharedQuestionnaireReview.razor.rz.scp.css */
/* Styles mirror the authenticated /review/questionnaires surface:
   SubmissionsMatrix.razor.css, ReviewQuestionnaires.razor.css (group-by
   segment) and QuestionnaireCharts.razor.css (per-type card). Kept here as a
   self-contained copy because Blazor scoped CSS is component-bound — the
   originals only apply to their own components, not to this share-view mirror. */

/* ── Submissions matrix ──────────────────────────────────────── */
.submissions-matrix-wrap[b-jp7xbrsc1z] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.submissions-matrix[b-jp7xbrsc1z] {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    font-size: 0.875rem;
}

.submissions-matrix thead th[b-jp7xbrsc1z] {
    padding: 0.5rem 0.75rem;
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    white-space: nowrap;
    background: var(--card-bg, #fff);
}

.submissions-matrix thead th.matrix-label-col[b-jp7xbrsc1z] {
    text-align: left;
    min-width: 130px;
    position: sticky;
    left: 0;
    z-index: 2;
}

.matrix-date-day[b-jp7xbrsc1z] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #6c757d);
    font-weight: 600;
}

.matrix-date-md[b-jp7xbrsc1z] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1f2937;
}

.submissions-matrix tbody td[b-jp7xbrsc1z] {
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    text-align: center;
    vertical-align: middle;
}

.submissions-matrix tbody td.matrix-label-col[b-jp7xbrsc1z] {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    color: #1f2937;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card-bg, #fff);
}

.matrix-score[b-jp7xbrsc1z] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent);
    line-height: 1;
}

.empty-cell .matrix-empty[b-jp7xbrsc1z] {
    color: rgba(0,0,0,0.15);
    font-size: 1.1rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .submissions-matrix[b-jp7xbrsc1z] {
        font-size: 0.92rem;
    }

    .submissions-matrix thead th[b-jp7xbrsc1z],
    .submissions-matrix tbody td[b-jp7xbrsc1z] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .submissions-matrix thead th.matrix-label-col[b-jp7xbrsc1z] {
        min-width: 96px;
    }

    .matrix-date-day[b-jp7xbrsc1z] {
        font-size: 0.72rem;
    }
}

/* ── Group-by segment ────────────────────────────────────────── */
.group-by-segment[b-jp7xbrsc1z] {
    display: flex;
    width: 100%;
    border-radius: 0.625rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
    margin-bottom: 1rem;
    background: var(--card-bg, #fff);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

.group-by-option[b-jp7xbrsc1z] {
    flex: 1;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease-out, color 0.15s ease-out;
}

.group-by-option + .group-by-option[b-jp7xbrsc1z] {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.group-by-option.is-active[b-jp7xbrsc1z] {
    background: var(--accent);
    color: #fff;
}

/* ── Per-type card ───────────────────────────────────────────── */
.qtype-card[b-jp7xbrsc1z] {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    padding: 0.5rem;
    text-align: left;
    color: inherit;
}

.qtype-card-header[b-jp7xbrsc1z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

/* ── Expandable questionnaire name + caret ───────────────────── */
.matrix-expand-btn[b-jp7xbrsc1z] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.matrix-caret[b-jp7xbrsc1z] {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--muted, #6c757d);
    transition: transform 0.15s ease-out;
}

.matrix-caret.is-open[b-jp7xbrsc1z] {
    transform: rotate(90deg);
}

/* ── Expanded question sub-rows — lighter than the score row ──── */
.submissions-matrix tbody tr.matrix-question-row td[b-jp7xbrsc1z] {
    background: rgba(0, 0, 0, 0.015);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.submissions-matrix tbody td.matrix-question-label[b-jp7xbrsc1z] {
    font-weight: 400;
    white-space: normal;
    padding-left: 1.75rem;             /* indent the question under the caret */
    max-width: 320px;
    background: rgba(0, 0, 0, 0.015);  /* keep the sticky column opaque while scrolled */
}

.matrix-question-num[b-jp7xbrsc1z] {
    color: var(--muted, #6c757d);
    font-size: 0.72rem;
    font-weight: 600;
    margin-right: 0.35rem;
}

.matrix-question-text[b-jp7xbrsc1z] {
    font-size: 0.8rem;
    color: #374151;
}

.matrix-answer-value[b-jp7xbrsc1z] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--muted, #495057);
    line-height: 1;
}
/* /Components/Pages/Shared/SharedSleepView.razor.rz.scp.css */
.shared-sleep-charts[b-n3mtra0ppf] {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .shared-sleep-charts[b-n3mtra0ppf] {
        grid-template-columns: 1fr 1fr;
    }
}

.shared-sleep-chart-block[b-n3mtra0ppf] {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    padding: 1rem;
}

.shared-sleep-chart-title[b-n3mtra0ppf] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    margin-bottom: 0.5rem;
}

.shared-sleep-chart-canvas[b-n3mtra0ppf] {
    position: relative;
    height: 260px;
}

.shared-sleep-chart-canvas canvas[b-n3mtra0ppf] {
    width: 100% !important;
    height: 100% !important;
}

.shared-sleep-summary[b-n3mtra0ppf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.shared-sleep-card[b-n3mtra0ppf] {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    padding: 0.85rem 1rem;
    text-align: center;
}

.shared-sleep-label[b-n3mtra0ppf] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #64748b);
}

.shared-sleep-value[b-n3mtra0ppf] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
    margin-top: 0.15rem;
}

.shared-sleep-sub[b-n3mtra0ppf] {
    font-size: 0.75rem;
}

.shared-sleep-list[b-n3mtra0ppf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}

.shared-sleep-night[b-n3mtra0ppf] {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    padding: 0.9rem 1.1rem;
}

.shared-sleep-night-head[b-n3mtra0ppf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.shared-sleep-night-date[b-n3mtra0ppf] {
    font-weight: 600;
}

.shared-sleep-night-total[b-n3mtra0ppf] {
    font-weight: 700;
    color: var(--accent, #512BD4);
}

.shared-sleep-phases[b-n3mtra0ppf] {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.shared-sleep-phase-row[b-n3mtra0ppf] {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.shared-sleep-phase-name[b-n3mtra0ppf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.shared-sleep-swatch[b-n3mtra0ppf] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.shared-sleep-bar-track[b-n3mtra0ppf] {
    background: var(--surface-contrast, #eef2f7);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.shared-sleep-bar-fill[b-n3mtra0ppf] {
    height: 100%;
    border-radius: 999px;
}

.shared-sleep-phase-value[b-n3mtra0ppf] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Shared/ShareLayout.razor.rz.scp.css */
.share-layout[b-9bjlmvkiso] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #333;
}

.share-header[b-9bjlmvkiso] {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    padding: 2rem 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.share-header-brand[b-9bjlmvkiso] {
    max-width: 800px;
    margin: 0 auto;
}

.share-header-brand h1[b-9bjlmvkiso] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

.share-header-subtitle[b-9bjlmvkiso] {
    margin: 0.25rem 0 0 0;
    color: #666;
    font-size: 0.9rem;
}

.share-main[b-9bjlmvkiso] {
    flex: 1;
    padding: 2rem 1rem;
}

.share-footer[b-9bjlmvkiso] {
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid #e0e0e0;
    padding: 1.5rem 1rem;
    text-align: center;
}

.share-footer a[b-9bjlmvkiso] {
    color: #0066cc;
    text-decoration: none;
}

.share-footer a:hover[b-9bjlmvkiso] {
    text-decoration: underline;
}
/* /Components/Pages/Shared/UnifiedMatrix.razor.rz.scp.css */
/* =============================================================================
   Unified daily matrix — final design.

   The problem this solves: "a bunch of numbers in an empty space." The fix is
   layered so the eye can read rows, columns, and magnitude at a glance:

     1. STRUCTURE  — a real spreadsheet grid: vertical + horizontal hairlines on
                     every cell, a sticky header row AND sticky-left first column,
                     so frozen edges always frame the data.
     2. RHYTHM     — a faint weekend column wash makes weekly cadence visible
                     across ~90 days; an unmistakable accent TODAY column (full
                     height + a pill on the day-of-month) snaps the eye to "now".
     3. WEIGHT     — every logged value is a filled, outlined CHIP so it reads as
                     a solid token; empties shrink to a whisper-quiet dot and
                     recede, so present data dominates the field.
     4. MAGNITUDE  — each data cell carries an inline --um-heat (0..1) set in C#;
                     the cell background tints toward the accent (meds/questions)
                     or the severity hue (scores) so dense/high days light up and
                     sparse/low days stay pale. Color is read before the digit.

   Every color is derived from the theme custom properties via color-mix so the
   dark theme is preserved; light theme is primary. Severity hues are the only
   fixed clinical green/amber/red, matching the original.
   ========================================================================== */

.unified-matrix-scroll[b-u4dq1ignqc] {
    overflow: auto;
    /* A capped height gives the sticky header row something to stick against
       while the matrix scrolls vertically; horizontal scroll handles ~90 days. */
    max-height: 78vh;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    background: var(--card-bg, #fff);

    /* Heat ramp endpoints, derived once from theme tokens. Med + question cells
       ramp toward the accent; score cells override --um-heat-color per severity. */
    --um-heat-color: var(--accent, #512BD4);
    /* How strong a full-intensity (heat=1) tint gets. Kept clinical, not garish. */
    --um-heat-max: 24%;
    /* Hairline grid + weekend wash, mixed from theme tokens so dark theme holds. */
    --um-grid: color-mix(in srgb, var(--border, #e2e8f0) 70%, transparent);
    --um-weekend: color-mix(in srgb, var(--surface-contrast, #eef2f7) 60%, transparent);
}

.unified-matrix[b-u4dq1ignqc] {
    border-collapse: separate;     /* required so per-cell box-shadow rails + tints render */
    border-spacing: 0;
    width: 100%;
    font-size: 0.85rem;
    color: var(--text-primary, #1f2937);
}

/* ---- Grid: hairline under every row, hairline left of every day column ----- */
.unified-matrix th[b-u4dq1ignqc],
.unified-matrix td[b-u4dq1ignqc] {
    border-bottom: 1px solid var(--um-grid);
    background-clip: padding-box;  /* keep tints from bleeding over borders */
}

.um-day[b-u4dq1ignqc],
.um-cell[b-u4dq1ignqc] {
    border-left: 1px solid var(--um-grid);
}

/* ---- Sticky header ROW (day numbers freeze on vertical scroll) ------------- */
/* z-index 5 keeps the frozen day header above the sticky-left band/section bars
   (z-index 4) so a band row never paints over the day numbers mid-scroll. */
.unified-matrix thead .um-day[b-u4dq1ignqc] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--card-bg, #fff);
}

/* ---- Sticky label COLUMN (first column freezes on horizontal scroll) ------- */
.um-name[b-u4dq1ignqc] {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--card-bg, #fff);
    text-align: left;
    padding: 0.55rem 0.9rem;
    min-width: 178px;
    max-width: 240px;
    font-weight: 500;
    /* A solid divider marks the frozen edge, stronger than inner gridlines. */
    box-shadow: 1px 0 0 var(--border, #e2e8f0);
}

/* Top-left corner sits above both frozen header and frozen column. */
.um-corner[b-u4dq1ignqc] {
    z-index: 6;
    background: var(--card-bg, #fff);
}

.um-row-name[b-u4dq1ignqc] { color: var(--text-primary, #1f2937); }
.um-muted[b-u4dq1ignqc]    { color: var(--muted, #64748b); font-weight: 400; }

/* ---- Day header ----------------------------------------------------------- */
.um-day[b-u4dq1ignqc] {
    padding: 0.4rem 0.25rem 0.45rem;
    min-width: 40px;
    text-align: center;
    color: var(--muted, #64748b);
    font-weight: 600;
    line-height: 1.15;
    vertical-align: middle;
}

.um-dow[b-u4dq1ignqc] {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.um-dom[b-u4dq1ignqc] {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    font-variant-numeric: tabular-nums;
}

/* Weekend wash makes the weekly cadence legible across the whole strip. */
.um-day.is-weekend[b-u4dq1ignqc] { background: var(--um-weekend); }
.um-cell.is-weekend[b-u4dq1ignqc] { background-color: var(--um-weekend); }

/* ---- TODAY column: unmistakable, full height ------------------------------ */
.um-day.is-today[b-u4dq1ignqc] {
    color: var(--accent, #512BD4);
    font-weight: 800;
    background: color-mix(in srgb, var(--accent, #512BD4) 14%, var(--card-bg, #fff));
}

/* Day-of-month becomes an accent pill so "now" is findable while scrolled. */
.um-day.is-today .um-dom[b-u4dq1ignqc] {
    color: #fff;
    background: var(--accent, #512BD4);
    border-radius: 999px;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    margin: 0.1rem auto 0;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--accent, #512BD4) 40%, transparent);
}

/* Accent side-rails run down every today cell (header + body) so the column
   reads as one continuous highlighted track. */
.um-day.is-today[b-u4dq1ignqc],
.um-cell.is-today[b-u4dq1ignqc] {
    box-shadow:
        inset 2px 0 0 var(--accent, #512BD4),
        inset -2px 0 0 var(--accent, #512BD4);
}

.um-cell.is-today[b-u4dq1ignqc] {
    background-color: color-mix(in srgb, var(--accent, #512BD4) 7%, var(--card-bg, #fff));
}

/* ---- Band header rows (med family labels + section bars) ------------------ */
.um-band[b-u4dq1ignqc] {
    text-align: left;
    padding: 0.5rem 0.9rem;
    background: var(--surface-contrast, #eef2f7);
    color: var(--text-secondary, #475569);
    font-size: 0.71rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: sticky;
    left: 0;
    z-index: 4;
    border-right: none;
}

/* Accent section bars anchor the two stacked bands. */
.um-band--scores[b-u4dq1ignqc],
.um-band--meds[b-u4dq1ignqc] {
    background: linear-gradient(90deg, var(--accent, #512BD4), var(--accent-strong, #3f1fae));
    color: #fff;
    letter-spacing: 0.07em;
}

.um-band--scores[b-u4dq1ignqc] { padding: 0.6rem 0.9rem; font-size: 0.73rem; }
.um-band--meds[b-u4dq1ignqc]   { padding: 0; }

.um-band-toggle[b-u4dq1ignqc] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0.6rem 0.9rem;
    font: inherit;
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-align: left;
}

.um-band-toggle:hover[b-u4dq1ignqc] { background: color-mix(in srgb, #000 8%, transparent); }

.um-band--meds .um-caret[b-u4dq1ignqc],
.um-band--scores .um-caret[b-u4dq1ignqc] { color: #fff; }

/* ---- Data cells ----------------------------------------------------------- */
.um-cell[b-u4dq1ignqc] {
    text-align: center;
    padding: 0.4rem 0.28rem;
    vertical-align: middle;
    --um-heat: 0;                  /* default for cells that don't set heat */
}

/* THE HEATMAP. Background opacity scales with --um-heat (0..1): heat 0 is
   transparent (the weekend/today wash shows through), heat 1 reaches
   --um-heat-max of --um-heat-color. Painted as a layered gradient so it sits
   *over* the weekend/today wash without clobbering the sticky-column or
   today side-rail box-shadows. */
.um-cell.has-dose[b-u4dq1ignqc],
.um-score-cell.has-score[b-u4dq1ignqc],
.um-question-cell.has-score[b-u4dq1ignqc] {
    background-image: linear-gradient(
        color-mix(in srgb, var(--um-heat-color) calc(var(--um-heat-max) * var(--um-heat)), transparent),
        color-mix(in srgb, var(--um-heat-color) calc(var(--um-heat-max) * var(--um-heat)), transparent));
}

/* ---- Filled CHIPS: every logged value reads as a solid token -------------- */
/* Shared chip shape. Empties stay un-chipped and recede. */
.um-amount[b-u4dq1ignqc],
.um-dot[b-u4dq1ignqc],
.um-score[b-u4dq1ignqc],
.um-answer[b-u4dq1ignqc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    min-height: 1.45rem;
    padding: 0.1rem 0.4rem;
    border-radius: 7px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    box-sizing: border-box;
}

/* Med amount chip — accent family, so a med row scans as one color. */
.um-amount[b-u4dq1ignqc] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-strong, #3f1fae);
    background: color-mix(in srgb, var(--accent, #512BD4) 12%, var(--card-bg, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #512BD4) 24%, transparent);
}

/* Dose-logged-without-amount dot — same accent family as amounts. */
.um-dot[b-u4dq1ignqc] {
    font-size: 0.62rem;
    color: var(--accent, #512BD4);
    background: color-mix(in srgb, var(--accent, #512BD4) 10%, var(--card-bg, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #512BD4) 22%, transparent);
}

/* Empty marker: whisper-quiet, no chip, so present data dominates the field. */
.um-empty[b-u4dq1ignqc] {
    color: color-mix(in srgb, var(--muted, #64748b) 38%, transparent);
    font-size: 0.9rem;
}

/* ---- Questionnaire score chips (severity-tinted) -------------------------- */
/* Severity sets the heat ramp HUE; --um-heat sets its DEPTH, so a high-severity
   peak day reads deep red while a mild low score reads pale green — both at once. */
.um-score-cell.sev-low[b-u4dq1ignqc]  { --um-heat-color: #16a34a; }
.um-score-cell.sev-mid[b-u4dq1ignqc]  { --um-heat-color: #f59e0b; }
.um-score-cell.sev-high[b-u4dq1ignqc] { --um-heat-color: #ef4444; }

/* A score with no recognized severity still tints by magnitude (accent ramp). */
.um-score-cell.has-score:not(.sev-low):not(.sev-mid):not(.sev-high)[b-u4dq1ignqc] {
    --um-heat-color: var(--accent, #512BD4);
}

/* The number rides a solid chip so it stays legible at any tint depth. */
.um-score[b-u4dq1ignqc] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    background: color-mix(in srgb, var(--surface-contrast, #eef2f7) 85%, var(--card-bg, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 80%, transparent);
}

.um-score-cell.sev-low  .um-score[b-u4dq1ignqc] { color: #14532d; background: rgba(22, 163, 74, 0.16);  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.40); }
.um-score-cell.sev-mid  .um-score[b-u4dq1ignqc] { color: #7c2d12; background: rgba(245, 158, 11, 0.18); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.45); }
.um-score-cell.sev-high .um-score[b-u4dq1ignqc] { color: #7f1d1d; background: rgba(239, 68, 68, 0.18);  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.45); }

/* ---- Expand a questionnaire type into per-question rows ------------------- */
.um-expand-btn[b-u4dq1ignqc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.um-caret[b-u4dq1ignqc] {
    display: inline-block;
    transition: transform 0.15s ease;
    color: var(--muted, #64748b);
    font-size: 0.7rem;
}

.um-caret.is-open[b-u4dq1ignqc] { transform: rotate(90deg); }

.um-question-row .um-question-label[b-u4dq1ignqc] {
    padding-left: 1.8rem;
    font-weight: 400;
}

.um-qnum[b-u4dq1ignqc] {
    font-weight: 700;
    color: var(--accent, #512BD4);
    margin-right: 0.4rem;
    font-size: 0.77rem;
}

.um-qtext[b-u4dq1ignqc] {
    color: var(--text-secondary, #475569);
    font-size: 0.77rem;
}

/* Question cells (0..5) ramp on the accent like meds, on a recessed base so the
   nested sub-grid reads as a finer heat strip subordinate to its parent score. */
.um-question-cell[b-u4dq1ignqc] {
    --um-heat-color: var(--accent, #512BD4);
    --um-heat-max: 20%;
    background-color: color-mix(in srgb, var(--surface-contrast, #eef2f7) 45%, transparent);
}

/* Question answer chip — neutral, lighter than score chips, so the nested level
   stays subordinate. */
.um-answer[b-u4dq1ignqc] {
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    background: color-mix(in srgb, var(--surface-contrast, #eef2f7) 92%, var(--card-bg, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border, #e2e8f0) 70%, transparent);
    min-width: 1.5rem;
    min-height: 1.35rem;
}

/* ---- Row hover: light up the whole row, including its frozen label -------- */
.unified-matrix tbody tr:not(.um-band-row):hover .um-name[b-u4dq1ignqc] {
    background: color-mix(in srgb, var(--accent, #512BD4) 9%, var(--card-bg, #fff));
}

/* ---- Accessibility -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .um-caret[b-u4dq1ignqc] { transition: none; }
}
/* /Components/Pages/Shared/UnifiedMatrixPanel.razor.rz.scp.css */
.ump-controls[b-5dld8g0hkg] {
    margin-bottom: 0.75rem;
}

.ump-selector[b-5dld8g0hkg] {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius, 12px);
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.85rem;
}

.ump-selector-head[b-5dld8g0hkg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.ump-selector-label[b-5dld8g0hkg] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--muted, #64748b);
}

.ump-selector-actions[b-5dld8g0hkg] {
    display: flex;
    gap: 0.35rem;
}

.ump-mini[b-5dld8g0hkg] {
    border: 1px solid var(--border, #e2e8f0);
    background: transparent;
    color: var(--text-secondary, #475569);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.ump-mini:hover[b-5dld8g0hkg] { background: var(--surface-contrast, #eef2f7); }

.ump-chips[b-5dld8g0hkg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.ump-chip-group[b-5dld8g0hkg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.ump-chip-group-label[b-5dld8g0hkg] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted, #94a3b8);
    margin-right: 0.15rem;
}

.ump-chip[b-5dld8g0hkg] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--border, #e2e8f0);
    background: transparent;
    color: var(--text-secondary, #475569);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.ump-chip i[b-5dld8g0hkg] { font-size: 0.85rem; color: var(--muted, #94a3b8); }

.ump-chip:hover[b-5dld8g0hkg] { border-color: var(--accent, #512BD4); }

.ump-chip.is-on[b-5dld8g0hkg] {
    background: color-mix(in srgb, var(--accent, #512BD4) 12%, transparent);
    border-color: var(--accent, #512BD4);
    color: var(--accent, #512BD4);
    font-weight: 600;
}

.ump-chip.is-on i[b-5dld8g0hkg] { color: var(--accent, #512BD4); }
/* /Components/Pages/Symptoms/Symptoms.razor.rz.scp.css */
.symptoms-page[b-0fbj5jk55q] {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.symptoms-header[b-0fbj5jk55q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.symptoms-header h1[b-0fbj5jk55q] {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
}

.symptoms-loading[b-0fbj5jk55q],
.symptoms-empty[b-0fbj5jk55q] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--bs-secondary-color, #6c757d);
}

.symptoms-empty i[b-0fbj5jk55q] {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 0.75rem;
    display: block;
}

.symptoms-empty-title[b-0fbj5jk55q] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.25rem;
}

.symptoms-empty-hint[b-0fbj5jk55q] {
    font-size: 0.95rem;
}

.symptoms-spinner[b-0fbj5jk55q] {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    border: 3px solid rgba(var(--accent-rgb), 0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: symptoms-spin-b-0fbj5jk55q 0.8s linear infinite;
}

@keyframes symptoms-spin-b-0fbj5jk55q {
    to { transform: rotate(360deg); }
}

.symptoms-day-group[b-0fbj5jk55q] {
    margin-bottom: 1.5rem;
}

.symptoms-day-header[b-0fbj5jk55q] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.symptoms-log-row[b-0fbj5jk55q] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,0.08));
}

.symptoms-log-dot[b-0fbj5jk55q] {
    width: 10px;
    height: 10px;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.symptoms-log-body[b-0fbj5jk55q] { flex: 1; min-width: 0; }

.symptoms-log-name[b-0fbj5jk55q] {
    font-weight: 500;
    margin-bottom: 0.15rem;
}

.symptoms-log-meta[b-0fbj5jk55q] {
    display: flex;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
}

.symptoms-log-disorder[b-0fbj5jk55q] { color: var(--accent); font-weight: 500; }
.symptoms-log-sep[b-0fbj5jk55q] { opacity: 0.6; }

.symptoms-log-notes[b-0fbj5jk55q] {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 0.25rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.symptoms-log-time[b-0fbj5jk55q] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.symptoms-log-delete[b-0fbj5jk55q] {
    background: transparent;
    border: 0;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    padding: 0 0.25rem;
}

.symptoms-log-delete:hover[b-0fbj5jk55q] { color: var(--danger); }

.symptoms-modal-backdrop[b-0fbj5jk55q] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal, 1050);
}

.symptoms-modal[b-0fbj5jk55q] {
    background: var(--bs-body-bg, white);
    border-radius: var(--radius);
    width: min(540px, 95vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.symptoms-modal-header[b-0fbj5jk55q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,0.08));
    font-weight: 600;
}

.symptoms-saved-banner[b-0fbj5jk55q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: rgba(var(--success-rgb), 0.12);
    color: var(--success);
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,0.08));
    animation: symptoms-banner-in-b-0fbj5jk55q 0.18s ease-out;
}

.symptoms-saved-banner i[b-0fbj5jk55q] {
    color: var(--success);
    font-size: 1.05rem;
}

@keyframes symptoms-banner-in-b-0fbj5jk55q {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.symptoms-disorder-pills[b-0fbj5jk55q] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,0.08));
    flex-shrink: 0;
}

.symptoms-pill[b-0fbj5jk55q] {
    background: var(--bs-secondary-bg, #f1f3f5);
    border: 0;
    border-radius: var(--radius-pill);
    padding: 0.35rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-body-color);
    cursor: pointer;
    white-space: nowrap;
}

.symptoms-pill--selected[b-0fbj5jk55q] {
    background: var(--accent);
    color: white;
}

.symptoms-catalog-list[b-0fbj5jk55q] {
    overflow-y: auto;
    padding: 0.5rem 0;
}

.symptoms-category-header[b-0fbj5jk55q] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color, #6c757d);
    padding: 0.75rem 1.25rem 0.35rem;
}

.symptoms-catalog-row[b-0fbj5jk55q] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,0.05));
    padding: 0.75rem 1.25rem;
    text-align: left;
    cursor: pointer;
}

.symptoms-catalog-row:hover[b-0fbj5jk55q] { background: var(--bs-secondary-bg, rgba(0,0,0,0.025)); }
.symptoms-catalog-row:disabled[b-0fbj5jk55q] { opacity: 0.5; cursor: not-allowed; }

.symptoms-catalog-name[b-0fbj5jk55q] { font-weight: 500; }

.symptoms-catalog-desc[b-0fbj5jk55q] {
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 0.2rem;
}

.symptoms-catalog-row i[b-0fbj5jk55q] { color: var(--accent); font-size: 1.25rem; flex-shrink: 0; margin-left: 0.5rem; }

@media (max-width: 767.98px) {
    /* Clear the fixed glass bottom nav so the last log row isn't hidden.
       MainLayout already reserves var(--bottom-nav-space) on <main>; replace
       the base 3rem bottom padding with the same token to match sibling pages
       (Settings/HealthKit/Questionnaire) and avoid stacking double clearance. */
    .symptoms-page[b-0fbj5jk55q] {
        padding-bottom: var(--bottom-nav-space);
    }

    /* Trash button: keep the small glyph, expand the hit area to >=44px */
    .symptoms-log-delete[b-0fbj5jk55q] {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Disorder filter chips: >=44px touch target */
    .symptoms-pill[b-0fbj5jk55q] {
        min-height: var(--tap-min);
        display: inline-flex;
        align-items: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Modal controls: catalog rows and close button >=44px touch targets */
    .symptoms-catalog-row[b-0fbj5jk55q] {
        min-height: var(--tap-min);
    }

    .symptoms-modal-header .btn-close[b-0fbj5jk55q] {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
    }
}
/* /Components/Widgets/DateRangePicker.razor.rz.scp.css */
.drp[b-loet1fp4wt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.drp__presets[b-loet1fp4wt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.drp__preset[b-loet1fp4wt] {
    appearance: none;
    border: 1px solid var(--bs-border-color, #dee2e6);
    background: transparent;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.drp__preset:hover[b-loet1fp4wt] {
    background: rgba(0, 0, 0, 0.04);
}

.drp__preset.is-active[b-loet1fp4wt] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.drp__fields[b-loet1fp4wt] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.drp__field[b-loet1fp4wt] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
}

.drp__label[b-loet1fp4wt] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.drp__input[b-loet1fp4wt] {
    appearance: none;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.9rem;
    background: #fff;
    min-width: 9rem;
}

.drp__input:focus[b-loet1fp4wt] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 0.15rem rgba(var(--accent-rgb), 0.18);
}

.drp__sep[b-loet1fp4wt] {
    align-self: center;
    color: var(--bs-secondary-color, #6c757d);
    padding-bottom: 0.35rem;
}

.drp__reset[b-loet1fp4wt] {
    appearance: none;
    background: transparent;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
}

.drp__reset:hover[b-loet1fp4wt] {
    background: rgba(0, 0, 0, 0.04);
    color: var(--bs-body-color, #212529);
}

@media (max-width: 767.98px) {
    /* Each date field takes a full row so the two inputs + reset don't overflow. */
    .drp__field[b-loet1fp4wt] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .drp__input[b-loet1fp4wt] {
        width: 100%;
        min-width: 0;
        min-height: var(--tap-min);
    }

    /* Hide the inline separator (fields are stacked, not side-by-side). */
    .drp__sep[b-loet1fp4wt] {
        display: none;
    }

    /* Presets read as full chips with comfortable tap height. */
    .drp__preset[b-loet1fp4wt] {
        min-height: var(--tap-min);
        padding: 0.5rem 1rem;
        font-weight: 600;
    }

    .drp__reset[b-loet1fp4wt] {
        flex: 1 1 100%;
        min-height: var(--tap-min);
        padding: 0.5rem 1rem;
    }
}
/* /Components/Widgets/Loading.razor.rz.scp.css */
.neural-loader[b-plrmqtbw3k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    gap: 1rem;
}

.neural-loader--compact[b-plrmqtbw3k] {
    padding: 1rem;
}

.neural-spinner[b-plrmqtbw3k] {
    width: 88px;
    height: 88px;
    animation: neural-spin-b-plrmqtbw3k 1.6s linear infinite;
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.25));
}

.neural-spinner--sm[b-plrmqtbw3k] {
    width: 44px;
    height: 44px;
    animation-duration: 1.2s;
}

.neural-loader__msg[b-plrmqtbw3k] {
    font-size: 0.8125rem;
    color: var(--muted, #6c757d);
    margin: 0;
    letter-spacing: 0.01em;
}

@keyframes neural-spin-b-plrmqtbw3k {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* /Components/Widgets/MedicationReferencePicker.razor.rz.scp.css */
.med-ref-picker[b-wmeyz4ayq0] {
    position: relative;
}

.med-ref-input-wrap[b-wmeyz4ayq0] {
    position: relative;
    display: flex;
    align-items: center;
}

.med-ref-input-wrap .form-control[b-wmeyz4ayq0] {
    padding-right: 2rem;
}

.med-ref-spinner[b-wmeyz4ayq0] {
    position: absolute;
    right: 0.6rem;
    pointer-events: none;
    color: var(--bs-secondary);
}

.med-ref-dropdown[b-wmeyz4ayq0] {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    max-height: 260px;
    overflow-y: auto;
}

.med-ref-item[b-wmeyz4ayq0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 0.1rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.med-ref-item:last-child[b-wmeyz4ayq0] {
    border-bottom: none;
}

.med-ref-item:hover[b-wmeyz4ayq0],
.med-ref-item:focus[b-wmeyz4ayq0] {
    background: rgba(var(--accent-rgb), 0.08);
    outline: none;
}

.med-ref-name[b-wmeyz4ayq0] {
    font-size: 0.875rem;
    font-weight: 500;
    color: inherit;
}

.med-ref-sub[b-wmeyz4ayq0] {
    font-size: 0.75rem;
    color: var(--bs-secondary);
}

.med-ref-freetext[b-wmeyz4ayq0] {
    color: var(--bs-secondary);
    font-size: 0.8125rem;
    flex-direction: row;
    align-items: center;
}

/* /Components/Widgets/MoodCheckin.razor.rz.scp.css */
.mood-card[b-ep3ehscvtq] {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 1.25rem;
    border: 1px solid var(--surface-contrast, rgba(0, 0, 0, 0.06));
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

.mood-title[b-ep3ehscvtq] {
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}

.mood-subtitle[b-ep3ehscvtq] {
    font-size: 0.85rem;
    text-align: center;
    color: var(--muted, #6c757d);
    margin-bottom: 1rem;
}

.mood-grid[b-ep3ehscvtq] {
    margin: 0;
}

/* === Sliders =========================================================== */

.mood-slider[b-ep3ehscvtq] {
    margin-bottom: 1.1rem;
}

.mood-slider:last-child[b-ep3ehscvtq] {
    margin-bottom: 0;
}

.mood-slider-header[b-ep3ehscvtq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.mood-slider-label[b-ep3ehscvtq] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color, #1f2937);
}

.mood-slider-value[b-ep3ehscvtq] {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 1.2rem;
    text-align: right;
    transition: color 0.15s ease;
}

.mood-slider-input[b-ep3ehscvtq] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--thumb-color) 0%,
        var(--thumb-color) var(--fill-pct, 0%),
        rgba(0, 0, 0, 0.08) var(--fill-pct, 0%),
        rgba(0, 0, 0, 0.08) 100%
    );
    outline: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mood-slider-input[b-ep3ehscvtq]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--thumb-color);
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    cursor: grab;
    transition: background 0.15s ease, transform 0.1s ease;
}

.mood-slider-input[b-ep3ehscvtq]::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.mood-slider-input[b-ep3ehscvtq]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--thumb-color);
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    cursor: grab;
}

.mood-slider-input[b-ep3ehscvtq]::-moz-range-track {
    background: transparent;
}

.mood-slider-input:focus-visible[b-ep3ehscvtq] {
    outline: 2px solid var(--thumb-color);
    outline-offset: 4px;
}

.mood-slider-scale[b-ep3ehscvtq] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    padding: 0 4px;
    font-size: 0.7rem;
    color: var(--muted, #6c757d);
    font-variant-numeric: tabular-nums;
}

/* === Notes ============================================================ */

.mood-notes-label[b-ep3ehscvtq] {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color, #1f2937);
    margin-bottom: 0.4rem;
}

.mood-notes-optional[b-ep3ehscvtq] {
    font-weight: 400;
    color: var(--muted, #6c757d);
    font-size: 0.8rem;
}

.mood-notes-input[b-ep3ehscvtq] {
    width: 100%;
    border-radius: 0.65rem;
    resize: vertical;
    min-height: 220px;
    font-size: 0.95rem;
}

@media (min-width: 992px) {
    .mood-grid__notes .mood-notes-input[b-ep3ehscvtq] {
        /* Match the column height to the slider stack so the notes panel
           feels intentional rather than floating in white space. */
        min-height: 340px;
    }
}

/* === Submit =========================================================== */

.mood-submit[b-ep3ehscvtq] {
    margin-top: 1.25rem;
    border-radius: 0.75rem !important;
    min-height: 48px;
    font-weight: 600;
    width: 100% !important;
}

@media (min-width: 768px) {
    .mood-card[b-ep3ehscvtq] {
        max-width: 920px;
        margin-left: auto;
        margin-right: auto;
    }
}
/* /Components/Widgets/MoodSpiderView.razor.rz.scp.css */
.mood-spider-view[b-5ckpo9fkf6] {
    position: relative;
    width: 100%;
    aspect-ratio: 450 / 340;
    margin: 0 auto;
}

.msv-svg[b-5ckpo9fkf6] {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: pan-y;
}

.msv-grid[b-5ckpo9fkf6] {
    fill: none;
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 1;
    pointer-events: none;
}

.msv-axis[b-5ckpo9fkf6] {
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 1;
    pointer-events: none;
}

.msv-fill[b-5ckpo9fkf6] {
    fill: rgba(var(--accent-rgb), 0.18);
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    pointer-events: none;
}

.msv-dot[b-5ckpo9fkf6] {
    fill: var(--accent);
    stroke: #fff;
    stroke-width: 2.5;
    pointer-events: none;
}

.msv-label[b-5ckpo9fkf6] {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
    user-select: none;
}

/* /Components/Widgets/NotificationBell.razor.rz.scp.css */
.notif-anchor[b-pxask3wjif] {
    position: relative;
    display: inline-flex;
}

.notif-button[b-pxask3wjif] {
    background: transparent;
    border: none;
    color: inherit;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    position: relative;
    transition: background 120ms ease;
    font-size: 1.1rem;
}

.notif-button:hover[b-pxask3wjif],
.notif-button:focus-visible[b-pxask3wjif] {
    background: var(--surface-contrast);
    outline: none;
}

.notif-badge[b-pxask3wjif] {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
}

.notif-backdrop[b-pxask3wjif] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1100;
}

.notif-panel[b-pxask3wjif] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(360px, calc(100vw - 1.5rem));
    max-height: 70vh;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--surface-contrast);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    z-index: 1101;
    color: inherit;
}

.notif-header[b-pxask3wjif] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--surface-contrast);
    color: inherit;
}

.notif-title[b-pxask3wjif] {
    font-weight: 600;
}

.notif-mark-all[b-pxask3wjif] {
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    padding: 0;
}

.notif-mark-all:hover[b-pxask3wjif] {
    text-decoration: underline;
}

.notif-empty[b-pxask3wjif] {
    padding: 1.25rem 1rem;
    text-align: center;
}

.notif-list[b-pxask3wjif] {
    display: flex;
    flex-direction: column;
}

.notif-row[b-pxask3wjif] {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--surface-contrast);
    text-align: left;
    padding: 0.7rem 0.9rem 0.65rem;
    cursor: pointer;
    color: inherit;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    transition: background 120ms ease;
}

.notif-row:last-child[b-pxask3wjif] {
    border-bottom: none;
}

.notif-row:hover[b-pxask3wjif],
.notif-row:focus-visible[b-pxask3wjif] {
    background: var(--surface-contrast);
    outline: none;
}

.notif-row.is-unread[b-pxask3wjif] {
    background: rgba(var(--accent-rgb), 0.06);
}

.notif-row.is-unread:hover[b-pxask3wjif] {
    background: rgba(var(--accent-rgb), 0.1);
}

.notif-row-title[b-pxask3wjif] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.notif-kind-dot[b-pxask3wjif] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.notif-kind-dot.kind-alert[b-pxask3wjif] {
    background: var(--danger);
}

.notif-kind-dot.kind-care[b-pxask3wjif] {
    background: var(--success);
}

.notif-kind-dot.kind-other[b-pxask3wjif] {
    background: var(--muted);
}

.notif-row-body[b-pxask3wjif] {
    font-size: 0.9rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notif-row-time[b-pxask3wjif] {
    font-size: 0.75rem;
}

.muted[b-pxask3wjif] {
    color: var(--muted);
}

.small[b-pxask3wjif] {
    font-size: 0.8rem;
}
/* /Components/Widgets/PeriodTrack.razor.rz.scp.css */
.period-rail[b-mh1hm017ns] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Pill / racetrack: one continuous shape, two press zones flanking the label.
   Pressing a side gives a tactile "down + in" depression via translateY +
   inset shadow so the affordance reads as physical. */
.period-track[b-mh1hm017ns] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    background: var(--card-bg);
    border: 1px solid var(--surface-contrast);
    border-radius: 999px;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    transition: box-shadow 150ms ease;
    color: inherit;
}

.track-half[b-mh1hm017ns] {
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    width: 40px;
    display: grid;
    place-items: center;
    transition: background 140ms ease, transform 100ms ease, box-shadow 120ms ease, color 140ms ease;
}

.track-icon[b-mh1hm017ns] {
    font-size: 1.2rem;
    line-height: 1;
    transform: translateY(-1px); /* optical centering */
}

.track-half:hover:not(:disabled)[b-mh1hm017ns] {
    background: var(--surface-contrast);
    color: var(--accent);
}

.track-half:active:not(:disabled)[b-mh1hm017ns] {
    transform: translateY(2px);
    background: var(--surface-contrast);
    box-shadow:
        inset 0 4px 8px rgba(0, 0, 0, 0.18),
        inset 0 1px 2px rgba(0, 0, 0, 0.12);
    color: var(--accent);
}

.track-half:disabled[b-mh1hm017ns] {
    opacity: 0.35;
    cursor: not-allowed;
}

.track-half:focus-visible[b-mh1hm017ns] {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
}

.track-center[b-mh1hm017ns] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.6rem;
    text-align: center;
    min-width: 0;
}

.period-title[b-mh1hm017ns] {
    font-size: 0.9rem;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.period-subtitle[b-mh1hm017ns] {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 0.1rem;
}

.muted[b-mh1hm017ns] {
    color: var(--muted);
}

.today-link[b-mh1hm017ns] {
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
}

@media (max-width: 767.98px) {
    .track-half[b-mh1hm017ns] {
        width: var(--tap-min);
        min-height: var(--tap-min);
    }

    .today-link[b-mh1hm017ns] {
        min-height: var(--tap-min);
        padding: 0.5rem 1rem;
    }
}
/* /Components/Widgets/SwipeArea.razor.rz.scp.css */
.swipe-area[b-g6h3urcbb6] {
    /* Allow vertical scrolling but pre-empt the horizontal browser gesture so
       the swipe handler can claim it cleanly on iOS Safari. */
    touch-action: pan-y;
}