/* /Views/Account/Login.cshtml.rz.scp.css */
/* The card body is a column flex container (see _AuthLayout) so tall pages scroll
   inside it. The tab strip gets an explicit height + overflow:hidden from the
   tab-height script, and an overflow-clipping flex item has min-height 0 — so on a
   short viewport it would shrink to the free space and swallow the Sign In button
   instead of letting the card body scroll. Keep it at its content height. */
.tab-content[b-rr51llwi2j] {
    flex-shrink: 0;
}

/* Entry point to the register flow: centered under the primary button, quiet
   prose with only the action itself carrying the accent color. (The theme's
   .additional-action-wrapper styling is scoped to form and can't reach here.) */
.auth-alt-action[b-rr51llwi2j] {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 14px;
    color: var(--bs-secondary-color);
}

@media (min-width: 768px) {
    .auth-alt-action[b-rr51llwi2j] {
        font-size: 16px;
    }
}

/* ::deep — the tag-helper-generated anchor doesn't carry the isolation attribute. */
.auth-alt-action[b-rr51llwi2j]  a {
    color: var(--bs-primary);
    font-weight: 500;
    text-decoration: none;
}

.auth-alt-action[b-rr51llwi2j]  a:hover,
.auth-alt-action[b-rr51llwi2j]  a:focus {
    text-decoration: underline;
}
/* /Views/Account/Register.cshtml.rz.scp.css */
/* The scroll lives in .auth-form-fields only: the form is a column that fills
   the card body (flex chain from .auth-card), the fields container shrinks and
   scrolls, and the footer with the submit button sits below it — so the
   scrollbar ends above the buttons instead of running the card's full height.
   (The form's own flex rules live inline in Register.cshtml: the tag-helper
   <form> doesn't carry the CSS-isolation attribute, so it can't be styled here.) */
.auth-form-fields[b-vimqjk4aa6] {
    overflow-y: auto;
    min-height: 0;
}

.auth-form-footer[b-vimqjk4aa6] {
    padding-top: 0.75rem;
}

/* Entry point back to the login flow: centered under the primary button, quiet
   prose with only the action itself carrying the accent color. (The theme's
   .additional-action-wrapper styling is scoped to form and can't reach here.) */
.auth-alt-action[b-vimqjk4aa6] {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 14px;
    color: var(--bs-secondary-color);
}

@media (min-width: 768px) {
    .auth-alt-action[b-vimqjk4aa6] {
        font-size: 16px;
    }
}

/* ::deep — the tag-helper-generated anchor doesn't carry the isolation attribute. */
.auth-alt-action[b-vimqjk4aa6]  a {
    color: var(--bs-primary);
    font-weight: 500;
    text-decoration: none;
}

.auth-alt-action[b-vimqjk4aa6]  a:hover,
.auth-alt-action[b-vimqjk4aa6]  a:focus {
    text-decoration: underline;
}
/* /Views/AccountManagement/Partials/_AdminsTableHeader.cshtml.rz.scp.css */
.admins-table-controls[b-9pzhpck289] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.admins-search[b-9pzhpck289] {
    position: relative;
}

.admins-search__input[b-9pzhpck289] {
    padding-right: 40px;
    min-width: 280px;
}

