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

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-izaxdq5kxz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-izaxdq5kxz] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-izaxdq5kxz] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-izaxdq5kxz] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-izaxdq5kxz] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-izaxdq5kxz] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-izaxdq5kxz] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-izaxdq5kxz 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-izaxdq5kxz] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-izaxdq5kxz {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Calendar/AppointmentEditor.razor.rz.scp.css */
/* Scoped: only elements written in AppointmentEditor.razor. The dialog itself is nocturne's
   (.dialog-backdrop, .dialog), widened here. */

.dialog-backdrop[b-ynlxzdrg87] {
    z-index: 1050;
    overflow-y: auto;
}

.appointment-dialog[b-ynlxzdrg87] {
    width: min(620px, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.appointment-state[b-ynlxzdrg87] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    font-size: 14px;
}

.appointment-form[b-ynlxzdrg87] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-row[b-ynlxzdrg87] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
}

.patient-results[b-ynlxzdrg87] {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}

.patient-results .btn[b-ynlxzdrg87] {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    color: var(--color-text);
}

.picked-patient[b-ynlxzdrg87] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
}

.appointment-facts[b-ynlxzdrg87] {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 14px;
}

.appointment-facts dt[b-ynlxzdrg87] {
    font-weight: 600;
}

.appointment-facts dd[b-ynlxzdrg87] {
    margin: 0;
}

.status-actions[b-ynlxzdrg87] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-divider);
}

.cancel-row[b-ynlxzdrg87] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.cancel-row .input[b-ynlxzdrg87] {
    flex: 1 1 12rem;
}

.danger[b-ynlxzdrg87] {
    color: var(--color-danger);
}

.alert-mark[b-ynlxzdrg87] {
    display: inline-grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--color-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
/* /Components/Pages/Calendar/CalendarView.razor.rz.scp.css */
/* Scoped: only elements written in CalendarView.razor. The status colours (.status-*) are
   global in app.css — the editor and the patient profile use them too. */

.cal-toolbar[b-fmujxnj9vh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.cal-nav[b-fmujxnj9vh],
.cal-modes[b-fmujxnj9vh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

.cal-date[b-fmujxnj9vh] {
    width: 10.5rem;
}

.cal-select[b-fmujxnj9vh] {
    width: auto;
    min-width: 10rem;
}

.cal-title[b-fmujxnj9vh] {
    font-size: 15px;
    margin-left: 0.25rem;
}

.cal-check[b-fmujxnj9vh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 13px;
    white-space: nowrap;
}

/* Two-state toggles: Zi / Săptămână, Medici / Cabinete. */
.segmented[b-fmujxnj9vh] {
    display: inline-flex;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.segmented button[b-fmujxnj9vh] {
    border: 0;
    background: transparent;
    color: var(--color-text);
    padding: 4px 12px;
    font-size: 13px;
}

.segmented button.active[b-fmujxnj9vh] {
    background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
    color: var(--color-accent);
    font-weight: 600;
}

.cal-scroll[b-fmujxnj9vh] {
    overflow: auto;
    max-height: calc(100vh - 13rem);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.cal-grid[b-fmujxnj9vh] {
    display: grid;
    min-width: max-content;
}

.cal-corner[b-fmujxnj9vh],
.cal-head[b-fmujxnj9vh] {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-divider);
}

.cal-corner[b-fmujxnj9vh] {
    left: 0;
    z-index: 4;
}

.cal-head[b-fmujxnj9vh] {
    padding: 0.5rem 0.6rem;
    font-weight: 600;
    font-size: 14px;
    border-left: 1px solid var(--color-divider);
}

.cal-head.today[b-fmujxnj9vh] {
    color: var(--color-accent);
}

.cal-head-note[b-fmujxnj9vh] {
    font-weight: 400;
    font-size: 12px;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.cal-times[b-fmujxnj9vh] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-surface);
}

.cal-times span[b-fmujxnj9vh] {
    position: absolute;
    right: 0.4rem;
    transform: translateY(-50%);
    font-size: 11px;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.cal-times span:first-child[b-fmujxnj9vh] {
    transform: none;
}

.cal-col[b-fmujxnj9vh] {
    position: relative;
    border-left: 1px solid var(--color-divider);
}

.cal-slot[b-fmujxnj9vh] {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    padding: 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-divider) 45%, transparent);
    background: transparent;
}

.cal-slot.hour[b-fmujxnj9vh] {
    border-top-color: var(--color-divider);
}

/* Outside the working hours: shaded, still clickable — booking there is the service's call (R-PR4). */
.cal-slot.off[b-fmujxnj9vh] {
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--color-text) 6%, transparent) 0 6px,
        color-mix(in srgb, var(--color-text) 3%, transparent) 6px 12px);
}

button.cal-slot:hover[b-fmujxnj9vh] {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    cursor: pointer;
}

.cal-appt[b-fmujxnj9vh] {
    position: absolute;
    left: 3px;
    right: 3px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    overflow: hidden;
    padding: 2px 6px 2px 8px;
    border: 1px solid color-mix(in srgb, var(--doctor) 45%, transparent);
    border-left: 4px solid var(--doctor);
    border-radius: 6px;
    background: color-mix(in srgb, var(--doctor) 14%, var(--color-surface));
    color: var(--color-text);
    font-size: 12px;
    line-height: 1.25;
    text-align: left;
    box-shadow: var(--shadow-sm);
}

.cal-appt:hover[b-fmujxnj9vh] {
    background: color-mix(in srgb, var(--doctor) 22%, var(--color-surface));
}

.cal-appt-time[b-fmujxnj9vh] {
    font-weight: 600;
    white-space: nowrap;
}

.cal-appt-patient[b-fmujxnj9vh] {
    font-weight: 600;
    white-space: nowrap;
}

.cal-appt-meta[b-fmujxnj9vh] {
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
    white-space: nowrap;
}

.cal-appt.status-cancelled[b-fmujxnj9vh],
.cal-appt.status-noshow[b-fmujxnj9vh] {
    opacity: 0.55;
    text-decoration: line-through;
}

.cal-appt.status-completed[b-fmujxnj9vh] {
    background: color-mix(in srgb, var(--doctor) 6%, var(--color-surface));
}

.alert-mark[b-fmujxnj9vh] {
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
    border-radius: 50%;
    background: var(--color-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.cal-legend[b-fmujxnj9vh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
}

.cal-legend-off[b-fmujxnj9vh] {
    padding: 0 0.4rem;
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--color-text) 8%, transparent) 0 6px,
        color-mix(in srgb, var(--color-text) 3%, transparent) 6px 12px);
}

/* Under half an hour a card is one line — time and patient — or the name would be cut off. */
.cal-appt.compact[b-fmujxnj9vh] {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0;
    padding-bottom: 0;
}

.cal-appt.compact .cal-appt-meta[b-fmujxnj9vh] {
    display: none;
}
/* /Components/Pages/Catalog/CategoriesPage.razor.rz.scp.css */
/* Scoped: only elements written in CategoriesPage.razor. */

.actions[b-w9z9qp66b1] {
    white-space: nowrap;
}

.inactive td[b-w9z9qp66b1] {
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* /Components/Pages/Catalog/GroupEditPage.razor.rz.scp.css */
/* Scoped: only elements written in GroupEditPage.razor. */

.small-number[b-s5qh1wjwxb] {
    width: 5rem;
}

.actions[b-s5qh1wjwxb] {
    white-space: nowrap;
}

.inactive td[b-s5qh1wjwxb] {
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.add-item[b-s5qh1wjwxb] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 36rem;
    margin: 1rem 0;
}

.add-item label[b-s5qh1wjwxb] {
    font-size: 13px;
    font-weight: 600;
}

.results[b-s5qh1wjwxb] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}

.results .btn[b-s5qh1wjwxb] {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    color: var(--color-text);
}
/* /Components/Pages/Catalog/GroupsPage.razor.rz.scp.css */
/* Scoped: only elements written in GroupsPage.razor. */

.page-header[b-odnsbjhikx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0 1rem;
    max-width: 960px;
}

/* When the button wraps under the text, keep it off whatever comes next (tabs, filters). */
.page-header > .btn[b-odnsbjhikx] {
    margin-bottom: 1rem;
}

.show-inactive[b-odnsbjhikx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 14px;
    margin-bottom: 0.75rem;
}

.name a[b-odnsbjhikx] {
    color: var(--color-text);
    font-weight: 600;
}

.name a:hover[b-odnsbjhikx] {
    color: var(--color-accent);
}

.inactive td[b-odnsbjhikx] {
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* /Components/Pages/Catalog/OperationEditPage.razor.rz.scp.css */
/* Scoped: only elements written in OperationEditPage.razor. */

.span-4[b-3zlvn9jzzy] {
    grid-column: 1 / -1;
}
/* /Components/Pages/Catalog/OperationsPage.razor.rz.scp.css */
/* Scoped: only elements written in OperationsPage.razor. */

.page-header[b-rymuas1l5z] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0 1rem;
    max-width: 960px;
}

/* When the button wraps under the text, keep it off whatever comes next (tabs, filters). */
.page-header > .btn[b-rymuas1l5z] {
    margin-bottom: 1rem;
}

.filters[b-rymuas1l5z] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.show-inactive[b-rymuas1l5z] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 14px;
    padding-bottom: 8px;
    white-space: nowrap;
}

.code[b-rymuas1l5z] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.name a[b-rymuas1l5z] {
    color: var(--color-text);
    font-weight: 600;
}

.name a:hover[b-rymuas1l5z] {
    color: var(--color-accent);
}