.admins-search__icon[b-9pzhpck289] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.admins-add-btn[b-9pzhpck289] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
/* /Views/AdminDashboard/Index.cshtml.rz.scp.css */
.admin-dashboard[b-8ql46dgcq1] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Header */
.admin-header[b-8ql46dgcq1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.admin-header-right[b-8ql46dgcq1] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-welcome[b-8ql46dgcq1] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.admin-export-btn[b-8ql46dgcq1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Quick Actions */
.admin-quick-actions[b-8ql46dgcq1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.admin-card[b-8ql46dgcq1] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card-sm);
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.admin-card-header[b-8ql46dgcq1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.admin-card-header h3[b-8ql46dgcq1] {
    font-size: 26px;
    font-weight: 400;
    margin: 0;
}

.admin-card-icon[b-8ql46dgcq1] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-card-icon--sleep[b-8ql46dgcq1] { background: #69329A1A; }
.admin-card-icon--compliance[b-8ql46dgcq1] { background: #29B2231A; }
.admin-card-icon--participant[b-8ql46dgcq1] { background: #324F9A1A; }
.admin-card-icon--participants[b-8ql46dgcq1] { background: #F549AB1A; }
.admin-card-icon--settings[b-8ql46dgcq1] { background: #4876C61A; }
.admin-card-icon--export[b-8ql46dgcq1] { background: #0E7C661A; }

.admin-card-desc[b-8ql46dgcq1] {
    font-size: 20px;
    color: var(--bs-secondary-color);
    margin: 0 0 24px;
    flex: 1;
}

.admin-card hr[b-8ql46dgcq1] {
    margin: 0 0 30px;
    border-color: var(--bs-border-color);
}

.admin-card-btn[b-8ql46dgcq1] {
    width: 100%;
    text-align: center;
}

/* Metrics Row */
.admin-metrics-row[b-8ql46dgcq1] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.admin-sleep-metrics[b-8ql46dgcq1],
.admin-compliance-card[b-8ql46dgcq1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    padding: 30px;
}

.admin-sleep-metrics h2[b-8ql46dgcq1],
.admin-compliance-card h2[b-8ql46dgcq1],
.admin-top-participants h2[b-8ql46dgcq1] {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 35px;
}

.admin-metric-item[b-8ql46dgcq1] {
    display: flex;
    align-items: center;
    gap: 19px;
    padding: 20px;
    background: #F8FAFC;
    border-radius: var(--radius-card-sm);
}

.admin-metric-icon[b-8ql46dgcq1] {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-metric-icon--purple[b-8ql46dgcq1] { background: #69329A1A; }
.admin-metric-icon--red[b-8ql46dgcq1] { background: #F549491A; }
.admin-metric-icon--green[b-8ql46dgcq1] { background: #29B2231A; }

.admin-metric-label[b-8ql46dgcq1] {
    font-size: 26px;
    font-weight: 400;
    line-height: 1.3;
    flex: 1;
}

.admin-metric-value[b-8ql46dgcq1] {
    font-size: 26px;
    font-weight: 400;
}

/* Compliance Gauge */
.admin-compliance-card[b-8ql46dgcq1] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.admin-compliance-card h2[b-8ql46dgcq1] {
    align-self: flex-start;
}

.admin-gauge-wrapper[b-8ql46dgcq1] {
    width: 100%;
    max-width: 500px;
    align-self: center;
}

.admin-gauge[b-8ql46dgcq1] {
    width: 100%;
    height: 100%;
}

.admin-gauge-tick[b-8ql46dgcq1] {
    fill: var(--bs-border-color);
}

.admin-gauge-bg[b-8ql46dgcq1] {
    fill: none;
    stroke: var(--bs-border-color);
    stroke-width: 40;
    stroke-linecap: round;
}

.admin-gauge-fill[b-8ql46dgcq1] {
    fill: none;
    stroke: url(#gaugeGradient);
    stroke-width: 40;
    stroke-linecap: round;
}

.admin-gauge-text[b-8ql46dgcq1] {
    font-size: 90px;
    font-weight: 400;
    fill: var(--admin-primary);
    text-anchor: middle;
    dominant-baseline: central;
}

.admin-gauge-label[b-8ql46dgcq1] {
    font-size: 24px;
    fill: var(--bs-secondary-color);
    text-anchor: middle;
}

.admin-compliance-message[b-8ql46dgcq1] {
    font-size: 16px;
    padding: 10px 14px;
    border-radius: var(--bs-border-radius);
    margin-top: auto;
    text-align: left;
}

.admin-compliance-message--good[b-8ql46dgcq1] {
    background: #e6f9ee;
    color: #16a34a;
}

.admin-compliance-message--low[b-8ql46dgcq1] {
    background: #fff3cd;
    color: #856404;
}

.admin-participant-mapping[b-8ql46dgcq1] {
    margin-top: 40px;
}

/* Title and search box side by side leave the box no room below lg;
   let the header wrap so the search gets its own line. */
@media (max-width: 991.98px) {
    .admin-participant-mapping[b-8ql46dgcq1]  .data-table__header {
        flex-wrap: wrap;
    }

    /* flex: 1 alone never forces a wrap; a full basis does. */
    .admin-participant-mapping[b-8ql46dgcq1]  .data-table__header-controls {
        flex-basis: 100%;
    }
}

.admin-participant-mapping[b-8ql46dgcq1]  .admin-mapping-value {
    word-break: break-all; /* long emails must not widen the table on phones */
}

/* Badge colors */
.admin-top-participants[b-8ql46dgcq1]  .data-table-badge--high {
    background: #29B2231A;
    color: #29B223;
}

.admin-top-participants[b-8ql46dgcq1]  .data-table-badge--mid {
    background: #F5A6231A;
    color: #F5A623;
}

.admin-top-participants[b-8ql46dgcq1]  .data-table-badge--low {
    background: #F549491A;
    color: #F54949;
}

.admin-top-participants[b-8ql46dgcq1]  .data-table-badge--muted {
    background: #6c757d1A;
    color: #6c757d;
}

/* Top Participants Table */
.admin-top-participants[b-8ql46dgcq1] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    padding: 30px;
}

/* Responsive */
@media (min-width: 768px) {
    .admin-welcome[b-8ql46dgcq1] {
        font-size: 30px;
    }

    .admin-quick-actions[b-8ql46dgcq1] {
        grid-template-columns: repeat(3, 1fr);
    }

    .admin-metrics-row[b-8ql46dgcq1] {
        flex-direction: row;
    }

    .admin-sleep-metrics[b-8ql46dgcq1] {
        flex: 2;
    }

    .admin-compliance-card[b-8ql46dgcq1] {
        flex: 1;
    }
}

@media (min-width: 1200px) {
    .admin-quick-actions[b-8ql46dgcq1] {
        grid-template-columns: repeat(5, 1fr);
    }
}
/* /Views/AdminDashboard/Partials/_MappingTableHeader.cshtml.rz.scp.css */
/* The wrapper is a flex item of the table header, so it is what has to be
   sized: sized in em so the box grows with the responsive root font-size —
   the placeholder is ~14.5em of text plus the paddings, and a px width that
   fit at 14px clipped it at the 20px desktop size. Grows to that width and
   shrinks with the header on narrow screens. */
.mapping-search[b-wg40r4woml] {
    position: relative;
    flex: 1 1 auto;
    max-width: 19em;
    min-width: 0;
}

.mapping-search__input[b-wg40r4woml] {
    padding-right: 40px;
    width: 100%;
}

.mapping-search__icon[b-wg40r4woml] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

/* Below lg the title and the box no longer share a line: the header wraps
   (see the mapping section's page CSS) and the search takes the whole
   second line. */
@media (max-width: 991.98px) {
    .mapping-search[b-wg40r4woml] {
        max-width: none;
        flex-basis: 100%;
    }
}

/* A smaller icon so the placeholder still fits at 375px. */
@media (max-width: 575.98px) {
    .mapping-search__input[b-wg40r4woml] {
        padding-right: 32px;
    }

    .mapping-search__icon[b-wg40r4woml] {
        width: 20px;
        height: 20px;
        right: 8px;
    }
}

/* 360px-wide phones leave the content column ~243px; the placeholder needs
   a touch less type to fit there. */
@media (max-width: 399.98px) {
    .mapping-search__input[b-wg40r4woml] {
        font-size: 13px;
    }
}
/* /Views/AdminDashboard/Partials/_UserRow.cshtml.rz.scp.css */
/* Badge widths now use shared .data-table-badge--w-sm / --w-md classes */
/* /Views/AdminSettings/Partials/_GeneralSettingsContent.cshtml.rz.scp.css */
.general-settings-page[b-g46qr2dkpn] {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    overflow-y: auto;
}

/* Sections */
.general-settings-section[b-g46qr2dkpn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--bs-border-color);
}

.general-settings-section:last-child[b-g46qr2dkpn] {
    border-bottom: none;
}

.general-settings-section-title[b-g46qr2dkpn] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.general-settings-section-desc[b-g46qr2dkpn] {
    color: var(--bs-secondary-color);
    margin: 0;
}

/* Account form */
.general-settings-account-form[b-g46qr2dkpn] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 8px;
}

.general-settings-account-actions[b-g46qr2dkpn] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* Password form */
.general-settings-password-form[b-g46qr2dkpn] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 8px;
}

.general-settings-field[b-g46qr2dkpn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.general-settings-field-label[b-g46qr2dkpn] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.general-settings-password-actions[b-g46qr2dkpn] {
    margin-top: 8px;
}

/* Responsive */
@media (min-width: 768px) {
    .general-settings-page[b-g46qr2dkpn] {
        padding: 0 18px;
    }

    .general-settings-section-title[b-g46qr2dkpn] {
        font-size: 30px;
    }

    .general-settings-account-form[b-g46qr2dkpn] {
        max-width: 480px;
    }

    .general-settings-account-actions[b-g46qr2dkpn] {
        max-width: 480px;
        justify-content: flex-end;
    }

    .general-settings-field-label[b-g46qr2dkpn] {
        font-size: 18px;
    }

    .general-settings-password-form[b-g46qr2dkpn] {
        max-width: 480px;
    }

    .general-settings-password-actions[b-g46qr2dkpn] {
        display: flex;
        justify-content: flex-end;
        max-width: 480px;
    }
}

@media (min-width: 1024px) {
    .general-settings-page[b-g46qr2dkpn] {
        padding: 0 24px;
    }
}
/* /Views/AdminSettings/Partials/_NotificationSettingsContent.cshtml.rz.scp.css */
.notification-settings-page[b-qapc6q9n5q] {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Section */
.notification-settings-section[b-qapc6q9n5q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notification-settings-section-title[b-qapc6q9n5q] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.notification-settings-section-desc[b-qapc6q9n5q] {
    color: var(--bs-secondary-color);
    margin: 0;
}

/* Toggle list */
.notification-settings-toggles[b-qapc6q9n5q] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 16px;
}

.notification-settings-item[b-qapc6q9n5q] {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
}

.notification-settings-item-text[b-qapc6q9n5q] {
}

/* Group: toggle + collapsible detail block */
.notification-settings-group[b-qapc6q9n5q] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.notification-settings-detail[b-qapc6q9n5q] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 8px;
    margin-left: 64px;
}

.notification-settings-detail .numeric-input-group[b-qapc6q9n5q] {
    max-width: 200px;
}

.notification-settings-field[b-qapc6q9n5q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notification-settings-field-label[b-qapc6q9n5q] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.notification-settings-field-help[b-qapc6q9n5q] {
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.notification-settings-radio-group[b-qapc6q9n5q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification-settings-radio[b-qapc6q9n5q] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0;
}

.notification-settings-radio input[type="radio"][b-qapc6q9n5q] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bs-border-color);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s;
}

.notification-settings-radio input[type="radio"]:hover[b-qapc6q9n5q] {
    border-color: var(--admin-primary);
}

.notification-settings-radio input[type="radio"]:checked[b-qapc6q9n5q] {
    border-color: var(--admin-primary);
}

.notification-settings-radio input[type="radio"]:checked[b-qapc6q9n5q]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--admin-primary);
}

.notification-settings-radio input[type="radio"]:focus-visible[b-qapc6q9n5q] {
    outline: 2px solid color-mix(in srgb, var(--admin-primary) 40%, transparent);
    outline-offset: 2px;
}

/* Toggle switch - matches participant-detail pattern */
.notification-settings-toggle[b-qapc6q9n5q] {
    position: relative;
    display: inline-flex;
    width: 48px;
    min-width: 48px;
    height: 26px;
}

.notification-settings-toggle-input[b-qapc6q9n5q] {
    opacity: 0;
    width: 0;
    height: 0;
}

.notification-settings-toggle-slider[b-qapc6q9n5q] {
    position: absolute;
    inset: 0;
    background-color: var(--bs-secondary-bg);
    border-radius: 26px;
    transition: background-color 0.2s;
}

.notification-settings-toggle-slider[b-qapc6q9n5q]::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.notification-settings-toggle-input:checked + .notification-settings-toggle-slider[b-qapc6q9n5q] {
    background-color: var(--admin-primary);
}

.notification-settings-toggle-input:checked + .notification-settings-toggle-slider[b-qapc6q9n5q]::before {
    transform: translateX(22px);
}

/* Actions - sticky bottom */
.notification-settings-actions[b-qapc6q9n5q] {
    display: flex;
    gap: 28px;
    position: sticky;
    bottom: 0;
    padding: 20px 0;
    background: linear-gradient(to bottom, transparent, var(--bs-body-bg) 20%);
    margin-top: auto;
}

.notification-settings-actions .btn[b-qapc6q9n5q] {
    flex: 0 0 calc(50% - 14px);
}

/* Responsive */
@media (min-width: 768px) {
    .notification-settings-page[b-qapc6q9n5q] {
        padding: 0 18px;
    }

    .notification-settings-section-title[b-qapc6q9n5q] {
        font-size: 30px;
    }

    .notification-settings-detail[b-qapc6q9n5q] {
        max-width: 480px;
    }

    .notification-settings-field-label[b-qapc6q9n5q] {
        font-size: 18px;
    }

    .notification-settings-actions[b-qapc6q9n5q] {
        gap: 10px;
        justify-content: flex-end;
        padding: 20px 0;
    }

    .notification-settings-actions .btn[b-qapc6q9n5q] {
        flex: 0 0 auto;
        width: auto;
    }
}

@media (min-width: 1024px) {
    .notification-settings-page[b-qapc6q9n5q] {
        padding: 0 24px;
    }
}
/* /Views/AdminSettings/Partials/_ParticipantDetailContent.cshtml.rz.scp.css */
.participant-detail-page[b-zdu3ssyjnr] {
    padding: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Breadcrumb - sticky */
.participant-detail-breadcrumb[b-zdu3ssyjnr] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    font-weight: 700;
    padding: 0 20px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bs-body-bg);
}

/* Body - scrollable content between breadcrumb and actions */
.participant-detail-body[b-zdu3ssyjnr] {
    flex: 1;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.participant-detail-back[b-zdu3ssyjnr] {
    color: var(--bs-body-color);
    text-decoration: none;
}

.participant-detail-back:hover[b-zdu3ssyjnr] {
    text-decoration: underline;
}

.participant-detail-separator[b-zdu3ssyjnr] {
    color: var(--bs-secondary-color);
}

.participant-detail-current[b-zdu3ssyjnr] {
    color: var(--bs-body-color);
}

/* Sections */
.participant-detail-section[b-zdu3ssyjnr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--bs-border-color);
}

.participant-detail-section:last-child[b-zdu3ssyjnr] {
    border-bottom: none;
}

.participant-detail-section-title[b-zdu3ssyjnr] {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.participant-detail-section-desc[b-zdu3ssyjnr] {
    color: var(--bs-secondary-color);
    margin: 0 0 20px;
}

/* Schedule blocks */
.participant-detail-schedule-blocks[b-zdu3ssyjnr] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.participant-detail-add-another[b-zdu3ssyjnr] {
    font-size: 1rem;
    color: var(--bs-primary);
    text-decoration: underline;
    align-self: flex-start;
}

.participant-detail-total-days[b-zdu3ssyjnr] {
    font-size: 20px;
    font-weight: 700;
}

.participant-detail-total-days span[b-zdu3ssyjnr] {
    font-weight: 400;
}

/* Toggle switches */
.participant-detail-toggle[b-zdu3ssyjnr] {
    position: relative;
    display: inline-flex;
    width: 48px;
    height: 26px;
    cursor: pointer;
}

.participant-detail-toggle-input[b-zdu3ssyjnr] {
    opacity: 0;
    width: 0;
    height: 0;
}

.participant-detail-toggle-slider[b-zdu3ssyjnr] {
    position: absolute;
    inset: 0;
    background-color: var(--bs-secondary-bg);
    border-radius: 26px;
    transition: background-color 0.2s;
}

.participant-detail-toggle-slider[b-zdu3ssyjnr]::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.participant-detail-toggle-input:checked + .participant-detail-toggle-slider[b-zdu3ssyjnr] {
    background-color: var(--admin-primary);
}

.participant-detail-toggle-input:checked + .participant-detail-toggle-slider[b-zdu3ssyjnr]::before {
    transform: translateX(22px);
}

/* Activities */
.participant-detail-activities[b-zdu3ssyjnr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    row-gap: 24px;
    justify-items: center;
}

@media (min-width: 768px) {
    .participant-detail-activities[b-zdu3ssyjnr] {
        grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    }
}

.participant-detail-activity-item[b-zdu3ssyjnr] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Custom questions */
.participant-detail-questions[b-zdu3ssyjnr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 720px;
    margin-bottom: 16px;
}

.custom-question-row[b-zdu3ssyjnr] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    transition: opacity 0.15s;
}

.custom-question-row.dragging[b-zdu3ssyjnr] {
    opacity: 0.4;
}

.custom-question-drag-handle[b-zdu3ssyjnr] {
    cursor: grab;
    color: var(--bs-secondary-color);
    font-size: 22px;
    line-height: 1;
    user-select: none;
    flex: 0 0 auto;
}

.custom-question-drag-handle:active[b-zdu3ssyjnr] {
    cursor: grabbing;
}

.custom-question-text[b-zdu3ssyjnr] {
    flex: 1 1 240px;
    min-width: 0;
}

.custom-question-required-label[b-zdu3ssyjnr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--bs-secondary-color);
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}

.custom-question-remove[b-zdu3ssyjnr] {
    flex: 0 0 auto;
    font-size: 30px;
    line-height: 1;
}

/* Unified actions - sticky bottom */
.participant-detail-actions[b-zdu3ssyjnr] {
    display: flex;
    gap: 28px;
    position: sticky;
    bottom: 0;
    padding: 20px;
    background: linear-gradient(to bottom, transparent, var(--bs-body-bg) 20%);
    margin-top: auto;
}

.participant-detail-actions .btn[b-zdu3ssyjnr] {
    flex: 0 0 calc(50% - 14px);
}

/* Responsive */
@media (min-width: 768px) {
    .participant-detail-breadcrumb[b-zdu3ssyjnr] {
        padding: 0 18px 16px;
        font-size: 28px;
    }

    .participant-detail-body[b-zdu3ssyjnr] {
        padding: 0 18px;
    }

    .participant-detail-section-title[b-zdu3ssyjnr] {
        font-size: 30px;
    }

    .participant-detail-label[b-zdu3ssyjnr] {
        font-size: 20px;
    }

    .participant-detail-actions[b-zdu3ssyjnr] {
        gap: 10px;
        justify-content: flex-end;
        padding: 20px 18px;
    }

    .participant-detail-actions .btn[b-zdu3ssyjnr] {
        flex: 0 0 auto;
        width: auto;
    }
}

@media (min-width: 1024px) {
    .participant-detail-breadcrumb[b-zdu3ssyjnr] {
        padding: 0 24px 16px;
        font-size: 30px;
    }

    .participant-detail-body[b-zdu3ssyjnr] {
        padding: 0 24px;
    }

    .participant-detail-actions[b-zdu3ssyjnr] {
        padding: 20px 24px;
    }
}
/* /Views/AdminSettings/Partials/_ParticipantSettingsHeader.cshtml.rz.scp.css */
.participant-settings-header-row[b-13j5vcg1ri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.participant-settings-title[b-13j5vcg1ri] {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
}

.participant-settings-search[b-13j5vcg1ri] {
    position: relative;
}

.participant-settings-search__input[b-13j5vcg1ri] {
    padding-right: 40px;
    min-width: 280px;
}

.participant-settings-search__icon[b-13j5vcg1ri] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

@media (min-width: 768px) {
    .participant-settings-title[b-13j5vcg1ri] {
        font-size: 30px;
    }
}
/* /Views/AdminSettings/Partials/_ParticipantSettingsRow.cshtml.rz.scp.css */
.participant-change-settings[b-f059k2cs97] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    color: var(--admin-primary);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid var(--admin-primary);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.participant-change-settings:hover[b-f059k2cs97] {
    background: var(--admin-primary);
    color: #fff;
    text-decoration: none;
}
/* /Views/AdminSettings/Partials/_ParticipantsSettingsContent.cshtml.rz.scp.css */
.participants-settings-page[b-ve1b7tzvrh] {
    padding: 0 20px 20px;
    overflow-y: auto;
}

@media (min-width: 768px) {
    .participants-settings-page[b-ve1b7tzvrh] {
        padding: 0 18px 18px;
    }
}

@media (min-width: 1024px) {
    .participants-settings-page[b-ve1b7tzvrh] {
        padding: 0 24px 24px;
    }
}
/* /Views/Compliance/Detail.cshtml.rz.scp.css */
.compliance-detail-page[b-3p4wsmezea] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Header */
.compliance-detail-header[b-3p4wsmezea] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.compliance-detail-header[b-3p4wsmezea]  .admin-export-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Metric Cards */
.compliance-detail-metrics[b-3p4wsmezea] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.compliance-detail-metric-card[b-3p4wsmezea] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card-sm);
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.compliance-detail-metric-bottom[b-3p4wsmezea] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.compliance-detail-metric-top[b-3p4wsmezea] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.compliance-detail-metric-info[b-3p4wsmezea] {
    display: flex;
    flex-direction: column;
}

.compliance-detail-metric-label[b-3p4wsmezea] {
    font-size: 26px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--bs-body-color);
}

.compliance-detail-metric-value[b-3p4wsmezea] {
    font-size: 26px;
    font-weight: 400;
}

.compliance-detail-metric-icon[b-3p4wsmezea] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.compliance-detail-metric-icon--green[b-3p4wsmezea] { background: #29B2231A; }
.compliance-detail-metric-icon--blue[b-3p4wsmezea] { background: #4876C61A; }
.compliance-detail-metric-icon--red[b-3p4wsmezea] { background: #F549491A; }
.compliance-detail-metric-icon--yellow[b-3p4wsmezea] { background: #F5D8491A; }

.compliance-detail-metric-desc[b-3p4wsmezea] {
    font-size: inherit;
    color: var(--bs-secondary-color);
}

.compliance-detail-metric-desc--good[b-3p4wsmezea] {
    color: #29B223;
}

.compliance-detail-metric-desc--mid[b-3p4wsmezea] {
    color: #F5A623;
}

.compliance-detail-metric-desc--low[b-3p4wsmezea] {
    color: #F54949;
}

/* Progress Bar */
.compliance-detail-progress[b-3p4wsmezea] {
    width: 100%;
    height: 13px;
    background: var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    overflow: hidden;
}

.compliance-detail-progress-bar[b-3p4wsmezea] {
    height: 100%;
    background: var(--admin-primary);
    border-radius: var(--bs-border-radius-pill);
    transition: width 0.3s;
}

/* Badge colors */
.compliance-detail-table-card[b-3p4wsmezea]  .data-table-badge--high {
    background: #29B2231A;
    color: #29B223;
}

.compliance-detail-table-card[b-3p4wsmezea]  .data-table-badge--mid {
    background: #F5A6231A;
    color: #F5A623;
}

.compliance-detail-table-card[b-3p4wsmezea]  .data-table-badge--neutral {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.compliance-detail-table-card[b-3p4wsmezea]  .data-table-badge--low {
    background: #F549491A;
    color: #F54949;
}

/* Table Card */
.compliance-detail-table-card[b-3p4wsmezea] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    padding: 30px;
}

.compliance-send-alert[b-3p4wsmezea] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Responsive */
@media (min-width: 768px) {
    .compliance-detail-metrics[b-3p4wsmezea] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .compliance-detail-metrics[b-3p4wsmezea] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Views/Compliance/Index.cshtml.rz.scp.css */
.compliance-page[b-9if84bjtfd] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Header */
.compliance-header[b-9if84bjtfd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.compliance-header-right[b-9if84bjtfd] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.compliance-header[b-9if84bjtfd]  .admin-export-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Metric Cards */
.compliance-metrics[b-9if84bjtfd] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.compliance-metric-card[b-9if84bjtfd] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card-sm);
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.compliance-metric-top[b-9if84bjtfd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.compliance-metric-info[b-9if84bjtfd] {
    display: flex;
    flex-direction: column;
}

.compliance-metric-label[b-9if84bjtfd] {
    font-size: 26px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.compliance-metric-value[b-9if84bjtfd] {
    font-size: 26px;
    font-weight: 400;
}

.compliance-metric-icon[b-9if84bjtfd] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.compliance-metric-icon--green[b-9if84bjtfd] { background: #29B2231A; }
.compliance-metric-icon--blue[b-9if84bjtfd] { background: #4876C61A; }
.compliance-metric-icon--red[b-9if84bjtfd] { background: #F549491A; }
.compliance-metric-icon--yellow[b-9if84bjtfd] { background: #F5D8491A; }

/* Badge colors */
.compliance-table-card[b-9if84bjtfd]  .data-table-badge--high {
    background: color-mix(in srgb, var(--badge-high) 10%, transparent);
    color: var(--badge-high);
}

.compliance-table-card[b-9if84bjtfd]  .data-table-badge--mid {
    background: color-mix(in srgb, var(--badge-mid) 10%, transparent);
    color: var(--badge-mid);
}

.compliance-table-card[b-9if84bjtfd]  .data-table-badge--low {
    background: color-mix(in srgb, var(--badge-low) 10%, transparent);
    color: var(--badge-low);
}

.compliance-table-card[b-9if84bjtfd]  .data-table-badge--na {
    background: color-mix(in srgb, var(--badge-neutral) 10%, transparent);
    color: var(--badge-neutral);
}

/* Table Card */
.compliance-table-card[b-9if84bjtfd] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    padding: 30px;
}

/* Responsive */
@media (min-width: 768px) {
    .compliance-metrics[b-9if84bjtfd] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .compliance-metrics[b-9if84bjtfd] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Views/Compliance/Partials/_ComplianceRow.cshtml.rz.scp.css */
.compliance-view-details[b-p0mah2qak9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    color: var(--admin-primary);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid var(--admin-primary);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.compliance-view-details:hover[b-p0mah2qak9] {
    background: var(--admin-primary);
    color: #fff;
    text-decoration: none;
}
/* /Views/Compliance/Partials/_ComplianceTableHeader.cshtml.rz.scp.css */
.compliance-table-controls[b-dfvplvptar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.compliance-table-controls__left[b-dfvplvptar] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.compliance-filter-btn[b-dfvplvptar] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.compliance-filter-badge[b-dfvplvptar] {
    background: var(--admin-primary, var(--bs-primary));
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.compliance-search[b-dfvplvptar] {
    position: relative;
}

.compliance-search__input[b-dfvplvptar] {
    padding-right: 40px;
    min-width: 280px;
}

.compliance-search__icon[b-dfvplvptar] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

/* Filter radio buttons */
.compliance-filter-radios[b-dfvplvptar] {
    display: flex;
    gap: 20px;
}

.compliance-filter-radio[b-dfvplvptar] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    align-self: flex-start;
}

.compliance-filter-radio .form-check-input[b-dfvplvptar] {
    margin: 0;
    flex-shrink: 0;
}

.compliance-filter-chip[b-dfvplvptar] {
    display: inline-block;
    padding: 8px;
    border-radius: 10px;
    font-size: 1rem;
    text-align: center;
    min-width: 80px;
}

.compliance-filter-chip--all[b-dfvplvptar] {
    background: color-mix(in srgb, var(--badge-neutral) 10%, transparent);
    color: var(--badge-neutral);
}

.compliance-filter-chip--in-study[b-dfvplvptar] {
    background: color-mix(in srgb, var(--badge-high) 10%, transparent);
    color: var(--badge-high);
}

.compliance-filter-chip--not-in-study[b-dfvplvptar] {
    background: color-mix(in srgb, var(--badge-low) 10%, transparent);
    color: var(--badge-low);
}

/* Filter modal */
.compliance-filter-modal .modal-body[b-dfvplvptar] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.compliance-filter-field[b-dfvplvptar] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.compliance-filter-field__label[b-dfvplvptar] {
    font-weight: 500;
    color: var(--bs-body-color);
    margin: 0;
}

.compliance-filter-range[b-dfvplvptar] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compliance-filter-range__sep[b-dfvplvptar] {
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}

.compliance-filter-modal .modal-footer[b-dfvplvptar] {
    display: flex;
    gap: 12px;
}

.compliance-filter-modal .modal-footer .btn[b-dfvplvptar] {
    flex: 1;
}
/* /Views/Compliance/Partials/_ComplianceTimelineHeader.cshtml.rz.scp.css */
.compliance-timeline-controls[b-j3ghbzoabq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
}
/* /Views/Compliance/Partials/_ComplianceTimelineRow.cshtml.rz.scp.css */
.compliance-timeline-badge[b-i3adi8l678] {
    width: 60px;
}

.compliance-timeline-quality[b-i3adi8l678] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.compliance-timeline-tz[b-i3adi8l678] {
    display: block;
    margin-top: 2px;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
/* /Views/Dashboard/Index.cshtml.rz.scp.css */
.dashboard[b-5a4qflwlve] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.dashboard-header[b-5a4qflwlve] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.dashboard-title[b-5a4qflwlve] {
    font-size: var(--type-page-title);
    margin: 0;
}

.dashboard-actions[b-5a4qflwlve] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 100%;
}

.dashboard-action-wrapper[b-5a4qflwlve],
.dashboard-actions #submitDiaryWrapper[b-5a4qflwlve] {
    position: relative;
    flex: 1;
}

.dashboard-action-wrapper .btn[b-5a4qflwlve],
.dashboard-actions #submitDiaryWrapper .btn[b-5a4qflwlve] {
    width: 100%;
    height: 100%;
    justify-content: center;
}

#submitDiaryWrapper[data-tooltip][b-5a4qflwlve] {
    z-index: 1001;
}

#submitDiaryWrapper[data-tooltip][b-5a4qflwlve]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    padding: 6px 12px;
    background: var(--bs-gray-800);
    color: white;
    font-size: 13px;
    border-radius: var(--bs-border-radius);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

#submitDiaryWrapper[data-tooltip]:hover[b-5a4qflwlve]::after {
    opacity: 1;
}

@media (min-width: 768px) {
    .dashboard-actions[b-5a4qflwlve] {
        width: auto;
        margin-left: auto;
    }

    .dashboard-action-wrapper[b-5a4qflwlve],
    .dashboard-actions #submitDiaryWrapper[b-5a4qflwlve] {
        flex: none;
    }

    .dashboard-action-wrapper .btn[b-5a4qflwlve],
    .dashboard-actions #submitDiaryWrapper .btn[b-5a4qflwlve] {
        width: auto;
    }
}

/* Phone: the header chrome above the timeline was ~540px of a 667px screen.
   The title goes visually (kept for assistive tech — the date row says where
   you are), the action buttons get compact, and the options row folds into a
   one-line summary (see Index.cshtml). Desktop is untouched. */
@media (max-width: 767.98px) {
    .dashboard-title[b-5a4qflwlve] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .dashboard-header[b-5a4qflwlve] {
        gap: 12px;
    }

    /* ::deep because the Set Work Schedule <a> comes from the anchor tag
       helper and carries no scope attribute, unlike the Submit <button>. */
    .dashboard-actions[b-5a4qflwlve]  .btn {
        padding: 8px 10px;
        min-height: 44px;
        font-size: 14px;
    }

    .dashboard-actions[b-5a4qflwlve]  .icon-mask {
        width: 22px;
        height: 22px;
    }
}

@media (min-width: 768px) {
    .dashboard-actions[b-5a4qflwlve]  .icon-mask {
        width: 27px;
        height: 27px;
    }
}

/* Summary bar that stands in for the folded options row on phones. */
.timeline-options-summary[b-5a4qflwlve] {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* A single line with no vertical padding or margin: on a phone every pixel
       above the grid is diary space, and the row is a full-width tap target
       anyway. */
    min-height: 28px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 14px;
    text-align: left;
}

.timeline-options-summary-text[b-5a4qflwlve] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-options-summary-chevron[b-5a4qflwlve] {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.timeline-options-summary[aria-expanded="true"] .timeline-options-summary-chevron[b-5a4qflwlve] {
    transform: rotate(180deg);
}

@media (max-width: 767.98px) {
    .timeline-options-summary[b-5a4qflwlve] {
        display: flex;
    }

    /* An ambiguous day forces the row open (timeline-events.css), so the
       summary would only duplicate it. */
    .timeline-card:has(.timeline-shift-control.shift-needed) .timeline-options-summary[b-5a4qflwlve] {
        display: none;
    }
}

/* Timeline Card */
.timeline-card[b-5a4qflwlve] {
    margin-top: 12px;
    background: var(--bs-body-bg);
    border-radius: 20px;
    border: 1px solid var(--bs-border-color);
    padding: 0 0 20px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.timeline-options[b-5a4qflwlve] {
    flex-shrink: 0;
}

.timeline-container[b-5a4qflwlve] {
    display: flex;
    flex-direction: column-reverse;
    gap: 0;
    flex: 1;
    min-height: 0;
    position: relative;
}

/* Cover the timeline while the client-side loader fetches events and renders
   their partials. Without this the user briefly sees the empty grid before
   blocks pop in one by one. */
.timeline-loading-overlay[b-5a4qflwlve] {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg);
    border-radius: inherit;
}

.timeline-container[data-loading="true"] .timeline-loading-overlay[b-5a4qflwlve] {
    display: flex;
}

.timeline-container[data-loading="true"] .timeline-scroll[b-5a4qflwlve],
.timeline-container[data-loading="true"] .timeline-actions-wrapper[b-5a4qflwlve] {
    visibility: hidden;
}

/* Ambiguous-day placeholder: shown instead of the timeline until a shift is
   chosen in the header toggle. Covers the grid and hides the action palette so
   nothing can be added against an undefined day boundary. */
.timeline-shift-required-overlay[b-5a4qflwlve] {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: var(--bs-body-bg);
    border-radius: inherit;
}

.timeline-container[data-shift-required="true"] .timeline-shift-required-overlay[b-5a4qflwlve] {
    display: flex;
}

.timeline-container[data-shift-required="true"] .timeline-scroll[b-5a4qflwlve],
.timeline-container[data-shift-required="true"] .timeline-actions-wrapper[b-5a4qflwlve] {
    visibility: hidden;
}

.timeline-shift-required-message[b-5a4qflwlve] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 360px;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.95rem;
}

.timeline-shift-required-arrow[b-5a4qflwlve] {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bs-warning, #ffc107);
}

@media (min-width: 768px) {
    .timeline-card[b-5a4qflwlve] {
        padding: 0 0 40px 0;
    }

    .timeline-container[b-5a4qflwlve] {
        flex-direction: row;
    }
}

.timeline-scroll[b-5a4qflwlve] {
    display: flex;
    flex: 1;
    overflow-y: auto;
    min-width: 0;
    align-items: flex-start;
    padding-left: 10px;
}

@media (min-width: 768px) {
    .timeline-scroll[b-5a4qflwlve] {
        padding-left: 30px;
    }
}

.timeline-hours[b-5a4qflwlve] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding-right: 4px;
    position: relative;
}

.timeline-hour[b-5a4qflwlve] {
    height: var(--hour-height);
    color: var(--bs-secondary-color);
    display: flex;
    align-items: flex-start;
    padding-top: 0;
    line-height: 1;
}

.timeline-content[b-5a4qflwlve] {
    flex: 1;
    position: relative;
    border-left: 1px solid var(--bs-border-color);
    border-right: 1px solid var(--bs-border-color);
}

.timeline-grid[b-5a4qflwlve] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.timeline-row[b-5a4qflwlve] {
    height: var(--hour-height);
    border-bottom: 1px solid var(--bs-border-color);
}

.timeline-row:first-child[b-5a4qflwlve] {
    border-top: 1px solid var(--bs-border-color);
}

/* Hours rendered past the original 24-hour window — tint them so it's clear
   the timeline has been extended beyond the diary day. */
.timeline-row[data-extra][b-5a4qflwlve] {
    background: color-mix(in srgb, var(--bs-secondary-color) 6%, transparent);
}

.timeline-hour[data-extra][b-5a4qflwlve] {
    opacity: 0.55;
}

.timeline-events[b-5a4qflwlve] {
    position: relative;
    height: calc(24 * var(--hour-height));
}

/* Day boundary marker at midnight */
.timeline-day-boundary[b-5a4qflwlve] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed var(--bs-secondary-color);
    opacity: 0.4;
    z-index: 1;
    pointer-events: none;
}

.timeline-day-label[b-5a4qflwlve] {
    position: absolute;
    right: 5px;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    padding: 2px 6px;
    background: var(--bs-secondary-color);
    color: var(--bs-body-bg);
    font-size: 10px;
    border-radius: var(--bs-border-radius-sm);
    white-space: nowrap;
    line-height: 1.3;
}

.timeline-hour-midnight[b-5a4qflwlve] {
    padding-top: 10px;
}

.timeline-day-label-dow[b-5a4qflwlve] {
    display: none;
}

@media (min-width: 768px) {
    .timeline-hour-midnight[b-5a4qflwlve] {
        padding-top: 15px;
    }

    .timeline-day-label-dow[b-5a4qflwlve] {
        display: inline;
    }
}

/* Drag over state */
.timeline-events.drag-over[b-5a4qflwlve] {
    background: rgba(var(--bs-primary-rgb), 0.07);
}

/* /Views/ParticipantDiary/Index.cshtml.rz.scp.css */
.diary-page[b-w2itjygr0v] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Header */
.diary-header[b-w2itjygr0v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.diary-header-right[b-w2itjygr0v] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Metric Cards */
.diary-metrics-container[b-w2itjygr0v] {
    position: relative;
}

[b-w2itjygr0v] .metrics-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    cursor: pointer;
    color: var(--bs-secondary-color);
    transition: transform 0.35s ease;
}

[b-w2itjygr0v] .metrics-toggle:hover {
    color: var(--bs-body-color);
}

.diary-page.metrics-collapsed[b-w2itjygr0v]  .metrics-toggle {
    transform: rotate(180deg);
}

.diary-metrics[b-w2itjygr0v] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-height: 600px;
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}

.diary-page.metrics-collapsed .diary-metrics[b-w2itjygr0v] {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

/* Compact metrics bar */
.diary-metrics-compact[b-w2itjygr0v] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card-sm);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease 0.1s, padding 0.35s ease;
    padding-top: 0;
    padding-bottom: 0;
}

.diary-page.metrics-collapsed .diary-metrics-compact[b-w2itjygr0v] {
    max-height: 60px;
    opacity: 1;
    padding-top: 12px;
    padding-bottom: 12px;
}

.metrics-compact-item[b-w2itjygr0v] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.metrics-compact-label[b-w2itjygr0v] {
    font-size: 13px;
    color: var(--bs-secondary-color);
}

.metrics-compact-value[b-w2itjygr0v] {
    font-size: 15px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.metrics-compact-separator[b-w2itjygr0v] {
    width: 1px;
    height: 20px;
    background: var(--bs-border-color);
}

.diary-metric-card[b-w2itjygr0v] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card-sm);
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.diary-metric-top[b-w2itjygr0v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.diary-metric-info[b-w2itjygr0v] {
    display: flex;
    flex-direction: column;
}

.diary-metric-label[b-w2itjygr0v] {
    font-size: 26px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--bs-body-color);
}

.diary-metric-bottom[b-w2itjygr0v] {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.diary-metric-value[b-w2itjygr0v] {
    font-size: 26px;
    font-weight: 400;
}

.diary-metric-icon[b-w2itjygr0v] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.diary-metric-icon--purple[b-w2itjygr0v] { background: #69329A1A; }
.diary-metric-icon--blue[b-w2itjygr0v] { background: #4876C61A; }
.diary-metric-icon--pink[b-w2itjygr0v] { background: #F549AB1A; }
.diary-metric-icon--green[b-w2itjygr0v] { background: #29B2231A; }

.diary-compliance-link[b-w2itjygr0v] {
    color: var(--admin-primary);
    font-size: 20px;
    text-decoration: none;
    font-weight: 500;
}

.diary-compliance-link:hover[b-w2itjygr0v] {
    text-decoration: underline;
}

/* Grid Card */
.diary-grid-card[b-w2itjygr0v] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.diary-grid-wrapper[b-w2itjygr0v] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Calendar Grid */
[b-w2itjygr0v] .src-calendar {
    display: flex;
    flex: 1;
    min-height: 0;
}

[b-w2itjygr0v] .src-hours {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 80px;
    background: var(--bs-body-bg);
    z-index: 4;
}

[b-w2itjygr0v] .src-days-scroll {
    flex: 1;
    min-width: 0;
    overflow: auto;
}

[b-w2itjygr0v] .src-days-grid {
    display: grid;
    grid-template-columns: repeat(var(--src-day-count, 7), minmax(220px, 1fr));
}

[b-w2itjygr0v] .src-hours-header {
    height: var(--hour-height);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-w2itjygr0v] .src-hour-label {
    height: var(--hour-height);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--bs-secondary-color);
}

[b-w2itjygr0v] .src-day-col {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--bs-border-color);
    min-width: 0;
    overflow: hidden;
}

[b-w2itjygr0v] .src-day-header {
    height: var(--hour-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    gap: 2px;
}

/* All-day row: one pill-height per line, the same height in every column
   (the tallest column decides, via --src-allday-rows) so the hour rows below
   stay aligned. Sticky under the day header like the header itself. */
[b-w2itjygr0v] .src-day-allday,
[b-w2itjygr0v] .src-hours-allday {
    /* A point pill is 41px tall (29px icon circle + padding); 4px between pills. */
    --src-allday-pill: 45px;
    height: calc(var(--src-allday-rows, 0) * var(--src-allday-pill) + 8px);
    flex-shrink: 0;
    position: sticky;
    top: var(--hour-height);
    z-index: 3;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    box-sizing: border-box;
}

[b-w2itjygr0v] .src-day-allday {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 5px;
    overflow: hidden;
}

[b-w2itjygr0v] .src-hours-allday {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--bs-secondary-color);
    z-index: 4;
}

/* The all-day pill is laid out by the row, not positioned by time, and reads
   on one line: the name, then the note, each cut with an ellipsis. Scoped
   under the row so it outranks .src-event's absolute positioning below. */
[b-w2itjygr0v] .src-day-allday .src-event--allday {
    position: static;
    flex-shrink: 0;
}

[b-w2itjygr0v] .src-day-allday .src-event--allday .src-event__body {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

[b-w2itjygr0v] .src-day-allday .src-event--allday .src-event__info {
    flex: 0 1 auto;
}

[b-w2itjygr0v] .src-day-allday .src-event--allday .src-event__info:first-child {
    flex-shrink: 0;
    max-width: 65%;
}

[b-w2itjygr0v] .src-day-name {
    font-size: 26px;
    font-weight: 400;
    color: var(--bs-body-color);
}

[b-w2itjygr0v] .src-day-date {
    font-size: 20px;
    color: var(--bs-secondary-color);
}

[b-w2itjygr0v] .src-day-tz {
    display: inline-block;
    margin-top: 2px;
    color: var(--bs-secondary-color);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Day submitted in a different zone than the view selector: times in the
   column are re-based, the badge spells out the conversion. Wraps to two
   lines in narrow columns — kept tight so it stays inside the fixed-height
   header. */
[b-w2itjygr0v] .src-day-tz--submitted {
    font-style: italic;
    cursor: help;
    font-size: 11px;
    line-height: 1.25;
    margin-top: 0;
    max-width: calc(100% - 8px);
    text-align: center;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

[b-w2itjygr0v] .src-day-body {
    position: relative;
}

[b-w2itjygr0v] .src-grid-row {
    height: var(--hour-height);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

/* Events */
[b-w2itjygr0v] .src-event {
    position: absolute;
    left: 5px;
    right: 5px;
    z-index: 1;
    border-radius: 6px;
    padding: 6px 4px;
    font-size: 11px;
    overflow: hidden;
}

[b-w2itjygr0v] .src-event--recommended {
    --recommended-color: #093D96;
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--recommended-color) 6%, transparent);
    border: 2px dashed color-mix(in srgb, var(--recommended-color) 35%, transparent);
    border-radius: 0;
    pointer-events: none;
    z-index: 0;
}

[b-w2itjygr0v] .src-event--recommended .src-event__label {
    position: absolute;
    top: 9px;
    left: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bs-secondary-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    padding: 7px 14px;
    border-radius: 10px;
    line-height: 1.4;
}

[b-w2itjygr0v] .src-event--work {
    left: 5px;
    right: 5px;
    background: linear-gradient(color-mix(in srgb, var(--bs-secondary) 15%, transparent), color-mix(in srgb, var(--bs-secondary) 15%, transparent)), var(--bs-body-bg);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1;
}

/* The hover z-lift (diary-overlap.js) waits the same 0.3s as the participant
   timeline's, so a cursor passing over a stack doesn't reshuffle it. */
[b-w2itjygr0v] .src-event--work,
[b-w2itjygr0v] .src-sleep-event,
[b-w2itjygr0v] .src-exercise-event {
    transition: z-index 0s 0.3s;
}

[b-w2itjygr0v] .src-event--work .src-event__label {
    font-size: 20px;
    font-weight: 700;
    color: var(--bs-body-color);
}

[b-w2itjygr0v] .src-event--work .src-event__time {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

/* Activity / medication entry with an ending time: a block in the entry's
   colour (--event-color set by the partial). Tint, border and hover are the
   point pill's, so an entry looks the same with or without an ending time. */
[b-w2itjygr0v] .src-event--activity {
    left: 5px;
    right: 5px;
    border-radius: 6px;
    border: 1px solid var(--event-color, var(--bs-border-color));
    background: linear-gradient(color-mix(in srgb, var(--event-color, var(--bs-border-color)) 10%, transparent), color-mix(in srgb, var(--event-color, var(--bs-border-color)) 10%, transparent)), var(--bs-body-bg);
    cursor: pointer;
    z-index: 1;
    transition: z-index 0s 0.3s;
}

[b-w2itjygr0v] .src-event--activity:hover {
    background: linear-gradient(color-mix(in srgb, var(--event-color, var(--bs-border-color)) 18%, transparent), color-mix(in srgb, var(--event-color, var(--bs-border-color)) 18%, transparent)), var(--bs-body-bg);
}

[b-w2itjygr0v] .src-event--activity .src-event__label {
    font-size: 16px;
    font-weight: 700;
    color: var(--bs-body-color);
}

[b-w2itjygr0v] .src-event--activity .src-event__label--tail {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

[b-w2itjygr0v] .src-event--activity .src-event__time {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

/* Under 1.5 h the block is only a few lines tall: one line per text. */
[b-w2itjygr0v] .src-event--compact .src-event__time,
[b-w2itjygr0v] .src-event--compact .src-event__dosage {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Events split across the diary boundary: flatten corners on the cut side. */
[b-w2itjygr0v] .src-event--continued-down {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
[b-w2itjygr0v] .src-event--continued-up {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

[b-w2itjygr0v] .src-event--point {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Clicking a point event opens its read-only details modal. */
    cursor: pointer;
    background: linear-gradient(color-mix(in srgb, var(--event-color, var(--bs-border-color)) 10%, transparent), color-mix(in srgb, var(--event-color, var(--bs-border-color)) 10%, transparent)), var(--bs-body-bg);
    border: 1px solid var(--event-color, var(--bs-border-color));
    min-height: 28px;
    /* Above the long-block resting band (diary-overlap.js spreads overlapping
       work/sleep/exercise across z 1..20), so point markers stay legible.
       A long block still lifts above points on hover (z 50) for a full read. */
    z-index: 30;
    transform: translateY(max(-50%, calc(-1 * var(--event-top))));
}

/* A short entry with an ending time hangs from its start time instead of being
   centred on it (pulled up only to stay inside the column). At rest it is the
   name and the range; hovering unfolds the medication and notes rows over
   whatever sits below. */
[b-w2itjygr0v] .src-event--ranged {
    transform: translateY(min(0px, calc(var(--day-height) - var(--event-top) - 100%)));
}

[b-w2itjygr0v] .src-event--ranged .src-event__time {
    white-space: nowrap;
}

[b-w2itjygr0v] .src-event--ranged .src-event__info--extra {
    display: none;
}

[b-w2itjygr0v] .src-event--ranged:hover {
    z-index: 60;
}

[b-w2itjygr0v] .src-event--ranged:hover .src-event__info--extra {
    display: flex;
    flex-wrap: wrap;
}

/* Unfolded, the medication name reads in full; the dose drops to the next
   line when the two don't fit side by side. */
[b-w2itjygr0v] .src-event--ranged:hover .src-event__info--extra .src-event__detail {
    flex-shrink: 0;
    max-width: 100%;
}

[b-w2itjygr0v] .src-event--ranged:hover .src-event__detail--notes {
    white-space: normal;
}

/* Same clickable-hover cue as the group bubble: deepen the tint. */
[b-w2itjygr0v] .src-event--point:hover {
    background: linear-gradient(color-mix(in srgb, var(--event-color, var(--bs-border-color)) 18%, transparent), color-mix(in srgb, var(--event-color, var(--bs-border-color)) 18%, transparent)), var(--bs-body-bg);
}

/* === Point-event group bubble (built by diary-event-group.js) ===
   Collapses overlapping medication/activity markers in a day column. Styled to
   match an admin point event (.src-event--point): same bordered block + 29px
   icon circle, but the circle holds the count and the body reads "events" + the
   time range. A group can mix event types, so it uses the theme primary colour
   (not any single event's colour); routing it through --event-color tints the
   block, background and count circle in one place. The whole block is the
   trigger; it toggles a floated read-only list. */
[b-w2itjygr0v] .src-event-group {
    --event-color: var(--bs-primary);
    position: absolute;
    left: 5px;
    right: 5px;
    z-index: 30;
    transform: translateY(max(-50%, calc(-1 * var(--event-top))));
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 6px 4px;
    border-radius: 6px;
    border: 1px solid var(--event-color, var(--bs-border-color));
    background: linear-gradient(color-mix(in srgb, var(--event-color, var(--bs-border-color)) 10%, transparent), color-mix(in srgb, var(--event-color, var(--bs-border-color)) 10%, transparent)), var(--bs-body-bg);
    cursor: pointer;
    overflow: hidden;
}

[b-w2itjygr0v] .src-event-group--ranged {
    transform: translateY(min(0px, calc(var(--day-height) - var(--event-top) - 100%)));
}

[b-w2itjygr0v] .src-event-group:hover {
    background: linear-gradient(color-mix(in srgb, var(--event-color, var(--bs-border-color)) 18%, transparent), color-mix(in srgb, var(--event-color, var(--bs-border-color)) 18%, transparent)), var(--bs-body-bg);
}

[b-w2itjygr0v] .src-event-group.open {
    z-index: 60;
}

/* Count badge — solid pill in the group colour with light text, matching the
   dashboard group badge (.timeline-group-badge). */
[b-w2itjygr0v] .src-group-count {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: var(--event-color, var(--bs-primary));
    color: var(--text-on-primary, #fff);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

[b-w2itjygr0v] .src-group-chevron {
    flex-shrink: 0;
    color: var(--bs-secondary-color);
    transition: transform 0.2s;
}

[b-w2itjygr0v] .src-event-group.open .src-group-chevron {
    transform: rotate(180deg);
}

/* Floated to .diary-page and positioned (fixed) by diary-event-group.js on open,
   so it escapes the day column's overflow:hidden. JS toggles display. */
[b-w2itjygr0v] .src-group-list {
    display: none;
    z-index: 1000;
    min-width: 160px;
    max-width: 260px;
    max-height: 260px;
    overflow-y: auto;
    padding: 4px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

[b-w2itjygr0v] .src-group-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    /* Clicking a group row opens the same read-only details modal as the pill. */
    cursor: pointer;
}

[b-w2itjygr0v] .src-group-item + .src-group-item {
    border-top: 1px solid var(--bs-border-color);
}

/* Rows are clickable (details modal); tint on hover so that reads as such. */
[b-w2itjygr0v] .src-group-item:hover {
    background: color-mix(in srgb, var(--event-color, var(--bs-primary)) 15%, transparent);
}

[b-w2itjygr0v] .src-event__icon-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: baseline;
    width: 29px;
    height: 29px;
    border: 1px solid var(--event-color, var(--bs-border-color));
    border-radius: 50%;
}

[b-w2itjygr0v] .src-event__icon {
    flex-shrink: 0;
    /* Mask spans have no intrinsic size — give the glyph an explicit box. */
    width: 18px;
    height: 18px;
}

[b-w2itjygr0v] .src-event__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

[b-w2itjygr0v] .src-event__info {
    display: flex;
    gap: 6px;
    justify-content: space-between;
    min-width: 0;
    flex: 1;
}

[b-w2itjygr0v] .src-event__label {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-w2itjygr0v] .src-event__detail {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-w2itjygr0v] .src-event__time {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

[b-w2itjygr0v] .src-event__dosage {
    font-size: 14px;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

/* Day boundary at midnight */
[b-w2itjygr0v] .src-day-boundary {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed rgba(var(--bs-secondary-color-rgb, 108, 117, 125), 0.4);
    z-index: 1;
    pointer-events: none;
}

[b-w2itjygr0v] .src-hours-body {
    position: relative;
}

[b-w2itjygr0v] .src-next-day-badge {
    position: absolute;
    left: 50%;
    transform: translate(-32%, -50%);
    padding: 2px 8px;
    background: var(--bs-secondary-color);
    color: var(--bs-body-bg);
    font-size: 10px;
    border-radius: var(--bs-border-radius-sm);
    white-space: nowrap;
    line-height: 1.3;
    z-index: 2;
}

[b-w2itjygr0v] .src-hour-label--midnight {
    padding-top: 10px;
}

[b-w2itjygr0v] .src-day-col--future {
    opacity: 0.4;
    pointer-events: none;
}

[b-w2itjygr0v] .src-day-col--future .src-day-body {
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        var(--bs-border-color-translucent) 8px,
        var(--bs-border-color-translucent) 9px
    );
}

[b-w2itjygr0v] .src-empty {
    text-align: center;
    color: var(--bs-secondary-color);
    padding: 40px;
}

/* Responsive */
@media (min-width: 768px) {
    .diary-metrics[b-w2itjygr0v] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .diary-metrics[b-w2itjygr0v] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Views/ParticipantDiary/Partials/_DiaryExerciseEvent.cshtml.rz.scp.css */
.src-exercise-event[b-93b4kofmjh] {
    position: absolute;
    left: 5px;
    right: 5px;
    z-index: 1;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    background: linear-gradient(color-mix(in srgb, var(--event-color) 15%, transparent), color-mix(in srgb, var(--event-color) 15%, transparent)), var(--bs-body-bg);
    /* See _DiarySleepEvent.cshtml.css: one-hour floor so short workouts still
       fit the header + time line. */
    min-height: var(--hour-height);
}

.src-exercise-header[b-93b4kofmjh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.src-exercise-name[b-93b4kofmjh] {
    font-size: 20px;
    font-weight: 700;
    color: var(--bs-body-color);
}

/* Compact block (< 1h30m rendered): Details link in the header row. */
.src-exercise-event--compact .src-exercise-header[b-93b4kofmjh] {
    line-height: 1.2;
}

.src-exercise-event--compact .src-exercise-view-details[b-93b4kofmjh] {
    position: static;
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .src-exercise-event--compact .src-exercise-time[b-93b4kofmjh] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.src-exercise-time[b-93b4kofmjh] {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.src-exercise-view-details[b-93b4kofmjh] {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 14px;
    color: var(--bs-body-color);
    text-decoration: underline;
    z-index: 2;
}

.src-exercise-view-details:hover[b-93b4kofmjh] {
    opacity: 0.6;
}

/* See _DiarySleepEvent.cshtml.css for the rationale. */
.src-exercise-event.src-exercise-event--continued-down[b-93b4kofmjh] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.src-exercise-event.src-exercise-event--continued-up[b-93b4kofmjh] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* /Views/ParticipantDiary/Partials/_DiarySleepEvent.cshtml.rz.scp.css */
.src-sleep-event[b-nrmozqbbg5] {
    position: absolute;
    left: 5px;
    right: 5px;
    z-index: 1;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    /* Floor for very short records (naps, stubs cut at a diary boundary): one
       hour is the least that fits the compact header + time line. Same floor as
       the participant timeline; any visual overlap this creates is resolved by
       diary-overlap.js off the rendered height. */
    min-height: var(--hour-height);
}

.src-sleep-header[b-nrmozqbbg5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Compact block (< 1h30m rendered): the header row holds the Details link and
   the icon-only on-track badge; the tighter line-height keeps header + one
   time line inside a 60px block on phones. */
.src-sleep-event--compact .src-sleep-header[b-nrmozqbbg5] {
    line-height: 1.2;
}

.src-sleep-event--compact .src-sleep-view-details[b-nrmozqbbg5] {
    position: static;
    margin-left: auto;
    white-space: nowrap;
}

.src-sleep-on-track.src-sleep-on-track--icon[b-nrmozqbbg5] {
    padding: 3px;
}

@media (max-width: 767.98px) {
    /* 60px block: only one time line fits — ellipsize instead of clipping
       the wrapped second line mid-glyph. */
    .src-sleep-event--compact .src-sleep-time[b-nrmozqbbg5] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.src-sleep-name[b-nrmozqbbg5] {
    font-size: 20px;
    font-weight: 700;
    color: var(--bs-body-color);
}

/* Matches the participant timeline: only the star is warning-yellow, the
   number stays body-colored so it reads on the tinted block. */
.src-sleep-quality[b-nrmozqbbg5] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.src-sleep-quality svg[b-nrmozqbbg5] {
    align-self: center;
    width: 16px;
    height: 16px;
    color: var(--bs-warning);
}

.src-sleep-time[b-nrmozqbbg5] {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.src-sleep-on-track[b-nrmozqbbg5] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border-radius: 8px;
    background: var(--bs-body-bg);
    color: #FF8400;
    font-size: 10px;
    font-weight: 500;
    width: fit-content;
}

.src-sleep-on-track-icon[b-nrmozqbbg5] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: color-mix(in srgb, #FF8400 10%, transparent);
    border: 1px solid #FF8400;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.src-sleep-view-details[b-nrmozqbbg5] {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 14px;
    color: var(--bs-body-color);
    text-decoration: underline;
    z-index: 2;
}

.src-sleep-view-details:hover[b-nrmozqbbg5] {
    opacity: 0.6;
}

/* Events split across a diary boundary: flatten the corners on the cut edge.
   --continued-down is the start block in the original column (extends past
   bottom into the next diary); --continued-up is the carryover tail in the
   next column (continues from above). */
.src-sleep-event.src-sleep-event--continued-down[b-nrmozqbbg5] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.src-sleep-event.src-sleep-event--continued-up[b-nrmozqbbg5] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* /Views/Participants/Index.cshtml.rz.scp.css */
.participants-page[b-iw5g710sms] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Header */
.participants-header[b-iw5g710sms] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.participants-header-right[b-iw5g710sms] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.participants-header[b-iw5g710sms]  .admin-export-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Metric Cards */
.participants-metrics[b-iw5g710sms] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.participants-metric-card[b-iw5g710sms] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card-sm);
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.participants-metric-top[b-iw5g710sms] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.participants-metric-info[b-iw5g710sms] {
    display: flex;
    flex-direction: column;
}

.participants-metric-label[b-iw5g710sms] {
    font-size: 26px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.participants-metric-value[b-iw5g710sms] {
    font-size: 26px;
    font-weight: 400;
}

.participants-metric-icon[b-iw5g710sms] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.participants-metric-icon--pink[b-iw5g710sms] { background: #F549AB1A; }
.participants-metric-icon--green[b-iw5g710sms] { background: #29B2231A; }
.participants-metric-icon--purple[b-iw5g710sms] { background: #69329A1A; }
.participants-metric-icon--check[b-iw5g710sms] { background: #4876C61A; }

/* Badge colors */
.participants-table-card[b-iw5g710sms]  .data-table-badge--high {
    background: #29B2231A;
    color: #29B223;
}

.participants-table-card[b-iw5g710sms]  .data-table-badge--mid {
    background: #F5A6231A;
    color: #F5A623;
}

.participants-table-card[b-iw5g710sms]  .data-table-badge--low {
    background: #F549491A;
    color: #F54949;
}

.participants-table-card[b-iw5g710sms]  .data-table-badge--muted {
    background: #6c757d1A;
    color: #6c757d;
}

/* Table Card */
.participants-table-card[b-iw5g710sms] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    padding: 30px;
}

/* Responsive */
@media (min-width: 768px) {
    .participants-metrics[b-iw5g710sms] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .participants-metrics[b-iw5g710sms] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Views/Participants/Partials/_ParticipantRow.cshtml.rz.scp.css */
.participant-view-details[b-t7vpztodzy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    color: var(--admin-primary);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid var(--admin-primary);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.participant-view-details:hover[b-t7vpztodzy] {
    background: var(--admin-primary);
    color: #fff;
    text-decoration: none;
}
/* /Views/Participants/Partials/_ParticipantsTableHeader.cshtml.rz.scp.css */
.participants-table-controls[b-t10xhnihuz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.participants-search[b-t10xhnihuz] {
    position: relative;
}

.participants-search__input[b-t10xhnihuz] {
    padding-right: 40px;
    min-width: 280px;
}

.participants-search__icon[b-t10xhnihuz] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.participants-add-btn[b-t10xhnihuz] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
/* /Views/Settings/Index.cshtml.rz.scp.css */
.settings-menu-page[b-osv6vjdhe6] {
  display: flex;
  flex: 1;
  min-height: 0;
}

.settings-menu-page[b-osv6vjdhe6]  aside.side-menu {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 20px;
  border-right: none;
}

@media (min-width: 768px) {
  .settings-menu-page[b-osv6vjdhe6] {
    display: none;
  }
}
/* /Views/Settings/Partials/_ReminderPreferences.cshtml.rz.scp.css */
/* Mirrors the admin Notification Settings toggle + indented detail block, in
   the participant colours. Scoped to the partial so it looks the same on the
   Settings page and in onboarding. */
.reminder-preferences[b-sad2tl5xmu] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.reminder-hint[b-sad2tl5xmu] {
    color: var(--bs-secondary-color);
    margin: 0 0 -12px;
}

.reminder-group[b-sad2tl5xmu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reminder-item[b-sad2tl5xmu] {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    margin: 0;
}

.reminder-item-text[b-sad2tl5xmu] {
    font-weight: 500;
}

.reminder-detail[b-sad2tl5xmu] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 8px;
    margin-left: 64px;
}

.reminder-field[b-sad2tl5xmu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reminder-field-label[b-sad2tl5xmu] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.reminder-field-help[b-sad2tl5xmu] {
    color: var(--bs-secondary-color);
    font-size: 13px;
}

/* Toggle switch */
.reminder-toggle[b-sad2tl5xmu] {
    position: relative;
    display: inline-flex;
    width: 48px;
    min-width: 48px;
    height: 26px;
}

.reminder-toggle-input[b-sad2tl5xmu] {
    opacity: 0;
    width: 0;
    height: 0;
}

.reminder-toggle-slider[b-sad2tl5xmu] {
    position: absolute;
    inset: 0;
    background-color: var(--bs-secondary-bg);
    border-radius: 26px;
    transition: background-color 0.2s;
}

.reminder-toggle-slider[b-sad2tl5xmu]::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.reminder-toggle-input:checked + .reminder-toggle-slider[b-sad2tl5xmu] {
    background-color: var(--bs-primary);
}

.reminder-toggle-input:checked + .reminder-toggle-slider[b-sad2tl5xmu]::before {
    transform: translateX(22px);
}

.reminder-toggle-input:disabled + .reminder-toggle-slider[b-sad2tl5xmu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.reminder-toggle-input:focus-visible + .reminder-toggle-slider[b-sad2tl5xmu] {
    outline: 2px solid color-mix(in srgb, var(--bs-primary) 40%, transparent);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .reminder-detail[b-sad2tl5xmu] {
        max-width: 480px;
    }

    .reminder-field-label[b-sad2tl5xmu] {
        font-size: 18px;
    }
}
/* /Views/Settings/Tutorial.cshtml.rz.scp.css */
/* /Views/Settings/_NotificationsContent.cshtml.rz.scp.css */
/* Laid out like the admin's Notification Settings: the reminder toggles
   (partial with its own styles), then where they go, then the actions. */
.participant-notifications-page[b-gfcx86g5wc] {
    display: flex;
    flex-direction: column;
}

.participant-notifications-channels[b-gfcx86g5wc] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 36px;
    max-width: 480px;
}

.participant-notifications-group-title[b-gfcx86g5wc] {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.participant-notifications-field[b-gfcx86g5wc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.participant-notifications-field-label[b-gfcx86g5wc] {
    font-weight: 500;
    margin: 0;
}

.participant-notifications-field-help[b-gfcx86g5wc] {
    color: var(--bs-secondary-color);
    font-size: 13px;
}

.participant-notifications-email-row[b-gfcx86g5wc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.participant-notifications-email-row .form-control[b-gfcx86g5wc] {
    flex: 1;
    min-width: 0;
}

.participant-notifications-email-static[b-gfcx86g5wc] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.participant-notifications-status[b-gfcx86g5wc] {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

.participant-notifications-status.is-confirmed[b-gfcx86g5wc] {
    color: var(--bs-success);
    background-color: color-mix(in srgb, var(--bs-success) 12%, transparent);
}

.participant-notifications-status.is-pending[b-gfcx86g5wc] {
    color: var(--bs-warning-text-emphasis);
    background-color: color-mix(in srgb, var(--bs-warning) 18%, transparent);
}

/* Browser notifications: a toggle that acts on its own, plus the devices */
.participant-notifications-push[b-gfcx86g5wc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.participant-notifications-toggle-row[b-gfcx86g5wc] {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    margin: 0;
}

.participant-notifications-toggle-text[b-gfcx86g5wc] {
    font-weight: 500;
}

.participant-notifications-push-help[b-gfcx86g5wc] {
    margin-left: 64px;
}

.participant-notifications-toggle[b-gfcx86g5wc] {
    position: relative;
    display: inline-flex;
    width: 48px;
    min-width: 48px;
    height: 26px;
}

.participant-notifications-toggle-input[b-gfcx86g5wc] {
    opacity: 0;
    width: 0;
    height: 0;
}

.participant-notifications-toggle-slider[b-gfcx86g5wc] {
    position: absolute;
    inset: 0;
    background-color: var(--bs-secondary-bg);
    border-radius: 26px;
    transition: background-color 0.2s;
}

.participant-notifications-toggle-slider[b-gfcx86g5wc]::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.participant-notifications-toggle-input:checked + .participant-notifications-toggle-slider[b-gfcx86g5wc] {
    background-color: var(--bs-primary);
}

.participant-notifications-toggle-input:checked + .participant-notifications-toggle-slider[b-gfcx86g5wc]::before {
    transform: translateX(22px);
}

.participant-notifications-toggle-input:disabled + .participant-notifications-toggle-slider[b-gfcx86g5wc] {
    opacity: 0.5;
    cursor: not-allowed;
}

.participant-notifications-toggle-input:focus-visible + .participant-notifications-toggle-slider[b-gfcx86g5wc] {
    outline: 2px solid color-mix(in srgb, var(--bs-primary) 40%, transparent);
    outline-offset: 2px;
}

.participant-notifications-devices-list[b-gfcx86g5wc] {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 64px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.participant-notifications-device[b-gfcx86g5wc] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background-color: var(--bs-body-bg);
}

.participant-notifications-device-label[b-gfcx86g5wc] {
    font-weight: 500;
}

.participant-notifications-device-meta[b-gfcx86g5wc] {
    flex: 1;
    color: var(--bs-secondary-color);
    font-size: 13px;
}

/* The action bar is the shared .settings-actions from the settings layout. */
.participant-notifications-channels[b-gfcx86g5wc] {
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .participant-notifications-group-title[b-gfcx86g5wc] {
        font-size: 18px;
    }
}
/* /Views/Shared/Components/DateNavigationComponent/Default.cshtml.rz.scp.css */
/* Styles moved to wwwroot/css/site.css for global availability */
/* /Views/Shared/Components/SideMenuComponent/Default.cshtml.rz.scp.css */
/* Side Menu Component */
.side-menu[b-pmt37means] {
    display: flex;
    flex-direction: column;
    width: 400px;
    flex-shrink: 0;
    align-self: stretch;
    background-color: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
    padding: 30px 25px 30px 40px;
}

.side-menu-header[b-pmt37means] {
    margin-bottom: 30px;
}

/* The sidebar's "Settings" is a page title, so it carries the page-title
   weight whether it renders as a plain heading or inside the back button. */
.side-menu-title[b-pmt37means] {
    font-size: var(--type-page-title);
    font-weight: 700;
    margin: 0;
}

.side-menu-header[b-pmt37means]  .back-button-title {
    font-weight: 700;
}

/* The collapse toggle only exists beside a settings form (tablet+); on phones
   the menu is its own full-width page and has nothing to collapse against. */
.side-menu-toggle[b-pmt37means] {
    display: none;
}

.side-menu-nav[b-pmt37means] {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* On short viewports the menu list scrolls by itself — the page shell is
       viewport-locked (nothing else scrolls), so without this the lower items
       are simply unreachable. Header and footer stay pinned. */
    min-height: 0;
    gap: 4px;
    overflow-y: auto;
    /* Never sideways: while the menu animates open the labels are already
       back at full width, and overflow-y: auto alone would show a horizontal
       scrollbar for that moment. */
    overflow-x: hidden;
}

.side-menu-item[b-pmt37means] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border-radius: 20px;
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: 16px;
    border: 1px solid transparent;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.side-menu-item[b-pmt37means]::after {
    content: "";
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--bs-secondary-color);
    border-bottom: 2px solid var(--bs-secondary-color);
    transform: rotate(-45deg);
    flex-shrink: 0;
}

/* Hover is a neutral version of the active pill: a visible fill and ring,
   not the near-white tint that hardly registered on the white sidebar. */
.side-menu-item:hover[b-pmt37means] {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.side-menu-item.active[b-pmt37means] {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.side-menu-icon[b-pmt37means] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.side-menu-icon[b-pmt37means]  span {
    display: inline-block;
    width: 24px;
    height: 24px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.side-menu-label[b-pmt37means] {
    font-weight: 500;
}

.side-menu-footer[b-pmt37means] {
    padding-top: 20px;
    margin-top: auto;
}

/* Tablet+: the menu is a navigation rail beside the settings form, so it
   stays narrow — the form (work schedule, medications) is what needs the
   width. The items read a step above the body text (never below it), and
   the width is set so the longest label ("Participants Settings") stays on
   one line at that size. */
@media (min-width: 768px) {
    .side-menu[b-pmt37means] {
        width: 280px;
        padding: 20px 12px 30px 12px;
        transition: width 0.2s ease, padding 0.2s ease;
        /* Clip the title and labels while the width animates. */
        overflow: hidden;
    }

    .side-menu-header[b-pmt37means] {
        margin-bottom: 24px;
        padding-left: 4px;
    }

    /* Pinned under the list (the list flexes and scrolls by itself) at the
       menu's right edge, so it travels with the edge it moves instead of
       hopping between the icon column and the rail's centre. */
    .side-menu-toggle[b-pmt37means] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        align-self: flex-end;
        margin-top: 16px;
        /* Right inset chosen so the button sits centred in the 56px inner
           width of the collapsed rail (and keeps the same inset when open). */
        margin-right: 12px;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 8px;
        border: 0;
        background: transparent;
        color: var(--bs-body-color);
        cursor: pointer;
        transition: background-color 0.15s, color 0.15s;
    }

    .side-menu-toggle:hover[b-pmt37means] {
        background-color: var(--bs-tertiary-bg);
    }

    .side-menu-toggle:focus-visible[b-pmt37means] {
        outline: 2px solid var(--bs-primary);
        outline-offset: 2px;
    }

    .side-menu-toggle-arrow[b-pmt37means] {
        transform-origin: 14.5px 12px;
        transition: transform 0.2s ease;
    }

    .side-menu-item[b-pmt37means] {
        font-size: 1rem;
        padding: 12px 10px;
        gap: 10px;
        border-radius: 16px;
        /* The icon never re-centres itself: its offset is animated together
           with the menu width, so on collapse it glides left with the edge
           instead of jumping to the middle of the still-wide item first. */
        transition: background-color 0.15s, color 0.15s, border-color 0.15s, padding 0.2s ease;
    }

    .side-menu-item[b-pmt37means]::after {
        display: none;
    }

    .side-menu-icon[b-pmt37means] {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .side-menu-icon[b-pmt37means]  span {
        width: 24px;
        height: 24px;
    }

    .side-menu-label[b-pmt37means] {
        white-space: nowrap;
    }

    /* Collapsed: an icon rail just wide enough for the round back button.
       Labels go, the item names live in the tooltip, the toggle centres
       itself and its chevrons point the other way. */
    .side-menu.is-collapsed[b-pmt37means] {
        width: 72px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .side-menu.is-collapsed .side-menu-header[b-pmt37means] {
        padding-left: 0;
    }

    .side-menu.is-collapsed[b-pmt37means]  .back-button-text,
    .side-menu.is-collapsed .side-menu-title[b-pmt37means],
    .side-menu.is-collapsed .side-menu-label[b-pmt37means] {
        display: none;
    }

    .side-menu.is-collapsed .side-menu-toggle-arrow[b-pmt37means] {
        transform: rotate(180deg);
    }

    /* Left inset keeps the icon exactly where it was when the menu was open
       (8 + 14 = 12 + 10), which is also within 2px of the rail's centre. */
    .side-menu.is-collapsed .side-menu-item[b-pmt37means] {
        padding-left: 14px;
        padding-right: 0;
    }

    .side-menu.is-collapsed .side-menu-footer[b-pmt37means] {
        display: none;
    }
}

/* Desktop */
@media (min-width: 1280px) {
    .side-menu[b-pmt37means] {
        width: 340px;
        padding: 30px 16px 30px 24px;
    }

    .side-menu-header[b-pmt37means] {
        padding-left: 8px;
    }

    .side-menu-item[b-pmt37means] {
        font-size: 1.1rem;
        padding: 14px 16px;
        gap: 12px;
    }

    .side-menu-icon[b-pmt37means] {
        width: 28px;
        height: 28px;
    }

    .side-menu-icon[b-pmt37means]  span {
        width: 28px;
        height: 28px;
    }

    .side-menu.is-collapsed .side-menu-item[b-pmt37means] {
        padding-left: 14px;
    }
}
/* /Views/Shared/Components/TimelineActionsComponent/Default.cshtml.rz.scp.css */
/* === Timeline Actions === */

.timeline-actions-wrapper[b-zidvojrh50] {
    display: flex;
    flex-shrink: 0;
    position: relative;
    z-index: 1000;
    width: 100%;
}

.timeline-actions-wrapper[b-zidvojrh50]::before,
.timeline-actions-wrapper[b-zidvojrh50]::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 16px;
    width: 40px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s;
}

.timeline-actions-wrapper[b-zidvojrh50]::before {
    left: 0;
    background: linear-gradient(to left, transparent, var(--bs-body-bg));
}

.timeline-actions-wrapper[b-zidvojrh50]::after {
    right: 0;
    background: linear-gradient(to right, transparent, var(--bs-body-bg));
}

.timeline-actions-wrapper.can-scroll-left[b-zidvojrh50]::before {
    opacity: 1;
}

.timeline-actions-wrapper.can-scroll-right[b-zidvojrh50]::after {
    opacity: 1;
}

.timeline-actions[b-zidvojrh50] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 8px var(--timeline-inset) 16px;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.timeline-actions[b-zidvojrh50]::-webkit-scrollbar {
    display: none;
}

.timeline-action-btn[b-zidvojrh50] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.25s ease-out;
}

.timeline-action-btn:hover[b-zidvojrh50] {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.timeline-action-btn.dragging[b-zidvojrh50] {
    opacity: 0.5;
    box-shadow: none !important;
}

.timeline-action-icon[b-zidvojrh50] {
    width: 25px;
    height: 25px;
}

.timeline-action-add[b-zidvojrh50] {
    background: #6262621A !important;
    border: 1px dashed #626262 !important;
    color: #626262;
    text-decoration: none;
}

.timeline-action-add:hover[b-zidvojrh50] {
    border-color: var(--bs-primary) !important;
    background: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary);
}

@media (min-width: 768px) {
    .timeline-action-btn[b-zidvojrh50] {
        width: 56px;
        height: 56px;
    }

    .timeline-actions-wrapper[b-zidvojrh50] {
        width: auto;
    }

    /* Vertical fade indicators for the desktop column — the mobile ::before/::after
       gradients rotated 90°: top/bottom edges instead of left/right. */
    .timeline-actions-wrapper[b-zidvojrh50]::before,
    .timeline-actions-wrapper[b-zidvojrh50]::after {
        top: auto;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 40px;
    }

    .timeline-actions-wrapper[b-zidvojrh50]::before {
        top: 0;
        background: linear-gradient(to top, transparent, var(--bs-body-bg));
    }

    .timeline-actions-wrapper[b-zidvojrh50]::after {
        bottom: 0;
        background: linear-gradient(to bottom, transparent, var(--bs-body-bg));
    }

    .timeline-actions-wrapper.can-scroll-up[b-zidvojrh50]::before {
        opacity: 1;
    }

    .timeline-actions-wrapper.can-scroll-down[b-zidvojrh50]::after {
        opacity: 1;
    }

    /* A single non-wrapping column that scrolls vertically when the activity set
       is taller than the viewport. `wrap` is off deliberately: a wrapped column
       flex container does not grow its width for the extra columns in WebKit
       (only its intrinsic single-column width is used), so on Safari the second
       column painted past the card and off the screen edge — and even where it
       sized correctly, a second column broke the --timeline-actions-width
       alignment contract with .timeline-options. */
    .timeline-actions[b-zidvojrh50] {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 6px 30px 6px 16px;
        overflow-x: hidden;
        overflow-y: auto;
    }
}
/* /Views/Shared/Components/TopMenuComponent/Default.cshtml.rz.scp.css */
/* Top Menu Component - Mobile First */
.top-menu[b-z75qmign78] {
    position: relative;
    z-index: 1030;
    height: 68px;
    padding: 10px 20px;
}

[b-z75qmign78] .site-logo {
    height: 40px;
    width: auto;
}

.top-menu-right-group[b-z75qmign78] {
    gap: 12px;
}

.top-menu .user-avatar img[b-z75qmign78],
.top-menu .avatar-placeholder[b-z75qmign78] {
    width: 43px;
    height: 43px;
}

.notification-bell[b-z75qmign78] {
    width: 30px;
    height: 30px;
}

.top-menu .btn-link[b-z75qmign78] {
    color: inherit;
    text-decoration: none;
}

.top-menu .btn-link:hover[b-z75qmign78] {
    color: inherit;
}

.top-menu .avatar-placeholder[b-z75qmign78] {
    background-color: var(--bs-primary);
    color: var(--text-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.top-menu .user-info[b-z75qmign78] {
    display: none;
    margin-left: 18px;
}

.top-menu .user-name[b-z75qmign78] {
    font-weight: 500;
    color: var(--bs-body-color);
}

.top-menu .user-name-short[b-z75qmign78] {
    display: none;
}

.top-menu .user-name-full[b-z75qmign78] {
    display: none;
}

.top-menu .user-role[b-z75qmign78] {
    font-size: 14px;
}

.top-menu .dropdown-arrow[b-z75qmign78] {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin-left: 20px;
    color: var(--bs-secondary-color);
    transition: transform 0.2s;
}

.top-menu [aria-expanded="true"] .dropdown-arrow[b-z75qmign78] {
    transform: rotate(180deg);
}

.top-menu .dropdown-menu[b-z75qmign78] {
    padding: 0;
    font-size: 14px;
    min-width: 190px;
    margin-top: 10px !important;
    overflow: hidden;
}

.top-menu .dropdown-menu[b-z75qmign78]  .dropdown-item {
    padding: 21px 13px;
}

.top-menu .dropdown-menu li:first-child[b-z75qmign78]  .dropdown-item {
    border-radius: 10px 10px 0 0;
}

.top-menu .dropdown-menu li:last-child[b-z75qmign78]  .dropdown-item {
    border-radius: 0 0 10px 10px;
}

.top-menu .dropdown-divider[b-z75qmign78] {
    margin: 0;
}

.notification-bell[b-z75qmign78] {
    color: var(--bs-primary);
}

.notification-badge[b-z75qmign78] {
    position: absolute;
    top: 0;
    right: 0;
    width: 13px;
    height: 13px;
    background-color: var(--bs-danger);
    border-radius: 50%;
    border: 2px solid var(--bs-body-bg);
}

/* Notifications dropdown */
.notifications-dropdown[b-z75qmign78] {
    position: fixed !important;
    top: 68px !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    padding: 0;
    overflow: hidden;
    transform: none !important;
}

.notifications-header[b-z75qmign78] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bs-border-color);
}

.notifications-title[b-z75qmign78] {
    font-weight: 600;
    font-size: 16px;
}

.mark-all-read[b-z75qmign78],
.view-all[b-z75qmign78] {
    font-size: 14px;
    color: var(--bs-primary);
    text-decoration: none;
}

.mark-all-read:hover[b-z75qmign78],
.view-all:hover[b-z75qmign78] {
    text-decoration: underline;
}

.notifications-list[b-z75qmign78] {
    max-height: 320px;
    overflow-y: auto;
}

.notification-item[b-z75qmign78] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.15s;
}

.notification-item:last-child[b-z75qmign78] {
    border-bottom: none;
}

.notification-item:hover[b-z75qmign78] {
    background-color: var(--bs-tertiary-bg);
}

.notification-item.unread[b-z75qmign78] {
    background-color: rgba(var(--bs-primary-rgb), 0.04);
}

.notification-indicator[b-z75qmign78] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: transparent;
    margin-top: 6px;
    flex-shrink: 0;
}

.notification-indicator.active[b-z75qmign78] {
    background-color: var(--bs-primary);
}

.notification-content[b-z75qmign78] {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.notification-content:hover[b-z75qmign78] {
    color: inherit;
}

.notification-actions[b-z75qmign78] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}

.notification-action-btn[b-z75qmign78] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    padding: 0;
}

.notification-action-btn:hover[b-z75qmign78] {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.notification-action-btn[data-action="delete"]:hover[b-z75qmign78] {
    background-color: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
}

.notification-item .notification-title[b-z75qmign78] {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
}

.notification-item .notification-message[b-z75qmign78],
.notification-item .notification-time[b-z75qmign78] {
    color: var(--bs-secondary-color);
}

.notification-item .notification-message[b-z75qmign78] {
    font-size: 13px;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-item .notification-time[b-z75qmign78] {
    font-size: 12px;
}

[b-z75qmign78] .notifications-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.notifications-footer[b-z75qmign78] {
    padding: 12px 20px;
    border-top: 1px solid var(--bs-border-color);
    text-align: center;
}

.view-all[b-z75qmign78] {
    font-weight: 500;
}

/* The smallest phones (iPhone SE/mini, 360px Androids): a tighter 56px bar
   so the diary keeps more of a short screen. Larger phones keep the 68px
   bar above. */
@media (max-width: 399.98px) {
    .top-menu[b-z75qmign78] {
        height: 56px;
        padding: 8px 16px;
    }

    [b-z75qmign78] .site-logo {
        height: 32px;
    }

    .top-menu .user-avatar img[b-z75qmign78],
    .top-menu .avatar-placeholder[b-z75qmign78] {
        width: 36px;
        height: 36px;
    }

    .notification-bell[b-z75qmign78] {
        width: 26px;
        height: 26px;
    }

    .notifications-dropdown[b-z75qmign78] {
        top: 56px !important;
    }
}

/* Tablet styles */
@media (min-width: 768px) {

    .top-menu[b-z75qmign78] {
        height: 98px;
    }

    .top-menu-right-group[b-z75qmign78] {
        gap: 30px;
    }

    .top-menu .user-info[b-z75qmign78] {
        display: block;
    }

    .top-menu .user-name-short[b-z75qmign78] {
        display: block;
    }

    .top-menu .dropdown-arrow[b-z75qmign78] {
        display: flex;
    }

    .top-menu .dropdown-menu[b-z75qmign78] {
        font-size: 16px;
    }

    .notifications-dropdown[b-z75qmign78] {
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        width: 360px !important;
        margin-top: 10px !important;
    }
}

/* Desktop styles */
@media (min-width: 1024px) {
    .top-menu[b-z75qmign78] {
        padding: 10px 40px;
    }

    [b-z75qmign78] .site-logo {
        height: 63px;
    }

    .top-menu .user-name-short[b-z75qmign78] {
        display: none;
    }

    .top-menu .user-name-full[b-z75qmign78] {
        display: block;
    }
}
/* /Views/Shared/Partials/DataTable/_DataTable.cshtml.rz.scp.css */
.data-table__header[b-onsopq7jyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 62px;
}

.data-table__title[b-onsopq7jyq] {
    font-size: 30px;
    font-weight: 700;
    margin: 0;
}

.data-table__header-controls[b-onsopq7jyq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.data-table__wrapper[b-onsopq7jyq] {
    position: relative;
}

.data-table__loading[b-onsopq7jyq] {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 2;
    align-items: center;
    justify-content: center;
}

.data-table__loading--active[b-onsopq7jyq] {
    display: flex;
}

.data-table__scroll[b-onsopq7jyq] {
    overflow-x: auto;
}

.data-table__table[b-onsopq7jyq] {
    width: 100%;
    border-collapse: collapse;
}

.data-table__table[b-onsopq7jyq]  th {
    font-size: 26px;
    font-weight: 400;
    padding: 0 16px 42px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--bs-border-color);
}

.data-table__table[b-onsopq7jyq]  td {
    font-size: 20px;
    padding: 20px 20px 20px 0;
    height: 86px;
    border-bottom: 1px solid var(--bs-border-color);
}

.data-table__table[b-onsopq7jyq]  tr:last-child td {
    border-bottom: none;
}

.data-table__sortable[b-onsopq7jyq] {
    cursor: pointer;
    user-select: none;
}

.data-table__sortable:hover[b-onsopq7jyq] {
    background: var(--bs-tertiary-bg);
}

.data-table__sort-icon[b-onsopq7jyq] {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.3;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12l7-7 7 7'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.data-table__sortable--asc .data-table__sort-icon[b-onsopq7jyq] {
    opacity: 1;
    transform: rotate(0deg);
}

.data-table__sortable--desc .data-table__sort-icon[b-onsopq7jyq] {
    opacity: 1;
    transform: rotate(180deg);
}

.data-table__empty-row[b-onsopq7jyq]  td {
    text-align: center;
    color: var(--bs-secondary-color);
    padding: 32px 16px;
}

.data-table__pagination[b-onsopq7jyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 0;
    border-top: 1px solid var(--bs-border-color);
    margin-top: 4px;
}

.data-table__page-nav[b-onsopq7jyq] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.data-table__page-nav[b-onsopq7jyq]  .data-table__page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 50px;
    padding: 4px 8px;
    font-size: inherit;
    font-weight: 500;
    color: var(--bs-body-color);
    background: transparent;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.data-table__page-nav[b-onsopq7jyq]  .data-table__page-btn:hover:not(:disabled):not(.data-table__page-btn--active) {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-secondary-color);
}

.data-table__page-nav[b-onsopq7jyq]  .data-table__page-btn--active {
    background: var(--admin-primary);
    border-color: var(--admin-primary);
    color: #fff;
    cursor: default;
}

.data-table__page-nav[b-onsopq7jyq]  .data-table__page-btn--nav {
    min-width: 50px;
    height: 50px;
    padding: 4px;
}

.data-table__page-nav[b-onsopq7jyq]  .data-table__page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.data-table__page-nav[b-onsopq7jyq]  .data-table__page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 50px;
    color: var(--bs-secondary-color);
    user-select: none;
}

.data-table__page-nav--hidden[b-onsopq7jyq] {
    display: none;
}

.data-table__page-info[b-onsopq7jyq] {
    font-size: 1rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.data-table__page-size[b-onsopq7jyq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: inherit;
    color: var(--bs-secondary-color);
}

.data-table__page-size[b-onsopq7jyq]  .custom-select-dropdown {
    min-width: 70px;
}

.data-table__error[b-onsopq7jyq] {
    color: var(--bs-danger, #dc3545);
}

/* Badges (layout only — colors defined per-page) */
.data-table__table[b-onsopq7jyq]  .data-table-badge {
    display: inline-block;
    padding: 8px;
    border-radius: 10px;
    text-align: center;
}

.data-table__table[b-onsopq7jyq]  .data-table-badge--w-sm {
    width: 80px;
}

.data-table__table[b-onsopq7jyq]  .data-table-badge--w-md {
    width: 130px;
}

.data-table__table[b-onsopq7jyq]  .data-table-badge--w-lg {
    width: 200px;
}
/* /Views/Shared/Partials/DatePicker/_DatePicker.cshtml.rz.scp.css */
.date-picker[b-1ksoeo5sa8] {
    position: fixed;
    padding: 20px;
    background: var(--bs-body-bg);
    border-radius: var(--dropdown-radius);
    border: var(--dropdown-border);
    box-shadow: var(--dropdown-shadow);
    z-index: 1035;
    min-width: 300px;
}

.date-picker-header[b-1ksoeo5sa8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.date-picker-month-year[b-1ksoeo5sa8] {
    font-size: 18px;
    font-weight: 500;
    color: var(--bs-body-color);
}

.date-picker-nav[b-1ksoeo5sa8] {
    display: flex;
    gap: 8px;
}

.date-picker-nav-btn[b-1ksoeo5sa8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--bs-body-color);
    cursor: pointer;
    border-radius: var(--bs-border-radius-pill);
    transition: background-color 0.15s;
}

.date-picker-nav-btn:hover[b-1ksoeo5sa8] {
    background-color: var(--bs-secondary-bg);
}

.date-picker-weekdays[b-1ksoeo5sa8] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

[b-1ksoeo5sa8] .date-picker-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--bs-secondary-color);
    padding: 8px 0;
}

[b-1ksoeo5sa8] .date-picker-weekday.weekend {
    color: var(--weekend-color);
}

.date-picker-days[b-1ksoeo5sa8] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 0;
    row-gap: 4px;
}

[b-1ksoeo5sa8] .date-picker-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 32px;
    margin: 0 auto;
    border: none;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 14px;
    cursor: pointer;
    border-radius: var(--bs-border-radius-pill);
    transition: background-color 0.15s, color 0.15s;
}

/* Week and range previews are a strip of flat-sided cells. Their corners can't
   animate with the fade, so on leave the strip would snap into pills and then
   fade — in those modes the background switches instantly instead. */
.date-picker[data-mode="week"][b-1ksoeo5sa8]  .date-picker-day,
.date-picker[data-mode="range"][b-1ksoeo5sa8]  .date-picker-day {
    transition: color 0.15s;
}

[b-1ksoeo5sa8] .date-picker-day:hover {
    background-color: var(--bs-secondary-bg);
}

[b-1ksoeo5sa8] .date-picker-day.other-month {
    opacity: 0.5;
}

[b-1ksoeo5sa8] .date-picker-day.disabled {
    color: var(--bs-secondary-color);
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

[b-1ksoeo5sa8] .date-picker-day.disabled:hover {
    background: transparent;
}

/* Range preview stopped by a crossed-out date: the hovered cell refuses. */
[b-1ksoeo5sa8] .date-picker-day.range-blocked,
[b-1ksoeo5sa8] .date-picker-day.range-blocked:hover {
    background: transparent;
    cursor: not-allowed;
}

/* Rejected second click: the grid shakes and the picker explains. */
.date-picker-days.shake[b-1ksoeo5sa8] {
    animation: date-picker-shake-b-1ksoeo5sa8 0.35s ease-in-out;
}

@keyframes date-picker-shake-b-1ksoeo5sa8 {
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .date-picker-days.shake[b-1ksoeo5sa8] {
        animation: none;
    }
}

.date-picker-message[b-1ksoeo5sa8] {
    /* Wraps inside the calendar's width instead of widening the popup */
    width: 0;
    min-width: 100%;
    margin-top: 10px;
    font-size: 12px; /* a step under the 14px day numbers */
    line-height: 1.3;
    color: var(--bs-danger);
}

[b-1ksoeo5sa8] .date-picker-day.sunday,
[b-1ksoeo5sa8] .date-picker-day.saturday {
    color: var(--weekend-color);
}

[b-1ksoeo5sa8] .date-picker-day.selected {
    background-color: var(--bs-primary);
    color: var(--text-on-primary);
    font-weight: 700;
    border-radius: var(--bs-border-radius-pill);
}

[b-1ksoeo5sa8] .date-picker-day.selected:hover {
    background-color: var(--bs-primary);
}

[b-1ksoeo5sa8] .date-picker-day.today {
    font-weight: 600;
}

/* In week mode, days should not have rounded corners by default */
.date-picker[data-mode="week"][b-1ksoeo5sa8]  .date-picker-day {
    border-radius: 0;
}

.date-picker[data-mode="week"][b-1ksoeo5sa8]  .date-picker-day.row-start {
    border-radius: 100px 0 0 100px;
}

.date-picker[data-mode="week"][b-1ksoeo5sa8]  .date-picker-day.row-end {
    border-radius: 0 100px 100px 0;
}

/* Hover styles for week and range modes */
[b-1ksoeo5sa8] .date-picker-day.week-hover,
[b-1ksoeo5sa8] .date-picker-day.range-hover {
    background-color: var(--bs-secondary-bg);
    border-radius: 0;
}

[b-1ksoeo5sa8] .date-picker-day.week-hover.row-start,
[b-1ksoeo5sa8] .date-picker-day.range-hover.range-hover-start {
    border-radius: 100px 0 0 100px;
}

[b-1ksoeo5sa8] .date-picker-day.week-hover.row-end,
[b-1ksoeo5sa8] .date-picker-day.range-hover.range-hover-end {
    border-radius: 0 100px 100px 0;
}

/* Selected middle days for week and range modes */
[b-1ksoeo5sa8] .date-picker-day.week-selected,
[b-1ksoeo5sa8] .date-picker-day.range-middle {
    background-color: rgba(var(--bs-primary-rgb), 0.16);
    border-radius: 0;
}

/* Selected edge days for week and range modes */
[b-1ksoeo5sa8] .date-picker-day.week-selected.week-start,
[b-1ksoeo5sa8] .date-picker-day.week-selected.week-end,
[b-1ksoeo5sa8] .date-picker-day.range-edge {
    background-color: var(--bs-primary);
    color: var(--text-on-primary);
    font-weight: 700;
}

[b-1ksoeo5sa8] .date-picker-day.week-selected.week-start,
[b-1ksoeo5sa8] .date-picker-day.range-edge.range-start {
    border-radius: 100px 0 0 100px;
}

[b-1ksoeo5sa8] .date-picker-day.week-selected.week-end,
[b-1ksoeo5sa8] .date-picker-day.range-edge.range-end {
    border-radius: 0 100px 100px 0;
}

/* When range start and end are the same day */
[b-1ksoeo5sa8] .date-picker-day.range-edge.range-start.range-end {
    border-radius: var(--bs-border-radius-pill);
}

[b-1ksoeo5sa8] .date-picker-day.week-selected.week-start:hover,
[b-1ksoeo5sa8] .date-picker-day.week-selected.week-end:hover,
[b-1ksoeo5sa8] .date-picker-day.range-edge:hover {
    background-color: var(--bs-primary);
}

@media (max-width: 374px) {
    .date-picker[b-1ksoeo5sa8] {
        min-width: auto;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        padding: 12px;
    }

    [b-1ksoeo5sa8] .date-picker-day {
        width: 36px;
        height: 28px;
        font-size: 13px;
    }

    .date-picker-month-year[b-1ksoeo5sa8] {
        font-size: 16px;
    }
}
/* /Views/Shared/Partials/DatePicker/_DatePickerInput.cshtml.rz.scp.css */
.date-picker-input-wrapper[b-o00hsrx2ou] {
    position: relative;
    width: 100%;
}

.date-picker-toggle[b-o00hsrx2ou] {
    padding-right: 40px !important;
    background-image: none;
}

.date-picker-toggle .placeholder-text[b-o00hsrx2ou] {
    color: var(--bs-secondary-color);
}

.date-picker-hint[b-o00hsrx2ou] {
    display: block;
    margin-top: 6px;
    font-size: var(--type-hint);
    color: var(--bs-secondary-color);
}

.date-picker-icon[b-o00hsrx2ou] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
/* /Views/Shared/Partials/Navigation/_BackButton.cshtml.rz.scp.css */
.back-button-header[b-vu8lootga5] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.back-button[b-vu8lootga5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}

.back-button:hover[b-vu8lootga5] {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-secondary-border-subtle);
    color: var(--bs-body-color);
}

.back-button svg[b-vu8lootga5] {
    width: 16px;
    height: 16px;
}

.back-button-header--title-only[b-vu8lootga5] {
    align-items: center;
}

.back-button-text[b-vu8lootga5] {
    display: flex;
    flex-direction: column;
}

.back-button-title[b-vu8lootga5] {
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    line-height: 1;
}

.back-button-subtitle[b-vu8lootga5] {
    font-size: 12px;
    color: var(--bs-secondary-color);
    margin: 4px 0 0 0;
}

@media (min-width: 768px) {
    .back-button-header[b-vu8lootga5] {
        gap: 20px;
    }

    .back-button[b-vu8lootga5] {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }

    .back-button svg[b-vu8lootga5] {
        width: 20px;
        height: 20px;
    }

    .back-button-title[b-vu8lootga5] {
        font-size: 30px;
    }

    .back-button-subtitle[b-vu8lootga5] {
        font-size: 20px;
        margin: 15px 0 0 0;
    }
}
/* /Views/Shared/Partials/Navigation/_ThemeToggle.cshtml.rz.scp.css */
/* Light/dark switch: two labels around a 64x32 slider. */
.theme-toggle[b-rsti1ragqh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.theme-label[b-rsti1ragqh] {
    font-size: 16px;
    color: var(--bs-secondary-color);
}

.theme-switch[b-rsti1ragqh] {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 32px;
}

.theme-switch input[b-rsti1ragqh] {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-slider[b-rsti1ragqh] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bs-secondary-bg);
    border-radius: 32px;
    transition: background-color 0.3s;
}

.theme-slider[b-rsti1ragqh]::before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 4px;
    background-color: var(--bs-body-bg);
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-switch input:checked + .theme-slider[b-rsti1ragqh] {
    background-color: var(--bs-primary);
}

.theme-switch input:checked + .theme-slider[b-rsti1ragqh]::before {
    transform: translateX(32px);
}

@media (min-width: 1280px) {
    .theme-label[b-rsti1ragqh] {
        font-size: 20px;
    }
}
/* /Views/Shared/Partials/Timeline/_TimelineActivityBlock.cshtml.rz.scp.css */
/* === Timeline Activity / Medication block (entry with an ending time) === */

.timeline-activity-block[b-ye1kftsa6o] {
    position: absolute;
    left: var(--timeline-block-inset);
    /* --lane / --stack: cascade step and resting z set per overlap cluster by
       timeline-long-overlap.js; a lone block is full width at z 10. */
    right: calc(var(--timeline-block-inset) + var(--lane, 0) * var(--cascade-step, 16px));
    height: var(--event-height);
    min-height: var(--hour-height);
    padding: var(--timeline-block-padding);
    border: 1px solid;
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    z-index: var(--stack, 10);
    transition: z-index 0s 0.3s;
}

.timeline-activity-block:hover[b-ye1kftsa6o] {
    z-index: 100;
    transition: z-index 0s 0.3s;
}

.timeline-activity-block.preliminary[b-ye1kftsa6o] {
    border-style: dashed;
}

/* Phone first: one header row — icon, name, time (ellipsized), Details — so a
   one-hour block (the min-height) still shows everything that matters; the
   note lives in the details modal. Tablet+ lets the row wrap and adds the
   note under it. */
.timeline-activity-block-header[b-ye1kftsa6o] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    /* Keep clear of the menu button in the top-right corner. */
    padding-right: 40px;
}

.timeline-activity-block-icon[b-ye1kftsa6o] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.timeline-activity-block-name[b-ye1kftsa6o] {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bs-body-color);
    white-space: nowrap;
}

.timeline-activity-block-time[b-ye1kftsa6o] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Same size as the sleep and exercise cards' Details link (timeline-compact-details). */
.timeline-activity-block-details[b-ye1kftsa6o] {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 16px;
    color: var(--bs-body-color);
    text-decoration: underline;
}

.timeline-activity-block-details:hover[b-ye1kftsa6o] {
    opacity: 0.6;
}

.timeline-activity-block-notes[b-ye1kftsa6o] {
    display: none;
    font-size: 14px;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.timeline-activity-block[b-ye1kftsa6o] >  .timeline-event-menu-wrapper {
    position: absolute;
    top: 12px;
    right: 16px;
}

@media (max-width: 389px) {
    .timeline-activity-block-time[b-ye1kftsa6o] {
        display: none;
    }
}

/* Tall blocks (1h 30m+) on phones: the time range and the note get rows of
   their own under the name. */
@media (max-width: 767px) {
    .timeline-activity-block.show-more .timeline-activity-block-header[b-ye1kftsa6o] {
        flex-wrap: wrap;
    }

    .timeline-activity-block.show-more .timeline-activity-block-time[b-ye1kftsa6o] {
        display: block;
        flex-basis: 100%;
        white-space: normal;
    }

    .timeline-activity-block.show-more .timeline-activity-block-notes[b-ye1kftsa6o] {
        display: -webkit-box;
    }
}

@media (min-width: 768px) {
    .timeline-activity-block-header[b-ye1kftsa6o] {
        flex-wrap: wrap;
    }

    .timeline-activity-block-name[b-ye1kftsa6o] {
        font-size: 20px;
        white-space: normal;
    }

    .timeline-activity-block-time[b-ye1kftsa6o] {
        font-size: 16px;
    }

    .timeline-activity-block-details[b-ye1kftsa6o] {
        font-size: 20px;
    }

    .timeline-activity-block-time[b-ye1kftsa6o] {
        flex: 0 1 auto;
        white-space: normal;
    }

    .timeline-activity-block-notes[b-ye1kftsa6o] {
        display: -webkit-box;
        font-size: 16px;
    }

    .timeline-activity-block[b-ye1kftsa6o] >  .timeline-event-menu-wrapper {
        top: 15px;
        right: 20px;
    }
}
/* /Views/Shared/Partials/Timeline/_TimelineAllDayEvent.cshtml.rz.scp.css */
/* A whole-day entry on the participant timeline: a band over the day's 24
   hours under every other event, and a chip stuck to the top of the visible
   grid. The root takes no room of its own — it is the events layer's size.
   With several all-day entries one band stands for all of them, blending
   their colours left to right (timeline-utils.js marks the roots
   allday-shared / allday-band-off and sets --allday-gradient on the first). */
.timeline-allday-event[b-fbno0yee62] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(24 * var(--hour-height));
    pointer-events: none;
}

/* Tint plus a soft solid outline, so the band reads as an entry over the
   day rather than a coloured background. */
.timeline-allday-band[b-fbno0yee62] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: color-mix(in srgb, var(--allday-color) 7%, transparent);
    border: 1px solid var(--allday-color);
    border-radius: 6px;
}

/* Several entries: tint and outline are both gradients of their colours. The
   outline is a 1px ring cut out of a gradient with a mask, which keeps the
   rounded corners a border-image could not and leaves the inside at the
   tint only. */
.timeline-allday-event.allday-shared .timeline-allday-band[b-fbno0yee62] {
    border-color: transparent;
    background: var(--allday-gradient, color-mix(in srgb, var(--bs-secondary) 6%, transparent));
}

.timeline-allday-event.allday-shared .timeline-allday-band[b-fbno0yee62]::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--allday-border-gradient, color-mix(in srgb, var(--bs-secondary) 35%, transparent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.timeline-allday-event.allday-band-off .timeline-allday-band[b-fbno0yee62] {
    display: none;
}

/* The chip follows the scroll within the day: sticky against .timeline-scroll.
   Same size as a point event's pill (_TimelineEvent). */
.timeline-allday-chip[b-fbno0yee62] {
    position: sticky;
    top: 4px;
    z-index: 30;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    /* Natural width; timeline-utils.js caps it at the day's width and sets
       the row position (margins, top). */
    max-width: 100%;
    margin: 4px 0 0 6px;
    padding: 4px 13px;
    border: 1px solid;
    border-radius: var(--bs-border-radius-pill);
    font-weight: 500;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .timeline-allday-chip[b-fbno0yee62] {
        padding: 7px 14px;
    }
}

.timeline-allday-event-icon[b-fbno0yee62] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* The name is what the entry is: it never gives way, the note does. */
.timeline-allday-event-text[b-fbno0yee62] {
    flex-shrink: 0;
}

.timeline-allday-event-notes[b-fbno0yee62] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.timeline-allday-chip[b-fbno0yee62]  .timeline-event-menu-wrapper {
    margin-left: 8px;
}
/* /Views/Shared/Partials/Timeline/_TimelineEvent.cshtml.rz.scp.css */
/* === Timeline Event (Medication / Activity) === */

.timeline-event[b-p1rx6qzwx2] {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--timeline-inset);
    z-index: 20;
    transform: translateY(max(-50%, calc(-1 * var(--event-top))));
    transition: z-index 0s 0.1s;
}

.timeline-event:hover[b-p1rx6qzwx2] {
    z-index: 200;
    transition: z-index 0s;
}

/* Hidden state for grouped events */
.timeline-event.grouped[b-p1rx6qzwx2] {
    display: none;
}

.timeline-event-line[b-p1rx6qzwx2] {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed;
}

.timeline-event-label[b-p1rx6qzwx2] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 13px;
    border: 1px solid;
    border-radius: var(--bs-border-radius-pill);
    font-weight: 500;
    white-space: nowrap;
    max-width: 100%;
}

.timeline-event-text[b-p1rx6qzwx2] {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .timeline-event-label[b-p1rx6qzwx2] {
        padding: 7px 14px;
    }
}

.timeline-event-icon[b-p1rx6qzwx2] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.timeline-event[b-p1rx6qzwx2]  .timeline-event-menu-wrapper {
    margin-left: 8px;
}
/* /Views/Shared/Partials/Timeline/_TimelineExerciseEvent.cshtml.rz.scp.css */
/* === Timeline Exercise Event === */

.timeline-exercise-event[b-kgezuxwhhb] {
    position: absolute;
    left: var(--timeline-block-inset);
    /* --lane: small cascade step for overlapping long blocks; --stack: resting z
       within an overlap cluster. Both set per cluster by timeline-long-overlap.js;
       defaults keep a lone block full width at z 10. See _TimelineWorkEvent. */
    right: calc(var(--timeline-block-inset) + var(--lane, 0) * var(--cascade-step, 16px));
    height: var(--event-height);
    min-height: var(--hour-height);
    padding: var(--timeline-block-padding);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: var(--stack, 10);
    transition: z-index 0s 0.3s;
}

.timeline-exercise-event:hover[b-kgezuxwhhb] {
    z-index: 100;
    transition: z-index 0s 0.3s;
}

/* Compact view */
/* Header — always visible (replaces compact + title) */
.timeline-exercise-header[b-kgezuxwhhb] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 20px;
    /* The menu button sits absolutely in the top-right corner; keep the text
       clear of it (button + 8px). Read-only days render no button. */
    padding-right: 40px;
}

.timeline-exercise-name[b-kgezuxwhhb] {
    font-size: 16px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.timeline-exercise-header .timeline-compact-details[b-kgezuxwhhb] {
    margin-left: auto;
}

.timeline-exercise-time[b-kgezuxwhhb] {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.timeline-exercise-time-range[b-kgezuxwhhb] {
    display: none;
}

@media (max-width: 389px) {
    .timeline-exercise-header[b-kgezuxwhhb] {
        gap: 8px;
    }

    .timeline-exercise-time[b-kgezuxwhhb] {
        display: none;
    }
}

@media (min-width: 1024px) {
    .timeline-exercise-time-range[b-kgezuxwhhb] {
        display: inline;
    }
}

/* Details view - mobile first */
.timeline-exercise-details[b-kgezuxwhhb] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

.timeline-exercise-content[b-kgezuxwhhb] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
}

.timeline-exercise-fields[b-kgezuxwhhb] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: minmax(0, 1fr);
    column-gap: var(--timeline-details-gap, 50px);
    overflow: hidden;
}

.timeline-exercise-field[b-kgezuxwhhb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
}

.timeline-exercise-field-label[b-kgezuxwhhb] {
    font-size: 16px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.timeline-exercise-field-value[b-kgezuxwhhb] {
    font-size: 14px;
    color: var(--bs-secondary-color);
    overflow-wrap: break-word;
}

.timeline-exercise-list[b-kgezuxwhhb] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 4px;
    font-size: 14px;
    color: var(--bs-secondary-color);
    overflow: hidden;
}

/* Menu positioning */
.timeline-exercise-event[b-kgezuxwhhb] >  .timeline-event-menu-wrapper {
    position: absolute;
    top: 15px;
    right: 20px;
}

/* Progressive disclosure — hidden on mobile by default */
.timeline-exercise-field-duration[b-kgezuxwhhb],
.timeline-exercise-field-basic[b-kgezuxwhhb],
.timeline-exercise-field-extra[b-kgezuxwhhb] {
    display: none;
}

@media (min-width: 400px) {
    .timeline-exercise-event.show-duration .timeline-exercise-field-duration[b-kgezuxwhhb],
    .timeline-exercise-event.show-duration .timeline-exercise-field-extra[b-kgezuxwhhb] {
        display: flex;
    }
}

/* View Details link — hidden in edit mode by default */
.timeline-exercise-view-details[b-kgezuxwhhb] {
    position: absolute;
    bottom: 15px;
    right: 20px;
    font-size: 16px;
    color: var(--bs-body-color);
    text-decoration: underline;
    transition: opacity 0.15s;
    display: none;
}

.timeline-exercise-view-details:hover[b-kgezuxwhhb] {
    opacity: 0.6;
}

.timeline-exercise-event.show-view-details .timeline-exercise-view-details[b-kgezuxwhhb] {
    display: block;
}

/* Tablet+ exercise layout */
@media (min-width: 768px) {
    .timeline-exercise-details[b-kgezuxwhhb] {
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        column-gap: 12px;
        row-gap: 20px;
    }

    .diary-readonly .timeline-exercise-details[b-kgezuxwhhb] {
        padding-right: 0;
    }

    .timeline-exercise-header[b-kgezuxwhhb] {
        font-size: 20px;
        flex-grow: 1;
        height: auto;
        padding-right: 48px;
    }

    .timeline-exercise-name[b-kgezuxwhhb] {
        font-size: 20px;
    }

    .timeline-exercise-time[b-kgezuxwhhb] {
        display: none;
    }

    .timeline-exercise-content[b-kgezuxwhhb] {
        flex-basis: 100%;
    }

    .timeline-exercise-fields[b-kgezuxwhhb] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: var(--timeline-details-gap);
        row-gap: 20px;
    }

    .timeline-exercise-field[b-kgezuxwhhb] {
        gap: 7px;
    }

    .timeline-exercise-field-label[b-kgezuxwhhb] {
        font-size: 20px;
    }

    .timeline-exercise-field-value[b-kgezuxwhhb] {
        font-size: 16px;
    }

    .timeline-exercise-list[b-kgezuxwhhb] {
        font-size: 16px;
    }

    /* Tablet progressive disclosure (not blanket show) */
    .timeline-exercise-event.show-fields-md .timeline-exercise-field-duration[b-kgezuxwhhb],
    .timeline-exercise-event.show-fields-md .timeline-exercise-field-extra[b-kgezuxwhhb] {
        display: flex;
    }

    .timeline-exercise-event[b-kgezuxwhhb]  .timeline-event-menu {
        width: 40px !important;
        height: 40px !important;
    }

    .timeline-exercise-name[b-kgezuxwhhb] {
        font-size: 20px;
    }

    .timeline-exercise-time[b-kgezuxwhhb] {
        font-size: 16px;
    }

    .timeline-exercise-view-details[b-kgezuxwhhb] {
        font-size: 20px;
    }
}

@media (min-width: 800px) {
    .timeline-exercise-time[b-kgezuxwhhb] {
        display: block;
    }

    .timeline-exercise-event.show-fields-md .timeline-exercise-time[b-kgezuxwhhb] {
        display: none;
    }
}

/* PC exercise layout — grid */
@media (min-width: 1024px) {
    .timeline-exercise-details[b-kgezuxwhhb] {
        display: grid;
        grid-template-columns: minmax(115px, 12%) 1fr auto;
        align-items: start;
        column-gap: var(--timeline-details-gap);
        row-gap: 20px;
    }

    .timeline-exercise-header[b-kgezuxwhhb] {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-right: 0;
        gap: 12px;
    }

    .timeline-exercise-time[b-kgezuxwhhb] {
        display: block;
    }

    .timeline-exercise-time-range[b-kgezuxwhhb] {
        display: inline;
    }

    .timeline-exercise-event.show-fields-lg .timeline-exercise-header[b-kgezuxwhhb] {
        grid-column: 1;
    }

    .timeline-exercise-event.show-fields-lg .timeline-exercise-time[b-kgezuxwhhb] {
        display: none;
    }

    .timeline-exercise-content[b-kgezuxwhhb] {
        display: contents;
    }

    .timeline-exercise-fields[b-kgezuxwhhb] {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: var(--timeline-details-gap);
        row-gap: 20px;
    }

    /* PC progressive disclosure — Duration + Exercises only */
    .timeline-exercise-event.show-fields-lg .timeline-exercise-field-duration[b-kgezuxwhhb],
    .timeline-exercise-event.show-fields-lg .timeline-exercise-field-extra[b-kgezuxwhhb] {
        display: flex;
    }

    .timeline-exercise-event.show-fields-lg .timeline-compact-details[b-kgezuxwhhb] {
        display: none !important;
    }

    .timeline-exercise-event.show-fields-lg .timeline-exercise-view-details[b-kgezuxwhhb] {
        display: block;
    }
}

/* PC wider (≥1160px): lower thresholds */
@media (min-width: 1160px) {
    .timeline-exercise-event.show-fields-lg2 .timeline-exercise-header[b-kgezuxwhhb] {
        grid-column: 1;
    }

    .timeline-exercise-event.show-fields-lg2 .timeline-exercise-time[b-kgezuxwhhb] {
        display: none;
    }

    .timeline-exercise-event.show-fields-lg2 .timeline-exercise-field-duration[b-kgezuxwhhb],
    .timeline-exercise-event.show-fields-lg2 .timeline-exercise-field-extra[b-kgezuxwhhb] {
        display: flex;
    }

    .timeline-exercise-event.show-fields-lg2 .timeline-compact-details[b-kgezuxwhhb] {
        display: none !important;
    }

    .timeline-exercise-event.show-fields-lg2 .timeline-exercise-view-details[b-kgezuxwhhb] {
        display: block;
    }
}

/* PC wide (≥1280px): + Starting + Ending Time */
@media (min-width: 1280px) {
    .timeline-exercise-event.show-extras-lg .timeline-exercise-field-basic[b-kgezuxwhhb] {
        display: flex;
    }

    .timeline-exercise-event.show-extras-lg2 .timeline-exercise-field-basic[b-kgezuxwhhb] {
        display: flex;
    }
}
/* /Views/Shared/Partials/Timeline/_TimelineSleepEvent.cshtml.rz.scp.css */
/* === Timeline Sleep Event === */

.timeline-sleep-event[b-8gcjxy15mi] {
    position: absolute;
    left: var(--timeline-block-inset);
    /* --lane: small cascade step for overlapping long blocks; --stack: resting z
       within an overlap cluster. Both set per cluster by timeline-long-overlap.js;
       defaults keep a lone block full width at z 10. See _TimelineWorkEvent. */
    right: calc(var(--timeline-block-inset) + var(--lane, 0) * var(--cascade-step, 16px));
    height: var(--event-height);
    min-height: var(--hour-height);
    padding: var(--timeline-block-padding);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: var(--stack, 10);
    transition: z-index 0s 0.3s;
}

.timeline-sleep-event:hover[b-8gcjxy15mi] {
    z-index: 100;
    transition: z-index 0s 0.3s;
}

/* Header — always visible (replaces compact + title) */
.timeline-sleep-header[b-8gcjxy15mi] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 20px;
}

.timeline-sleep-name[b-8gcjxy15mi] {
    font-size: 16px;
    font-weight: 600;
    color: var(--bs-body-color);
}

.timeline-sleep-time[b-8gcjxy15mi] {
    font-size: 14px;
    color: var(--bs-secondary-color);
}

.timeline-sleep-event.show-fields .timeline-sleep-time[b-8gcjxy15mi] {
    display: none;
}

.timeline-sleep-time-range[b-8gcjxy15mi] {
    display: none;
}

@media (max-width: 389px) {
    .timeline-sleep-header[b-8gcjxy15mi] {
        gap: 8px;
    }

    .timeline-sleep-time[b-8gcjxy15mi] {
        display: none;
    }
}

@media (min-width: 1024px) {
    .timeline-sleep-time-range[b-8gcjxy15mi] {
        display: inline;
    }
}

/* Header compact status — quality + on-track icon (no text) */
.timeline-sleep-header-actions[b-8gcjxy15mi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-right: 35px;
    transition: padding-right 0.3s ease;
}

.diary-readonly .timeline-sleep-header-actions[b-8gcjxy15mi] {
    padding-right: 0;
}

.timeline-sleep-header-status[b-8gcjxy15mi] {
    display: none;
    align-items: center;
    gap: 8px;
}

.timeline-sleep-header-status .timeline-sleep-on-track[b-8gcjxy15mi] {
    padding: 6px;
}

@media (min-width: 768px) {
    .timeline-sleep-header-status .timeline-sleep-on-track[b-8gcjxy15mi] {
        padding: 8px 10px;
        order: -1;
    }
}

.timeline-sleep-header-on-track-text[b-8gcjxy15mi] {
    display: none;
}

@media (min-width: 480px) {
    .timeline-sleep-header-status[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-status .timeline-sleep-header-status[b-8gcjxy15mi] {
        display: none;
    }
}

@media (min-width: 600px) {
    .timeline-sleep-header-on-track-text[b-8gcjxy15mi] {
        display: inline;
    }
}

/* View Details link — shown from ≥ 1h 30m (shorter cards use the header
   Details link, which opens the same modal). Once shown it never hides:
   custom questions can't be rendered inline, so the modal must stay
   reachable even when the card fits everything else — the !important
   overrides the all-visible tiers below. */
.timeline-sleep-view-details[b-8gcjxy15mi] {
    position: absolute;
    bottom: 15px;
    right: 20px;
    font-size: 16px;
    color: var(--bs-body-color);
    text-decoration: underline;
    transition: opacity 0.15s;
    display: none;
}

.timeline-sleep-event.show-view-details .timeline-sleep-view-details[b-8gcjxy15mi] {
    display: block !important;
}

.timeline-sleep-view-details:hover[b-8gcjxy15mi] {
    opacity: 0.6;
}

@media (min-width: 768px) {
    .timeline-sleep-header-status[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-status-md .timeline-sleep-header-status[b-8gcjxy15mi] {
        display: none;
    }

    .timeline-sleep-view-details[b-8gcjxy15mi] {
        font-size: 20px;
    }

    .timeline-sleep-header-actions[b-8gcjxy15mi] {
        padding-right: 45px;
    }

    [b-8gcjxy15mi] .diary-readonly .timeline-sleep-header-actions {
        padding-right: 0;
    }
}

/* Details view - mobile first */
.timeline-sleep-details[b-8gcjxy15mi] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--timeline-sleep-gap);
}

.timeline-sleep-content[b-8gcjxy15mi] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--timeline-sleep-gap);
}

.timeline-sleep-fields[b-8gcjxy15mi] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--timeline-sleep-gap);
    overflow: hidden;
}

.timeline-sleep-row[b-8gcjxy15mi] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--timeline-sleep-gap);
}

.timeline-sleep-notes-row[b-8gcjxy15mi] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.timeline-sleep-field[b-8gcjxy15mi] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.timeline-sleep-field-label[b-8gcjxy15mi] {
    font-size: 16px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.timeline-sleep-field-value[b-8gcjxy15mi] {
    font-size: 14px;
    color: var(--bs-secondary-color);
    overflow-wrap: break-word;
}

.timeline-sleep-notes[b-8gcjxy15mi] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.timeline-sleep-notes .timeline-sleep-field-value[b-8gcjxy15mi] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.4;
}

.timeline-sleep-quality[b-8gcjxy15mi] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.timeline-sleep-quality svg[b-8gcjxy15mi] {
    align-self: center;
    width: 16px;
    height: 16px;
    color: var(--bs-warning);
}

/* Status row (quality + on-track badge) */
.timeline-sleep-status[b-8gcjxy15mi] {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.timeline-sleep-on-track-icon[b-8gcjxy15mi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: color-mix(in srgb, #FF8400 10%, transparent);
    border: 1px solid #FF8400;
}

/* The badge is always in the DOM; show it only when the day's shift puts this
   sleep on track. Data-driven so the shift toggle can flip it live (variant b). */
.timeline-sleep-event:not([data-on-track="true"]) .timeline-sleep-on-track[b-8gcjxy15mi] {
    display: none;
}

.timeline-sleep-on-track[b-8gcjxy15mi] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 6px;
    border-radius: 10px;
    background-color: var(--bs-body-bg);
    color: #FF8400;
    font-size: 14px;
    font-weight: 500;
}

/* Progressive disclosure tiers — hidden on mobile by default */
.timeline-sleep-status[b-8gcjxy15mi],
.timeline-sleep-field-basic[b-8gcjxy15mi],
.timeline-sleep-field-extra[b-8gcjxy15mi],
.timeline-sleep-field-notes[b-8gcjxy15mi] {
    display: none;
}

.timeline-sleep-event.show-status .timeline-sleep-status[b-8gcjxy15mi] {
    display: flex;
}

/* Tier 1: ≥4h — Sleep Time + Duration (≥400px shows both together) */
@media (min-width: 400px) {
    .timeline-sleep-event.show-fields .timeline-sleep-field-basic[b-8gcjxy15mi] {
        display: flex;
    }
}

/* Tier 2a: Awakenings */
.timeline-sleep-event.show-awakenings .timeline-sleep-field-awakenings[b-8gcjxy15mi] {
    display: flex;
}

/* Tier 2b: Time To Fall Asleep */
.timeline-sleep-event.show-ttfa .timeline-sleep-field-ttfa[b-8gcjxy15mi] {
    display: flex;
}

/* Tier 3: ≥9h — Notes */
.timeline-sleep-event.show-notes .timeline-sleep-field-notes[b-8gcjxy15mi] {
    display: flex;
}

/* Small screens (<405px) — only Sleep Time + Duration from fields */
@media (max-width: 400px) {
    .timeline-sleep-event .timeline-sleep-field-extra[b-8gcjxy15mi],
    .timeline-sleep-event .timeline-sleep-field-notes[b-8gcjxy15mi] {
        display: none !important;
    }
}

/* Small screens (<400px) — split Sleep Time / Duration, hide on-track text */
@media (max-width: 399px) {
    .timeline-sleep-event .timeline-sleep-field-basic[b-8gcjxy15mi] {
        display: none;
    }

    .timeline-sleep-event.show-time .timeline-sleep-field-time[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-duration .timeline-sleep-field-duration[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-status .timeline-sleep-on-track-text[b-8gcjxy15mi] {
        display: none;
    }
}

/* Mobile wide (≥450px): Awakenings joins TTFA, Notes shifts */
@media (min-width: 450px) {
    .timeline-sleep-event.show-awakenings-sm .timeline-sleep-field-awakenings[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-notes-sm .timeline-sleep-field-notes[b-8gcjxy15mi] {
        display: flex;
    }
}

/* Mobile wider (≥580px): TTFA joins show-fields tier */
@media (min-width: 580px) and (max-width: 767px) {
    .timeline-sleep-event.show-fields .timeline-sleep-field-ttfa[b-8gcjxy15mi] {
        display: flex;
    }
}

/* Mobile wide (≥705px): Awakenings joins show-fields, Notes shifts */
@media (min-width: 705px) and (max-width: 767px) {
    .timeline-sleep-event.show-fields .timeline-sleep-field-awakenings[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-notes-sm2 .timeline-sleep-field-notes[b-8gcjxy15mi] {
        display: flex;
    }
}

/* Hide View Details when all data is fully visible (notes unclamped) */
@media (min-width: 768px) {
    .timeline-sleep-event.all-visible-md .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: none;
    }
}

@media (min-width: 1024px) {
    .timeline-sleep-event.all-visible-md .timeline-sleep-view-details[b-8gcjxy15mi],
    .timeline-sleep-event.all-visible-md2 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: block;
    }

    .timeline-sleep-event.all-visible-lg .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: none;
    }
}

.timeline-sleep-event[b-8gcjxy15mi] >  .timeline-event-menu-wrapper,
.timeline-update-details-btn[b-8gcjxy15mi] {
    position: absolute;
    top: 15px;
    right: 20px;
}

/* Preliminary events - generated from schedule */
.timeline-sleep-event.preliminary[b-8gcjxy15mi] {
    border: 2px dashed;
}

/* The one control a participant must find to finish the day, so it keeps
   its label at every width, a visible ring and a 36px touch target. */
.timeline-update-details-btn[b-8gcjxy15mi] {
    align-self: flex-start;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    border: 1px solid var(--bs-secondary-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.15s;
}

.timeline-update-details-btn svg[b-8gcjxy15mi] {
    width: 16px;
    height: 16px;
}

.timeline-update-details-btn:hover[b-8gcjxy15mi],
.timeline-update-details-btn:active[b-8gcjxy15mi] {
    background-color: var(--bs-secondary-bg);
}

/* Below 400px the full label runs into the card title, so the button keeps
   its place and size but says "Update"; from 400px up it says it all. */
.timeline-update-details-text-short[b-8gcjxy15mi] {
    display: none;
}

@media (max-width: 399px) {
    .timeline-update-details-text[b-8gcjxy15mi] {
        display: none;
    }

    .timeline-update-details-text-short[b-8gcjxy15mi] {
        display: inline;
    }
}

/* Tablet+ sleep layout & sizes */
@media (min-width: 768px) {
    /* Row layout with wrap: title+status in first row, content wraps */
    .timeline-sleep-details[b-8gcjxy15mi] {
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        column-gap: 12px;
        row-gap: var(--timeline-sleep-gap);
    }

    .timeline-sleep-header[b-8gcjxy15mi] {
        font-size: 20px;
        flex-grow: 1;
        height: auto;
    }

    .timeline-sleep-name[b-8gcjxy15mi] {
        font-size: 20px;
    }

    .timeline-sleep-time[b-8gcjxy15mi] {
        display: none;
        font-size: 16px;
    }

    .timeline-sleep-status[b-8gcjxy15mi] {
        display: none;
        width: auto;
        order: 1;
        padding-right: 60px;
        flex-direction: row-reverse;
        gap: 20px;
        transition: padding-right 0.3s ease;
    }

    .timeline-sleep-event.show-status-md .timeline-sleep-status[b-8gcjxy15mi] {
        display: flex;
    }

    .diary-readonly .timeline-sleep-status[b-8gcjxy15mi] {
        padding-right: 0;
    }

    .timeline-sleep-event[b-8gcjxy15mi]  .timeline-event-menu {
        width: 40px !important;
        height: 40px !important;
    }

    .timeline-sleep-content[b-8gcjxy15mi] {
        order: 3;
        flex-basis: 100%;
    }

    /* Font sizes */
    .timeline-sleep-field[b-8gcjxy15mi] {
        gap: 7px;
    }

    .timeline-sleep-field-label[b-8gcjxy15mi] {
        font-size: 20px;
    }

    .timeline-sleep-field-value[b-8gcjxy15mi] {
        font-size: 16px;
    }

    .timeline-sleep-quality[b-8gcjxy15mi] {
        font-size: 20px;
    }

    .timeline-sleep-quality svg[b-8gcjxy15mi] {
        width: 26px;
        height: 26px;
    }

    .timeline-sleep-on-track[b-8gcjxy15mi] {
        font-size: 16px;
        padding: 8px;
    }

    .timeline-sleep-on-track-text[b-8gcjxy15mi] {
        display: none;
    }

    .timeline-sleep-on-track-icon[b-8gcjxy15mi] {
        width: 24px;
        height: 24px;
    }

    .timeline-sleep-on-track-icon[b-8gcjxy15mi]  img {
        width: 14px;
        height: auto;
    }
}

@media (min-width: 880px) {
    .timeline-sleep-on-track-text[b-8gcjxy15mi] {
        display: inline;
    }

    .timeline-sleep-on-track[b-8gcjxy15mi] {
        padding: 8px 10px;
    }
}

/* Tablet progressive disclosure (not blanket show) */
@media (min-width: 768px) and (max-width: 1023px) {
    .timeline-sleep-event.show-fields-md .timeline-sleep-field-basic[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-ttfa-md .timeline-sleep-field-ttfa[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-awakenings-md .timeline-sleep-field-awakenings[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-notes-md .timeline-sleep-field-notes[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-notes .timeline-sleep-field-value[b-8gcjxy15mi] {
        -webkit-line-clamp: var(--notes-line-clamp, 3);
    }
}

@media (min-width: 768px) {
    .timeline-update-details-btn[b-8gcjxy15mi] {
        padding: 6px 14px;
        font-size: 14px;
    }
}

@media (min-width: 800px) {
    .timeline-sleep-time[b-8gcjxy15mi] {
        display: block;
    }

    .timeline-sleep-event.show-fields-md .timeline-sleep-time[b-8gcjxy15mi] {
        display: none;
    }

    .timeline-sleep-event.all-visible-md .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: block;
    }

    .timeline-sleep-event.all-visible-md2 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: none;
    }
}

/* Tablet wider (≥800px): Awakenings joins TTFA, Notes shifts */
@media (min-width: 800px) and (max-width: 1023px) {
    .timeline-sleep-event.show-ttfa-md .timeline-sleep-field-awakenings[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-notes-md2 .timeline-sleep-field-notes[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-notes .timeline-sleep-field-value[b-8gcjxy15mi] {
        -webkit-line-clamp: var(--notes-line-clamp-md2, 3);
    }
}

/* Tablet wider (≥860px): TTFA joins show-fields-md, all visible from 6h10m */
@media (min-width: 860px) and (max-width: 1023px) {
    .timeline-sleep-event.show-fields-md .timeline-sleep-field-ttfa[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-ttfa .timeline-sleep-notes .timeline-sleep-field-value[b-8gcjxy15mi] {
        -webkit-line-clamp: 9999;
    }

    .timeline-sleep-event.show-ttfa .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: none;
    }
}

/* PC sleep layout — grid for single-row fields with full-width notes */
@media (min-width: 1024px) {
    .timeline-sleep-details[b-8gcjxy15mi] {
        display: grid;
        grid-template-columns: minmax(115px, 12%) 1fr auto;
        align-items: start;
        column-gap: var(--timeline-details-gap);
        row-gap: var(--timeline-sleep-gap);
    }

    .timeline-sleep-header[b-8gcjxy15mi] {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-right: 0;
        gap: 12px;
    }

    .timeline-sleep-time[b-8gcjxy15mi] {
        display: block;
    }

    .timeline-sleep-time-range[b-8gcjxy15mi] {
        display: inline;
    }

    .timeline-sleep-status[b-8gcjxy15mi] {
        grid-column: 3;
        grid-row: 1;
    }

    .timeline-sleep-content[b-8gcjxy15mi] {
        display: contents;
    }

    .timeline-sleep-fields[b-8gcjxy15mi] {
        display: contents;
    }

    .timeline-sleep-row[b-8gcjxy15mi] {
        grid-column: 2;
        grid-row: 1;
        column-gap: var(--timeline-details-gap);
        row-gap: 30px;
    }

    .timeline-sleep-notes-row[b-8gcjxy15mi] {
        grid-column: 2 / -1;
        grid-row: 2;
    }

    .timeline-sleep-event.preliminary .timeline-sleep-row:not(.timeline-sleep-notes-row)[b-8gcjxy15mi] {
        padding-right: 180px;
    }

    /* PC progressive disclosure */
    .timeline-sleep-event.show-time-lg .timeline-sleep-time[b-8gcjxy15mi] {
        display: none;
    }

    .timeline-sleep-event.show-time-lg .timeline-sleep-field-time[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-duration-lg .timeline-sleep-field-duration[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-ttfa-lg .timeline-sleep-field-ttfa[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-awakenings-lg .timeline-sleep-field-awakenings[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-notes-md .timeline-sleep-field-notes[b-8gcjxy15mi] {
        display: none;
    }

    .timeline-sleep-event.show-notes-lg .timeline-sleep-field-notes[b-8gcjxy15mi] {
        display: flex;
    }

    /* PC notes line clamp */
    .timeline-sleep-notes .timeline-sleep-field-value[b-8gcjxy15mi] {
        -webkit-line-clamp: var(--notes-line-clamp-lg, 3);
    }
}

/* PC wider (≥1070px): -20min shift */
@media (min-width: 1070px) {
    .timeline-sleep-event.show-ttfa-lg2 .timeline-sleep-field-ttfa[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-awakenings-lg2 .timeline-sleep-field-awakenings[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-notes-lg2 .timeline-sleep-field-notes[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-notes .timeline-sleep-field-value[b-8gcjxy15mi] {
        -webkit-line-clamp: var(--notes-line-clamp-lg2, 3);
    }

    .timeline-sleep-event.all-visible-lg .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: block;
    }

    .timeline-sleep-event.all-visible-lg2 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: none;
    }
}

/* PC wider (≥1100px): Awakenings -20min shift */
@media (min-width: 1100px) {
    .timeline-sleep-event.show-awakenings-lg3 .timeline-sleep-field-awakenings[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-notes-lg3 .timeline-sleep-field-notes[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-notes .timeline-sleep-field-value[b-8gcjxy15mi] {
        -webkit-line-clamp: var(--notes-line-clamp-lg3, 3);
    }

    .timeline-sleep-event.all-visible-lg2 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: block;
    }

    .timeline-sleep-event.all-visible-lg3 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: none;
    }
}

/* PC wider (≥1160px): Duration joins Sleep Time, -30min shift */
@media (min-width: 1160px) {
    .timeline-sleep-event.show-time-lg .timeline-sleep-field-duration[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-ttfa-lg4 .timeline-sleep-field-ttfa[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-awakenings-lg4 .timeline-sleep-field-awakenings[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-notes-lg4 .timeline-sleep-field-notes[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-notes .timeline-sleep-field-value[b-8gcjxy15mi] {
        -webkit-line-clamp: var(--notes-line-clamp-lg4, 3);
    }

    .timeline-sleep-event.all-visible-lg3 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: block;
    }

    .timeline-sleep-event.all-visible-lg4 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: none;
    }
}

/* PC wider (≥1200px): notes unclamped from 6h */
@media (min-width: 1200px) {
    .timeline-sleep-notes .timeline-sleep-field-value[b-8gcjxy15mi] {
        -webkit-line-clamp: var(--notes-line-clamp-lg5, 3);
    }

    .timeline-sleep-event.all-visible-lg4 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: block;
    }

    .timeline-sleep-event.all-visible-lg5 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: none;
    }
}

/* PC wider (≥1345px): Awakenings joins TTFA, Notes shifts -50min */
@media (min-width: 1345px) {
    .timeline-sleep-event.show-ttfa-lg4 .timeline-sleep-field-awakenings[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-notes-lg5 .timeline-sleep-field-notes[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-notes .timeline-sleep-field-value[b-8gcjxy15mi] {
        -webkit-line-clamp: var(--notes-line-clamp-lg6, 3);
    }

    .timeline-sleep-event.all-visible-lg5 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: block;
    }

    .timeline-sleep-event.all-visible-lg6 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: none;
    }
}

/* PC wider (≥1405px): TTFA joins first row */
@media (min-width: 1405px) {
    .timeline-sleep-event.show-time-lg .timeline-sleep-field-ttfa[b-8gcjxy15mi] {
        display: flex;
    }
}

/* PC wider (≥1710px): Awakenings joins first row, Notes shifts -70min */
@media (min-width: 1710px) {
    .timeline-sleep-event.show-time-lg .timeline-sleep-field-awakenings[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-event.show-notes-lg6 .timeline-sleep-field-notes[b-8gcjxy15mi] {
        display: flex;
    }

    .timeline-sleep-notes .timeline-sleep-field-value[b-8gcjxy15mi] {
        -webkit-line-clamp: var(--notes-line-clamp-lg7, 3);
    }

    .timeline-sleep-event.all-visible-lg6 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: block;
    }

    .timeline-sleep-event.all-visible-lg7 .timeline-sleep-view-details[b-8gcjxy15mi] {
        display: none;
    }
}
/* /Views/Shared/_AuthLayout.cshtml.rz.scp.css */
.auth-card[b-7lgpguhb9m] {
  width: calc(100% - 40px);
  max-width: 654px;
  border: none;
  border-radius: 10px;
  padding: 20px;
  /* Tall pages (e.g. Register) scroll inside the card body, not the page:
     cap the card to the viewport; .card-body below picks up the overflow. */
  max-height: calc(100vh - 40px);
}

.auth-card .card-body[b-7lgpguhb9m] {
  overflow-y: auto;
  min-height: 0;
  /* Column flex (behaves like block flow for full-width children) so a page can
     manage its own scroll region — e.g. Register scrolls only its fields and
     keeps the submit footer below the scrollbar. */
  display: flex;
  flex-direction: column;
}

.auth-card.wide-card[b-7lgpguhb9m] {
  max-width: 920px;
  padding: 20px;
}

@media (min-width: 768px) {
  .auth-card[b-7lgpguhb9m] {
    border-radius: 20px;
    padding: 50px 60px;
  }

  .auth-card.wide-card[b-7lgpguhb9m] {
    padding: 50px 30px;
  }
}

.auth-card.card-header-no-margin > .card-header[b-7lgpguhb9m] {
  margin-bottom: 0;
}

.auth-card .card-header[b-7lgpguhb9m],
.auth-card .card-body[b-7lgpguhb9m],
.auth-card .card-footer[b-7lgpguhb9m] {
  background: none;
  border-width: 0;
  padding: 0;
}

.auth-card .card-header[b-7lgpguhb9m] {
  margin-bottom: 45px;
}

.card-logo[b-7lgpguhb9m] {
  height: 63px;
  width: auto;
  margin-bottom: 47px;
  user-select: none;
}

[b-7lgpguhb9m] .card-title {
  font-size: var(--type-page-title);
  margin-bottom: 12px;
}

[b-7lgpguhb9m] .card-subtitle {
  font-size: 14px;
}

@media (min-width: 768px) {
  [b-7lgpguhb9m] .card-subtitle {
    font-size: 20px;
  }
}
/* /Views/Shared/_Layout.cshtml.rz.scp.css */
/* /Views/Shared/_SettingsLayout.cshtml.rz.scp.css */
/* Settings layout */
.settings-layout[b-th4enmk2v4] {
  display: flex;
  flex: 1;
  min-height: 0;
}

.settings-layout[b-th4enmk2v4]  aside.side-menu {
  display: none;
}

.settings-content[b-th4enmk2v4] {
  flex: 1;
  background-color: var(--bs-body-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.settings-content-body[b-th4enmk2v4] {
  flex: 1;
  min-height: 0;
  padding: 12px 0 0;
  display: flex;
  flex-direction: column;
  transition: opacity 0.15s ease;
}

/* Crossfade for the in-place SPA content swap (settings-spa.js): the body fades
   out while the next page loads, then fades back in after the innerHTML swap. */
.settings-content-body.is-swapping[b-th4enmk2v4] {
  opacity: 0;
}

/* Mobile back header for content pages */
.settings-mobile-header[b-th4enmk2v4] {
  display: block;
  padding: 20px 20px 0;
}

/* Settings page content (::deep for child views via @RenderBody) */
.settings-content-body[b-th4enmk2v4]  .settings-page-title {
  font-size: var(--type-page-title);
  font-weight: 700;
  margin-bottom: 10px;
  padding: 0 20px;
}

.settings-content-body[b-th4enmk2v4]  .settings-page-description {
  color: var(--bs-secondary-color);
  margin-bottom: 24px;
  padding: 0 20px;
}

.settings-content-body[b-th4enmk2v4]  .settings-editor-wrapper {
  margin-bottom: 30px;
}

.settings-content-body[b-th4enmk2v4]  .settings-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.settings-content-body[b-th4enmk2v4]  .settings-page form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px;
}

.settings-content-body[b-th4enmk2v4]  .settings-actions {
  display: flex;
  gap: 28px;
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 20px 0;
  background: linear-gradient(to bottom, transparent, var(--bs-body-bg) 20%);
}

.settings-content-body[b-th4enmk2v4]  .settings-actions .btn {
  flex: 0 0 calc(50% - 14px);
}

@media (max-width: 767px) {
  .settings-content-body[b-th4enmk2v4]  .settings-actions .btn {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.settings-content-body[b-th4enmk2v4]  .settings-actions .btn-cancel {
  visibility: hidden;
}

.settings-content-body[b-th4enmk2v4]  .settings-actions.has-changes .btn-cancel {
  visibility: visible;
}

/* Tablet+ */
@media (min-width: 768px) {
  .settings-layout[b-th4enmk2v4]  aside.side-menu {
    display: flex;
  }

  .settings-content-body[b-th4enmk2v4] {
    padding: 16px 0 0;
  }

  .settings-content-body[b-th4enmk2v4]  .settings-page-title,
  .settings-content-body[b-th4enmk2v4]  .settings-page-description,
  .settings-content-body[b-th4enmk2v4]  .settings-page form {
    padding-left: 18px;
    padding-right: 18px;
  }

  .settings-mobile-header[b-th4enmk2v4] {
    display: none;
  }

  .settings-content-body[b-th4enmk2v4]  .settings-page-title {
    margin-bottom: 17px;
  }

  .settings-content-body[b-th4enmk2v4]  .settings-page-description {
    margin-bottom: 50px;
  }

  .settings-content-body[b-th4enmk2v4]  .settings-actions {
    gap: 10px;
    justify-content: flex-end;
  }

  .settings-content-body[b-th4enmk2v4]  .settings-actions .btn {
    flex: 0 0 auto;
    width: auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .settings-content-body[b-th4enmk2v4] {
    padding: 40px 0 0;
  }

  .settings-content-body[b-th4enmk2v4]  .settings-page-title,
  .settings-content-body[b-th4enmk2v4]  .settings-page-description,
  .settings-content-body[b-th4enmk2v4]  .settings-page form {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Tablet+: schedule time columns should stretch to fill in settings (side menu takes space) */
@media (min-width: 768px) {
  .settings-content-body[b-th4enmk2v4]  :is(.schedule-editor, .inconsistent-schedule-editor) .editor-time-group {
    flex: 1;
  }

  .settings-content-body[b-th4enmk2v4]  :is(.schedule-editor, .inconsistent-schedule-editor) .editor-col-start,
  .settings-content-body[b-th4enmk2v4]  :is(.schedule-editor, .inconsistent-schedule-editor) .editor-col-end {
    flex: 1;
    width: auto;
    min-width: 170px;
  }
}

/* Tablet: keep schedule/medication editors in mobile (stacked) layout — not enough space with side menu */
@media (min-width: 768px) and (max-width: 1023px) {
  .settings-content-body[b-th4enmk2v4]  :is(.schedule-editor, .inconsistent-schedule-editor, .medication-editor, .custom-medication-editor) .editor-title-row {
    display: none;
  }

  .settings-content-body[b-th4enmk2v4]  :is(.schedule-editor, .inconsistent-schedule-editor) .editor-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-right: 0;
    position: static;
  }

  /* Schedule: let the shift column wrap below the hours when it no longer fits */
  .settings-content-body[b-th4enmk2v4]  :is(.schedule-editor, .inconsistent-schedule-editor) .editor-time-group {
    flex-wrap: wrap;
  }

  /* hours out-grow shift so it stays ~120px while inline */
  .settings-content-body[b-th4enmk2v4]  :is(.schedule-editor, .inconsistent-schedule-editor) .editor-col-start,
  .settings-content-body[b-th4enmk2v4]  :is(.schedule-editor, .inconsistent-schedule-editor) .editor-col-end {
    flex-grow: 999;
  }

  /* shift is ~120px next to the hours, but fills the whole line once it wraps below */
  .settings-content-body[b-th4enmk2v4]  :is(.schedule-editor, .inconsistent-schedule-editor) :is(.schedule-col-shift, .inconsistent-col-shift) {
    flex: 1 0 120px;
  }

  /* Medication: keep a wrapping row — medication select on its own line, then dosage + unit + time
     share the next line and stretch to fill it (with min widths), like the schedule hours */
  .settings-content-body[b-th4enmk2v4]  :is(.medication-editor, .custom-medication-editor) .editor-row {
    align-items: flex-start;
    padding-right: 0;
    position: static;
  }

  .settings-content-body[b-th4enmk2v4]  :is(.medication-editor, .custom-medication-editor) .medication-col-select {
    flex: 0 0 100%;
  }

  .settings-content-body[b-th4enmk2v4]  :is(.medication-editor, .custom-medication-editor) .medication-col-dosage-group {
    flex: 1 1 auto;
    width: auto;
  }

  .settings-content-body[b-th4enmk2v4]  :is(.medication-editor, .custom-medication-editor) .medication-col-time {
    flex: 1 1 auto;
    width: auto;
    min-width: 170px;
  }

  /* dosage and unit stretch to fill the group while keeping their min widths */
  .settings-content-body[b-th4enmk2v4]  :is(.medication-editor, .custom-medication-editor) .dosage-input-group > .dosage-col:first-child {
    flex: 1 1 auto;
    width: auto;
    min-width: 120px;
  }

  .settings-content-body[b-th4enmk2v4]  :is(.medication-editor, .custom-medication-editor) .dosage-input-group > .dosage-col:last-child {
    flex: 1 1 auto;
    width: auto;
    min-width: 158px;
  }

  .settings-content-body[b-th4enmk2v4]  :is(.schedule-editor, .inconsistent-schedule-editor, .medication-editor, .custom-medication-editor) .editor-mobile-header {
    display: flex;
    margin-bottom: 5px;
  }

  .settings-content-body[b-th4enmk2v4]  :is(.schedule-editor, .inconsistent-schedule-editor, .medication-editor, .custom-medication-editor) .editor-mobile-label {
    display: block;
  }

  .settings-content-body[b-th4enmk2v4]  :is(.schedule-editor, .inconsistent-schedule-editor, .medication-editor, .custom-medication-editor) .remove-row-btn {
    position: static;
    transform: none;
  }

  /* Revert custom section visibility (medication) */
  .settings-content-body[b-th4enmk2v4]  .custom-medication-editor .custom-section-divider,
  .settings-content-body[b-th4enmk2v4]  .custom-medication-editor .custom-section-mobile-title {
    display: block;
  }
}

/* Settings content loading state. The visible fade now lives on
   .settings-content-body.is-swapping; here we just block interaction with the
   outgoing page while the swap is in flight. */
.settings-content.loading[b-th4enmk2v4] {
  pointer-events: none;
}
/* /Views/SleepRecord/Detail.cshtml.rz.scp.css */
.sleep-record-detail-page[b-s3z36kcamw] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Header */
.sleep-record-detail-header[b-s3z36kcamw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.sleep-record-detail-header-right[b-s3z36kcamw] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sleep-record-detail-header[b-s3z36kcamw]  .admin-export-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Metric Cards */
.sleep-record-detail-metrics[b-s3z36kcamw] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.sleep-record-detail-metric-card[b-s3z36kcamw] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card-sm);
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.sleep-record-detail-metric-top[b-s3z36kcamw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.sleep-record-detail-metric-info[b-s3z36kcamw] {
    display: flex;
    flex-direction: column;
}

.sleep-record-detail-metric-label[b-s3z36kcamw] {
    font-size: 26px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.sleep-record-detail-metric-value[b-s3z36kcamw] {
    font-size: 26px;
    font-weight: 400;
}

.sleep-record-detail-metric-icon[b-s3z36kcamw] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sleep-record-detail-metric-icon--purple[b-s3z36kcamw] { background: #69329A1A; }
.sleep-record-detail-metric-icon--red[b-s3z36kcamw] { background: #F549491A; }
.sleep-record-detail-metric-icon--green[b-s3z36kcamw] { background: #29B2231A; }
.sleep-record-detail-metric-icon--blue[b-s3z36kcamw] { background: #4876C61A; }

/* Recommendations */
.sleep-record-recommendations-card[b-s3z36kcamw] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    padding: 30px;
}

.sleep-record-recommendations-title[b-s3z36kcamw] {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 20px;
}

.sleep-record-recommendations-list[b-s3z36kcamw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sleep-record-recommendation[b-s3z36kcamw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 18px 20px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.sleep-record-recommendation:hover[b-s3z36kcamw] {
    border-color: var(--admin-primary);
    background: var(--bs-secondary-bg);
}

.sleep-record-recommendation-period[b-s3z36kcamw] {
    font-size: 20px;
    font-weight: 500;
}

.sleep-record-recommendation-stat[b-s3z36kcamw] {
    color: var(--bs-secondary-color);
    font-size: 20px;
}

.sleep-record-recommendation-arrow[b-s3z36kcamw] {
    color: var(--admin-primary);
    font-weight: 500;
    font-size: 20px;
    white-space: nowrap;
    margin-left: auto;
}

/* Wide screens: lay every recommendation's parts on shared columns so they
   line up vertically across rows. Each row is its own grid, but identical
   templates over equal-width cards land the columns at the same positions.
   Below this width the parts fall back to a wrapping flex row. */
@media (min-width: 1200px) {
    .sleep-record-recommendation[b-s3z36kcamw] {
        display: grid;
        grid-template-columns: minmax(13em, 2fr) 5.5em 7.5em 9em minmax(7em, 1fr);
        gap: 20px;
    }

    .sleep-record-recommendation-arrow[b-s3z36kcamw] {
        margin-left: 0;
        justify-self: end;
    }
}

/* Badge layout — the base padding/radius lives in the data-table scope,
   so badges that sit outside the table (recommendation cards) need it here */
.sleep-record-recommendations-card[b-s3z36kcamw]  .data-table-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    white-space: nowrap;
}

/* Badge colors */
.sleep-record-recommendations-card[b-s3z36kcamw]  .data-table-badge--high,
.sleep-record-detail-table-card[b-s3z36kcamw]  .data-table-badge--high {
    background: color-mix(in srgb, var(--badge-high) 10%, transparent);
    color: var(--badge-high);
}

.sleep-record-recommendations-card[b-s3z36kcamw]  .data-table-badge--na,
.sleep-record-detail-table-card[b-s3z36kcamw]  .data-table-badge--na {
    background: color-mix(in srgb, var(--badge-neutral) 10%, transparent);
    color: var(--badge-neutral);
}

/* Status badges on entry rows — own leading column, matching the Study Period
   table's row badges. */
.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-flags {
    text-align: center;
    white-space: nowrap;
}

/* Bedtime / Wake Time: the time on top, its calendar date underneath — the
   diary day column can name the previous calendar day for overnight sleeps. */
.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-diary-day,
.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-time,
.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-time-date {
    white-space: nowrap;
}

.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-time,
.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-time-date {
    display: block;
}

.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-time-date {
    font-size: 0.8em;
    color: var(--bs-secondary-color);
}

.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Drop the inline baseline gap so the glyph sits dead-centre in the circle. */
.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-badge img,
.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-badge svg {
    display: block;
}

.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-badge--on-track {
    background: color-mix(in srgb, #FF8400 10%, transparent);
    border: 1px solid #FF8400;
}

.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-badge--custom {
    background: color-mix(in srgb, var(--admin-primary) 10%, transparent);
    border: 1px solid var(--admin-primary);
    color: var(--admin-primary);
}

.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-view {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: 1px solid var(--admin-primary);
    border-radius: 8px;
    background: transparent;
    color: var(--admin-primary);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.sleep-record-detail-table-card[b-s3z36kcamw]  .sleep-entry-view:hover {
    background: var(--admin-primary);
    color: #fff;
}

/* Table Card */
.sleep-record-detail-table-card[b-s3z36kcamw] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    padding: 30px;
}

/* Responsive */
@media (min-width: 768px) {
    .sleep-record-detail-metrics[b-s3z36kcamw] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .sleep-record-detail-metrics[b-s3z36kcamw] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Views/SleepRecord/Index.cshtml.rz.scp.css */
.sleep-record-page[b-6mpoz53dhq] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Header */
.sleep-record-header[b-6mpoz53dhq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.sleep-record-header-right[b-6mpoz53dhq] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sleep-record-header[b-6mpoz53dhq]  .admin-export-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Metric Cards */
.sleep-record-metrics[b-6mpoz53dhq] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.sleep-record-metric-card[b-6mpoz53dhq] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card-sm);
    padding: 24px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.sleep-record-metric-top[b-6mpoz53dhq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.sleep-record-metric-info[b-6mpoz53dhq] {
    display: flex;
    flex-direction: column;
}

.sleep-record-metric-label[b-6mpoz53dhq] {
    font-size: 26px;
    font-weight: 400;
    color: var(--bs-body-color);
}

.sleep-record-metric-value[b-6mpoz53dhq] {
    font-size: 26px;
    font-weight: 400;
}

.sleep-record-metric-icon[b-6mpoz53dhq] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sleep-record-metric-icon--purple[b-6mpoz53dhq] { background: #69329A1A; }
.sleep-record-metric-icon--red[b-6mpoz53dhq] { background: #F549491A; }
.sleep-record-metric-icon--green[b-6mpoz53dhq] { background: #29B2231A; }
.sleep-record-metric-icon--blue[b-6mpoz53dhq] { background: #4876C61A; }

/* Badge colors */
.sleep-record-table-card[b-6mpoz53dhq]  .data-table-badge--high {
    background: color-mix(in srgb, var(--badge-high) 10%, transparent);
    color: var(--badge-high);
}

.sleep-record-table-card[b-6mpoz53dhq]  .data-table-badge--na {
    background: color-mix(in srgb, var(--badge-neutral) 10%, transparent);
    color: var(--badge-neutral);
}

/* Table Card */
.sleep-record-table-card[b-6mpoz53dhq] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    padding: 30px;
}

/* Responsive */
@media (min-width: 768px) {
    .sleep-record-metrics[b-6mpoz53dhq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .sleep-record-metrics[b-6mpoz53dhq] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Views/SleepRecord/Partials/_SleepRecordRow.cshtml.rz.scp.css */
.sleep-record-view-details[b-kg6delskqt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    color: var(--admin-primary);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid var(--admin-primary);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.sleep-record-view-details:hover[b-kg6delskqt] {
    background: var(--admin-primary);
    color: #fff;
    text-decoration: none;
}
/* /Views/SleepRecord/Partials/_SleepRecordTableHeader.cshtml.rz.scp.css */
.sleep-record-table-controls[b-wxyuz2ybfs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.sleep-record-table-controls__left[b-wxyuz2ybfs] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sleep-record-filter-btn[b-wxyuz2ybfs] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.sleep-record-filter-badge[b-wxyuz2ybfs] {
    background: var(--admin-primary, var(--bs-primary));
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.sleep-record-search[b-wxyuz2ybfs] {
    position: relative;
}

.sleep-record-search__input[b-wxyuz2ybfs] {
    padding-right: 40px;
    min-width: 280px;
}

.sleep-record-search__icon[b-wxyuz2ybfs] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}

.sleep-record-filter-radios[b-wxyuz2ybfs] {
    display: flex;
    gap: 20px;
}

.sleep-record-filter-radio[b-wxyuz2ybfs] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    align-self: flex-start;
}

.sleep-record-filter-radio .form-check-input[b-wxyuz2ybfs] {
    margin: 0;
    flex-shrink: 0;
}

.sleep-record-filter-chip[b-wxyuz2ybfs] {
    display: inline-block;
    padding: 8px;
    border-radius: 10px;
    font-size: 1rem;
    text-align: center;
    min-width: 80px;
}

.sleep-record-filter-chip--all[b-wxyuz2ybfs] {
    background: color-mix(in srgb, var(--badge-neutral) 10%, transparent);
    color: var(--badge-neutral);
}

.sleep-record-filter-chip--in-study[b-wxyuz2ybfs] {
    background: color-mix(in srgb, var(--badge-high) 10%, transparent);
    color: var(--badge-high);
}

.sleep-record-filter-chip--not-in-study[b-wxyuz2ybfs] {
    background: color-mix(in srgb, var(--badge-low) 10%, transparent);
    color: var(--badge-low);
}

.sleep-record-filter-modal .modal-body[b-wxyuz2ybfs] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sleep-record-filter-field[b-wxyuz2ybfs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sleep-record-filter-field__label[b-wxyuz2ybfs] {
    font-weight: 500;
    color: var(--bs-body-color);
    margin: 0;
}

.sleep-record-filter-modal .modal-footer[b-wxyuz2ybfs] {
    display: flex;
    gap: 12px;
}

.sleep-record-filter-modal .modal-footer .btn[b-wxyuz2ybfs] {
    flex: 1;
}
/* /Views/SleepRecord/Recommendation.cshtml.rz.scp.css */
.recommendation-detail-page[b-hlhmyidx1f] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Header */
.recommendation-detail-header[b-hlhmyidx1f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

/* Badge layout — base padding/radius is scoped to the data-table; this
   header badge sits outside any table, so it needs its own layout */
.recommendation-detail-header[b-hlhmyidx1f]  .data-table-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    white-space: nowrap;
}

.recommendation-detail-header[b-hlhmyidx1f]  .data-table-badge--high {
    background: color-mix(in srgb, var(--badge-high) 10%, transparent);
    color: var(--badge-high);
}

.recommendation-detail-header[b-hlhmyidx1f]  .data-table-badge--na {
    background: color-mix(in srgb, var(--badge-neutral) 10%, transparent);
    color: var(--badge-neutral);
}

/* Summary card */
.recommendation-detail-summary-card[b-hlhmyidx1f] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card-sm);
    padding: 24px 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.recommendation-detail-summary-item[b-hlhmyidx1f] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recommendation-detail-summary-label[b-hlhmyidx1f] {
    font-size: 20px;
    color: var(--bs-secondary-color);
}

.recommendation-detail-summary-value[b-hlhmyidx1f] {
    font-size: 20px;
    font-weight: 500;
}

/* Cards */
.recommendation-detail-card[b-hlhmyidx1f] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    padding: 30px;
}

.recommendation-detail-card-title[b-hlhmyidx1f] {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 20px;
}

/* Window groups — each window's schedule reads as a labelled legend band on
   top of a framed table of that window's own sleep entries. */
.recommendation-groups-title[b-hlhmyidx1f] {
    margin: 0;
}

.recommendation-groups[b-hlhmyidx1f] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.recommendation-group[b-hlhmyidx1f] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.recommendation-group-legend[b-hlhmyidx1f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 40px;
    padding: 20px 24px;
    background: color-mix(in srgb, var(--admin-primary) 6%, transparent);
    border-bottom: 1px solid var(--bs-border-color);
}

.recommendation-group-dates[b-hlhmyidx1f] {
    font-size: 20px;
    font-weight: 600;
}

.recommendation-group-times[b-hlhmyidx1f] {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.recommendation-group-time[b-hlhmyidx1f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recommendation-group-time-label[b-hlhmyidx1f] {
    font-size: 20px;
    color: var(--bs-secondary-color);
}

.recommendation-group-time-value[b-hlhmyidx1f] {
    font-size: 20px;
    font-weight: 500;
}

.recommendation-group-count[b-hlhmyidx1f] {
    margin-left: auto;
    font-size: 20px;
    color: var(--bs-secondary-color);
}

/* Unscheduled gap blocks read neutral rather than schedule-tinted */
.recommendation-group--unscheduled .recommendation-group-legend[b-hlhmyidx1f] {
    background: var(--bs-secondary-bg);
}

.recommendation-group-no-schedule[b-hlhmyidx1f] {
    font-style: italic;
}

.recommendation-group-empty[b-hlhmyidx1f] {
    margin: 0;
    padding: 24px;
    font-size: 20px;
    color: var(--bs-secondary-color);
}

/* Entries table inside a group */
.recommendation-group-scroll[b-hlhmyidx1f] {
    overflow-x: auto;
}

.recommendation-group-table[b-hlhmyidx1f] {
    width: 100%;
    border-collapse: collapse;
}

.recommendation-group-table[b-hlhmyidx1f]  thead th {
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    color: var(--bs-secondary-color);
    padding: 14px 20px;
    white-space: nowrap;
    border-bottom: 1px solid var(--bs-border-color);
}

.recommendation-group-table[b-hlhmyidx1f]  tbody td {
    font-size: 20px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bs-border-color);
    vertical-align: middle;
}

.recommendation-group-table[b-hlhmyidx1f]  tbody tr:last-child td {
    border-bottom: none;
}

/* Row badges — on-track + has-custom-answers markers in their own leading
   column as matching circular badges. On-track mirrors the sleep-event icon
   (orange); custom answers uses the admin accent. */
.recommendation-group[b-hlhmyidx1f]  .sleep-entry-flags {
    text-align: center;
    white-space: nowrap;
}

/* Bedtime / Wake Time: the time on top, its calendar date underneath — the
   diary day column can name the previous calendar day for overnight sleeps. */
.recommendation-group[b-hlhmyidx1f]  .sleep-entry-diary-day,
.recommendation-group[b-hlhmyidx1f]  .sleep-entry-time,
.recommendation-group[b-hlhmyidx1f]  .sleep-entry-time-date {
    white-space: nowrap;
}

.recommendation-group[b-hlhmyidx1f]  .sleep-entry-time,
.recommendation-group[b-hlhmyidx1f]  .sleep-entry-time-date {
    display: block;
}

.recommendation-group[b-hlhmyidx1f]  .sleep-entry-time-date {
    font-size: 0.8em;
    color: var(--bs-secondary-color);
}

.recommendation-group[b-hlhmyidx1f]  .sleep-entry-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

.recommendation-group[b-hlhmyidx1f]  .sleep-entry-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Drop the inline baseline gap so the glyph sits dead-centre in the circle. */
.recommendation-group[b-hlhmyidx1f]  .sleep-entry-badge img,
.recommendation-group[b-hlhmyidx1f]  .sleep-entry-badge svg {
    display: block;
}

.recommendation-group[b-hlhmyidx1f]  .sleep-entry-badge--on-track {
    background: color-mix(in srgb, #FF8400 10%, transparent);
    border: 1px solid #FF8400;
}

.recommendation-group[b-hlhmyidx1f]  .sleep-entry-badge--custom {
    background: color-mix(in srgb, var(--admin-primary) 10%, transparent);
    border: 1px solid var(--admin-primary);
    color: var(--admin-primary);
}

.recommendation-group[b-hlhmyidx1f]  .sleep-entry-view {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border: 1px solid var(--admin-primary);
    border-radius: 8px;
    background: transparent;
    color: var(--admin-primary);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.recommendation-group[b-hlhmyidx1f]  .sleep-entry-view:hover {
    background: var(--admin-primary);
    color: #fff;
}