.inactive td[b-rymuas1l5z] {
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

@media (max-width: 720px) {
    .filters[b-rymuas1l5z] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Patients/PatientEditPage.razor.rz.scp.css */
/* Scoped: only elements written in PatientEditPage.razor. Cards and the form grid are global. */

.span-4[b-dpazoungp9] {
    grid-column: 1 / -1;
}

.duplicates[b-dpazoungp9] {
    max-width: 960px;
}

.duplicates ul[b-dpazoungp9] {
    margin: 0.5rem 0 0.75rem;
}
/* /Components/Pages/Patients/PatientImagesSection.razor.rz.scp.css */
/* Scoped: the patient's images in the profile. */

.section-header[b-wfv5o7ied9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.upload-panel[b-wfv5o7ied9] {
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px dashed var(--color-divider);
    border-radius: 10px;
}

.upload-actions[b-wfv5o7ied9] {
    display: flex;
    gap: 0.5rem;
}

.image-grid[b-wfv5o7ied9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
}

.image-card[b-wfv5o7ied9] {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-divider);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.image-card:hover[b-wfv5o7ied9],
.image-card:focus-visible[b-wfv5o7ied9] {
    border-color: var(--color-accent);
    outline: none;
}

.image-card img[b-wfv5o7ied9] {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #0d1110;
}

.image-caption[b-wfv5o7ied9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 0.5rem;
    padding: 0.4rem 0.6rem 0;
    font-size: 13px;
}

.image-caption span[b-wfv5o7ied9] {
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
    font-variant-numeric: tabular-nums;
}

.image-description[b-wfv5o7ied9] {
    padding: 0.1rem 0.6rem 0;
    font-size: 12px;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-card > :last-child[b-wfv5o7ied9] {
    padding-bottom: 0.5rem;
}

.image-dialog-backdrop[b-wfv5o7ied9] {
    z-index: 1050;
}

.image-dialog[b-wfv5o7ied9] {
    width: min(1100px, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.image-dialog-actions[b-wfv5o7ied9] {
    flex-wrap: wrap;
    align-items: center;
}

.danger[b-wfv5o7ied9] {
    color: var(--color-danger);
}
/* /Components/Pages/Patients/PatientProfilePage.razor.rz.scp.css */
/* Scoped: only elements written in PatientProfilePage.razor. Cards and tags are global. */

.profile-header[b-8rud5cz552] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0 1rem;
    max-width: 960px;
}

.profile-actions[b-8rud5cz552] {
    display: flex;
    gap: 0.5rem;
}

/* R-PA4: the alerts are the first thing on the page, in the danger colour of both themes. */
.medical-alerts[b-8rud5cz552] {
    max-width: 960px;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-danger) 55%, transparent);
    background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
    color: var(--color-text);
}

.medical-alerts strong[b-8rud5cz552] {
    color: var(--color-danger);
}

.facts[b-8rud5cz552] {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.5rem 1rem;
    margin: 0.75rem 0 0;
}

.facts dt[b-8rud5cz552] {
    font-weight: 600;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.facts dd[b-8rud5cz552] {
    margin: 0;
}

.notes[b-8rud5cz552] {
    white-space: pre-line;
}

.access-list[b-8rud5cz552] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 14px;
}

@media (max-width: 720px) {
    .facts[b-8rud5cz552] {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .facts dd[b-8rud5cz552] {
        margin-bottom: 0.5rem;
    }
}

.when[b-8rud5cz552] {
    white-space: nowrap;
}

.section-header[b-8rud5cz552] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.treatment-note[b-8rud5cz552] {
    white-space: pre-line;
}

.superseded .treatment-name[b-8rud5cz552],
.superseded .treatment-note[b-8rud5cz552],
.superseded td.when[b-8rud5cz552] {
    text-decoration: line-through;
    opacity: 0.6;
}

.treatment-status[b-8rud5cz552] {
    font-style: italic;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
}
/* /Components/Pages/Patients/PatientsListPage.razor.rz.scp.css */
/* Scoped: only elements written in PatientsListPage.razor. Cards, tables and tags are global. */

.page-header[b-baktxzrpre] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0 1rem;
    max-width: 960px;
}

/* When the button wraps under the text, keep it off whatever comes next (tabs, filters). */
.page-header > .btn[b-baktxzrpre] {
    margin-bottom: 1rem;
}

.filters[b-baktxzrpre] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.show-archived[b-baktxzrpre] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 14px;
    padding-bottom: 8px;
    white-space: nowrap;
}

.name[b-baktxzrpre] {
    white-space: nowrap;
}

.name a[b-baktxzrpre] {
    color: var(--color-text);
    font-weight: 600;
}

.name a:hover[b-baktxzrpre] {
    color: var(--color-accent);
}

.phone[b-baktxzrpre] {
    white-space: nowrap;
}

/* Medical alerts exist: a small red mark, never the alert text itself in a list. */
.alert-mark[b-baktxzrpre] {
    display: inline-grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.35rem;
    border-radius: 50%;
    background: var(--color-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    vertical-align: 0.05rem;
}

.archived td[b-baktxzrpre] {
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.pager[b-baktxzrpre] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    font-size: 14px;
}

.pager > :first-child[b-baktxzrpre] {
    margin-right: auto;
}

@media (max-width: 720px) {
    .filters[b-baktxzrpre] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Patients/RadiographViewer.razor.rz.scp.css */
/* Scoped: the radiograph viewer. The stage is dark whatever the theme — X-rays are read on black. */

.rx-viewer[b-tf6r27ejrw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.rx-toolbar[b-tf6r27ejrw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.rx-title[b-tf6r27ejrw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6rem;
    min-width: 0;
}

.rx-tools[b-tf6r27ejrw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.rx-tools .btn.active[b-tf6r27ejrw] {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.rx-level[b-tf6r27ejrw] {
    min-width: 4.2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.rx-stage[b-tf6r27ejrw] {
    height: 55vh;
    min-height: 220px;
    border-radius: 10px;
    background: #0d1110;
    overflow: auto;
}

.rx-stage.fit[b-tf6r27ejrw] {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.rx-stage.fit img[b-tf6r27ejrw] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.rx-stage.zoomed img[b-tf6r27ejrw] {
    display: block;
    max-width: none;
    height: auto;
}

.rx-stage img.negative[b-tf6r27ejrw] {
    filter: invert(1);
}
/* /Components/Pages/Plans/DentalChart.razor.rz.scp.css */
/* Scoped: the chart's SVG. Colours come from the theme tokens, so it follows light and dark;
   the enamel has its own tokens (below), pinned to light on paper. */

.chart[b-38hbnm8ij9] {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    user-select: none;
    --tooth-hi: #ffffff;
    --tooth-lo: #cbd3ce;
    --tooth-edge: #9eaaa3;
    --tooth-line: rgba(70, 84, 77, 0.42);
}

/* Dark theme: a muted enamel, so the teeth don't glare on the dark card. Twice, as everywhere:
   for the OS preference and for the explicit toggle. Not on paper. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .chart:not(.paper)[b-38hbnm8ij9] {
        --tooth-hi: #e6ebe8;
        --tooth-lo: #9faba5;
        --tooth-edge: #6f7c75;
        --tooth-line: rgba(30, 40, 35, 0.5);
    }
}

:root[data-theme="dark"] .chart:not(.paper)[b-38hbnm8ij9] {
    --tooth-hi: #e6ebe8;
    --tooth-lo: #9faba5;
    --tooth-edge: #6f7c75;
    --tooth-line: rgba(30, 40, 35, 0.5);
}

.midline[b-38hbnm8ij9] {
    stroke: var(--color-divider);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}

.tooth[b-38hbnm8ij9] {
    cursor: pointer;
    outline: none;
}

.crown[b-38hbnm8ij9] {
    stroke: var(--tooth-edge);
    stroke-width: 1.1;
    stroke-linejoin: round;
    filter: drop-shadow(0 1.2px 1.2px rgba(20, 35, 28, 0.22));
    transition: stroke 0.12s ease, filter 0.12s ease;
}

.fissure[b-38hbnm8ij9] {
    fill: none;
    stroke: var(--tooth-line);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Rows: the crown is a plain rounded tile; primary teeth keep a dashed edge there. */
.rows .tooth.primary .crown[b-38hbnm8ij9] {
    stroke-dasharray: 3 2;
}

.tooth text[b-38hbnm8ij9] {
    fill: var(--color-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* Arches: the number sits outside the crown, quieter than the tooth. */
.tooth .number[b-38hbnm8ij9] {
    fill: color-mix(in srgb, var(--color-text) 62%, transparent);
    font-weight: 600;
}

.tooth:hover .crown[b-38hbnm8ij9] {
    stroke: var(--color-accent);
    filter: drop-shadow(0 1.5px 2.5px rgba(20, 35, 28, 0.3)) brightness(1.03);
}

.tooth:hover .number[b-38hbnm8ij9] {
    fill: var(--color-text);
}

.tooth:focus-visible .crown[b-38hbnm8ij9] {
    stroke: var(--color-accent);
    stroke-width: 2.5;
}

.tooth.selected .crown[b-38hbnm8ij9] {
    stroke: color-mix(in srgb, var(--color-accent) 75%, #000);
    stroke-width: 1.4;
}

.tooth.selected .fissure[b-38hbnm8ij9] {
    stroke: rgba(255, 255, 255, 0.55);
}

.tooth.selected .number[b-38hbnm8ij9] {
    fill: var(--color-accent);
    font-weight: 700;
}

.dot-proposed[b-38hbnm8ij9] { fill: #2f6fd6; }
.dot-accepted[b-38hbnm8ij9] { fill: #d99a1e; }
.dot-done[b-38hbnm8ij9] { fill: #1d7a4f; }

.tooth circle[b-38hbnm8ij9] {
    stroke: #fff;
    stroke-width: 0.8;
    pointer-events: none;
}

/* Arches: a taller drawing, kept to a comfortable size on wide screens. */
.chart.arches[b-38hbnm8ij9] {
    max-width: 560px;
    margin: 0 auto;
}

.guide[b-38hbnm8ij9] {
    stroke: color-mix(in srgb, var(--color-text) 25%, transparent);
    stroke-width: 1.2;
}

.side[b-38hbnm8ij9],
.caption[b-38hbnm8ij9] {
    fill: color-mix(in srgb, var(--color-text) 55%, transparent);
    font-size: 11px;
    pointer-events: none;
}

.caption[b-38hbnm8ij9] {
    font-size: 13px;
    font-weight: 600;
}
/* /Components/Pages/Plans/PlanPage.razor.rz.scp.css */
/* Scoped: only elements written in PlanPage.razor. Cards, tables and tags are global. */

.plan-header[b-oyw8868o7r] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    max-width: 1100px;
}

.plan-actions[b-oyw8868o7r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.plan-status[b-oyw8868o7r],
.item-status[b-oyw8868o7r] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
    background: color-mix(in srgb, var(--status, #6b7280) 16%, var(--color-surface));
    color: color-mix(in srgb, var(--status, #6b7280) 75%, var(--color-text));
    border: 1px solid color-mix(in srgb, var(--status, #6b7280) 40%, transparent);
    white-space: nowrap;
}

.item-status[b-oyw8868o7r] {
    margin-left: 0;
}

.plan-draft[b-oyw8868o7r] { --status: #6b7280; }
.plan-presented[b-oyw8868o7r], .item-proposed[b-oyw8868o7r] { --status: #2f6fd6; }
.plan-accepted[b-oyw8868o7r], .item-accepted[b-oyw8868o7r] { --status: #a16207; }
.plan-inprogress[b-oyw8868o7r], .item-inprogress[b-oyw8868o7r] { --status: #7c3aed; }
.plan-completed[b-oyw8868o7r], .item-done[b-oyw8868o7r] { --status: #1d7a4f; }
.plan-cancelled[b-oyw8868o7r], .item-cancelled[b-oyw8868o7r], .item-refused[b-oyw8868o7r] { --status: #c0392b; }

.medical-alerts[b-oyw8868o7r] {
    max-width: 1100px;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-danger) 55%, transparent);
    background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
}

.medical-alerts strong[b-oyw8868o7r] {
    color: var(--color-danger);
}

.plan-notes[b-oyw8868o7r] {
    max-width: 1100px;
    white-space: pre-line;
}

.cancel-plan[b-oyw8868o7r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-divider);
}

.cancel-plan .input[b-oyw8868o7r] {
    flex: 1 1 16rem;
}

.chart-toolbar[b-oyw8868o7r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.segmented[b-oyw8868o7r] {
    display: inline-flex;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.segmented button[b-oyw8868o7r] {
    border: 0;
    background: transparent;
    color: var(--color-text);
    padding: 4px 12px;
    font-size: 13px;
}

.segmented button.active[b-oyw8868o7r] {
    background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
    color: var(--color-accent);
    font-weight: 600;
}

.multi-toggle[b-oyw8868o7r] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 14px;
}

.quick-select[b-oyw8868o7r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.selection[b-oyw8868o7r] {
    margin: 0.5rem 0 0.25rem;
}

.legend[b-oyw8868o7r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.dot[b-oyw8868o7r] {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-left: 0.5rem;
}

.dot-proposed[b-oyw8868o7r] { background: #2f6fd6; }
.dot-accepted[b-oyw8868o7r] { background: #d99a1e; }
.dot-done[b-oyw8868o7r] { background: #1d7a4f; }

.add-panel[b-oyw8868o7r] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-divider);
    max-width: 44rem;
}

.results[b-oyw8868o7r] {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}

.results .btn[b-oyw8868o7r] {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    color: var(--color-text);
    gap: 0.4rem;
}

.picked[b-oyw8868o7r] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}

.picked-options[b-oyw8868o7r] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}

.picked-options label[b-oyw8868o7r] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 13px;
}

.small-number[b-oyw8868o7r] {
    width: 5rem;
}

.items-header[b-oyw8868o7r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.bulk[b-oyw8868o7r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.bulk-reason[b-oyw8868o7r] {
    width: 14rem;
}

.stage[b-oyw8868o7r] {
    margin-top: 1rem;
}

.stage-header[b-oyw8868o7r] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
}

.items .target[b-oyw8868o7r] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.items .nowrap[b-oyw8868o7r],
.items .actions[b-oyw8868o7r] {
    white-space: nowrap;
}

.items tr.dim td[b-oyw8868o7r] {
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.items tr.match td[b-oyw8868o7r] {
    background: color-mix(in srgb, var(--color-accent) 9%, transparent);
}

.edit-row td[b-oyw8868o7r] {
    background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}

.edit-grid[b-oyw8868o7r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.edit-grid label[b-oyw8868o7r] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 13px;
}

.edit-grid .wide[b-oyw8868o7r] {
    grid-column: span 2;
}

.danger[b-oyw8868o7r] {
    color: var(--color-danger);
}

.plan-totals[b-oyw8868o7r] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr);
    gap: 0.75rem 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-divider);
}

.plan-totals > div[b-oyw8868o7r] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.plan-totals span[b-oyw8868o7r] {
    font-size: 13px;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.plan-totals strong[b-oyw8868o7r] {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.plan-progress[b-oyw8868o7r] {
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    overflow: hidden;
}

.plan-progress > div[b-oyw8868o7r] {
    height: 100%;
    background: var(--color-accent);
}

.span-4[b-oyw8868o7r] {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    .plan-totals[b-oyw8868o7r] {
        grid-template-columns: minmax(0, 1fr);
    }

    .edit-grid .wide[b-oyw8868o7r] {
        grid-column: auto;
    }
}

/* On a phone the chart keeps a size a finger can hit, and scrolls sideways inside its card. */
.chart-scroll[b-oyw8868o7r] {
    overflow-x: auto;
}

.chart-scroll[b-oyw8868o7r]  .chart.rows {
    min-width: 640px;
}

.items th[b-oyw8868o7r] {
    white-space: nowrap;
}

.confirm[b-oyw8868o7r] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 13px;
}

.cancel-item[b-oyw8868o7r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cancel-item .input[b-oyw8868o7r] {
    flex: 1 1 14rem;
}

/* Wide screens: chart | (radiograph over items). The chart column stays in view (sticky) while the stages scroll. */
@media (min-width: 1200px) {
    .plan-workspace[b-oyw8868o7r] {
        display: grid;
        grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
        align-items: start;
        gap: 1.25rem;
    }

    .plan-workspace > .settings-section[b-oyw8868o7r],
    .right-column > .settings-section[b-oyw8868o7r] {
        max-width: none;
        margin-bottom: 0;
    }

    .right-column[b-oyw8868o7r] {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        min-width: 0;
    }

    .chart-column[b-oyw8868o7r] {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    .chart-column .add-panel[b-oyw8868o7r] {
        max-width: none;
    }
}

/* The radiograph next to the plan: a picker, and the viewer under it once one is chosen. */
.rx-picker[b-oyw8868o7r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.rx-picker .input[b-oyw8868o7r] {
    flex: 1 1 16rem;
    max-width: 32rem;
}

.rx-picker.with-image[b-oyw8868o7r] {
    margin-bottom: 0.75rem;
}

/* Performed treatments under an item: the sessions so far, and the form for a new one. */
.sessions-row td[b-oyw8868o7r] {
    padding-top: 0 !important;
    border-top: 0;
}

.record-session[b-oyw8868o7r] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem 1rem;
    align-items: start;
}

.record-session label[b-oyw8868o7r] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 13px;
}

.record-session .record-completes[b-oyw8868o7r] {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.record-actions[b-oyw8868o7r] {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 720px) {
    .record-session[b-oyw8868o7r] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Rows under an item (edit, cancel, record, sessions) span the whole table, which can be wider
   than the card and scroll: keep their content in the visible width, pinned to the left. */
.stage .table-scroll[b-oyw8868o7r] {
    container-type: inline-size;
}

.edit-row td > *[b-oyw8868o7r],
.sessions-row td > *[b-oyw8868o7r] {
    position: sticky;
    left: 0.5rem;
    max-width: calc(100cqi - 1rem);
}

/* /Components/Pages/Plans/PlanPrintPage.razor.rz.scp.css */
/* Scoped: the printable plan. On screen it is a white sheet; on paper the app's chrome goes
   (the global print rules in app.css) and only the sheet remains. */

.print-toolbar[b-6ophvvcubj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 210mm;
    margin-bottom: 1rem;
}

.print-sheet[b-6ophvvcubj] {
    max-width: 210mm;
    padding: 18mm 16mm;
    background: #fff;
    color: #111;
    border: 1px solid var(--color-divider);
    box-shadow: var(--shadow-sm);
    font-size: 13px;
    line-height: 1.45;
}

.sheet-header[b-6ophvvcubj] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #1d7a4f;
}

.clinic-name[b-6ophvvcubj] {
    font-size: 16px;
}

.sheet-title[b-6ophvvcubj] {
    font-size: 20px;
    margin: 0 0 0.5rem;
    color: #111;
}

.sheet-stage[b-6ophvvcubj] {
    font-size: 14px;
    margin: 1rem 0 0.35rem;
    color: #111;
}

.sheet-table[b-6ophvvcubj],
.sheet-totals[b-6ophvvcubj] {
    width: 100%;
    border-collapse: collapse;
}

.sheet-table th[b-6ophvvcubj],
.sheet-table td[b-6ophvvcubj] {
    border: 1px solid #c8cfca;
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
    color: #111;
}

.sheet-table th[b-6ophvvcubj] {
    background: #eef3ef;
    font-size: 12px;
}

.num[b-6ophvvcubj] {
    text-align: right !important;
    white-space: nowrap;
}

.sheet-totals[b-6ophvvcubj] {
    width: auto;
    margin: 1rem 0 0 auto;
}

.sheet-totals td[b-6ophvvcubj] {
    padding: 2px 0 2px 1.5rem;
    color: #111;
}

.sheet-notes[b-6ophvvcubj] {
    white-space: pre-line;
    margin-top: 1rem;
}

.signatures[b-6ophvvcubj] {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3rem;
}

.signatures div[b-6ophvvcubj] {
    flex: 1;
    font-size: 12px;
}

.signatures span[b-6ophvvcubj] {
    display: block;
    margin-top: 2.5rem;
    border-bottom: 1px solid #111;
}

@media print {
    .print-sheet[b-6ophvvcubj] {
        max-width: none;
        padding: 0;
        border: 0;
        box-shadow: none;
    }
}

.print-options[b-6ophvvcubj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The sheet is paper: whatever the app's theme, it uses the light palette — the chart inside
   draws with the theme tokens, so they are pinned here. */
.print-sheet[b-6ophvvcubj] {
    --color-surface: #ffffff;
    --color-text: #111111;
    --color-accent: #1d7a4f;
    --color-divider: #c8cfca;
}

.sheet-chart[b-6ophvvcubj] {
    margin: 0.5rem auto 1rem;
    max-width: 300px;
    text-align: center;
    break-inside: avoid;
}

.sheet-chart figcaption[b-6ophvvcubj] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.dot[b-6ophvvcubj] {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    margin-left: 0.4rem;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.dot-proposed[b-6ophvvcubj] { background: #2f6fd6; }
.dot-accepted[b-6ophvvcubj] { background: #d99a1e; }
.dot-done[b-6ophvvcubj] { background: #1d7a4f; }

@media print {
    .sheet-chart[b-6ophvvcubj] {
        max-width: 250px;
    }

    .sheet-chart[b-6ophvvcubj]  svg {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}
/* /Components/Pages/Schedules/DoctorSchedulePage.razor.rz.scp.css */
/* Scoped: only elements written in DoctorSchedulePage.razor. Cards, the form grid, tables and
   tags are global (app.css, nocturne.css). */

.section-header[b-ray139pq5i] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.week-nav[b-ray139pq5i] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 14px;
}

.week[b-ray139pq5i] {
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
}

.week-day[b-ray139pq5i] {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    align-items: start;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-divider);
}

.week-day:last-child[b-ray139pq5i] {
    border-bottom: 0;
}

.week-day.today .week-day-name[b-ray139pq5i] {
    color: var(--color-accent);
}

.week-day-name[b-ray139pq5i] {
    font-weight: 600;
    padding-top: 6px;
}

.week-day-intervals[b-ray139pq5i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    min-height: 36px;
}

.interval[b-ray139pq5i] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.interval-time[b-ray139pq5i] {
    width: 7.5rem;
}

.interval-cabinet[b-ray139pq5i] {
    width: auto;
    min-width: 9rem;
}

.versions[b-ray139pq5i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 1rem;
}

.valid-from[b-ray139pq5i] {
    max-width: 14rem;
}

.schedule-actions[b-ray139pq5i] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.new-version[b-ray139pq5i] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

.new-version label[b-ray139pq5i] {
    width: 100%;
    font-size: 13px;
}

.new-version[b-ray139pq5i]  .input {
    width: 11rem;
}

.hours-toggle[b-ray139pq5i] {
    justify-content: flex-end;
}

.choice[b-ray139pq5i] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    padding-top: 1.6rem;
}

@media (max-width: 720px) {
    .week-day[b-ray139pq5i] {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .new-version[b-ray139pq5i] {
        margin-left: 0;
    }

    .choice[b-ray139pq5i] {
        padding-top: 0;
    }
}
/* /Components/Pages/Schedules/SchedulesListPage.razor.rz.scp.css */
/* Scoped: only elements written in SchedulesListPage.razor. Cards, tables and tags are global. */

.name[b-jtkw69dcuj] {
    white-space: nowrap;
}

.name a[b-jtkw69dcuj] {
    color: var(--color-text);
    font-weight: 600;
}

.name a:hover[b-jtkw69dcuj] {
    color: var(--color-accent);
}
/* /Components/Pages/Settings/AppointmentReasonsPage.razor.rz.scp.css */
/* Scoped: only elements written in AppointmentReasonsPage.razor. */

.actions[b-stt7sgokq7] {
    white-space: nowrap;
}

.inactive td[b-stt7sgokq7] {
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* /Components/Pages/Settings/CabinetsPage.razor.rz.scp.css */
/* Scoped: only elements written in CabinetsPage.razor. The cards, the form grid and the swatch are global
   (app.css); InputText takes the global .input style, so the colour input's size is set there
   through ::deep. */

.list-header[b-aca4wh05mh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.show-inactive[b-aca4wh05mh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 14px;
}

.name[b-aca4wh05mh],
.actions[b-aca4wh05mh] {
    white-space: nowrap;
}

.inactive td[b-aca4wh05mh] {
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

[b-aca4wh05mh] .color-input {
    width: 4.5rem;
    height: 38px;
    padding: 3px;
    cursor: pointer;
}
/* /Components/Pages/Settings/ClinicSettingsPage.razor.rz.scp.css */
/* Scoped: only elements written in ClinicSettingsPage.razor. The cards and the form grid
   (.settings-section, .settings-grid) are global, in app.css, shared by the settings pages;
   framework inputs (InputText, InputDate…) take the global .input style. */

.settings-fixed[b-p21ctlevzi] {
    margin: 0;
    padding: 6px 0;
    font-size: 14px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.week[b-p21ctlevzi] {
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
}

.week-day[b-p21ctlevzi] {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    align-items: start;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-divider);
}

.week-day:last-child[b-p21ctlevzi] {
    border-bottom: 0;
}

.week-day-name[b-p21ctlevzi] {
    font-weight: 600;
    padding-top: 6px;
}

.week-day-intervals[b-p21ctlevzi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    min-height: 36px;
}

.interval[b-p21ctlevzi] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.interval-time[b-p21ctlevzi] {
    width: 7.5rem;
}

.closures[b-p21ctlevzi] {
    margin: 0.75rem 0 1rem;
}

@media (max-width: 720px) {
    .week-day[b-p21ctlevzi] {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
}
/* /Components/Pages/Staff/StaffListPage.razor.rz.scp.css */
/* Scoped: only elements written in StaffListPage.razor. Cards, tables, tags and the colour
   swatch are global (app.css, nocturne.css). */

.page-header[b-d1s94wbboy] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0 1rem;
    max-width: 960px;
}

/* When the button wraps under the text, keep it off whatever comes next (tabs, filters). */
.page-header > .btn[b-d1s94wbboy] {
    margin-bottom: 1rem;
}

.list-header[b-d1s94wbboy] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.show-inactive[b-d1s94wbboy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 14px;
}

.name[b-d1s94wbboy],
.actions[b-d1s94wbboy] {
    white-space: nowrap;
}

.name a[b-d1s94wbboy] {
    color: var(--color-text);
    font-weight: 600;
}

.name a:hover[b-d1s94wbboy] {
    color: var(--color-accent);
}

.inactive td[b-d1s94wbboy] {
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* /Components/Pages/Staff/StaffMemberPage.razor.rz.scp.css */
/* Scoped: only elements written in StaffMemberPage.razor. Cards, the form grid and the swatch
   are global (app.css); InputText takes the global .input style, so the colour input's size is
   set through ::deep. */

.member-state[b-0s612jsnfs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    max-width: 960px;
}

.choice-list[b-0s612jsnfs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin: 0.75rem 0 0.25rem;
}

.choice[b-0s612jsnfs] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.choice .swatch[b-0s612jsnfs] {
    margin-right: 0;
}

[b-0s612jsnfs] .color-input {
    width: 4.5rem;
    height: 38px;
    padding: 3px;
    cursor: pointer;
}
/* /Components/Pages/Treatments/ToothHistory.razor.rz.scp.css */
/* Scoped: the per-tooth history — the chart, and the chosen tooth's treatments beside it
   (under it, on narrower screens). */

.tooth-history[b-ha1nperow6] {
    margin-bottom: 1.25rem;
}

.chart-toolbar[b-ha1nperow6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.segmented[b-ha1nperow6] {
    display: inline-flex;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.segmented button[b-ha1nperow6] {
    border: 0;
    background: transparent;
    color: var(--color-text);
    padding: 4px 12px;
    font-size: 13px;
}

.segmented button.active[b-ha1nperow6] {
    background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
    color: var(--color-accent);
    font-weight: 600;
}

.history-layout[b-ha1nperow6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.chart-scroll[b-ha1nperow6] {
    overflow-x: auto;
}

.chart-scroll[b-ha1nperow6]  .chart.arches {
    max-width: 420px;
}

.chart-scroll.rows[b-ha1nperow6]  .chart.rows {
    min-width: 640px;
}

.history-panel[b-ha1nperow6] {
    min-width: 0;
}

@media (min-width: 900px) {
    .history-layout[b-ha1nperow6] {
        grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
        align-items: start;
    }

    .history-layout:has(.chart-scroll.rows)[b-ha1nperow6] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Treatments/TreatmentList.razor.rz.scp.css */
/* Scoped: a list of performed treatments, with the fix form under one of them. */

.sessions[b-80f1wa4372] {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.75rem;
    border-left: 2px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
    font-size: 13px;
}

.sessions li[b-80f1wa4372] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.6rem;
    padding: 0.1rem 0;
}

.session-when[b-80f1wa4372] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.session-what[b-80f1wa4372] {
    font-weight: 600;
}

.session-price[b-80f1wa4372] {
    font-variant-numeric: tabular-nums;
}

.session-done[b-80f1wa4372] {
    color: var(--color-accent);
    font-weight: 600;
}

.session-note[b-80f1wa4372] {
    flex-basis: 100%;
    white-space: pre-line;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Corrections (6.3): a corrected or voided record stays, struck through, with its reason. */
.sessions li.superseded > .session-when[b-80f1wa4372],
.sessions li.superseded > .session-what[b-80f1wa4372],
.sessions li.superseded > .session-price[b-80f1wa4372],
.sessions li.superseded > .session-note[b-80f1wa4372] {
    text-decoration: line-through;
    opacity: 0.6;
}

.session-tag[b-80f1wa4372] {
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
    font-style: italic;
}

.session-actions[b-80f1wa4372] {
    display: inline-flex;
    gap: 0.15rem;
    margin-left: auto;
}

.session-actions .btn[b-80f1wa4372] {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12px;
}

.danger[b-80f1wa4372] {
    color: var(--color-danger);
}

.session-fix[b-80f1wa4372] {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0.3rem 0 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--color-divider);
    border-radius: 8px;
}

.session-fix-fields[b-80f1wa4372] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem 1rem;
}

.session-fix-fields label[b-80f1wa4372] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.session-completes[b-80f1wa4372] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.session-fix-actions[b-80f1wa4372] {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 720px) {
    .session-fix-fields[b-80f1wa4372] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Treatments/VisitTreatments.razor.rz.scp.css */
/* Scoped: the visit's treatments, in the appointment dialog. */

.visit-treatments[b-mgeeiulfmu] {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-divider);
}

.visit-form[b-mgeeiulfmu] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.6rem;
    font-size: 13px;
}

.visit-items[b-mgeeiulfmu],
.visit-extras[b-mgeeiulfmu],
.visit-results[b-mgeeiulfmu] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.visit-items li[b-mgeeiulfmu] {
    padding: 0.2rem 0;
}

.visit-item[b-mgeeiulfmu] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    cursor: pointer;
}

.visit-pick[b-mgeeiulfmu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin: 0.25rem 0 0.35rem 1.6rem;
}

.visit-pick .input[b-mgeeiulfmu] {
    flex: 1 1 14rem;
}

.visit-completes[b-mgeeiulfmu] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
}

.visit-extras li[b-mgeeiulfmu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.visit-extra-form[b-mgeeiulfmu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--color-divider);
    border-radius: 8px;
}

.visit-extra-form label[b-mgeeiulfmu] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.visit-extra-title[b-mgeeiulfmu],
.visit-extra-note[b-mgeeiulfmu] {
    grid-column: 1 / -1;
}

.visit-extra-form > .btn[b-mgeeiulfmu] {
    justify-self: start;
}

.visit-actions[b-mgeeiulfmu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.35rem;
}

@media (max-width: 560px) {
    .visit-extra-form[b-mgeeiulfmu] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Shared/PatientQuickSearch.razor.rz.scp.css */
/* Scoped: the header's quick patient search. All of this markup is the component's own. */

.quick-search[b-13ppjj5zxp] {
    position: relative;
    flex: 1 1 auto;
    max-width: 26rem;
    min-width: 0;
}

.quick-search-icon[b-13ppjj5zxp] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
    pointer-events: none;
}

.quick-search-input[b-13ppjj5zxp] {
    width: 100%;
    height: 2.4rem;
    padding: 0 0.85rem 0 2.25rem;
    border: 1px solid var(--color-divider);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.92rem;
}

.quick-search-input[b-13ppjj5zxp]::placeholder {
    color: color-mix(in srgb, var(--color-text) 48%, transparent);
}

.quick-search-input:focus[b-13ppjj5zxp] {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.quick-search-panel[b-13ppjj5zxp] {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    width: max(100%, 22rem);
    max-width: calc(100vw - 2rem);
    z-index: 30;
    padding: 0.35rem;
    border: 1px solid var(--color-divider);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.14));
}

.quick-search-results[b-13ppjj5zxp] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quick-search-item[b-13ppjj5zxp] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    cursor: pointer;
}

.quick-search-item.active[b-13ppjj5zxp] {
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

.quick-search-name[b-13ppjj5zxp] {
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.92rem;
}

.quick-search-meta[b-13ppjj5zxp] {
    display: flex;
    gap: 0.75rem;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.quick-search-tag[b-13ppjj5zxp] {
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    border: 1px solid var(--color-divider);
    border-radius: 999px;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    font-size: 0.72rem;
    font-weight: 500;
}

.quick-search-empty[b-13ppjj5zxp] {
    margin: 0;
    padding: 0.5rem 0.65rem;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
    font-size: 0.88rem;
}

.quick-search-all[b-13ppjj5zxp] {
    display: block;
    margin-top: 0.25rem;
    padding: 0.45rem 0.65rem;
    border-top: 1px solid var(--color-divider);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Phones: the box takes the room the icon-only account links leave. */
@media (max-width: 480px) {
    .quick-search-input[b-13ppjj5zxp] {
        font-size: 16px; /* under 16px iOS zooms the page on focus */
    }
}